Change symbol when drag and drop to diagram

Question

I read in page https://help.syncfusion.com/js/diagram/symbol-palette. Now I want display in menu symbol A, but when drag and drop symbolA change to symbolB. And when drop on diagram symbolB display.
Is it possible with ej2 and guide me, Thanks

Aravind Ravi · Answer

Hi Phuc Hoang, 

We have created a sample to change shape of node while drag and drop in the diagram. When we drag and drop a symbol from palette to diagram, drop event gets triggered. In the drop event we can able to change the shape of the symbol. Please refer to the below code snippet and sample 





//Initializes diagram control 
var diagram = new ej.diagrams.Diagram({ 
  width: '100%', 
  height: '700px', 
  snapSettings: { 
    horizontalGridlines: gridlines, 
    verticalGridlines: gridlines, 
  }, 
 //Trigger drop event 
  drop: drop, 
}); 
diagram.appendTo('#diagram'); 

function drop(args) { 
  var node = args.element; 
  if (node.shape.shape === 'Terminator') { 
    node.shape = { type: 'Basic', shape: 'Ellipse' }; 
  } else if (node.shape.shape === 'Process') { 
    node.shape = { type: 'Basic', shape: 'Star' }; 
  } else if (node.shape.shape === 'Decision') { 
    node.shape = { type: 'Flow', shape: 'Or' }; 
  } else { 
    node.shape = { type: 'Flow', shape: 'Extract' }; 
  } 
} 

Sample: https://stackblitz.com/edit/wz77s8 

For more information about node shapes and how to create symbol palette in EJ2 , please refer to below UG link 

Shapes: https://ej2.syncfusion.com/javascript/documentation/diagram/shapes/ 

Symbol Palette: https://ej2.syncfusion.com/javascript/documentation/diagram/symbol-palette/ 

Regards 
Aravind Ravi

Phuc Hoang · Answer

Thanks very much.