Group in React Diagram Component
21 Oct 202524 minutes to read
Groups enable developers to cluster multiple nodes and connectors into a single manageable element, acting as a container that maintains relationships between child elements while allowing both collective and individual manipulation. This powerful feature streamlines complex diagram management by treating related elements as cohesive units while preserving the ability to edit individual components when needed.
Create Group
A group functions as a container for its children (nodes, groups, and connectors). Every change made to the group affects all children proportionally, while child elements remain individually editable. Groups can contain other groups, creating nested hierarchies for complex diagram structures.
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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent } from "@syncfusion/ej2-react-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'],
},
];
const getNodeDefaults = (node) => {
node.height = 100;
node.width = 100;
node.strokeColor = "White";
return node;
}
function App() {
const diagramRef = useRef(null);
return (<DiagramComponent id="diagram" ref={diagramRef} width={'1000px'} height={'600px'}
nodes={nodes} getNodeDefaults={getNodeDefaults}
created={() => {
diagramRef.current.select([diagramRef.current.getObject('group')]);
}}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams";
const nodes: NodeModel = [
{
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'],
},
];
const getNodeDefaults = (node: NodeModel): NodeModel => {
node.height = 100;
node.width = 100;
node.strokeColor = "White";
return node;
}
function App() {
const diagramRef = useRef(null);
return (<DiagramComponent id="diagram" ref={diagramRef} width={'1000px'} height={'600px'}
nodes={nodes} getNodeDefaults={getNodeDefaults}
created={() => {
diagramRef.current.select([diagramRef.current.getObject('group')]);
}}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Connectors can be added to a group. The following code illustrates how to add connectors into a group.
import * as React from "react";
import * as ReactDOM from "react-dom";
import {useRef} from "react";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
const connectors = [{
id: 'connector1', type: 'Orthogonal', sourceID: 'node1', targetID: 'node2'
},
];
const 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' }]
},
{
id: 'group', children: ['node1', 'node2', 'connector1',], style: { strokeWidth: 0 }
}];
function App() {
const diagramRef = useRef(null);
return (<DiagramComponent id="diagram" ref={diagramRef} width={'1000px'} height={'700px'} nodes={nodes} connectors={connectors}
created={() => {
diagramRef.current.select([diagramRef.current.getObject('group')]);
}}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {useRef} from "react";
import { DiagramComponent, ConnectorModel, NodeModel } from "@syncfusion/ej2-react-diagrams";
const connectors: ConnectorModel[] = [{
id: 'connector1', type: 'Orthogonal', sourceID: 'node1', targetID: 'node2'
},
];
const nodes: NodeModel[] = [{
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' }]
},
{
id: 'group', children: ['node1', 'node2', 'connector1',], style: { strokeWidth: 0 }
}];
function App() {
const diagramRef = useRef(null);
return (<DiagramComponent id="diagram" ref={diagramRef} width={'1000px'} height={'700px'} nodes={nodes} connectors={connectors}
created={() => {
diagramRef.current.select([diagramRef.current.getObject('group')]);
}}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Runtime Group Operations
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 will encapsulate the selected nodes within a newly formed group node.
The following code illustrates how to group at runtime.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent } from "@syncfusion/ej2-react-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' }]
},
];
function App() {
const diagramRef = useRef(null);
const group = () => {
//Groups the selected nodes and connectors.
diagramRef.current.group();
}
return (
<div>
<button onClick={group}>Group Selected Nodes</button>
<DiagramComponent id="diagram" ref={diagramRef} width="100%"
height="900px" nodes={nodes}
created={() => {
diagramRef.current.selectAll();
}}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams";
const nodes: NodeModel[] = [
{
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' }]
},
];
function App() {
const diagramRef = useRef(null);
const group = () => {
//Groups the selected nodes and connectors.
diagramRef.current.group();
}
return (
<div>
<button onClick={group}>Group Selected Nodes</button>
<DiagramComponent id="diagram" ref={diagramRef} width="100%"
height="900px" nodes={nodes}
created={() => {
diagramRef.current.selectAll();
}}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Ungroup Nodes at Runtime
Group node can be unGrouped dynamically using the diagram.unGroup method.This operation dissolves the group container while preserving all child elements as individual diagram elements.
The following code example shows how to ungroup a group node at runtime:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent } from "@syncfusion/ej2-react-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 App() {
const diagramRef = useRef(null);
const unGroup = () => {
//Ungroups the selected nodes and connectors.
diagramRef.current.unGroup();
}
return (
<div>
<button onClick={unGroup}>UnGroup</button>
<DiagramComponent id="diagram" ref={diagramRef} width="100%"
height="600px" nodes={nodes}
created={() => {
diagramRef.current.select([diagramRef.current.getObject('group')]);
}}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams";
const nodes: NodeModel[] = [
{
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 App() {
const diagramRef = useRef(null);
const unGroup = () => {
//Ungroups the selected nodes and connectors.
diagramRef.current.unGroup();
}
return (
<div>
<button onClick={unGroup}>UnGroup</button>
<DiagramComponent id="diagram" ref={diagramRef} width="100%"
height="600px" nodes={nodes}
created={() => {
diagramRef.current.select([diagramRef.current.getObject('group')]);
}}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Add Group Node at Runtime
A group node can be added at runtime by using the diagram method diagram.add.This method allows programmatic addition of predefined group structures to an existing diagram.
The following code illustrates how a group node is added at runtime:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent } from "@syncfusion/ej2-react-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',
}],
}
];
const group = {
id: 'group2',
children: ['rectangle1', 'rectangle2']
}
function App() {
const diagramRef = useRef(null);
return (
<div>
<DiagramComponent id="diagram" ref={diagramRef} width="100%"
height="600px" nodes={nodes}
created={() => {
// Add the group into the diagram
diagramRef.current.add(group);
}}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams";
const nodes: NodeModel[] = [
{
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: NodeModel = {
id: 'group2',
children: ['rectangle1', 'rectangle2']
}
function App() {
const diagramRef = useRef(null);
return (
<div>
<DiagramComponent id="diagram" ref={diagramRef} width="100%"
height="600px" nodes={nodes}
created={() => {
// Add the group into the diagram
diagramRef.current.add(group);
}}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Add Collection of Group Nodes at Runtime
The collection of group nodes can be dynamically added using the addElements method.Each time an element is added to the diagram canvas, the collectionChange event will be triggered.
The following code illustrates how to add group nodes collection at runtime.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent } from "@syncfusion/ej2-react-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 } },
];
function App() {
const diagramRef = useRef(null);
return (
<div>
<DiagramComponent id="diagram" ref={diagramRef} width="100%" height="500px"
created={() => {
// Add nodes collection into the diagram
diagramRef.current.addElements(group);
}}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams";
const group: NodeModel[] = [
{ 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 } },
];
function App() {
const diagramRef = useRef(null);
return (
<div>
<DiagramComponent id="diagram" ref={diagramRef} width="100%" height="500px"
created={() => {
// Add nodes collection into the diagram
diagramRef.current.addElements(group);
}}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Manage Group Children at Runtime
Add Children to Group at Runtime
A child node can be added to a specified group at runtime using the diagram method diagram.addChildToGroup. This functionality requires passing the group and the existing child node as arguments to the method.
The following code illustrates how a child node can be added to a group node at runtime:
diagram.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 requires passing the group and its child node as arguments to the method.
The following code illustrates how a child node is removed from a group at runtime:
diagram.removeChildFromGroup (groupNode, childNode);import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
const 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' }]
}
];
function App() {
const diagramRef = useRef(null);
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.
*/
diagramRef.current.addChildToGroup(
diagramRef.current.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.
*/
diagramRef.current.removeChildFromGroup(
diagramRef.current.getObject('group1'),
'node3'
);
}
return (
<div>
<button onClick={addChild}>AddChildToGroup</button>
<button onClick={removeChild}>RemoveChildFromGroup</button>
<DiagramComponent id="diagram" ref={diagramRef} width="100%" height="600px" nodes={nodes}
created={() => {
diagramRef.current.select([diagramRef.current.getObject('group1')]);
}}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams";
const nodes: NodeModel[] = [
{
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' }]
}
];
function App() {
const diagramRef = useRef(null);
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.
*/
diagramRef.current.addChildToGroup(
diagramRef.current.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.
*/
diagramRef.current.removeChildFromGroup(
diagramRef.current.getObject('group1'),
'node3'
);
}
return (
<div>
<button onClick={addChild}>AddChildToGroup</button>
<button onClick={removeChild}>RemoveChildFromGroup</button>
<DiagramComponent id="diagram" ref={diagramRef} width="100%" height="600px" nodes={nodes}
created={() => {
diagramRef.current.select([diagramRef.current.getObject('group1')]);
}}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Group Styling and Layout
Group Padding
The Padding property of a group node defines the spacing between the group node’s edges and its children. This property helps maintain visual separation and improves the overall appearance of grouped elements.
The following code illustrates how to add padding to a node group:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent } from "@syncfusion/ej2-react-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 },
}
];
function App() {
const diagramRef = useRef(null);
return (<DiagramComponent id="diagram" ref={diagramRef} width={'100%'} height={'600px'}
nodes={nodes}
created={() => {
diagramRef.current.select([diagramRef.current.getObject('group')]);
}}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams";
const nodes: NodeModel[] = [
{
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 },
}
];
function App() {
const diagramRef = useRef(null);
return (<DiagramComponent id="diagram" ref={diagramRef} width={'100%'} height={'600px'}
nodes={nodes}
created={() => {
diagramRef.current.select([diagramRef.current.getObject('group')]);
}}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Group Flip
The flip functionality for a group node works similarly to that of normal nodes. When flipping a group node, the child nodes inherit the group’s flip transformation while retaining their individual flip settings. The combined effect creates a hierarchical flip behavior where both the group and child transformations are applied.
Example of combined flip behavior:
- 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 combines both transformations (effectively a “both” flip).
- This ensures that child nodes adapt dynamically based on the group’s flip while maintaining their unique flip settings.
The following example shows how to apply flip transformations to group nodes:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent,FlipDirection } from "@syncfusion/ej2-react-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,
style: {
fill: 'white', strokeColor:'black'
},
}
];
function App() {
const diagramRef = useRef(null);
return (<DiagramComponent id="diagram" ref={diagramRef} width={'100%'} height={'600px'}
nodes={nodes}
created={() => {
diagramRef.current.select([diagramRef.current.getObject('group')]);
}}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent, NodeModel, FlipDirection } from "@syncfusion/ej2-react-diagrams";
const nodes: NodeModel[] = [
{
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,
style: {
fill: 'white', strokeColor:'black'
},
}
];
function App() {
const diagramRef = useRef(null);
return (<DiagramComponent id="diagram" ref={diagramRef} width={'100%'} height={'600px'}
nodes={nodes}
created={() => {
diagramRef.current.select([diagramRef.current.getObject('group')]);
}}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Group Flip Mode
The flipModeproperty of a group node behaves similarly to that of normal nodes. However, when a flip mode is applied to a group node, it takes precedence over any flip mode set on its child nodes, overriding their individual settings.
Example of flip mode precedence:
In the code below, the flipMode for the child node Node1 is set to LabelText, while the flipMode for the group node is set to Label. 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 setting.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent, FlipDirection } from "@syncfusion/ej2-react-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',
style: {
fill: 'white', strokeColor:'black'
},
}
];
function App() {
const diagramRef = useRef(null);
return (<DiagramComponent id="diagram" ref={diagramRef} width={'100%'} height={'600px'}
nodes={nodes}
created={() => {
diagramRef.current.select([diagramRef.current.getObject('group')]);
}}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent, NodeModel, FlipDirection } from "@syncfusion/ej2-react-diagrams";
const nodes: NodeModel[] = [
{
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',
style: {
fill: 'white', strokeColor:'black'
},
}
];
function App() {
const diagramRef = useRef(null);
return (<DiagramComponent id="diagram" ref={diagramRef} width={'100%'} height={'600px'}
nodes={nodes}
created={() => {
diagramRef.current.select([diagramRef.current.getObject('group')]);
}}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Nested Group
Nested groups are groups within groups, where a group can contain other groups as its children, creating a hierarchical structure. This feature helps manage complexity and relationships between different elements in sophisticated diagram scenarios.
The following code illustrates how to create nested group nodes:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent } from "@syncfusion/ej2-react-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: 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' },
}
];
function App() {
const diagramRef = useRef(null);
return (
<DiagramComponent id="diagram" ref={diagramRef} width="100%" height="600px" nodes={nodes}
created={() => {
diagramRef.current.select([diagramRef.current.getObject('group3')]);
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams";
const nodes: NodeModel = [
{
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' },
}
];
function App() {
const diagramRef = useRef(null);
return (
<DiagramComponent id="diagram" ref={diagramRef} width="100%" height="600px" nodes={nodes}
created={() => {
diagramRef.current.select([diagramRef.current.getObject('group3')]);
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Add Groups to Symbol Palette
Group nodes can be added to the symbol palette like normal nodes, enabling reusable group templates for consistent diagram creation. This feature allows developers to create standardized group configurations that can be dragged and dropped into diagrams.
The following code illustrates how to render group nodes in the palette:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent, SymbolPaletteComponent } from "@syncfusion/ej2-react-diagrams";
const nodes = [
{
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
visible: true,
style: { fill: '#6AA8D7', strokeWidth: 1 },
}
];
export function getSymbols() {
let shapes = [
{
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 },
},
];
return shapes;
}
const palettes = [
{
id: 'palette1',
title: 'Basic Shapes',
symbols: getSymbols(),
expanded: true,
}
]
function App() {
const diagramRef = useRef(null);
return (
<div>
<SymbolPaletteComponent id="symbolpalette" width="30%" palettes={palettes} />
<DiagramComponent id="diagram" ref={diagramRef} width="70%" height="645px" nodes={nodes}
created={() => {
diagramRef.current.fitToPage({ mode: 'Width' });
}}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent, SymbolPaletteComponent, PaletteModel, NodeModel } from "@syncfusion/ej2-react-diagrams";
const nodes: NodeModel[] = [
{
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
visible: true,
style: { fill: '#6AA8D7', strokeWidth: 1 },
}
];
export function getSymbols(): NodeModel[] {
let shapes: NodeModel[] = [
{
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 },
},
];
return shapes;
}
const palettes: PaletteModel[] = [
{
id: 'palette1',
title: 'Basic Shapes',
symbols: getSymbols(),
expanded: true,
}
]
function App() {
const diagramRef = useRef(null);
return (
<div>
<SymbolPaletteComponent id="symbolpalette" width="30%" palettes={palettes} />
<DiagramComponent id="diagram" ref={diagramRef} width="70%" height="645px" nodes={nodes}
created={() => {
diagramRef.current.fitToPage({ mode: 'Width' });
}}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Update Group Nodes at Runtime
Groups can be updated dynamically similar to normal nodes, allowing modification of group properties, styling, and behavior during runtime operations.
The following code illustrates how to update group nodes at runtime:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent } from "@syncfusion/ej2-react-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' },
},
];
function App() {
const diagramRef = useRef(null);
const updatePadding = () => {
let group = diagramRef.current.getObject('group');
//Update group padding
(group.padding = { left: 10, right: 10, top: 10, bottom: 10 }), group.style;
diagramRef.current.dataBind();
}
const updateStyle = () => {
let group = diagramRef.current.getObject('group');
//Update group style
group.style = { fill: 'green' };
diagramRef.current.dataBind();
}
return (
<div>
<button onClick={updatePadding}>UpdateGroupPadding</button>
<button onClick={updateStyle}>UpdateGroupStyle</button>
<DiagramComponent id="diagram" ref={diagramRef} width="100%"
height="900px" nodes={nodes}
created={() => {
diagramRef.current.selectAll();
}}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams";
const nodes: NodeModel = [
{
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' },
},
];
function App() {
const diagramRef = useRef(null);
const updatePadding = () => {
let group: NodeModel = diagramRef.current.getObject('group');
//Update group padding
group.padding = { left: 10, right: 10, top: 10, bottom: 10 };
diagramRef.current.dataBind();
}
const updateStyle = () => {
let group: NodeModel = diagramRef.current.getObject('group');
//Update group style
group.style = { fill: 'green' };
diagramRef.current.dataBind();
}
return (
<div>
<button onClick={updatePadding}>UpdateGroupPadding</button>
<button onClick={updateStyle}>UpdateGroupStyle</button>
<DiagramComponent id="diagram" ref={diagramRef} width="100%"
height="900px" nodes={nodes}
created={() => {
diagramRef.current.selectAll();
}}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Container Types
Containers provide automatic measurement and arrangement of child element size and position according to predefined layout behaviors. The diagram supports two container types, each optimized for different layout scenarios.
Canvas Container
The canvas panel supports absolute positioning and provides minimal layout functionality to its contained diagram elements. This container type offers maximum flexibility for precise element placement.
Canvas Container Characteristics:
- Supports absolute positioning using margin and alignment properties.
- Enables rendering operations independently for each contained element.
- Allows elements to be aligned vertically or horizontally.
- Child elements are defined using the
canvas.childrenproperty. - Basic elements can be defined within the
basicElementscollection.
The following code illustrates how to add canvas panel.
import * as React from "react";
import * as ReactDOM from "react-dom";
import {useRef} from "react";
import { DiagramComponent, DiagramElement, Canvas } from "@syncfusion/ej2-react-diagrams";
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.id = 'child1';
child1.width = 100;
child1.height = 100;
child1.margin.left = child1.margin.top = 10;
child2 = new DiagramElement();
child2.id = 'child2';
child2.width = 100;
child2.height = 100;
child2.margin.left = 190;
child2.margin.right = 5;
child2.margin.top = 190;
child2.margin.bottom = 5;
canvas.children = [child1, child2];
function App() {
const diagramInstance = useRef(null);
return (<DiagramComponent id="diagram" ref={diagramInstance} mode={'SVG'} width={'1000px'} height={'600px'}
// Defines the basic elements
basicElements={[canvas]}/>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {useRef} from "react";
import {
Diagram,
DiagramComponent,
DiagramElement,
Canvas
} from "@syncfusion/ej2-react-diagrams";
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.id = 'child1';
child1.width = 100;
child1.height = 100;
child1.margin.left = child1.margin.top = 10;
child2 = new DiagramElement();
child2.id = 'child2';
child2.width = 100;
child2.height = 100;
child2.margin.left = 190;
child2.margin.right = 5;
child2.margin.top = 190;
child2.margin.bottom = 5;
canvas.children = [child1, child2];
function App() {
const diagramInstance: DiagramComponent = useRef(null);
return (
<DiagramComponent
id="diagram"
ref={diagramInstance}
mode={'SVG'}
width={'1000px'}
height={'600px'}
// Defines the basic elements
basicElements={[canvas]}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Stack Container
The stack panel arranges its children in a single line or stack order, either vertically or horizontally. This container provides structured layout control through spacing and alignment properties.
Stack Container Characteristics:
- Controls spacing using margin properties of child elements and padding properties of the group.
- Default
orientationis vertical. - Provides consistent alignment and distribution of child elements.
- Ideal for creating organized, sequential layouts.
The following code illustrates how to add a stack panel:
import * as React from "react";
import * as ReactDOM from "react-dom";
import {useRef} from "react";
import { DiagramComponent, StackPanel, TextElement } from "@syncfusion/ej2-react-diagrams";
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() {
const diagramInstance = useRef(null);
return (<DiagramComponent id="diagram" ref={diagramInstance} 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('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {useRef} from "react";
import { Diagram, DiagramComponent, NodeModel, StackPanel, TextElement } from "@syncfusion/ej2-react-diagrams";
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() {
const diagramInstance: DiagramComponent = useRef(null);
return (
<DiagramComponent
id="diagram"
ref={diagramInstance}
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('container'));
root.render(<App />);Difference Between Basic Groups and Containers
| Basic Group | Container |
|---|---|
| Arranges child elements based on the child elements’ position and size properties | Each container has predefined behavior to measure and arrange child elements. Canvas and stack containers are supported in the diagram |
| The padding, minimum, and maximum size properties are not applicable for basic groups | These properties are applicable for containers |
| The children’s margin and alignment properties are not applicable for basic groups | These properties are applicable for containers |
Group Interactions
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 information, refer to the node interactions documentation.
Selecting Group Nodes
When a child element within a node group is clicked, the entire containing 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 documentation.