Clone a node and connections. Then remove original node. Get error on remove node.

[Jean-Luc Robitaille]

Hello,

I have a situation where I have a nodeA and a nodeB. These nodes are connected with a connection connAB.

I want to clone nodeB, (create an identical node, with a different ID),  lets call it cloneNodeB. 

Then create a clone of connection connAB connected to cloneNodeB, lets call it cloneConnAB.

Finally, I want to remove the original nodeB (which will also automatically remove connAB).

The final result is to have nodeA connected to cloneNodeB by connection cloneConnAB.

This is my code, I keep getting an error when I try to remove nodeB, after creating cloneNodeB and cloneConnAB.

let cloneNodeBID = 'myNewNode123';

let cloneNodeB = {

    id: cloneNodeBID,

    shape: {

        type: 'UmlClassifier',

        classShape: {

            name: 'name123',

            attributes: [{ name: 'hello', type: 'john' }]

        },

        classifier: 'Class'

    },

    offsetX: 350,

    offsetY: 50,

}

// Start by adding the new node cloneNodeB

this.diagram.addNode(cloneNodeB);

// Loop through all connections to find the one that have a target of nodeB

// We want to create a clone, or copy of this connection to connect it to cloneNodeB

for (let i = 0; i < this.diagram.connectors.length; i++) {

     

    const connAB = this.diagram.getConnectorObject(this.diagram.connectors[i].properties.id);

    let cloneConnAB = null;

       

    if (nodeB.properties.id === connAB.targetID) {

// If the connection has nodeB as a target ID, make a copy of it and change the copy's targetID for the id of cloneNodeB

        cloneConnAB = connAB;

        cloneConnAB.targetID = cloneNodeBID;

    }

     

// Add cloneConnAB to the diagram. This connection is connected from nodeA to cloneNodeB

    cloneConnAB && this.diagram.addConnector(cloneConnAB);

};

// Remove nodeB, this will also remove connAB

this.diagram.remove(nodeB);

Here is the error that I get when trying to remove nodeB

TypeError: Cannot read properties of undefined (reading 'sourcePoint')

    at Diagram.updateConnectorProperties (diagram.js:8369:1)

    at Diagram.updateConnectorEdges (diagram.js:8386:1)

    at Diagram.remove (diagram.js:3388:1)

    at Diagram.deleteGroup (diagram.js:7658:1)

    at Diagram.remove (diagram.js:3382:1)

Thanks,

Jean-Luc

[Vivisa Ganesan]

Hi, 

We have created the sample as per your requirement. We have added the cloned nodes and connector at runtime using button. Please refer the sample below. 

Documentation: 

https://ej2.syncfusion.com/vue/documentation/diagram/nodes#addremove-node-at-runtime 

Regards, 

Vivisa 

Attachment: cloneNode_39f14fa9.zip

[Jean-Luc Robitaille]

Hello Vivisa,

Thanks for the reply. Our code is very similar.

But when we create the new connection, I get the original connection with diagram.getConnectorObject then I make this connection equal to the new one. I do this to make sure that everything in the new connection is the same, except the ID and targetID (the targetID changes to connect to the new cloned node).

On your side, you create a new connector object, you give it a new id, you give it the correct source and target id and you give it the type. What about all the styles and other properties.. those will not be copied in the new connector clone?

This is why I use diagram.getConnectorObject to get all the info from the original connector. But this seems to cause a problem when I try to remove the original nodeB.

How can I make the full copy of the connector and make sure everything is the same as the original connector (except for its ID and targetID) without getting an error? This is the error I get when I try to remove nodeB.

TypeError: Cannot read properties of undefined (reading 'sourcePoint')

    at Diagram.updateConnectorProperties (diagram.js:8369:1)

    at Diagram.updateConnectorEdges (diagram.js:8386:1)

    at Diagram.remove (diagram.js:3388:1)

    at Diagram.deleteGroup (diagram.js:7658:1)

    at Diagram.remove (diagram.js:3382:1)

Thanks again for your help.

[Vivisa Ganesan]

Hi,

We have modified and update the sample. You have to remove the actual node and connector before adding the cloned connector. Refer the below attached the sample.

Regards,

Vivisa

Attachment: cloneNode_781dfd52.zip

[Jean-Luc Robitaille]

This works. I had to remove the actual node and connector before adding the cloned connector. 

[Preethi Rajakandham]

Hi Jean,

We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help.

Regards,

Preethi R