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.

import { Diagram, NodeModel, PortVisibility } from '@syncfusion/ej2-diagrams';
// A node is created and stored in nodes array.
let node: NodeModel = {
  // Position of the node
  offsetX: 250,
  offsetY: 250,
  // Size of the node
  width: 100,
  height: 100,
  style: {
    fill: '#6BA5D7',
    strokeColor: 'white',
  },
  // Initialize port collection
  ports: [
    {
      offset: {
        x: 1,
        y: 0.5,
      },
      visibility: PortVisibility.Visible,
      //Set the style for the port
      style: {
        fill: 'red',
        strokeWidth: 2,
        strokeColor: 'black',
        opacity: 0.7,
        strokeDashArray: '2 2',
      },
      width: 12,
      height: 12,
      // Sets the shape of the port as Circle
      shape: 'Circle',
    },
  ],
};
// initialize Diagram component
let diagram: Diagram = new Diagram({
  width: '100%',
  height: '600px',
  // Add node
  nodes: [node],
});
// render initialized Diagram
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

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.

import { Diagram, NodeModel, PortVisibility } from '@syncfusion/ej2-diagrams';
// A node is created and stored in nodes array.
let node: NodeModel = {
  // Position of the node
  offsetX: 250,
  offsetY: 250,
  // Size of the node
  width: 100,
  height: 100,
  style: {
    fill: '#6BA5D7',
    strokeColor: 'white',
  },
  // Initialize port collection
  ports: [
    {
      offset: {
        x: 1,
        y: 0.5,
      },
      visibility: PortVisibility.Visible,
      //Set the style for the port
      style: {
        fill: 'red',
        strokeWidth: 2,
        strokeColor: 'black',
        opacity: 0.7,
        strokeDashArray: '2 2',
      },
      width: 12,
      height: 12,
      // Sets the shape of the port as Circle
      shape: 'Circle',
    },
  ],
};
// initialize Diagram component
let diagram: Diagram = new Diagram({
  width: '100%',
  height: '600px',
  // Add node
  nodes: [node],
});
// render initialized Diagram
diagram.appendTo('#element');

(document.getElementById('changeAppearance') as HTMLInputElement).onclick =
  () => {
    let port = diagram.nodes[0].ports[0];
    port.style.fill = 'yellow';
    port.style.opacity = 1;
    port.width = 25;
    port.height = 25;
    diagram.dataBind();
  };
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <input type="button" value="change appearance" id="changeAppearance"/>
        <div id='element'></div>
    </div>
</body>

</html>

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.

import { Diagram, NodeModel, PortVisibility } from '@syncfusion/ej2-diagrams';
// A node is created and stored in nodes array.
let node: NodeModel = {
  // Position of the node
  offsetX: 250,
  offsetY: 250,
  // Size of the node
  width: 100,
  height: 100,
  style: {
    fill: '#6BA5D7',
    strokeColor: 'white',
  },
  // Initialize port collection
  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',
    },
  ],
};
// initialize Diagram component
let diagram: Diagram = new Diagram({
  width: '100%',
  height: '600px',
  // Add node
  nodes: [node],
});
// render initialized Diagram
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

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