Events
28 Mar 202524 minutes to read
Diagram provides some events support for connectors that triggers when interacting with the connector.
Click event
Triggers when the connector is clicked. The following code example explains how to get the click event in the diagram.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' :nodes='nodes' :click='click'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram,Connector,Node } from '@syncfusion/ej2-vue-diagrams';
const nodes = [
{
id: 'Start',
width: 140,
height: 50,
offsetX: 300,
offsetY: 50,
annotations: [
{
content: 'Click node',
},
],
style: {
fill: '#6BA5D7',
strokeColor: 'white',
},
},
];
const connectors = [
{
// Unique name for the connector
id: 'connector1',
sourceID: 'Start',
targetPoint: { x: 300, y: 200 },
type: 'Orthogonal',
annotations: [
{
content: 'Click Connector',
},
],
},
]
const width = "100%";
const height = "350px";
const click =(args) => {
let element = 'Diagram';
if (args.actualObject instanceof Node) {
element = 'Node';
} else if (args.actualObject instanceof Connector) {
element = 'Connector';
}
alert(element + ' Clicked');
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' :nodes='nodes' :click='click'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent,Node,Connector } from '@syncfusion/ej2-vue-diagrams';
let nodes = [
{
id: 'Start',
width: 140,
height: 50,
offsetX: 300,
offsetY: 50,
annotations: [
{
content: 'Click node',
},
],
style: {
fill: '#6BA5D7',
strokeColor: 'white',
},
},
];
let connectors = [
{
// Unique name for the connector
id: 'connector1',
sourceID: 'Start',
targetPoint: { x: 300, y: 200 },
type: 'Orthogonal',
annotations: [
{
content: 'Click Connector',
},
],
},
]
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
connectors: connectors,
nodes:nodes,
click: (args) => {
let element = 'Diagram';
if (args.actualObject instanceof Node) {
element = 'Node';
} else if (args.actualObject instanceof Connector) {
element = 'Connector';
}
alert(element + ' Clicked');
},
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>Selection change event
When selecting/unselecting the connector, the selection change event will be triggered.
The following code example explains how to get the selection change event in the diagram.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' :selectionChange='selectionChange'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const connectors = [
{
// Unique name for the connector
id: 'connector1',
sourceID: 'Start',
sourcePoint: {
x: 100,
y: 100,
},
targetPoint: {
x: 200,
y: 200,
},
},
]
const width = "100%";
const height = "350px";
const selectionChange = (args) => {
if (args.state === 'Changed') {
console.log('selectionChange');
//Customize
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' :selectionChange='selectionChange'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let connectors = [
{
// Unique name for the connector
id: 'connector1',
sourceID: 'Start',
sourcePoint: {
x: 100,
y: 100,
},
targetPoint: {
x: 200,
y: 200,
},
},
]
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
connectors: connectors,
selectionChange: (args) => {
if (args.state === 'Changed') {
console.log('selectionChange');
//Customize
}
},
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>You can prevent selection by setting the cancel property of SelectionChangeEventArgs to true, as shown in the code snippet below.
selectionChange: (args) => {
if (args.state == 'Changing') {
//Prevents selection
args.cancel = true;
}
},Position change event
Triggers when the connector’s position is changed in diagram.
The following code example explains how to get the position change event in the diagram.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' :positionChange='positionChange'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const connectors = [
{
// Unique name for the connector
id: 'connector1',
sourceID: 'Start',
sourcePoint: {
x: 100,
y: 100,
},
targetPoint: {
x: 200,
y: 200,
},
},
]
const width = "100%";
const height = "350px";
const positionChange = (args) => {
if (args.state === 'Completed') {
console.log('positionChange');
//Customize
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' :positionChange='positionChange'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let connectors = [
{
// Unique name for the connector
id: 'connector1',
sourceID: 'Start',
sourcePoint: {
x: 100,
y: 100,
},
targetPoint: {
x: 200,
y: 200,
},
},
]
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
connectors: connectors,
positionChange: (args) => {
if (args.state === 'Completed') {
console.log('positionChange');
//Customize
}
},
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style> positionChange: (args) => {
if (args.state == 'Progress') {
//Prevents dragging
args.cancel = true;
}
},Connection change event
Triggers when the connector’s source or target point is connected or disconnected from the source or target.
The following code example explains how to get the connection change event in the diagram.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' :nodes='nodes' :connectionChange ='connectionChange' ></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const nodes = [
{
id: 'node1',
offsetX: 200,
offsetY: 200,
width: 120,
height: 60,
style: { fill: 'skyblue' },
},
{
id: 'node2',
offsetX: 500,
offsetY: 200,
width: 120,
height: 60,
style: { fill: 'skyblue' },
},
];
const connectors = [
{
// Name of the connector
id: 'connector1',
sourceID: 'node1',
targetID: 'node2',
},
];
const width = "100%";
const height = "350px";
const connectionChange =(args) => {
if (args.state === 'Changed') {
console.log('connectionChange ');
//Customize
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' :nodes='nodes' :connectionChange ='connectionChange' ></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let nodes = [
{
id: 'node1',
offsetX: 200,
offsetY: 200,
width: 120,
height: 60,
style: { fill: 'skyblue' },
},
{
id: 'node2',
offsetX: 500,
offsetY: 200,
width: 120,
height: 60,
style: { fill: 'skyblue' },
},
];
let connectors = [
{
// Name of the connector
id: 'connector1',
sourceID: 'node1',
targetID: 'node2',
},
];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes:nodes,
connectors: connectors,
connectionChange : (args) => {
if (args.state === 'Changed') {
console.log('connectionChange ');
//Customize
}
},
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>Source Point change event
Triggers when the connector’s source point is changed.
The following code example explains how to get the source Point change event in the diagram.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' :sourcePointChange='sourcePointChange'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const connectors = [
{
// Unique name for the connector
id: 'connector1',
sourceID: 'Start',
sourcePoint: {
x: 100,
y: 100,
},
targetPoint: {
x: 200,
y: 200,
},
},
]
const width = "100%";
const height = "350px";
const sourcePointChange = (args) => {
if (args.state === 'Completed') {
console.log('sourcePointChange');
//Customize
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' :sourcePointChange='sourcePointChange'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let connectors = [
{
// Unique name for the connector
id: 'connector1',
sourceID: 'Start',
sourcePoint: {
x: 100,
y: 100,
},
targetPoint: {
x: 200,
y: 200,
},
},
]
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
connectors: connectors,
sourcePointChange: (args) => {
if (args.state === 'Completed') {
console.log('sourcePointChange');
//Customize
}
},
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>You can prevent source point dragging by setting the cancel property of EndChangeEventArgs to true, as shown in the code snippet below.
sourcePointChange : (args) => {
if (args.state === 'Progress') {
//Prevents source point dragging
args.cancel = true;
//Customize
}
},Target Point change event
Triggers when the connector’s target point is changed.
The following code example explains how to get the target Point change event in the diagram.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' :targetPointChange='targetPointChange'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const connectors = [
{
// Unique name for the connector
id: 'connector1',
sourceID: 'Start',
sourcePoint: {
x: 100,
y: 100,
},
targetPoint: {
x: 200,
y: 200,
},
},
]
const width = "100%";
const height = "350px";
const targetPointChange = (args) => {
if (args.state === 'Completed') {
console.log('targetPointChange');
//Customize
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' :targetPointChange='targetPointChange'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let connectors = [
{
// Unique name for the connector
id: 'connector1',
sourceID: 'Start',
sourcePoint: {
x: 100,
y: 100,
},
targetPoint: {
x: 200,
y: 200,
},
},
]
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
connectors: connectors,
targetPointChange: (args) => {
if (args.state === 'Completed') {
console.log('targetPointChange');
//Customize
}
},
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>You can prevent target point dragging by setting the cancel property of EndChangeEventArgs to true, as shown in the code snippet below.
targetPointChange : (args) => {
if (args.state === 'Progress') {
//Prevents target point dragging
args.cancel = true;
//Customize
}
},Segment Collection Change event
Triggers when the connector’s segments added or removed at runtime.
The following code example explains how to get the segment collection change event in the diagram.
Use CTRL+Shift+Click on connector to add/remove segments.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' :positionChange='positionChange'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram ,ConnectorConstraints,ConnectorEditing } from '@syncfusion/ej2-vue-diagrams';
const connectors = [
{
// Unique name for the connector
id: 'connector1',
sourceID: 'Start',
sourcePoint: {
x: 100,
y: 100,
},
targetPoint: {
x: 200,
y: 200,
},
constraints :ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb
},
]
provide('diagram', [ConnectorEditing]);
const width = "100%";
const height = "350px";
const segmentCollectionChange = (args) => {
if (args.type === 'Addition') {
console.log('segmentCollectionChange');
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' :segmentCollectionChange='segmentCollectionChange'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent,ConnectorConstraints,ConnectorEditing } from '@syncfusion/ej2-vue-diagrams';
let connectors = [
{
// Unique name for the connector
id: 'connector1',
sourceID: 'Start',
sourcePoint: {
x: 100,
y: 100,
},
targetPoint: {
x: 200,
y: 200,
},
constraints :ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb
},
]
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
connectors: connectors,
segmentCollectionChange : (args) => {
if (args.type === 'Addition') {
console.log('segmentCollectionChange');
}
},
}
},
provide: {
diagram: [ConnectorEditing]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>Segment Change event
Triggers when the connector’s segments were adjusted or edited.
The following code example explains how to get the segment change event in the diagram.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' :segmentChange='segmentChange'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram,ConnectorEditing,
ConnectorConstraints, } from '@syncfusion/ej2-vue-diagrams';
const connectors = [
{
id: 'connector1',
type: 'Straight',
constraints:
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
sourcePoint: {
x: 100,
y: 100,
},
targetPoint: {
x: 200,
y: 200,
},
segments: [
{
type: 'Straight',
point: {
x: 170,
y: 150,
},
},
],
},
]
const width = "100%";
const height = "350px";
const segmentChange = (args) => {
console.log('segmentChange');
}
provide('diagram', [ConnectorEditing]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram
id="diagram"
:width="width"
:height="height"
:connectors="connectors"
:segmentChange="segmentChange"
></ejs-diagram>
</div>
</template>
<script>
import {
DiagramComponent,
ConnectorEditing,
ConnectorConstraints,
} from "@syncfusion/ej2-vue-diagrams";
const connectors = [
{
id: "connector1",
type: "Straight",
constraints:
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
sourcePoint: {
x: 100,
y: 100,
},
targetPoint: {
x: 200,
y: 200,
},
segments: [
{
type: "Straight",
point: {
x: 170,
y: 150,
},
},
],
},
];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
},
data() {
return {
width: "100%",
height: "350px",
connectors: connectors,
segmentChange: (args) => {
console.log("segmentChange");
},
};
},
provide: {
diagram: [ConnectorEditing],
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>You can prevent segment editing by setting the cancel property of SegmentChangeEventArgs to true, as shown in the code snippet below.
segmentChange : (args) => {
if (args.state === 'Start') {
//Prevents the segment editing
args.cancel = true;
}
},Collection change event
Triggers when the connector is added or removed from diagram.
The following code example explains how to get the collection change event in the diagram.
<template>
<div id="app">
<button @click="add">add</button>
<button @click="remove">remove</button>
<ejs-diagram ref="diagram" :width='width' :height='height' :connectors='connectors' :collectionChange='collectionChange'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
let connectors = [
{
// Unique name for the connector
id: 'connector1',
sourceID: 'Start',
sourcePoint: {
x: 100,
y: 100,
},
targetPoint: {
x: 200,
y: 200,
},
}, {
id: 'connector2',
type: 'Straight',
sourcePoint: {
x: 300,
y: 100,
},
targetPoint: {
x: 400,
y: 200,
},
},
]
const collectionChange= (args) => {
console.log('collectionChange');
}
const width = "100%";
const height = "350px";
const positionChange = (args) => {
if (args.state === 'Completed') {
console.log('positionChange');
//Customize
}
}
const add = function () {
let connector = {
type: 'Straight',
sourcePoint: {
x: 50,
y: 200,
},
targetPoint: {
x: 150,
y: 300,
},
};
diagram.value.ej2Instances.add(connector)
}
const remove = function () {
const diagramInstance = diagram.value.ej2Instances;
let connector =
diagramInstance.selectedItems.connectors.length > 0
? diagramInstance.selectedItems.connectors[0]
: diagramInstance.connectors[0];
diagramInstance.remove(connector);
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<button @click="add">add</button>
<button @click="remove">remove</button>
<ejs-diagram ref="diagram" :width='width' :height='height' :connectors='connectors' :collectionChange='collectionChange'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let connectors = [
{
// Unique name for the connector
id: 'connector1',
sourceID: 'Start',
sourcePoint: {
x: 100,
y: 100,
},
targetPoint: {
x: 200,
y: 200,
},
}, {
id: 'connector2',
type: 'Straight',
sourcePoint: {
x: 300,
y: 100,
},
targetPoint: {
x: 400,
y: 200,
},
},
]
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "450px",
connectors: connectors,
collectionChange: (args) => {
console.log('collectionChange');
},
}
},
methods: {
add() {
let connector = {
type: 'Straight',
sourcePoint: {
x: 50,
y: 200,
},
targetPoint: {
x: 150,
y: 300,
},
};
this.$refs.diagram.ej2Instances.add(connector);
},
remove() {
// remove connector from the diagram
const diagramInstance = this.$refs.diagram.ej2Instances;
let connector =
diagramInstance.selectedItems.connectors.length > 0
? diagramInstance.selectedItems.connectors[0]
: diagramInstance.connectors[0];
diagramInstance.remove(connector);
},
},
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>You can prevent changes to the diagram collection, such as adding or deleting connectors, by setting the cancel property of CollectionChangeEventArgs to true, as shown in the code snippet below.
collectionChange: (args) => {
if (args.state === 'Changing') {
//Prevents collection change - Prevents Adding or deleting connectors
args.cancel = true;
}
},