You can add custom properties for the nodes or connectors using the addinfo
property.
The following code snippet are used to add custom properties for the nodes/connectors:
//adding custom properties through addInfo
let addInfo = { Designation: 'manager' };
//Assinging the defined custom property to the node
let nodes = [{
// ...
// ...
//Adding custom properties
addInfo: addInfo,
// ...
// ...
}
// Text(label) added to the node
}]
After adding the custom property, you can access it during runtime. In the following code snippet, the custom property have been accessed using the client-side events.
// Selection change event definition
function selectionChange(args) {
if (args.state === 'Changing') {
if (args.newValue.length > 0) {
alert("The Added custom property is:" + (args.newValue[0].addInfo).Designation);
}
}
}
// ...
// ...
// Invoking selection change event
export default {
name: 'app',
data() {
return {
// ...
// ...
selectionChange: selectionChange,
// ...
// ...
}
},
}
// ...
// ...
The below sample shows adding custom properties to the node/connectors and accessing it during runtime.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :selectionChange='selectionChange' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin,ISelectionChangeEventArgs } from '@syncfusion/ej2-vue-diagrams';
function selectionChange(args) {
if (args.state === 'Changing') {
if (args.newValue.length > 0) {
alert("The Added custom property is:" + (args.newValue[0].addInfo).Designation);
}
}
}
Vue.use(DiagramPlugin);
let addInfo = { Designation: 'manager' };
let nodes = [{
//Adding custom properties
addInfo: addInfo,
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
annotations: [{ id: 'label1', content: 'Click me'}],
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
// Text(label) added to the node
}]
export default {
name: 'app',
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
selectionChange: selectionChange,
}
},
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>