Expand icon and collapse icon in Vue Diagram control
Vue Diagram provides support to describe the state of the node. i.e., the node is expanded or collapsed state. The IsExpanded property of node is used to expand or collapse the children nodes.The Expand and Collapse support is used to compress the hierarchy view so that only the roots of each elements are visible.
The following properties of the Node are used to represent the state of the node and allows user to Expand and Collapse the desired Node:
-
ExpandIcon
-
CollapseIcon
NOTE
Icon can be created only when the node has outEdges.
To explore the properties of expand and collapse icon, refer to expandIcon and collapseIcon.
Customizing expand and collapse icon
Size and shape
Set a size for an icon by using width and height properties.
The expandIcon’s and collapseIcon’s shape property allows to define the shape of the icon.
The following code example illustrates how to create an icon of various shapes.
<template>
<div id="app">
<ejs-diagram
id="diagram"
:width="width"
:height="height"
:nodes="nodes"
:getNodeDefaults="getNodeDefaults"
:getConnectorDefaults="getConnectorDefaults"
:layout="layout"
:dataSourceSettings="dataSourceSettings"
></ejs-diagram>
</div>
</template>
<script setup>
import {
DiagramComponent as EjsDiagram,
HierarchicalTree,
DataBinding,
} from "@syncfusion/ej2-vue-diagrams";
import { DataManager, Query } from "@syncfusion/ej2-data";
const data = [
{
Name: 'Steve-Ceo',
},
{
Name: 'Kevin-Manager',
ReportingPerson: 'Steve-Ceo',
},
];
const items = new DataManager(data, new Query().take(7));
const width = "100%";
const height = "350px";
const layout= {
//Sets layout type
type: 'HierarchicalTree',
}
const dataSourceSettings= {
id: 'Name',
parentId: 'ReportingPerson',
dataManager: items,
}
const getNodeDefaults = (obj) => {
obj.shape = {
type: 'Text',
};
obj.style = {
fill: 'None',
strokeColor: 'none',
strokeWidth: 2,
bold: true,
color: 'white',
};
obj.borderColor = 'white';
obj.width = 100;
obj.height = 40;
obj.backgroundColor = '#6BA5D7';
obj.borderWidth = 1;
obj.shape.margin = {
left: 5,
right: 5,
top: 5,
bottom: 5,
};
obj.expandIcon = {
shape: 'ArrowUp',
width: 10,
height: 10,
};
obj.collapseIcon = {
shape: 'ArrowDown',
width: 10,
height: 10,
};
return obj;
}
const getConnectorDefaults = (connector) => {
connector.style = {
strokeColor: '#6BA5D7',
strokeWidth: 2,
};
connector.targetDecorator.style.fill = '#6BA5D7';
connector.targetDecorator.style.strokeColor = '#6BA5D7';
connector.type = 'Orthogonal';
return connector;
}
const provide = {
diagram: [DataBinding, 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"
:getNodeDefaults="getNodeDefaults"
:getConnectorDefaults="getConnectorDefaults"
:layout="layout"
:dataSourceSettings="dataSourceSettings"
></ejs-diagram>
</div>
</template>
<script>
import {
DiagramComponent,
HierarchicalTree,
DataBinding,
} from '@syncfusion/ej2-vue-diagrams';
import { DataManager, Query } from '@syncfusion/ej2-data';
let data = [
{
Name: 'Steve-Ceo',
},
{
Name: 'Kevin-Manager',
ReportingPerson: 'Steve-Ceo',
},
];
let items = new DataManager(data, new Query().take(7));
export default {
name: 'App',
components: {
'ejs-diagram': DiagramComponent,
},
data() {
return {
width: '100%',
height: '700px',
//Uses layout to auto-arrange nodes on the Diagram page
layout: {
//Sets layout type
type: 'HierarchicalTree',
},
dataSourceSettings: {
id: 'Name',
parentId: 'ReportingPerson',
dataManager: items,
},
getNodeDefaults: (obj) => {
obj.shape = {
type: 'Text',
};
obj.style = {
fill: 'None',
strokeColor: 'none',
strokeWidth: 2,
bold: true,
color: 'white',
};
obj.borderColor = 'white';
obj.width = 100;
obj.height = 40;
obj.backgroundColor = '#6BA5D7';
obj.borderWidth = 1;
obj.shape.margin = {
left: 5,
right: 5,
top: 5,
bottom: 5,
};
obj.expandIcon = {
shape: 'ArrowUp',
width: 10,
height: 10,
};
obj.collapseIcon = {
shape: 'ArrowDown',
width: 10,
height: 10,
};
return obj;
},
getConnectorDefaults: (connector) => {
connector.style = {
strokeColor: '#6BA5D7',
strokeWidth: 2,
};
connector.targetDecorator.style.fill = '#6BA5D7';
connector.targetDecorator.style.strokeColor = '#6BA5D7';
connector.type = 'Orthogonal';
return connector;
},
};
},
provide: {
diagram: [DataBinding, 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>Appearance and alignment of icon
Set the borderColor, borderWidth, and background color for an icon using borderColor, borderWidth, and fill properties.
The corner radius can be set using the cornerRadius property of the icon.
The icon can be aligned relative to the node boundaries. It has margin, offset, horizontalAlignment, and verticalAlignment settings. It is quite tricky, when all four alignments are used together but gives you more control over alignment.
The iconColor property can be used to set the strokeColor of the Icon.
The following code example illustrates the customization of icons.
<template>
<div id="app">
<ejs-diagram
id="diagram"
:width="width"
:height="height"
:nodes="nodes"
:getNodeDefaults="getNodeDefaults"
:getConnectorDefaults="getConnectorDefaults"
:layout="layout"
:dataSourceSettings="dataSourceSettings"
></ejs-diagram>
</div>
</template>
<script setup>
import {
DiagramComponent as EjsDiagram,
HierarchicalTree,
DataBinding,
} from "@syncfusion/ej2-vue-diagrams";
import { DataManager, Query } from "@syncfusion/ej2-data";
const data = [
{
Name: 'Steve-Ceo',
},
{
Name: 'Kevin-Manager',
ReportingPerson: 'Steve-Ceo',
},
];
const items = new DataManager(data, new Query().take(7));
const width = "100%";
const height = "350px";
const layout= {
//Sets layout type
type: 'HierarchicalTree',
}
const dataSourceSettings= {
id: 'Name',
parentId: 'ReportingPerson',
dataManager: items,
}
const getNodeDefaults = (obj) => {
obj.shape = {
type: 'Text',
};
obj.style = {
fill: 'None',
strokeColor: 'none',
strokeWidth: 2,
bold: true,
color: 'white',
};
obj.borderColor = 'white';
obj.width = 100;
obj.height = 40;
obj.backgroundColor = '#6BA5D7';
obj.borderWidth = 1;
obj.shape.margin = {
left: 5,
right: 5,
top: 5,
bottom: 5,
};
obj.expandIcon = {
shape: 'ArrowUp',
width: 20,
height: 20,
fill: 'red',
borderColor: 'blue',
iconColor: 'white',
cornerRadius: 7,
borderWidth: 2.5,
};
obj.collapseIcon = {
shape: 'Plus',
width: 20,
height: 20,
fill: 'green',
borderColor: 'blue',
iconColor: 'white',
cornerRadius: 7,
borderWidth: 2.5,
};
return obj;
}
const getConnectorDefaults = (connector) => {
connector.style = {
strokeColor: '#6BA5D7',
strokeWidth: 2,
};
connector.targetDecorator.style.fill = '#6BA5D7';
connector.targetDecorator.style.strokeColor = '#6BA5D7';
connector.type = 'Orthogonal';
return connector;
}
const provide = {
diagram: [DataBinding, 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"
:getNodeDefaults="getNodeDefaults"
:getConnectorDefaults="getConnectorDefaults"
:layout="layout"
:dataSourceSettings="dataSourceSettings"
></ejs-diagram>
</div>
</template>
<script>
import {
DiagramComponent,
HierarchicalTree,
DataBinding,
} from '@syncfusion/ej2-vue-diagrams';
import { DataManager, Query } from '@syncfusion/ej2-data';
let data = [
{
Name: 'Steve-Ceo',
},
{
Name: 'Kevin-Manager',
ReportingPerson: 'Steve-Ceo',
},
];
let items = new DataManager(data, new Query().take(7));
export default {
name: 'App',
components: {
'ejs-diagram': DiagramComponent,
},
data() {
return {
width: '100%',
height: '700px',
//Uses layout to auto-arrange nodes on the Diagram page
layout: {
//Sets layout type
type: 'HierarchicalTree',
},
dataSourceSettings: {
id: 'Name',
parentId: 'ReportingPerson',
dataManager: items,
},
getNodeDefaults: (obj) => {
obj.shape = {
type: 'Text',
};
obj.style = {
fill: 'None',
strokeColor: 'none',
strokeWidth: 2,
bold: true,
color: 'white',
};
obj.borderColor = 'white';
obj.width = 100;
obj.height = 40;
obj.backgroundColor = '#6BA5D7';
obj.borderWidth = 1;
obj.shape.margin = {
left: 5,
right: 5,
top: 5,
bottom: 5,
};
obj.expandIcon = {
shape: 'ArrowUp',
width: 20,
height: 20,
fill: 'red',
borderColor: 'blue',
iconColor: 'white',
cornerRadius: 7,
borderWidth: 2.5,
};
obj.collapseIcon = {
shape: 'Plus',
width: 20,
height: 20,
fill: 'green',
borderColor: 'blue',
iconColor: 'white',
cornerRadius: 7,
borderWidth: 2.5,
};
return obj;
},
getConnectorDefaults: (connector) => {
connector.style = {
strokeColor: '#6BA5D7',
strokeWidth: 2,
};
connector.targetDecorator.style.fill = '#6BA5D7';
connector.targetDecorator.style.strokeColor = '#6BA5D7';
connector.type = 'Orthogonal';
return connector;
},
};
},
provide: {
diagram: [DataBinding, 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>IsExpanded
isExpanded property is used to defines whether the node is expanded or not. The following example demonstrate node’s isExpanded property. The default value of isExpanded property is true.
let node:NodeModel = {
id: 'Start', width: 140, height: 50, offsetX: 300, offsetY: 50,
//Expand state of node
isExpanded:false
expandIcon: {shape: 'ArrowDown', width: 20,
height: 15},
collapseIcon: {shape: 'ArrowUp', width: 20,
height: 15}
}