We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Add connector to nodes

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

4 Replies

SG Shyam G Syncfusion Team January 22, 2016 06:08 AM UTC

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



LB Luis B.Chicaiza January 22, 2016 01:55 PM UTC

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


SG Shyam G Syncfusion Team January 25, 2016 04:56 AM UTC

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


SG Shyam G Syncfusion Team January 25, 2016 05:01 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon