How to verify that the connection line connects two nodes

[tmzl]

Hello.
When I drop a connector to  the drawing board，How can i verify that the connection line connects two nodes. If the connector not connect the two nodes,I need remove the connector.

I add the connectorCollectionChanged event, but it can't work.

function connectorCollectionChanged(args) {

    if (args.state === "changed") {

        if (args.element.targetNode == null || args.element.sourceNode == null) {

diagram.remove();

}

    }

}

But the way,Do I have a way to ensure that the flow chart is a complete process, and only one start and end node?

Thank you!

[Shyam G]

Hi Tmzl, 

 

We suspect that while dragging the connector ends, you need to remove the connector only if the connection is not established between the nodes. If yes, please connectorSourceChange and connectorTargetChange events to achieve your requirement. If we misunderstood your requirement, please provide us more details such as video or use case in which you need to remove the connector. 

 

JSplayground link:https://jsplayground.syncfusion.com/1azfwhnp 

 

Regards, 

Shyam G 

[tmzl]

http://js.syncfusion.com/demos/web/dashboard/diagrambuilder/default.html 

For example,I run this demo locally, and i edit the control.js,add connectorSourceChange and connectorTargetChange,

[Shyam G]

Hi Tmzl, 

 

We suspect that you need to remove the connector only if the connection is not established between the nodes while drawing the connector using tools. If yes, please use connectorCollectionChange to achieve your requirement. Also if an existing connector has an connection between the nodes, you can move the connectors and can cancel it in the event(connectorSourceChange and connectorTargetChange) to revert back the connection. You cannot remove it in the event(connectorSourceChange and connectorTargetChange)   

 

Code example: 

$("#diagram").ejDiagram({ 

  

                        //define connectorcollectionchange event 

                        connectorCollectionChange:connectorCollectionChange, 

}); 

 

function connectorCollectionChange(args) {                 

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

                    if (args.element.targetNode === null || args.element.sourceNode === null) { 

                        args.cancel = true;                        

                    }         

            } 

 

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

 

Regards, 

Shyam G 

[tmzl]

Sorry ,I has an question, If i used the connectorCollectionChange , I can't set connectorSourceChange and connectorTargetChange.

I need set connectorCollectionChange ,connectorSourceChange,connectorTargetChange.

If I only set connectorCollectionChange,It removed the connector only if the connection is not established between the nodes when I insert the connector first time.But when I changed the source or target,The connector not removed.

I need valied the connector when i insert or update.

I need help,please~~

[Shyam G]

Hi Tmzl, 

 

We considered “Exception raised while removing connectors in the connectorSourceChange and connectorTargetChange event”as an issue and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 

 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

 

Regards, 

Shyam G