Multiple Segments for Connectors
Connectors in the React Diagram component can be composed of multiple segments to create complex routing paths between nodes. Multiple segments allow you to define precise connection routes that navigate around obstacles or follow specific pathways in your diagram layout.
Understanding Connector Segments
A connector segment represents a portion of the connector’s path. By combining multiple segments, you can create connectors that change direction multiple times, forming L-shapes, Z-shapes, or more complex routing patterns. Each segment can have different properties and behaviors depending on the segment type used.
Create Multiple Segments
Multiple segments can be defined sequentially to form a complete connector path. To create a connector with multiple segments, define and add the segments to the segments collection.
The following example demonstrates how to create a connector with multiple segments that forms a custom routing path:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Diagram, DiagramComponent, ConnectorConstraints, ConnectorEditing } from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let connectors = [ {
id: 'connector1',
type: 'Orthogonal',
// Defines multile segemnts for the connectors
segments: [
{
type: 'Orthogonal',
direction: 'Bottom',
length: 150,
},
{
type: 'Orthogonal',
direction: 'Right',
length: 150,
},
{
type: 'Orthogonal',
direction: 'Top',
length: 100,
},
{
type: 'Orthogonal',
direction: 'Left',
length: 100,
},
],
sourcePoint: {
x: 300,
y: 100,
},
targetPoint: {
x: 350,
y: 150,
},
constraints:
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
},
{
id: 'connector2',
type: 'Bezier',
constraints:
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
segments: [
{ point: { x: 150, y: 150 }, type: 'Bezier' },
{ point: { x: 250, y: 250 }, type: 'Bezier' },
],
sourcePoint: { x: 100, y: 100 },
targetPoint: { x: 300, y: 300 },
},
{
id: 'connector3',
type: 'Straight',
constraints:
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
segments: [
{ point: { x: 500, y: 200 }, type: 'Straight' },
{ point: { x: 600, y: 300 }, type: 'Straight' },
],
sourcePoint: { x: 600, y: 100 },
targetPoint: { x: 800, y: 300 },
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2,
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7',
},
},
}];
function App() {
return (<DiagramComponent id="container" width={'900px'} height={'500px'} connectors={connectors}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,ConnectorModel,ConnectorEditing,ConnectorConstraints
} from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let connectors: ConnectorModel[] = [{
id: 'connector1',
type: 'Orthogonal',
// Defines multile segemnts for the connectors
segments: [
{
type: 'Orthogonal',
direction: 'Bottom',
length: 150,
},
{
type: 'Orthogonal',
direction: 'Right',
length: 150,
},
{
type: 'Orthogonal',
direction: 'Top',
length: 100,
},
{
type: 'Orthogonal',
direction: 'Left',
length: 100,
},
],
sourcePoint: {
x: 300,
y: 100,
},
targetPoint: {
x: 350,
y: 150,
},
constraints:
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
},
{
id: 'connector2',
type: 'Bezier',
constraints:
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
segments: [
{ point: { x: 150, y: 150 }, type: 'Bezier' },
{ point: { x: 250, y: 250 }, type: 'Bezier' },
],
sourcePoint: { x: 100, y: 100 },
targetPoint: { x: 300, y: 300 },
},
{
id: 'connector3',
type: 'Straight',
constraints:
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
segments: [
{ point: { x: 500, y: 200 }, type: 'Straight' },
{ point: { x: 600, y: 300 }, type: 'Straight' },
],
sourcePoint: { x: 600, y: 100 },
targetPoint: { x: 800, y: 300 },
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2,
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7',
},
},
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Undo/Redo support for connector segments
The Diagram control provides comprehensive undo and redo functionality for all connector segment operations. This includes reversible actions such as dragging, resizing, and rotating source or target nodes, as well as modifying segment points and endpoints.
Key undo/redo capabilities include:
- Modifying and adjusting segment points.
- Changing connector endpoints between nodes or ports.
- Performing node operations that affect connected segments.
- Adding, removing, or reordering segments.
This functionality ensures consistent editing behavior across all connector types and interactions, enabling users to experiment with complex routing configurations while retaining the ability to revert changes.
The following example demonstrates undo and redo functionality for connector segments:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Diagram, DiagramComponent, ConnectorConstraints, ConnectorEditing, UndoRedo } from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing, UndoRedo);
let diagramInstance;
let nodes = [
{
id: 'sourcenode',
width: 150,
height: 50,
offsetX: 350,
offsetY: 50,
annotations: [
{
content: 'Node1',
},
],
style: {
fill: '#6BA5D7',
strokeColor: 'white',
},
},
{
id: 'targetnode',
width: 150,
height: 50,
offsetX: 200,
offsetY: 250,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
},
annotations: [
{
content: 'Node2',
},
],
},
];
let connectors = [{
id: 'connector1',
sourceID: 'sourcenode',
targetID: 'targetnode',
type: 'Orthogonal',
segments: [
{
type: 'Orthogonal',
direction: 'Left',
length: 100,
},
{
type: 'Orthogonal',
direction: 'Bottom',
length: 100
},
{
type: 'Orthogonal',
direction: 'Right',
length: 100
},
{
type: 'Orthogonal',
direction: 'Bottom',
length: 50
}
],
constraints: ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
}];
function App() {
const undo = () => {
diagramInstance.undo();
}
const redo = () => {
diagramInstance.redo()
}
return (
<div>
<button onClick={undo}>Undo</button>
<button onClick={redo}>Redo</button>
<DiagramComponent id="container" width={'100%'} connectors={connectors} nodes={nodes} height={'600px'}
ref={(diagram) => (diagramInstance = diagram)}
></DiagramComponent>
</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, ConnectorConstraints, ConnectorEditing, NodeModel, ConnectorModel, UndoRedo } from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing , UndoRedo);
let diagramInstance: DiagramComponent;
let nodes: NodeModel[] = [
{
id: 'sourcenode',
width: 150,
height: 50,
offsetX: 350,
offsetY: 50,
annotations: [
{
content: 'Node1',
},
],
style: {
fill: '#6BA5D7',
strokeColor: 'white',
},
},
{
id: 'targetnode',
width: 150,
height: 50,
offsetX: 200,
offsetY: 250,
style: {
fill: '#6BA5D7',
strokeColor: 'white',
},
annotations: [
{
content: 'Node2',
},
],
},
];
let connectors: ConnectorModel[] = [{
id: 'connector1',
sourceID: 'sourcenode',
targetID: 'targetnode',
type: 'Orthogonal',
segments: [
{
type: 'Orthogonal',
direction: 'Left',
length: 100,
},
{
type: 'Orthogonal',
direction: 'Bottom',
length: 100
},
{
type: 'Orthogonal',
direction: 'Right',
length: 100
},
{
type: 'Orthogonal',
direction: 'Bottom',
length: 50
}
],
constraints: ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
}];
function App() {
const undo = () => {
diagramInstance.undo();
}
const redo = () => {
diagramInstance.redo();
}
return (
<div>
<button onClick={undo}>Undo</button>
<button onClick={redo}>Redo</button>
<DiagramComponent id="container" width={'100%'} connectors={connectors} nodes={nodes} height={'600px'}
ref={(diagram) => (diagramInstance = diagram)}
></DiagramComponent>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);