Port inEdges/outEdges values not updated after deleting an attached connector

Question

As the title reads, I'm facing an issue when I proceed to delete a connector that was previously attached to two node ports in a diagram. After deleting the connector, I found out that the inEdges and outEdges of the involved ports that previously hosted the connection are not updated, and have the id of the deleted connector referenced in both the inEdges for the target node and the outEdges for the source node.

The objects attached here are a mapping of the nodes, node ports and the connector collections of the diagram component at each stage, when the 'Changed' state of each action is already triggered. I've left out the data from the objects that is irrelevant to the case. I'm using the CollectionChange event of the Diagram component to illustrate what happens when deleting an attached connector in three stages: before attaching the connector to two ports, after attaching and after the attached connector is deleted.

Is this is a bug or do I require to do some sort of refresh to my connector and node collections?

Syncfusion version: 18.2.54

Before the connector is attached

{

"event": {

"type": "Addition",

"state": "Changed"

},

"connectors": [],

"nodes": [

{

"id": "RectangleoL5lw",

"ports": [

{

"id": "TiguQ",

"inEdges": [],

"outEdges": []

}

]

},

{

"id": "EllipseEcJy0",

"ports": [

{

"id": "DiHBp",

"inEdges": [],

"outEdges": []

}

]

}

]

}

After the connector is attached

{

"event": {

"type": "Addition",

"state": "Changed"

},

"connectors": [

"connectorPoBgV"

],

"nodes": [

{

"id": "RectangleoL5lw",

"ports": [

{

"id": "TiguQ",

"inEdges": [],

"outEdges": [

"connectorPoBgV"

]

}

]

},

{

"id": "EllipseEcJy0",

"ports": [

{

"id": "DiHBp",

"inEdges": [

"connectorPoBgV"

],

"outEdges": []

}

]

}

]

}

After the connector is deleted

{

"event": {

"type": "Removal",

"state": "Changed"

},

"connectors": [],

"nodes": [

{

"id": "RectangleoL5lw",

"ports": [

{

"id": "TiguQ",

"inEdges": [],

"outEdges": [

"connectorPoBgV"

]

}

]

},

{

"id": "EllipseEcJy0",

"ports": [

{

"id": "DiHBp",

"inEdges": [

"connectorPoBgV"

],

"outEdges": []

}

]

}

]

}

Aravind Ravi · Accepted Answer

Hi Ramirco, 
 
We have created a sample to get the node inEdges and outEdges in the collection change event. By default, in the diagram, we have update the node inEdges and outEdges property after triggered the collectionChange event. So in the collectionChange by using the setTimeOut we can get the node inEdges and outEdges collection after connector gets added and removed from the diagram. Please refer the code snippet and sample below 
 




public collectionChange(args: ICollectionChangeEventArgs) { 
  var arg = args; 
  if(args.state === 'Changed') { 
            setTimeout(() => { 
                alert("diagram.nodes[0].inEdges  : " + ((this.diagram.nodes[0] as Node).inEdges).toString() + " 
 diagram.nodes[0].outEdges  : " + ((this.diagram.nodes[0] as Node).outEdges).toString() + "
diagram.nodes[1].inEdges  : " + ((this.diagram.nodes[1] as Node).inEdges).toString() + "  
diagram.nodes[1].outEdges  : " + ((this.diagram.nodes[1] as Node).outEdges).toString())  
            }); 
        } 
} 
 
Sample: https://stackblitz.com/edit/angular-5umddf 
 
Regards 
Aravind Ravi

Ramiro Olivencia · Answer

Thanks for the reply Aravin.I tested your code and it works ok on my side, but I'm having the issue with the inEdges/outEdges in relation to port elements, not nodes. Have you tested with dedicated ports to see if it behaves in the same way as the example that I attached? I updated the attachments to reflect the difference between nodes and ports state after each event takes place.Please take notice to the third event listed here, where the inconsistency between the inEdges/outEdges properties of the nodes and ports take place.Before the connector is attached{  "event": {    "type": "Addition",    "state": "Changed"  },  "connectors": [],  "nodes": [    {      "id": "RectangleoL5lw",      "inEdges": [],      "outEdges": [],      "ports": [        {          "id": "TiguQ",          "inEdges": [],          "outEdges": []        }      ]    },    {      "id": "EllipseEcJy0",      "inEdges": [],      "outEdges": [],      "ports": [        {          "id": "DiHBp",          "inEdges": [],          "outEdges": []        }      ]    }  ]}After the connector is attached{  "event": {    "type": "Addition",    "state": "Changed"  },  "connectors": [    "connectorPoBgV"  ],  "nodes": [    {      "id": "RectangleoL5lw",      "inEdges": [],      "outEdges": [        "connectorPoBgV"      ],      "ports": [        {          "id": "TiguQ",          "inEdges": [],          "outEdges": [            "connectorPoBgV"          ]        }      ]    },    {      "id": "EllipseEcJy0",      "inEdges": [        "connectorPoBgV"      ],      "outEdges": [],      "ports": [        {          "id": "DiHBp",          "inEdges": [            "connectorPoBgV"          ],          "outEdges": []        }      ]    }  ]}After the connector is deleted{  "event": {    "type": "Removal",    "state": "Changed"  },  "connectors": [],  "nodes": [    {      "id": "RectangleoL5lw",      "inEdges": [],      "outEdges": [],      "ports": [        {          "id": "TiguQ",          "inEdges": [],          "outEdges": [            "connectorPoBgV"          ]        }      ]    },    {      "id": "EllipseEcJy0",      "inEdges": [],      "outEdges": [],      "ports": [        {          "id": "DiHBp",          "inEdges": [            "connectorPoBgV"          ],          "outEdges": []        }      ]    }  ]}

Aravind Ravi · Answer

Hi Ramiro, 

We are validating your requirements and update you with more details on August 25th 2020. 

Regards 
Aravind Ravi

Aravind Ravi · Answer

Hi Ramiro,    
    
Reported Issue : Port Inedge and outedge not updated properly 
      
We can reproduce the issue and confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and provide the patch on September 15th weekly patch release.    
     
https://www.syncfusion.com/feedback/17343/port-inedge-and-outedge-not-updated-properly 
    
Regards,    
Aravind Ravi

Aravind Ravi · Answer

Hi Ramiro,  
    
We have fixed the reported issue and included it in our patch release (v18.2.58) which is rolled out successfully.   
   
Please upgrade to the latest version packages to resolve this issue.         
https://www.npmjs.com/package/@syncfusion/ej2-diagrams      
  
Regards,  
Aravind Ravi