1. Home
  2. Forum
  3. Angular - EJ 2
  4. Port inEdges/outEdges values not updated after deleting an attached connector

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

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": []

        }

      ]

    }

  ]

}




5 Replies 1 reply marked as answer
AR Aravind Ravi Syncfusion Team August 20, 2020 09:27 AM UTC

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() + " \r\n diagram.nodes[0].outEdges  : " + ((this.diagram.nodes[0] as Node).outEdges).toString() + "\r\ndiagram.nodes[1].inEdges  : " + ((this.diagram.nodes[1] as Node).inEdges).toString() + "  \r\ndiagram.nodes[1].outEdges  : " + ((this.diagram.nodes[1] as Node).outEdges).toString())  
            }); 
        } 
} 
 
 
Regards 
Aravind Ravi 
 
 
 


Marked as answer
RO Ramiro Olivencia August 20, 2020 01:05 PM UTC

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": []

        }

      ]

    }

  ]

}


AR Aravind Ravi Syncfusion Team August 21, 2020 06:21 AM UTC

Hi Ramiro, 

We are validating your requirements and update you with more details on August 25th 2020. 

Regards 
Aravind Ravi 


AR Aravind Ravi Syncfusion Team August 26, 2020 05:40 PM UTC

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.    
     
    
Regards,    
Aravind Ravi  


AR Aravind Ravi Syncfusion Team September 15, 2020 04:17 PM UTC

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.         
  
Regards,  
Aravind Ravi 


Loader.
Up arrow icon