Using Connector Ports in React Diagram Component
Connector ports serve as connection points along connectors, enabling other connectors to attach at specific locations rather than just the endpoints. This guide covers creating connector ports, configuring their alignment and displacement, and establishing port-to-port connections.
Create Connector Port
Connector ports serve as connection points along connectors, enabling other connectors to attach at specific locations rather than just the endpoints. Creating connector ports follows the same pattern as node ports - define a port collection and assign it to the connector’s ports property.
The following code example shows how to create connector port.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, PortVisibility } from "@syncfusion/ej2-react-diagrams";
let connectors = [
{
id: 'connector1',
sourcePoint: { x: 100, y: 100 },
targetPoint: { x: 300, y: 100 },
ports: [
{
offset: 0.5,
visibility: PortVisibility.Visible,
},
],
},
{
id: 'connector2',
sourcePoint: { x: 100, y: 200 },
targetPoint: { x: 300, y: 220 },
type: 'Orthogonal',
ports: [
{
offset: 0.5,
visibility: PortVisibility.Visible,
},
],
},
{
id: 'connector3',
sourcePoint: { x: 100, y: 300 },
targetPoint: { x: 300, y: 340 },
type: 'Bezier',
ports: [
{
offset: 0.5,
visibility: PortVisibility.Visible,
},
],
},
];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
/>);
}
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 } from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [
{
id: 'connector1',
sourcePoint: { x: 100, y: 100 },
targetPoint: { x: 300, y: 100 },
ports: [
{
offset: 0.5,
visibility: PortVisibility.Visible,
},
],
},
{
id: 'connector2',
sourcePoint: { x: 100, y: 200 },
targetPoint: { x: 300, y: 220 },
type: 'Orthogonal',
ports: [
{
offset: 0.5,
visibility: PortVisibility.Visible,
},
],
},
{
id: 'connector3',
sourcePoint: { x: 100, y: 300 },
targetPoint: { x: 300, y: 340 },
type: 'Bezier',
ports: [
{
offset: 0.5,
visibility: PortVisibility.Visible,
},
],
},
];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Port Alignment
Control the position of ports along the connector using the alignment property. This property determines where the port appears relative to the connector’s path:
- Before: Positions the port at the source end of the connector.
- After: Positions the port at the target end of the connector.
- Center: Positions the port at the midpoint of the connector (default).
The following code example shows how to set different alignment values for connector ports:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, PortVisibility } from "@syncfusion/ej2-react-diagrams";
let connectors = [
{
id: 'connector1',
sourcePoint: { x: 100, y: 200 },
targetPoint: { x: 300, y: 220 },
type: 'Orthogonal',
ports: [
{
offset: 0.5,
visibility: PortVisibility.Visible,
alignment: 'Before',
},
],
},
{
id: 'connector2',
sourcePoint: { x: 320, y: 200 },
targetPoint: { x: 500, y: 220 },
type: 'Orthogonal',
ports: [
{
offset: 0.5,
visibility: PortVisibility.Visible,
alignment: 'Center',
},
],
},
{
id: 'connector3',
sourcePoint: { x: 520, y: 200 },
targetPoint: { x: 700, y: 220 },
type: 'Orthogonal',
ports: [
{
offset: 0.5,
visibility: PortVisibility.Visible,
alignment: 'After',
},
],
},
];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
/>);
}
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} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [
{
id: 'connector1',
sourcePoint: { x: 100, y: 200 },
targetPoint: { x: 300, y: 220 },
type: 'Orthogonal',
ports: [
{
offset: 0.5,
visibility: PortVisibility.Visible,
alignment: 'Before',
},
],
},
{
id: 'connector2',
sourcePoint: { x: 320, y: 200 },
targetPoint: { x: 500, y: 220 },
type: 'Orthogonal',
ports: [
{
offset: 0.5,
visibility: PortVisibility.Visible,
alignment: 'Center',
},
],
},
{
id: 'connector3',
sourcePoint: { x: 520, y: 200 },
targetPoint: { x: 700, y: 220 },
type: 'Orthogonal',
ports: [
{
offset: 0.5,
visibility: PortVisibility.Visible,
alignment: 'After',
},
],
},
];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Port Displacement
Fine-tune port positioning using the displacement property, which applies offset values to move ports from their aligned position. Displacement works by shifting the port by specified x and y coordinates relative to the alignment point.
The following code example demonstrates how to apply displacement to connector ports:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, PortVisibility } from "@syncfusion/ej2-react-diagrams";
let connectors = [
{
id: 'connector1',
sourcePoint: { x: 100, y: 200 },
targetPoint: { x: 100, y: 320 },
type: 'Orthogonal',
ports: [
{
offset: 0.5,
visibility: PortVisibility.Visible,
//Displacement
displacement: { x: 50, y: 0 },
alignment: 'Before',
},
],
},
{
id: 'connector2',
sourcePoint: { x: 300, y: 200 },
targetPoint: { x: 500, y: 220 },
type: 'Orthogonal',
ports: [
{
offset: 0.5,
visibility: PortVisibility.Visible,
//Displacement
displacement: { x: 0, y: 50 },
alignment: 'Before',
},
],
},
];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
/>);
}
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 } from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [
{
id: 'connector1',
sourcePoint: { x: 100, y: 200 },
targetPoint: { x: 100, y: 320 },
type: 'Orthogonal',
ports: [
{
offset: 0.5,
visibility: PortVisibility.Visible,
//Displacement
displacement: { x: 50, y: 0 },
alignment: 'Before',
},
],
},
{
id: 'connector2',
sourcePoint: { x: 300, y: 200 },
targetPoint: { x: 500, y: 220 },
type: 'Orthogonal',
ports: [
{
offset: 0.5,
visibility: PortVisibility.Visible,
//Displacement
displacement: { x: 0, y: 50 },
alignment: 'Before',
},
],
},
];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);NOTE
The displacement will work only if we set alignment as after or before.
Establish Port-to-Port Connections
Connect one connector to another connector’s port by specifying the port ID in the sourcePortID or targetPortID property. This creates precise connection points along connector paths instead of connecting to endpoints.
The following code example shows how to connect a connector to a connector port:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, PortVisibility,PortConstraints } from "@syncfusion/ej2-react-diagrams";
let nodes = [
{
id: 'node1',
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
ports: [
{
id: 'nodePort',
offset: { x: 1, y: 0.5 },
visibility: PortVisibility.Visible,
},
],
},
];
let connectors = [
{
id: 'connector1',
sourcePoint: { x: 100, y: 100 },
targetPoint: { x: 300, y: 120 },
type: 'Orthogonal',
ports: [
{
id: 'connectorPort',
offset: 0.5,
visibility: PortVisibility.Visible,
constraints: PortConstraints.Default | PortConstraints.Draw,
},
],
},
{
id: 'connector2',
sourceID: 'node1',
targetID: 'connector1',
sourcePortID: 'nodePort',
targetPortID: 'connectorPort',
type: 'Orthogonal',
ports: [
{
offset: 0.5,
visibility: PortVisibility.Visible,
},
],
},
];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={nodes}
connectors={connectors}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, PortVisibility,PortConstraints, ConnectorModel,NodeModel } from "@syncfusion/ej2-react-diagrams";
let nodes : NodeModel[] = [
{
id: 'node1',
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
ports: [
{
id: 'nodePort',
offset: { x: 1, y: 0.5 },
visibility: PortVisibility.Visible,
},
],
},
];
let connectors: ConnectorModel[] = [
{
id: 'connector1',
sourcePoint: { x: 100, y: 100 },
targetPoint: { x: 300, y: 120 },
type: 'Orthogonal',
ports: [
{
id: 'connectorPort',
offset: 0.5,
visibility: PortVisibility.Visible,
constraints: PortConstraints.Default | PortConstraints.Draw,
},
],
},
{
id: 'connector2',
sourceID: 'node1',
targetID: 'connector1',
sourcePortID: 'nodePort',
targetPortID: 'connectorPort',
type: 'Orthogonal',
ports: [
{
offset: 0.5,
visibility: PortVisibility.Visible,
},
],
},
];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={nodes}
connectors={connectors}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);