Ports appearance in Vue Diagram component

28 Mar 202522 minutes to read

Appearance

The appearance of ports can be customized by using strokeColor, strokeWidth,fill and opacity properties of the port. Customize the port size by using the width and height properties of port. The ports visibility property allows you to define, when the port should be visible.

For more information about port visibility refer Port Visibility

The following code illustrates how to change the appearance of port.

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

const diagram = ref(null);

const nodes = [{
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    ports: [
      {
        offset: { x: 1, y: 0.5 },
        visibility: PortVisibility.Visible,
        style: {
          fill: 'red',
          strokeWidth: 2,
          strokeColor: 'black',
          opacity: 0.7,
          strokeDashArray: '2 2',
        },
        width: 12,
        height: 12,
        shape: 'Circle',
      }
    ]
}];

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"
      ref="diagram"
      :width="width"
      :height="height"
      :nodes="nodes"
    ></ejs-diagram>
  </div>
</template>
<script>
import { DiagramComponent, PortVisibility } from "@syncfusion/ej2-vue-diagrams";


let nodes = [
  {
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    ports: [
      {
        offset: { x: 1, y: 0.5 },
        visibility: PortVisibility.Visible,
        style: {
          fill: "red",
          strokeWidth: 2,
          strokeColor: "black",
          opacity: 0.7,
          strokeDashArray: "2 2",
        },
        width: 12,
        height: 12,
        shape: "Circle",
      },
    ],
  },
];

export default {
  name: "App",
  components: {
    "ejs-diagram": DiagramComponent,
  },
  data() {
    return {
      width: "100%",
      height: "350px",
      nodes: nodes,
    };
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Change appearance of port at runtime

The appearance of port can be changed at runtime by customizing the style of port.The following code illustrates how to change the appearance of port at runtime.

<template>
    <div id="app">
         <ejs-button v-on:click='changeAppearance'>change Appearance</ejs-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, PortVisibility } from '@syncfusion/ej2-vue-diagrams';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';

let diagramInstance;
const diagram = ref(null);

const nodes = [{
  offsetX: 250,
  offsetY: 250,
  width: 100,
  height: 100,
  ports: [
    {
      offset: { x: 1, y: 0.5 },
      visibility: PortVisibility.Visible,
      style: {
        fill: "red",
        strokeWidth: 2,
        strokeColor: "black",
        opacity: 0.7,
        strokeDashArray: "2 2",
      },
      width: 12,
      height: 12,
      shape: "Circle",
    },
  ],
}];

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

const changeAppearance = function() {
    let port = diagramInstance.nodes[0].ports[0];
    port.style.fill = 'yellow';
    port.style.opacity = 1;
    port.width = 25;
    port.height = 25;
    diagramInstance.dataBind();
}

onMounted(function () {
    diagramInstance = diagram.value.ej2Instances;
});

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
  <div id="app">
    <ejs-button v-on:click="changeAppearance">change Appearance</ejs-button>
    <ejs-diagram
      id="diagram"
      ref="diagram"
      :width="width"
      :height="height"
      :nodes="nodes"
    ></ejs-diagram>
  </div>
</template>
<script>
import { DiagramComponent, PortVisibility } from "@syncfusion/ej2-vue-diagrams";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";

let diagramInstance;

let nodes = [{
  offsetX: 250,
  offsetY: 250,
  width: 100,
  height: 100,
  ports: [
    {
      offset: { x: 1, y: 0.5 },
      visibility: PortVisibility.Visible,
      style: {
        fill: "red",
        strokeWidth: 2,
        strokeColor: "black",
        opacity: 0.7,
        strokeDashArray: "2 2",
      },
      width: 12,
      height: 12,
      shape: "Circle",
    },
  ],
}];

export default {
  name: "App",
  components: {
    "ejs-diagram": DiagramComponent,
    "ejs-button": ButtonComponent,
  },
  data() {
    return {
      width: "100%",
      height: "350px",
      nodes: nodes,
    };
  },
  mounted: function () {
    diagramInstance = this.$refs.diagram.ej2Instances;
  },
  methods: {
    changeAppearance() {
        let port = diagramInstance.nodes[0].ports[0];
        port.style.fill = 'yellow';
        port.style.opacity = 1;
        port.width = 25;
        port.height = 25;
        diagramInstance.dataBind();
    },
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Port visibility

The visibility of the ports is determined by the visibility property of port using the PortVisibility enum, This enum includes properties such as Connect, Hidden, Hover, and Visible. By default, the port visibility is set to Hidden.

Property Definition
Hover Port is visible when mousehover the DiagramElement.
Hidden Port is not visible for the DiagramElement.
Connect The port becomes visible when you hover the connector thumb over the DiagramElement where the port resides.
Visible Port is always visible for the DiagramElement.

Port shape

The shape of port can be changed by using its shape property. To explore the different types of port shapes, refer to Port Shapes. By default the port shape is Square.

Types of port shapes

We have provided some basic built-in PortShapes for the port. Find the shapes as follows.

  • Circle
  • Custom
  • Square
  • X

Customize the port’s shape

Custom shape support has been provided for port. You can able to add the custom path data instead of build-in shapes.
If you need to render a custom shape, then you can set shape as Custom and define path using pathData property of port.

The following code illustrates how to set custom shape to the port.

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

const diagram = ref(null);
const nodes = [
  {
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    ports: [
      {
        offset: {
          x: 1,
          y: 0.5,
        },
        visibility: PortVisibility.Visible,
        width: 15,
        height: 15,
        // Sets the shape of the port as Circle
        shape: "Circle",
      },
      {
        offset: {
          x: 0,
          y: 0.5,
        },
        visibility: PortVisibility.Visible,
        width: 15,
        height: 15,
        // Sets the shape of the port as Square
        shape: "Square",
      },
      {
        offset: {
          x: 0.5,
          y: 0,
        },
        visibility: PortVisibility.Visible,
        width: 15,
        height: 15,
        // Sets the shape of the port as X
        shape: "X",
      },
      {
        offset: {
          x: 0.5,
          y: 1,
        },
        visibility: PortVisibility.Visible,
        width: 25,
        height: 25,
        // Sets the shape of the port as Custom
        shape: "Custom",
        pathData:
          "M50 10 L60 40 L90 40 L65 60 L75 90 L50 70 L25 90 L35 60 L10 40 L40 40 Z",
      },
    ],
  },
];

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"
      ref="diagram"
      :width="width"
      :height="height"
      :nodes="nodes"
    ></ejs-diagram>
  </div>
</template>
<script>
import { DiagramComponent, PortVisibility } from "@syncfusion/ej2-vue-diagrams";

let nodes = [
  {
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    ports: [
      {
        offset: {
          x: 1,
          y: 0.5,
        },
        visibility: PortVisibility.Visible,
        width: 15,
        height: 15,
        // Sets the shape of the port as Circle
        shape: "Circle",
      },
      {
        offset: {
          x: 0,
          y: 0.5,
        },
        visibility: PortVisibility.Visible,
        width: 15,
        height: 15,
        // Sets the shape of the port as Square
        shape: "Square",
      },
      {
        offset: {
          x: 0.5,
          y: 0,
        },
        visibility: PortVisibility.Visible,
        width: 15,
        height: 15,
        // Sets the shape of the port as X
        shape: "X",
      },
      {
        offset: {
          x: 0.5,
          y: 1,
        },
        visibility: PortVisibility.Visible,
        width: 25,
        height: 25,
        // Sets the shape of the port as Custom
        shape: "Custom",
        pathData:
          "M50 10 L60 40 L90 40 L65 60 L75 90 L50 70 L25 90 L35 60 L10 40 L40 40 Z",
      },
    ],
  },
];

export default {
  name: "App",
  components: {
    "ejs-diagram": DiagramComponent,
  },
  data() {
    return {
      width: "100%",
      height: "350px",
      nodes: nodes,
    };
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Constraints

The constraints property allows to enable/disable certain behaviors of ports. For more information about port constraints, refer to Port Constraints.

The PortConstraints may have multiple behaviors like listed below:

Constraints Usage
None Disables all behaviors of Port.
Draw Enables or disables to draw a connector.
InConnect Enables or disables connecting to the incoming Connector.
OutConnect Enables or disables connecting the outgoing Connector.
ToolTip Enables or disables the Tooltip for the ports.
Drag Enables or disables dragging of port.
InheritTooltip Enables or disables the Tooltip for the ports.

See also