Connector interaction in EJ2 Vue Diagram

28 Mar 202517 minutes to read

Connectors can be selected, dragged, and routed over the diagram page.

Select and unSelect connector.

A connector can be selected, simply just by clicking on it.

A connector can be selected at runtime by using the Select method and clear the selection in the diagram using the ClearSelection. 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 ref="diagram" id="diagram" :width='width' :height='height' :connectors='connectors'></ejs-diagram>
    </div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';

const connectors = [{
    // Name of the connector
    id: "connector1",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
}
]
const width = "100%";
const height = "350px";
const select = function () {
     const diagramInstance = diagram.value.ej2Instances;
    diagramInstance.select([diagramInstance.connectors[0]]);
}
const unselect = function () {
       const diagramInstance = diagram.value.ej2Instances;
   diagram.value.ej2Instances.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 ref="diagram" :width='width' :height='height' :connectors='connectors'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';

const connectors = [{
// Name of the connector
id: "connector1",
sourcePoint: {
  x: 100,
  y: 100,
},
targetPoint: {
  x: 200,
  y: 200,
},
}
]
export default {
name: "App",
components: {
    "ejs-diagram": DiagramComponent
},
data() {
    return {
        width: "100%",
        height: "350px",
        connectors: connectors
    }
},methods: {
  select() {
    const diagramInstance = this.$refs.diagram.ej2Instances;
    diagramInstance.select([diagramInstance.connectors[0]]);
  },
  unselect() {
      // remove connector from the diagram
      this.$refs.diagram.ej2Instances.clearSelection();
  },
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Drag Connector

Connector can be dragged by just clicking on the connector and dragging.

Connector Drag Gif

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

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

const connectors = [{
    // Name of the connector
    id: "connector1",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    
}
]
const width = "100%";
const height = "350px";
const drag = function () {
      const diagramInstance = diagram.value.ej2Instances;
     let connector= diagramInstance.connectors[0];
     diagramInstance.drag(connector, 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 ref="diagram" :width='width' :height='height' :connectors='connectors'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';

const connectors = [{
// Name of the connector
id: "connector1",
sourcePoint: {
    x: 100,
    y: 100
},
targetPoint: {
    x: 200,
    y: 200
},
}
]
export default {
name: "App",
components: {
    "ejs-diagram": DiagramComponent
},
data() {
    return {
        width: "100%",
        height: "350px",
        connectors: connectors
    }
},
methods: {
  drag() {
    const diagramInstance = this.$refs.diagram.ej2Instances;
     let connector= diagramInstance.connectors[0];
     diagramInstance.drag(connector, 20, 20);
  },}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

End point dragging

The connector can be selected by clicking it. When the connector is selected, circles will be added on the starting and ending of the connector that is represented by Thumbs. Clicking and dragging those handles helps you to adjust the source and target points.

End Point drag GIF

You can also update the endPoints of diagram by using dragSourceEnd and dragTargetEnd methods of diagram.

The following code example shows the ways to drag connector end point at runtime.

<template>
<div id="app">
<button @click="sourcePoint">sourcePoint</button>
<button @click="targetPoint">targetPoint</button>
<button @click="dragSourceEnd">dragSourceEnd</button>
<button @click="dragTargetEnd">dragTargetEnd</button>
<ejs-diagram ref="diagram" :width='width' :height='height' :connectors='connectors'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';

const connectors = [{
    // Name of the connector
    id: "connector1",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
}
]

const width = "100%";
const height = "350px";
 const sourcePoint= function() {
    const diagramInstance = diagram.value.ej2Instances;
    let connector = diagramInstance.connectors[0];
    connector.sourcePoint = {x:300,y:100};
    diagramInstance.dataBind();
  }
  const targetPoint= function() {
    const diagramInstance = diagram.value.ej2Instances;
    let connector = diagramInstance.connectors[0];
    connector.targetPoint = {x:300,y:200};
    diagramInstance.dataBind();
  }
  const dragSourceEnd= function() {
    const diagramInstance = diagram.value.ej2Instances;
    diagramInstance.dragSourceEnd(diagramInstance.connectors[0], 50, 50);
}
 const dragTargetEnd= function() {
  const diagramInstance = diagram.value.ej2Instances;
  diagramInstance.dragTargetEnd(diagramInstance.connectors[0], 50, 50);
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
<div id="app">
<button @click="sourcePoint">sourcePoint</button>
<button @click="targetPoint">targetPoint</button>
<button @click="dragSourceEnd">dragSourceEnd</button>
<button @click="dragTargetEnd">dragTargetEnd</button>
    <ejs-diagram ref="diagram" :width='width' :height='height' :connectors='connectors'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';

const connectors = [{
// Name of the connector
id: "connector1",
sourcePoint: {
    x: 100,
    y: 100
},
targetPoint: {
    x: 200,
    y: 200
},
}
]
export default {
name: "App",
components: {
    "ejs-diagram": DiagramComponent
},
data() {
    return {
        width: "100%",
        height: "350px",
        connectors: connectors
    }
},
methods: {
  sourcePoint() {
    const diagramInstance = this.$refs.diagram.ej2Instances;
    let connector = diagramInstance.connectors[0];
    connector.sourcePoint = {x:300,y:100};
    diagramInstance.dataBind();
  },
  targetPoint() {
    const diagramInstance = this.$refs.diagram.ej2Instances;
    let connector = diagramInstance.connectors[0];
    connector.targetPoint = {x:300,y:200};
    diagramInstance.dataBind();
  },
  dragSourceEnd() {
    const diagramInstance = this.$refs.diagram.ej2Instances;
    diagramInstance.dragSourceEnd(diagramInstance.connectors[0], 50, 50);
},
dragTargetEnd() {
  const diagramInstance = this.$refs.diagram.ej2Instances;
  diagramInstance.dragTargetEnd(diagramInstance.connectors[0], 50, 50);
},
  },
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Segment editing

Diagram allows you to edit connector segments at runtime. To enable this feature, you need to activate the DragSegmentThumb constraint for the connector.

{
connector.constraints =
      ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
}

NOTE

To edit a connector segment, you need to inject the ConnectorEditing module into the diagram.

Connector segmnet edit

Flip

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

The flip types are as follows:

  • HorizontalFlip
    Horizontal is used to interchange the connector source and target x points.

  • VerticalFlip
    Vertical is used to interchange the connector source and target y points.

  • Both
    Both is used to interchange the source point as target point and target point as source point

<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors'></ejs-diagram>
    </div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';

const connectors = [
{
  id: 'connector1',
  //Flip
  flip: 'Horizontal',
  annotations: [{ content: 'Horizontal Flip' }],
  sourcePoint: { x: 100, y: 100 },
  targetPoint: { x: 200, y: 200 },
},{
  id: 'connector2',
  //Flip
  flip: 'Vertical',
  annotations: [{ content: 'Vertical Flip' }],
  sourcePoint: { x: 300, y: 100 },
  targetPoint: { x: 400, y: 200 },
},  {
  id: 'connector3',
  //Flip
  flip: 'Both',
  annotations: [{ content: 'Both Flip' }],
  sourcePoint: { x: 500, y: 100 },
  targetPoint: { x: 600, y: 200 },
},
]
const width = "100%";
const height = "350px";

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
<div id="app">
    <ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';

const connectors = [
{
  id: 'connector1',
  //Flip
  flip: 'Horizontal',
  annotations: [{ content: 'Horizontal Flip' }],
  sourcePoint: { x: 100, y: 100 },
  targetPoint: { x: 200, y: 200 },
},{
  id: 'connector2',
  //Flip
  flip: 'Vertical',
  annotations: [{ content: 'Vertical Flip' }],
  sourcePoint: { x: 300, y: 100 },
  targetPoint: { x: 400, y: 200 },
},  {
  id: 'connector3',
  //Flip
  flip: 'Both',
  annotations: [{ content: 'Both Flip' }],
  sourcePoint: { x: 500, y: 100 },
  targetPoint: { x: 600, y: 200 },
},
]
export default {
name: "App",
components: {
    "ejs-diagram": DiagramComponent
},
data() {
    return {
        width: "100%",
        height: "350px",
        connectors: connectors
    }
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

NOTE

The flip is not applicable when the connectors connect in nodes