Dropping a class model into diagram to add a node

[Deepak Shakya]

Hi,

I am starting off with a diagram and cannot find an example for my scenario. I have an array of class which is represented in UI by list of buttons. It is draggable using Angular CDK. I would like to drag an item (class) onto the diagram which would be added as a node via the datasource of the diagram. Also, would like to connect two nodes without dropping a connector but simply dragging a point from one node to another and using an API to set the source and target node ID on each node.

Is this possible? and How do I go about it?

Thanks in advance.

[Balasubramanian Manikandan]

We have created a sample in which when you drag two nodes from the symbol palette, the connector will create and connect automatically between the two nodes. Refer to the below mentioned sample, still if you face any issues, share us more details such us modify the below sample.

Sample:

https://stackblitz.com/edit/angular-9uc3wb-11tuqj?file=app.component.ts

[Deepak Shakya]

Thanks for responding to my request and sending along the example. It is good to see the scenario but it does not meet my requirement.

1. I would like to drop the model onto the diagram from a list outside the diagram component without using the palette symbol. Is this possible? or do I have to use the Symbol palette?
2. If I have to use the symbol palette, how do I add a custom symbol with default model behind it so that when I drag and drop it onto the diagram it creates a new instance of that class and adds it into the data source for the diagram
   
3. I need to connect the nodes in the diagram without dropping the connector but just connecting the two nodes using port.

Thank you once again.

[Balasubramanian Manikandan]

Query	Solution
I would like to drop the model onto the diagram from a list outside the diagram component without using the palette symbol. Is this possible? or do I have to use the Symbol palette?	No, you must use the symbol palette to drag symbols from outside the diagram.
If I have to use the symbol palette, how do I add a custom symbol with default model behind it so that when I drag and drop it onto the diagram it creates a new instance of that class and adds it into the data source for the diagram.	We included custom shapes in the symbol palette to meet your needs. Refer to the below-mentioned documentation and sample. https://ej2.syncfusion.com/angular/documentation/diagram/shapes#path
I need to connect the nodes in the diagram without dropping the connector but just connecting the two nodes using port.	Set PortVisibility as hover which enable connector tool on hovering the port to achieve your requirement. Refer to the attached video and the sample below.

Sample:

https://stackblitz.com/edit/angular-zih3eh-suxnat?file=app.component.html

[Balasubramanian Manikandan]

Here attached video for port visibility requirement.

Attachment: Connectorsfromports_ce65e464.zip

[Deepak Shakya]

Thanks for sending in the video and asnwering my queries. It does serves my purpose. I just need to understand how I can possibly use the HTML shape to attach a class model to it so that when i drop it in, it creates a new instance of the class in the data source of the diagram.

Please let me know if there are any examples of this. Thanks again

[Balasubramanian Manikandan]

Could you please confirm us whether you need to create a layout with the html node. Also, what are the actions you need to do with the HTML node. If you need to drop html shapes in the diagram, please refer to a documentation to how to render html shapes in the diagram.

Documentation

https://ej2.syncfusion.com/angular/documentation/diagram/shapes#html