Group in Vue Diagram component
28 Mar 202524 minutes to read
Create group
Group is used to cluster multiple nodes and connectors into a single element. It acts like a container for its children (nodes, groups, and connectors). Every change made to the group also affects the children. Child elements can be edited individually.
Add group when initializing diagram
A group can be added to the diagram model through nodes collection. To define an object as group, add the child objects to the children collection of the group. The following code illustrates how to create a group node.
- While creating group, its child node need to be declared before the group declaration.
<template>
<div id="app">
<ejs-diagram ref="diagramRef" id="diagram" width="100%" height="600px" :getNodeDefaults="getNodeDefaults"
:nodes="nodes" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const nodes = [
{
id: "rectangle1",
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
style: {
strokeColor: "#6BA5D7",
fill: "#6BA5D7",
},
annotations: [
{
content: "rectangle1",
},
],
},
{
id: "rectangle2",
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
style: {
strokeColor: "#6BA5D7",
fill: "#6BA5D7",
},
annotations: [
{
content: "rectangle2",
},
],
},
{
id: "group",
children: ["rectangle1", "rectangle2"],
},
];
function getNodeDefaults(node) {
node.height = 100;
node.width = 100;
node.style.strokeColor = "White";
return node;
}
const diagramRef = ref(null);
onMounted(() => {
// Retrieve the diagram instance
const diagramInstance = diagramRef.value.ej2Instances;
diagramInstance.select([diagramInstance.getObject("group")]);
});
</script>
<style scoped>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram ref="diagramRef" id="diagram" width="100%" height="600px" :getNodeDefaults="getNodeDefaults"
:nodes="nodes" />
</div>
</template>
<script>
import { DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
},
data() {
return {
nodes: [
{
id: "rectangle1",
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
style: {
strokeColor: "#6BA5D7",
fill: "#6BA5D7",
},
annotations: [
{
content: "rectangle1",
},
],
},
{
id: "rectangle2",
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
style: {
strokeColor: "#6BA5D7",
fill: "#6BA5D7",
},
annotations: [
{
content: "rectangle2",
},
],
},
{
id: "group",
children: ["rectangle1", "rectangle2"],
},
],
};
},
methods: {
getNodeDefaults(node) {
node.height = 100;
node.width = 100;
node.style.strokeColor = "White";
return node;
},
},
mounted() {
// Retrieve the diagram instance
const diagramInstance = this.$refs.diagramRef.ej2Instances;
diagramInstance.select([diagramInstance.getObject("group")]);
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>Connectors can be added to a group. The following code illustrates how to add connectors into a group.
<template>
<div id="app">
<ejs-diagram id="diagram" width="1000px" height="600px" :nodes="nodes" :connectors="connectors" />
</div>
</template>
<script setup>
import { ref } from 'vue';
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const connectors = ref([
{
id: "connector1",
type: "Orthogonal",
sourceID: "node1",
targetID: "node2",
},
]);
const nodes = ref([
{
id: "node1",
height: 100,
width: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: "Node1" }],
},
{
id: "node2",
height: 100,
width: 100,
offsetX: 300,
offsetY: 100,
annotations: [{ content: "Node2" }],
},
// Defining group having connector children
{
id: "group",
children: ["node1", "node2", "connector1"],
style: { strokeWidth: 0 },
},
]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" width="1000px" height="600px" :nodes="nodes" :connectors="connectors" />
</div>
</template>
<script>
import { DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
},
data() {
return {
connectors: [
{
id: "connector1",
type: "Orthogonal",
sourceID: "node1",
targetID: "node2",
},
],
nodes: [
{
id: "node1",
height: 100,
width: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: "Node1" }],
},
{
id: "node2",
height: 100,
width: 100,
offsetX: 300,
offsetY: 100,
annotations: [{ content: "Node2" }],
},
// Defining group having connector children
{
id: "group",
children: ["node1", "node2", "connector1"],
style: { strokeWidth: 0 },
},
],
};
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>Group nodes at runtime
Groups can be dynamically created during runtime in the diagram by invoking the diagram.group method. To initiate this process, first, select the nodes that you intend to include within the group. Subsequently, by utilizing the diagram.group method, the selected nodes will be encapsulated within a newly formed group node.
The following code illustrates how to group at runtime.
<template>
<div id="app">
<button @click="group">Group selected nodes</button>
<ejs-diagram ref="diagramRef" id="diagram" width="100%" height="900px" :nodes="nodes" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const nodes = [
{
id: "node1",
height: 100,
width: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: "Node1" }],
},
{
id: "node2",
height: 100,
width: 100,
offsetX: 200,
offsetY: 200,
annotations: [{ content: "Node2" }],
},
{
id: "node3",
height: 100,
width: 100,
offsetX: 300,
offsetY: 300,
annotations: [{ content: "Node3" }],
},
];
const diagramRef = ref(null);
onMounted(() => {
const diagram = diagramRef.value.ej2Instances;
diagram.selectAll();
});
function group() {
// Groups the selected nodes in diagram
const diagram = diagramRef.value.ej2Instances;
diagram.group();
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style><template>
<div id="app">
<button @click="group">Group selected nodes</button>
<ejs-diagram ref="diagram" id="diagram" width="100%" height="900px" :nodes="nodes" />
</div>
</template>
<script>
import { DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
},
data() {
return {
nodes: [
{
id: "node1",
height: 100,
width: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: "Node1" }],
},
{
id: "node2",
height: 100,
width: 100,
offsetX: 200,
offsetY: 200,
annotations: [{ content: "Node2" }],
},
{
id: "node3",
height: 100,
width: 100,
offsetX: 300,
offsetY: 300,
annotations: [{ content: "Node3" }],
},
],
};
},
mounted() {
const diagram = this.$refs.diagram.ej2Instances;
diagram.selectAll();
},
methods: {
group() {
const diagram = this.$refs.diagram.ej2Instances;
// Groups the selected nodes in diagram
diagram.group();
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>UnGroup nodes at runtime
Group node can be ungrouped dynamically, by using the diagram.unGroup method. The following code example shows how to ungroup a group node at runtime.
<template>
<div id="app">
<button @click="unGroup">Ungroup</button>
<ejs-diagram ref="diagramRef" id="diagram" :width="'100%'" :height="'600px'" :nodes="nodes" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const diagramRef = ref(null);
const nodes = [
{
id: 'rectangle1',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
},
annotations: [
{
content: 'rectangle1',
},
],
},
{
id: 'rectangle2',
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
},
annotations: [
{
content: 'rectangle2',
},
],
},
{
id: 'group',
children: ['rectangle1', 'rectangle2'],
},
];
onMounted(() => {
const diagramInstance = diagramRef.value.ej2Instances;
diagramInstance.select([diagramInstance.getObject('group')]);
});
const unGroup = () => {
const diagramInstance = diagramRef.value.ej2Instances;
// Ungroups the selected nodes and connectors in the diagram
diagramInstance.unGroup();
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style><template>
<div id="app">
<button @click="unGroup">Ungroup</button>
<ejs-diagram ref="diagramRef" id="diagram" :width="'100%'" :height="'600px'" :nodes="nodes">
</ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
export default {
name: 'App',
components: {
'ejs-diagram': DiagramComponent,
},
data() {
return {
nodes: [
{
id: 'rectangle1',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
},
annotations: [
{
content: 'rectangle1',
},
],
},
{
id: 'rectangle2',
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
},
annotations: [
{
content: 'rectangle2',
},
],
},
{
id: 'group',
children: ['rectangle1', 'rectangle2'],
},
],
};
},
mounted() {
const diagramInstance = this.$refs.diagramRef.ej2Instances;
diagramInstance.select([diagramInstance.getObject('group')]);
},
methods: {
unGroup() {
const diagramInstance = this.$refs.diagramRef.ej2Instances;
// Ungroups the selected nodes and connectors in the diagram
diagramInstance.unGroup();
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>Add group node at runtime
A group node can be added at runtime by using the diagram method diagram.add.
The following code illustrates how a group node is added at runtime.
<template>
<div id="app">
<ejs-diagram ref="diagramRef" id="diagram" :width="'100%'" :height="'350px'" :nodes="nodes" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const nodes = ref([
{
id: "rectangle1",
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
},
annotations: [{ content: 'rectangle1' }],
},
{
id: "rectangle2",
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
},
annotations: [{ content: 'rectangle2' }],
},
]);
const group = {
id: 'group2',
children: ['rectangle1', 'rectangle2'],
};
const diagramRef = ref(null);
onMounted(() => {
const diagramInstance = diagramRef.value.ej2Instances;
diagramInstance.selectAll();
// Add the group into the diagram
diagramInstance.add(group);
});
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" ref="diagramRef" :width='width' :height='height' :nodes='nodes'>
</ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
id: "rectangle1",
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
},
annotations: [{
content: 'rectangle1'
}]
},
{
id: "rectangle2",
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
},
annotations: [{
content: 'rectangle2'
}]
}];
let group = {
id: 'group2',
children: ['rectangle1', 'rectangle2']
};
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
}
},
mounted: function () {
const diagramInstance = this.$refs.diagramRef.ej2Instances;
diagramInstance.selectAll();
// Add the group into the diagram
diagramInstance.add(group);
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>Add collection of group nodes at runtime
- The collection of group nodes can be dynamically added using
addElementsmethod.Each time an element is added to the diagram canvas, thecollectionChangeevent will be triggered.
The following code illustrates how to add group nodes collection at runtime.
<template>
<div id="app">
<ejs-diagram ref="diagramRef" id="diagram" width="100%" height="580px" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { DiagramComponent as EjsDiagram } from "@syncfusion/ej2-vue-diagrams";
const diagramRef = ref(null);
const group = [
{ id: "rectangle1", offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: "node1" }] },
{ id: "rectangle2", offsetX: 200, offsetY: 200, width: 100, height: 100, annotations: [{ content: "node2" }] },
{ id: "group", children: ["rectangle1", "rectangle2"] },
{ id: "rectangle3", offsetX: 400, offsetY: 400, width: 100, height: 100, annotations: [{ content: "node1" }] },
{ id: "rectangle4", offsetX: 500, offsetY: 500, width: 100, height: 100, annotations: [{ content: "node2" }] },
{ id: "group2", children: ["rectangle3", "rectangle4"], padding: { left: 10, right: 10, top: 10, bottom: 10 } },
];
onMounted(() => {
const diagram = diagramRef.value.ej2Instances;
// Add the group collection into the diagram
diagram.addElements(group);
});
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram ref="diagramRef" id="diagram" width="100%" height="580px" />
</div>
</template>
<script>
import { DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
const group = [
{ id: "rectangle1", offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: "node1" }] },
{ id: "rectangle2", offsetX: 200, offsetY: 200, width: 100, height: 100, annotations: [{ content: "node2" }] },
{ id: "group", children: ["rectangle1", "rectangle2"] },
{ id: "rectangle3", offsetX: 400, offsetY: 400, width: 100, height: 100, annotations: [{ content: "node1" }] },
{ id: "rectangle4", offsetX: 500, offsetY: 500, width: 100, height: 100, annotations: [{ content: "node2" }] },
{ id: "group2", children: ["rectangle3", "rectangle4"], padding: { left: 10, right: 10, top: 10, bottom: 10 } },
];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
},
data() {
return {
};
},
mounted() {
const diagram = this.$refs.diagramRef.ej2Instances;
// Add the group collection into the diagram
diagram.addElements(group);
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>Add/Remove children from group
Add children To group at runtime
A childNode can be added to the specified Group at runtime by utilizing the diagram method diagram.addChildToGroup.
This functionality is achieved by passing the group and existing children as arguments to the method.
The following code illustrates how a child node and a group node can be passed as arguments to the method and executed at runtime.
diagramInstance.addChildToGroup(groupNode, childNode);Remove children from group at runtime
A specific child from a group node can be removed at runtime by utilizing the diagram method diagram.removeChildFromGroup.
This functionality is achieved by passing the group and its children as arguments to the method.
The following code illustrates how a child node is removed from a group at runtime.
diagramInstance.removeChildFromGroup (groupNode, childNode);<template>
<div id="app">
<button @click="addChild">Add Child to Group</button>
<button @click="removeChild">Remove Child from Group</button>
<ejs-diagram ref="diagramRef" id="diagram" :width="'100%'" :height="'600px'" :nodes="nodes" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { DiagramComponent as EjsDiagram } from "@syncfusion/ej2-vue-diagrams";
const nodes = ref([
{ id: "node1", width: 150, height: 100, offsetX: 100, offsetY: 100, annotations: [{ content: "Node1" }] },
{ id: "node2", width: 80, height: 130, offsetX: 200, offsetY: 200, annotations: [{ content: "Node2" }] },
{ id: "group1", children: ["node1", "node2"] },
{ id: "node3", width: 100, height: 100, offsetX: 300, offsetY: 300, annotations: [{ content: "Node3" }] },
]);
const diagramRef = ref(null);
let diagramInstance = null;
onMounted(() => {
diagramInstance = diagramRef.value.ej2Instances;
diagramInstance.select([diagramInstance.getObject('group1')]);
});
const addChild = () => {
// Adds the specified diagram object to the specified group node.
/**
* parameter 1 - The group node to which the diagram object will be added.
* parameter 2 - The diagram object to be added to the group.
*/
diagramInstance.addChildToGroup(diagramInstance.getObject("group1"), "node3");
};
const removeChild = () => {
// Removes the specified diagram object from the specified group node.
/**
* parameter 1 - The group node from which the diagram object will be removed.
* parameter 2 - The diagram object to be removed from the group.
*/
diagramInstance.removeChildFromGroup(diagramInstance.getObject("group1"), "node3");
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style><template>
<div id="app">
<button @click="addChild">Add Child to Group</button>
<button @click="removeChild">Remove Child from Group</button>
<ejs-diagram ref="diagramRef" id="diagram" width="100%" height="600px" :nodes="nodes" />
</div>
</template>
<script>
import { DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
let diagramInstance;
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
},
data() {
return {
nodes: [
{ id: "node1", width: 150, height: 100, offsetX: 100, offsetY: 100, annotations: [{ content: "Node1" }] },
{ id: "node2", width: 80, height: 130, offsetX: 200, offsetY: 200, annotations: [{ content: "Node2" }] },
{ id: "group1", children: ["node1", "node2"] },
{ id: "node3", width: 100, height: 100, offsetX: 300, offsetY: 300, annotations: [{ content: "Node3" }] },
],
};
},
mounted() {
diagramInstance = this.$refs.diagramRef.ej2Instances;
diagramInstance.select([diagramInstance.getObject('group1')]);
},
methods: {
addChild() {
// Adds the specified diagram object to the specified group node.
/**
* parameter 1 - The group node to which the diagram object will be added.
* parameter 2 - The diagram object to be added to the group.
*/
diagramInstance.addChildToGroup(diagramInstance.getObject("group1"), "node3");
},
removeChild() {
// Removes the specified diagram object from the specified group node.
/**
* parameter 1 - The group node from which the diagram object will be removed.
* parameter 2 - The diagram object to be removed from the group.
*/
diagramInstance.removeChildFromGroup(diagramInstance.getObject("group1"), "node3");
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>Group padding
The Padding property of a group node defines the spacing between the group node’s edges and its children.
The following code illustrates how to add Padding to the node group.
<template>
<div id="app">
<ejs-diagram ref="diagramRef" id="diagram" width="100%" height="600px" :nodes="nodes" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const nodes = [
{
id: "node1",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: "Node1" }],
},
{
id: "node2",
width: 100,
height: 100,
offsetX: 200,
offsetY: 200,
annotations: [{ content: "Node2" }],
},
{
id: "node3",
width: 100,
height: 100,
offsetX: 300,
offsetY: 300,
annotations: [{ content: "Node3" }],
},
{
id: "group",
children: ["node1", "node2", "node3"],
// Defines the space between the group node edges and its children
padding: { left: 20, right: 20, top: 20, bottom: 20 },
},
];
const diagramRef = ref(null);
onMounted(() => {
// Access the diagram instance and select the group node once the diagram is mounted
const diagram = diagramRef.value.ej2Instances;
diagram.select([diagram.getObject("group")]);
});
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram ref="diagram" id="diagram" width="100%" height="600px" :nodes="nodes" />
</div>
</template>
<script>
import { DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
},
data() {
return {
nodes: [
{
id: "node1",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: "Node1" }],
},
{
id: "node2",
width: 100,
height: 100,
offsetX: 200,
offsetY: 200,
annotations: [{ content: "Node2" }],
},
{
id: "node3",
width: 100,
height: 100,
offsetX: 300,
offsetY: 300,
annotations: [{ content: "Node3" }],
},
{
id: "group",
children: ["node1", "node2", "node3"],
// Defines the space between the group node edges and its children
padding: { left: 20, right: 20, top: 20, bottom: 20 },
},
],
};
},
mounted() {
const diagram = this.$refs.diagram.ej2Instances;
diagram.select([diagram.getObject("group")]);
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>Group flip
The flip functionality for a group node works similarly to that of normal nodes. However, when flipping a group node, the flip of its child nodes is combined with the group’s flip. This combination ensures that the child nodes inherit the group’s flip while retaining their own individual flips.
Example:
- If a child node’s flip is set to Vertical and the group node’s flip is set to Horizontal, the resulting flip for the child node will be a combination of Vertical and Horizontal (effectively a “both” flip).
- This ensures that the child nodes’ orientations adapt dynamically based on the group’s flip while maintaining their unique flip settings.
The following example shows how to apply flip for group node.
<template>
<div id="app">
<ejs-diagram ref="diagramRef" id="diagram" width="100%" height="600px" :nodes="nodes" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { DiagramComponent as EjsDiagram, FlipDirection } from '@syncfusion/ej2-vue-diagrams';
const nodes = [
{
id: 'node1',
width: 70,
height: 70,
offsetX: 100,
offsetY: 100,
//Sets the flip as Vertical
flip: FlipDirection.Vertical,
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
style: {
fill: '#6BA5D7',
},
},
{
id: 'node2',
width: 70,
height: 70,
offsetX: 180,
offsetY: 180,
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
style: {
fill: '#6BA5D7',
},
},
{
id: 'group',
children: ['node1', 'node2',],
padding: { left: 20, right: 20, top: 20, bottom: 20 },
//Sets the flip as Horizontal
flip: FlipDirection.Horizontal,
}
];
const diagramRef = ref(null);
onMounted(() => {
// Access the diagram instance and select the group node once the diagram is mounted
const diagram = diagramRef.value.ej2Instances;
diagram.select([diagram.getObject("group")]);
});
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram ref="diagram" id="diagram" width="100%" height="600px" :nodes="nodes" />
</div>
</template>
<script>
import { DiagramComponent, FlipDirection } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
},
data() {
return {
nodes: [
{
id: 'node1',
width: 70,
height: 70,
offsetX: 100,
offsetY: 100,
//Sets the flip as Vertical
flip: FlipDirection.Vertical,
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
style: {
fill: '#6BA5D7',
},
},
{
id: 'node2',
width: 70,
height: 70,
offsetX: 180,
offsetY: 180,
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
style: {
fill: '#6BA5D7',
},
},
{
id: 'group',
children: ['node1', 'node2',],
padding: { left: 20, right: 20, top: 20, bottom: 20 },
//Sets the flip as Horizontal
flip: FlipDirection.Horizontal,
}
],
};
},
mounted() {
const diagram = this.$refs.diagram.ej2Instances;
diagram.select([diagram.getObject("group")]);
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>Group flip mode
The flipMode of a group node also behave similarly to those of normal nodes. However,When you apply a flip mode to a group node, it takes precedence over any flip mode set on its child nodes, overriding their individual settings.
For example, in the below code,
the flipMode for the child node Node1 is set to LabelText.
The flipMode for the group node is set to Label.
As a result, the effective flipMode for both the child node and the group node will be Label, as the group node’s flipMode overrides the child’s.
<template>
<div id="app">
<ejs-diagram ref="diagramRef" id="diagram" width="100%" height="600px" :nodes="nodes" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { DiagramComponent as EjsDiagram, FlipDirection } from '@syncfusion/ej2-vue-diagrams';
const nodes = [
{
id: 'node1',
width: 70,
height: 70,
offsetX: 100,
offsetY: 100,
//Sets the flip mode as LabelText
flipMode: 'LabelText',
annotations: [{ content: 'Node1', offset: { x: 0, y: 0.8 } }],
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
style: {
fill: '#6BA5D7',
},
},
{
id: 'node2',
width: 70,
height: 70,
offsetX: 180,
offsetY: 180,
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
style: {
fill: '#6BA5D7',
},
},
{
id: 'group',
children: ['node1', 'node2',],
padding: { left: 20, right: 20, top: 20, bottom: 20 },
annotations: [{ content: 'Group', offset: { x: 0, y: 0.8 } }],
//Sets the flip as Horizontal
flip: FlipDirection.Horizontal,
//Sets the flip mode as Label
flipMode: 'Label',
}
];
const diagramRef = ref(null);
onMounted(() => {
// Access the diagram instance and select the group node once the diagram is mounted
const diagram = diagramRef.value.ej2Instances;
diagram.select([diagram.getObject("group")]);
});
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram ref="diagram" id="diagram" width="100%" height="600px" :nodes="nodes" />
</div>
</template>
<script>
import { DiagramComponent, FlipDirection } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
},
data() {
return {
nodes: [
{
id: 'node1',
width: 70,
height: 70,
offsetX: 100,
offsetY: 100,
//Sets the flip mode as LabelText
flipMode: 'LabelText',
annotations: [{ content: 'Node1', offset: { x: 0, y: 0.8 } }],
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
style: {
fill: '#6BA5D7',
},
},
{
id: 'node2',
width: 70,
height: 70,
offsetX: 180,
offsetY: 180,
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
style: {
fill: '#6BA5D7',
},
},
{
id: 'group',
children: ['node1', 'node2',],
padding: { left: 20, right: 20, top: 20, bottom: 20 },
annotations: [{ content: 'Group', offset: { x: 0, y: 0.8 } }],
//Sets the flip as Horizontal
flip: FlipDirection.Horizontal,
//Sets the flip mode as Label
flipMode: 'Label',
}
],
};
},
mounted() {
const diagram = this.$refs.diagram.ej2Instances;
diagram.select([diagram.getObject("group")]);
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>Nested group
Nested groups are essentially groups within groups, where a group can contain other groups as its children, creating a hierarchy that helps manage complexity and relationships between different elements.
The following code illustrates how to create nested group node.
<template>
<div id="app">
<ejs-diagram ref="diagramRef" id="diagram" width="100%" height="600px" :nodes="nodes"></ejs-diagram>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const nodes = ref([
{
id: "node1",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: "Node1" }],
},
{
id: "node2",
width: 100,
height: 100,
offsetX: 200,
offsetY: 200,
annotations: [{ content: "Node2" }],
},
{
id: "node3",
width: 100,
height: 100,
offsetX: 300,
offsetY: 350,
annotations: [{ content: "Node3" }],
},
{
id: "node4",
width: 100,
height: 100,
offsetX: 500,
offsetY: 350,
annotations: [{ content: "Node4" }],
},
{
id: "group1",
children: ["node1", "node2"],
padding: { left: 20, right: 20, top: 20, bottom: 20 },
style: { fill: "green" },
},
{
id: "group2",
children: ["node3", "node4"],
padding: { left: 20, right: 20, top: 20, bottom: 20 },
style: { fill: "skyblue" },
},
// Nested Group
{
id: "group3",
children: ["group1", "group2"],
padding: { left: 20, right: 20, top: 20, bottom: 20 },
style: { fill: "yellow" },
},
]);
const diagramRef = ref(null);
onMounted(() => {
const diagramInstance = diagramRef.value.ej2Instances;
diagramInstance.select([diagramInstance.getObject("group3")]);
});
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram ref="diagramRef" id="diagram" width="100%" height="600px" :nodes="nodes" />
</div>
</template>
<script>
import { DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
},
data() {
return {
nodes: [
{
id: "node1",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: "Node1" }],
},
{
id: "node2",
width: 100,
height: 100,
offsetX: 200,
offsetY: 200,
annotations: [{ content: "Node2" }],
},
{
id: "node3",
width: 100,
height: 100,
offsetX: 300,
offsetY: 350,
annotations: [{ content: "Node3" }],
},
{
id: "node4",
width: 100,
height: 100,
offsetX: 500,
offsetY: 350,
annotations: [{ content: "Node4" }],
},
{
id: "group1",
children: ["node1", "node2"],
padding: { left: 20, right: 20, top: 20, bottom: 20 },
style: { fill: "green" },
},
{
id: "group2",
children: ["node3", "node4"],
padding: { left: 20, right: 20, top: 20, bottom: 20 },
style: { fill: "skyblue" },
},
// Nested Group
{
id: "group3",
children: ["group1", "group2"],
padding: { left: 20, right: 20, top: 20, bottom: 20 },
style: { fill: "yellow" },
},
],
};
},
mounted() {
const diagramInstance = this.$refs.diagramRef.ej2Instances;
diagramInstance.select([diagramInstance.getObject("group3")]);
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>Add Group in palette
Group node can be added in symbol palette like the normal nodes. The following code illustrates how to render group node in palette.
<template>
<div id="app">
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :expandMode="expandMode" width="20%"
:palettes="palettes"></ejs-symbolpalette>
<ejs-diagram ref="diagramRef" id="diagram" width="80%" height="645px" :nodes="nodes"
@created="onCreated"></ejs-diagram>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { DiagramComponent as EjsDiagram, SymbolPaletteComponent as EjsSymbolpalette } from '@syncfusion/ej2-vue-diagrams';
const expandMode = ref("Multiple");
const nodes = ref([
{
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
visible: true,
style: { fill: "#6AA8D7", strokeWidth: 1 },
},
]);
const palettes = ref([
{
id: "palette1",
title: "Basic Shapes",
symbols: getSymbols(),
expanded: true,
},
]);
function getSymbols() {
return [
{
id: "n1",
height: 50,
width: 50,
offsetX: 50,
offsetY: 50,
style: { fill: "green" },
},
{
id: "n2",
height: 50,
width: 50,
offsetX: 100,
offsetY: 100,
style: { fill: "yellow" },
},
{
id: "group1",
children: ["n1", "n2"],
padding: { left: 10, right: 10, top: 10, bottom: 10 },
},
{
id: "n3",
height: 50,
width: 50,
offsetX: 100,
offsetY: 100,
style: { fill: "pink" },
},
{
id: "n4",
height: 50,
width: 50,
offsetX: 100,
offsetY: 170,
style: { fill: "orange" },
},
{
id: "group2",
children: ["n3", "n4"],
padding: { left: 10, right: 10, top: 10, bottom: 10 },
},
];
}
const diagramRef = ref(null);
function onCreated() {
const diagram = diagramRef.value.ej2Instances;
diagram.fitToPage({ mode: "Width" });
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style><template>
<div id="app">
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :expandMode="expandMode" width="20%" :palettes="palettes">
</ejs-symbolpalette>
<ejs-diagram ref="diagram" id="diagram" width="80%" height="645px" :nodes="nodes" @created="onCreated">
</ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, SymbolPaletteComponent } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
"ejs-symbolpalette": SymbolPaletteComponent,
},
data() {
return {
expandMode: "Multiple",
nodes: [
{
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
visible: true,
style: { fill: "#6AA8D7", strokeWidth: 1 },
},
],
palettes: [
{
id: "palette1",
title: "Basic Shapes",
symbols: this.getSymbols(),
expanded: true,
},
],
};
},
methods: {
getSymbols() {
return [
{
id: "n1",
height: 50,
width: 50,
offsetX: 50,
offsetY: 50,
style: { fill: "green" },
},
{
id: "n2",
height: 50,
width: 50,
offsetX: 100,
offsetY: 100,
style: { fill: "yellow" },
},
{
id: "group1",
children: ["n1", "n2"],
padding: { left: 10, right: 10, top: 10, bottom: 10 },
},
{
id: "n3",
height: 50,
width: 50,
offsetX: 100,
offsetY: 100,
style: { fill: "pink" },
},
{
id: "n4",
height: 50,
width: 50,
offsetX: 100,
offsetY: 170,
style: { fill: "orange" },
},
{
id: "group2",
children: ["n3", "n4"],
padding: { left: 10, right: 10, top: 10, bottom: 10 },
},
];
},
onCreated() {
const diagram = this.$refs.diagram.ej2Instances;
diagram.fitToPage({ mode: "Width" });
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>Update group node at runtime
Group can be updated dynamically similar to the normal nodes. The following code illustrates how to update group node at runtime.
<template>
<div id="app">
<button @click="updatePadding">Update Group Padding</button>
<button @click="updateStyle">Update Group Style</button>
<ejs-diagram ref="diagramRef" id="diagram" width="100%" height="600px" :nodes="nodes" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const nodes = [
{
id: 'rectangle1',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
style: { strokeColor: '#6BA5D7', fill: '#6BA5D7' },
annotations: [{ content: 'rectangle1' }],
},
{
id: 'rectangle2',
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
style: { strokeColor: '#6BA5D7', fill: '#6BA5D7' },
annotations: [{ content: 'rectangle2' }],
},
{
id: 'group',
children: ['rectangle1', 'rectangle2'],
style: { strokeColor: 'green' },
},
];
const diagramRef = ref(null);
let diagramInstance;
function updatePadding() {
const group = diagramInstance.getObject('group');
group.padding = { left: 10, right: 10, top: 10, bottom: 10 };
diagramInstance.dataBind();
}
function updateStyle() {
const group = diagramInstance.getObject('group');
group.style = { fill: 'green' };
diagramInstance.dataBind();
}
onMounted(() => {
diagramInstance = diagramRef.value.ej2Instances;
});
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style><template>
<div id="app">
<button @click="updatePadding">Update Group Padding</button>
<button @click="updateStyle">Update Group Style</button>
<ejs-diagram ref="diagram" id="diagram" width="100%" height="600px" :nodes="nodes">
</ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
let diagramInstance;
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
},
data() {
return {
nodes: [
{
id: 'rectangle1',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
},
annotations: [
{
content: 'rectangle1',
},
],
},
{
id: 'rectangle2',
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
},
annotations: [
{
content: 'rectangle2',
},
],
},
{
id: 'group',
children: ['rectangle1', 'rectangle2'],
style: { strokeColor: 'green' },
},
],
};
},
mounted() {
diagramInstance = this.$refs.diagram.ej2Instances;
},
methods: {
updatePadding() {
let group = diagramInstance.getObject('group');
group.padding = { left: 10, right: 10, top: 10, bottom: 10 };
this.diagramInstance.dataBind();
},
updateStyle() {
let group = diagramInstance.getObject('group');
group.style = { fill: 'green' };
this.diagramInstance.dataBind();
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>Container
Containers are used to automatically measure and arrange the size and position of the child elements in a predefined manner. There are two types of containers available.
Canvas
-
The canvas panel supports absolute positioning and provides the least layout functionality to its contained diagram elements.
-
Canvas allows you to position its contained elements by using the margin and alignment properties.
-
Rendering alone possible in canvas container.
-
It allows elements to be either vertically or horizontally aligned.
-
Child can be defined with the collection
canvas.childrenproperty. -
Basic element can be defined with the collection of
basicElements.
Stack
-
Stack panel is used to arrange its children in a single line or stack order, either vertically or horizontally.
-
It controls spacing by setting margin properties of child and padding properties of group. By default, a stack panel’s
orientationis vertical.
The following code illustrates how to add a stack panel.
<template>
<div id="app">
<ejs-diagram id="diagram" :width="width" :height="height" :nodes="nodes" :getNodeDefaults="getNodeDefaults"
:setNodeTemplate="setNodeTemplate" />
</div>
</template>
<script setup>
import {
DiagramComponent as EjsDiagram,
StackPanel,
TextElement,
randomId
} from '@syncfusion/ej2-vue-diagrams';
const width = "100%";
const height = "350px";
const nodes = [
{
id: 'stacknode',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
annotations: [
{
content: 'Custom Template',
offset: { y: 1 },
verticalAlignment: 'Top'
}
]
}
];
const getNodeDefaults = (node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
};
const createTextElement = (text) => {
const textElement = new TextElement();
textElement.id = "text" + randomId();
textElement.width = 50;
textElement.height = 20;
textElement.content = text;
return textElement;
};
const addTextRows = (stackPanel) => {
const rows = ['Row1', 'Row2', 'Row3', 'Row4'];
rows.forEach(row => stackPanel.children.push(createTextElement(row)));
};
const setNodeTemplate = (obj) => {
if (obj && obj.id.includes('stacknode')) {
// Create the stack panel for the node template
const table = new StackPanel();
table.orientation = 'Horizontal';
// Initialize column1 and add elements
const column1 = new StackPanel();
column1.children = [];
column1.children.push(createTextElement('Column1'));
addTextRows(column1);
// Initialize column2 and add elements
const column2 = new StackPanel();
column2.children = [];
column2.children.push(createTextElement('Column2'));
addTextRows(column2);
table.children = [column1, column2];
return table;
}
return null;
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width="width" :height="height" :nodes="nodes" :getNodeDefaults="getNodeDefaults"
:setNodeTemplate="setNodeTemplate">
</ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, StackPanel, TextElement, randomId } from '@syncfusion/ej2-vue-diagrams';
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: [
{
id: 'stacknode',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
annotations: [
{
content: 'Custom Template',
offset: { y: 1 },
verticalAlignment: 'Top'
}
]
}
],
getNodeDefaults: (node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
},
setNodeTemplate: (obj) => {
if (obj && obj.id.includes('stacknode')) {
// Create the stack panel for the node template
const table = new StackPanel();
table.orientation = 'Horizontal';
// Initialize column1 and add elements
const column1 = new StackPanel();
column1.children = [];
column1.children.push(this.createTextElement('Column1'));
this.addTextRows(column1);
// Initialize column2 and add elements
const column2 = new StackPanel();
column2.children = [];
column2.children.push(this.createTextElement('Column2'));
this.addTextRows(column2);
table.children = [column1, column2];
return table;
}
return null;
}
}
},
methods: {
createTextElement(text) {
const textElement = new TextElement();
textElement.id = "text" + randomId();
textElement.width = 50;
textElement.height = 20;
textElement.content = text;
return textElement;
},
addTextRows(stackPanel) {
const rows = ['Row1', 'Row2', 'Row3', 'Row4'];
rows.forEach(row => stackPanel.children.push(this.createTextElement(row)));
}
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>Difference between a basic group and containers
| Group | Container |
|---|---|
| It arranges the child elements based on the child elements position and size properties. | Each container has a predefined behavior to measure and arrange its child elements. Canvas and stack containers are supported in the diagram. |
| The Padding, Min, and Max Size properties are not applicable for basic group. | It is applicable for container. |
| The Children’s margin and alignment properties are not applicable for basic group. | It is applicable for container. |
Interaction
Group node interactions can be performed similarly to normal nodes. Fundamental diagram interactions like selecting, dragging, resizing, and rotating apply equally to group nodes. For more informatation refer to the nodes interactions
Selecting a Node Group
When a child element within a node group is clicked, the entire contained node group is selected instead of the individual child element. Subsequent clicks on the selected element change the selection from top to bottom within the hierarchy, moving from the parent node group to its children.
Events
The events triggered when interacting with group nodes are similar to those for individual nodes. For more information, refer to the nodes events