Vuejs equivalent function for the diagram from Angular

[AB]

I tried a lot but was unable to find a solution. Please help me as I am struck on this issue for more than 1 day.

I have a `Syncfusion` application that has been developed using `Angular`, now I would like to convert that application into `Vuejs` so trying to convert it but I am facing lot of issue as I am unable to find the 1:1 mapping of the `ejsdiagram methods`.

In `Angular` I was using the following code and respective method:

```

<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>

```

Now I am using something like this in `Vuejs`:

```

<div id="app">

<ejs-diagram

id="diagram"

ref="diagramObj"

:width="width"

:height="height"

:collection-change="collectionChange"

:e-connector-collection-change="connectorCollectionChange"

/>

div>

```

I would like to know the `Vuejs` equivalent function for "e-connectorCollectionChange", "e-connectorTargetChange", etc, I searched a lot but could not find any documentation or maybe I missed something. Can someone please guide me through this?

Basically, I want to have some sort of front-end where I am able to create the Node and Connectors as provided in the below attachment. Can you please help me with this issue?

[Sivakumar Sekar]

Hi AB, 

We have added the sample link to demonstrate how to add connector collection change and connector target change in the diagram. Instead of using connector collection change, we can use the collection change event which will be triggered when a new node or connector gets added to the diagram. Using the element argument in collection changed event args, we can able to find whether connector or node gets added to the diagram. For more information, please refer to the following documentation and the code snippet below. 

<ejs-diagram style='display:block' ref="diagramObject" id="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors' :getNodeDefaults='getNodeDefaults' :getConnectorDefaults='getConnectorDefaults' :collectionChange="collectionChange" :sourcePointChange="sourcePointChange" :targetPointChange="targetPointChange" :textEdit="textEdit"> 

</ejs-diagram> 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Events16960811600180  

Documentation Link: https://ej2.syncfusion.com/vue/documentation/diagram/getting-started/  

Sample Browser Link: https://ej2.syncfusion.com/vue/demos/#/bootstrap5/diagram/diagram-events.html  

Regards, 

Sivakumar     

[AB]

@Sivakumar

Thanks a lot for the response and for providing the reference. This is working as expected.

I have one doubt regarding the How can add Label to Connectors at the runtime after the creation of it? I would like to add 3 labels to all my created connectors.

Please find the sample code:

// Add the labels to the connector

console.log(diagramInstance)

const annotation = [{

id: 'label1',

content: 'Annotation'

}]

diagramInstance.addLabels(diagramInstance.nodes[0], annotation)

diagramInstance.dataBind()

Error:

diagram.js:4331 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id')

    at Diagram.addLabels (diagram.js:4331)

[AB]

Thanks a lot for all the help and support you guys provide. Just wanted to let you know I was able to figure out so please do not waste your time trying to analyze this question.

I was able to make it work after trying a lot of things, Providing the sample code for the same so it can be helpful for someone in:

// On click of the add Connector button add the connector between nodes

addConnector () {

const name = 'Connector' + this.connectorCounter

const connectors = {

name,

type: 'Straight',

addInfo: { name },

annotations: [

{ id: 'EPCsCount', content: 'EPC', alignment: 'before', offset: 0.05, style: { color: 'red' } },

{ id: 'ParentIdCount', content: 'ParentID', alignment: 'after', offset: 0.35, style: { color: 'green' } },

{ id: 'QuantitiesCount', content: 'Quantity', alignment: 'before', offset: 0.75, style: { color: 'blue' } }

],

constraints: (ConnectorConstraints.Default & ~ConnectorConstraints.ConnectToNearByNode)

}

diagramInstance.drawingObject = connectors

// To draw an object once, activate draw once

diagramInstance.tool = DiagramTools.DrawOnce

diagramInstance.dataBind()

// Store connector information in Connector Array

this.connectorCounter++

const connectorObj = {}

connectorObj.name = name

this.connectorArray.push(connectorObj)

},

[Gowtham Gunashekar]

 

 

Hi AB, 

 

Thanks for your update. Please let us know whether you need any further assistance on this. 

 

 

Regards  

Gowtham 

[AB]

@Gowtham

Thanks a lot for all the help and for being kind enough ask to for further assistance :) I do not have further queries at the moment on this topic so we can close this question.

But I will surely run into some issues in the coming days when I will be working on `ejs-diagram` so I will reach out to you guys again :) Thanks a lot again, have a great day and weekend ahead :)

Regards,

AB

[Gowtham Gunashekar]

Hi AB, 

Thanks for your update. 

Regards, 

Gowtham