Flow of connectors in Vue Diagram component
16 Mar 202315 minutes to read
You can get the connectors inward entry and the outward entry through the inEdges and the outEdges properties.
Step1
The inEdges holds the collection of incoming connector/edges of the node. To get the inEdges collection, use the following code snippet.
// gets the incoming connectors of the selected node
let diagram = this.$refs.diagram.ej2Instances;
let connectors = (diagram.selectedItems.connectors[0]).inEdges;Step2
The outEdges holds the collection of outgoing connector/edges of the node. To get the OutEdges collection,use the following code snippet.
//gets the out going connectors of the selected node
let diagram = this.$refs.diagram.ej2Instances;
let connectors = (diagram.selectedItems.connectors[0]).outEdges;Step3
To get the collection of inEdges and outEdges of the nodes, you need to perform iteration as shown as follows. In the following code snippet, the collection of inEdges and outEdges of the selected nodes can be iterated.
let diagram = this.$refs.diagram.ej2Instances;
// Consider the below flow chart
if (diagram.selectedItems.nodes.length) {
// Finds the connectors with in-ward communication
// Initialy if we select the Design node it will retrieve the connector between the design node and the start node
let connectors = (diagram.selectedItems.connectors[0]).inEdges;
for (let i = 0; i < connectors.length; i++) {
// Retrieves the inward linked node's connectors with the particular node.
//if we select the Design node it will retrieve the connectors between the Start and the design node. And connectors in between the Design and Design error node.
let index = diagram.connectors.indexOf(diagram.nameTable[connectors[i]]);
// Retrieves the nodes id connected with the particular node based on the connector's source
// If we select the start node it will retrieve the Design node.
let nodeId = diagram.nameTable[connectors[i]].sourceID;
}
}Like inEdges iterating the need to iterate outEdges collections for the selected node.
let diagram = this.$refs.diagram.ej2Instances;
// Consider the below flow chart
if (diagram.selectedItems.nodes.length) {
// Finds the connectors with out-ward communication
let connectors = (diagram.selectedItems.connectors[0]).outEdges;
for (let i = 0; i < connectors.length; i++) {
// Retrieves the connectors with outward communication with the selected node
// Initially if we select the start node ot will retrieve the connectors between start node and the design node
let index = diagram.connectors.indexOf(diagram.nameTable[connectors[i]]);
// Retrieves the nodes id connected with the particular node based on the connector's target
// If select the Design node it will retrieve the Coding node
let nodeId = diagram.nameTable[connectors[i]].targetID;
}
}In the following sample, the flow of connections is described by various stages from top to bottom.
<template>
<div id="app">
<ejs-diagram style="display:block" ref="diagramObj" id="diagram" :width="width" :height="height" :nodes="nodes" :connectors="connectors" :selectionChange="selectionChange"></ejs-diagram>
</div>
</template>
<script>
import Vue from "vue";
import {DiagramPlugin, NodeConstraints} from "@syncfusion/ej2-vue-diagrams";
Vue.use(DiagramPlugin);
let diagram;
let nodes = [];
let port1 = { id: "port1", offset: { x: 0.5, y: 1 } };
let port = { id: "port", offset: { x: 1, y: 0.5 } };
nodes.push(createNode("node1", 80, 50, "Terminator", "Begin", 100, 35));
nodes.push(
createNode("node2", 250, 50, "Process", "Specify Collection", 120, 25, [port])
);
nodes.push(
createNode("node3", 450, 50, "Decision", "Details Required?", 100, 50, [
port1
])
);
nodes.push(createNode("node4", 600, 50, "Process", "Specify Details", 90, 25));
nodes.push(
createNode("node5", 450, 150, "Process", "Design Collection", 100, 25, [port])
);
nodes.push(
createNode("node6", 450, 250, "Process", "Cluster of events", 100, 25)
);
nodes.push(
createNode("node7", 450, 350, "Process", "Record and analyze Results", 100, 25)
);
nodes.push(
createNode("node8", 600, 250, "Process", "comply Transaction", 100, 25, [
port
])
);
nodes.push(createNode("node9", 600, 350, "Terminator", "End", 100, 35));
nodes.push(createNode("node10", 350,10, "Text", "Select a node to find the inEdges of the selected node",300,35));
let connectors = [];
connectors.push(createConnector("connector1", "node1", "node2", ""));
connectors.push(createConnector("connector2", "node2", "node3", ""));
connectors.push(createConnector("connector3", "node3", "node4", "Yes"));
connectors.push(createConnector("connector4", "node3", "node5", "No"));
connectors.push(createConnector("connector5", "node5", "node6", ""));
connectors.push(createConnector("connector6", "node6", "node7", ""));
connectors.push(createConnector("connector7", "node8", "node6", ""));
connectors.push(createConnector("connector8", "node7", "node9", ""));
connectors.push(
createConnector("connector10", "node4", "node5", "", "", "", "port", 220 ));
function createNode(name, offsetX, offsetY, shape, content, width, height, ports) {
// update node properties
let node = {};
node.id = name;
node.offsetX = offsetX;
if(width){
node.width = width
}
else
node.height = 50;
if(height){
node.height = height;
}
else
node.width = 150;
node.offsetY = offsetY;
let annotation = {};
annotation.content = content;
node.annotations = [annotation];
node.shape = { type: "Flow", shape: shape };
node.style = { fill: "#FBF6E1", strokeColor: "#E6C979", strokeWidth: 2 };
if (ports) {
node.ports = ports;
}
if(node.id === "node10"){
node.constraints = NodeConstraints.Default & ~NodeConstraints.Select;
node.shape= { type: "Text" };
}
return node;
}
function createConnector(name, source, target, content, type, direction, targetPort, length) {
// update connector properties
let connector = {};
connector.id = name;
connector.sourceID = source;
connector.targetID = target;
connector.style = { strokeWidth: 2 };
let annotation = {};
annotation.content = content;
annotation.style = { fill: "white" };
connector.annotations = [annotation];
if (targetPort) {
connector.targetPortId = targetPort;
}
let segment = {};
if (type) {
connector.type = type;
segment.direction = direction;
segment.type = type;
segment.length = length;
connector.segments = [segment];
}
return connector;
}
let highLightedObjects = [];
function NodeReachable() {
diagram = diagram = this.$refs.diagramObj.ej2Instances;
if (diagram.selectedItems.nodes.length) {
let connectors = diagram.selectedItems.nodes[0].outEdges;
let nodeList = foundNode(connectors, []);
for (let i = 0; i < nodeList.length; i++) {
let ind = diagram.connectors.indexOf(diagram.nameTable[nodeList[i]]);
highLightedObjects.push(nodeList[i]);
diagram.connectors[ind].style.strokeColor = "red";
diagram.connectors[ind].targetDecorator.style.strokeColor = "red";
diagram.connectors[ind].targetDecorator.style.fill = "red";
diagram.dataBind();
}
}
}
function foundNode(list, nodeList) {
diagram = diagram = this.$refs.diagramObj.ej2Instances;
for (let i = 0; i < list.length; i++) {
let connector = diagram.nameTable[list[i]];
if (nodeList.indexOf(connector.id) > -1) {
break;
}
if (
!connector.annotations[0] ||
(connector.annotations[0] && connector.annotations[0].content !== "No")
) {
nodeList.push(connector.id);
}
if (diagram.nameTable[connector.targetID].outEdges.length) {
if (list.indexOf(connector.targetID) === -1) {
foundNode(diagram.nameTable[connector.targetID].outEdges, nodeList);
}
}
}
return nodeList;
}
function Unhighlight() {
let obj = document.getElementById("diagram");
diagram = obj.ej2_instances[0];
for (let i = highLightedObjects.length - 1; i >= 0; i--) {
if (diagram.nameTable[highLightedObjects[i]]) {
let ind = diagram.nodes.indexOf(
diagram.nameTable[highLightedObjects[i]]
);
diagram.nodes[ind].style.strokeColor = "#E6C979";
diagram.dataBind();
} else {
let ind = diagram.connectors.indexOf(
diagram.nameTable[highLightedObjects[i]]
);
diagram.connectors[ind].style.strokeColor = "black";
diagram.connectors[ind].targetDecorator.style.strokeColor = "black";
diagram.connectors[ind].targetDecorator.style.fill = "black";
diagram.dataBind();
}
}
highLightedObjects = [];
}
function selectionChange(arg) {
NodeReachable();
if (arg.state == "Changing") {
Unhighlight();
NodeReachable();
}
}
export default {
name: 'app',
data() {
return {
width: "100%",
height: "645px",
nodes: nodes,
connectors: connectors,
selectionChange: selectionChange,
}
},
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>