Add custom prop in Vue Diagram component

16 Mar 20234 minutes to read

You can add custom properties for the nodes or connectors using the addinfo property.

Step1

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
}]

Step2

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.

app.vue

<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>