Layout events in Vue Diagram control
DataLoaded event
The dataLoaded event is triggered after the diagram is populated from the external data source.
The following code example explains the data loaded event in the Vue Diagram.
<ejs-diagram id="diagram" :width="width" :height="height" :nodes="nodes" :connectors="connectors" :dataLoaded="dataLoaded"></ejs-diagram>
export default {
name: 'App',
components: {
'ejs-diagram': DiagramComponent,
},
data() {
return {
width: "1000px",
height: '590px',
nodes: nodes,
connectors: connectors,
dataLoaded: (args) => {
//we can get diagram instance in args.
console.log(args);
//customize
}
};
},
};ExpandStateChange event
The expandStateChange will be triggered when the state of the expand and collapse icon change for a node.
The following code example explains the expandStateChange event in the diagram.
<template>
<div id="app">
<ejs-diagram id="diagram" :width="width" :height="height" :nodes="nodes" :connectors="connectors"
:expandStateChange="expandStateChange" :layout="layout"></ejs-diagram>
</div>
</template>
<script setup>
import { provide } from "vue";
import { DiagramComponent as EjsDiagram, HierarchicalTree } from '@syncfusion/ej2-vue-diagrams';
//Initialize nodes
const nodes = [
{
id: 'Start',
width: 140,
height: 50,
offsetX: 300,
offsetY: 50,
annotations: [{ content: 'Node1' }],
style: { fill: '#6BA5D7', strokeColor: 'white' },
expandIcon: {
shape: 'ArrowDown',
width: 20,
height: 15,
},
collapseIcon: {
shape: 'ArrowUp',
width: 20,
height: 15,
},
},
{
id: 'Init',
width: 140,
height: 50,
offsetX: 300,
offsetY: 140,
style: { fill: '#6BA5D7', strokeColor: 'white' },
annotations: [{ content: 'Node2' }],
},
];
//Initialize connectors
let connectors = [
{
id: 'connector1',
sourceID: 'Start',
targetID: 'Init',
type: 'Orthogonal',
},
];
const width = "1000px";
const height = '590px';
const layout = {
//Sets layout type
type: 'HierarchicalTree'
};
const expandStateChange = (args) => {
//We can get the expanded or collapsed state in args
console.log('Expanded ' + args.state);
};
provide('diagram', [HierarchicalTree]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width="width" :height="height" :nodes="nodes" :connectors="connectors" :layout="layout"
:expandStateChange="expandStateChange"></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, HierarchicalTree } from '@syncfusion/ej2-vue-diagrams';
//Initialize nodes
let nodes = [
{
id: 'Start',
width: 140,
height: 50,
offsetX: 300,
offsetY: 50,
annotations: [{ content: 'Node1' }],
style: { fill: '#6BA5D7', strokeColor: 'white' },
expandIcon: {
shape: 'ArrowDown',
width: 20,
height: 15,
},
collapseIcon: {
shape: 'ArrowUp',
width: 20,
height: 15,
},
},
{
id: 'Init',
width: 140,
height: 50,
offsetX: 300,
offsetY: 140,
style: { fill: '#6BA5D7', strokeColor: 'white' },
annotations: [{ content: 'Node2' }],
},
];
//Initialize connectors
let connectors = [
{
id: 'connector1',
sourceID: 'Start',
targetID: 'Init',
type: 'Orthogonal',
},
];
export default {
name: 'App',
components: {
'ejs-diagram': DiagramComponent,
},
data() {
return {
width: "1000px",
height: '590px',
nodes: nodes,
connectors: connectors,
//Uses layout to auto-arrange nodes on the Diagram page
layout: {
//Sets layout type
type: 'HierarchicalTree',
},
expandStateChange: (args) => {
//We can get the expanded or collapsed state in args
console.log('Expanded ' + args.state);
},
};
},
provide: {
diagram: [HierarchicalTree],
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>Animation complete event
The animationComplete event is triggered after the animation of the diagram elements is completed. The following example demonstrates how to handle the animation complete event and customize based on the expand state of the root node.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagramObj" :width="width" :height="height" :nodes="nodes"
:connectors="connectors" :animationComplete="animationComplete" :layout="layout"></ejs-diagram>
</div>
</template>
<script setup>
import { provide, ref, onMounted } from "vue";
import { DiagramComponent as EjsDiagram, HierarchicalTree, LayoutAnimation } from '@syncfusion/ej2-vue-diagrams';
let diagramInstance;
let diagramObj = ref(null);
//Initialize nodes
const nodes = [
{
id: 'Start',
width: 140,
height: 50,
offsetX: 300,
offsetY: 50,
annotations: [{ content: 'Node1' }],
style: { fill: '#6BA5D7', strokeColor: 'white' },
expandIcon: {
shape: 'ArrowDown',
width: 20,
height: 15,
},
collapseIcon: {
shape: 'ArrowUp',
width: 20,
height: 15,
},
},
{
id: 'Init',
width: 140,
height: 50,
offsetX: 300,
offsetY: 140,
style: { fill: '#6BA5D7', strokeColor: 'white' },
annotations: [{ content: 'Node2' }],
},
{
id: 'Init2',
width: 140,
height: 50,
offsetX: 100,
offsetY: 140,
style: { fill: '#6BA5D7', strokeColor: 'white' },
annotations: [{ content: 'Node3' }],
},
{
id: 'Init3',
width: 140,
height: 50,
offsetX: 150,
offsetY: 140,
style: { fill: '#6BA5D7', strokeColor: 'white' },
annotations: [{ content: 'Node4' }],
},
];
//Initialize connectors
let connectors = [
{
id: 'connector1',
sourceID: 'Start',
targetID: 'Init',
type: 'Orthogonal',
},
{
id: 'connector2',
sourceID: 'Start',
targetID: 'Init2',
type: 'Orthogonal',
},
{
id: 'connector3',
sourceID: 'Init2',
targetID: 'Init3',
type: 'Orthogonal',
},
];
const width = "1000px";
const height = '590px';
const layout = {
//Sets layout type
type: 'HierarchicalTree'
};
onMounted(function () {
diagramInstance = diagramObj.value.ej2Instances;
})
const animationComplete = (args) => {
console.log('Animation complete');
diagramInstance.nodes[0].style.fill =
diagramInstance.nodes[0].style.fill === '#6BA5D7' ? 'red' : '#6BA5D7';
diagramInstance.dataBind();
};
provide('diagram', [HierarchicalTree, LayoutAnimation]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" ref="diagramObj" :width="width" :height="height" :nodes="nodes"
:connectors="connectors" :layout="layout" :animationComplete="animationComplete"></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, HierarchicalTree, LayoutAnimation } from '@syncfusion/ej2-vue-diagrams';
//Initialize nodes
let nodes = [
{
id: 'Start',
width: 140,
height: 50,
offsetX: 300,
offsetY: 50,
annotations: [{ content: 'Node1' }],
style: { fill: '#6BA5D7', strokeColor: 'white' },
expandIcon: {
shape: 'ArrowDown',
width: 20,
height: 15,
},
collapseIcon: {
shape: 'ArrowUp',
width: 20,
height: 15,
},
},
{
id: 'Init',
width: 140,
height: 50,
offsetX: 300,
offsetY: 140,
style: { fill: '#6BA5D7', strokeColor: 'white' },
annotations: [{ content: 'Node2' }],
},
{
id: 'Init2',
width: 140,
height: 50,
offsetX: 100,
offsetY: 140,
style: { fill: '#6BA5D7', strokeColor: 'white' },
annotations: [{ content: 'Node3' }],
},
{
id: 'Init3',
width: 140,
height: 50,
offsetX: 150,
offsetY: 140,
style: { fill: '#6BA5D7', strokeColor: 'white' },
annotations: [{ content: 'Node4' }],
},
];
//Initialize connectors
let connectors = [
{
id: 'connector1',
sourceID: 'Start',
targetID: 'Init',
type: 'Orthogonal',
},
{
id: 'connector2',
sourceID: 'Start',
targetID: 'Init2',
type: 'Orthogonal',
},
{
id: 'connector3',
sourceID: 'Init2',
targetID: 'Init3',
type: 'Orthogonal',
},
];
export default {
name: 'App',
components: {
'ejs-diagram': DiagramComponent,
},
data() {
return {
width: "1000px",
height: '590px',
nodes: nodes,
connectors: connectors,
//Uses layout to auto-arrange nodes on the Diagram page
layout: {
//Sets layout type
type: 'HierarchicalTree'
},
animationComplete: (args) => {
console.log('Animation complete');
const diagramInstance = this.$refs.diagramObj.ej2Instances;
diagramInstance.nodes[0].style.fill =
diagramInstance.nodes[0].style.fill === '#6BA5D7' ? 'red' : '#6BA5D7';
diagramInstance.dataBind();
},
};
},
provide: {
diagram: [HierarchicalTree, LayoutAnimation],
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>Layout updated event
The layoutUpdated event is triggered when the layout rendering process in the diagram either starts or completes. This event allows users to track the state of the layout rendering process.
The following code example explains the layout updated event in the diagram.
<ejs-diagram id="diagram" :width="width" :height="height" :nodes="nodes" :connectors="connectors" :layout="layout" @layoutUpdated="layoutUpdated"></ejs-diagram>
export default {
name: 'App',
components: {
'ejs-diagram': DiagramComponent,
},
data() {
return {
width: "100%",
height: '550px',
nodes: nodes,
connectors: connectors,
layout: { type: 'HierarchicalTree'},
};
},
methods : {
layoutUpdated(args) {
if (args.state === 'Started') {
console.log('layout started rendering');
}
}
},
};