Creating custom shapes using template binding in Vue Diagram component

16 Mar 20233 minutes to read

Manually, you can create the custom shapes in two ways.

• In order to load SVG content, refer to the Native.
• In order to load HTML content.

Step1

To create the custom shapes, define a template with HTML content or SVG content as shown as follows.

//Svg content binding using template binding which binds the addinfo property defines in the node
let svgContent = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /><text x="50%" y="50%" text-anchor="middle" stroke="#51c5cf">${addInfo.text}</text></svg>';
   // ...
   // ...
let nodes = [{
       //addInfo property is binded with the defined svg content
        id: 'node1', addInfo:{text:'Native'}, offsetX: 100, offsetY: 200, width: 100, height: 100, shape: {type: 'Native', content: svgContent}
    }
    ]

Refer the following sample for creating custom shapes using template binding.

app.vue

<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { DiagramPlugin } from '@syncfusion/ej2-vue-diagrams';

    let svgContent = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="#475452" /><text x="50%" y="50%" text-anchor="middle" stroke="#51c5cf">${addInfo.text}</text></svg>';

    let htmlContent = '<div style="background:#6BA5D7;height:100%;width:100%;"><button type="button" style="width:100px"> ${addInfo.text} </button></div>'

    Vue.use(DiagramPlugin);
    let addInfo  = { Designation: 'manager' };
    let nodes = [{
        id: 'node1', addInfo:{text:'Native'}, offsetX: 100, offsetY: 200, width: 100, height: 100, shape: {type: 'Native', content: svgContent}
    },
    {
      id: 'node2', addInfo:{text:'Html'}, offsetX: 300, offsetY:200, width:100, height: 100, shape: {type: 'HTML', content: htmlContent}
    }
    ]

export default {
    name: 'app',
    data() {
        return {
            width: "100%",
            height: "350px",
            nodes: nodes,
        }
    },
}
</script>
<style>
    @import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>