Node Interaction in Vue Diagram control

30 Jan 202524 minutes to read

The diagram provides support for selecting, dragging, resizing, and rotating nodes interactively. A node can be selected by simply clicking on it, dragged by dragging it on diagram canvas, resized using the resize handle, and rotated using the rotate handle. Additionally, interactions can be performed using some public methods, which are explained below:

Select

You can simply click on the node to select it and click on diagram canvas to unselect it like below.

Select/UnSelect Node

To select node programmatically

A node can be selected at runtime by using the select method and the selection can be cleared in the diagram by using the clearSelection or unSelect method. The following code explains how to select and clear selection in the diagram.

<template>
    <div id="app">
        <button @click="select">Select</button>
        <button @click="unSelect">UnSelect</button>
        <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 = [{
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    // Text(label) added to the node
}];

const width = "100%";
const height = "700px";
const select = function()
{
    const diagramInstance = diagram.value.ej2Instances;
    diagramInstance.select([diagramInstance.nodes[0]]);
};
const unSelect = function()
{
    const diagramInstance = diagram.value.ej2Instances;
    diagramInstance.clearSelection();
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
    <div id="app">
        <button @click="select">Select</button>
        <button @click="unSelect">UnSelect</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';

let nodes = [{
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
}];

export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "700px",
            nodes: nodes,
        }
    },
    methods: {
        select() {
            const diagramInstance = this.$refs.diagram.ej2Instances;
            diagramInstance.select([diagramInstance.nodes[0]]);
        },
        unSelect() {
            const diagramInstance = this.$refs.diagram.ej2Instances;
            diagramInstance.clearSelection();
        }
    }
    
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Method Parameter Description
unSelect NodeModel/ConnectorModel The object to remove from the selection.
clearSelection - Clears all the selection in the diagram.

Drag

You can simply mousedown on a node and drag it anywhere on the diagram canvas like below.

Drag node

To drag node programatically

A node can be dragged at runtime by using the drag method. The following code explains how to drag the node by using the drag method.

<template>
    <div id="app">
        <button @click="drag">Drag</button>
        <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 = [{
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    // Text(label) added to the node
}];

const width = "100%";
const height = "700px";
const drag = function () {
      this.$refs.diagram.ej2Instances.drag(this.$refs.diagram.ej2Instances.nodes[0], 20, 20);
    }
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
  <div id="app">
  <button @click="drag">Drag</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';

let nodes = [
  {
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    visible: true,
    style: { fill: '#6AA8D7' },
    // Text(label) added to the node
  },
];

export default {
  name: 'App',
  components: {
    'ejs-diagram': DiagramComponent,
  },
  data() {
    return {
      width: '100%',
      height: '700px',
      nodes: nodes,
    };
  },
  methods: {
    drag() {
      this.$refs.diagram.ej2Instances.drag(this.$refs.diagram.ej2Instances.nodes[0], 20, 20);
    },
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Resize

When we select a node a resize handle will appear on all the sides of the node. We can resize the node by clicking and dragging the resize handle.

Resize Node

To resize node programatically

A node can be resized at runtime by using the scale method. The following code explains how to resize the node by using the scale method.

<template>
  <div id="app">
    <button @click="resize">Resize</button>
    <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 = [
  {
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    style: {
      fill: "#6BA5D7",
      strokeColor: "white",
    },
    // Text(label) added to the node
  },
];

const width = "100%";
const height = "700px";
const resize = function () {
  this.$refs.diagram.ej2Instances.scale(this.$refs.diagram.ej2Instances.nodes[0], 0.5, 0.5, { x: 0.5, y: 0.5 });
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
  <div id="app">
    <button @click="resize">Resize</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';

let nodes = [
  {
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    visible: true,
    style: { fill: '#6AA8D7' },
    // Text(label) added to the node
  },
];

export default {
  name: 'App',
  components: {
    'ejs-diagram': DiagramComponent,
  },
  data() {
    return {
      width: '100%',
      height: '700px',
      nodes: nodes,
    };
  },
  methods: {
    resize() {
      // Adds node to the diagram
      this.$refs.diagram.ej2Instances.scale(
        this.$refs.diagram.ej2Instances.nodes[0],
        0.5,
        0.5,
        { x: 0.5, y: 0.5 }
      );
    },
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Rotate

A node can be rotated interactively by clicking and dragging the rotate handle of the node.

Rotate Node

To rotate node programatically

A node can be rotated at runtime by using the rotate method. The following code explains how to rotate the node by using the rotate method.

<template>
  <div id="app">
    <button @click="rotate">Rotate</button>
    <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 = [
  {
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    style: {
      fill: "#6BA5D7",
      strokeColor: "white",
    },
    // Text(label) added to the node
  },
];

const width = "100%";
const height = "700px";
const rotate = function () {
  this.$refs.diagram.ej2Instances.rotate(this.$refs.diagram.ej2Instances.nodes[0], this.$refs.diagram.ej2Instances.nodes[0].rotateAngle + 15);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
  <div id="app">
    <button @click="rotate">Rotate</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';

let nodes = [
  {
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    visible: true,
    style: { fill: '#6AA8D7' },
    // Text(label) added to the node
  },
];

export default {
  name: 'App',
  components: {
    'ejs-diagram': DiagramComponent,
  },
  data() {
    return {
      width: '100%',
      height: '700px',
      nodes: nodes,
    };
  },
  methods: {
    rotate() {
      this.$refs.diagram.ej2Instances.rotate(
        this.$refs.diagram.ej2Instances.nodes[0],
        this.$refs.diagram.ej2Instances.nodes[0].rotateAngle + 15
      );
    },
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Flip

The diagram Provides support to flip the node. flip is performed to give the mirrored image of the original element.

The flip types are as follows:

Flip direction Description
HorizontalFlip Horizontal is used to flip the node to be mirrored across the horizontal axis.
VerticalFlip Vertical is used to flip the node to be mirrored across the vertical axis.
Both Both is used to flip the node to be mirrored across the horizontal and vertical axes.
None It is used to disable all the flip behavior.

The following code illustrates how to provide the mirror image of the original element.

<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, FlipDirection } from '@syncfusion/ej2-vue-diagrams';

const diagram = ref(null);
const nodes = [{
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    // Flip the node in Horizontal Direction
    flip: FlipDirection.Horizontal,
    shape: {
        type: 'Basic',
        shape: 'RightTriangle',
    },
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
}];

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

onMounted(function () {
    const diagramInstance = diagram.value.ej2Instances;
    diagramInstance.select([diagramInstance.nodes[0]]);
})
</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, FlipDirection } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    // Flip the node in Horizontal Direction
    flip: FlipDirection.Horizontal,
    shape: {
        type: 'Basic',
        shape: 'RightTriangle',
    },
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
}];

export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "700px",
            nodes: nodes,
        }
    },
    mounted: function () {
        const diagramInstance = this.$refs.diagram.ej2Instances;
        diagramInstance.select([diagramInstance.nodes[0]]);
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Update flip at runtime

You can dynamically update the flip for a node at runtime using the ^ operator. This operator allows you to apply the same flip direction multiple times, toggling the node’s orientation effectively.
The following example demonstrates how to update the flip for a node dynamically:

<template>
    <div id="app">
        <button @click="flipHorizontal">flipHorizontal</button>
        <button @click="flipVertical">flipVertical</button>
        <button @click="flipBoth">flipBoth</button>
        <button @click="flipNone">flipNone</button>
        <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, FlipDirection } from '@syncfusion/ej2-vue-diagrams';

const diagram = ref(null);
const nodes = [{
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    // Flip the node in Horizontal Direction
    flip: FlipDirection.Horizontal,
    shape: {
        type: 'Basic',
        shape: 'RightTriangle',
    },
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
}];

const width = "100%";
const height = "700px";
const flipHorizontal = function () {
    //Flips the node horizontally
    diagram.value.ej2Instances.nodes[0].flip ^= FlipDirection.Horizontal;
    diagram.value.ej2Instances.dataBind();
}
const flipVertical = function () {
    //Flips the node vertically
    diagram.value.ej2Instances.nodes[0].flip ^= FlipDirection.Vertical;
    diagram.value.ej2Instances.dataBind();
}
const flipBoth = function () {
    //Flips the node horizontally and vertically
    diagram.value.ej2Instances.nodes[0].flip ^= FlipDirection.Both;
    diagram.value.ej2Instances.dataBind();
}
const flipNone = function () {
    //Flip for node is none
    diagram.value.ej2Instances.nodes[0].flip = FlipDirection.None;
    diagram.value.ej2Instances.dataBind();
}

onMounted(function () {
    const diagramInstance = diagram.value.ej2Instances;
    diagramInstance.select([diagramInstance.nodes[0]]);
})
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
    <div id="app">
        <button @click="flipHorizontal">flipHorizontal</button>
        <button @click="flipVertical">flipVertical</button>
        <button @click="flipBoth">flipBoth</button>
        <button @click="flipNone">flipNone</button>
        <ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
    </div>
</template>
<script>
import { DiagramComponent, FlipDirection } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    // Flip the node in Horizontal Direction
    flip: FlipDirection.Horizontal,
    shape: {
        type: 'Basic',
        shape: 'RightTriangle',
    },
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
}];

export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "700px",
            nodes: nodes,
        }
    },
    methods: {
        flipHorizontal() {
      //Flips the node horizontally
      this.$refs.diagram.ej2Instances.nodes[0].flip ^= FlipDirection.Horizontal;
      this.$refs.diagram.ej2Instances.dataBind();
    },
    flipVertical() {
       //Flips the node vertically
       this.$refs.diagram.ej2Instances.nodes[0].flip ^= FlipDirection.Vertical;
      this.$refs.diagram.ej2Instances.dataBind();
    },
    flipBoth() {
       //Flips the node horizontally and vertically
       this.$refs.diagram.ej2Instances.nodes[0].flip ^= FlipDirection.Both;
      this.$refs.diagram.ej2Instances.dataBind();
    },
    flipNone() {
       //Flip for node is none
       this.$refs.diagram.ej2Instances.nodes[0].flip = FlipDirection.None;
      this.$refs.diagram.ej2Instances.dataBind();
    },
  },
    mounted: function () {
        const diagramInstance = this.$refs.diagram.ej2Instances;
        diagramInstance.select([diagramInstance.nodes[0]]);
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Flip modes

The flipMode is used to control the behavior of the flip object whether to flip the object along with the port and label.

FlipMode Description
Label It flips the label along with the object while keeping the text readable.
Port It flips the port along with the object.
All It flips the port, label, and label text along with the object.
None It flips only the object.
LabelText It flips the object and inverts the label without changing its position.
PortAndLabel It flips the port and label along with the object while keeping the text readable.
PortAndLabelText It flips the port and label text along with the object.
LabelAndLabelText It flips the label and label text along with the Object.

Below are examples of a node undergoing various FlipModes in different flip directions.

Flip Direction Flip Mode Default Node Flipped Node
Horizontal All Horizontal All HorizontalFlip All
Horizontal Label Horizontal Label HorizontalFlip Label
Horizontal LabelText Horizontal LabelText HorizontalFlip LabelText
Horizontal Port Horizontal Port HorizontalFlip Port
Horizontal None Horizontal None HorizontalFlip None
Horizontal PortAndLabel Horizontal PortAndLabel HorizontalFlip PortAndLabel
Horizontal PortAndLabelText Horizontal PortAndLabelText HorizontalFlip PortAndLabelText
Horizontal LabelAndLabelText Horizontal LabelAndLabelText HorizontalFlip LabelAndLabelText
Vertical All Vertical All VerticalFlip All
Vertical Label Vertical Label VerticalFlip Label
Vertical LabelText Vertical LabelText VerticalFlip LabelText
Vertical Port Vertical Port VerticalFlip Port
Vertical None Vertical None VerticalFlip None
Vertical PortAndLabel Vertical PortAndLabel VerticalFlip PortAndLabel
Vertical PortAndLabelText Vertical PortAndLabelText VerticalFlip PortAndLabelText
Vertical LabelAndLabelText Vertical LabelAndLabelText VerticalFlip LabelAndLabelText
Both All Both All BothFlip All
Both Label Both Label BothFlip Label
Both LabelText Both LabelText BothFlip LabelText
Both Port Both Port BothFlip Port
Both None Both None BothFlip None
Both PortAndLabel Both PortAndLabel BothFlip PortAndLabel
Both PortAndLabelText Both PortAndLabelText BothFlip PortAndLabelText
Both LabelAndLabelText Both LabelAndLabelText BothFlip LabelAndLabelText 
<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, FlipDirection } from '@syncfusion/ej2-vue-diagrams';

const diagram = ref(null);
const nodes = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    ports: [
      {
        id: 'left',
        offset: { x: 0, y: 0.5 },
        visibility: PortVisibility.Visible,
      },
    ],
    annotations: [{ content: 'FlipMode as Label', offset:{x:0,y:0.8} }],
    // Flip the node in Horizontal Direction
    flip: FlipDirection.Horizontal,
    //FlipMode as Label
    flipMode: 'Label',
    shape: {
      type: 'Basic',
      shape: 'RightTriangle',
    },
    style: {
      fill: '#6BA5D7',
    },
  },
  {
    id: 'node2',
    // Position of the node
    offsetX: 400,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    annotations: [{ content: 'FlipMode as Port', offset:{x:0,y:0.8} }],
    // Flip the node in Horizontal Direction
    flip: FlipDirection.Horizontal,
    ports: [
      {
        id: 'left',
        offset: { x: 0, y: 0.5 },
        visibility: PortVisibility.Visible,
      },
    ],
    //FlipMode as Port
    flipMode: 'Port',
    shape: {
      type: 'Basic',
      shape: 'RightTriangle',
    },
    style: {
      fill: '#6BA5D7',
    },
  },
  {
    id: 'node3',
    // Position of the node
    offsetX: 100,
    offsetY: 300,
    // Size of the node
    width: 100,
    height: 100,
    annotations: [{ content: 'FlipMode as All', offset:{x:0,y:0.8} }],
    // Flip the node in Horizontal Direction
    flip: FlipDirection.Horizontal,
    ports: [
      {
        id: 'left',
        offset: { x: 0, y: 0.5 },
        visibility: PortVisibility.Visible,
      },
    ],
    //FlipMode as All
    flipMode: 'All',
    shape: {
      type: 'Basic',
      shape: 'RightTriangle',
    },
    style: {
      fill: '#6BA5D7',
    },
  },
  {
    id: 'node4',
    // Position of the node
    offsetX: 400,
    offsetY: 300,
    // Size of the node
    width: 100,
    height: 100,
    annotations: [{ content: 'FlipMode as None', offset:{x:0,y:0.8} }],
    // Flip the node in Horizontal Direction
    flip: FlipDirection.Horizontal,
    ports: [
      {
        id: 'left',
        offset: { x: 0, y: 0.5 },
        visibility: PortVisibility.Visible,
      },
    ],
    //FlipMode as None
    flipMode: 'None',
    shape: {
      type: 'Basic',
      shape: 'RightTriangle',
    },
    style: {
      fill: '#6BA5D7',
    },
  }];

const width = "100%";
const height = "700px";
</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, PortVisibility, FlipDirection } from '@syncfusion/ej2-vue-diagrams';

let nodes = [
  {
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    ports: [
      {
        id: 'left',
        offset: { x: 0, y: 0.5 },
        visibility: PortVisibility.Visible,
      },
    ],
    annotations: [{ content: 'FlipMode as Label', offset:{x:0,y:0.8} }],
    // Flip the node in Horizontal Direction
    flip: FlipDirection.Horizontal,
    //FlipMode as Label
    flipMode: 'Label',
    shape: {
      type: 'Basic',
      shape: 'RightTriangle',
    },
    style: {
      fill: '#6BA5D7',
    },
  },
  {
    id: 'node2',
    // Position of the node
    offsetX: 400,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    annotations: [{ content: 'FlipMode as Port', offset:{x:0,y:0.8} }],
    // Flip the node in Horizontal Direction
    flip: FlipDirection.Horizontal,
    ports: [
      {
        id: 'left',
        offset: { x: 0, y: 0.5 },
        visibility: PortVisibility.Visible,
      },
    ],
    //FlipMode as Port
    flipMode: 'Port',
    shape: {
      type: 'Basic',
      shape: 'RightTriangle',
    },
    style: {
      fill: '#6BA5D7',
    },
  },
  {
    id: 'node3',
    // Position of the node
    offsetX: 100,
    offsetY: 300,
    // Size of the node
    width: 100,
    height: 100,
    annotations: [{ content: 'FlipMode as All', offset:{x:0,y:0.8} }],
    // Flip the node in Horizontal Direction
    flip: FlipDirection.Horizontal,
    ports: [
      {
        id: 'left',
        offset: { x: 0, y: 0.5 },
        visibility: PortVisibility.Visible,
      },
    ],
    //FlipMode as All
    flipMode: 'All',
    shape: {
      type: 'Basic',
      shape: 'RightTriangle',
    },
    style: {
      fill: '#6BA5D7',
    },
  },
  {
    id: 'node4',
    // Position of the node
    offsetX: 400,
    offsetY: 300,
    // Size of the node
    width: 100,
    height: 100,
    annotations: [{ content: 'FlipMode as None', offset:{x:0,y:0.8} }],
    // Flip the node in Horizontal Direction
    flip: FlipDirection.Horizontal,
    ports: [
      {
        id: 'left',
        offset: { x: 0, y: 0.5 },
        visibility: PortVisibility.Visible,
      },
    ],
    //FlipMode as None
    flipMode: 'None',
    shape: {
      type: 'Basic',
      shape: 'RightTriangle',
    },
    style: {
      fill: '#6BA5D7',
    },
  },
];

export default {
  name: 'App',
  components: {
    'ejs-diagram': DiagramComponent,
  },
  data() {
    return {
      width: '100%',
      height: '700px',
      nodes: nodes,
    };
  },
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>