Positioning node’s port

4 Dec 202418 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) Port offset (0,0)
(0,0.5) Port offset (0,0.5)
(0,1) Port offset (0,1)
(0.5,0) Port offset (0.5,0)
(0.5,0.5) Port offset (0.5,0.5)
(0.5,1) Port offset (0.5,1)
(1,0) Port offset (1,0)
(1,0.5) Port offset (1,0.5)
(1,1) Port offset (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.

var nodes = [
  {
    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: ej.diagrams.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: ej.diagrams.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: ej.diagrams.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: ej.diagrams.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: ej.diagrams.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: ej.diagrams.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: ej.diagrams.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: ej.diagrams.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: ej.diagrams.PortVisibility.Visible,
        horizontalAlignment: 'Center',
        verticalAlignment: 'Center',
      },
    ],
  },
];

// initialize Diagram component

var diagram = new ej.diagrams.Diagram(
  {
    width: '100%',
    height: '600px',
    nodes: nodes,
  },
  '#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">
    
    <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="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</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 Left Top Position
Center Top Center Top Position
Right Top Right Top Position
Left Center Left Center Position
Center Center Center Center Position
Right Center Right Center Position
Left Bottom Left Bottom Position
Center Bottom Center Bottom Position
Right Bottom Right Bottom Position

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.

var nodes = [
  {
    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: ej.diagrams.PortVisibility.Visible,
        horizontalAlignment: 'Left',
        verticalAlignment: 'Top',
        margin: { left: 50 },
      },
    ],
  },
];

// initialize Diagram component

var diagram = new ej.diagrams.Diagram(
  {
    width: '100%',
    height: '600px',
    nodes: nodes,
  },
  '#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">
    
    <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="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

See also