Edit Polyline Vertices

Question

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>

Shyam G · Answer

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