Search results

How to create custom shapes using template binding

14 Oct 2021 / 2 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.

Copied to clipboard
//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.

Source
Preview
app.vue
Copied to clipboard
<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>