Positioning node’s port

4 Dec 202420 minutes to read

Diagram allows you to customize the position of the port efficiently. Port can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings.

Port offset

The offset property is used to align the ports based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height.

The following table shows the position of port within the shape.

Offset values	Output
(0,0)
(0,0.5)
(0,1)
(0.5,0)
(0.5,0.5)
(0.5,1)
(1,0)
(1,0.5)
(1,1)

Horizontal and vertical alignment

The horizontalAlignment property of the port is used to set how the port is horizontally aligned at the port position. The verticalAlignment property is used to set how the port is vertically aligned at the port position.

index.ts
index.html
import {
    ConnectorModel,
    Diagram,
    NodeModel,
    PortConstraints,
    PortVisibility,
  } from '@syncfusion/ej2-diagrams';
  // A node is created and stored in nodes array.
  
  let nodes: NodeModel[] = [
    {
      id: 'node1',
      offsetX: 100,
      offsetY: 100,
      // Size of the node
      width: 100,
      height: 100,
      style: { fill: '#6BA5D7', strokeColor: 'white' },
      annotations: [{ content: 'Left Top' }],
      ports: [
        {
          id: 'nodePort',
          offset: { x: 0, y: 0 },
          visibility: PortVisibility.Visible,
          horizontalAlignment: 'Left',
          verticalAlignment: 'Top',
        },
      ],
    },
    {
      id: 'node2',
      offsetX: 250,
      offsetY: 100,
      // Size of the node
      width: 100,
      height: 100,
      annotations: [{ content: 'Left Bottom' }],
      style: { fill: '#6BA5D7', strokeColor: 'white' },
      ports: [
        {
          id: 'nodePort',
          offset: { x: 0, y: 0 },
          visibility: PortVisibility.Visible,
          horizontalAlignment: 'Left',
          verticalAlignment: 'Bottom',
        },
      ],
    },
    {
      id: 'node3',
      offsetX: 400,
      offsetY: 100,
      // Size of the node
      width: 100,
      height: 100,
      annotations: [{ content: 'Left Center' }],
      style: { fill: '#6BA5D7', strokeColor: 'white' },
      ports: [
        {
          id: 'nodePort',
          offset: { x: 0, y: 0 },
          visibility: PortVisibility.Visible,
          horizontalAlignment: 'Left',
          verticalAlignment: 'Center',
        },
      ],
    },
    {
      id: 'node4',
      offsetX: 100,
      offsetY: 250,
      // Size of the node
      width: 100,
      height: 100,
      annotations: [{ content: 'Right Top' }],
      style: { fill: '#6BA5D7', strokeColor: 'white' },
      ports: [
        {
          id: 'nodePort',
          offset: { x: 0, y: 0 },
          visibility: PortVisibility.Visible,
          horizontalAlignment: 'Right',
          verticalAlignment: 'Top',
        },
      ],
    },
    {
      id: 'node5',
      offsetX: 250,
      offsetY: 250,
      // Size of the node
      width: 100,
      height: 100,
      annotations: [{ content: 'Right Bottom' }],
      style: { fill: '#6BA5D7', strokeColor: 'white' },
      ports: [
        {
          id: 'nodePort',
          offset: { x: 0, y: 0 },
          visibility: PortVisibility.Visible,
          horizontalAlignment: 'Right',
          verticalAlignment: 'Bottom',
        },
      ],
    },
    {
      id: 'node6',
      offsetX: 400,
      offsetY: 250,
      // Size of the node
      width: 100,
      height: 100,
      annotations: [{ content: 'Right Center' }],
      style: { fill: '#6BA5D7', strokeColor: 'white' },
      ports: [
        {
          id: 'nodePort',
          offset: { x: 0, y: 0 },
          visibility: PortVisibility.Visible,
          horizontalAlignment: 'Right',
          verticalAlignment: 'Center',
        },
      ],
    },
    {
      id: 'node7',
      offsetX: 100,
      offsetY: 400,
      // Size of the node
      width: 100,
      height: 100,
      annotations: [{ content: 'Center Top' }],
      style: { fill: '#6BA5D7', strokeColor: 'white' },
      ports: [
        {
          id: 'nodePort',
          offset: { x: 0, y: 0 },
          visibility: PortVisibility.Visible,
          horizontalAlignment: 'Center',
          verticalAlignment: 'Top',
        },
      ],
    },
    {
      id: 'node8',
      offsetX: 250,
      offsetY: 400,
      // Size of the node
      width: 100,
      height: 100,
      annotations: [{ content: 'Center Bottom' }],
      style: { fill: '#6BA5D7', strokeColor: 'white' },
      ports: [
        {
          id: 'nodePort',
          offset: { x: 0, y: 0 },
          visibility: PortVisibility.Visible,
          horizontalAlignment: 'Center',
          verticalAlignment: 'Bottom',
        },
      ],
    },
    {
      id: 'node9',
      offsetX: 400,
      offsetY: 400,
      // Size of the node
      width: 100,
      height: 100,
      annotations: [{ content: 'Center Center' }],
      style: { fill: '#6BA5D7', strokeColor: 'white' },
      ports: [
        {
          id: 'nodePort',
          offset: { x: 0, y: 0 },
          visibility: PortVisibility.Visible,
          horizontalAlignment: 'Center',
          verticalAlignment: 'Center',
        },
      ],
    },
  ];
  
  // initialize diagram component
  let diagram: Diagram = new Diagram({
    width: '100%',
    height: '600px',
    nodes: nodes,
  });
  // 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>

The following table shows all the possible alignments visually with offset (0, 0).

Horizontal Alignment	Vertical Alignment	Output with Offset(0,0)
Left	Top
Center	Top
Right	Top
Left	Center
Center	Center
Right	Center
Left	Bottom
Center	Bottom
Right	Bottom

Margin for port

Margin is an absolute value used to add some blank space to any one of its four sides. The ports can be displaced with the margin property. The following code example explains how to align a port based on its offset and margin values.

index.ts
index.html
import {
    ConnectorModel,
    Diagram,
    NodeModel,
    PortConstraints,
    PortVisibility,
  } from '@syncfusion/ej2-diagrams';
  // A node is created and stored in nodes array.
  
  let nodes: NodeModel[] = [
    {
      id: 'node1',
      offsetX: 100,
      offsetY: 100,
      // Size of the node
      width: 100,
      height: 100,
      style: { fill: '#6BA5D7', strokeColor: 'white' },
      annotations: [{ content: 'margin:{left:50}' }],
      ports: [
        {
          id: 'nodePort',
          offset: { x: 1, y: 0 },
          visibility: PortVisibility.Visible,
          horizontalAlignment: 'Left',
          verticalAlignment: 'Top',
          margin: { left: 50 },
        },
      ],
    },
  ];
  
  // initialize diagram component
  let diagram: Diagram = new Diagram({
    width: '100%',
    height: '600px',
    nodes: nodes,
  });
  // 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>

Positioning node’s port

Port offset

Horizontal and vertical alignment

Margin for port

See also