Nodes in React Diagram component
6 Dec 202424 minutes to read
Nodes are graphical objects used to visually represent the geometrical information, process flow, internal business procedure, entity, or any other kind of data, and it represents the functions of a complete system regarding to how it interacts with external entities.
Create node
A node can be created and added to the diagram either programmatically or interactively. The id property of a node is used to define its unique identifier and can later be used to find the node at runtime for customization. Nodes are stacked on the diagram area from bottom to top in the order they are added.
NOTE
Note: There should not be any white-spaces in the ID string while setting the ID.
Add node through nodes collection
To create a node, define the node object and add that to nodes collection of the diagram model. The following code example illustrates how to add a node to the diagram.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
// Text(label) added to the node
}];
// initialize Diagram component
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'}
// Add node
nodes={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";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
// Text(label) added to the node
}];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
// Add node
nodes={node}
// render initialized Diagram
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);NOTE
Node id should not begin with numbers(should begin with a letter). Node Id should be unique for all the shapes and connectors.
Add/Remove node at runtime
Nodes can be added at runtime by using public method, add and can be removed at runtime by using public method, remove. On adding node at runtime, the nodes collection is changed and the collectionChange event will trigger.
The following code illustrates how to add a node.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent } from '@syncfusion/ej2-react-diagrams';
let diagramInstance;
let node = [
{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
},
];
// initialize Diagram component
function App() {
const add = () => {
diagramInstance.add(node[0]);
};
const remove = () => {
diagramInstance.remove(diagramInstance.nodes[0]);
};
return (
<div>
<button onClick={add}>Add Node</button>
<button onClick={remove}>Remove Node</button>
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, NodeModel } from '@syncfusion/ej2-react-diagrams';
let diagramInstance: DiagramComponent;
let node: NodeModel[] = [
{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
},
];
// initialize Diagram component
function App() {
const add = () => {
diagramInstance.add(node[0]);
};
const remove = () => {
diagramInstance.remove(diagramInstance.nodes[0]);
};
return (
<div>
<button onClick={add}>Add Node</button>
<button onClick={remove}>Remove Node</button>
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Add collection of nodes at runtime
- The collection of 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 nodes collection at run time.
import * as React from "react";
import * as ReactDOM from "react-dom";
import {DiagramComponent }from "@syncfusion/ej2-react-diagrams";
let diagramInstance;
// initialize nodes collection
var node = [
{ id: 'node1', offsetX: 140, offsetY: 250 ,annotations: [{ content: 'node1' }]},
{ id: 'node2', offsetX: 250, offsetY: 250 ,annotations: [{ content: 'node2' }]},
{ id: 'node3', offsetX: 360, offsetY: 250 ,annotations: [{ content: 'node3' }]}
];
// initialize Diagram component
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;
}}
created={() => {
// Add collection of nodes
diagramInstance.addElements(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;
//initialize node collection
var node:NodeModel= [
{ id: 'node1', offsetX: 35, offsetY: 260 ,annotations: [{ content: 'node1' }]},
{ id: 'node2', offsetX: 140, offsetY: 260 ,annotations: [{ content: 'node2' }]},
{ id: 'node3', offsetX: 240, offsetY: 260 ,annotations: [{ content: 'node3' }]}
];// initialize Diagram component
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;
}}
created={() => {
// Add collection of nodes
diagramInstance.addElements(node);
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Add node from palette
Nodes can be predefined and added to the palette, and can be dropped into the diagram when needed. For more information
about adding nodes from symbol palette, refer to Symbol Palette.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, SymbolPalette,
SymbolPaletteComponent, } from '@syncfusion/ej2-react-diagrams';
let diagramInstance;
let node = [
{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
},
];
export function getBasicShapes() {
let basicShapes = [
{
id: "Rectangle",
shape: {
type: "Basic",
shape: "Rectangle",
},
height: 100,
width: 100
},
];
return basicShapes;
}
// initialize Diagram component
function App() {
return (
<div style={{width:'100%'}}>
<div style={{float: 'left', width:'30%'}}>
<SymbolPaletteComponent id="palette" width={'100%'} height={"700px"}
palettes={[
{
id: 'basic',
title: 'Basic Shapes',
symbols: getBasicShapes(),
},
]}
//Specifies the size of the symbol
symbolHeight={80} symbolWidth={80}
//Sets the space to be left around a symbol
symbolMargin={{
left: 15,
right: 15,
top: 0,
bottom: 15,
}} />
</div>
<div style={{float: 'right', width:'70%'}}>
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'70%'}
height={'700px'}
nodes={node}
/>
</div>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent,
SymbolPaletteComponent, NodeModel } from '@syncfusion/ej2-react-diagrams';
let diagramInstance: DiagramComponent;
let node: NodeModel[] = [
{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
},
];
export function getBasicShapes() {
let basicShapes = [
{
id: "Rectangle",
shape: {
type: "Basic",
shape: "Rectangle",
},
height: 100,
width: 100
},
];
return basicShapes;
}
// initialize Diagram component
function App() {
return (
<div style={{width:'100%'}}>
<div style={{float: 'left', width:'30%'}}>
<SymbolPaletteComponent id="palette" width={'100%'} height={"700px"}
palettes={[
{
id: 'basic',
title: 'Basic Shapes',
symbols: getBasicShapes(),
},
]}
//Specifies the size of the symbol
symbolHeight={80} symbolWidth={80}
//Sets the space to be left around a symbol
symbolMargin={{
left: 15,
right: 15,
top: 0,
bottom: 15,
}} />
</div>
<div style={{float: 'right', width:'70%'}}>
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'70%'}
height={'700px'}
nodes={node}
/>
</div>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Create node through data source
Nodes can be generated automatically with the information provided through dataSource property. The default properties for these nodes are fetched from default settings (getNodeDefaults). For more information about data source, refer to DataBinding.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
DiagramComponent,
Inject,
DataBinding,
} from '@syncfusion/ej2-react-diagrams';
import { DataManager, Query } from '@syncfusion/ej2-data';
let diagramInstance;
let data = [
{
id: 'data1',
parent: null,
},
];
let items = new DataManager(data, new Query().take(7));
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'700px'}
getNodeDefaults={(node) => {
node.height = 100;
node.width = 100;
node.offsetX = 300;
node.offsetY = 200;
node.style = { fill: 'yellow', strokeColor: 'yellow' };
return node;
}}
dataSourceSettings=
>
<Inject services={[DataBinding]} />
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
DiagramComponent,
Inject,
DataBinding,
} from '@syncfusion/ej2-react-diagrams';
import { DataManager, Query } from '@syncfusion/ej2-data';
let diagramInstance: DiagramComponent;
let data: any = [
{
id: 'data1',
parent: null,
},
];
let items: any = new DataManager(data, new Query().take(7));
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'700px'}
getNodeDefaults={(node) => {
node.height = 100;
node.width = 100;
node.offsetX = 300;
node.offsetY = 200;
node.style = { fill: 'yellow', strokeColor: 'yellow' };
return node;
}}
dataSourceSettings=
>
<Inject services={[DataBinding]} />
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Draw nodes
Nodes can be interactively drawn by clicking and dragging the diagram surface.
To draw a shape, you have to activate the drawing tool by setting DrawOnce or ContinuousDraw to the tool property and you need to set the node object by using the drawingObject property. The following code example illustrates how to draw a rectangle at runtime.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, DiagramTools } from '@syncfusion/ej2-react-diagrams';
let diagramInstance;
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'700px'}
created={() => {
//JSON to create a rectangle
let drawingshape = {
type: 'Basic',
shape: 'Rectangle',
};
let node = {
shape: drawingshape,
};
diagramInstance.drawingObject = node;
//To draw an object once, activate draw once
diagramInstance.tool = DiagramTools.ContinuousDraw;
diagramInstance.dataBind();
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, DiagramTools } from '@syncfusion/ej2-react-diagrams';
let diagramInstance: DiagramComponent;
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'700px'}
created={() => {
//JSON to create a rectangle
let drawingshape = {
type: 'Basic',
shape: 'Rectangle',
};
let node = {
shape: drawingshape,
};
diagramInstance.drawingObject = node;
//To draw an object once, activate draw once
diagramInstance.tool = DiagramTools.ContinuousDraw;
diagramInstance.dataBind();
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Update node at runtime
You can modify any node properties at runtime, and the changes will be instantly reflected. For example, here you can change the size and color of the node.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent } from '@syncfusion/ej2-react-diagrams';
let diagramInstance;
let node = [
{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: { fill: '#6AA8D7',strokeWidth:1},
},
];
// initialize Diagram component
function App() {
const color = () => {
if(diagramInstance.nodes[0].style.fill === '#6AA8D7'){
diagramInstance.nodes[0].style.fill = 'orange';
}
else{
diagramInstance.nodes[0].style.fill = '#6AA8D7';
}
};
const size = () => {
if(diagramInstance.nodes[0].width === 100){
diagramInstance.nodes[0].width = 200;
}
else{
diagramInstance.nodes[0].width =100;
}
};
return (
<div>
<button onClick={color}>Change Color</button>
<button onClick={size}>Change Size</button>
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
nodes={node}
width={'100%'}
height={'600px'}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, NodeModel } from '@syncfusion/ej2-react-diagrams';
let diagramInstance: DiagramComponent;
let node: NodeModel[] = [
{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: { fill: '#6AA8D7',strokeWidth:1},
},
];
// initialize Diagram component
function App() {
const color = () => {
if(diagramInstance.nodes[0].style.fill === '#6AA8D7'){
diagramInstance.nodes[0].style.fill = 'orange';
}
else{
diagramInstance.nodes[0].style.fill = '#6AA8D7';
}
};
const size = () => {
if(diagramInstance.nodes[0].width === 100){
diagramInstance.nodes[0].width = 200;
}
else{
diagramInstance.nodes[0].width =100;
}
};
return (
<div>
<button onClick={color}>Change Color</button>
<button onClick={size}>Change Size</button>
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
nodes={node}
width={'100%'}
height={'600px'}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);NOTE
Once the property is updated, you should call the
dataBindto reflect the changes instantly.
Clone node at runtime
Cloning a node creates a new node instance with identical properties and attributes. You can clone a node using the copy and paste public methods of the diagram model.
The following code example illustrates how to clone node at runtime
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent } from '@syncfusion/ej2-react-diagrams';
let diagramInstance;
let node = [
{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: { fill: '#6AA8D7', strokeWidth: 1 },
},
];
// initialize Diagram component
function App() {
const clone = () => {
let selectedNode =
diagramInstance.selectedItems.nodes.length > 0
? diagramInstance.selectedItems.nodes[0]
: diagramInstance.nodes[0];
diagramInstance.select([selectedNode]);
diagramInstance.copy();
diagramInstance.paste();
};
return (
<div>
<button onClick={clone}>Clone Node</button>
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
nodes={node}
width={'100%'}
height={'600px'}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, NodeModel } from '@syncfusion/ej2-react-diagrams';
let diagramInstance: DiagramComponent;
let node: NodeModel[] = [
{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: { fill: '#6AA8D7',strokeWidth:1},
},
];
// initialize Diagram component
function App() {
const clone = () => {
let selectedNode =
diagramInstance.selectedItems.nodes.length > 0
? diagramInstance.selectedItems.nodes[0]
: diagramInstance.nodes[0];
diagramInstance.select([selectedNode]);
diagramInstance.copy();
diagramInstance.paste();
};
return (
<div>
<button onClick={clone}>Clone Node</button>
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
nodes={node}
width={'100%'}
height={'600px'}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Add nodes from tree view
By customizing the dragEnter functionality, you can allow elements from other components, such as the tree view, to be converted into nodes based on the data of the dragged element.