Diagram help

[vin]

I want an example to be able to create hierarchy(multiple Horizontal and Vertical levels) of Rectangles ,Circle and connector which can be dragged and added/removed to canvas and save it

[Aravind Ravi]

Hi Vin, 

 

We have created a sample to render node in the symbol palette and able to drag and drop them in the canvas. By using the SymbolPalette we can able to place the node inside palette. The palette shows a set of nodes and connectors. It allows to drag and drop the nodes and connectors into the diagram. For more information symbol palette please refer to below UG documentation link 

 

UG Link: https://ej2.syncfusion.com/angular/documentation/diagram/symbol-palette/ 

 

We have attached a sample for your reference, please find the sample in below link 

 

Sample: https://stackblitz.com/edit/angular-1snext 

 

 

 

Regards 

Aravind R 

[vin]

Thanks

Are there any events we can use

[Aravind Ravi]

Hi Vin, 

 

Yes, when you drag and drop a symbols from palette to diagram means dragEnter and drop event gets fired. So you can use these events in the diagram when you drag and drop a node from palette to diagram. 

 

Drag Enter:  

 

When we drag a symbol from palette and enter into diagram means then dragEnter event gets triggered. In that event you can able to change the symbol size, appearance and shape. Please find the below code snippet for how to use dragEnter event 

 

public dragEnter(args: IDragEnterEventArgs): void { 

    let obj: NodeModel = args.element as NodeModel; 

    if (obj instanceof Node) { 

      let oWidth: number = obj.width; 

      let oHeight: number = obj.height; 

      let ratio: number = 100 / obj.width; 

      obj.width = 100; 

      obj.height *= ratio; 

      obj.offsetX += (obj.width - oWidth) / 2; 

      obj.offsetY += (obj.height - oHeight) / 2; 

      obj.style = { fill: '#357BD2', strokeColor: 'white' }; 

    } 

  } 

 

<ejs-diagram #diagram id="diagram" width="100%" height="700px" [snapSettings]='snapSettings' [getConnectorDefaults]='connDefaults' [getNodeDefaults]='nodeDefaults' (dragEnter)="dragEnter($event)"> 

 

For more information about dragEnter event arguments , please find the below UG documentation link 

 

UG Link: https://ej2.syncfusion.com/documentation/api/diagram/iDragEnterEventArgs/ 

 

Drop: 

 

Drop event gets triggers when a symbol is dragged and dropped from symbol palette to drawing area.  

 

<ejs-diagram #diagram id="diagram" width="100%" height="700px" [snapSettings]='snapSettings' [getConnectorDefaults]='connDefaults' [getNodeDefaults]='nodeDefaults' dragEnter='dragEnter' (created)="diagramCreate($event)" (drop)="drop($event)"> 

 

For more information about drop event arguments , please find the below UG documentation link 

 

UG Link: https://ej2.syncfusion.com/documentation/api/diagram/iDropEventArgs/ 

 

We have attached a sample for how to use the dragEnter event in the diagram. Please find the sample in below link 

 

Sample: https://stackblitz.com/edit/angular-1snext-vzee8e 

 

Please find the below UG link for list of diagram events 

 

Events: https://ej2.syncfusion.com/angular/documentation/api/diagram/#events 

 

Regards 

Aravind Ravi