1. Home
  2. Forum
  3. AngularJS
  4. 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

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

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

3 Replies 1 reply marked as answer
AR Aravind Ravi Syncfusion Team July 30, 2020 04:30 AM UTC

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


Marked as answer
AB AB July 30, 2020 06:54 PM UTC

Thanks a lot for the clarification.

GG Gowtham Gunashekar Syncfusion Team July 31, 2020 01:30 PM UTC

Hi AB, 
  
Thanks for your update. 
  
Regards, 
Gowtham 
 


Loader.
Up arrow icon