Unable to find Vuejs equivalent function for the diagram from Angular

Question

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. Any help would be really appreciated.

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 something like this in my Vuejs+Syncfusion application. I have it in Angular+Syncfusion:

Answer 1

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