Ports in React Diagram component

25 Mar 202524 minutes to read

Port is a special connection point in a Node where you can glue the connectors. When you glue a connector to a node or port, they remain connected even if one of the nodes is moved.

Port

Types of connections

There are two main types of connections, node to node and port to port. The difference between these two connections is whether or not a connector remains glued to a specific connection point when you move the attached node or connector.

Node to node connection

A node to node connection is one where the connector will move around the node as you move the node. Diagram will always ensure the connector in the shortest, most direct line possible. You can create a node to node connection by selecting the entire node (rather than the port) and connect it to another shape (rather than to a port).

When a connector is connected between two nodes, its end points are automatically docked to the node’s nearest boundary as shown in the following Gif.

Node to Node

Port to port connection

Ports act as the connection points of the node and allows creating connections with only those specific points as shown in the following image.

Port to port

Create port

To add a connection port, define the port object and add it to node’s ports collection. The offset property of the port accepts an object of fractions and is used to determine the position of ports. The following code explains how to add ports when initializing the node.

import * as React from "react";
import * as ReactDOM from "react-dom";
import {DiagramComponent, PortVisibility} from "@syncfusion/ej2-react-diagrams";

let node = [{
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    // Initialize port collection
    ports: [{
        // Sets the position for the port
        offset: {
            x: 0.5,
            y: 0.5
        },
        visibility: PortVisibility.Visible
    }]
}];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
      // render initialized Diagram
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {DiagramComponent, PortVisibility, NodeModel} from "@syncfusion/ej2-react-diagrams";

let node: NodeModel[] = [{
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    // Initialize port collection
    ports: [{
        // Sets the position for the port
        offset: {
            x: 0.5,
            y: 0.5
        },
        visibility: PortVisibility.Visible
    }]
}];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
      // render initialized Diagram
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

NOTE

When setting a Port’s ID, ensure that it does not contain white spaces, does not start with numbers or special characters, and does not include special characters like underscores (_) or spaces.

Add ports at runtime

You can add ports to the nodes at runtime by using the diagram method addPorts. The following code illustrates how to add ports to node at runtime.

The port’s ID property is used to define the unique ID for the port and its further used to find the port at runtime.
If ID is not set, then default ID is automatically set.

import * as React from "react";
import * as ReactDOM from "react-dom";
import {DiagramComponent,PortVisibility} from "@syncfusion/ej2-react-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

let diagramInstance;

let node = [{
  offsetX: 250,
  offsetY: 250,
  width: 100,
  height: 100,
}];

let port = [{
  id: 'port1',
  offset: {
    x: 0,
    y: 0.5
  },
  visibility: PortVisibility.Visible
}, {
  id: 'port2',
  offset: {
    x: 1,
    y: 0.5
  },
  visibility: PortVisibility.Visible
},
{
  id: 'port3',
  offset: {
    x: 0.5,
    y: 0
  },
  visibility: PortVisibility.Visible
},
{
  id: 'port4',
  offset: {
    x: 0.5,
    y: 1
  },
  visibility: PortVisibility.Visible
}];

// Method to add ports through run time
const addport = () => {
  // Parameters:
  // - node: The node to which the port will be added.
  // - port: The port collection to be added to the node.
  diagramInstance.addPorts(diagramInstance.nodes[0], port);
}

// initialize Diagram component
function App() {
  return (
    <div>
      <ButtonComponent content="Add Port" onClick={addport} />
      <DiagramComponent
        id="container"
        ref={(diagram) => (diagramInstance = diagram)}
        width={'100%'}
        height={'600px'}
        nodes={node}
      // render initialized Diagram
      />
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {Diagram, DiagramComponent,PortVisibility,   NodeModel,PointPortModel,} from "@syncfusion/ej2-react-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

let diagramInstance:DiagramComponent;

let node: NodeModel[] = [{
  offsetX: 250,
  offsetY: 250,
  width: 100,
  height: 100,
}];

let port: PointPortModel[] = [{
  id: 'port1',
  offset: {
    x: 0,
    y: 0.5
  },
  visibility: PortVisibility.Visible
}, {
  id: 'port2',
  offset: {
    x: 1,
    y: 0.5
  },
  visibility: PortVisibility.Visible
},
{
  id: 'port3',
  offset: {
    x: 0.5,
    y: 0
  },
  visibility: PortVisibility.Visible
},
{
  id: 'port4',
  offset: {
    x: 0.5,
    y: 1
  },
  visibility: PortVisibility.Visible
}];

// Method to add ports through run time
const addport = () => {
  // Parameters:
  // - node: The node to which the port will be added.
  // - port: The port collection to be added to the node.
  diagramInstance.addPorts(diagramInstance.nodes[0], port);
}

// initialize Diagram component
function App() {
  return (
    <div>
      <ButtonComponent content="Add Port" onClick={addport} />
      <DiagramComponent
        id="container"
        ref={(diagram) => (diagramInstance = diagram)}
        width={'100%'}
        height={'600px'}
        nodes={node}
      // render initialized Diagram
      />
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

Remove ports at runtime

You can remove ports at runtime by using diagram method removePorts.Refer to the following example which shows how to remove ports at runtime.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, PortVisibility } from "@syncfusion/ej2-react-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

let diagramInstance;

let node = [{
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    // Initialize port collection
    ports: [{
        id: 'port1',
        offset: {
            x: 0,
            y: 0.5
        },
        visibility: PortVisibility.Visible
    },
    {
        id: 'port2',
        offset: {
            x: 1,
            y: 0.5
        },
        visibility: PortVisibility.Visible
    },
    {
        id: 'port3',
        offset: {
            x: 0.5,
            y: 0
        },
        visibility: PortVisibility.Visible
    },
    {
        id: 'port4',
        offset: {
            x: 0.5,
            y: 1
        },
        visibility: PortVisibility.Visible
    }
    ]
}];
// initialize Diagram component
let ports = [{
    id: 'port1',
}, {
    id: 'port2',
}, {
    id: 'port3',
}, {
    id: 'port4',
}];

// Method to add ports through run time
const removePort = () => {
    // Parameters:
    // - node: The node from which the ports will be removed.
    // - ports: The collection of ports to be removed from the node.
    diagramInstance.removePorts(diagramInstance.nodes[0], ports);
}

function App() {
    return (
        <div>
            <ButtonComponent content="Remove Port" onClick={removePort} />
            <DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} />
        </div>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, PortVisibility,NodeModel } from "@syncfusion/ej2-react-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

let diagramInstance: DiagramComponent;

let node: NodeModel[] = [{
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    // Initialize port collection
    ports: [{
        id: 'port1',
        offset: {
            x: 0,
            y: 0.5
        },
        visibility: PortVisibility.Visible
    },
    {
        id: 'port2',
        offset: {
            x: 1,
            y: 0.5
        },
        visibility: PortVisibility.Visible
    },
    {
        id: 'port3',
        offset: {
            x: 0.5,
            y: 0
        },
        visibility: PortVisibility.Visible
    },
    {
        id: 'port4',
        offset: {
            x: 0.5,
            y: 1
        },
        visibility: PortVisibility.Visible
    }
    ]
}];

// initialize Diagram component
let ports = [{
    id: 'port1',
}, {
    id: 'port2',
}, {
    id: 'port3',
}, {
    id: 'port4',
}];

// Method to add ports through run time
const removePort = () => {
    // Parameters:
    // - node: The node from which the ports will be removed.
    // - ports: The collection of ports to be removed from the node.
    diagramInstance.removePorts(diagramInstance.nodes[0], ports);
}

function App() {
    return (
        <div>
            <ButtonComponent content="Remove Port" onClick={removePort} />
            <DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} />
        </div>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

Update port at runtime

You can change any port properties at runtime and update it through the diagram method [dataBind].

The following code example illustrates how to change the port offset at runtime.

import * as React from "react";
import * as ReactDOM from "react-dom";
import {DiagramComponent,PortVisibility} from "@syncfusion/ej2-react-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

let diagramInstance;


let node = [{
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    ports: [{
        offset: {
            x: 0.5,
            y: 0.5
        },
        visibility: PortVisibility.Visible
    }]
}];
 
// Method to update ports at run time
const updatePort = () => {
    diagramInstance.nodes[0].ports[0].offset = {
        x: 1,
        y: 1
    };
    diagramInstance.dataBind();
  }

// initialize Diagram component
function App() {
  return (
    <div>
    <ButtonComponent content="update Port" onClick={updatePort} />
    <DiagramComponent
      id="container"
      ref={(diagram) => (diagramInstance = diagram)}
      width={'100%'}
      height={'600px'}
      nodes={node}
    />
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {DiagramComponent,PortVisibility,NodeModel} from "@syncfusion/ej2-react-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

let diagramInstance: DiagramComponent;


let node: NodeModel[] = [{
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    ports: [{
        offset: {
            x: 0.5,
            y: 0.5
        },
        visibility: PortVisibility.Visible
    }]
}];
 
// Method to update ports at run time
const updatePort = () => {
    diagramInstance.nodes[0].ports[0].offset = {
        x: 1,
        y: 1
    };
    diagramInstance.dataBind();
  }

// initialize Diagram component
function App() {
  return (
    <div>
    <ButtonComponent content="update Port" onClick={updatePort} />
    <DiagramComponent
      id="container"
      ref={(diagram) => (diagramInstance = diagram)}
      width={'100%'}
      height={'600px'}
      nodes={node}
    />
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

Specify connection direction to port

The connectionDirection property of a port allows users to specify the direction in which a connector should establish a connection. This can be either to the port (incoming) or from the port (outgoing).

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, PortVisibility,PortConnectionDirection } from "@syncfusion/ej2-react-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

let diagramInstance;

var nodes = [
    {
      id: 'node1',
      offsetX: 450,
      offsetY: 200,
      width: 100,
      height: 100,
      ports: [
        {
          id: 'port1',
          offset: { x: 0, y: 0 },
          visibility: PortVisibility.Visible,
        },
      ],
    },
    {
      id: 'node2',
      offsetX: 270,
      offsetY: 300,
      width: 100,
      height: 100,
      ports: [
        {
          id: 'port3',
          offset: { x: 0.5, y: 0.5 },
          visibility: PortVisibility.Visible,
          //Sets the connection direction as Left
          connectionDirection: 'Left',
        },
      ],
    },
  ];
  //initialize the connector to connect the nodes
let connectors = [
    {
        id: 'connector1',
        type: 'Orthogonal',
        sourceID: 'node2',
        targetID: 'node1',
        sourcePortID: 'port3',
        targetPortID: 'port1',
}];

// Method to add ports through run time
const changeConnectionDirection = () => {
    diagramInstance.nodes[1].ports[0].connectionDirection='Top'
  }

function App() {
    return (
        <div>
          <ButtonComponent content="Change Connection Direction" onClick={changeConnectionDirection} />
          <DiagramComponent
            id="container"
            ref={(diagram) => (diagramInstance = diagram)}
            width={'100%'}
            height={'600px'}
            nodes={nodes}
            connectors={connectors}
          // render initialized Diagram
          />
        </div>
      );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, PortVisibility,NodeModel,ConnectorModel } from "@syncfusion/ej2-react-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

let diagramInstance: DiagramComponent;

var nodes:NodeModel[] = [
    {
      id: 'node1',
      offsetX: 450,
      offsetY: 200,
      width: 100,
      height: 100,
      ports: [
        {
          id: 'port1',
          offset: { x: 0, y: 0 },
          visibility: PortVisibility.Visible,
        },
      ],
    },
    {
      id: 'node2',
      offsetX: 270,
      offsetY: 300,
      width: 100,
      height: 100,
      ports: [
        {
          id: 'port3',
          offset: { x: 0.5, y: 0.5 },
          visibility: PortVisibility.Visible,
          //Sets the connection direction as Left
          connectionDirection: 'Left',
        },
      ],
    },
  ];

let connectors: ConnectorModel[] = [
    {
        id: 'connector1',
        type: 'Orthogonal',
        sourceID: 'node2',
        targetID: 'node1',
        sourcePortID: 'port3',
        targetPortID: 'port1',
}];

// Method to add ports through run time
const changeConnectionDirection = () => {
    diagramInstance.nodes[1].ports[0].connectionDirection='Top'
  }

function App() {
    return (
        <div>
          <ButtonComponent content="Change Connection Direction" onClick={changeConnectionDirection} />
          <DiagramComponent
            id="container"
            ref={(diagram) => (diagramInstance = diagram)}
            width={'100%'}
            height={'600px'}
            nodes={nodes}
            connectors={connectors}
          // render initialized Diagram
          />
        </div>
      );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

connectionDirection

InEdges and outEdges of ports

The inEdges is used to get the incoming connectors of the port that are connected to the port. outEdgesis used to get the outgoing connectors of the port that are connected to the port.

The inEdges and outEdges of the port are read-only and cannot be customized.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,PortVisibility} from "@syncfusion/ej2-react-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

let diagramInstance;

let nodes = [
  {
    id: 'node1',
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    ports: [
      {
        id: 'port1',
        offset: { x: 0, y: 0.5 },
        visibility: PortVisibility.Visible,
      },
      {
        id: 'port2',
        offset: { x: 0.5, y: 0 },
        visibility: PortVisibility.Visible,
      },
    ],
  },
  {
    id: 'node2',
    offsetX: 250,
    offsetY: 400,
    width: 100,
    height: 100,
    ports: [
      {
        id: 'port3',
        offset: { x: 0, y: 0.5 },
        visibility: PortVisibility.Visible,
      },
      {
        id: 'port4',
        offset: { x: 0.5, y: 1 },
        visibility: PortVisibility.Visible,
      },
    ],
  },
];

let connectors = [
  {
    id: 'connector1',
    sourceID: 'node1',
    targetID: 'node2',
    type: 'Orthogonal',
    sourcePortID: 'port1',
    targetPortID: 'port3',
    annotations: [{ content: 'connector1' }],
  },
  {
    id: 'connector2',
    sourceID: 'node2',
    targetID: 'node1',
    type: 'Orthogonal',
    sourcePortID: 'port4',
    targetPortID: 'port2',
    annotations: [{ content: 'connector2' }],
  },
];


// Method for inEdges
const inEdges = () => {
  let port1 = diagramInstance.nodes[0].ports[1];
  console.log(port1.inEdges[0]);
}

// Method for outEdges
const outEdges = () => {
  let port1 = diagramInstance.nodes[0].ports[0];
  console.log(port1.outEdges[0]);
}

// initialize Diagram component
function App() {
  return (
    <div>
      <ButtonComponent content="In Edges" onClick={inEdges} />
      <ButtonComponent content="Out Edges" onClick={outEdges} />
      <DiagramComponent
        id="container"
        ref={(diagram) => (diagramInstance = diagram)}
        width={'100%'}
        height={'600px'}
        nodes={nodes}
        connectors={connectors}
      />
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,PortVisibility, ConnectorModel, NodeModel} from "@syncfusion/ej2-react-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

let diagramInstance: DiagramComponent;

let nodes: NodeModel[] = [
  {
    id: 'node1',
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    ports: [
      {
        id: 'port1',
        offset: { x: 0, y: 0.5 },
        visibility: PortVisibility.Visible,
      },
      {
        id: 'port2',
        offset: { x: 0.5, y: 0 },
        visibility: PortVisibility.Visible,
      },
    ],
  },
  {
    id: 'node2',
    offsetX: 250,
    offsetY: 400,
    width: 100,
    height: 100,
    ports: [
      {
        id: 'port3',
        offset: { x: 0, y: 0.5 },
        visibility: PortVisibility.Visible,
      },
      {
        id: 'port4',
        offset: { x: 0.5, y: 1 },
        visibility: PortVisibility.Visible,
      },
    ],
  },
];

let connectors: ConnectorModel[]= [
  {
    id: 'connector1',
    sourceID: 'node1',
    targetID: 'node2',
    type: 'Orthogonal',
    sourcePortID: 'port1',
    targetPortID: 'port3',
    annotations: [{ content: 'connector1' }],
  },
  {
    id: 'connector2',
    sourceID: 'node2',
    targetID: 'node1',
    type: 'Orthogonal',
    sourcePortID: 'port4',
    targetPortID: 'port2',
    annotations: [{ content: 'connector2' }],
  },
];


// Method for inEdges
const inEdges = () => {
  let port1 = diagramInstance.nodes[0].ports[1];
  console.log(port1.inEdges[0]);
}

// Method for outEdges
const outEdges = () => {
  let port1 = diagramInstance.nodes[0].ports[0];
  console.log(port1.outEdges[0]);
}

// initialize Diagram component
function App() {
  return (
    <div>
      <ButtonComponent content="In Edges" onClick={inEdges} />
      <ButtonComponent content="Out Edges" onClick={outEdges} />
      <DiagramComponent
        id="container"
        ref={(diagram) => (diagramInstance = diagram)}
        width={'100%'}
        height={'600px'}
        nodes={nodes}
        connectors={connectors}
      />
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

The following code example shows how to get inEdges and outEdges of port.

Additional information to port

The addInfo property of the port allows you to maintain additional information to the port.

The following code example shows how to set addInfo to the port.

let port:PointPortModel = {id:'port1',offset:{x:0.5,y:0},addInfo:{position:'TopCenter',id:'port1'}};