Commands in Vue Diagram component
11 Jun 202424 minutes to read
There are several commands available in the diagram as follows.
- Alignment commands
- Spacing commands
- Sizing commands
- Clipboard commands
- Grouping commands
- Z-order commands
- Zoom commands
- Nudge commands
- FitToPage commands
- Undo/Redo commands
Align
Alignment commands enable you to align the selected or defined objects such as nodes and connectors with respect to the selection boundary. Refer to align
commands which shows how to use align methods in the diagram.
Parameters | Description |
---|---|
Alignment Options |
<p align="left">Defines the specific direction, with respect to which the objects to be aligned. The accepted values of the argument “alignment options” are as follows.</p> <table><tr><td> Left </td><td align="left"> Aligns all the selected objects at the left of the selection boundary. </td></tr><tr><td> Right </td><td align="left"> Aligns all the selected objects at the right of the selection boundary. </td></tr><tr><td> Center </td><td align="left"> Aligns all the selected objects at the center of the selection boundary. </td></tr><tr><td>Top </td><td align="left"> Aligns all the selected objects at the top of the selection boundary. </td></tr><tr><td> Bottom </td><td align="left"> Aligns all the selected objects at the bottom of the selection boundary. </td></tr><tr><td> Middle </td><td align="left"> Aligns all the selected objects at the middle of the selection boundary. </td></tr></table> |
Objects | <p align="left">Defines the objects to be aligned. This is an optional parameter. By default, all the nodes and connectors in the selected region of the diagram gets aligned.</p> |
Alignment Mode |
<p align="left">Defines the specific mode, with respect to which the objects to be aligned. This is an optional parameter. The default alignment mode is Object .The accepted values of the argument “alignment mode” are as follows.</p> <table><tr><td> Object </td><td align="left"> Aligns the objects based on the first object in the selected list. </td></tr><tr><td> Selector </td><td align="left"> Aligns the objects based on the selection boundary. </td></tr></table> |
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
const nodes = [
{
id: 'node1',
width: 90,
height: 60,
offsetX: 100,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node2',
width: 100,
height: 60,
offsetX: 100,
offsetY: 170,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node3',
width: 140,
height: 60,
offsetX: 100,
offsetY: 240,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
}
];
const width = "100%";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
let selArray = [];
selArray.push(diagramInstance.nodes[0], diagramInstance.nodes[1], diagramInstance.nodes[2]);
//Selects the nodes
diagramInstance.select(selArray);
//Sets direction as left
diagramInstance.align('Left', diagramInstance.selectedItems.nodes, 'Selector');
diagramInstance.dataBind();
})
</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'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let nodes = [
{
id: 'node1',
width: 90,
height: 60,
offsetX: 100,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node2',
width: 100,
height: 60,
offsetX: 100,
offsetY: 170,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node3',
width: 140,
height: 60,
offsetX: 100,
offsetY: 240,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
}
];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes
}
},
mounted: function () {
const diagramInstance = this.$refs.diagram.ej2Instances;
let selArray = [];
selArray.push(diagramInstance.nodes[0], diagramInstance.nodes[1], diagramInstance.nodes[2]);
//Selects the nodes
diagramInstance.select(selArray);
//Sets direction as left
diagramInstance.align('Left', diagramInstance.selectedItems.nodes, 'Selector');
diagramInstance.dataBind();
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Distribute
The Distribute
commands enable to place the selected objects on the page at equal intervals from each other. The selected objects are equally spaced within the selection boundary.
The factor to distribute the shapes DistributeOptions
are listed as follows:
- RightToLeft: Distributes the objects based on the distance between the right and left sides of the adjacent objects.
- Left: Distributes the objects based on the distance between the left sides of the adjacent objects.
- Right: Distributes the objects based on the distance between the right sides of the adjacent objects.
- Center: Distributes the objects based on the distance between the center of the adjacent objects.
- BottomToTop: Distributes the objects based on the distance between the bottom and top sides of the adjacent objects.
- Top: Distributes the objects based on the distance between the top sides of the adjacent objects.
- Bottom: Distributes the objects based on the distance between the bottom sides of the adjacent objects.
- Middle: Distributes the objects based on the distance between the vertical center of the adjacent objects.
The following code example illustrates how to execute the space commands.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
const nodes = [
{
id: 'node1',
width: 90,
height: 60,
offsetX: 100,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node2',
width: 90,
height: 60,
offsetX: 240,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node3',
width: 90,
height: 60,
offsetX: 170,
offsetY: 150,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
}
];
const width = "100%";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
let selArray = [];
selArray.push(diagramInstance.nodes[0], diagramInstance.nodes[1], diagramInstance.nodes[2]);
//Selects the nodes
diagramInstance.select(selArray);
//Distributes space between the nodes
diagramInstance.distribute('RightToLeft', diagramInstance.selectedItems.nodes);
})
</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'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let nodes = [
{
id: 'node1',
width: 90,
height: 60,
offsetX: 100,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node2',
width: 90,
height: 60,
offsetX: 240,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node3',
width: 90,
height: 60,
offsetX: 170,
offsetY: 150,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
}
];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes
}
},
mounted: function () {
const diagramInstance = this.$refs.diagram.ej2Instances;
let selArray = [];
selArray.push(diagramInstance.nodes[0], diagramInstance.nodes[1], diagramInstance.nodes[2]);
//Selects the nodes
diagramInstance.select(selArray);
//Distributes space between the nodes
diagramInstance.distribute('RightToLeft', diagramInstance.selectedItems.nodes);
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Sizing
Sizing sameSize
commands enable to equally size the selected nodes with respect to the first selected object.
SizingOptions
are as follows:
- Width: Scales the width of the selected objects.
- Height: Scales the height of the selected objects.
- Size: Scales the selected objects both vertically and horizontally.
The following code example illustrates how to execute the size commands.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
const nodes = [
{
id: 'node1',
width: 90,
height: 60,
offsetX: 100,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node2',
width: 100,
height: 60,
offsetX: 100,
offsetY: 170,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node3',
width: 130,
height: 60,
offsetX: 100,
offsetY: 230,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
}
];
const width = "100%";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
let selArray = [];
selArray.push(diagramInstance.nodes[0], diagramInstance.nodes[1], diagramInstance.nodes[2]);
//Selects the nodes
diagramInstance.select(selArray);
//Resizes the selected nodes with the same width
diagramInstance.sameSize('Width', diagramInstance.selectedItems.nodes);
})
</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'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let nodes = [
{
id: 'node1',
width: 90,
height: 60,
offsetX: 100,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node2',
width: 100,
height: 60,
offsetX: 100,
offsetY: 170,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node3',
width: 130,
height: 60,
offsetX: 100,
offsetY: 230,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
}
];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes
}
},
mounted: function () {
const diagramInstance = this.$refs.diagram.ej2Instances;
let selArray = [];
selArray.push(diagramInstance.nodes[0], diagramInstance.nodes[1], diagramInstance.nodes[2]);
//Selects the nodes
diagramInstance.select(selArray);
//Resizes the selected nodes with the same width
diagramInstance.sameSize('Width', diagramInstance.selectedItems.nodes);
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Clipboard
Clipboard commands are used to cut, copy, or paste the selected elements. Refer to the following link which shows how to use clipboard methods in the diagram.
-
Cuts the selected elements from the diagram to the diagram’s clipboard,
cut
. -
Copies the selected elements from the diagram to the diagram’s clipboard,
copy
. -
Pastes the diagram’s clipboard data (nodes/connectors) into the diagram,
paste
.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
const nodes = [{
id: 'node1',
width: 90,
height: 60,
offsetX: 100,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node2',
width: 90,
height: 60,
offsetX: 240,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
}
];
const connectors = [{
id: 'connector1',
sourceID: 'node1',
targetID: 'node2',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2,
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
}
}
}]
const width = "100%";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
diagramInstance.select([diagramInstance.nodes[0], diagramInstance.nodes[1], diagramInstance.connectors[0]]);
//copies the selected nodes
diagramInstance.copy();
//pastes the copied objects
diagramInstance.paste(diagramInstance.copy());
})
</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'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
id: 'node1',
width: 90,
height: 60,
offsetX: 100,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node2',
width: 90,
height: 60,
offsetX: 240,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
}
];
let connectors = [{
id: 'connector1',
sourceID: 'node1',
targetID: 'node2',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2,
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
}
}
}]
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
connectors: connectors
}
},
mounted: function () {
const diagramInstance = this.$refs.diagram.ej2Instances;
diagramInstance.select([diagramInstance.nodes[0], diagramInstance.nodes[1], diagramInstance.connectors[0]]);
//copies the selected nodes
diagramInstance.copy();
//pastes the copied objects
diagramInstance.paste(diagramInstance.copy());
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Grouping
Grouping commands are used to group/ungroup the selected elements on the diagram. Refer to the following link which shows how to use grouping commands in the diagram.
Group
the selected nodes and connectors in the diagram.
Ungroup
the selected nodes and connectors in the diagram.
The following code illustrates how to execute the grouping commands.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
const nodes = [{
id: 'node1',
width: 100,
height: 70,
offsetX: 100,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node2',
width: 100,
height: 70,
offsetX: 300,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node3',
width: 100,
height: 70,
offsetX: 200,
offsetY: 200,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'group',
children: ['node1', 'node2', 'connector1']
},
{
id: 'group2',
children: ['node3', 'group']
}
];
const connectors = [{
id: 'connector1',
sourceID: 'node1',
targetID: 'node2',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2,
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
}
}
}]
const width = "100%";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
diagramInstance.select([diagramInstance.nodes[0], diagramInstance.nodes[1], diagramInstance.connectors[0]]);
//Selects the diagram
diagramInstance.selectAll();
//Groups the selected elements.
diagramInstance.group();
})
</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'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
id: 'node1',
width: 100,
height: 70,
offsetX: 100,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node2',
width: 100,
height: 70,
offsetX: 300,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node3',
width: 100,
height: 70,
offsetX: 200,
offsetY: 200,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'group',
children: ['node1', 'node2', 'connector1']
},
{
id: 'group2',
children: ['node3', 'group']
}
];
let connectors = [{
id: 'connector1',
sourceID: 'node1',
targetID: 'node2',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2,
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
}
}
}]
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
connectors: connectors
}
},
mounted: function () {
const diagramInstance = this.$refs.diagram.ej2Instances;
diagramInstance.select([diagramInstance.nodes[0], diagramInstance.nodes[1], diagramInstance.connectors[0]]);
//Selects the diagram
diagramInstance.selectAll();
//Groups the selected elements.
diagramInstance.group();
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Z-Order command
Z-Order commands enable you to visually arrange the selected objects such as nodes and connectors on the page.
bringToFront command
The bringToFront
command visually brings the selected element to front over all the other overlapped elements. The following code illustrates how to execute the bringToFront
command.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
const nodes = [{
id: 'node1',
width: 90,
height: 60,
offsetX: 100,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node2',
width: 90,
height: 60,
offsetX: 240,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node3',
width: 90,
height: 60,
offsetX: 160,
offsetY: 90,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
}
];
const width = "100%";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
let selArray = [];
selArray.push(diagramInstance.nodes[2]);
//Selects the nodes
diagramInstance.select(selArray);
//Brings to front
diagramInstance.bringToFront();
})
</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'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
id: 'node1',
width: 90,
height: 60,
offsetX: 100,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node2',
width: 90,
height: 60,
offsetX: 240,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node3',
width: 90,
height: 60,
offsetX: 160,
offsetY: 90,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
}
];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
}
},
mounted: function () {
const diagramInstance = this.$refs.diagram.ej2Instances;
let selArray = [];
selArray.push(diagramInstance.nodes[2]);
//Selects the nodes
diagramInstance.select(selArray);
//Brings to front
diagramInstance.bringToFront();
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
sendToBack command
The sendToBack
command visually moves the selected element behind all the other overlapped elements. The following code illustrates how to execute the sendToBack
command.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
let nodes = [{
id: 'node1',
width: 90,
height: 60,
offsetX: 100,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node2',
width: 90,
height: 60,
offsetX: 240,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node3',
width: 90,
height: 60,
offsetX: 160,
offsetY: 90,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
}];
const width = "100%";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
let selArray = [];
selArray.push(diagramInstance.nodes[2]);
//Selects the nodes
diagramInstance.select(selArray);
//Sends to back
diagramInstance.sendToBack();
})
</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'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
id: 'node1',
width: 90,
height: 60,
offsetX: 100,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node2',
width: 90,
height: 60,
offsetX: 240,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node3',
width: 90,
height: 60,
offsetX: 160,
offsetY: 90,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
}];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
}
},
mounted: function () {
const diagramInstance = this.$refs.diagram.ej2Instances;
let selArray = [];
selArray.push(diagramInstance.nodes[2]);
//Selects the nodes
diagramInstance.select(selArray);
//Sends to back
diagramInstance.sendToBack();
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
moveForward command
The moveForward
command visually moves the selected element over the nearest overlapping element. The following code illustrates how to execute the moveForward
command.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
const nodes = [{
id: 'node1',
width: 90,
height: 60,
offsetX: 100,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node2',
width: 90,
height: 60,
offsetX: 180,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
}];
const width = "100%";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
let selArray = [];
selArray.push(diagramInstance.nodes[1]);
//Selects the nodes
diagramInstance.select(selArray);
//Moves forward
diagramInstance.moveForward();
})
</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'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
id: 'node1',
width: 90,
height: 60,
offsetX: 100,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node2',
width: 90,
height: 60,
offsetX: 180,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
}];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
}
},
mounted: function () {
const diagramInstance = this.$refs.diagram.ej2Instances;
let selArray = [];
selArray.push(diagramInstance.nodes[1]);
//Selects the nodes
diagramInstance.select(selArray);
//Moves forward
diagramInstance.moveForward();
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
sendBackward command
The sendBackward
command visually moves the selected element behind the underlying element. The following code illustrates how to execute the sendBackward
command.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const nodes = [{
id: 'node1',
width: 90,
height: 60,
offsetX: 100,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node2',
width: 90,
height: 60,
offsetX: 180,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
}];
const diagram = ref(null);
const width = "100%";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
let selArray = [];
selArray.push(diagramInstance.nodes[1]);
diagramInstance.select(selArray);
//Sends backward
diagramInstance.sendBackward();
})
</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'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
id: 'node1',
width: 90,
height: 60,
offsetX: 100,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
},
{
id: 'node2',
width: 90,
height: 60,
offsetX: 180,
offsetY: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
strokeWidth: 1
},
}];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
}
},
mounted: function () {
const diagramInstance = this.$refs.diagram.ej2Instances;
let selArray = [];
selArray.push(diagramInstance.nodes[1]);
diagramInstance.select(selArray);
//Sends backward
diagramInstance.sendBackward();
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Zoom
The zoom
command is used to zoom-in and zoom-out the diagram view.
The following code illustrates how to zoom-in/zoom out the diagram.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
const width = "100%";
const height = "350px";
onMounted(function() {
const diagramInstance = diagram.value.ej2Instances;
diagramInstance.zoom(1.2, {
x: 100,
y: 100
});
})
</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' ></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
export default {
name: 'App',
components: {
'ejs-diagram': DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
}
},
mounted: function() {
const diagramInstance = this.$refs.diagram.ej2Instances;
diagramInstance.zoom(1.2, {
x: 100,
y: 100
});
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Nudge command
The nudge
commands move the selected elements towards up, down, left, or right by 1 pixel.
NudgeDirection
nudge command moves the selected elements towards the specified direction by 1 pixel, by default.
The accepted values of the argument “direction” are as follows:
- Up: Moves the selected elements towards up by the specified delta value.
- Down: Moves the selected elements towards down by the specified delta value.
- Left: Moves the selected elements towards left by the specified delta value.
- Right: Moves the selected elements towards right by the specified delta value.
The following code illustrates how to execute nudge command.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
const width = "100%";
const height = "350px";
onMounted(function() {
const diagramInstanse = diagram.value.ej2Instances;
diagramInstance.nudge('Right');
})
</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'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
export default {
name: 'App',
components: {
'ejs-diagram': DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
}
},
mounted: function() {
const diagramInstance = this.$refs.diagram.ej2Instances;
diagramInstance.nudge('Right');
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Nudge by using arrow keys
The corresponding arrow keys are used to move the selected elements towards up, down, left, or right direction by 1 pixel.
Nudge commands are particularly useful for accurate placement of elements.
BringIntoView
The bringIntoView
command brings the specified rectangular region into the viewport of the diagram.
The following code illustrates how to execute the bringIntoView
command.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram, Rect } from "@syncfusion/ej2-vue-diagrams";
const diagram = ref(null);
const width = "100%";
const height = "350px";
onMounted(function() {
const diagramInstance = diagram.value.ej2Instance;
//Brings the specified rectangular region of the Diagram content to the viewport of the page.
let bound = new Rect(200, 400, 500, 400);
diagramInstance.bringIntoView(bound);
});
</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' ></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, Rect } from '@syncfusion/ej2-vue-diagrams';
export default {
name: 'App',
components: {
'ejs-diagram': DiagramComponent
},
data() {
return {
width: "100%",
height: "350px"
}
},
mounted: function() {
const diagramInstance = this.$refs.diagram.ej2Instances;
//Brings the specified rectangular region of the Diagram content to the viewport of the page.
let bound = new Rect(200, 400, 500, 400);
diagramInstance.bringIntoView(bound);
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
BringToCenter
The bringToCenter
command brings the specified rectangular region of the diagram content to the center of the viewport.
The following code illustrates how to execute the bringToCenter
command.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' ></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram, Rect } from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
const width = "100%";
const height = "350px";
onMounted(function() {
const diagramInstance = diagram.value.ej2Instances;
//Brings the specified rectangular region of the Diagram content to the center of the viewport.
let bound = new Rect(200, 400, 500, 400);
diagramInstance.bringToCenter(bound);
})
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' ></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, Rect } from '@syncfusion/ej2-vue-diagrams';
export default {
name: 'App',
components: {
'ejs-diagram': DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
}
},
mounted: function() {
const diagramInstance = this.$refs.diagram.ej2Instances;
//Brings the specified rectangular region of the Diagram content to the center of the viewport.
let bound = new Rect(200, 400, 500, 400);
diagramInstance.bringToCenter(bound);
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
FitToPage command
The fitToPage
command helps to fit the diagram content into the view with respect to either width, height, or at the whole.
The mode
parameter defines whether the diagram has to be horizontally/vertically fit into the viewport with respect to width, height, or entire bounds of the diagram.
The region
parameter defines the region that has to be drawn as an image.
The margin
parameter defines the region/bounds of the diagram content that is to be fit into the view.
The canZoomIn
parameter enables/disables zooming to fit the smaller content into a larger viewport.
The customBounds
parameter the custom region that has to be fit into the viewport.
The following code illustrates how to execute FitToPage
command.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' ></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram, Rect } from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
const width = "100%";
const height = "350px";
onMounted(function() {
const diagramInstance = diagram.value.ej2Instances;
//fit the diagram to the page with respect to mode and region
diagramInstance.fitToPage({
mode: 'Page',
region: 'Content',
margin: {
bottom: 50
},
canZoomIn: 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' ></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent, Rect } from '@syncfusion/ej2-vue-diagrams';
export default {
name: 'App',
components: {
'ejs-diagram': DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
}
}
mounted: function() {
const diagramInstance = this.$refs.diagram.ej2Instances;
//fit the diagram to the page with respect to mode and region
diagramInstance.fitToPage({
mode: 'Page',
region: 'Content',
margin: {
bottom: 50
},
canZoomIn: false
});
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Command manager
Diagram provides support to map/bind command execution with desired combination of key gestures. Diagram provides some built-in commands.
CommandManager
provides support to define custom commands. The custom commands are executed, when the specified key gesture is recognized.
Custom command
To define a custom command, specify the following properties:
-
execute
: A method to be executed. -
canExecute
: A method to define whether the command can be executed at the moment. -
gesture
: A combination ofkeys
andKeyModifiers
. -
parameter
: Defines any additional parameters that are required at runtime. -
name
: Defines the name of the command.
To explore the properties of custom commands, refer to Commands
.
The following code example illustrates how to define a custom command.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :commandManager='commandManager' >
</ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram, Keys, KeyModifiers } from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
let diagramInstance;
const width = "100%";
const height = "350px";
const commandManager = {
commands: [{
name: 'customCopy',
parameter: 'node',
//Method to define whether the command can be executed at the current moment
canExecute: function() {
//Defines that the clone command can be executed, if and only if the selection list is not empty.
if (diagramInstance.selectedItems.nodes.length > 0 || diagramInstance.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
//Command handler
execute: function() {
//Logic to clone the selected element
diagramInstance.copy();
diagramInstance.paste();
diagramInstance.dataBind();
},
//Defines that the clone command has to be executed on the recognition of key press.
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift | KeyModifiers.Alt
}
}]
}
onMounted(function() {
diagramInstance = diagram.value.ej2Instances;
})
</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' :commandManager='commandManager' ></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, Keys, KeyModifiers } from '@syncfusion/ej2-vue-diagrams';
let diagramInstance;
export default {
name: 'App',
components: {
'ejs-diagram': DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
commandManager: {
commands: [{
name: 'customCopy',
parameter: 'node',
//Method to define whether the command can be executed at the current moment
canExecute: function() {
//Defines that the clone command can be executed, if and only if the selection list is not empty.
if (diagramInstance.selectedItems.nodes.length > 0 || diagramInstance.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
//Command handler
execute: function() {
//Logic to clone the selected element
diagramInstance.copy();
diagramInstance.paste();
diagramInstance.dataBind();
},
//Defines that the clone command has to be executed on the recognition of key press.
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift | KeyModifiers.Alt
}
}]
},
}
}
mounted: function() {
diagramInstance = this.$refs.diagram.ej2Instances;
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Modify the existing command
When any one of the default commands is not desired, they can be disabled. To change the functionality of a specific command, the command can be completely modified.
The following code example illustrates how to disable a command and how to modify the built-in commands.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :commandManager='commandManager' ></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram, Keys, KeyModifiers } from '@syncfusion/ej2-vue-diagrams';
const width = "100%";
const height = "350px";
const commandManager = {
commands: [
{
name: 'nudgeUp',
canExecute: function () {
return false;
},
gesture: {
key:Keys.Up,
}
},
{
name: 'nudgeDown',
canExecute: function () {
return false;
},
gesture: {
key: Keys.Down,
}
},
{
name: 'nudgeRight',
canExecute: function () {
return false;
},
gesture: {
key: Keys.Right,
}
}
]
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :commandManager='commandManager' ></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent, Keys, KeyModifiers } from '@syncfusion/ej2-vue-diagrams';
export default {
name: 'App',
components: {
'ejs-diagram': DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
commandManager: {
commands: [
{
name: 'nudgeUp',
canExecute: function () {
return false;
},
gesture: {
key:Keys.Up,
}
},
{
name: 'nudgeDown',
canExecute: function () {
return false;
},
gesture: {
key: Keys.Down,
}
},
{
name: 'nudgeRight',
canExecute: function () {
return false;
},
gesture: {
key: Keys.Right,
}
}
]
}
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>