Add connector to nodes

[Luis B.Chicaiza]

Hello, i'm working with Diagram in JS. i am dragging the first node diagram and then when i drag next node i want to add a connector between the first node and the new node dragged to Diagram. Could you please help me with the code to do that?

Thank you so much

[Shyam G]

Hi Luis,

Please use drop event to achieve your requirement. please refer to the code example and JSPlayground link below.

Code example:

$("#diagram").ejDiagram({

            //define drop event

            drop:drop,
        });

var lastNode = null;

        function drop(args) {

            var diagram = $("#diagram").ejDiagram("instance");          

            if (lastNode === null) {

                lastNode = args.element;

            }

            else {

                diagram.add({ name: "connect1" + ej.datavisualization.Diagram.Util.randomId, sourceNode: args.element.name, targetNode: lastNode.name })

                lastNode = args.element;

            }
        }

JSPlayground link:https://jsplayground.syncfusion.com/we5d131n

In the above sample, we have used drop event to establish the connection between the node. Also we have an additional feature in the diagram such as AllowDrop constraints for the node. By enabling this constraints, when we drag the node and mouse hover on the another node within the diagram, the highlighter shows on the node(mouse hover node). In the drop event, you can get the highlighter node as a args.target. Using this target element, you can establish the connection between the dropped node and the target node. Also when we drag the node from the symbol palette and drop it into the another node in the diagram, you can get the target in the dragOver event and establish the connection in the drop event. Please refer to the code example.

Code example:

$("#diagram").ejDiagram({

            //define dragOver event

            dragOver: dragOver,             

            //define drop event

            drop:drop,
        });

  var target = null;

        function dragOver(args) {

            var diagram = $("#diagram").ejDiagram("instance");           

            target = args.target;                

        }

 

        function drop(args) {

            var diagram = $("#diagram").ejDiagram("instance");

            if (args.target && diagram.getObjectType(args.target) == "node" || diagram.getObjectType(target) == "node") {

                diagram.add({ name: "connect1" + ej.datavisualization.Diagram.Util.randomId, sourceNode: args.element.name, targetNode: args.target.name?args.target.name:target.name })

            }

            target = null;
        }
Regards,
Shyam G

[Luis B.Chicaiza]

Hello Shyam,

Thanks for you answer, it works, but, what i want too is keep the connectors in the nodes, i mean, i drag the first one, then the second one generates its connector, if i drag a third one i want to keep the first connector and add a new one connector to the new dragged node. In this way we keep the connections always. Is there any way to achieve this behavior?

Thanks

[Shyam G]

Hi Luis,

We suggest you to add a new connector with different name to achieve your requirement. We have modified the JSPlayground link and provided below.

JSPlayground link:https://jsplayground.syncfusion.com/0tvmectd

Regards,
Shyam G

[Shyam G]

Hi Luis,

Please ignore our previous update.

We suggest you to add a new connector with different name. We have modified the JSPlayground link and provided below. Please refer to the code example below

Code example:

        function drop(args) {

                                                . . . . .

                                                . . . . .

                diagram.add({ name: "connect1" + ej.datavisualization.Diagram.Util.randomId(), sourceNode: args.element.name, targetNode: lastNode.name })

                                                . . . . .

 
        }

JSPlayground link:https://jsplayground.syncfusion.com/0tvmectd

Regards,
Shyam G