How to add annotations/label to each connector and trigger the event on change of it.

[AB]

I am trying to achieve the following requirement:

Add the CONNECTOR from the pallet to ej-diagram and each time I am adding the connector I would want an ANNOTATION or LABLE to be attached to that CONNECTOR and should be editable. On Edit of the LABEL/ANNOTATION then I want to TRIGGER a function to capture the value just to know which CONNECTOR has what ANNOTATION/LABLE associated with it as it includes the COUNT value which is important for me for further programming.

My EJ-DIGRAM:

<div class="col-sm-12">

<ej-diagram id="diagram" e-height="80vh" e-width="100%" e-nodeCollectionChange="collectionChange" e-connectorCollectionChange="connectorCollectionChange" e-connectorTargetChange="connectorTargetChange" e-connectorSourceChange="connectorSourceChange"></ej-diagram>

</div>

Here is what I have tried so far:

I tried adding the ANNOTATIONS to the CONNECTOR during the creation of each CONNECTOR but for some reason, it does not show up with the CONNECTOR at all and I see just the CONNECTOR:

//Add connector to diagram on click

var connectorCounter = 1;

var connectorArray = [];

$scope.ConnectorAdd = function(){

var diagram = angular.element("#diagram").ejDiagram("instance");

var name = 'Connector'+connectorCounter;

diagram.model.drawType = {

name : name, 

type : "connector",

addInfo : {name:name},

annotations : [{

content : "ConnectorAnnotation"

}]

}

var tool = diagram.tool();

diagram.update({ tool: tool | ej.datavisualization.Diagram.Tool.DrawOnce })

connectorCounter++;

var connectorObj = new Object();

connectorObj.Name = name;

connectorArray.push(connectorObj);

}

I tried adding the LABELS to the CONNECTOR and it works fine and I am able to edit it but I am unable to get the value of it. After the change of the leable I was hoping the function connectorCollectionChange to trigger but for some reason, the connectorCollectionChange does not trigger at all.

//Add connector to diagram on click

var connectorCounter = 1;

var connectorArray = [];

$scope.ConnectorAdd = function(){

var diagram = angular.element("#diagram").ejDiagram("instance");

var name = 'Connector'+connectorCounter;

diagram.model.drawType = {

name : name, 

type : "connector",

addInfo : {name:name},

labels : [{

text : ""

}]

}

var tool = diagram.tool();

diagram.update({ tool: tool | ej.datavisualization.Diagram.Tool.DrawOnce })

connectorCounter++;

var connectorObj = new Object();

connectorObj.Name = name;

connectorArray.push(connectorObj);

}

Can you please let me know if there is a way to ADD ANNOTATION/CONNECTOR for each CONNECTOR on DRAG and DROP and trigger some function to get the VALUES of that ANNOTATION/LABEL on change of it so that I can associate it with the respective CONNECTOR.

[Aravind Ravi]

Hi AB, 

 

We have created a sample to identify the label value after changed. By using the textChange event, we can get the label content , after it gets changed. When we edit or change the node or connector label, textChange event gets raised. In the textChange event arguments, through value argument we get the changed label, and through label argument, we get the label properties. Please refer below code snippet for how to use the text change event. 

 

<ej-diagram id="diagram" e-height="600px" e-width="100%"  e-nodes="nodes" e-nodeCollectionChange="collectionChange" e-connectorCollectionChange="connectorCollectionChange" e-selectionChange="selectionChange" e-textChange="textChange"></ej-diagram> 

 

function textChange(args) { 

        if(args.elementType === "connector") { 

// Returns the changed label value 

          console.log(args.value); 

// Returns the connector’s label 

          console.log(args.label); 

        } 

      } 

 

Sample: http://jsplayground.syncfusion.com/v2tz31jr 

 

Regards 

Aravind Ravi 

[AB]

Thanks a lot, Aravind. This was exactly what I was looking for.

Thank you :)

[Aravind Ravi]

Hi AB, 

 

Most Welcome. 

 

Regards 

Aravind Ravi 

[AB]

Hi Aravind Ravi,

I have one small doubt, Is there any possibility where I can add multiple labels to CONNECTOR? Currently, I am able to add the single LABEL to the CONNECTOR and read the value when it changes using the e-textChange="textChange" but in my requirement I need multiple LABELS to understand some of the property so I am looking for an option. If not able to multiple can you please suggest some alternative approach to achieve the same result?

Background of the requirement:

I have 2 arrays A and B that are located within the Syncfusion HTML Shapes and this HTML shape would split into multiple HTML Shapes so I need to understand how many elements from array A goes to different NODE and How many elements from array B goes to different NODE. Previously I have single array A so I was able to use the single LABLE directly to split the elements but since now I have the array B I need one more LABEL to understand the different split for A and B differently. Here is an screenshot for your reference:

As you can EVENT1 is a PARENT NODE which has 2 array A and B. It also has 2 CHILD NODES EVENT2 and EVENT3 which would get the data from EVENT1 based on the number specified in the LABEL of CONNECTOR. If there is a single array then I can use this single LABLE but since the splitting amount from Array can be different I need 2 labels for each CONNECTOR. What can I do to achieve the same? Can you please provide some suggestions or alternatives? I hope I was able to explain the requirement correctly.

Here is the code:

<ej-diagram id="diagram" e-height="80vh" e-width="100%" e-nodeCollectionChange="nodeCollectionChange" e-connectorCollectionChange="connectorCollectionChange" e-connectorTargetChange="connectorTargetChange" e-connectorSourceChange="connectorSourceChange" e-textChange="textChange"></ej-diagram>

//Add connector to diagram on click

$scope.ConnectorAdd = function(){

var diagram = angular.element("#diagram").ejDiagram("instance");

var name = 'Connector'+connectorCounter;

diagram.model.drawType = {

name : name, 

type : "connector",

addInfo : {name:name},

labels : [{text:''}]

}

var tool = diagram.tool();

diagram.update({ tool: tool | ej.datavisualization.Diagram.Tool.DrawOnce })

connectorCounter++;

var connectorObj = new Object();

connectorObj.Name = name;

connectorArray.push(connectorObj);

}

//Get the text for the connector after adding the count

function textChange(args) {

if(args.elementType === "connector") {

var connectorName = args.element.addInfo.name;

for(var t=0; t<connectorArray.length; t++)

{

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

{

connectorArray[t].Count = args.value;

break;

}

}

}

}

[Aravind Ravi]

Hi AB, 

 

We have created a sample to add two labels to the node. By using the insertLabel public API method we can able to add insert multiple labels to the node. In the insertLabel method pass for which connector you want to add connector , JSON to define the label and in which index you want to insert the label into connector. By using the alignment and segmentOffset properties of the label you can position the label in the connector. Please refer the below code snippet 

 

document.getElementById('addLabel').onclick = function() { 

         var diagram = $("#diagram").ejDiagram("instance"); 

         var connector = diagram.selectionList[0]; 

         diagram.insertLabel(connector.name, {fontColor:"red", text:"Label-1", alignment: "before", segmentOffset: 0}, 0); 

         diagram.insertLabel(connector.name, {fontColor:"green", text:"Label-2", alignment: "after", segmentOffset: 1}, 1); 

       } 

 

We have attached a sample for your reference. Please find the sample in below link 

 

Sample: http://jsplayground.syncfusion.com/eiy5zesb 

 

For more information about how to use insertLabel method and position the label, please refer to below UG documentation link 

 

Insert label: https://help.syncfusion.com/api/js/ejdiagram#methods:insertlabel 

 

Label position: https://help.syncfusion.com/angularjs/diagram/label#label-alignment-with-respect-to-segments 

 

Regards 

Aravind Ravi 

[AB]

Thanks a lot, Aravind Ravi for the response. This is exactly what I was looking for. I just changed a few things and added the function in connectorCollectionChange so the Labels would be added automatically when the CONNECTOR is created instead of the LABELS button click.

I have one small doubt if a user is changing the values of the LABELS then I am using the e-textChange="textChange" function to capture the values now since we have 2 LABELS how can I know the user is changing which particular LABLE for a CONNECTOR? It can be Label-1 or Label-2.

I tried checking the properties of ARGS after the textChange but most of the properties seem to be the same for both the LABELS except for the properties in args.element.lables where I am able to get both the LABEL values but I will not know which one exactly changed. Is there any other way to identify the user is changing which particular labels?

Here is my code:

<ej-diagram id="diagram" e-height="80vh" e-width="100%" e-nodeCollectionChange="nodeCollectionChange" e-connectorCollectionChange="connectorCollectionChange" e-connectorTargetChange="connectorTargetChange" e-connectorSourceChange="connectorSourceChange" e-textChange="textChange"></ej-diagram>

//Get the text for the connector after adding the count

function textChange(args) {

if(args.elementType === "connector")

{

var connectorName = args.element.addInfo.name;

console.log(args)

                console.log(args.element.labels)

}

}

[Aravind Ravi]

Hi AB, 

 

When you add the label to the connector , you can add the name to the connector to differentiate to it. By using the name property of the label we can able to identify which connector label gets edited in the diagram. When we edit or change the connector label, textChange event gets raised. In the textChange event arguments, through value argument we get the changed label, and through label argument, we get the label properties. Through label’s name argument we can check which label gets edited in the diagram and through element argument we can check which connector’s label gets edited. Please refer to below code snippet 

 

var diagram = $("#diagram").ejDiagram("instance"); 

         var connector = diagram.selectionList[0]; 

         diagram.insertLabel(connector.name, {name: connector.name + "Label1" , fontColor:"red", text:"Label-1", alignment: "before", segmentOffset: 0}, 0); 

         diagram.insertLabel(connector.name, {name: connector.name + "Label2", fontColor:"green", text:"Label-2", alignment: "after", segmentOffset: 1}, 1); 

 

 

function textChanged(args) { 

          if(args.elementType = "connector") { 

// Get the label name 

              console.log(args.label.name); 

// element args returns the connector 

            console.log(args.element); 

 

          } 

      } 

 

 

In the above snippet we have added a connector.name + label1 to the label name. Similarly you can add name for connector label in your sample to differentiate it. 

 

Regards 

Aravind Ravi 

[AB]

Thanks a lot, Aravind Ravi for all the help and detailed explanation. This working perfectly. Thanks again for all the help.

[Aravind Ravi]

Hi AB, 

Most welcome. 

Regards 

Aravind Ravi