Why does the connectorSourceChange and connectorTargetChange function does not trigger for the first time when I create connector and connect it to the PORT of NODE

[AB]

Can you please explain to me why am I facing this issue?

I want to find the SOURCE NODE and TARGET NODE for each of the CONNECTOR that has been created in ejDiagram. Hence, I am using the functions connectorSourceChange and connectorTargetChange but these functions do not get fired when I create a new CONNECTOR and connect it with the SOURCE and TARGET NODE. They only fire for the second time when I change the SOURCE or DESTINATION? How can I find the SOURCE NODE and DESTINATION NODE for the first time itself when I create the CONNECTOR and connect it with the PORTS of SOURCE and TARGET?

Here is my code:

var connectorArray = [];

//Collector Collection  

function connectorCollectionChange(args)

{

console.log("CONNECTOR COLLECTION CHANGE");

if(args.changeType == "remove" && args.state == "changed")

{

var connectorName = args.element.addInfo.name;

for(var r=0; r

{

if(connectorArray[r].Name == connectorName)

{

connectorArray.splice(r,1)

break;

}

}

}

}

     

//Connector Source change  

function connectorSourceChange(args)

{

if(args.dragState == "completed" && args.element.sourceNode != null)

{

console.log("CONNECTOR SOURCE CHANGE");

var connectorName = args.element.addInfo.name;

for(var t=0; t

{

if(connectorArray[t].Name == connectorName)

{

connectorArray[t].SourceNode = args.element.sourceNode;

connectorArray[t].TargetNode = args.element.targetNode;

break;

}

}

}

}

      

function connectorTargetChange(args)

{

if(args.dragState == "completed" && args.element.targetNode != null)

{

alert("CONNECTOR TARGET CHANGE")

console.log("CONNECTOR TARGET CHANGE");

var connectorName = args.element.addInfo.name;

for(var t=0; t

{

if(connectorArray[t].Name == connectorName)

{

connectorArray[t].SourceNode = args.element.sourceNode;

connectorArray[t].TargetNode = args.element.targetNode;

break;

}

}

}

}  

As you can from the attached screen recording when I first created the CONNECTOR and connected it with NODES it didn't do anything but I had to change the TARGET NODE again to make the connectorTargetChange function fire.

Attachment: captured_902ffbb2.7z

[Aravind Ravi]

Hi AB, 

 

At first time , when we add connector sourceChange and targetChange event do not gets trigger. When we add connector at run time , connectorCollectionChange event gets triggered. Through connectorCollectionChange event we can get the in which node connector gets connected using connector sourceNode and targetNode properties.  Please refer below code snippet 

 

<ej-diagram id="diagram" e-height="600px" e-width="100%" e-nodeCollectionChange="collectionChange"  

e-connectorCollectionChange="connectorCollectionChange" ></ej-diagram> 

 

angular.module('syncApp', ['ejangular']) 

           .controller('diagramCtrl', function ($scope) {  

           

              $scope.collectionChange = "collectionChanged"; 

             $scope.connectorCollectionChange = "connectorCollectionChange"; 

             

           }); 

 

function connectorCollectionChange(args) { 

        if(args.changeType === 'insert' && args.state === 'changed') { 

            console.log("Source Node -> " + args.element.sourceNode); 

            console.log("Target Node -> " + args.element.targetNode); 

        } 

      } 

 

For more information about connectorCollectionChange event, please refer to below UG documentation link 

 

UG Link: https://help.syncfusion.com/api/js/ejdiagram#events:connectorcollectionchange 

 

Regards 

Aravind Ravi 

[AB]

Thanks a lot for the clarification.

[Gowtham Gunashekar]

Hi AB, 

  

Thanks for your update. 

  

Regards, 

Gowtham