Commands in Vue Diagram component

12 Nov 202424 minutes to read

The commands in diagram control are used to perform various interactions within the diagram when called. Several commands are available in the diagram, as follows:

  • Alignment commands
  • Distribute commands
  • Sizing commands
  • Clipboard commands
  • Grouping commands
  • Z-order commands
  • Zoom commands
  • Nudge commands
  • FitToPage commands
  • Undo/Redo commands

Align commands

The alignment command enables you to align selected or defined objects, such as nodes and connectors, with respect to the selection boundary or the first selected object. The alignmethod parameters are explained below.

Alignment Options

The Alignment Options defines the alignment position of objects to be aligned.

Alignment Description
Left Aligns all the selected objects at the left of the selection boundary
Right Aligns all the selected objects at the right of the selection boundary
Center Aligns all the selected objects at the center of the selection boundary
Top Aligns all the selected objects at the top of the selection boundary
Bottom Aligns all the selected objects at the bottom of the selection boundary
Middle Aligns all the selected objects at the middle of the selection boundary

Objects

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.

Alignment Mode

Alignment Mode 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.

The below table shows the alignment as Left for different alignment modes.

Nodes before alignment Alignment mode Description Output image
Align original Object (Default) Aligns the objects based on the bounds of first object in the selected list. Align Object
Align original Selector Aligns the objects based on the selection boundary. Align Selector

The following code example illustrates how to align all the selected objects at the left side of the selection boundary.

<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>

Align Sample

Distribute commands

The Distribute method enable you 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 distribute method parameters are explained below.

Distribute options

The factor to distribute the shapes using DistributeOptions are listed as follows:

Distribute option Description
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.

Objects

Defines the objects to be distributed. This is an optional parameter. By default, all the nodes and connectors in the selected region of the diagram gets distributed.

The following code example illustrates how the nodes are distributed using the RightToLeft option.

<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: 100,
    height: 60,
    offsetX: 140,
    offsetY: 100,
    style: { fill: '#6BA5D7', strokeColor: 'white', strokeWidth: 1 },
    annotations: [{ content: 'Node1' }],
  },
  {
    id: 'node2',
    width: 100,
    height: 60,
    offsetX: 200,
    offsetY: 170,
    style: { fill: '#6BA5D7', strokeColor: 'white', strokeWidth: 1 },
    annotations: [{ content: 'Node2' }],
  },
  {
    id: 'node3',
    width: 100,
    height: 60,
    offsetX: 400,
    offsetY: 240,
    style: { fill: '#6BA5D7', strokeColor: 'white', strokeWidth: 1 },
    annotations: [{ content: 'Node3' }],
  }
];
const width = "100%";
const height = "600px";

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: 100,
    height: 60,
    offsetX: 140,
    offsetY: 100,
    style: { fill: '#6BA5D7', strokeColor: 'white', strokeWidth: 1 },
    annotations: [{ content: 'Node1' }],
  },
  {
    id: 'node2',
    width: 100,
    height: 60,
    offsetX: 200,
    offsetY: 170,
    style: { fill: '#6BA5D7', strokeColor: 'white', strokeWidth: 1 },
    annotations: [{ content: 'Node2' }],
  },
  {
    id: 'node3',
    width: 100,
    height: 60,
    offsetX: 400,
    offsetY: 240,
    style: { fill: '#6BA5D7', strokeColor: 'white', strokeWidth: 1 },
    annotations: [{ content: 'Node3' }],
  }
];
export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "600px",
            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>

DistributeImage

Sizing commands

Sizing sameSize command enables you to size all selected nodes to match the size of the first selected object or the first node in the objects collection you provide as the second parameter. The parameters for the sameSize method are explained below.

Sizing options

SizingOptions include:

Sizing options Description
Width Adjusts the width of all objects to match the width of the first node in the objects collection.
Height Adjusts the height of all objects to match the height of the first node in the objects collection.
Size Adjusts both the width and height of all objects to match the size of the first node in the objects collection.

Objects

This optional parameter defines which objects should be scaled. By default, all nodes and connectors within the selected region of the diagram are scaled.

The following code example illustrates how to execute the size commands.

<template>
    <div id="app">
 
        <label >Size Option </label>
        <select id="sizeChange" ref="sizeChange" v-on:change="sizeChangeFunction">
            <option value="Width">Width</option>
            <option value="Height">Height</option>
            <option value="Size">Size</option>
        </select>
 
        <ejs-diagram id="diagram" ref="diagramObj" :width='width' :height='height' :nodes="nodes"
          ></ejs-diagram>
 
    </div>
</template>
 
<script setup>
import {ref } from "vue";
import { DiagramComponent as EjsDiagram, SnapConstraints, PrintAndExport, Rect } from '@syncfusion/ej2-vue-diagrams';
 
const diagramObj = ref(null);
const sizeChange = ref(null);

//Initialize nodes
let nodes = [
    {
    id: "node1",
    width: 100,
    height: 80,
    offsetX: 140,
    offsetY: 100,
    annotations: [{ content: "Node1" }],
  },
  {
    id: "node2",
    width: 100,
    height: 60,
    offsetX: 140,
    offsetY: 200,
    annotations: [{ content: "Node2" }],
  },
  {
    id: "node3",
    width: 200,
    height: 30,
    offsetX: 140,
    offsetY: 300,
    annotations: [{ content: "Node3" }],
  },
];
 
const width = "1000px";
const height = "590px";
const snapSettings = { constraints: SnapConstraints.None };
 
const sizeChangeFunction = function () {
  debugger;
  let diagramInstance = diagramObj.value.ej2Instances;
  let objects = diagramInstance.nodes;
  var size = sizeChange.value.value;
  diagramInstance.sameSize(size, objects);
};
</script>
 
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
  <div id="app">
    <label>Size Option</label><select id="sizeChange" ref="sizeChange" v-on:change="onSizeChange()">
      <option value="Width">Width</option>
      <option value="Height">Height</option>
      <option value="Size">size</option>
    </select>
    <ejs-diagram
      id="diagram"
      ref="diagramObj"
      :width="width"
      :height="height"
      :nodes="nodes"
    ></ejs-diagram>
  </div>
</template>
<script>
import { DiagramComponent } from "@syncfusion/ej2-vue-diagrams";

let nodes = [
  {
    id: "node1",
    width: 100,
    height: 80,
    offsetX: 140,
    offsetY: 100,
    annotations: [{ content: "Node1" }],
  },
  {
    id: "node2",
    width: 100,
    height: 60,
    offsetX: 140,
    offsetY: 200,
    annotations: [{ content: "Node2" }],
  },
  {
    id: "node3",
    width: 200,
    height: 30,
    offsetX: 140,
    offsetY: 300,
    annotations: [{ content: "Node3" }],
  },
];
export default {
  name: "App",
  components: {
    "ejs-diagram": DiagramComponent,
  },
  data() {
    return {
      width: "1000px",
      height: "350px",
      nodes: nodes,
    };
  },
  methods: {
    onSizeChange: function () {
      let diagramInstance = this.$refs.diagramObj.ej2Instances;
      let objects = diagramInstance.nodes;
      var size = this.$refs.sizeChange.value;
      diagramInstance.sameSize(size, objects);
    },
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Sizing Sample

Clipboard commands

Clipboard commands are used to cut, copy, or paste selected elements in the diagram using the cut, copy, paste methods. You can also use keyboard shortcuts for these actions. For detailed information on using these methods refer the below table.

Command (Shortcut key) Description
Cut (CTRL+X) Removes the selected elements from the diagram and places them onto the diagram’s clipboard. This operation is performed using the cut. method.
Copy(CTRL+C) Duplicates the selected elements and places them onto the diagram’s clipboard without removing them from their original location. Use the copy method for this operation.
Paste(CTRL+V) Inserts the elements stored on the diagram’s clipboard (nodes and connectors) into the diagram. This can be done using the paste method.

The paste method optionally accepts a collection of nodes or connectors to be added to the diagram.

The following code illustrates how to execute the clipboard commands.

<template>
  <div id="app">
    <label>Ctrl + X</label><button @click="cut">Cut</button>
    <label>Ctrl + C</label><button @click="copy">Copy</button>
    <label>Ctrl + V</label><button @click="paste">Paste</button>
    <button @click="pasteObject">Paste Defined Object</button>

    <ejs-diagram
      id="diagram"
      ref="diagramObj"
      :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 diagramObj = ref(null);
const nodes = [
  {
    id: "node1",
    width: 100,
    height: 80,
    offsetX: 140,
    offsetY: 100,
    annotations: [{ content: "Node1" }],
  },
  {
    id: "node2",
    width: 100,
    height: 60,
    offsetX: 140,
    offsetY: 200,
    annotations: [{ content: "Node2" }],
  },
  {
    id: "node3",
    width: 200,
    height: 30,
    offsetX: 140,
    offsetY: 300,
    annotations: [{ content: "Node3" }],
  },
];

const width = "100%";
const height = "350px";

const cut = function () {
  let diagramInstance = diagramObj.value.ej2Instances;
  diagramInstance.cut();
};
const copy = function () {
  let diagramInstance = diagramObj.value.ej2Instances;
  diagramInstance.copy();
};

const paste = function () {
  let diagramInstance = diagramObj.value.ej2Instances;
  diagramInstance.paste();
};
const pasteObject = function () {
  let diagramInstance = diagramObj.value.ej2Instances;
  let nodes = [
    {
      id: "n1",
      offsetX: 400,
      offsetY: 100,
      width: 100,
    },
    {
      id: "n2",
      offsetX: 400,
      offsetY: 200,
      width: 100,
    },
  ];
  diagramInstance.paste(nodes);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
  <div id="app">
    <label>Ctrl + X</label><ejs-button v-on:click="cut">Cut </ejs-button>
    <label>Ctrl + C</label><ejs-button v-on:click="copy">Copy </ejs-button>
    <label>Ctrl + V</label><ejs-button v-on:click="paste">Paste </ejs-button>
    <ejs-button v-on:click="pasteDefinedObject">Paste defined Object </ejs-button>
    <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';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

let nodes = [
  {
    id: 'node1',
    width: 100,
    height: 80,
    offsetX: 140,
    offsetY: 100,
    annotations: [{ content: 'Node1' }],
  },
  {
    id: 'node2',
    width: 100,
    height: 60,
    offsetX: 140,
    offsetY: 200,
    annotations: [{ content: 'Node2' }],
  },
  {
    id: 'node3',
    width: 200,
    height: 30,
    offsetX: 140,
    offsetY: 300,
    annotations: [{ content: 'Node3' }],
  },
];
export default {
  name: 'App',
  components: {
    'ejs-diagram': DiagramComponent,
    'ejs-button': ButtonComponent,
  },
  data() {
    return {
      width: '100%',
      height: '600px',
      nodes: nodes,
    };
  },
  methods: {
    cut: function () {
      var diagramInstance = this.$refs.diagram.ej2Instances;
      diagramInstance.cut();
    },
    copy: function () {
      var diagramInstance = this.$refs.diagram.ej2Instances;
      diagramInstance.copy();
    },
    paste: function () {
      var diagramInstance = this.$refs.diagram.ej2Instances;
      diagramInstance.paste();
    },
    pasteDefinedObject: function () {
      var diagramInstance = this.$refs.diagram.ej2Instances;
      let nodes = [
        {
          id: 'n1',
          offsetX: 400,
          offsetY: 100,
          width: 100,
        },
        {
          id: 'n2',
          offsetX: 400,
          offsetY: 200,
          width: 100,
        },
      ];
      diagramInstance.paste(nodes);
    },
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Grouping commands

Grouping Commands are used to group or ungroup selected elements in the diagram. Grouping commands help in managing and organizing multiple elements by combining them into a single group or separating them into individual elements. You can also use keyboard shortcuts for these actions. The following table provides more details on these commands:

Commands (Shortcut key) Description
Group (CTRL+G) Combines the selected nodes and connectors into a single group, allowing you to move, resize, or apply other operations to all grouped elements as a unit.
Ungroup (CTRL+Shift+U) Splits a previously grouped set of nodes and connectors into individual elements, enabling you to modify or manipulate them separately.

The following code examples demonstrate how to use the grouping commands in diagram:

<template>
  <div id="app">
    <label>Ctrl + G </label><button @click="group">Group</button>
    <label>Ctrl + Shift + U </label><button @click="unGroup">Un Group</button>
    <ejs-diagram
      id="diagram"
      ref="diagramObj"
      :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 diagramObj = ref(null);
const nodes = [
  {
    id: "node1",
    width: 100,
    height: 70,
    offsetX: 100,
    offsetY: 100,
  },
  {
    id: "node2",
    width: 100,
    height: 70,
    offsetX: 300,
    offsetY: 100,
  },
  {
    id: "node3",
    width: 100,
    height: 70,
    offsetX: 200,
    offsetY: 200,
  },
  {
    id: "group",
    children: ["node1", "node2", "node3", "connector1"],
  },
];
const connectors = [
  {
    id: "connector1",
    sourceID: "node1",
    targetID: "node2",
  },
];

const width = "100%";
const height = "350px";

const group = function () {
  let diagramInstance = diagramObj.value.ej2Instances;
  diagramInstance.group();
};
const unGroup = function () {
  let diagramInstance = diagramObj.value.ej2Instances;
  diagramInstance.unGroup();
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
<div id="app">
<label>(CTRL +G)</label><ejs-button v-on:click="group">Group </ejs-button>
<label>(CTRL + Shift +U)</label><ejs-button v-on:click="unGroup">Un Group </ejs-button>
    <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';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

let nodes = [ {
  id: 'node1',
  width: 100,
  height: 70,
  offsetX: 100,
  offsetY: 100,
},
{
  id: 'node2',
  width: 100,
  height: 70,
  offsetX: 300,
  offsetY: 100,
},
{
  id: 'node3',
  width: 100,
  height: 70,
  offsetX: 200,
  offsetY: 200,
},
{
  id: 'group',
  children: ['node1', 'node2', 'node3', 'connector1'],
},
];
let connectors = [{
  id: 'connector1',
  sourceID: 'node1',
  targetID: 'node2',
}]
export default {
name: "App",
components: {
    "ejs-diagram": DiagramComponent,
    'ejs-button': ButtonComponent,
},
data() {
    return {
        width: "100%",
        height: "600px",
        nodes: nodes,
        connectors: connectors
    }
},
methods: {
  group: function () {
    var diagramInstance = this.$refs.diagram.ej2Instances;
    diagramInstance.group();
  },
  unGroup: function () {
    var diagramInstance = this.$refs.diagram.ej2Instances;
    diagramInstance.unGroup();
  }, 
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Rotate commands

The rotate commands in the diagram allow users to rotate selected elements by specified angles. These commands are useful for adjusting the rotate angle of nodes or shapes within the diagram.

Parameter Type Description
obj NodeModel / ConnectorModel/ SelectorModel The objects to be rotated.
angle number The angle by which the objects should be rotated (in degrees).
pivot (optional) PointModel The reference point with respect to which the objects will be rotated.
rotateUsingHandle (optional) boolean Whether to rotate using the handle.

You can also use CTRL+R to rotate clockwise and CTRL+L to rotate anti-clockwise. The following example shows how to rotate nodes in clockwise and anti-clockwise direction.

<template>
    <div id="app">
       <button @click="clock">Rotate Clock Wise</button>
        <button @click="antiClock">Rotate AntiClock Wise</button>
        <ejs-diagram id="diagram" ref="diagramObj" :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 diagramObj = ref(null);
const nodes = [{
    id: 'node1',
    offsetX: 100,
    offsetY: 100,
    width: 70,
    height: 40,
    annotations: [{ content: 'Node 1' }],
  },];

const width = "100%";
const height = "350px";

const clock = function () {
  let diagramInstance = diagramObj.value.ej2Instances;
  let node = diagramInstance.nodes[0];
      /**
       * paramter 1 - Rotate item
       * paramter 2 - angle to be rotated
       */
      diagramInstance.rotate(node, 45);
};
const antiClock = function () {
  let diagramInstance = diagramObj.value.ej2Instances;
  let node = diagramInstance.nodes[0];
      /**
       * paramter 1 - Rotate item
       * paramter 2 - angle to be rotated
       */
      diagramInstance.rotate(node, -45);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
  <div id="app">
    <ejs-button v-on:click="clock">Rotate ClockWise </ejs-button>
    <ejs-button v-on:click="antiClock">Rotate AntiClockWise </ejs-button>
    <ejs-diagram
      id="diagram"
      ref="diagram"
      :width="width"
      :height="height"
      :nodes="nodes"
    ></ejs-diagram>
  </div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

let nodes = [
  {
    id: 'node1',
    offsetX: 100,
    offsetY: 100,
    width: 70,
    height: 40,
    annotations: [{ content: 'Node 1' }],
  },
];
export default {
  name: 'App',
  components: {
    'ejs-diagram': DiagramComponent,
    'ejs-button': ButtonComponent,
  },
  data() {
    return {
      width: '100%',
      height: '600px',
      nodes: nodes,
    };
  },
  methods: {
    clock: function () {
      var diagramInstance = this.$refs.diagram.ej2Instances;
      let node = diagramInstance.nodes[0];
      /**
       * paramter 1 - Rotate item
       * paramter 2 - angle to be rotated
       */
      diagramInstance.rotate(node, 45);
    },
    antiClock: function () {
      var diagramInstance = this.$refs.diagram.ej2Instances;
      let node = diagramInstance.nodes[0];
      /**
       * paramter 1 - Rotate item
       * paramter 2 - angle to be rotated
       */
      diagramInstance.rotate(node, -45);
    },
  },
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css';
</style>

Z-Order command

Z-Order commands allow you to control the stacking order of selected objects, such as nodes and connectors, on the diagram page.

Bring to front command

The bringToFront command moves the selected element to the front, placing it above all other elements in the diagram. The following code illustrates how to use the bringToFront command.

<template>
  <div id="app">
    <button @click="bringToFront">Bring To Front</button>
    <ejs-diagram
      id="diagram"
      ref="diagramObj"
      :width="width"
      :height="height"
      :nodes="nodes"
    ></ejs-diagram>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { DiagramComponent as EjsDiagram } from "@syncfusion/ej2-vue-diagrams";

const diagramObj = ref(null);

const nodes = [
  {
    id: "node1",
    width: 90,
    height: 70,
    offsetX: 120,
    offsetY: 100,
  },
  {
    id: "node2",
    width: 90,
    height: 70,
    offsetX: 150,
    offsetY: 120,
  },
  {
    id: "node3",
    width: 90,
    height: 70,
    offsetX: 170,
    offsetY: 150,
  },
];

const width = "100%";
const height = "600px";

const bringToFront = function () {
  let diagramInstance = diagramObj.value.ej2Instances;
  diagramInstance.bringToFront();
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
  <div id="app">
    <ejs-button v-on:click="bringToFront">Bring To Front </ejs-button>
    <ejs-diagram
      id="diagram"
      ref="diagram"
      :width="width"
      :height="height"
      :nodes="nodes"
    ></ejs-diagram>
  </div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

let nodes = [
  {
    id: 'node1',
    width: 90,
    height: 70,
    offsetX: 120,
    offsetY: 100,
  },
  {
    id: 'node2',
    width: 90,
    height: 70,
    offsetX: 150,
    offsetY: 120,
  },
  {
    id: 'node3',
    width: 90,
    height: 70,
    offsetX: 170,
    offsetY: 150,
  },
];

export default {
  name: 'App',
  components: {
    'ejs-diagram': DiagramComponent,
    'ejs-button': ButtonComponent,
  },
  data() {
    return {
      width: '100%',
      height: '600px',
      nodes: nodes,
    };
  },
  methods: {
    bringToFront: function () {
      var diagramInstance = this.$refs.diagram.ej2Instances;
      diagramInstance.bringToFront();
    },
  },
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css';
</style>

Send to back command

The sendToBackcommand moves the selected element to the back, placing it behind all other elements in the diagram. The following code illustrates how to use the sendToBack command.

<template>
  <div id="app">
    <button @click="sendToBack">Send To Back</button>
    <ejs-diagram
      id="diagram"
      ref="diagramObj"
      :width="width"
      :height="height"
      :nodes="nodes"
    ></ejs-diagram>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { DiagramComponent as EjsDiagram } from "@syncfusion/ej2-vue-diagrams";

const diagramObj = ref(null);

const nodes = [
  {
    id: "node1",
    width: 90,
    height: 70,
    offsetX: 120,
    offsetY: 100,
  },
  {
    id: "node2",
    width: 90,
    height: 70,
    offsetX: 150,
    offsetY: 120,
  },
  {
    id: "node3",
    width: 90,
    height: 70,
    offsetX: 170,
    offsetY: 150,
  },
];

const width = "100%";
const height = "600px";

const sendToBack = function () {
  let diagramInstance = diagramObj.value.ej2Instances;
  diagramInstance.sendToBack();
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
  <div id="app">
    <ejs-button v-on:click="sendToBack">Send To Back </ejs-button>
    <ejs-diagram
      id="diagram"
      ref="diagram"
      :width="width"
      :height="height"
      :nodes="nodes"
    ></ejs-diagram>
  </div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

let nodes = [
  {
    id: 'node1',
    width: 90,
    height: 70,
    offsetX: 120,
    offsetY: 100,
  },
  {
    id: 'node2',
    width: 90,
    height: 70,
    offsetX: 150,
    offsetY: 120,
  },
  {
    id: 'node3',
    width: 90,
    height: 70,
    offsetX: 170,
    offsetY: 150,
  },
];

export default {
  name: 'App',
  components: {
    'ejs-diagram': DiagramComponent,
    'ejs-button': ButtonComponent,
  },
  data() {
    return {
      width: '100%',
      height: '600px',
      nodes: nodes,
    };
  },
  methods: {
    sendToBack: function () {
      var diagramInstance = this.$refs.diagram.ej2Instances;
      diagramInstance.sendToBack();
    },
  },
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css';
</style>

Move forward command

The moveForward command moves the selected element one step forward in the stack, placing it above the nearest overlapping element. The following code illustrates how to use the moveForward command.

<template>
  <div id="app">
    <button @click="moveForward">Move  Forward</button>
    <ejs-diagram
      id="diagram"
      ref="diagramObj"
      :width="width"
      :height="height"
      :nodes="nodes"
    ></ejs-diagram>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { DiagramComponent as EjsDiagram } from "@syncfusion/ej2-vue-diagrams";

const diagramObj = ref(null);

const nodes = [
  {
    id: "node1",
    width: 90,
    height: 70,
    offsetX: 120,
    offsetY: 100,
  },
  {
    id: "node2",
    width: 90,
    height: 70,
    offsetX: 150,
    offsetY: 120,
  },
  {
    id: "node3",
    width: 90,
    height: 70,
    offsetX: 170,
    offsetY: 150,
  },
];

const width = "100%";
const height = "600px";

const moveForward = function () {
  let diagramInstance = diagramObj.value.ej2Instances;
  diagramInstance.moveForward();
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
  <div id="app">
    <ejs-button v-on:click="moveForward">Move Forward </ejs-button>
    <ejs-diagram
      id="diagram"
      ref="diagram"
      :width="width"
      :height="height"
      :nodes="nodes"
    ></ejs-diagram>
  </div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

let nodes = [
  {
    id: 'node1',
    width: 90,
    height: 70,
    offsetX: 120,
    offsetY: 100,
  },
  {
    id: 'node2',
    width: 90,
    height: 70,
    offsetX: 150,
    offsetY: 120,
  },
  {
    id: 'node3',
    width: 90,
    height: 70,
    offsetX: 170,
    offsetY: 150,
  },
];

export default {
  name: 'App',
  components: {
    'ejs-diagram': DiagramComponent,
    'ejs-button': ButtonComponent,
  },
  data() {
    return {
      width: '100%',
      height: '600px',
      nodes: nodes,
    };
  },
  methods: {
    moveForward: function () {
      var diagramInstance = this.$refs.diagram.ej2Instances;
      diagramInstance.moveForward();
    },
  },
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css';
</style>

send backward command

The sendBackward command moves the selected element one step backward in the stack, placing it behind the underlying element. The following code illustrates how to use the sendBackward command.

<template>
  <div id="app">
    <button @click="sendBackward">Send BackWard</button>
    <ejs-diagram
      id="diagram"
      ref="diagramObj"
      :width="width"
      :height="height"
      :nodes="nodes"
    ></ejs-diagram>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { DiagramComponent as EjsDiagram } from "@syncfusion/ej2-vue-diagrams";

const diagramObj = ref(null);

const nodes = [
  {
    id: "node1",
    width: 90,
    height: 70,
    offsetX: 120,
    offsetY: 100,
  },
  {
    id: "node2",
    width: 90,
    height: 70,
    offsetX: 150,
    offsetY: 120,
  },
  {
    id: "node3",
    width: 90,
    height: 70,
    offsetX: 170,
    offsetY: 150,
  },
];

const width = "100%";
const height = "600px";

const sendBackward = function () {
  let diagramInstance = diagramObj.value.ej2Instances;
  diagramInstance.sendBackward();
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
  <div id="app">
    <ejs-button v-on:click="sendBackward">Send BackWard </ejs-button>
    <ejs-diagram
      id="diagram"
      ref="diagram"
      :width="width"
      :height="height"
      :nodes="nodes"
    ></ejs-diagram>
  </div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

let nodes = [
  {
    id: 'node1',
    width: 90,
    height: 70,
    offsetX: 120,
    offsetY: 100,
  },
  {
    id: 'node2',
    width: 90,
    height: 70,
    offsetX: 150,
    offsetY: 120,
  },
  {
    id: 'node3',
    width: 90,
    height: 70,
    offsetX: 170,
    offsetY: 150,
  },
];

export default {
  name: 'App',
  components: {
    'ejs-diagram': DiagramComponent,
    'ejs-button': ButtonComponent,
  },
  data() {
    return {
      width: '100%',
      height: '600px',
      nodes: nodes,
    };
  },
  methods: {
    sendBackward: function () {
      var diagramInstance = this.$refs.diagram.ej2Instances;
      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 command moves the selected elements up, down, left, or right by 1 pixel. The parameters of nudge method is explained below.

Parameter Type Description
direction NudgeDirection Defines the direction in which the objects should be moved.
x (optional) number The horizontal distance by which the selected objects should be moved.
y (optional) number The vertical distance by which the selected objects should be moved.
type (optional) string A string that defines the type of nudge action.

The accepted values for the “direction” argument are as follows:

  • Up: Moves the selected elements up by the specified delta value.
  • Down: Moves the selected elements down by the specified delta value.
  • Left: Moves the selected elements left by the specified delta value.
  • Right: Moves the selected elements right by the specified delta value.

The following code illustrates how to execute the nudge command.

<template>
    <div id="app">
      <button @click="right">Right</button>
      <button @click="left">Left</button>
      <button @click="up">Up</button>
      <button @click="down">Down</button>
        <ejs-diagram id="diagram" ref="diagramObj" :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 diagramObj = ref(null);
const nodes = [ {
    id: 'node1',
    offsetX: 100,
    offsetY: 100,
    width: 70,
    height: 40,
  },];

const width = "100%";
const height = "350px";

const right = function () {
  let diagramInstance = diagramObj.value.ej2Instances;
  diagramInstance.nudge('Right');
}
const left = function () {
  let diagramInstance = diagramObj.value.ej2Instances;
  diagramInstance.nudge('Left');
};
const up = function () {
  let diagramInstance = diagramObj.value.ej2Instances;
  diagramInstance.nudge('Up');
};
const down = function () {
  let diagramInstance = diagramObj.value.ej2Instances;
  diagramInstance.nudge('Down');
};

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
  <div id="app">
    <ejs-button v-on:click="right">Right </ejs-button>
    <ejs-button v-on:click="left">Left </ejs-button>
    <ejs-button v-on:click="up">Up </ejs-button>
    <ejs-button v-on:click="down">Down </ejs-button>
    <ejs-diagram
      id="diagram"
      ref="diagram"
      :width="width"
      :height="height"
      :nodes="nodes"
    ></ejs-diagram>
  </div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

let nodes = [
  {
    id: 'node1',
    offsetX: 100,
    offsetY: 100,
    width: 70,
    height: 40,
  },
];
export default {
  name: 'App',
  components: {
    'ejs-diagram': DiagramComponent,
    'ejs-button': ButtonComponent,
  },
  data() {
    return {
      width: '100%',
      height: '600px',
      nodes: nodes,
    };
  },
  methods: {
    right: function () {
      var diagramInstance = this.$refs.diagram.ej2Instances;
      diagramInstance.nudge('Right');
    },
    left: function () {
      var diagramInstance = this.$refs.diagram.ej2Instances;
      diagramInstance.nudge('Left');
    },
    up: function () {
      var diagramInstance = this.$refs.diagram.ej2Instances;
      diagramInstance.nudge('Up');
    },
    down: function () {
      var diagramInstance = this.$refs.diagram.ej2Instances;
      diagramInstance.nudge('Down');
    },
  },
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css';
</style>

Nudge by using arrow keys

The arrow keys can be used to move the selected elements up, down, left, or right by 1 pixel.

Nudge Command

Nudge commands are particularly useful for accurate placement of elements.

NOTE

The position change event will not trigger when using keyboard keys to move a node or connector.

BringIntoView

The bringIntoView command brings the specified rectangular region into the viewport of the diagram, ensuring that it is visible within the current view.

The bringIntoView method takes a single parameter, an object that defines the rectangular region to bring into view. This object should include properties such as x, y, width, and height to specify the exact region to be made visible.

The following code illustrates how to execute the bringIntoView command:

<template>
  <div id="app">
    <button @click="bringIntoView">Bring into View</button>
    <ejs-diagram
      id="diagram"
      ref="diagramObj"
      :width="width"
      :height="height"
      :nodes="nodes"
      :scrollSettings="scrollSettings"
    ></ejs-diagram>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram,Rect } from "@syncfusion/ej2-vue-diagrams";

const diagramObj = ref(null);
const nodes = [
  {
    id: "node1",
    offsetX: 1000,
    offsetY: 100,
    width: 70,
    height: 40,
  },
];

const width = "700px";
const height = "350px";
const scrollSettings = {
  scrollLimit: "Infinity",
};

const bringIntoView = function () {
  let diagramInstance = diagramObj.value.ej2Instances;
  let nodeBounds = diagramInstance.nodes[0].wrapper.bounds;
  let bounds = new Rect(
    nodeBounds.x,
    nodeBounds.y,
    nodeBounds.width,
    nodeBounds.height
  );
  /**
   * parameter - bounds of region to bring into view
   */
  diagramInstance.bringIntoView(bounds);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
  <div id="app">
    <ejs-button v-on:click="clock">Bring Into View </ejs-button>

    <ejs-diagram
      id="diagram"
      ref="diagram"
      :width="width"
      :height="height"
      :nodes="nodes"
      :scrollSettings="scrollSettings"
    ></ejs-diagram>
  </div>
</template>
<script>
import {
  DiagramComponent,
  Rect,
} from '@syncfusion/ej2-vue-diagrams';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

let nodes = [
  {
    id: 'node1',
    offsetX: 1000,
    offsetY: 100,
    width: 70,
    height: 40,
  },
];
export default {
  name: 'App',
  components: {
    'ejs-diagram': DiagramComponent,
    'ejs-button': ButtonComponent,
  },
  data() {
    return {
      width: '100%',
      height: '600px',
      nodes: nodes,
      scrollSettings: {
        scrollLimit: 'Infinity',
      },
    };
  },
  methods: {
    clock: function () {
      var diagramInstance = this.$refs.diagram.ej2Instances;
      let nodeBounds = diagramInstance.nodes[0].wrapper.bounds;
      let bounds = new Rect(
        nodeBounds.x,
        nodeBounds.y,
        nodeBounds.width,
        nodeBounds.height
      );
      /**
       * parameter - bounds of region to bring into view
       */
      diagramInstance.bringIntoView(bounds);
    },
  },
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css';
</style>

BringToCenter

The bringToCenter command centers the specified rectangular region of the diagram content within the viewport.

The bringToCenter method takes a single parameter, an object that defines the rectangular region to be centered. This object should include properties such as x, y, width, and height to specify the exact region to be brought to the center.

The following code illustrates how to execute the bringToCenter command.

<template>
  <div id="app">
    <button @click="bringToCenter">Bring to Center</button>
    <ejs-diagram
      id="diagram"
      ref="diagramObj"
      :width="width"
      :height="height"
      :nodes="nodes"
      :scrollSettings="scrollSettings"
    ></ejs-diagram>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram,Rect } from "@syncfusion/ej2-vue-diagrams";

const diagramObj = ref(null);
const nodes = [
  {
    id: "node1",
    offsetX: 1000,
    offsetY: 100,
    width: 70,
    height: 40,
  },
];

const width = "700px";
const height = "350px";
const scrollSettings = {
  scrollLimit: "Infinity",
};

const bringToCenter = function () {
  let diagramInstance = diagramObj.value.ej2Instances;
  let nodeBounds = diagramInstance.nodes[0].wrapper.bounds;
  let bounds = new Rect(
    nodeBounds.x,
    nodeBounds.y,
    nodeBounds.width,
    nodeBounds.height
  );
  /**
   * parameter - bounds of region to bring into view
   */
  diagramInstance.bringToCenter(bounds);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
  <div id="app">
    <ejs-button v-on:click="center">Bring to Center </ejs-button>

    <ejs-diagram
      id="diagram"
      ref="diagram"
      :width="width"
      :height="height"
      :nodes="nodes"
      :scrollSettings="scrollSettings"
    ></ejs-diagram>
  </div>
</template>
<script>
import {
  DiagramComponent,
  DiagramTools,
  Rect,
} from '@syncfusion/ej2-vue-diagrams';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

let nodes = [
  {
    id: 'node1',
    offsetX: 1000,
    offsetY: 100,
    width: 70,
    height: 40,
  },
];
export default {
  name: 'App',
  components: {
    'ejs-diagram': DiagramComponent,
    'ejs-button': ButtonComponent,
  },
  data() {
    return {
      width: '700px',
      height: '600px',
      nodes: nodes,
      scrollSettings: {
        scrollLimit: 'Infinity',
      },
    };
  },
  methods: {
    center: function () {
      var diagramInstance = this.$refs.diagram.ej2Instances;
      let nodeBounds = diagramInstance.nodes[0].wrapper.bounds;
      let bounds = new Rect(
        nodeBounds.x,
        nodeBounds.y,
        nodeBounds.width,
        nodeBounds.height
      );
      /**
       * parameter - bounds of region to bring into view
       */
      diagramInstance.bringToCenter(bounds);
    },
  },
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css';
</style>

FitToPage

The fitToPage command adjusts the diagram content to fit within the viewport, considering either width, height, or the entire content. The fitToPage method takes one parameter, fitOptions, which specifies the options for fitting the diagram to the page.

FitOptions

The mode parameter defines how the diagram should fit into the viewport—horizontally, vertically, or based on the entire bounds of the diagram.

The region parameter specifies the region of the diagram that should be fit within viewport.

The margin parameter sets the margin around the diagram content that should be included in the view.

The canZoomIn parameter enables or disables zooming in to fit smaller content into a larger viewport.

The canZoomOut parameter enables or disables zooming out to fit larger content into a smaller viewport.

The customBounds parameter defines a custom region that should be fit into the viewport.

The following code illustrates how to execute FitToPage command.

<template>
  <div id="app">
    <button @click="page">Fit to Page</button>
    <button @click="fitTowidth">Fit to Width</button>
    <button @click="fitToheight">Fit to Height</button>
    <ejs-diagram
      id="diagram"
      ref="diagramObj"
      :width="width"
      :height="height"
      :dataSourceSettings="dataSourceSettings"
      :getNodeDefaults="getNodeDefaults"
      :getConnectorDefaults="getConnectorDefaults"
      :layout="layout"
    ></ejs-diagram>
  </div>
</template>
 
<script setup>
import { provide, ref } from "vue";
import {
  DiagramComponent as EjsDiagram,
  HierarchicalTree,
  DataBinding,
} from "@syncfusion/ej2-vue-diagrams";
import { DataManager, Query } from "@syncfusion/ej2-data";

const diagramObj = ref(null);

//Initialize data
let data = [
  {
    Id: "parent",
    Name: "Maria Anders",
    Designation: "Managing Director",
    ImageUrl: "../content/images/orgchart/Clayton.png",
    IsExpand: "true",
    RatingColor: "#C34444",
  },
  {
    Id: 1,
    Name: "Ana Trujillo",
    Designation: "Project Manager",
    ImageUrl: "../content/images/orgchart/Thomas.PNG",
    IsExpand: "false",
    RatingColor: "#68C2DE",
    ReportingPerson: "parent",
  },
  {
    Id: 2,
    Name: "Anto Moreno",
    Designation: "Project Lead",
    ImageUrl: "../content/images/orgchart/image53.png",
    IsExpand: "false",
    RatingColor: "#93B85A",
    ReportingPerson: 1,
  },
  {
    Id: 3,
    Name: "Thomas Hardy",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/image57.png",
    IsExpand: "false",
    RatingColor: "#68C2DE",
    ReportingPerson: 2,
  },
  {
    Id: 4,
    Name: "Christina kaff",
    Designation: "S/w Engg",
    ImageUrl: "../content/images/orgchart/Robin.png",
    IsExpand: "false",
    RatingColor: "#93B85A",
    ReportingPerson: 3,
  },
  {
    Id: 5,
    Name: "Hanna Moos",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/image57.png",
    IsExpand: "true",
    RatingColor: "#D46E89",
    ReportingPerson: 4,
  },
  {
    Id: 6,
    Name: "Peter Citeaux",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/Robin.png",
    IsExpand: "true",
    RatingColor: "#68C2DE",
    ReportingPerson: 4,
  },
  {
    Id: 7,
    Name: "Martín Kloss",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/Robin.png",
    IsExpand: "false",
    RatingColor: "#93B85A",
    ReportingPerson: 1,
  },
  {
    Id: 9,
    Name: "Elizabeth Mary",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/Robin.png",
    IsExpand: "None",
    RatingColor: "#93B85A",
    ReportingPerson: 8,
  },
  {
    Id: 10,
    Name: "Victoria Ash",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/Robin.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 8,
  },
  {
    Id: 12,
    Name: "Francisco Yang",
    Designation: "CSR",
    ImageUrl: "../content/images/orgchart/image55.png",
    IsExpand: "None",
    RatingColor: "#93B85A",
    ReportingPerson: 7,
  },
  {
    Id: 13,
    Name: "Yang Wang",
    Designation: "CSR",
    ImageUrl: "../content/images/orgchart/image57.png",
    IsExpand: "None",
    RatingColor: "#EBB92E",
    ReportingPerson: 6,
  },
  {
    Id: 27,
    Name: "Lino Rodri",
    Designation: "Project Manager",
    ImageUrl: "../content/images/orgchart/Robin.PNG",
    IsExpand: "true",
    RatingColor: "#68C2DE",
    ReportingPerson: "parent",
  },
  {
    Id: 38,
    Name: "Philip Cramer",
    Designation: "Project Manager",
    ImageUrl: "../content/images/orgchart/Robin.PNG",
    IsExpand: "true",
    RatingColor: "#68C2DE",
    ReportingPerson: "parent",
  },
  {
    Id: 14,
    Name: "Pedro Afonso",
    Designation: "Project Manager",
    ImageUrl: "../content/images/orgchart/Paul.png",
    IsExpand: "true",
    RatingColor: "#68C2DE",
    ReportingPerson: "parent",
  },
  {
    Id: 15,
    Name: "Elizabeth Roel",
    Designation: "Project Lead",
    ImageUrl: "../content/images/orgchart/Maria.png",
    IsExpand: "false",
    RatingColor: "#93B85A",
    ReportingPerson: 38,
  },
  {
    Id: 17,
    Name: "Janine Labrune",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/image55.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 48,
  },
  {
    Id: 18,
    Name: "Ann Devon",
    Designation: "CSR",
    ImageUrl: "../content/images/orgchart/Robin.png",
    IsExpand: "false",
    RatingColor: "#68C2DE",
    ReportingPerson: 31,
  },
  {
    Id: 19,
    Name: "Roland Mendel",
    Designation: "CSR",
    ImageUrl: "../content/images/orgchart/image57.png",
    IsExpand: "true",
    RatingColor: "#68C2DE",
    ReportingPerson: 31,
  },
  {
    Id: 20,
    Name: "Aria Cruz",
    Designation: "Project Lead",
    ImageUrl: "../content/images/orgchart/Jenny.png",
    IsExpand: "false",
    RatingColor: "#93B85A",
    ReportingPerson: 14,
  },
  {
    Id: 22,
    Name: "Martine Rancé",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/image53.png",
    IsExpand: "None",
    RatingColor: "#93B85A",
    ReportingPerson: 21,
  },
  {
    Id: 23,
    Name: "Maria Larsson",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/image51.png",
    IsExpand: "false",
    RatingColor: "#EBB92E",
    ReportingPerson: 20,
  },
  {
    Id: 21,
    Name: "Diego Roel",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/image55.png",
    IsExpand: "false",
    RatingColor: "#D46E89",
    ReportingPerson: 20,
  },
  {
    Id: 24,
    Name: "Peter Franken",
    Designation: "S/w Engg",
    ImageUrl: "../content/images/orgchart/image55.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 23,
  },
  {
    Id: 25,
    Name: "Carine Schmitt",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/Clayton.png",
    IsExpand: "None",
    RatingColor: "#EBB92E",
    ReportingPerson: 21,
  },
  {
    Id: 26,
    Name: "Paolo Accorti",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/Thomas.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 21,
  },
  {
    Id: 28,
    Name: "Eduardo Roel",
    Designation: "Project Lead",
    ImageUrl: "../content/images/orgchart/image55.png",
    IsExpand: "true",
    RatingColor: "#93B85A",
    ReportingPerson: 38,
  },
  {
    Id: 29,
    Name: "José Pedro ",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/Thomas.png",
    IsExpand: "true",
    RatingColor: "#D46E89",
    ReportingPerson: 28,
  },
  {
    Id: 30,
    Name: "André Fonseca",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/John.png",
    IsExpand: "true",
    RatingColor: "#EBB92E",
    ReportingPerson: 29,
  },
  {
    Id: 31,
    Name: "Howard Snyd",
    Designation: "Project Lead",
    ImageUrl: "../content/images/orgchart/Jenny.png",
    IsExpand: "false",
    RatingColor: "#68C2DE",
    ReportingPerson: 14,
  },
  {
    Id: 32,
    Name: "Manu Pereira",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/image56.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 8,
  },
  {
    Id: 33,
    Name: "Mario Pontes",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/Robin.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 19,
  },
  {
    Id: 34,
    Name: "Carlos Schmitt",
    Designation: "S/w Engg",
    ImageUrl: "../content/images/orgchart/Clayton.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 19,
  },
  {
    Id: 35,
    Name: "Yoshi Latimer",
    Designation: "SR",
    ImageUrl: "../content/images/orgchart/eric.png",
    IsExpand: "true",
    RatingColor: "#D46E89",
    ReportingPerson: 18,
  },
  {
    Id: 36,
    Name: "Patricia Kenna",
    Designation: "SR",
    ImageUrl: "../content/images/orgchart/Maria.png",
    IsExpand: "true",
    RatingColor: "#EBB92E",
    ReportingPerson: 55,
  },
  {
    Id: 37,
    Name: "Helen Bennett",
    Designation: "SR",
    ImageUrl: "../content/images/orgchart/image51.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 15,
  },
  {
    Id: 39,
    Name: "Daniel Tonini",
    Designation: "Project Lead",
    ImageUrl: "../content/images/orgchart/Thomas.png",
    IsExpand: "true",
    RatingColor: "#93B85A",
    ReportingPerson: 27,
  },
  {
    Id: 40,
    Name: "Annette Roel",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/image55.png",
    IsExpand: "false",
    RatingColor: "#93B85A",
    ReportingPerson: 39,
  },
  {
    Id: 41,
    Name: "Yoshi Wilson",
    Designation: "S/w Engg",
    ImageUrl: "../content/images/orgchart/image57.png",
    IsExpand: "false",
    RatingColor: "#EBB92E",
    ReportingPerson: 40,
  },
  {
    Id: 42,
    Name: "John Steel",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/Maria.png",
    IsExpand: "false",
    RatingColor: "#93B85A",
    ReportingPerson: 41,
  },
  {
    Id: 43,
    Name: "Renate Jose",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/image51.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 42,
  },
  {
    Id: 44,
    Name: "Jaime Yorres",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/Robin.png",
    IsExpand: "None",
    RatingColor: "#93B85A",
    ReportingPerson: 42,
  },
  {
    Id: 45,
    Name: "Carlos Nagy",
    Designation: "SR",
    ImageUrl: "../content/images/orgchart/Clayton.png",
    IsExpand: "None",
    RatingColor: "#93B85A",
    ReportingPerson: 40,
  },
  {
    Id: 46,
    Name: "Felipe Kloss",
    Designation: "SR",
    ImageUrl: "../content/images/orgchart/Thomas.png",
    IsExpand: "false",
    RatingColor: "#EBB92E",
    ReportingPerson: 17,
  },
  {
    Id: 47,
    Name: "Fran Wilson",
    Designation: "SR",
    ImageUrl: "../content/images/orgchart/image53.png",
    IsExpand: "None",
    RatingColor: "#93B85A",
    ReportingPerson: 46,
  },
  {
    Id: 48,
    Name: "John Rovelli",
    Designation: "SR",
    ImageUrl: "../content/images/orgchart/Jenny.png",
    IsExpand: "None",
    RatingColor: "#93B85A",
    ReportingPerson: 46,
  },
  {
    Id: 49,
    Name: "Catherine Kaff",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/image57.png",
    IsExpand: "false",
    RatingColor: "#93B85A",
    ReportingPerson: 51,
  },
  {
    Id: 50,
    Name: "Jean Fresnière",
    Designation: "S/w Engg",
    ImageUrl: "../content/images/orgchart/Robin.png",
    IsExpand: "false",
    RatingColor: "#D46E89",
    ReportingPerson: 49,
  },
  {
    Id: 51,
    Name: "Alex Feuer",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/Clayton.png",
    IsExpand: "None",
    RatingColor: "#93B85A",
    ReportingPerson: 50,
  },
  {
    Id: 52,
    Name: "Simon Roel",
    Designation: "S/w Engg",
    ImageUrl: "../content/images/orgchart/Thomas.png",
    IsExpand: "None",
    RatingColor: "#EBB92E",
    ReportingPerson: 50,
  },
  {
    Id: 53,
    Name: "Yvonne Wong",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/image53.png",
    IsExpand: "None",
    RatingColor: "#93B85A",
    ReportingPerson: 50,
  },
  {
    Id: 54,
    Name: "Rene Phillips",
    Designation: "S/w Engg",
    ImageUrl: "../content/images/orgchart/Jenny.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 7,
  },
  {
    Id: 55,
    Name: "Yoshi Kenna",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/image55.png",
    IsExpand: "false",
    RatingColor: "#EBB92E",
    ReportingPerson: 15,
  },
  {
    Id: 56,
    Name: "Helen Marie",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/image51.png",
    IsExpand: "true",
    RatingColor: "#EBB92E",
    ReportingPerson: 55,
  },
  {
    Id: 57,
    Name: "Joseph Kaff",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/image53.png",
    IsExpand: "None",
    RatingColor: "#EBB92E",
    ReportingPerson: 7,
  },
  {
    Id: 58,
    Name: "Georg Pipps",
    Designation: "SR",
    ImageUrl: "../content/images/orgchart/Thomas.png",
    IsExpand: "None",
    RatingColor: "#EBB92E",
    ReportingPerson: 5,
  },
  {
    Id: 60,
    Name: "Nardo Batista",
    Designation: "Project Lead",
    ImageUrl: "../content/images/orgchart/Maria.PNG",
    IsExpand: "true",
    RatingColor: "#68C2DE",
    ReportingPerson: 59,
  },
  {
    Id: 61,
    Name: "Lúcia Carvalho",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/Robin.PNG",
    IsExpand: "false",
    RatingColor: "#93B85A",
    ReportingPerson: 60,
  },
  {
    Id: 62,
    Name: "Horst Kloss",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/Clayton.PNG",
    IsExpand: "None",
    RatingColor: "#68C2DE",
    ReportingPerson: 74,
  },
  {
    Id: 63,
    Name: "Sergio roel",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/image55.PNG",
    IsExpand: "None",
    RatingColor: "#EBB92E",
    ReportingPerson: 61,
  },
  {
    Id: 64,
    Name: "Paula Wilson",
    Designation: "S/w Engg",
    ImageUrl: "../content/images/orgchart/eric.PNG",
    IsExpand: "None",
    RatingColor: "#68C2DE",
    ReportingPerson: 7,
  },
  {
    Id: 65,
    Name: "Mauri Moroni",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/image53.PNG",
    IsExpand: "None",
    RatingColor: "#93B85A",
    ReportingPerson: 6,
  },
  {
    Id: 66,
    Name: "Janete Limeira",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/image51.PNG",
    IsExpand: "None",
    RatingColor: "#93B85A",
    ReportingPerson: 7,
  },
  {
    Id: 67,
    Name: "Michael Holz",
    Designation: "Project Lead",
    ImageUrl: "../content/images/orgchart/Thomas.PNG",
    IsExpand: "true",
    RatingColor: "#68C2DE",
    ReportingPerson: 59,
  },
  {
    Id: 68,
    Name: "Alej Camino",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/Thomas.PNG",
    IsExpand: "false",
    RatingColor: "#93B85A",
    ReportingPerson: 67,
  },
  {
    Id: 69,
    Name: "Jonas Bergsen",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/image53.PNG",
    IsExpand: "None",
    RatingColor: "#68C2DE",
    ReportingPerson: 19,
  },
  {
    Id: 70,
    Name: "Jose Pavarotti",
    Designation: "S/w Engg",
    ImageUrl: "../content/images/orgchart/Maria.PNG",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 56,
  },
  {
    Id: 71,
    Name: "Miguel Angel",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/eric.PNG",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 16,
  },
  {
    Id: 72,
    Name: "Jytte Petersen",
    Designation: "Project Manager",
    ImageUrl: "../content/images/orgchart/image55.PNG",
    IsExpand: "true",
    RatingColor: "#68C2DE",
    ReportingPerson: 59,
  },
  {
    Id: 73,
    Name: "Kloss Perrier",
    Designation: "Project Lead",
    ImageUrl: "../content/images/orgchart/Clayton.png",
    IsExpand: "None",
    RatingColor: "#93B85A",
    ReportingPerson: 23,
  },
  {
    Id: 74,
    Name: "Art Nancy",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/Thomas.png",
    IsExpand: "true",
    RatingColor: "#D46E89",
    ReportingPerson: 29,
  },
  {
    Id: 75,
    Name: "Pascal Cartrain",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/John.png",
    IsExpand: "true",
    RatingColor: "#EBB92E",
    ReportingPerson: 36,
  },
  {
    Id: 76,
    Name: "Liz Nixon",
    Designation: "Project Lead",
    ImageUrl: "../content/images/orgchart/Jenny.png",
    IsExpand: "false",
    RatingColor: "#68C2DE",
    ReportingPerson: 72,
  },
  {
    Id: 77,
    Name: "Liu Wong",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/image57.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 75,
  },
  {
    Id: 78,
    Name: "Karin Josephs",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/image55.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 76,
  },
  {
    Id: 79,
    Name: "Ruby Anabela ",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/Thomas.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 23,
  },
  {
    Id: 80,
    Name: "Helvetis Nagy",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/image53.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 75,
  },
  {
    Id: 81,
    Name: "Palle Ibsen",
    Designation: "S/w Engg",
    ImageUrl: "../content/images/orgchart/image51.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 35,
  },
  {
    Id: 82,
    Name: "Mary Saveley",
    Designation: "Project Manager",
    ImageUrl: "../content/images/orgchart/Clayton.png",
    IsExpand: "false",
    RatingColor: "#93B85A",
    ReportingPerson: 59,
  },
  {
    Id: 83,
    Name: "Paul Henriot",
    Designation: "Project Lead",
    ImageUrl: "../content/images/orgchart/Thomas.png",
    IsExpand: "false",
    RatingColor: "#D46E89",
    ReportingPerson: 30,
  },
  {
    Id: 84,
    Name: "Rita Müller",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/Paul.png",
    IsExpand: "None",
    RatingColor: "#68C2DE",
    ReportingPerson: 83,
  },
  {
    Id: 85,
    Name: "Pirkko King",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/Robin.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 83,
  },
  {
    Id: 86,
    Name: "Paula Parente",
    Designation: "Project Lead",
    ImageUrl: "../content/images/orgchart/John.png",
    IsExpand: "None",
    RatingColor: "#EBB92E",
    ReportingPerson: 74,
  },
  {
    Id: 87,
    Name: "Karl Jablonski",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/image53.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 23,
  },
  {
    Id: 88,
    Name: "Matti Kenna",
    Designation: "Project Lead",
    ImageUrl: "../content/images/orgchart/Jenny.png",
    IsExpand: "None",
    RatingColor: "#93B85A",
    ReportingPerson: 23,
  },
  {
    Id: 89,
    Name: "Zbyszek Yang",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/Thomas.png",
    IsExpand: "None",
    RatingColor: "#93B85A",
    ReportingPerson: 23,
  },
  {
    Id: 90,
    Name: "Nancy",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/image56.png",
    IsExpand: "None",
    RatingColor: "#93B85A",
    ReportingPerson: 23,
  },
  {
    Id: 91,
    Name: "Robert King",
    Designation: "Project Manager",
    ImageUrl: "../content/images/orgchart/Thomas.png",
    IsExpand: "true",
    RatingColor: "#D46E89",
    ReportingPerson: 59,
  },
  {
    Id: 92,
    Name: "Laura Callahan",
    Designation: "Project Lead",
    ImageUrl: "../content/images/orgchart/Robin.png",
    IsExpand: "false",
    RatingColor: "#D46E89",
    ReportingPerson: 91,
  },
  {
    Id: 93,
    Name: "Anne",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/Clayton.png",
    IsExpand: "false",
    RatingColor: "#68C2DE",
    ReportingPerson: 92,
  },
  {
    Id: 94,
    Name: "Georg Pipps",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/image53.png",
    IsExpand: "None",
    RatingColor: "#EBB92E",
    ReportingPerson: 5,
  },
  {
    Id: 95,
    Name: "Isabel Castro",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/image55.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 93,
  },
  {
    Id: 96,
    Name: "Nardo Batista",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/image57.png",
    IsExpand: "None",
    RatingColor: "#EBB92E",
    ReportingPerson: 93,
  },
  {
    Id: 97,
    Name: "Rene Phillips",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/image55.png",
    IsExpand: "false",
    RatingColor: "#68C2DE",
    ReportingPerson: 92,
  },
  {
    Id: 98,
    Name: "Lúcia Carvalho",
    Designation: "S/w Engg",
    ImageUrl: "../content/images/orgchart/Thomas.png",
    IsExpand: "None",
    RatingColor: "#93B85A",
    ReportingPerson: 97,
  },
  {
    Id: 99,
    Name: "Horst Kloss",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/Paul.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 56,
  },
  {
    Id: 101,
    Name: "Simon Roel",
    Designation: "Project Lead",
    ImageUrl: "../content/images/orgchart/Clayton.png",
    IsExpand: "true",
    RatingColor: "#93B85A",
    ReportingPerson: 91,
  },
  {
    Id: 102,
    Name: "Rita Pfalzheim",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/Thomas.png",
    IsExpand: "false",
    RatingColor: "#D46E89",
    ReportingPerson: 101,
  },
  {
    Id: 103,
    Name: "Paula Wilson",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/Jenny.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 750,
  },
  {
    Id: 104,
    Name: " Jose Michael",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/eric.png",
    IsExpand: "None",
    RatingColor: "#93B85A",
    ReportingPerson: 102,
  },
  {
    Id: 105,
    Name: "Mauri Moroni",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/image55.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 35,
  },
  {
    Id: 106,
    Name: "Janete Limeira",
    Designation: "Senior S/w Engg",
    ImageUrl: "../content/images/orgchart/image57.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 35,
  },
  {
    Id: 107,
    Name: "Michael Holz",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/image53.png",
    IsExpand: "None",
    RatingColor: "#D46E89",
    ReportingPerson: 35,
  },
  {
    Id: 108,
    Name: "Alej Camino",
    Designation: "Project Trainee",
    ImageUrl: "../content/images/orgchart/image51.png",
    IsExpand: "None",
    RatingColor: "#93B85A",
    ReportingPerson: 35,
  },
];
let items = new DataManager(data, new Query().take(7));

const width = "100%";
const height = "590px";

//Configures data source for Diagram
const dataSourceSettings = {
  id: "Id",
  parentId: "ReportingPerson",
  dataSource: items,
};
//Uses layout to auto-arrange nodes on the Diagram page
const layout = {
  type: "OrganizationalChart",
  margin: { top: 20 },
  getLayoutInfo: (node, tree) => {
    if (!tree.hasSubTree) {
      tree.orientation = "Vertical";
      tree.type = "Alternate";
    }
  },
};

//Sets the default properties for nodes and connectors
const getNodeDefaults = (node) => {
  node.height = 50;
  node.backgroundColor = "lightgrey";
  node.style = { fill: "transparent", strokeWidth: 2 };
  return node;
};
const getConnectorDefaults = (connector) => {
  connector.targetDecorator.shape = "None";
  connector.type = "Orthogonal";
  return connector;
};

provide("diagram", [HierarchicalTree, DataBinding]);

const page = function () {
  var diagramInstance = diagramObj.value.ej2Instances;
  diagramInstance.fitToPage({
    mode: "Page",
    region: "Content",
    margin: {},
    canZoomIn: false,
  });
};
const fitTowidth = function () {
  var diagramInstance = diagramObj.value.ej2Instances;
  diagramInstance.fitToPage({
    mode: "Width",
    region: "Content",
    margin: {},
    canZoomIn: false,
  });
};
const fitToheight = function () {
  var diagramInstance = diagramObj.value.ej2Instances;
  diagramInstance.fitToPage({
    mode: "Height",
    region: "Content",
    margin: {},
    canZoomIn: false,
  });
};
</script>
 
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
<div id="app">
   <ejs-button v-on:click="page">Fit To Page </ejs-button>
    <ejs-button v-on:click="fitToWidth">Fit To Width </ejs-button>
    <ejs-button v-on:click="fitToHeight">Fit To Height </ejs-button>
    <ejs-diagram id="diagram"  ref="diagram" :width='width' :height='height' :getNodeDefaults='getNodeDefaults'
        :getConnectorDefaults='getConnectorDefaults' :layout='layout'
        :dataSourceSettings='dataSourceSettings'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, HierarchicalTree, DataBinding } from '@syncfusion/ej2-vue-diagrams';
import { DataManager, Query } from "@syncfusion/ej2-data";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

 
let data = [
{
  Id: 'parent',
  Name: 'Maria Anders',
  Designation: 'Managing Director',
  ImageUrl: '../content/images/orgchart/Clayton.png',
  IsExpand: 'true',
  RatingColor: '#C34444',
},
{
  Id: 1,
  Name: 'Ana Trujillo',
  Designation: 'Project Manager',
  ImageUrl: '../content/images/orgchart/Thomas.PNG',
  IsExpand: 'false',
  RatingColor: '#68C2DE',
  ReportingPerson: 'parent',
},
{
  Id: 2,
  Name: 'Anto Moreno',
  Designation: 'Project Lead',
  ImageUrl: '../content/images/orgchart/image53.png',
  IsExpand: 'false',
  RatingColor: '#93B85A',
  ReportingPerson: 1,
},
{
  Id: 3,
  Name: 'Thomas Hardy',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/image57.png',
  IsExpand: 'false',
  RatingColor: '#68C2DE',
  ReportingPerson: 2,
},
{
  Id: 4,
  Name: 'Christina kaff',
  Designation: 'S/w Engg',
  ImageUrl: '../content/images/orgchart/Robin.png',
  IsExpand: 'false',
  RatingColor: '#93B85A',
  ReportingPerson: 3,
},
{
  Id: 5,
  Name: 'Hanna Moos',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/image57.png',
  IsExpand: 'true',
  RatingColor: '#D46E89',
  ReportingPerson: 4,
},
{
  Id: 6,
  Name: 'Peter Citeaux',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/Robin.png',
  IsExpand: 'true',
  RatingColor: '#68C2DE',
  ReportingPerson: 4,
},
{
  Id: 7,
  Name: 'Martín Kloss',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/Robin.png',
  IsExpand: 'false',
  RatingColor: '#93B85A',
  ReportingPerson: 1,
},
{
  Id: 9,
  Name: 'Elizabeth Mary',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/Robin.png',
  IsExpand: 'None',
  RatingColor: '#93B85A',
  ReportingPerson: 8,
},
{
  Id: 10,
  Name: 'Victoria Ash',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/Robin.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 8,
},
{
  Id: 12,
  Name: 'Francisco Yang',
  Designation: 'CSR',
  ImageUrl: '../content/images/orgchart/image55.png',
  IsExpand: 'None',
  RatingColor: '#93B85A',
  ReportingPerson: 7,
},
{
  Id: 13,
  Name: 'Yang Wang',
  Designation: 'CSR',
  ImageUrl: '../content/images/orgchart/image57.png',
  IsExpand: 'None',
  RatingColor: '#EBB92E',
  ReportingPerson: 6,
},
{
  Id: 27,
  Name: 'Lino Rodri',
  Designation: 'Project Manager',
  ImageUrl: '../content/images/orgchart/Robin.PNG',
  IsExpand: 'true',
  RatingColor: '#68C2DE',
  ReportingPerson: 'parent',
},
{
  Id: 38,
  Name: 'Philip Cramer',
  Designation: 'Project Manager',
  ImageUrl: '../content/images/orgchart/Robin.PNG',
  IsExpand: 'true',
  RatingColor: '#68C2DE',
  ReportingPerson: 'parent',
},
{
  Id: 14,
  Name: 'Pedro Afonso',
  Designation: 'Project Manager',
  ImageUrl: '../content/images/orgchart/Paul.png',
  IsExpand: 'true',
  RatingColor: '#68C2DE',
  ReportingPerson: 'parent',
},
{
  Id: 15,
  Name: 'Elizabeth Roel',
  Designation: 'Project Lead',
  ImageUrl: '../content/images/orgchart/Maria.png',
  IsExpand: 'false',
  RatingColor: '#93B85A',
  ReportingPerson: 38,
},
{
  Id: 17,
  Name: 'Janine Labrune',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/image55.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 48,
},
{
  Id: 18,
  Name: 'Ann Devon',
  Designation: 'CSR',
  ImageUrl: '../content/images/orgchart/Robin.png',
  IsExpand: 'false',
  RatingColor: '#68C2DE',
  ReportingPerson: 31,
},
{
  Id: 19,
  Name: 'Roland Mendel',
  Designation: 'CSR',
  ImageUrl: '../content/images/orgchart/image57.png',
  IsExpand: 'true',
  RatingColor: '#68C2DE',
  ReportingPerson: 31,
},
{
  Id: 20,
  Name: 'Aria Cruz',
  Designation: 'Project Lead',
  ImageUrl: '../content/images/orgchart/Jenny.png',
  IsExpand: 'false',
  RatingColor: '#93B85A',
  ReportingPerson: 14,
},
{
  Id: 22,
  Name: 'Martine Rancé',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/image53.png',
  IsExpand: 'None',
  RatingColor: '#93B85A',
  ReportingPerson: 21,
},
{
  Id: 23,
  Name: 'Maria Larsson',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/image51.png',
  IsExpand: 'false',
  RatingColor: '#EBB92E',
  ReportingPerson: 20,
},
{
  Id: 21,
  Name: 'Diego Roel',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/image55.png',
  IsExpand: 'false',
  RatingColor: '#D46E89',
  ReportingPerson: 20,
},
{
  Id: 24,
  Name: 'Peter Franken',
  Designation: 'S/w Engg',
  ImageUrl: '../content/images/orgchart/image55.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 23,
},
{
  Id: 25,
  Name: 'Carine Schmitt',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/Clayton.png',
  IsExpand: 'None',
  RatingColor: '#EBB92E',
  ReportingPerson: 21,
},
{
  Id: 26,
  Name: 'Paolo Accorti',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/Thomas.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 21,
},
{
  Id: 28,
  Name: 'Eduardo Roel',
  Designation: 'Project Lead',
  ImageUrl: '../content/images/orgchart/image55.png',
  IsExpand: 'true',
  RatingColor: '#93B85A',
  ReportingPerson: 38,
},
{
  Id: 29,
  Name: 'José Pedro ',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/Thomas.png',
  IsExpand: 'true',
  RatingColor: '#D46E89',
  ReportingPerson: 28,
},
{
  Id: 30,
  Name: 'André Fonseca',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/John.png',
  IsExpand: 'true',
  RatingColor: '#EBB92E',
  ReportingPerson: 29,
},
{
  Id: 31,
  Name: 'Howard Snyd',
  Designation: 'Project Lead',
  ImageUrl: '../content/images/orgchart/Jenny.png',
  IsExpand: 'false',
  RatingColor: '#68C2DE',
  ReportingPerson: 14,
},
{
  Id: 32,
  Name: 'Manu Pereira',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/image56.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 8,
},
{
  Id: 33,
  Name: 'Mario Pontes',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/Robin.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 19,
},
{
  Id: 34,
  Name: 'Carlos Schmitt',
  Designation: 'S/w Engg',
  ImageUrl: '../content/images/orgchart/Clayton.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 19,
},
{
  Id: 35,
  Name: 'Yoshi Latimer',
  Designation: 'SR',
  ImageUrl: '../content/images/orgchart/eric.png',
  IsExpand: 'true',
  RatingColor: '#D46E89',
  ReportingPerson: 18,
},
{
  Id: 36,
  Name: 'Patricia Kenna',
  Designation: 'SR',
  ImageUrl: '../content/images/orgchart/Maria.png',
  IsExpand: 'true',
  RatingColor: '#EBB92E',
  ReportingPerson: 55,
},
{
  Id: 37,
  Name: 'Helen Bennett',
  Designation: 'SR',
  ImageUrl: '../content/images/orgchart/image51.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 15,
},
{
  Id: 39,
  Name: 'Daniel Tonini',
  Designation: 'Project Lead',
  ImageUrl: '../content/images/orgchart/Thomas.png',
  IsExpand: 'true',
  RatingColor: '#93B85A',
  ReportingPerson: 27,
},
{
  Id: 40,
  Name: 'Annette Roel',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/image55.png',
  IsExpand: 'false',
  RatingColor: '#93B85A',
  ReportingPerson: 39,
},
{
  Id: 41,
  Name: 'Yoshi Wilson',
  Designation: 'S/w Engg',
  ImageUrl: '../content/images/orgchart/image57.png',
  IsExpand: 'false',
  RatingColor: '#EBB92E',
  ReportingPerson: 40,
},
{
  Id: 42,
  Name: 'John Steel',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/Maria.png',
  IsExpand: 'false',
  RatingColor: '#93B85A',
  ReportingPerson: 41,
},
{
  Id: 43,
  Name: 'Renate Jose',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/image51.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 42,
},
{
  Id: 44,
  Name: 'Jaime Yorres',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/Robin.png',
  IsExpand: 'None',
  RatingColor: '#93B85A',
  ReportingPerson: 42,
},
{
  Id: 45,
  Name: 'Carlos Nagy',
  Designation: 'SR',
  ImageUrl: '../content/images/orgchart/Clayton.png',
  IsExpand: 'None',
  RatingColor: '#93B85A',
  ReportingPerson: 40,
},
{
  Id: 46,
  Name: 'Felipe Kloss',
  Designation: 'SR',
  ImageUrl: '../content/images/orgchart/Thomas.png',
  IsExpand: 'false',
  RatingColor: '#EBB92E',
  ReportingPerson: 17,
},
{
  Id: 47,
  Name: 'Fran Wilson',
  Designation: 'SR',
  ImageUrl: '../content/images/orgchart/image53.png',
  IsExpand: 'None',
  RatingColor: '#93B85A',
  ReportingPerson: 46,
},
{
  Id: 48,
  Name: 'John Rovelli',
  Designation: 'SR',
  ImageUrl: '../content/images/orgchart/Jenny.png',
  IsExpand: 'None',
  RatingColor: '#93B85A',
  ReportingPerson: 46,
},
{
  Id: 49,
  Name: 'Catherine Kaff',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/image57.png',
  IsExpand: 'false',
  RatingColor: '#93B85A',
  ReportingPerson: 51,
},
{
  Id: 50,
  Name: 'Jean Fresnière',
  Designation: 'S/w Engg',
  ImageUrl: '../content/images/orgchart/Robin.png',
  IsExpand: 'false',
  RatingColor: '#D46E89',
  ReportingPerson: 49,
},
{
  Id: 51,
  Name: 'Alex Feuer',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/Clayton.png',
  IsExpand: 'None',
  RatingColor: '#93B85A',
  ReportingPerson: 50,
},
{
  Id: 52,
  Name: 'Simon Roel',
  Designation: 'S/w Engg',
  ImageUrl: '../content/images/orgchart/Thomas.png',
  IsExpand: 'None',
  RatingColor: '#EBB92E',
  ReportingPerson: 50,
},
{
  Id: 53,
  Name: 'Yvonne Wong',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/image53.png',
  IsExpand: 'None',
  RatingColor: '#93B85A',
  ReportingPerson: 50,
},
{
  Id: 54,
  Name: 'Rene Phillips',
  Designation: 'S/w Engg',
  ImageUrl: '../content/images/orgchart/Jenny.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 7,
},
{
  Id: 55,
  Name: 'Yoshi Kenna',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/image55.png',
  IsExpand: 'false',
  RatingColor: '#EBB92E',
  ReportingPerson: 15,
},
{
  Id: 56,
  Name: 'Helen Marie',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/image51.png',
  IsExpand: 'true',
  RatingColor: '#EBB92E',
  ReportingPerson: 55,
},
{
  Id: 57,
  Name: 'Joseph Kaff',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/image53.png',
  IsExpand: 'None',
  RatingColor: '#EBB92E',
  ReportingPerson: 7,
},
{
  Id: 58,
  Name: 'Georg Pipps',
  Designation: 'SR',
  ImageUrl: '../content/images/orgchart/Thomas.png',
  IsExpand: 'None',
  RatingColor: '#EBB92E',
  ReportingPerson: 5,
},
{
  Id: 60,
  Name: 'Nardo Batista',
  Designation: 'Project Lead',
  ImageUrl: '../content/images/orgchart/Maria.PNG',
  IsExpand: 'true',
  RatingColor: '#68C2DE',
  ReportingPerson: 59,
},
{
  Id: 61,
  Name: 'Lúcia Carvalho',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/Robin.PNG',
  IsExpand: 'false',
  RatingColor: '#93B85A',
  ReportingPerson: 60,
},
{
  Id: 62,
  Name: 'Horst Kloss',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/Clayton.PNG',
  IsExpand: 'None',
  RatingColor: '#68C2DE',
  ReportingPerson: 74,
},
{
  Id: 63,
  Name: 'Sergio roel',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/image55.PNG',
  IsExpand: 'None',
  RatingColor: '#EBB92E',
  ReportingPerson: 61,
},
{
  Id: 64,
  Name: 'Paula Wilson',
  Designation: 'S/w Engg',
  ImageUrl: '../content/images/orgchart/eric.PNG',
  IsExpand: 'None',
  RatingColor: '#68C2DE',
  ReportingPerson: 7,
},
{
  Id: 65,
  Name: 'Mauri Moroni',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/image53.PNG',
  IsExpand: 'None',
  RatingColor: '#93B85A',
  ReportingPerson: 6,
},
{
  Id: 66,
  Name: 'Janete Limeira',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/image51.PNG',
  IsExpand: 'None',
  RatingColor: '#93B85A',
  ReportingPerson: 7,
},
{
  Id: 67,
  Name: 'Michael Holz',
  Designation: 'Project Lead',
  ImageUrl: '../content/images/orgchart/Thomas.PNG',
  IsExpand: 'true',
  RatingColor: '#68C2DE',
  ReportingPerson: 59,
},
{
  Id: 68,
  Name: 'Alej Camino',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/Thomas.PNG',
  IsExpand: 'false',
  RatingColor: '#93B85A',
  ReportingPerson: 67,
},
{
  Id: 69,
  Name: 'Jonas Bergsen',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/image53.PNG',
  IsExpand: 'None',
  RatingColor: '#68C2DE',
  ReportingPerson: 19,
},
{
  Id: 70,
  Name: 'Jose Pavarotti',
  Designation: 'S/w Engg',
  ImageUrl: '../content/images/orgchart/Maria.PNG',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 56,
},
{
  Id: 71,
  Name: 'Miguel Angel',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/eric.PNG',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 16,
},
{
  Id: 72,
  Name: 'Jytte Petersen',
  Designation: 'Project Manager',
  ImageUrl: '../content/images/orgchart/image55.PNG',
  IsExpand: 'true',
  RatingColor: '#68C2DE',
  ReportingPerson: 59,
},
{
  Id: 73,
  Name: 'Kloss Perrier',
  Designation: 'Project Lead',
  ImageUrl: '../content/images/orgchart/Clayton.png',
  IsExpand: 'None',
  RatingColor: '#93B85A',
  ReportingPerson: 23,
},
{
  Id: 74,
  Name: 'Art Nancy',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/Thomas.png',
  IsExpand: 'true',
  RatingColor: '#D46E89',
  ReportingPerson: 29,
},
{
  Id: 75,
  Name: 'Pascal Cartrain',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/John.png',
  IsExpand: 'true',
  RatingColor: '#EBB92E',
  ReportingPerson: 36,
},
{
  Id: 76,
  Name: 'Liz Nixon',
  Designation: 'Project Lead',
  ImageUrl: '../content/images/orgchart/Jenny.png',
  IsExpand: 'false',
  RatingColor: '#68C2DE',
  ReportingPerson: 72,
},
{
  Id: 77,
  Name: 'Liu Wong',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/image57.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 75,
},
{
  Id: 78,
  Name: 'Karin Josephs',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/image55.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 76,
},
{
  Id: 79,
  Name: 'Ruby Anabela ',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/Thomas.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 23,
},
{
  Id: 80,
  Name: 'Helvetis Nagy',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/image53.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 75,
},
{
  Id: 81,
  Name: 'Palle Ibsen',
  Designation: 'S/w Engg',
  ImageUrl: '../content/images/orgchart/image51.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 35,
},
{
  Id: 82,
  Name: 'Mary Saveley',
  Designation: 'Project Manager',
  ImageUrl: '../content/images/orgchart/Clayton.png',
  IsExpand: 'false',
  RatingColor: '#93B85A',
  ReportingPerson: 59,
},
{
  Id: 83,
  Name: 'Paul Henriot',
  Designation: 'Project Lead',
  ImageUrl: '../content/images/orgchart/Thomas.png',
  IsExpand: 'false',
  RatingColor: '#D46E89',
  ReportingPerson: 30,
},
{
  Id: 84,
  Name: 'Rita Müller',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/Paul.png',
  IsExpand: 'None',
  RatingColor: '#68C2DE',
  ReportingPerson: 83,
},
{
  Id: 85,
  Name: 'Pirkko King',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/Robin.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 83,
},
{
  Id: 86,
  Name: 'Paula Parente',
  Designation: 'Project Lead',
  ImageUrl: '../content/images/orgchart/John.png',
  IsExpand: 'None',
  RatingColor: '#EBB92E',
  ReportingPerson: 74,
},
{
  Id: 87,
  Name: 'Karl Jablonski',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/image53.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 23,
},
{
  Id: 88,
  Name: 'Matti Kenna',
  Designation: 'Project Lead',
  ImageUrl: '../content/images/orgchart/Jenny.png',
  IsExpand: 'None',
  RatingColor: '#93B85A',
  ReportingPerson: 23,
},
{
  Id: 89,
  Name: 'Zbyszek Yang',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/Thomas.png',
  IsExpand: 'None',
  RatingColor: '#93B85A',
  ReportingPerson: 23,
},
{
  Id: 90,
  Name: 'Nancy',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/image56.png',
  IsExpand: 'None',
  RatingColor: '#93B85A',
  ReportingPerson: 23,
},
{
  Id: 91,
  Name: 'Robert King',
  Designation: 'Project Manager',
  ImageUrl: '../content/images/orgchart/Thomas.png',
  IsExpand: 'true',
  RatingColor: '#D46E89',
  ReportingPerson: 59,
},
{
  Id: 92,
  Name: 'Laura Callahan',
  Designation: 'Project Lead',
  ImageUrl: '../content/images/orgchart/Robin.png',
  IsExpand: 'false',
  RatingColor: '#D46E89',
  ReportingPerson: 91,
},
{
  Id: 93,
  Name: 'Anne',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/Clayton.png',
  IsExpand: 'false',
  RatingColor: '#68C2DE',
  ReportingPerson: 92,
},
{
  Id: 94,
  Name: 'Georg Pipps',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/image53.png',
  IsExpand: 'None',
  RatingColor: '#EBB92E',
  ReportingPerson: 5,
},
{
  Id: 95,
  Name: 'Isabel Castro',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/image55.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 93,
},
{
  Id: 96,
  Name: 'Nardo Batista',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/image57.png',
  IsExpand: 'None',
  RatingColor: '#EBB92E',
  ReportingPerson: 93,
},
{
  Id: 97,
  Name: 'Rene Phillips',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/image55.png',
  IsExpand: 'false',
  RatingColor: '#68C2DE',
  ReportingPerson: 92,
},
{
  Id: 98,
  Name: 'Lúcia Carvalho',
  Designation: 'S/w Engg',
  ImageUrl: '../content/images/orgchart/Thomas.png',
  IsExpand: 'None',
  RatingColor: '#93B85A',
  ReportingPerson: 97,
},
{
  Id: 99,
  Name: 'Horst Kloss',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/Paul.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 56,
},
{
  Id: 101,
  Name: 'Simon Roel',
  Designation: 'Project Lead',
  ImageUrl: '../content/images/orgchart/Clayton.png',
  IsExpand: 'true',
  RatingColor: '#93B85A',
  ReportingPerson: 91,
},
{
  Id: 102,
  Name: 'Rita Pfalzheim',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/Thomas.png',
  IsExpand: 'false',
  RatingColor: '#D46E89',
  ReportingPerson: 101,
},
{
  Id: 103,
  Name: 'Paula Wilson',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/Jenny.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 750,
},
{
  Id: 104,
  Name: ' Jose Michael',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/eric.png',
  IsExpand: 'None',
  RatingColor: '#93B85A',
  ReportingPerson: 102,
},
{
  Id: 105,
  Name: 'Mauri Moroni',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/image55.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 35,
},
{
  Id: 106,
  Name: 'Janete Limeira',
  Designation: 'Senior S/w Engg',
  ImageUrl: '../content/images/orgchart/image57.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 35,
},
{
  Id: 107,
  Name: 'Michael Holz',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/image53.png',
  IsExpand: 'None',
  RatingColor: '#D46E89',
  ReportingPerson: 35,
},
{
  Id: 108,
  Name: 'Alej Camino',
  Designation: 'Project Trainee',
  ImageUrl: '../content/images/orgchart/image51.png',
  IsExpand: 'None',
  RatingColor: '#93B85A',
  ReportingPerson: 35,
}
];

let items = new DataManager(data, new Query().take(7));
export default {
name: "App",
components: {
    "ejs-diagram": DiagramComponent,
    'ejs-button': ButtonComponent,


},
data() {
    return {
        width: "100%",
        height: "690px",
        //Uses layout to auto-arrange nodes on the Diagram page
         layout: {
        type: 'OrganizationalChart',
        margin: { top: 20 },
        getLayoutInfo: (node , tree) => {
          if (!tree.hasSubTree) {
            tree.orientation = 'Vertical';
            tree.type = 'Alternate';
          }
        },
      },
        //Configures data source for Diagram
        dataSourceSettings: {
        id: 'Id',
        parentId: 'ReportingPerson',
        dataSource: items,
      },
        //Sets the default properties for nodes and connectors
      getNodeDefaults: (obj) => {
        obj.height = 50;
        obj.backgroundColor = 'lightgrey';
        obj.style = { fill: 'transparent', strokeWidth: 2 };
        return obj;
      },
      getConnectorDefaults: (connector) => {
        connector.targetDecorator.shape = 'None';
        connector.type = 'Orthogonal';
        return connector;
      },
    }
},
provide: {
    diagram: [HierarchicalTree, DataBinding]
},

  methods: {
  page: function () {
    var diagramInstance = this.$refs.diagram.ej2Instances;
    diagramInstance.fitToPage({
      mode: 'Page',
      region: 'Content',
      margin: {},
      canZoomIn: false,
    });
  },
  fitToWidth: function () {
    var diagramInstance = this.$refs.diagram.ej2Instances;
    diagramInstance.fitToPage({
      mode: 'Width',
      region: 'Content',
      margin: {},
      canZoomIn: false,
    }); 
  },
  fitToHeight: function () {
    var diagramInstance = this.$refs.diagram.ej2Instances;
    diagramInstance.fitToPage({
      mode: 'Height',
      region: 'Content',
      margin: {},
      canZoomIn: false,
    });
  },
  },
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css';
</style>

Command manager

The Diagram provides support for mapping or binding command execution to specific key gestures. It includes built-in commands and allows for the definition of custom commands through the
CommandManager. 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 of keys and KeyModifiers.
  • 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 use the command manager to clone a node and change the fill color of a node while pressing G and Shift+G or Alt+G, respectively:

<template>
  <div id="app">
    <ejs-diagram
      id="diagram"
      ref="diagram"
      :width="width"
      :height="height"
      :scrollSettings="scrollSettings"
      :nodes="nodes"
      :commandManager="commandManager"
    />
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram, Keys, KeyModifiers } from '@syncfusion/ej2-vue-diagrams';

// Refs for the diagram component and instances
const diagram = ref(null);
let diagramInstance;

// Reactive properties
const width = "700px";
const height = "350px";
const scrollSettings = { scrollLimit: 'Infinity' };

const nodes = ref([
  {
    id: 'node1',
    offsetX: 100,
    offsetY: 100,
    width: 70,
    height: 40,
    style: { fill: '#64abbb' },
  }
]);

const commandManager = ref({
  commands: [
    {
      name: 'clone',
      canExecute: () => {
        return diagramInstance.selectedItems.nodes.length > 0;
      },
      execute: () => {
        diagramInstance.copy();
        diagramInstance.paste();
      },
      gesture: {
        key: Keys.G,
        keyModifiers: null,
      },
    },
    {
      name: 'color',
      canExecute: () => {
        return diagramInstance.selectedItems.nodes.length > 0;
      },
      execute: () => {
        const selectedNode = diagramInstance.selectedItems.nodes[0];
        // Toggle the node color
        selectedNode.style.fill =
          selectedNode.style.fill === '#64abbb' ? 'yellow' : '#64abbb';
        diagramInstance.dataBind();
      },
      gesture: {
        key: Keys.G,
        keyModifiers: KeyModifiers.Shift | KeyModifiers.Alt,
      },
    }
  ]
});

onMounted(() => {
  // Assign the Diagram instance when the component is mounted
  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"
      :scrollSettings="scrollSettings"
      :nodes="nodes"
      :commandManager="commandManager"
    ></ejs-diagram>
  </div>
</template>

<script>
import {
  DiagramComponent,
  Keys,
  KeyModifiers,
} from '@syncfusion/ej2-vue-diagrams';

export default {
  name: 'App',
  components: {
    'ejs-diagram': DiagramComponent,
  },
  data() {
    return {
      width: '700px',
      height: '350px',
      scrollSettings: { scrollLimit: 'Infinity' },
      nodes: [
        {
          id: 'node1',
          offsetX: 100,
          offsetY: 100,
          width: 70,
          height: 40,
          style: { fill: '#64abbb' },
        },
      ],
      commandManager: {
        commands: [
          {
            name: 'clone',
            canExecute: () => {
              return this.diagramInstance.selectedItems.nodes.length > 0;
            },
            execute: () => {
              this.diagramInstance.copy();
              this.diagramInstance.paste();
            },
            gesture: {
              // Press G to clone node
              key: Keys.G,
              keyModifiers: null,
            },
          },
          {
            name: 'color',
            canExecute: () => {
              return this.diagramInstance.selectedItems.nodes.length > 0;
            },
            execute: () => {
              const selectedNode = this.diagramInstance.selectedItems.nodes[0];
              // Toggle the node color
              selectedNode.style.fill =
                selectedNode.style.fill === '#64abbb' ? 'yellow' : '#64abbb';
              this.diagramInstance.dataBind();
            },
            gesture: {
              // Press Shift+G or Alt+G to change node color
              key: Keys.G,
              keyModifiers: KeyModifiers.Shift | KeyModifiers.Alt,
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.diagramInstance = this.$refs.diagram.ej2Instances;
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Disable/Modify the existing command

When any of the default commands are not desired, they can be disabled. Additionally, if you need to change the functionality of a specific command, it can be completely modified.

The following code example illustrates how to disable the default cut and delete commands using CTRL+X and Delete keys, and how to modify the copy command to clone a node using CTRL+C:

<template>
  <div id="app">
    <ejs-diagram
      id="diagram"
      ref="diagram"
      :width="width"
      :height="height"
      :scrollSettings="scrollSettings"
      :nodes="nodes"
      :commandManager="commandManager"
    />
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import {
  DiagramComponent as EjsDiagram,
  Keys,
  KeyModifiers,
} from "@syncfusion/ej2-vue-diagrams";

// Refs for the diagram component and instances
const diagram = ref(null);
let diagramInstance;

// Reactive properties
const width = "700px";
const height = "350px";
const scrollSettings = { scrollLimit: "Infinity" };

const nodes = ref([
  {
    id: "node1",
    offsetX: 100,
    offsetY: 100,
    width: 70,
    height: 40,
    style: { fill: "#64abbb" },
  },
]);

const commandManager = ref({
  commands: [
    {
      //Preventing default cut command
      name: "cut",
      canExecute: function () {
        return false;
      },
      execute: null,
      gesture: {
        key: Keys.X,
        keyModifiers: KeyModifiers.Control,
      },
    },
    {
      //Preventing default delete command
      name: "delete",
      canExecute: function () {
        return false;
      },
      execute: null,
      gesture: {
        key: Keys.Delete,
      },
    },
    {
      //Modifying copy command to clone node
      name: "clone",
      canExecute: function () {
        let execute = diagramInstance.selectedItems.nodes.length > 0;
        return execute;
      },
      execute: function () {
        diagramInstance.copy();
        diagramInstance.paste();
      },
      gesture: {
        //Press CTRL+C to clone node
        key: Keys.C,
        keyModifiers: KeyModifiers.Control,
      },
    },
  ],
});

onMounted(() => {
  // Assign the Diagram instance when the component is mounted
  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"
      :scrollSettings="scrollSettings"
      :nodes="nodes"
      :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: '700px',
      height: '350px',
      scrollSettings: { scrollLimit: 'Infinity' },
      nodes: [
        {
          id: 'node1',
          offsetX: 100,
          offsetY: 100,
          width: 70,
          height: 40,
          style: { fill: '#64abbb' },
        },
      ],
      commandManager: {
        commands: [
          {
            //Preventing default cut command
            name: 'cut',
            canExecute: function () {
              return false;
            },
            execute: null,
            gesture: {
              key: Keys.X,
              keyModifiers: KeyModifiers.Control,
            },
          },
          {
            //Preventing default delete command
            name: 'delete',
            canExecute: function () {
              return false;
            },
            execute: null,
            gesture: {
              key: Keys.Delete,
            },
          },
          {
            //Modifying copy command to clone node
            name: 'clone',
            canExecute: function () {
              let execute =
                diagramInstance.selectedItems.nodes.length > 0;
              return execute;
            },
            execute: function () {
              diagramInstance.copy();
              diagramInstance.paste();
            },
            gesture: {
              //Press CTRL+C to clone node
              key: Keys.C,
              keyModifiers: KeyModifiers.Control,
            },
          },
        ],
      },
    };
  },
  mounted() {
    diagramInstance = this.$refs.diagram.ej2Instances;
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Undo-redo

Undo/redo commands can be executed through shortcut keys. Shortcut key for undo is Ctrl+z and shortcut key for redo is Ctrl+y. For more information refer to the undo-redo

See Also