Group in React Diagram component
30 Jan 202324 minutes to read
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.
Create group
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.
-
The
padding
property of a group node defines the spacing between the group node’s edges and its children. -
While creating group, its child node need to be declared before the group declaration.
-
Add a node to the existing group child by using the
diagram.group
method. -
The group’s
diagram.unGroup
method is used to define whether the group can be ungrouped or not. -
A group can be added into a child of another group.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, } from "@syncfusion/ej2-react-diagrams";
let diagramInstance;
let nodes = [{
id: "rectangle1",
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'rectangle1'
}]
},
{
id: "rectangle2",
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
annotations: [{
content: 'rectangle2'
}]
},
{
id: "rectangle3",
offsetX: 400,
offsetY: 300,
width: 100,
height: 100,
style: {
fill: 'darkCyan',
strokeWidth: 2
},
annotations: [{
content: 'rectangle2'
}]
},
// Grouping node 1 and node 2 into a single group
{
id: 'group',
children: ['rectangle1', 'rectangle2'],
padding: { left: 10, right: 10, top: 10, bottom: 10 }
},
];
// initialize Diagram component
function App() {
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'1500px'} height={'600px'} nodes={nodes} created={() => {
diagramInstance.selectAll();
// Adding the third node into the existing group
diagramInstance.group();
}} getNodeDefaults={(node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel,
} from "@syncfusion/ej2-react-diagrams";
let diagramInstance:DiagramComponent;
let nodes: NodeModel[] = [{
id: "rectangle1",
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'rectangle1'
}]
},
{
id: "rectangle2",
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
annotations: [{
content: 'rectangle2'
}]
},
{
id: "rectangle3",
offsetX: 400,
offsetY: 300,
width: 100,
height: 100,
style: {
fill: 'darkCyan',
strokeWidth: 2
},
annotations: [{
content: 'rectangle2'
}]
},
// Grouping node 1 and node 2 into a single group
{
id: 'group',
children: ['rectangle1', 'rectangle2'],
padding:{left:10,right:10,top:10,bottom:10}
},
];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'1500px'}
height={'600px'}
nodes={nodes}
created={() => {
diagramInstance.selectAll();
// Adding the third node into the existing group
diagramInstance.group();
}}
getNodeDefaults={(node: NodeModel) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
The following code illustrates how a ungroup at runtime.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let diagramInstance;
let nodes = [{
id: "rectangle1",
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'rectangle1'
}]
},
{
id: "rectangle2",
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
annotations: [{
content: 'rectangle2'
}]
},
{
id: 'group',
children: ['rectangle1', 'rectangle2']
},
];
function App() {
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'1500px'} height={'600px'} nodes={nodes} getNodeDefaults={(node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}} created={() => {
diagramInstance.selectAll();
// Ungroup the selected group into nodes
diagramInstance.unGroup();
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
let diagramInstance:DiagramComponent;
let nodes: NodeModel[] = [{
id: "rectangle1",
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'rectangle1'
}]
},
{
id: "rectangle2",
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
annotations: [{
content: 'rectangle2'
}]
},
{
id: 'group',
children: ['rectangle1', 'rectangle2']
},
];
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'1500px'}
height={'600px'}
nodes={nodes}
getNodeDefaults={(node: NodeModel) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}}
created={() => {
diagramInstance.selectAll();
// Ungroup the selected group into nodes
diagramInstance.unGroup();
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
Add group at runtime
A group node can be added at runtime by using the client-side method diagram.add
.
The following code illustrates how a group node is added at runtime.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, } from "@syncfusion/ej2-react-diagrams";
let diagramInstance;
let nodes = [{
id: "rectangle1",
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'rectangle1'
}]
},
{
id: "rectangle2",
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
annotations: [{
content: 'rectangle2'
}]
}];
let group = {
id: 'group2',
children: ['rectangle1', 'rectangle2']
};
function App() {
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'1500px'} height={'600px'} getNodeDefaults={(node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}} nodes={nodes} created={() => {
// Adds the group into the diagram
diagramInstance.add(group);
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel,
} from "@syncfusion/ej2-react-diagrams";
let diagramInstance:DiagramComponent;
let nodes: NodeModel[] = [{
id: "rectangle1",
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'rectangle1'
}]
},
{
id: "rectangle2",
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
annotations: [{
content: 'rectangle2'
}]
}];
let group: NodeModel = {
id: 'group2',
children: ['rectangle1', 'rectangle2']
};
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'1500px'}
height={'600px'}
getNodeDefaults={(node: NodeModel) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}}
nodes={nodes}
created={() => {
// Adds the group into the diagram
diagramInstance.add(group);
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
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.children
property. -
Basic element can be defined with the collection of
basicElements
.
The following code illustrates how to add canvas panel.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramElement, Canvas } from "@syncfusion/ej2-react-diagrams";
let diagramInstance;
let canvas;
let child1;
let child2;
canvas = new Canvas();
canvas.pivot = {
x: 0,
y: 0
};
canvas.offsetX = 75;
canvas.offsetY = 75;
canvas.style.fill = '#6BA5D7';
child1 = new DiagramElement();
child1.width = 100;
child1.height = 100;
child1.margin.left = child1.margin.top = 10;
child2 = new DiagramElement();
child2.width = 100;
child2.height = 100;
child2.margin.left = 190;
child2.margin.top = 190;
canvas.children = [child1, child2];
function App() {
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} mode={'SVG'} width={'1000px'} height={'600px'}
// Defines the basic elements
basicElements={[canvas]}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
DiagramElement,
Canvas
} from "@syncfusion/ej2-react-diagrams";
let diagramInstance:DiagramComponent;
let canvas: Canvas;
let child1: DiagramElement;
let child2: DiagramElement;
canvas = new Canvas();
canvas.pivot = {
x: 0,
y: 0
};
canvas.offsetX = 75;
canvas.offsetY = 75;
canvas.style.fill = '#6BA5D7';
child1 = new DiagramElement();
child1.width = 100;
child1.height = 100;
child1.margin.left = child1.margin.top = 10;
child2 = new DiagramElement();
child2.width = 100;
child2.height = 100;
child2.margin.left = 190;
child2.margin.top = 190;
canvas.children = [child1, child2];
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
mode={'SVG'}
width={'1000px'}
height={'600px'}
// Defines the basic elements
basicElements={[canvas]}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
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
orientation
is vertical.
The following code illustrates how to add a stack panel.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, StackPanel, TextElement, } from "@syncfusion/ej2-react-diagrams";
let diagramInstance;
let nodes = [{
id: 'node5',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
annotations: [{
content: 'Custom Template',
offset: {
y: 1
},
verticalAlignment: 'Top'
}]
},];
let count = 11;
let getTextElement = (text) => {
let textElement = new TextElement();
textElement.id = "text" + count;
textElement.width = 50;
textElement.height = 20;
textElement.content = text;
count++;
return textElement;
};
let addRows = (column) => {
column.children.push(getTextElement('Row1'));
column.children.push(getTextElement('Row2'));
column.children.push(getTextElement('Row3'));
column.children.push(getTextElement('Row4'));
};
//Intialize Diagram Component
function App() {
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={900} height={900} nodes={nodes} getNodeDefaults={(node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}} setNodeTemplate={(obj, diagram) => {
if (obj.id.indexOf('node5') !== -1) {
// It will be replaced with grid panel
let table = new StackPanel();
table.orientation = 'Horizontal';
table.padding.left;
let column1 = new StackPanel();
column1.children = [];
column1.children.push(getTextElement('Column1'));
addRows(column1);
let column2 = new StackPanel();
column2.children = [];
column2.children.push(getTextElement('Column2'));
addRows(column2);
table.children = [column1, column2];
return table;
}
return null;
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel,
StackPanel,
TextElement,
} from "@syncfusion/ej2-react-diagrams";
let diagramInstance:DiagramComponent;
let nodes: NodeModel[] = [{
id: 'node5',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
annotations: [{
content: 'Custom Template',
offset: {
y: 1
},
verticalAlignment: 'Top'
}]
}, ];
let count: Number = 11;
let getTextElement: Function = (text: string) => {
let textElement: TextElement = new TextElement();
textElement.id = "text" + count;
textElement.width = 50;
textElement.height = 20;
textElement.content = text;
count++;
return textElement;
};
let addRows: Function = (column: StackPanel) => {
column.children.push(getTextElement('Row1'));
column.children.push(getTextElement('Row2'));
column.children.push(getTextElement('Row3'));
column.children.push(getTextElement('Row4'));
};
//Intialize Diagram Component
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={900}
height={900}
nodes={nodes}
getNodeDefaults={(node: NodeModel) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}}
setNodeTemplate={(obj: NodeModel, diagram: Diagram): StackPanel => {
if (obj.id.indexOf('node5') !== -1) {
// It will be replaced with grid panel
let table: StackPanel = new StackPanel();
table.orientation = 'Horizontal';
table.padding.left;
let column1: StackPanel = new StackPanel();
column1.children = [];
column1.children.push(getTextElement('Column1'));
addRows(column1);
let column2: StackPanel = new StackPanel();
column2.children = [];
column2.children.push(getTextElement('Column2'));
addRows(column2);
table.children = [column1, column2];
return table;
}
return null;
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
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
You can edit the group and its children at runtime. For more information about how to interact with a group, refer to Edit Groups
.