Layers in React Diagram Component
21 Oct 202524 minutes to read
Layers provide a powerful organizational system for managing diagram elements by grouping related shapes into named categories. This functionality enables developers to build complex diagrams with selective viewing, interaction control, and bulk property management across multiple elements simultaneously.
Core Layer Properties
In a diagram, Layers enable modification of properties for all shapes assigned to a specific layer. The primary configurable properties include:
- Objects - Define which elements belong to the layer.
- Visible - Control layer visibility.
- Lock - Prevent interactions with layer elements.
- AddInfo - Store additional custom information.
Objects
The layer’s objects property specifies which diagram elements belong to that layer. This property contains a collection of element IDs that defines the categories of nodes and connectors the layer encompasses.
Use case: Separate different types of diagram elements for independent management - for example, keeping background elements in one layer and interactive elements in another.
In the following example, basic shapes are categorized in layer 1, and flow shapes are categorized in layer 2:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let nodes= [
// Layer 1 Nodes
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
shape: { type: 'Basic', shape: 'Rectangle' },
annotations: [{ content: 'Basic rectangle' }],
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 250,
offsetY: 100,
shape: { type: 'Basic', shape: 'Ellipse' },
annotations: [{ content: 'Basic Ellipse' }],
},
{
id: 'node3',
width: 100,
height: 100,
offsetX: 400,
offsetY: 100,
shape: { type: 'Basic', shape: 'RightTriangle' },
annotations: [{ content: 'Basic RightTriangle' }],
},
{
id: 'node4',
width: 100,
height: 100,
offsetX: 550,
offsetY: 100,
shape: { type: 'Basic', shape: 'Plus' },
annotations: [{ content: 'Basic Plus' }],
},
// Layer 2 Nodes
{
id: 'node5',
width: 100,
height: 100,
offsetX: 100,
offsetY: 300,
shape: { type: 'Flow', shape: 'Terminator' },
annotations: [{ content: 'Flow Terminator' }],
},
{
id: 'node6',
width: 100,
height: 100,
offsetX: 250,
offsetY: 300,
shape: { type: 'Flow', shape: 'Process' },
annotations: [{ content: 'Flow Process' }],
},
{
id: 'node7',
width: 100,
height: 100,
offsetX: 400,
offsetY: 300,
shape: { type: 'Flow', shape: 'Decision' },
annotations: [{ content: 'Flow Decision' }],
},
{
id: 'node8',
width: 100,
height: 100,
offsetX: 550,
offsetY: 300,
shape: { type: 'Flow', shape: 'Document' },
annotations: [{ content: 'Flow Document' }],
},
];
// initialize diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={nodes}
// Add layer
layers = {
[
{
id: 'layer1',
//Layer 1 objects
objects: ['node1', 'node2','node3','node4']
},
{
id: 'layer2',
//Layer 2 objects
objects: ['node5','node6','node7','node8'],
}
]
}
/>
);
}
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 nodes: NodeModel[] = [
// Layer 1 Nodes
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
shape: { type: 'Basic', shape: 'Rectangle' },
annotations: [{ content: 'Basic rectangle' }],
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 250,
offsetY: 100,
shape: { type: 'Basic', shape: 'Ellipse' },
annotations: [{ content: 'Basic Ellipse' }],
},
{
id: 'node3',
width: 100,
height: 100,
offsetX: 400,
offsetY: 100,
shape: { type: 'Basic', shape: 'RightTriangle' },
annotations: [{ content: 'Basic RightTriangle' }],
},
{
id: 'node4',
width: 100,
height: 100,
offsetX: 550,
offsetY: 100,
shape: { type: 'Basic', shape: 'Plus' },
annotations: [{ content: 'Basic Plus' }],
},
// Layer 2 Nodes
{
id: 'node5',
width: 100,
height: 100,
offsetX: 100,
offsetY: 300,
shape: { type: 'Flow', shape: 'Terminator' },
annotations: [{ content: 'Flow Terminator' }],
},
{
id: 'node6',
width: 100,
height: 100,
offsetX: 250,
offsetY: 300,
shape: { type: 'Flow', shape: 'Process' },
annotations: [{ content: 'Flow Process' }],
},
{
id: 'node7',
width: 100,
height: 100,
offsetX: 400,
offsetY: 300,
shape: { type: 'Flow', shape: 'Decision' },
annotations: [{ content: 'Flow Decision' }],
},
{
id: 'node8',
width: 100,
height: 100,
offsetX: 550,
offsetY: 300,
shape: { type: 'Flow', shape: 'Document' },
annotations: [{ content: 'Flow Document' }],
},
];
// initialize diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={nodes}
// Add layer
layers = {
[
{
id: 'layer1',
//Layer 1 objects
objects: ['node1', 'node2','node3','node4']
},
{
id: 'layer2',
//Layer 2 objects
objects: ['node5','node6','node7','node8'],
}
]
}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Visible
The layer’s visibleproperty controls the visibility of all elements assigned to the layer. This allows selective display of different diagram sections without removing elements permanently.
Use case: Create diagrams with multiple views where users can toggle between different information layers, such as showing only critical path items in a project diagram.
In the following example, the visibility of layer one is set to false. By default, the visible property of a layer is set to true:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let nodes= [
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
annotations: [{ content: 'Layer 2 Object' }],
},
];
let connectors = [
{
id: 'connector1',
type: 'Straight',
sourcePoint: {
x: 100,
y: 300,
},
targetPoint: {
x: 200,
y: 400,
},
annotations: [{ content: 'Layer 2 Object' }],
},
];
// initialize diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={nodes}
connectors={connectors}
// Add layer
layers = {
[
{
id: 'layer1',
//Layer 1 visibility set as false.
visible: false,
objects: ['node1'],
},
{
id: 'layer2',
//Layer 1 visibility set as true.
visible: true,
objects: ['node2', 'connector1'],
},
]
}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,NodeModel,ConnectorModel } from "@syncfusion/ej2-react-diagrams";
let nodes: NodeModel[]= [
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
annotations: [{ content: 'Layer 2 Object' }],
},
];
let connectors:ConnectorModel[] = [
{
id: 'connector1',
type: 'Straight',
sourcePoint: {
x: 100,
y: 300,
},
targetPoint: {
x: 200,
y: 400,
},
annotations: [{ content: 'Layer 2 Object' }],
},
];
// initialize diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={nodes}
connectors={connectors}
// Add layer
layers = {
[
{
id: 'layer1',
//Layer 1 visibility set as false.
visible: false,
objects: ['node1'],
},
{
id: 'layer2',
//Layer 1 visibility set as true.
visible: true,
objects: ['node2', 'connector1'],
},
]
}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Lock
The layer’s lock property prevents or allows changes to element dimensions and positions. When a layer is locked, all interactions with objects in that layer are disabled, including selecting, dragging, rotating, and connecting operations.
Use case: Protect template elements or background graphics from accidental modification while allowing users to work with other diagram elements.
In the following example, the objects in layer one are locked. By default, the lock property of a layer is set to false:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let nodes= [
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object Locked' }],
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
annotations: [{ content: 'Layer 2 Object' }],
},
];
let connectors = [
{
id: 'connector1',
type: 'Straight',
sourcePoint: {
x: 100,
y: 300,
},
targetPoint: {
x: 200,
y: 400,
},
annotations: [{ content: 'Layer 2 Object' }],
},
];
// initialize diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={nodes}
connectors={connectors}
// Add layer
layers = {
[
{
id: 'layer1',
visible: true,
objects: ['node1'],
//Locks the layer1 and prevents any interactions to the objects in layer1
lock: true,
},
{
id: 'layer2',
visible: true,
objects: ['node2', 'connector1'],
lock: false,
},
]
}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,NodeModel,ConnectorModel } from "@syncfusion/ej2-react-diagrams";
let nodes: NodeModel[]= [
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object Locked' }],
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
annotations: [{ content: 'Layer 2 Object' }],
},
];
let connectors: ConnectorModel[] = [
{
id: 'connector1',
type: 'Straight',
sourcePoint: {
x: 100,
y: 300,
},
targetPoint: {
x: 200,
y: 400,
},
annotations: [{ content: 'Layer 2 Object' }],
},
];
// initialize diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={nodes}
connectors={connectors}
// Add layer
layers = {
[
{
id: 'layer1',
visible: true,
objects: ['node1'],
//Locks the layer1 and prevents any interactions to the objects in layer1
lock: true,
},
{
id: 'layer2',
visible: true,
objects: ['node2', 'connector1'],
lock: false,
},
]
}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);AddInfo
The addInfo property allows storage of additional custom information with layers. This can be useful for storing metadata, configuration settings, or application-specific data associated with the layer.
Use case: Store layer descriptions, creation timestamps, owner information, or custom application data for enhanced layer management.
The following code illustrates how to add additional information to layers:
// A node is created and stored in nodes array.
let nodes: NodeModel[] = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{
content: 'Default Shape'
}]
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
shape: {
type: 'Path',
data: 'M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,' +
'179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z'
},
annotations: [{
content: 'Path Element'
}]
}
];
let connectors: ConnectorModel[] = [{
id: 'connector1',
type: 'Straight',
sourcePoint: {
x: 100,
y: 300
},
targetPoint: {
x: 200,
y: 400
},
}];
let addInfo: Object = { Description: 'Layer1' };
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={nodes}
connectors={connectors}
// Add layer
layers = {
[
{
id: 'layer1',
visible: true,
objects: ['node1', 'node2'],
addInfo: addInfo
},
{
id: 'layer2',
visible: true,
objects: ['node2'],
}
]
}
// render initialized Diagram
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Add Layer at Runtime
Layers can be added at runtime using the addLayer public method.
The layer’s ID property defines the ID of the layer, which is used to find the layer at runtime and apply any customizations. You can also add new objects to the new layer using the addLayer method.
The following code illustrates how to add a new layer with new connectors stored in an object array of the new layer:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
let diagramInstance;
let nodes= [
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
annotations: [{ content: 'Layer 2 Object' }],
},
];
//method to add layer through run time.
const addLayer = () => {
/**
* Add the layers to the existing diagram layer collection
* newLayer - representing the layer to be added to the diagram.
* layerObject - An optional array of objects associated with the layer.
*/
let newLayer = {
id: 'newlayer',
visible: true,
lock: false,
};
let layerObject = [
{
id: 'con1',
type: 'Straight',
sourceID: 'node1',
targetID: 'node2',
},
];
diagramInstance.addLayer(newLayer, layerObject);
}
// initialize diagram component
function App() {
return (
<div>
<ButtonComponent content="Add Layer" onClick={addLayer} />
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
nodes={nodes}
// Add layer
layers = {
[
{
id: 'layer1',
objects: ['node1'],
},
{
id: 'layer2',
objects: ['node2'],
},
]
}
/>
</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";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
let diagramInstance: DiagramComponent;
let nodes: NodeModel[]= [
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
annotations: [{ content: 'Layer 2 Object' }],
},
];
//method to add layer through run time.
const addLayer = () => {
/**
* Add the layers to the existing diagram layer collection
* newLayer - representing the layer to be added to the diagram.
* layerObject - An optional array of objects associated with the layer.
*/
let newLayer = {
id: 'newlayer',
visible: true,
lock: false,
};
let layerObject = [
{
id: 'con1',
type: 'Straight',
sourceID: 'node1',
targetID: 'node2',
},
];
diagramInstance.addLayer(newLayer, layerObject);
}
// initialize diagram component
function App() {
return (
<div>
<ButtonComponent content="Add Layer" onClick={addLayer} />
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
nodes={nodes}
// Add layer
layers = {
[
{
id: 'layer1',
objects: ['node1'],
},
{
id: 'layer2',
objects: ['node2'],
},
]
}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Remove Layer at Runtime
Layers can be removed at runtime by using the removeLayer public method.
To remove a layer, pass the ID of the layer you want to remove as a parameter to the removeLayer method.
The following code illustrates how to remove a layer.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
let diagramInstance;
let nodes= [
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
annotations: [{ content: 'Layer 2 Object' }],
},
];
//Method to remove layer through run time
const removeLayer = () => {
/**
* Remove the layer from the existing diagram layer collection
* layerId - representing the id of the layer to be removed from the diagram.
*/
diagramInstance.removeLayer('layer1');
}
// initialize diagram component
function App() {
return (
<div>
<ButtonComponent content="Remove Layer" onClick={removeLayer} />
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
nodes={nodes}
// Add layer
layers = {
[
{
id: 'layer1',
objects: ['node1'],
},
{
id: 'layer2',
objects: ['node2'],
},
]
}
/>
</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";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
let diagramInstance: DiagramComponent;
let nodes: NodeModel[] = [
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
annotations: [{ content: 'Layer 2 Object' }],
},
];
//Method to remove layer through run time
const removeLayer = () => {
/**
* Remove the layer from the existing diagram layer collection
* layerId - representing the id of the layer to be removed from the diagram.
*/
diagramInstance.removeLayer('layer1');
}
// initialize diagram component
function App() {
return (
<div>
<ButtonComponent content="Remove Layer" onClick={removeLayer} />
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
nodes={nodes}
// Add layer
layers = {
[
{
id: 'layer1',
objects: ['node1'],
},
{
id: 'layer2',
objects: ['node2'],
},
]
}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);MoveObjects
You can move objects from one layer to another dynamically using the moveObjects public method of the diagram control. This can be useful for managing complex diagrams with multiple layers where you need to update the categorization of elements based on user interaction or other dynamic conditions.
The following code illustrates how to move objects from one layer to another layer.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
let diagramInstance;
let nodes= [
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
{
id: 'node3',
width: 100,
height: 100,
offsetX: 300,
offsetY: 300,
annotations: [{ content: 'Layer 2 Object' }],
},
];
const moveObjects = () => {
/**
* Move objects from one layer to another layer
* Parameter 1 - An array of object IDs represented as strings to be moved
* parameter 2 - The ID of the target layer to which the objects should be moved.
*/
diagramInstance.moveObjects(['node1'], 'layer2');
}
// initialize diagram component
function App() {
return (
<div>
<ButtonComponent content="Move Objects" onClick={moveObjects} />
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
nodes={nodes}
// Add layer
layers = {
[
{
id: 'layer1',
objects: ['node1','node2'],
},
{
id: 'layer2',
objects: ['node3'],
},
]
}
/>
</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";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
let diagramInstance: DiagramComponent;
let nodes: NodeModel[]= [
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
{
id: 'node3',
width: 100,
height: 100,
offsetX: 300,
offsetY: 300,
annotations: [{ content: 'Layer 2 Object' }],
},
];
const moveObjects = () => {
/**
* Move objects from one layer to another layer
* Parameter 1 - An array of object IDs represented as strings to be moved
* parameter 2 - The ID of the target layer to which the objects should be moved.
*/
diagramInstance.moveObjects(['node1'], 'layer2');
}
// initialize diagram component
function App() {
return (
<div>
<ButtonComponent content="Move Objects" onClick={moveObjects} />
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
nodes={nodes}
// Add layer
layers = {
[
{
id: 'layer1',
objects: ['node1','node2'],
},
{
id: 'layer2',
objects: ['node3'],
},
]
}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Z-Index
zIndex property of a layer defines its position in the stacking order within the diagram. Higher z-index values render above lower values, allowing control over which layers appear in front of others.
Bring Layer Forward
Move a layer forward in the stacking order using the bringLayerForward public method.
The following code illustrates how to bring forward to layer.
// move the layer forward
diagram.bringLayerForward('layer1');Send Layer Backward
Move a layer backward in the stacking order using the sendLayerBackward public method.
// move the layer backward
diagram.sendLayerBackward('layer1');The following code illustrates how to send the layer forward/backward to another layer.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
let diagramInstance;
let nodes= [
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 130,
offsetY: 130,
annotations: [{ content: 'Layer 2 Object' }],
},
{
id: 'node3',
width: 100,
height: 100,
offsetX: 160,
offsetY: 160,
annotations: [{ content: 'Layer 3 Object' }],
},
];
const bringLayerForward = () => {
/**
* Move the layer forward
* Parameter 1 -A string representing the id of the layer to be moved forward.
*/
diagramInstance.bringLayerForward('layer1');
}
const sendLayerBackward = () => {
/**
* Move the layer Backward
* Parameter 1 - A string representing the id of the layer to be moved backward.
*/
diagramInstance.sendLayerBackward('layer1');
}
// initialize diagram component
function App() {
return (
<div>
<ButtonComponent content="bringLayerForward" onClick={bringLayerForward} />
<ButtonComponent content="sendLayerBackward" onClick={sendLayerBackward} />
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
nodes={nodes}
// Add layer
layers = {
[
{
id: 'layer1',
objects: ['node1'],
},
{
id: 'layer2',
objects: ['node2'],
},
{
id: 'layer3',
objects: ['node3'],
},
]
}
/>
</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";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
let diagramInstance: DiagramComponent;
let nodes: NodeModel[]= [
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 130,
offsetY: 130,
annotations: [{ content: 'Layer 2 Object' }],
},
{
id: 'node3',
width: 100,
height: 100,
offsetX: 160,
offsetY: 160,
annotations: [{ content: 'Layer 3 Object' }],
},
];
const bringLayerForward = () => {
/**
* Move the layer forward
* Parameter 1 -A string representing the id of the layer to be moved forward.
*/
diagramInstance.bringLayerForward('layer1');
}
const sendLayerBackward = () => {
/**
* Move the layer Backward
* Parameter 1 - A string representing the id of the layer to be moved backward.
*/
diagramInstance.sendLayerBackward('layer1');
}
// initialize diagram component
function App() {
return (
<div>
<ButtonComponent content="bringLayerForward" onClick={bringLayerForward} />
<ButtonComponent content="sendLayerBackward" onClick={sendLayerBackward} />
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
nodes={nodes}
// Add layer
layers = {
[
{
id: 'layer1',
objects: ['node1'],
},
{
id: 'layer2',
objects: ['node2'],
},
{
id: 'layer3',
objects: ['node3'],
},
]
}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Layer and Objects Rendering Order
The rendering of diagram elements with layer properties involves grouping them within a diagram_diagramLayer for basic shape nodes and diagram_nativeLayer_svg for SVG-native elements. Even if different types of nodes are added within the same layer, the rendering at the DOM level occurs in separate layers. Therefore, when executing layering commands like bringLayerForward and sendLayerBackward, the native SVG elements will always render above the basic shape elements.
The order of rendering is as follows: HTML shapes -> SVG shapes -> Path data shapes & Basic shapes.
Clone Layer
Layers can be cloned with its object by using the cloneLayer public method.This creates an identical copy of the layer and all its assigned elements.
Use case: Create template layers or duplicate complex layer configurations for reuse in different diagram sections.
The following code illustrates how clone the layer.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
let diagramInstance;
let nodes= [
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 130,
annotations: [{ content: 'Layer 1 Object' }],
},
{
id: 'node3',
width: 100,
height: 100,
offsetX: 160,
offsetY: 360,
annotations: [{ content: 'Layer 2 Object' }],
},
];
const cloneLayer = () => {
/**
* To Clone the layer
* Parameter 1 - A string representing the name of the layer to be cloned.
*/
diagramInstance.cloneLayer('layer1');
}
// initialize diagram component
function App() {
return (
<div>
<ButtonComponent content="cloneLayer" onClick={cloneLayer} />
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
nodes={nodes}
// Add layer
layers = {
[
{
id: 'layer1',
objects: ['node1','node2'],
},
{
id: 'layer2',
objects: ['node3'],
},
]
}
/>
</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";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
let diagramInstance: DiagramComponent ;
let nodes: NodeModel[]= [
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 130,
annotations: [{ content: 'Layer 1 Object' }],
},
{
id: 'node3',
width: 100,
height: 100,
offsetX: 160,
offsetY: 360,
annotations: [{ content: 'Layer 2 Object' }],
},
];
const cloneLayer = () => {
/**
* To Clone the layer
* Parameter 1 - A string representing the name of the layer to be cloned.
*/
diagramInstance.cloneLayer('layer1');
}
// initialize diagram component
function App() {
return (
<div>
<ButtonComponent content="cloneLayer" onClick={cloneLayer} />
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
nodes={nodes}
// Add layer
layers = {
[
{
id: 'layer1',
objects: ['node1','node2'],
},
{
id: 'layer2',
objects: ['node3'],
},
]
}
/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Active Layer
The active layer represents the layer with the highest z-index in a diagram. When objects are added at runtime, they are automatically assigned to the active layer. If no layers are explicitly defined, a default layer is created and set as the active layer. When multiple layers exist, the layer with the highest z-index becomes the active layer.
Use case: Ensure new elements are added to the appropriate layer in multi-layer diagrams, particularly in interactive editing scenarios.
Get ActiveLayer
Retrieve the current active layer of the diagram using the getActiveLayer public method.
The following code illustrates how fetch active layer from the diagram
// gets the active layer of diagram
diagram.getActiveLayer();Set ActiveLayer
You can set any layer to be the active layer of the diagram by using thesetActiveLayer public method.
The following code illustrates how to set active layer for diagram
// set the active layer
//@param layerName defines the name of the layer which is to be active layer
diagram.setActiveLayer('layer2');