Cancel Connector Drawing

Question

When a user deletes a node, I call function that gives the user the ability to draw ONE connector:

           diagram.model.drawType = {
                type: "connector",
                segments: [{ type: "straight" }]
            };
            diagram.update({
                tool: ej.datavisualization.Diagram.Tool.DrawOnce
            });

I want that connector to be removed and drawOnce to be re-called if the user draws an invalid connector (one without a target or source). In connectorCollectionChange function I have tried args.cancel = true; which does not remove the connector that was just drawn. And if I try finding and removing the connector from the diagram (as seen below), I receive the attached error message.

        connectorCollectionChange: function (args) {
            let diagram = $("#Diagram").ejDiagram("instance");
            if (args.state == "changed" && args.element.name.includes("connector")) {
                if (args.element.sourceNode && args.element.targetNode) {
                    let node = diagram.findNode(args.element.targetNode);
                    diagram.updateConnector(args.element.name, {
                        constraints: ej.datavisualization.Diagram.ConnectorConstraints.Default & ~ej.datavisualization.Diagram.ConnectorConstraints.Select
                    });
                }
                else {
                    let connector = diagram.findNode(args.element.name);
                    diagram.remove(connector);

                    // Allow user to draw ONE connector
                    diagram.model.drawType = {
                        type: "connector",
                        segments: [{ type: "straight" }]
                    };
                    diagram.update({
                        tool: ej.datavisualization.Diagram.Tool.DrawOnce
                    });
                }
            }
        },

Attachment: removeConnectorError_5f902a65.zip

Aravind Ravi · Accepted Answer

Hi Dsoftware, 
 
In the diagram, ConnectorCollectionChange event gets triggered when we draw a new connector in the diagram using drawing tool. In the collectionChange event in the state of changing you can able to get the connector from args.element and check whether connector is connected to the node or not through sourceNode and targetNode properties. If connector does not connected to both end means then set args.cancel as true. So that newly added connector does not gets added in the diagram. Please refer below code snippet 
 




  function CollectionChange(args) { 
        if (args.state === 'changing' && (args.element.sourceNode === null || args.element.targetNode === null)) { 
            args.cancel = true; 
            console.log("Hit"); 
        } 
    } 
 
We have attached a video demonstration of how collectionChange event gets work. Please find the video in below link 
 
Video: https://www.syncfusion.com/downloads/support/forum/160192/ze/Collection-Change-70369967 
 
Regards 
Aravind Ravi

Aravind Ravi · Answer

Hi DSoftware, 

If you want to remove the newly added connector in the diagram, then please set the args.cancel as true in the state of the changing of the ConnectorCollectionChange event. So that newly added connector does not gets added in the diagram. Please refer below code snippet 





function CollectionChange(args) { 
        if (args.state === 'changing') { 
            args.cancel = true; 
            console.log("Hit"); 
        } 
    } 

In case if the issue still persists, please share us a simple sample illustrating issue. This would help us to serve you better. 

Regards 
Aravind Ravi

dsoftware · Answer

Thanks Aravind,This works but I need to be able to capture the sourceNode & targetNode of the drawn connector (and furthermore, check to see if they even exist) and it doesn't seem like those populate to appear until args.state === "changed".