How to get the Source and Target Node custom assigned values associated with Connector

[AB]

I am creating the HTML Nodes and connecting these Nodes with Connectors. If the Source/Target of the Connectors changes then I would like to get the Node information of the changed Source/Target. 

I am creating a unique value and assigning it to each of the Nodes (addInfo.name). If the Source/Target value of the Connector changes then I would like to get these custom-created values. How to do this?

As of now, I am able to get the unique NodeID which is assigned by Syncfusion "args.connector.sourceID" and "args.connector.targetID" but I am unable to get this custom value. I can see the custom values in following fields: "args.element.sourceWrapper.description" and "args.element.targetWrapper.description" but I am not sure if this is a good way to do it. Is there any other way to do it?

My Vue component:

<template>

<div>

<div class="container-fluid">

<div class="row">

<div class="col-md-6">

<button class="btn btn-primary btn-sm" @click="addConnector()">

Add Connector

</button>&nbsp;

<button class="btn btn-primary btn-sm" @click="addNode()">

Add Event

</button>&nbsp;

</div>

</div>

<div class="row">

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

<div id="app">

<ejs-diagram

id="diagram"

ref="diagramObj"

:width="width"

:height="height"

style="display: block"

:node-template="nodeTemplate"

:collection-change="diagramCollectionChange"

:source-point-change="connectorSourcePointChange"

:target-point-change="connectorTargetPointChange"

/>

</div>

</div>

</div>

</div>

</div>

</template>

<script>

import Vue from 'vue'

import { DiagramPlugin, DiagramTools, NodeConstraints, ConnectorConstraints, PortVisibility } from '@syncfusion/ej2-vue-diagrams'

import NodeDesignTemplate from '@/components/NodeDesignTemplate.vue'

Vue.use(DiagramPlugin)

let diagramInstance

export default {

name: 'App',

data () {

return {

width: '100%',

height: '700px',

nodeCounter: 0,

nodeArray: [],

connectorCounter: 0,

connectorArray: [],

nodeTemplate () {

return { template: NodeDesignTemplate }

}

}

},

mounted () {

diagramInstance = this.$refs.diagramObj.ej2Instances

},

methods: {

// On click of the add node button add the node to diagram

addNode () {

const ports = [

{ name: 'port1', offset: { x: 0, y: 0.5 }, shape: 'circle', visibility: PortVisibility.Visible },

{ name: 'port2', offset: { x: 1, y: 0.5 }, shape: 'circle', visibility: PortVisibility.Visible },

{ name: 'port3', offset: { x: 0.5, y: 0 }, shape: 'circle', visibility: PortVisibility.Visible },

{ name: 'port4', offset: { x: 0.5, y: 1 }, shape: 'circle', visibility: PortVisibility.Visible }

]

const name = 'node' + this.nodeCounter

// const label = [{ text: name, offset: { x: 0.5, y: 0.06 } }]

const drawingshape = {

type: 'HTML',

value: {

select: this.nodeCounter

}

}

const node = {

addInfo: { name },

name,

shape: drawingshape,

ports,

style: {

fill: 'white',

strokeColor: 'black'

},

annotations: [

{

content: name,

offset: { x: 0.5, y: 0.06 }

}

],

constraints: NodeConstraints.Default & ~(NodeConstraints.OutConnect | NodeConstraints.InConnect)

}

diagramInstance.drawingObject = node

// To draw an object once, activate draw once

diagramInstance.tool = DiagramTools.DrawOnce

diagramInstance.dataBind()

// Store Node information in Node Array

this.nodeCounter++

const nodeObj = {}

nodeObj.name = name

this.nodeArray.push(nodeObj)

},

// 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 },

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)

},

// when we add a new Node/Connector into the diagram, collectionchange event triggers

diagramCollectionChange (args) {

// If new connector has been added then add the label to the connector

if (args.element.propName === 'connectors' && args.type === 'Addition' && args.state === 'Changed' && args.element.status === 'New') {

// Save the SourceNode and TargetNode associated with the Connectors

const connector = this.connectorArray.find(con => con.name === args.element.addInfo.name)

connector.sourceNode = args.element.sourceWrapper !== undefined ? args.element.sourceWrapper.description : ''

connector.targetNode = args.element.targetWrapper !== undefined ? args.element.targetWrapper.description : ''

} else if (args.element.propName === 'connectors' && args.type === 'Removal' && args.state === 'Changed') {

// If the connector has been deleted then remove the respective information from Connector Array

this.connectorArray.splice(this.connectorArray.findIndex(con => con.name === args.element.addInfo.name), 1)

} else if (args.element.propName === 'nodes' && args.type === 'Removal' && args.state === 'Changed') {

// If the Node has been deleted then remove the respective information from Node Array

this.nodeArray.splice(this.nodeArray.findIndex(node => node.name === args.element.addInfo.name), 1)

}

},

// On change of the Connector Source call the function to get the sourcePoint value and store it in connectorArray

connectorSourcePointChange (args) {

if (args.state === 'Completed' && args.name === 'sourcePointChange' && args.connector.sourceID !== undefined) {

const connector = this.connectorArray.find(con => con.name === args.connector.addInfo.name)

connector.sourceNode = args.connector.sourceWrapper !== undefined ? args.connector.sourceWrapper.description : ''

}

},

// On change of the Connector Target call the function to get targetPoint value and store it in connectorArray

connectorTargetPointChange (args) {

if (args.state === 'Completed' && args.name === 'targetPointChange' && args.connector.targetID !== undefined) {

const connector = this.connectorArray.find(con => con.name === args.connector.addInfo.name)

connector.targetNode = args.connector.targetWrapper !== undefined ? args.connector.targetWrapper.description : ''

}

},

}

}

</script>

<style>

@import "@/node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";

</style>

My Node template:

<template>

<div id="app" class="nodeContainer">

<span> {{ $data.data.annotations[0].content }}</span>

<button ref="Btn" class="btn btn-info btn-sm btnhtml" :value="$data.data.annotations[0].content" @click="showEventInfoModal">

EventInfo

</button>

</div>

</template>

<script>

export default ({

mounted () {

},

methods: {

// On click of the EventInfo button within each node call the method to display modal and get info

showEventInfoModal (value) {

alert(value.target.value)

}

}

})

</script>

<style scoped>

.nodeContainer {

border: 1px solid black;

background-color: white;

color: black;

font-size: 16px;

cursor: pointer;

height:100%;

width: 100%;

display: flex;

justify-content: center;

align-items: center;

}

</style>

[Sivakumar Sekar]

Hi AB, 

We have added the sample link and a video link to demonstrate how to get the target or source node when changing the connector connection. We can get the source or target node by using the diagram getObject API. It will return the node based on the specified ID. Please refer to the code snippet to get the node based on its ID. 

connectorSourcePointChange (args) { 

      if (args.state === 'Completed' && args.name === 'sourcePointChange' && args.connector.sourceID !== undefined) { 

        var sourceNode = diagramInstance.getObject(args.connector.sourceID); 

        alert(sourceNode.addInfo.name); 

        const connector = this.connectorArray.find(con => con.name === args.connector.addInfo.name) 

        connector.sourceNode = args.connector.sourceWrapper !== undefined ? args.connector.sourceWrapper.description : '' 

      } 

    } 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/forums169810new-1812187418  

Video Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/1698102065253187  

If we misunderstood your requirement, please share more details or replicate the issue in the shared sample. This will be helpful for us to proceed further. 

Regards, 

Sivakumar 

[AB]

@Sivakumar

Thanks a lot for the response. Yes, you have understood my question correctly. Thanks for the response and it's working as expected.

[Sivakumar Sekar]

Hi AB, 

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

Regards,
Sivakumar