Contents
Layers in Vue Diagram component
7 Dec 202424 minutes to read
Layer organizes related shapes within a diagram control as named categories. Assigning shapes to different layers enables selective viewing, removal, and locking of distinct shape categories.
In a diagram, Layers facilitate the modification of properties for all shapes assigned to a specific layer. Key properties that can be configured include:
- Objects
- Visible
- Lock
- AddInfo
Objects
The layer’s objects property specifies which diagram elements belong to that layer. This property contains a collection where you can define the categories of nodes and connectors that the layer encompasses.
In the following example, the basic shapes are categorized in layer 1, and the flow shapes are categorized in layer 2.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes' :layers='layers'></ejs-diagram>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { DiagramComponent as EjsDiagram,} from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
const 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" }],
},
];
const width = "100%";
const height = "350px";
const layers =[{
id: "layer1",
//Layer 1 objects
objects: ["node1", "node2", "node3", "node4"],
},
{
id: "layer2",
//Layer 2 objects
objects: ["node5", "node6", "node7", "node8"],
},
]
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram
id="diagram"
ref="diagram"
:width="width"
:height="height"
:nodes="nodes"
:layers="layers"
></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from "@syncfusion/ej2-vue-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" }],
},
];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
layers: [
{
id: "layer1",
//Layer 1 objects
objects: ["node1", "node2", "node3", "node4"],
},
{
id: "layer2",
//Layer 2 objects
objects: ["node5", "node6", "node7", "node8"],
},
],
};
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>Visible
The layer’s visible property is used to control the visibility of the elements assigned to the layer. You can hide objects in one layer while showing objects in another layer.
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.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors' :layers='layers'></ejs-diagram>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { DiagramComponent as EjsDiagram,} from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
const 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' }],
},
];
const connectors = [
{
id: 'connector1',
type: 'Straight',
sourcePoint: {
x: 100,
y: 300,
},
targetPoint: {
x: 200,
y: 400,
},
annotations: [{ content: 'Layer 2 Object' }],
},
];
const width = "100%";
const height = "450px";
const layers =[
{
id: 'layer1',
//Layer 1 visibility set as false.
visible: false,
objects: ['node1'],
},
{
id: 'layer2',
visible: true,
objects: ['node2', 'connector1'],
},
]
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram
id="diagram"
ref="diagram"
:width="width"
:height="height"
:nodes="nodes"
:connectors="connectors"
:layers="layers"
></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from "@syncfusion/ej2-vue-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' }],
},
];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
},
data() {
return {
width: "100%",
height: "450px",
nodes: nodes,
connectors: connectors,
layers: [
{
id: 'layer1',
//Layer 1 visibility set as false.
visible: false,
objects: ['node1'],
},
{
id: 'layer2',
visible: true,
objects: ['node2', 'connector1'],
},
],
};
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>Lock
The layer’s lock property is used to prevent or allow changes to the element’s dimensions and positions. Locking a layer prevents any interactions with the objects in that layer, such as selecting, dragging, rotating, and connecting.
In the following example the objects in layer one is locked. By default, the lock property of a layer is set to false.
<template>
<div id="app">
<ejs-diagram
id="diagram"
ref="diagram"
:width="width"
:height="height"
:nodes="nodes"
:connectors="connectors"
:layers="layers"
></ejs-diagram>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { DiagramComponent as EjsDiagram } from "@syncfusion/ej2-vue-diagrams";
const diagram = ref(null);
const 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',
},
],
},
];
const connectors = [
{
id: 'connector1',
type: 'Straight',
sourcePoint: {
x: 100,
y: 300,
},
targetPoint: {
x: 200,
y: 400,
},
annotations: [
{
content: 'Layer 2 Object',
},
],
},
];
const width = "100%";
const height = "450px";
const 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,
},
];
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram
id="diagram"
ref="diagram"
:width="width"
:height="height"
:nodes="nodes"
:connectors="connectors"
:layers="layers"
></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from "@syncfusion/ej2-vue-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',
},
],
},
];
var connectors = [
{
id: 'connector1',
type: 'Straight',
sourcePoint: {
x: 100,
y: 300,
},
targetPoint: {
x: 200,
y: 400,
},
annotations: [
{
content: 'Layer 2 Object',
},
],
},
];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
},
data() {
return {
width: "100%",
height: "450px",
nodes: nodes,
connectors: connectors,
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,
},
],
};
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>AddInfo
The addInfo property of layers allow you to maintain additional information to the layers.
The following code illustrates how to add additional information to the layers.
let nodes = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
}
];
let connectors: ConnectorModel[] = [{
id: 'connector1',
type: 'Straight',
sourcePoint: {
x: 100,
y: 300
},
targetPoint: {
x: 200,
y: 400
},
}];
let addInfo: Object = { Description: 'Layer1' };
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
layers: [{
id: 'layer1',
visible: true,
objects: ['node1', 'node2', 'connector1'],
addInfo: addInfo
}]
}
}}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:
<template>
<div id="app">
<ejs-button v-on:click='addLayer'>Add layer</ejs-button>
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes' :layers='layers'></ejs-diagram>
</div>
</template>
<script setup>
import { provide, ref,onMounted } from "vue";
import { DiagramComponent as EjsDiagram,} from '@syncfusion/ej2-vue-diagrams';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
let diagramInstance;
const diagram = ref(null);
const nodes = [
// Layer 1 Nodes
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
// Layer 2 Nodes
{
id: 'node2',
width: 100,
height: 100,
offsetX: 100,
offsetY: 300,
annotations: [{ content: 'Layer 2 Object' }],
},
];
const width = "100%";
const height = "350px";
onMounted(function () {
diagramInstance = diagram.value.ej2Instances;
});
const layers =[
{
id: 'layer1',
//Layer 1 objects
objects: ['node1'],
},
{
id: 'layer2',
//Layer 2 objects
objects: ['node2'],
},
];
const addLayer = function() {
let newLayer = {
id: 'newlayer',
visible: true,
lock: false,
};
let layerObject = [
{
id: 'con1',
type: 'Straight',
sourceID: 'node1',
targetID: 'node2',
},
];
/**
* 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.
*/
diagramInstance.addLayer(newLayer, layerObject);
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-button v-on:click='addLayer'>Add layer</ejs-button>
<ejs-diagram
id="diagram"
ref="diagram"
:width="width"
:height="height"
:nodes="nodes"
:layers="layers"
></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
let diagramInstance;
let nodes = [
// Layer 1 Nodes
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
// Layer 2 Nodes
{
id: 'node2',
width: 100,
height: 100,
offsetX: 100,
offsetY: 300,
annotations: [{ content: 'Layer 2 Object' }],
},
];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
"ejs-button": ButtonComponent
},
data() {
return {
width: "100%",
height: "450px",
nodes: nodes,
layers: [
{
id: 'layer1',
//Layer 1 objects
objects: ['node1'],
},
{
id: 'layer2',
//Layer 2 objects
objects: ['node2'],
},
],
};
},
mounted: function () {
diagramInstance = this.$refs.diagram.ej2Instances;
},
methods: {
addLayer() {
let newLayer = {
id: 'newlayer',
visible: true,
lock: false,
};
let layerObject = [
{
id: 'con1',
type: 'Straight',
sourceID: 'node1',
targetID: 'node2',
},
];
/**
* 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.
*/
diagramInstance.addLayer(newLayer, layerObject);
}
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>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.
<template>
<div id="app">
<ejs-button v-on:click='removeLayer'>Remove layer</ejs-button>
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes' :layers='layers'></ejs-diagram>
</div>
</template>
<script setup>
import { provide, ref, onMounted } from "vue";
import { DiagramComponent as EjsDiagram,} from '@syncfusion/ej2-vue-diagrams';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
let diagramInstance;
const diagram = ref(null);
const nodes = [
// Layer 1 Nodes
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
// Layer 2 Nodes
{
id: 'node2',
width: 100,
height: 100,
offsetX: 100,
offsetY: 300,
annotations: [{ content: 'Layer 2 Object' }],
},
];
const width = "100%";
const height = "350px";
onMounted(function () {
diagramInstance = diagram.value.ej2Instances;
});
const layers =[
{
id: 'layer1',
//Layer 1 objects
objects: ['node1'],
},
{
id: 'layer2',
//Layer 2 objects
objects: ['node2'],
},
];
const removeLayer = function() {
var layerId = 'layer1';
/**
* Remove the layer from the existing diagram layer collection
* layerId - representing the id of the layer to be removed from the diagram.
*/
diagramInstance.removeLayer(layerId);
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-button v-on:click='removeLayer'>Remove Layer</ejs-button>
<ejs-diagram
id="diagram"
ref="diagram"
:width="width"
:height="height"
:nodes="nodes"
:layers="layers"
></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
let diagramInstance;
let nodes = [
// Layer 1 Nodes
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
// Layer 2 Nodes
{
id: 'node2',
width: 100,
height: 100,
offsetX: 100,
offsetY: 300,
annotations: [{ content: 'Layer 2 Object' }],
},
];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
"ejs-button": ButtonComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
layers: [
{
id: 'layer1',
//Layer 1 objects
objects: ['node1'],
},
{
id: 'layer2',
//Layer 2 objects
objects: ['node2'],
},
],
};
},
mounted: function () {
diagramInstance = this.$refs.diagram.ej2Instances;
},
methods: {
removeLayer: function() {
var layerId = 'layer1';
/**
* Remove the layer from the existing diagram layer collection
* layerId - representing the id of the layer to be removed from the diagram.
*/
diagramInstance.removeLayer(layerId);
}
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>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.
<template>
<div id="app">
<ejs-button v-on:click='moveObjects'>Move Objects</ejs-button>
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes' :layers='layers'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted,provide, ref } from "vue";
import { DiagramComponent as EjsDiagram,} from '@syncfusion/ej2-vue-diagrams';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
let diagramInstance;
const diagram = ref(null);
const nodes = [
// Layer 1 Nodes
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 100,
offsetY: 300,
annotations: [{ content: 'Layer 1 Object' }],
},
// Layer 2 Nodes
{
id: 'node3',
width: 100,
height: 100,
offsetX: 300,
offsetY: 300,
annotations: [{ content: 'Layer 2 Object' }],
},
];
const width = "100%";
const height = "600px";
onMounted(function () {
diagramInstance = diagram.value.ej2Instances;
});
const layers =[
{
id: 'layer1',
//Layer 1 objects
objects: ['node1', 'node2'],
},
{
id: 'layer2',
//Layer 2 objects
objects: ['node3'],
},
];
const moveObjects = function() {
/**
* Move objects from one layer to another layern
* 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');
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-button v-on:click='moveObjects'>Move Objects</ejs-button>
<ejs-diagram
id="diagram"
ref="diagram"
:width="width"
:height="height"
:nodes="nodes"
:layers="layers"
></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
let diagramInstance;
let nodes = [
// Layer 1 Nodes
{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{ content: 'Layer 1 Object' }],
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 100,
offsetY: 300,
annotations: [{ content: 'Layer 1 Object' }],
},
// Layer 2 Nodes
{
id: 'node3',
width: 100,
height: 100,
offsetX: 300,
offsetY: 300,
annotations: [{ content: 'Layer 2 Object' }],
},
];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
"ejs-button": ButtonComponent
},
data() {
return {
width: "100%",
height: "600px",
nodes: nodes,
layers: [
{
id: 'layer1',
//Layer 1 objects
objects: ['node1', 'node2'],
},
{
id: 'layer2',
//Layer 2 objects
objects: ['node3'],
},
],
};
},
mounted: function () {
diagramInstance = this.$refs.diagram.ej2Instances;
},
methods: {
moveObjects: function() {
/**
* Move objects from one layer to another layern
* 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');
}
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>Z-Index
zIndex property of a layer defines its Z order within the diagram. This property allows you to control the layer’s position in the stacking order. You can adjust the layer’s z-index by moving it forward or backward relative to other layers in the diagram.
Bring Layer Forward
Layers can be moved forward at runtime by using the bringLayerForward public method.
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
}
}
mounted: function() {
let diagramInstance: Diagram;
let diagramObj: any = document.getElementById("diagram");
diagramInstance = diagramObj.ej2_instances[0];
// move the layer forward
diagram.bringLayerForward('layer1');
}
}Send Layer Backward
Layers can be moved backward at runtime by using the sendLayerBackward public method.
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
}
}
mounted: function() {
let diagramInstance: Diagram;
let diagramObj: any = document.getElementById("diagram");
diagramInstance = diagramObj.ej2_instances[0];
// move the layer backward
diagram.sendLayerBackward('layer1');
}
}The following code illustrates how to send the layer forward/backward to another layer.
<template>
<div id="app">
<ejs-button v-on:click='bringLayerForward'>Bring Layer Forward</ejs-button>
<ejs-button v-on:click='sendLayerBackward'>Send Layer Backward</ejs-button>
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes' :layers='layers'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted,provide, ref } from "vue";
import { DiagramComponent as EjsDiagram,} from '@syncfusion/ej2-vue-diagrams';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
let diagramInstance;
const diagram = ref(null);
const 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 width = "100%";
const height = "600px";
onMounted(function () {
diagramInstance = diagram.value.ej2Instances;
});
const layers =[
{
id: 'layer1',
objects: ['node1'],
},
{
id: 'layer2',
objects: ['node2'],
},
{
id: 'layer3',
objects: ['node3'],
},
];
const bringLayerForward = function() {
/**
* Move the layer forward
* Parameter 1 -A string representing the id of the layer to be moved forward.
*/
diagramInstance.bringLayerForward('layer1');
}
const sendLayerBackward = function() {
/**
* Move the layer Backward
* Parameter 1 - A string representing the id of the layer to be moved backward.
*/
diagramInstance.sendLayerBackward('layer1');
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-button v-on:click='bringLayerForward'>Bring Layer Forward</ejs-button>
<ejs-button v-on:click='sendLayerBackward'>Send Layer Backward</ejs-button>
<ejs-diagram
id="diagram"
ref="diagram"
:width="width"
:height="height"
:nodes="nodes"
:layers="layers"
></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-vue-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' }],
},
];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
"ejs-button": ButtonComponent
},
data() {
return {
width: "100%",
height: "600px",
nodes: nodes,
layers: [
{
id: 'layer1',
objects: ['node1'],
},
{
id: 'layer2',
objects: ['node2'],
},
{
id: 'layer3',
objects: ['node3'],
},
],
};
},
mounted: function () {
diagramInstance = this.$refs.diagram.ej2Instances;
},
methods: {
bringLayerForward: function() {
/**
* Move the layer forward
* Parameter 1 -A string representing the id of the layer to be moved forward.
*/
diagramInstance.bringLayerForward('layer1');
},
sendLayerBackward: function() {
/**
* Move the layer Backward
* Parameter 1 - A string representing the id of the layer to be moved backward.
*/
diagramInstance.sendLayerBackward('layer1');
},
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>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.
The following code illustrates how to clone the layer.
<template>
<div id="app">
<ejs-button v-on:click="cloneLayer">Clone Layer</ejs-button>
<ejs-diagram
id="diagram"
ref="diagram"
:width="width"
:height="height"
:nodes="nodes"
:layers="layers"
></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted,provide, ref } from "vue";
import { DiagramComponent as EjsDiagram } from "@syncfusion/ej2-vue-diagrams";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
let diagramInstance;
const diagram = ref(null);
const 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 width = "100%";
const height = "600px";
onMounted(function () {
diagramInstance = diagram.value.ej2Instances;
});
const layers = [
{
id: "layer1",
objects: ["node1", "node2"],
},
{
id: "layer2",
objects: ["node3"],
},
];
const cloneLayer = function () {
/**
* To Clone the layer
* Parameter 1 - A string representing the name of the layer to be cloned.
*/
diagramInstance.cloneLayer('layer1');
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-button v-on:click="cloneLayer">Clone Layer</ejs-button>
<ejs-diagram
id="diagram"
ref="diagram"
:width="width"
:height="height"
:nodes="nodes"
:layers="layers"
></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
import { ButtonComponent } from "@syncfusion/ej2-vue-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" }],
},
];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
"ejs-button": ButtonComponent,
},
data() {
return {
width: "100%",
height: "600px",
nodes: nodes,
layers: [
{
id: "layer1",
objects: ["node1", "node2"],
},
{
id: "layer2",
objects: ["node3"],
},
],
};
},
mounted: function () {
diagramInstance = this.$refs.diagram.ej2Instances;
},
methods: {
cloneLayer: function () {
/**
* To Clone the layer
* Parameter 1 - A string representing the name of the layer to be cloned.
*/
diagramInstance.cloneLayer('layer1');
}
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>Active layer
Active Layer refers to the layer with the highest z-index in a diagram compared to other layers. When adding objects at runtime, they are stored in this active layer. If no layers are explicitly defined in the diagram, a default layer is created and automatically set as the active layer. However, when multiple layers are defined, the layer with the highest z-index takes precedence as the active layer.
Public methods are available to get and set the active layer, which are explained below.
Get ActiveLayer
Active layer of the diagram can be retrieved by using the getActiveLayer public method.
The following code illustrates how fetch active layer from the diagram
let activeLayer = diagramInstance.getActiveLayer();Set ActiveLayer
You can set any layer to be the active layer of the diagram by using the setActiveLayer public method.
The following code illustrates how to set active layer for diagram
diagramInstance.setActiveLayer('layer2');