Edit Polyline Vertices

Thread ID:	Created:	Updated:	Platform:	Replies:
147681	Sep 19,2019 02:25 PM UTC	Sep 20,2019 09:45 AM UTC	Angular - EJ 2	1

Subscribe to this post

Tags: Diagram

Daniel

Asked On September 19, 2019 02:25 PM UTC

Working on a simple floorplan diagram in Angular 8 and using the Polyline Connector. I need help understanding how to edit the vertices of the polyline after the line has been initially created? Also how would I add a second polyline to my diagram?

 public created(args: Object): void {
    this.connector = { id: 'connector1', type: 'Polyline' };
    this.diagram.drawingObject = this.connector;
    this.diagram.tool = DiagramTools.DrawOnce;
    this.diagram.dataBind();
}

html template:
<ejs-diagram #diagram id="diagram" width="100%" height="580px" [snapSettings]='snapSettings' (created)='created($event)'>
</ejs-diagram>

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On September 20, 2019 09:45 AM UTC

Hi Daniel,

Query

Response

Working on a simple floorplan diagram in Angular 8 and using the Polyline Connector. I need help understanding how to edit the vertices of the polyline after the line has been initially created?

To edit a polyline connector, we need to inject ConnectorEditing module and set connector Constraints as DragSegmentThumb. please refer to a code example below.

Code example:

//inject connectorediting module

Diagram.Inject(ConnectorEditing)

//button click to add polyline connector

public polylineConnector(): void {

//create connector

let connector = { id: 'connector1', type: 'Polyline', constraints: ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb };

this.diagram.drawingObject = connector;

// tool activated to draw connector once

this.diagram.tool = DiagramTools.DrawOnce;

this.diagram.dataBind();

}

Please refer to the help documentation below that shows the list of diagram features module you can inject it in your application.

Help documentation: https://ej2.syncfusion.com/angular/documentation/diagram/getting-started/#module-injection

Connector constraints documentation

https://ej2.syncfusion.com/angular/documentation/api/diagram/connectorConstraints/

Also how would I add a second polyline to my diagram.

We have created a sample in which we can draw a new polyline connector on each button click.

Sample: https://stackblitz.com/edit/angular-7azq9x?file=app.component.ts

Regards,

Shyam G

Reply | Reply with quote

Edit Polyline Vertices

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US