Create connector port

The creation of connector ports is similar to the creation of node ports. To create connector ports, you need to define a port collection and assign it to the connector’s ports property.

The following code example shows how to create connector port.

Composition API (~/src/App.vue)

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

const diagram = ref(null);

const connectors = [
  {
    id: "connector1",
    sourcePoint: { x: 100, y: 100 },
    targetPoint: { x: 300, y: 100 },
    ports: [
      {
        offset: 0.5,
        visibility: PortVisibility.Visible,
      },
    ],
  },
  {
    id: "connector2",
    sourcePoint: { x: 100, y: 200 },
    targetPoint: { x: 300, y: 220 },
    type: "Orthogonal",
    ports: [
      {
        offset: 0.5,
        visibility: PortVisibility.Visible,
      },
    ],
  },
];

const width = "100%";
const height = "600px";
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Options API (~/src/App.vue)

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

let connectors = [
  {
    id: "connector1",
    sourcePoint: { x: 100, y: 100 },
    targetPoint: { x: 300, y: 100 },
    ports: [
      {
        offset: 0.5,
        visibility: PortVisibility.Visible,
      },
    ],
  },
  {
    id: "connector2",
    sourcePoint: { x: 100, y: 200 },
    targetPoint: { x: 300, y: 220 },
    type: "Orthogonal",
    ports: [
      {
        offset: 0.5,
        visibility: PortVisibility.Visible,
      },
    ],
  },
];

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

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

Port alignment

The port can be aligned before, after, or at the center of the connector by utilizing the alignment property. By default, the port alignment is set to center.

The following code example shows how to set alignment to the connector port.

Composition API (~/src/App.vue)

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

const diagram = ref(null);

const connectors = [
  {
    id: "connector1",
    sourcePoint: { x: 100, y: 200 },
    targetPoint: { x: 300, y: 220 },
    type: "Orthogonal",
    ports: [
      {
        offset: 0.5,
        visibility: PortVisibility.Visible,
        alignment: "Before",
      },
    ],
  },
  {
    id: "connector2",
    sourcePoint: { x: 320, y: 200 },
    targetPoint: { x: 500, y: 220 },
    type: "Orthogonal",
    ports: [
      {
        offset: 0.5,
        visibility: PortVisibility.Visible,
        alignment: "Center",
      },
    ],
  },
  {
    id: "connector3",
    sourcePoint: { x: 520, y: 200 },
    targetPoint: { x: 700, y: 220 },
    type: "Orthogonal",
    ports: [
      {
        offset: 0.5,
        visibility: PortVisibility.Visible,
        alignment: "After",
      },
    ],
  },
];

const width = "100%";
const height = "600px";
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Options API (~/src/App.vue)

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

let connectors = [
  {
    id: "connector1",
    sourcePoint: { x: 100, y: 200 },
    targetPoint: { x: 300, y: 220 },
    type: "Orthogonal",
    ports: [
      {
        offset: 0.5,
        visibility: PortVisibility.Visible,
        alignment: "Before",
      },
    ],
  },
  {
    id: "connector2",
    sourcePoint: { x: 320, y: 200 },
    targetPoint: { x: 500, y: 220 },
    type: "Orthogonal",
    ports: [
      {
        offset: 0.5,
        visibility: PortVisibility.Visible,
        alignment: "Center",
      },
    ],
  },
  {
    id: "connector3",
    sourcePoint: { x: 520, y: 200 },
    targetPoint: { x: 700, y: 220 },
    type: "Orthogonal",
    ports: [
      {
        offset: 0.5,
        visibility: PortVisibility.Visible,
        alignment: "After",
      },
    ],
  },
];

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



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

Port displacement

The connector port displacement allows users to adjust the position of ports relative to the connector. By setting displacement offsets, ports can be moved to precise locations along the connector.

The following code example shows how to set displacement to the connector port.

Composition API (~/src/App.vue)

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

const diagram = ref(null);

const connectors = [
    {
      id: 'connector1',
      sourcePoint: { x: 100, y: 200 },
      targetPoint: { x: 100, y: 320 },
      type: 'Orthogonal',
      ports: [
        {
          offset: 0.5,
          visibility: PortVisibility.Visible,
          //Displacement
          displacement: { x: 50, y: 0 },
          alignment: 'Before',
        },
      ],
    },
    {
      id: 'connector2',
      sourcePoint: { x: 300, y: 200 },
      targetPoint: { x: 500, y: 220 },
      type: 'Orthogonal',
      ports: [
        {
          offset: 0.5,
          visibility: PortVisibility.Visible,
          //Displacement
          displacement: { x: 0, y: 50 },
          alignment: 'Before',
        },
      ],
    }
];

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


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

Options API (~/src/App.vue)

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


let connectors = [
    {
      id: 'connector1',
      sourcePoint: { x: 100, y: 200 },
      targetPoint: { x: 100, y: 320 },
      type: 'Orthogonal',
      ports: [
        {
          offset: 0.5,
          visibility: PortVisibility.Visible,
          //Displacement
          displacement: { x: 50, y: 0 },
          alignment: 'Before',
        },
      ],
    },
    {
      id: 'connector2',
      sourcePoint: { x: 300, y: 200 },
      targetPoint: { x: 500, y: 220 },
      type: 'Orthogonal',
      ports: [
        {
          offset: 0.5,
          visibility: PortVisibility.Visible,
          //Displacement
          displacement: { x: 0, y: 50 },
          alignment: 'Before',
        },
      ],
    }
];

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

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

NOTE

The displacement will work only if we set alignment as after or before.

Connector port connection

To establish a connection between connectors, connector ports are utilized. For this connection, the sourcePortID or targetPortID should be set to the ID of the respective port on the connector.

The following code example explains how to connect connector to the connector port.

Composition API (~/src/App.vue)

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

const diagram = ref(null);

const nodes = [
  {
    id: 'node1',
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    ports: [
      {
        id: 'nodePort',
        offset: { x: 1, y: 0.5 },
        visibility: PortVisibility.Visible,
      },
    ],
  },
];

const connectors = [
  {
    id: 'connector1',
    sourcePoint: { x: 100, y: 100 },
    targetPoint: { x: 300, y: 120 },
    type: 'Orthogonal',
    ports: [
      {
        id: 'connectorPort',
        offset: 0.5,
        visibility: PortVisibility.Visible,
      },
    ],
  },
  {
    id: 'connector2',
    sourceID: 'node1',
    //connector id
    targetID: 'connector1',
    sourcePortID: 'nodePort',
    //Connector port id
    targetPortID: 'connectorPort',
    type: 'Orthogonal',
    ports: [
      {
        offset: 0.5,
        visibility: PortVisibility.Visible,
      },
    ],
  },
];

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


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

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-diagram
      id="diagram"
      ref="diagram"
      :width="width"
      :height="height"
      :nodes="nodes"
      :connectors="connectors"
    ></ejs-diagram>
  </div>
</template>
<script>
import { DiagramComponent, PortVisibility } from "@syncfusion/ej2-vue-diagrams";



let nodes = [
  {
    id: 'node1',
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    ports: [
      {
        id: 'nodePort',
        offset: { x: 1, y: 0.5 },
        visibility: PortVisibility.Visible,
      },
    ],
  },
];

let connectors = [
  {
    id: 'connector1',
    sourcePoint: { x: 100, y: 100 },
    targetPoint: { x: 300, y: 120 },
    type: 'Orthogonal',
    ports: [
      {
        id: 'connectorPort',
        offset: 0.5,
        visibility: PortVisibility.Visible,
      },
    ],
  },
  {
    id: 'connector2',
    sourceID: 'node1',
    //connector id
    targetID: 'connector1',
    sourcePortID: 'nodePort',
    //Connector port id
    targetPortID: 'connectorPort',
    type: 'Orthogonal',
    ports: [
      {
        offset: 0.5,
        visibility: PortVisibility.Visible,
      },
    ],
  },
];

export default {
  name: "App",
  components: {
    "ejs-diagram": DiagramComponent,
  },
  data() {
    return {
      width: "100%",
      height: "600px",
      nodes:nodes,
      connectors: connectors,
    };
  },

};
</script>

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

See also

• How to customize the ports

• How to set the position of the port

• How to interact with the ports