Connectors in React Diagram component
19 Sep 202424 minutes to read
Connectors are objects used to create link between two points, nodes or ports to represent the relationships between them.
Create connector
Connector can be created by defining the source and target point of the connector. The path to be drawn can be defined with a collection of segments. To explore the properties of a connector, refer to Connector Properties.
Add connectors through connectors collection
The sourcePoint and targetPoint properties of connector allow you to define the end points of a connector.
The following code example illustrates how to add a connector through connector collection.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let connectors = [{
// Name of the connector
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
// Sets source and target points
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}];
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 {
Diagram,
DiagramComponent,
ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
// Name of the connector
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
// Sets source and target points
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Add connector at runtime
Connectors can be added at runtime by using public method, diagram.add and can be removed at runtime by using public method, diagram.remove.
The following code example illustrates how to add connector at runtime.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let diagramInstance;
let connectors = [{
id: 'connector1',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}];
function App() {
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} created={() => {
// Adds to the Diagram
diagramInstance.add(connectors[0]);
// Remove from the diagram
diagramInstance.remove(connectors[0]);
}}/>);
}
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
} from "@syncfusion/ej2-react-diagrams";
let diagramInstance: DiagramComponent;
let connectors: ConnectorModel = [{
id: 'connector1',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}];
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
created={() => {
// Adds to the Diagram
diagramInstance.add(connectors[0]);
// Remove from the diagram
diagramInstance.remove(connectors[0]);
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Add collection of connectors at runtime
- The collection of connectors can be dynamically added using
addElementsmethod.Each time an element is added to the diagram canvas, thecollectionChangeevent will be triggered.
The following code illustrates how to add connectors collection at runtime.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let diagramInstance;
//initialize connector collection
let collectorCollection = [
{ id: 'connector1', sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 150, y: 150 } },
{id: 'connector2', type: 'Orthogonal', sourcePoint: { x: 170, y: 170 }, targetPoint: { x: 200, y: 200 }},
{ id: 'connector3', type: 'Bezier', sourcePoint: { x: 320, y: 320 }, targetPoint: { x: 400, y: 400 } }
];
function App() {
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'1500px'} height={'600px'} created={() => {
//Add collection of connectors
diagramInstance.addElements(collectorCollection);
}}/>);
}
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} from "@syncfusion/ej2-react-diagrams";
let diagramInstance: DiagramComponent;
//initialize connector collection
var collectorCollection:ConnectorModel = [
{ id: 'connector1', sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 150, y: 150 } },
{id: 'connector2', type: 'Orthogonal', sourcePoint: { x: 170, y: 170 }, targetPoint: { x: 200, y: 200 }},
{ id: 'connector3', type: 'Bezier', sourcePoint: { x: 320, y: 320 }, targetPoint: { x: 400, y: 400 } }
];
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'1500px'}
height={'600px'}
created={() => {
//Add collection of connectors
diagramInstance.addElements(collectorCollection);
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Connectors from palette
Connectors can be predefined and added to the symbol palette. You can drop those connectors into the diagram, when required.
For more information about adding connectors from symbol palette, refer to Symbol Palette.
Draw connectors
Connectors can be interactively drawn by clicking and dragging on the diagram surface by using drawingObject.
For more information about drawing connectors, refer to Draw Connectors.
Update connector at runtime
Various connector properties such as sourcePoint, targetPoint, style, sourcePortID, targetPortID, etc., can be updated at the runtime.
The following code example illustrates how to update a connector’s source point, target point, styles properties at runtime.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let connectors = [{
id: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}];
let diagramInstance;
function App() {
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} connectors={connectors} created={() => {
// Update the connector properties at the run time
diagramInstance.connectors[0].style.strokeColor = '#6BA5D7';
diagramInstance.connectors[0].style.fill = '#6BA5D7';
diagramInstance.connectors[0].style.strokeWidth = 2;
diagramInstance.connectors[0].targetDecorator.style.fill = '#6BA5D7';
diagramInstance.connectors[0].targetDecorator.style.strokeColor =
'#6BA5D7';
diagramInstance.connectors[0].sourcePoint.x = 150;
diagramInstance.connectors[0].targetPoint.x = 150;
diagramInstance.dataBind();
}}/>);
}
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
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
id: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}];
let diagramInstance: DiagramComponent;
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
connectors={connectors}
created={() => {
// Update the connector properties at the run time
diagramInstance.connectors[0].style.strokeColor = '#6BA5D7';
diagramInstance.connectors[0].style.fill = '#6BA5D7';
diagramInstance.connectors[0].style.strokeWidth = 2;
diagramInstance.connectors[0].targetDecorator.style.fill = '#6BA5D7';
diagramInstance.connectors[0].targetDecorator.style.strokeColor =
'#6BA5D7';
diagramInstance.connectors[0].sourcePoint.x = 150;
diagramInstance.connectors[0].targetPoint.x = 150;
diagramInstance.dataBind();
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Connect nodes
- The
sourceIDandtargetIDproperties allow to define the nodes to be connected. -
The
connectorSpacingproperty allows you to define the distance between the source node and the connector. It is the minimum distance the connector will re-rout or the new segment will create. - The following code example illustrates how to connect two nodes.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, } from "@syncfusion/ej2-react-diagrams";
let nodes = [{
id: 'Start',
width: 140,
height: 50,
offsetX: 100,
offsetY: 100,
annotations: [{
id: 'label1',
content: 'Start'
}],
shape: {
type: 'Flow',
shape: 'Terminator'
}
},
{
id: 'Init',
width: 140,
height: 50,
offsetX: 300,
offsetY: 300,
shape: {
type: 'Flow',
shape: 'Process'
},
annotations: [{
content: 'var i = 0;'
}]
}
];
let connectors = [{
// Name of the connector
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
// ID of the source and target nodes
sourceID: "Start",
targetID: "Init",
connectorSpacing: 7,
type: 'Orthogonal'
}];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={nodes} connectors={connectors}
// Defines the default properties for the node
getNodeDefaults={(node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel,
ConnectorModel,
} from "@syncfusion/ej2-react-diagrams";
let nodes: NodeModel[] = [{
id: 'Start',
width: 140,
height: 50,
offsetX: 100,
offsetY: 100,
annotations: [{
id: 'label1',
content: 'Start'
}],
shape: {
type: 'Flow',
shape: 'Terminator'
}
},
{
id: 'Init',
width: 140,
height: 50,
offsetX: 300,
offsetY: 300,
shape: {
type: 'Flow',
shape: 'Process'
},
annotations: [{
content: 'var i = 0;'
}]
}
];
let connectors: ConnectorModel[] = [{
// Name of the connector
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
// ID of the source and target nodes
sourceID: "Start",
targetID: "Init",
connectorSpacing: 7,
type: 'Orthogonal'
}];
function App() {
return (
<DiagramComponent id="container"
width = {
'100%'
}
height = {
'600px'
}
nodes = {
nodes
}
connectors = {
connectors
}
// Defines the default properties for the node
getNodeDefaults = {
(node: NodeModel) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}
}
/>
)
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />); <button class="preview-sample-button" id="PreviewSampleButton-xy8ovpo9rmyelcd3uk8zbd214l61ptpk" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/diagram/connectors/es5ConnectNode-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-xy8ovpo9rmyelcd3uk8zbd214l61ptpk" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/diagram/connectors/es5ConnectNode-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png"/><span class="stackblitz-text">Open in Stackblitz</span></button>
-
When you remove NodeConstraints
InConnectfrom Default, the node accepts only an outgoing connection to dock in it. Similarly, when you remove NodeConstraintsOutConnectfrom Default, the node accepts only an incoming connection to dock in it. -
When you remove both InConnect and OutConnect NodeConstraints from Default, the node restricts connector to establish connection in it.
-
The following code illustrates how to disable InConnect constraints.
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel,
ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
let nodes: NodeModel[] = [{
id: 'Start',
width: 140,
height: 50,
offsetX: 300,
offsetY: 100,
//Disable InConnect constraints
constraints: NodeConstraints.Default & ~NodeConstraints.InConnect,
}
];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={nodes}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Connections with ports
The sourcePortID and targetPortID properties allow to create connections between some specific points of source/target nodes.
The following code example illustrates how to create port to port connections.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, PortVisibility } from "@syncfusion/ej2-react-diagrams";
let port1 = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C'
}
};
port1.shape = 'Circle';
port1.id = 'nodeportnew';
port1.visibility = PortVisibility.Visible;
port1.id = 'port1';
port1.offset = {
x: 1,
y: 0.5
};
let port2 = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C'
}
};
port2.offset = {
x: 0,
y: 0.5
};
port2.id = 'port2';
port2.visibility = PortVisibility.Visible;
port2.shape = 'Circle';
let nodes = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
ports: [port1]
},
{
id: 'node1',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
ports: [port2]
},
];
let connectors = [{
id: "connector1",
sourceID: 'node',
targetID: 'node1',
sourcePortID: 'port1',
targetPortID: 'port2'
}];
function App() {
return (<DiagramComponent id="container" width={900} height={900} nodes={nodes} connectors={connectors} getNodeDefaults={(node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
ConnectorModel,
NodeModel,
BasicShapeModel,
PointPortModel,
Diagram,
DiagramComponent,
PortVisibility
} from "@syncfusion/ej2-react-diagrams";
let port1: PointPortModel = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C'
}
};
port1.shape = 'Circle';
port1.id = 'nodeportnew';
port1.visibility = PortVisibility.Visible;
port1.id = 'port1';
port1.offset = {
x: 1,
y: 0.5
};
let port2: PointPortModel = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C'
}
};
port2.offset = {
x: 0,
y: 0.5
};
port2.id = 'port2';
port2.visibility = PortVisibility.Visible;
port2.shape = 'Circle';
let nodes: NodeModel[] = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
ports: [port1]
},
{
id: 'node1',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
ports: [port2]
},
];
let connectors: ConnectorModel[] = [{
id: "connector1",
sourceID: 'node',
targetID: 'node1',
sourcePortID: 'port1',
targetPortID: 'port2'
}];
function App() {
return (
<DiagramComponent
id="container"
width={900}
height={900}
nodes={nodes}
connectors={connectors}
getNodeDefaults={(node: NodeModel) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Similarly, the sourcePortID or targetPortID can be changed at the runtime by changing the port sourcePortID or targetPortID.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, PortVisibility, } from '@syncfusion/ej2-react-diagrams';
let port1 = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C',
},
};
port1.shape = 'Circle';
port1.id = 'nodeportnew';
port1.visibility = PortVisibility.Visible;
port1.id = 'port';
port1.offset = {
x: 1,
y: 1,
};
let port2 = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C',
},
};
port2.offset = {
x: 1,
y: 0.5,
};
port2.id = 'port1';
port2.visibility = PortVisibility.Visible;
port2.shape = 'Circle';
let port3 = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C',
},
};
port3.offset = {
x: 0,
y: 1,
};
port3.id = 'newnodeport1';
port3.visibility = PortVisibility.Visible;
port3.shape = 'Circle';
let nodes = [
{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
ports: [port1],
},
{
id: 'node1',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
ports: [port2, port3],
},
];
let diagramInstance;
let connectors = [
{
id: 'connector1',
sourcePoint: {
x: 100,
y: 100,
},
type: 'Orthogonal',
targetPoint: {
x: 200,
y: 200,
},
sourceID: 'node',
targetID: 'node1',
sourcePortID: 'port',
targetPortID: 'port1',
},
];
function App() {
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={900} height={900} nodes={nodes} connectors={connectors} getNodeDefaults={(node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
// Update the target portID at the run time
diagramInstance.connectors[0].targetPortID = 'newnodeport1';import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ConnectorModel,
NodeModel,
BasicShapeModel,
PointPortModel,
Diagram,
DiagramComponent,
PortVisibility,
} from '@syncfusion/ej2-react-diagrams';
let port1: PointPortModel = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C',
},
};
port1.shape = 'Circle';
port1.id = 'nodeportnew';
port1.visibility = PortVisibility.Visible;
port1.id = 'port';
port1.offset = {
x: 1,
y: 1,
};
let port2: PointPortModel = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C',
},
};
port2.offset = {
x: 1,
y: 0.5,
};
port2.id = 'port1';
port2.visibility = PortVisibility.Visible;
port2.shape = 'Circle';
let port3: PointPortModel = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C',
},
};
port3.offset = {
x: 0,
y: 1,
};
port3.id = 'newnodeport1';
port3.visibility = PortVisibility.Visible;
port3.shape = 'Circle';
let nodes: NodeModel[] = [
{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
ports: [port1],
},
{
id: 'node1',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
ports: [port2, port3],
},
];
let diagramInstance: DiagramComponent;
let connectors: ConnectorModel[] = [
{
id: 'connector1',
sourcePoint: {
x: 100,
y: 100,
},
type: 'Orthogonal',
targetPoint: {
x: 200,
y: 200,
},
sourceID: 'node',
targetID: 'node1',
sourcePortID: 'port',
targetPortID: 'port1',
},
];
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={900}
height={900}
nodes={nodes}
connectors={connectors}
getNodeDefaults={(node: NodeModel) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
// Update the target portID at the run time
diagramInstance.connectors[0].targetPortID = 'newnodeport1';-
When you set PortConstraints to
InConnect, the port accepts only an incoming connection to dock in it. Similarly, when you set PortConstraints toOutConnect, the port accepts only an outgoing connection to dock in it. -
When you set PortConstraints to None, the port restricts connector to establish connection in it.
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
ConnectorModel,
NodeModel,
BasicShapeModel,
PointPortModel,
Diagram,
DiagramComponent,
PortVisibility
} from "@syncfusion/ej2-react-diagrams";
let port1: PointPortModel = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C'
}
}
port1.shape = 'Circle';
port1.id = 'nodeportnew';
//Enable portConstraints Inconnect
port1.constraints = PortConstraints.InConnect;
let nodes: NodeModel[] = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 150,
ports: [port1]
},
];
function App() {
return (
<DiagramComponent id="container" width={900} height={900} nodes={nodes} />
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Segments
The path of the connector is defined with a collection of segments. There are three types of segments.
Straight
To create a straight line, specify the type of the segment as straight and add a straight segment to segments collection and need to specify type for the connector. The following code example illustrates how to create a default straight segment.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let connectors = [{
id: "connector1",
type: 'Straight',
segments: [{
// Defines the segment type of the connector
type: 'Straight'
}],
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}];
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 {
Diagram,
DiagramComponent,
ConnectorModel,
StraightSegmentModel
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
id: "connector1",
type: 'Straight',
segments: [{
// Defines the segment type of the connector
type: 'Straight'
}],
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);The point property of straight segment allows you to define the end point of it. The following code example illustrates how to define the end point of a straight segment.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let connectors = [{
id: "connector1",
// Defines the segment type of the connector
segments: [{
type: 'Straight',
// Defines the point of the segment
point: {
x: 100,
y: 150
}
}],
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
type: 'Straight',
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}];
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 {
Diagram,
DiagramComponent,
ConnectorModel,
StraightSegmentModel
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
id: "connector1",
// Defines the segment type of the connector
segments: [{
type: 'Straight',
// Defines the point of the segment
point: {
x: 100,
y: 150
}
}],
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
type: 'Straight',
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Orthogonal
Orthogonal segments is used to create segments that are perpendicular to each other.
Set the segment type as orthogonal to create a default orthogonal segment and need to specify type. The following code example illustrates how to create a default orthogonal segment.
Multiple segments can be defined one after another. To create a connector with multiple segments, define and add the segments to connector.segments collection. The following code example illustrates how to create a connector with multiple segments.
The property maxSegmentThumb is used to limit the segment thumb in the connector.
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",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
type: 'Orthogonal',
maxSegmentThumb: 3,
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.DragSegmentThumb,
segments: [{ type: 'Orthogonal', direction: 'Bottom', length: 50 }],
}];
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 {
Diagram,
DiagramComponent,
ConnectorModel,
OrthogonalSegmentModel,
ConnectorConstraints,
ConnectorEditing
} from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let connectors: ConnectorModel[] = [{
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
type: 'Orthogonal',
maxSegmentThumb: 3,
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.DragSegmentThumb,
segments: [{ type: 'Orthogonal', direction: 'Bottom', length: 50 }],
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);The length and direction properties allow to define the flow and length of segment. The following code example illustrates how to create customized orthogonal segments.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let connectors = [{
id: "connector1",
type: 'Orthogonal',
segments: [{
type: 'Orthogonal',
// Defines the direction for the segment lines
direction: 'Right',
// Defines the length for the segment lines
length: 50
}],
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
},
{
id: "connector2",
type: 'Orthogonal',
// Defines multile segemnts for the connectors
segments: [{
type: 'Orthogonal',
direction: 'Bottom',
length: 150
},
{
type: 'Orthogonal',
direction: 'Right',
length: 150
}
],
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 300,
y: 100
},
targetPoint: {
x: 400,
y: 200
}
}
];
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 {
Diagram,
DiagramComponent,
ConnectorModel,
OrthogonalSegmentModel
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
id: "connector1",
type: 'Orthogonal',
segments: [{
type: 'Orthogonal',
// Defines the direction for the segment lines
direction: 'Right',
// Defines the length for the segment lines
length: 50
}],
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
},
{
id: "connector2",
type: 'Orthogonal',
// Defines multile segemnts for the connectors
segments: [{
type: 'Orthogonal',
direction: 'Bottom',
length: 150
},
{
type: 'Orthogonal',
direction: 'Right',
length: 150
}
],
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 300,
y: 100
},
targetPoint: {
x: 400,
y: 200
}
}
];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Note: You need to mention the segment type as same as what you mentioned in connector type. There should be no contradiction between connector type and segment type.
Avoid overlapping
Orthogonal segments are automatically re-routed, in order to avoid overlapping with the source and target nodes. The following preview illustrates how orthogonal segments are re-routed.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, PortVisibility } from "@syncfusion/ej2-react-diagrams";
let nodeport = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C'
}
};
nodeport.shape = 'Circle';
nodeport.visibility = PortVisibility.Visible;
nodeport.id = 'port';
nodeport.offset = {
x: 0,
y: 0.5
};
let port2 = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C'
}
};
port2.offset = {
x: 0,
y: 0.5
};
port2.id = 'port1';
port2.visibility = PortVisibility.Visible;
port2.shape = 'Circle';
let nodes = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
ports: [nodeport]
},
{
id: 'node1',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
ports: [port2]
},
];
let connectors = [{
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
type: 'Orthogonal',
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceID: 'node',
targetID: 'node1',
sourcePortID: 'port',
targetPortID: 'port1'
}];
function App() {
return (<DiagramComponent id="container" width={900} height={900} nodes={nodes} connectors={connectors} getNodeDefaults={(node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
ConnectorModel,
NodeModel,
DiagramComponent,
BasicShapeModel,
PointPortModel,
Diagram,
PortVisibility
} from "@syncfusion/ej2-react-diagrams";
let nodeport: PointPortModel = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C'
}
};
nodeport.shape = 'Circle';
nodeport.visibility = PortVisibility.Visible
nodeport.id = 'port';
nodeport.offset = {
x: 0,
y: 0.5
};
let port2: PointPortModel = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C'
}
}
port2.offset = {
x: 0,
y: 0.5
};
port2.id = 'port1';
port2.visibility = PortVisibility.Visible
port2.shape = 'Circle';
let nodes: NodeModel[] = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
ports: [nodeport]
},
{
id: 'node1',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
ports: [port2]
},
];
let connectors: ConnectorModel[] = [{
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
type: 'Orthogonal',
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceID: 'node',
targetID: 'node1',
sourcePortID: 'port',
targetPortID: 'port1'
}];
function App() {
return (
<DiagramComponent
id="container"
width={900}
height={900}
nodes={nodes}
connectors={connectors}
getNodeDefaults={(node: NodeModel) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);How to customize Orthogonal Segment Thumb Shape
The orthogonal connector has a number of segments in between the source and the target point. The segments are rendered with the default shape rhombus. Now, the option has been provided to change the segment thumb shape using the segmentThumbShape property. The predefined shapes provided are as follows:
- Rhombus
- Square
- Rectangle
- Ellipse
- Arrow
- Diamond
- OpenArrow
- Circle
- Fletch
- OpenFetch
- IndentedArrow
- OutdentedArrow
- DoubleArrow
You can customize the style of the thumb shape by overriding the class e-orthogonal-thumb.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Diagram } from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let connector2 = {};
connector2.id = 'connector2';
// Define the type of the segment
connector2.type = 'Orthogonal';
connector2.sourcePoint = { x: 250, y: 250 };
connector2.targetPoint = { x: 350, y: 350 };
connector2.segments = [
{
type: 'Orthogonal',
// Defines the direction for the segment lines
direction: "Right",
// Defines the length for the segment lines
length: 70
},
{
type: 'Orthogonal',
direction: "Bottom",
length: 20
}
];
function App() {
return (<DiagramComponent id="container" width={'900px'} height={'500px'} connectors={[connector2]} getConnectorDefaults={(connector) => {
connector.constraints =
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { Diagram, ConnectorModel, ConnectorEditing, DiagramComponent, ConnectorConstraints } from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let connector2: ConnectorModel = {};
connector2.id = 'connector2';
// Define the type of the segment
connector2.type = 'Orthogonal';
connector2.sourcePoint = { x: 250, y: 250 };
connector2.targetPoint = { x: 350, y: 350 };
connector2.segments = [
{
type: 'Orthogonal',
// Defines the direction for the segment lines
direction: "Right",
// Defines the length for the segment lines
length:70 },
{
type:'Orthogonal',
direction: "Bottom",
length: 20 }];
function App() {
return (
<DiagramComponent
id="container"
width={'900px'}
height={'500px'}
connectors={[connector2]}
getConnectorDefaults={(connector) => {
connector.constraints =
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
Use the following CSS to customize the segment thumb shape.
.e-diagram-endpoint-handle {
fill: rgb(126, 190, 219);
stroke: #24039e;
stroke-width: 3px;
}How to customize Orthogonal Segment Thumb Size
Orthogonal segment thumbs default to size 10. This can be adjusted globally or for individual connectors using the segmentThumbSize property.
To change the thumb size for all Orthogonal connectors, set the segmentThumbSize property in the diagram’s model.
To customize the thumb size for a specific connector, disable the InheritSegmentThumbSize constraint, then set the desired segmentThumbSize.
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 nodes = [
{
id: 'node1', width: 100, height: 100, offsetX: 200, offsetY: 200,
},
{
id: 'node2', width: 100, height: 100, offsetX: 400, offsetY: 400,
},
{
id: 'node3', width: 100, height: 100, offsetX: 600, offsetY: 200,
},
{
id: 'node4', width: 100, height: 100, offsetX: 800, offsetY: 400,
},
];
let connectors = [{
id: 'connector1',
type: 'Orthogonal',
sourceID: 'node1',
targetID: 'node2',
segments: [
{
type: 'Orthogonal',
direction: "Right",
length: 70
},
{
type: 'Orthogonal',
direction: "Bottom",
length: 50
}
],
constraints: ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
},
{
id: 'connector2',
type: 'Orthogonal',
sourceID: 'node3',
targetID: 'node4',
segments: [
{
type: 'Orthogonal',
direction: "Right",
length: 70
},
{
type: 'Orthogonal',
direction: "Bottom",
length: 50
}
],
constraints:ConnectorConstraints.Default & ~(ConnectorConstraints.InheritSegmentThumbSize) | ConnectorConstraints.DragSegmentThumb,
segmentThumbSize: 20
},];
function App() {
return (<DiagramComponent id="container" width={'900px'} height={'500px'} nodes = {nodes} connectors={connectors}
segmentThumbSize={15} />);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { Diagram, ConnectorModel, NodeModel, ConnectorEditing, DiagramComponent, ConnectorConstraints } from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let nodes: NodeModel[] = [
{
id: 'node1', width: 100, height: 100, offsetX: 200, offsetY: 200,
},
{
id: 'node2', width: 100, height: 100, offsetX: 400, offsetY: 400,
},
{
id: 'node3', width: 100, height: 100, offsetX: 600, offsetY: 200,
},
{
id: 'node4', width: 100, height: 100, offsetX: 800, offsetY: 400,
},
];
let connectors: ConnectorModel[] = [
{
id: 'connector1',
type: 'Orthogonal',
sourceID: 'node1',
targetID: 'node2',
segments: [
{
type: 'Orthogonal',
direction: "Right",
length: 70
},
{
type: 'Orthogonal',
direction: "Bottom",
length: 50
}
],
constraints: ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
},
{
id: 'connector2',
type: 'Orthogonal',
sourceID: 'node3',
targetID: 'node4',
segments: [
{
type: 'Orthogonal',
direction: "Right",
length: 70
},
{
type: 'Orthogonal',
direction: "Bottom",
length: 50
}
],
constraints:ConnectorConstraints.Default & ~(ConnectorConstraints.InheritSegmentThumbSize) | ConnectorConstraints.DragSegmentThumb,
segmentThumbSize: 20
},
];
function App() {
return (
<DiagramComponent
id="container"
width={'900px'}
height={'500px'}
nodes={nodes}
connectors={connectors}
segmentThumbSize={15}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Bezier
Bezier segments are used to create curve segments and the curves are configurable either with the control points or with vectors.
To create a bezier segment, the segment.type is set as bezier and need to specify type for the connector. The following code example illustrates how to create a default bezier segment.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let connectors = [{
id: 'connector1',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
type: 'Bezier',
segments: [{
// Defines the type of the segment
type: 'Bezier',
}],
sourcePoint: {
x: 50,
y: 100
},
targetPoint: {
x: 150,
y: 200
},
}];
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 {
Diagram,
DiagramComponent,
ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
id: 'connector1',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
type: 'Bezier',
segments: [{
// Defines the type of the segment
type: 'Bezier',
}],
sourcePoint: {
x: 50,
y: 100
},
targetPoint: {
x: 150,
y: 200
},
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);The point1 and point2 properties of bezier segment enable you to set the control points. The following code example illustrates how to configure the bezier segments with control points.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let connectors = [
{
id: 'connector3',
type: 'Bezier',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
segments: [{
type: 'Bezier',
// First control point: an absolute position from the page origin
point1: {
x: 100,
y: 100
},
// Second control point: an absolute position from the page origin
point2: {
x: 200,
y: 200
}
}],
sourcePoint: {
x: 100,
y: 200
},
targetPoint: {
x: 200,
y: 100
},
}
];
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 {
Diagram,
DiagramComponent,
ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [
{
id: 'connector3',
type: 'Bezier',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
segments: [{
type: 'Bezier',
// First control point: an absolute position from the page origin
point1: {
x: 100,
y: 100
},
// Second control point: an absolute position from the page origin
point2: {
x: 200,
y: 200
}
}],
sourcePoint: {
x: 100,
y: 200
},
targetPoint: {
x: 200,
y: 100
},
}
];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);The vector1 and vector2 properties of bezier segment enable you to define the vectors. The following code illustrates how to configure a bezier curve with vectors.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let connectors = [{
id: 'connector2',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
// Defines the type of the segment
type: 'Bezier',
segments: [{
type: 'Bezier',
// Length and angle between the source point and the first control point
vector1: {
distance: 100,
angle: 90
},
// Length and angle between the target point and the second control point
vector2: {
distance: 45,
angle: 270
}
}],
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
}];
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 {
Diagram,
DiagramComponent,
ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
id: 'connector2',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
// Defines the type of the segment
type: 'Bezier',
segments: [{
type: 'Bezier',
// Length and angle between the source point and the first control point
vector1: {
distance: 100,
angle: 90
},
// Length and angle between the target point and the second control point
vector2: {
distance: 45,
angle: 270
}
}],
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Avoid overlapping with bezier
By default, when there are no segments defined for a bezier connector, the bezier segments will be created automatically and routed in such a way that avoids overlapping with the source and target nodes.
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel,ConnectorModel,ConnectorEditing,ConnectorConstraints
} from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let nodes: NodeModel[] = [{
id: 'Start',
offsetX: 250,
offsetY: 150,
annotations: [{ content: 'Start' }]
},
{
id: 'End',
offsetX: 450,
offsetY: 200,
annotations: [{ content: 'End' }]
}];
let connectors: ConnectorModel[] = [{
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: { shape: 'None' },
// ID of the source and target nodes
sourceID: "Start",
targetID: "End",
type: 'Bezier'
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={nodes}
connectors={connectors}
getNodeDefaults={(node: NodeModel) => {
node.height = 100;
node.width = 100;
node.shape = { type: 'Basic', shape: 'Rectangle' };
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}}
getConnectorDefaults={(connector: ConnectorModel) => {
connector.constraints =
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Also, the intermediate point of two adjacent bezier segments can be edited interactively based on the bezierSettings.segmentEditOrientation property of the connector class.
How to interact with the bezier segments efficiently
While interacting with multiple bezier segments, maintain their control points at the same distance and angle by using the bezierSettings.smoothness property of the connector class.
| BezierSmoothness value | Description |
|---|---|
| SymmetricDistance | Both control points of adjacent segments will be at the same distance when any one of them is editing. |
| SymmetricAngle | Both control points of adjacent segments will be at the same angle when any one of them is editing. |
| Default | Both control points of adjacent segments will be at the same angle and same distance when any one of them is editing. |
| None | Segment’s control points are interacted independently from each other. |
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel,ConnectorModel,ConnectorEditing,ConnectorConstraints
} from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let nodes: NodeModel[] = [{
id: 'Start',
offsetX: 250,
offsetY: 150,
annotations: [{ content: 'Start' }],
ports: [{
id: 'StartPort',
visibility: PortVisibility.Visible,
shape: 'Circle',
offset: { x: 1, y: 0.5 },
style: { strokeColor: '#366F8C', fill: '#366F8C' }
}]
},
{
id: 'End',
offsetX: 450,
offsetY: 200,
annotations: [{ content: 'End' }],
ports: [{
id: 'EndPort',
visibility: PortVisibility.Visible,
shape: 'Circle',
offset: { x: 0, y: 0.5 },
style: { strokeColor: '#366F8C', fill: '#366F8C' }
}]
}];
let connectors: ConnectorModel[] = [{
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: { shape: 'None' },
// ID of the source and target nodes
sourceID: "Start",
sourcePortID: "StartPort",
targetID: "End",
targetPortID: "EndPort",
type: 'Bezier',
// Configuring settings for bezier interactions
bezierSettings = { smoothness: BezierSmoothness.SymmetricAngle }
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={nodes}
connectors={connectors}
getNodeDefaults={(node: NodeModel) => {
node.height = 100;
node.width = 100;
node.shape = { type: 'Basic', shape: 'Rectangle' };
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}}
getConnectorDefaults={(connector: ConnectorModel) => {
connector.constraints =
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Also, the visibility of control points can be controlled using the bezierSettings.controlPointsVisibility property of the connector class.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Diagram, DiagramComponent, ConnectorEditing, ConnectorConstraints,PortVisibility,ControlPointsVisibility } from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let nodes = [{
id: 'Start',
offsetX: 250,
offsetY: 150,
annotations: [{ content: 'Start' }],
ports: [{
id: 'StartPort',
visibility: PortVisibility.Visible,
shape: 'Circle',
offset: { x: 1, y: 0.5 },
style: { strokeColor: '#366F8C', fill: '#366F8C' }
}]
},
{
id: 'End',
offsetX: 450,
offsetY: 200,
annotations: [{ content: 'End' }],
ports: [{
id: 'EndPort',
visibility: PortVisibility.Visible,
shape: 'Circle',
offset: { x: 0, y: 0.5 },
style: { strokeColor: '#366F8C', fill: '#366F8C' }
}]
}];
let connectors = [{
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: { shape: 'None' },
// ID of the source and target nodes
sourceID: "Start",
sourcePortID: "StartPort",
targetID: "End",
targetPortID: "EndPort",
type: 'Bezier',
// Configuring settings for bezier interactions
bezierSettings : { controlPointsVisibility: ControlPointsVisibility.Source | ControlPointsVisibility.Target }
}];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={nodes} connectors={connectors} getNodeDefaults={(node) => {
node.height = 100;
node.width = 100;
node.shape = { type: 'Basic', shape: 'Rectangle' };
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}} getConnectorDefaults={(connector) => {
connector.constraints =
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel,ConnectorModel,ConnectorEditing,ConnectorConstraints,PortVisibility,ControlPointsVisibility
} from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let nodes: NodeModel[] = [{
id: 'Start',
offsetX: 250,
offsetY: 150,
annotations: [{ content: 'Start' }],
ports: [{
id: 'StartPort',
visibility: PortVisibility.Visible,
shape: 'Circle',
offset: { x: 1, y: 0.5 },
style: { strokeColor: '#366F8C', fill: '#366F8C' }
}]
},
{
id: 'End',
offsetX: 450,
offsetY: 200,
annotations: [{ content: 'End' }],
ports: [{
id: 'EndPort',
visibility: PortVisibility.Visible,
shape: 'Circle',
offset: { x: 0, y: 0.5 },
style: { strokeColor: '#366F8C', fill: '#366F8C' }
}]
}];
let connectors: ConnectorModel[] = [{
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: { shape: 'None' },
// ID of the source and target nodes
sourceID: "Start",
sourcePortID: "StartPort",
targetID: "End",
targetPortID: "EndPort",
type: 'Bezier',
// Configuring settings for bezier interactions
bezierSettings : { controlPointsVisibility: ControlPointsVisibility.Source | ControlPointsVisibility.Target }
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={nodes}
connectors={connectors}
getNodeDefaults={(node: NodeModel) => {
node.height = 100;
node.width = 100;
node.shape = { type: 'Basic', shape: 'Rectangle' };
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}}
getConnectorDefaults={(connector: ConnectorModel) => {
connector.constraints =
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);How to customize Bezier Segment Thumb Size
Bezier segment thumbs default to size 10. This can be adjusted globally or for individual connectors using the segmentThumbSize property.
To change the thumb size for all Bezier connectors, set the segmentThumbSize property in the diagram’s model.
To customize the thumb size for a specific connector, disable the InheritSegmentThumbSize constraint, then set the desired segmentThumbSize
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 nodes = [
{
id: 'node1', width: 100, height: 100, offsetX: 150, offsetY: 150,
},
{
id: 'node2', width: 100, height: 100, offsetX: 350, offsetY: 400,
},
{
id: 'node3', width: 100, height: 100, offsetX: 550, offsetY: 150,
},
{
id: 'node4', width: 100, height: 100, offsetX: 800, offsetY: 400,
},
];
let connectors = [{
id: 'connector1',
type: 'Bezier',
sourceID: 'node1',
targetID: 'node2',
segments: [
{
type: 'Bezier',
point: { x: 200, y: 300 },
},
{
type: 'Bezier',
point: { x: 320, y: 400 }
}
],
constraints: ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
},
{
id: 'connector2',
type: 'Bezier',
sourceID: 'node3',
targetID: 'node4',
segments: [
{
type: 'Bezier',
point: { x: 600, y: 300 },
},
{
type: 'Bezier',
point: { x: 320, y: 400 }
}
],
constraints: ConnectorConstraints.Default & ~(ConnectorConstraints.InheritSegmentThumbSize) | ConnectorConstraints.DragSegmentThumb,
segmentThumbSize: 20
},];
function App() {
return (<DiagramComponent id="container" width={'900px'} height={'500px'} nodes = {nodes} connectors={connectors}
segmentThumbSize={15} />);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { Diagram, ConnectorModel, NodeModel, ConnectorEditing, DiagramComponent, ConnectorConstraints } from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let nodes: NodeModel[] = [
{
id: 'node1', width: 100, height: 100, offsetX: 150, offsetY: 150,
},
{
id: 'node2', width: 100, height: 100, offsetX: 350, offsetY: 400,
},
{
id: 'node3', width: 100, height: 100, offsetX: 550, offsetY: 150,
},
{
id: 'node4', width: 100, height: 100, offsetX: 800, offsetY: 400,
},
];
let connectors: ConnectorModel[] = [
{
id: 'connector1',
type: 'Bezier',
sourceID: 'node1',
targetID: 'node2',
segments: [
{
type: 'Bezier',
point: { x: 200, y: 300 },
},
{
type: 'Bezier',
point: { x: 320, y: 400 }
}
],
constraints: ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
},
{
id: 'connector2',
type: 'Bezier',
sourceID: 'node3',
targetID: 'node4',
segments: [
{
type: 'Bezier',
point: { x: 600, y: 300 },
},
{
type: 'Bezier',
point: { x: 320, y: 400 }
}
],
constraints: ConnectorConstraints.Default & ~(ConnectorConstraints.InheritSegmentThumbSize) | ConnectorConstraints.DragSegmentThumb,
segmentThumbSize: 20
},
];
function App() {
return (
<DiagramComponent
id="container"
width={'900px'}
height={'500px'}
nodes={nodes}
connectors={connectors}
segmentThumbSize={15}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Decorator
-
Starting and ending points of a connector can be decorated with some customizable shapes like arrows, circles, diamond, or path. The connection end points can be decorated with the
sourceDecoratorandtargetDecoratorproperties of the connector. -
The
shapeproperty ofsourceDecoratorallows to define the shape of the decorators. Similarly, the shape property oftargetDecoratorallows to define the shape of the decorators. -
To create custom shape for source decorator, use
pathDataproperty. Similarly, to create custom shape for target decorator, usepathDataproperty. -
The following code example illustrates how to create decorators of various shapes.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let connectors = [{
id: "connector1",
type: 'Straight',
// Decorator shape- circle
sourceDecorator: {
shape: 'Circle',
// Defines the style for the sourceDecorator
style: {
// Defines the strokeWidth for the sourceDecorator
strokeWidth: 3,
// Defines the strokeColor for the sourceDecorator
strokeColor: 'red'
},
},
// Decorator shape - Diamond
targetDecorator: {
// Defines the custom shape for the connector's target decorator
shape: 'Custom',
//Defines the path for the connector's target decorator
pathData: 'M80.5,12.5 C80.5,19.127417 62.59139,24.5 40.5,24.5 C18.40861,24.5 0.5,19.127417 0.5,12.5' +
'C0.5,5.872583 18.40861,0.5 40.5,0.5 C62.59139,0.5 80.5,5.872583 80.5,12.5 z',
//defines the style for the target decorator
style: {
// Defines the strokeWidth for the targetDecorator
strokeWidth: 3,
// Defines the strokeColor for the sourceDecorator
strokeColor: 'green',
// Defines the opacity for the sourceDecorator
opacity: .8
},
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
},
{
id: "connectors2",
type: 'Straight',
// Decorator shape - IndentedArrow
sourceDecorator: {
shape: 'IndentedArrow',
style: {
strokeWidth: 3,
strokeColor: 'blue'
},
},
// Decorator shape - OutdentedArrow
targetDecorator: {
shape: 'OutdentedArrow',
style: {
strokeWidth: 3,
strokeColor: 'yellow'
},
},
sourcePoint: {
x: 400,
y: 100
},
targetPoint: {
x: 300,
y: 200
}
}];
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 {
Diagram,
DiagramComponent,
ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
id: "connector1",
type: 'Straight',
// Decorator shape- circle
sourceDecorator: {
shape: 'Circle',
// Defines the style for the sourceDecorator
style: {
// Defines the strokeWidth for the sourceDecorator
strokeWidth: 3,
// Defines the strokeColor for the sourceDecorator
strokeColor: 'red'
},
},
// Decorator shape - Diamond
targetDecorator: {
// Defines the custom shape for the connector's target decorator
shape: 'Custom',
//Defines the path for the connector's target decorator
pathData: 'M80.5,12.5 C80.5,19.127417 62.59139,24.5 40.5,24.5 C18.40861,24.5 0.5,19.127417 0.5,12.5' +
'C0.5,5.872583 18.40861,0.5 40.5,0.5 C62.59139,0.5 80.5,5.872583 80.5,12.5 z',
//defines the style for the target decorator
style: {
// Defines the strokeWidth for the targetDecorator
strokeWidth: 3,
// Defines the strokeColor for the sourceDecorator
strokeColor: 'green',
// Defines the opacity for the sourceDecorator
opacity: .8
},
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
},
{
id: "connectors2",
type: 'Straight',
// Decorator shape - IndentedArrow
sourceDecorator: {
shape: 'IndentedArrow',
style: {
strokeWidth: 3,
strokeColor: 'blue'
},
},
// Decorator shape - OutdentedArrow
targetDecorator: {
shape: 'OutdentedArrow',
style: {
strokeWidth: 3,
strokeColor: 'yellow'
},
},
sourcePoint: {
x: 400,
y: 100
},
targetPoint: {
x: 300,
y: 200
}
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Padding
Padding is used to leave the space between the Connector’s end point and the object to where it is connected.
-
The
sourcePaddingproperty of connector defines space between the source point and the source node of the connector. -
The
targetPaddingproperty of connector defines space between the end point and the target node of the connector. -
The following code example illustrates how to leave space between the connection end points and source and target nodes.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,ConnectorConstraints } from "@syncfusion/ej2-react-diagrams";
let nodes = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
},
{
id: 'node1',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
}
];
let connectors = [{
// Name of the connector
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
// ID of the source and target nodes
sourceID: "node",
targetID: "node1",
// Set Source Padding value
sourcePadding: 20,
// Set Target Padding value
targetPadding: 20
}];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={nodes} connectors={connectors} getNodeDefaults={(node) => {
node.height = 100;
node.width = 100;
node.shape = { type: 'Basic', shape: 'Rectangle' };
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}} getConnectorDefaults={(connector) => {
connector.constraints =
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel,
ConnectorModel,ConnectorConstraints
} from "@syncfusion/ej2-react-diagrams";
let nodes: NodeModel[] = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
},
{
id: 'node1',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
}
];
let connectors: ConnectorModel[] = [{
// Name of the connector
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
// ID of the source and target nodes
sourceID: "node",
targetID: "node1",
// Set Source Padding value
sourcePadding:20,
// Set Target Padding value
targetPadding:20
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={nodes}
connectors={connectors}
getNodeDefaults={(node: NodeModel) => {
node.height = 100;
node.width = 100;
node.shape = { type: 'Basic', shape: 'Rectangle' };
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}}
getConnectorDefaults={(connector: ConnectorModel) => {
connector.constraints =
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Hit padding
-
The
hitPaddingproperty enables you to define the clickable area around the connector path.The default value for hitPadding is 10. -
The following code example illustrates how to specify hit padding for connector.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let connectors = [{
// Name of the connector
id: "connector1",
type:"Orthogonal",
//set hit padding
hitPadding:50,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: { x: 100, y: 100 },
targetPoint: { x: 300, y: 300 }
}];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={nodes} connectors={connectors}
getConnectorDefaults={(connector) => {
connector.constraints =
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel,
ConnectorModel,ConnectorConstraints,ConnectorEditing
} from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let connectors: ConnectorModel[] = [{
// Name of the connector
id: "connector1",
type:"Orthogonal",
//set hit padding
hitPadding:50,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: { x: 100, y: 100 },
targetPoint: { x: 300, y: 300 }
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
getConnectorDefaults={(connector: ConnectorModel) => {
connector.constraints =
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Flip
The diagram Provides support to flip the connector. The flip is performed to give the mirrored image of the original element.
The flip types are as follows:
-
HorizontalFlip
Horizontalis used to interchange the connector source and target x points. -
VerticalFlip
Verticalis used to interchange the connector source and target y points. -
Both
Bothis used to interchange the source point as target point and target point as source point
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let connectors = [{
// Name of the connector
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
// Flip the connector in horizontal direction
flip: "Horizontal"
}];
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 {
Diagram,
DiagramComponent,
ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
// Name of the connector
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
// Flip the connector in horizontal direction
flip:"Horizontal"
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Note: The flip is not applicable when the connectors connect in nodes
Bridging
Line bridging creates a bridge for lines to smartly cross over the other lines, at points of intersection. By default, bridgeDirection is set to top. Depending upon the direction given bridging direction appears.
Bridging can be enabled/disabled either with the connector.constraints or diagram.constraints. The following code example illustrates how to enable line bridging.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, ConnectorBridging, DiagramConstraints } from "@syncfusion/ej2-react-diagrams";
let node1 = [{
id: 'Transaction',
width: 150,
height: 60,
offsetX: 300,
offsetY: 60,
shape: {
type: 'Flow',
shape: 'Terminator'
},
annotations: [{
id: 'label1',
content: 'Start Transaction',
offset: {
x: 0.5,
y: 0.5
}
}],
},
{
id: 'Verification',
width: 150,
height: 60,
offsetX: 300,
offsetY: 250,
shape: {
type: 'Flow',
shape: 'Process'
},
annotations: [{
id: 'label2',
content: 'Verification',
offset: {
x: 0.5,
y: 0.5
}
}]
}];
let connectors = [{
id: 'connector1',
type: 'Straight',
sourceID: 'Transaction',
targetID: 'Verification'
},
{
id: 'connector2',
type: 'Straight',
sourcePoint: {
x: 200,
y: 130
},
targetPoint: {
x: 400,
y: 130
}
},
{
id: 'connector3',
type: 'Straight',
sourcePoint: {
x: 200,
y: 170
},
targetPoint: {
x: 400,
y: 170
}
}];
// Enables bridging for every connector added in the model
function App() {
return (<DiagramComponent id="container" width={'100%'} getConnectorDefaults={(obj) => {
obj.style.strokeColor = '#6BA5D7';
obj.style.fill = '#6BA5D7';
obj.style.strokeWidth = 2;
obj.targetDecorator.style.fill = '#6BA5D7';
obj.targetDecorator.style.strokeColor = '#6BA5D7';
return obj;
}} getNodeDefaults={(node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}} nodes={node1} connectors={connectors} height={'600px'}
// Enables the bridging constraints for the connector
constraints={DiagramConstraints.Default | DiagramConstraints.Bridging} connectors={connectors}>
<Inject services={[ConnectorBridging]}/>{' '}
</DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
ConnectorBridging,
DiagramConstraints,
ConnectorModel,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
let node1: NodeModel[] = [{
id: 'Transaction',
width: 150,
height: 60,
offsetX: 300,
offsetY: 60,
shape: {
type: 'Flow',
shape: 'Terminator'
},
annotations: [{
id: 'label1',
content: 'Start Transaction',
offset: {
x: 0.5,
y: 0.5
}
}],
},
{
id: 'Verification',
width: 150,
height: 60,
offsetX: 300,
offsetY: 250,
shape: {
type: 'Flow',
shape: 'Process'
},
annotations: [{
id: 'label2',
content: 'Verification',
offset: {
x: 0.5,
y: 0.5
}
}]
}];
let connectors: ConnectorModel[] = [{
id: 'connector1',
type: 'Straight',
sourceID: 'Transaction',
targetID: 'Verification'
},
{
id: 'connector2',
type: 'Straight',
sourcePoint: {
x: 200,
y: 130
},
targetPoint: {
x: 400,
y: 130
}
},
{
id: 'connector3',
type: 'Straight',
sourcePoint: {
x: 200,
y: 170
},
targetPoint: {
x: 400,
y: 170
}
}];
// Enables bridging for every connector added in the model
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
getConnectorDefaults={(obj: ConnectorModel): ConnectorModel => {
obj.style.strokeColor = '#6BA5D7';
obj.style.fill = '#6BA5D7';
obj.style.strokeWidth = 2;
obj.targetDecorator.style.fill = '#6BA5D7';
obj.targetDecorator.style.strokeColor = '#6BA5D7';
return obj;
}}
getNodeDefaults={(node: NodeModel) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}}
nodes={node1}
connectors={connectors}
height={'600px'}
// Enables the bridging constraints for the connector
constraints={DiagramConstraints.Default | DiagramConstraints.Bridging}
connectors={connectors}
>
<Inject services={[ConnectorBridging]} />{' '}
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Note: You need to inject connector bridging module into the diagram.
The bridgeSpace property of connectors can be used to define the width for line bridging.
Limitation: Bezier segments do not support bridging.
Corner radius
Corner radius allows to create connectors with rounded corners. The radius of the rounded corner is set with the cornerRadius property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let nodes = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 100,
offsetY: 350,
}
];
let connectors = [{
id: "connector1",
type: 'Orthogonal',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
// Sets the radius for the rounded corner
cornerRadius: 10,
sourceID: 'node1',
targetID: 'node2',
segments: [{
type: 'Orthogonal',
direction: 'Right',
length: 50
}],
}];
function App() {
return (<DiagramComponent id="container" width={'100%'} getNodeDefaults={(node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}} nodes={nodes} connectors={connectors} height={'600px'}
>
</DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel,
ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
let nodes: NodeModel[] = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 100,
offsetY: 350,
}
];
let connectors: ConnectorModel[] = [{
id: "connector1",
type: 'Orthogonal',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
// Sets the radius for the rounded corner
cornerRadius: 10,
sourceID: 'node1',
targetID: 'node2',
segments: [{
type: 'Orthogonal',
direction: 'Right',
length: 50
}],
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
getNodeDefaults={(node: NodeModel) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}}
nodes={nodes}
connectors={connectors}
height={'600px'}
>
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Appearance
-
The connector’s
strokeWidth,strokeColor,strokeDashArray, andopacityproperties are used to customize the appearance of the connector segments. -
The
visibleproperty of the connector enables or disables the visibility of connector. -
Default values for all the
connectorscan be set using thegetConnectorDefaultsproperties. For example, if all connectors have the same type or having the same property then such properties can be moved intogetConnectorDefaults.
Segment appearance
The following code example illustrates how to customize the segment appearance.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let connectors = [{
id: "connector1",
targetDecorator: {
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
}
},
style: {
// Stroke color
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
// Stroke width of the line
strokeWidth: 2,
// Line style
strokeDashArray: '2,2'
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{
type: 'Orthogonal',
direction: 'Right',
length: 50
}],
},
{
id: "connector2",
// Set the visibility of the connector to false
visible: false,
targetDecorator: {
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
}
},
style: {
// Stroke color
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
// Stroke width of the line
strokeWidth: 2,
// Line style
strokeDashArray: '2,2'
},
sourcePoint: {
x: 300,
y: 300
},
targetPoint: {
x: 400,
y: 400
},
segments: [{
type: 'Orthogonal',
direction: 'Right',
length: 50
}],
}
];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'}
// Define the default values for all the connector.Similary we can add all the properties
getConnectorDefaults={(obj) => {
obj.type = 'Orthogonal';
return obj;
}} 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
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
id: "connector1",
targetDecorator: {
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
}
},
style: {
// Stroke color
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
// Stroke width of the line
strokeWidth: 2,
// Line style
strokeDashArray: '2,2'
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{
type: 'Orthogonal',
direction: 'Right',
length: 50
}],
},
{
id: "connector2",
// Set the visibility of the connector to false
visible: false,
targetDecorator: {
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
}
},
style: {
// Stroke color
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
// Stroke width of the line
strokeWidth: 2,
// Line style
strokeDashArray: '2,2'
},
sourcePoint: {
x: 300,
y: 300
},
targetPoint: {
x: 400,
y: 400
},
segments: [{
type: 'Orthogonal',
direction: 'Right',
length: 50
}],
}
];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
// Define the default values for all the connector.Similary we can add all the properties
getConnectorDefaults={(obj: ConnectorModel): ConnectorModel => {
obj.type = 'Orthogonal';
return obj;
}}
connectors={connectors}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Decorator appearance
-
The source decorator’s
strokeColor,strokeWidth, andstrokeDashArrayproperties are used to customize the color, width, and appearance of the decorator. -
To set the border stroke color, stroke width, and stroke dash array for the target decorator, use
strokeColor,strokeWidth, andstrokeDashArray. -
To set the size for source and target decorator, use width and height property.
The following code example illustrates how to customize the appearance of the decorator.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let connectors = [{
id: "connector1",
type: 'Straight',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
bridgeSpace: 20,
// Cutomize the target decorator
targetDecorator: {
style: {
// Fill color of the decorator
fill: '#6BA5D7',
// Stroke color of the decorator
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}];
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 {
Diagram,
DiagramComponent,
ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
id: "connector1",
type: 'Straight',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
bridgeSpace: 20,
// Cutomize the target decorator
targetDecorator: {
style: {
// Fill color of the decorator
fill: '#6BA5D7',
// Stroke color of the decorator
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Interaction
- Diagram allows to edit the connectors at runtime. To edit the connector segments at runtime, refer to
Connection Editing.
Automatic line routing
Diagram provides additional flexibility to re-route the diagram connectors. A connector will frequently re-route itself when a shape moves next to it. The following screenshot illustrates how the connector automatically re-routes the segments.
-
Dependency LineRouting module should be injected to the application as the following code snippet.
import { Diagram, LineRouting } from "@syncfusion/ej2-react-diagrams"; /** * Injecting the automatic line routing module. */ Diagram.Inject(LineRouting); -
Now, the line routing constraints must be included to the default diagram constraints to enable automatic line routing support like below.
/** * Initialize the Diagram */ <DiagramComponent constraints={DiagramConstraints.Default | DiagramConstraints.LineRouting} /> -
The following code block shows how to create the diagram with specifying nodes, connectors, constraints, and necessary modules for line routing.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Diagram, DiagramComponent, LineRouting, DiagramConstraints } from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(LineRouting);
/**
* Diagram Default sample
*/
//Initializes the nodes for the diagram
let nodes = [
{ id: 'shape1', offsetX: 100, offsetY: 100, width: 120, height: 50 },
{ id: 'shape2', offsetX: 300, offsetY: 300, width: 120, height: 50 },
{ id: 'shape3', offsetX: 150, offsetY: 200, width: 120, height: 50 }
];
//Initializes the connector for the diagram
let connectors = [
{ id: 'connector', sourceID: 'shape1', targetID: 'shape2', type: 'Orthogonal' }
];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'700px'} nodes={nodes} connectors={connectors} //Sets the default values of a node
constraints={DiagramConstraints.Default | DiagramConstraints.LineRouting} getNodeDefaults={(node) => {
node = { style: { strokeColor: '#6BA5D7', fill: '#6BA5D7' } };
return node;
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram, DiagramComponent, NodeModel, SnapConstraints, LineRouting, DiagramConstraints, NodeModel, ConnectorModel, ConnectorConstraints
} from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(LineRouting);
/**
* Diagram Default sample
*/
//Initializes the nodes for the diagram
let nodes = [
{ id: 'shape1', offsetX: 100, offsetY: 100, width: 120, height: 50 },
{ id: 'shape2', offsetX: 300, offsetY: 300, width: 120, height: 50 },
{ id: 'shape3', offsetX: 150, offsetY: 200, width: 120, height: 50 }
];
//Initializes the connector for the diagram
let connectors = [
{ id: 'connector', sourceID: 'shape1', targetID: 'shape2', type: 'Orthogonal' }
];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'700px'}
nodes={nodes}
connectors={connectors} //Sets the default values of a node
constraints={DiagramConstraints.Default | DiagramConstraints.LineRouting}
getNodeDefaults={(node) => {
node = { style: { strokeColor: '#6BA5D7', fill: '#6BA5D7' } };
return node;
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Chart-DataLabel</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#diagram {
display: block;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='diagram'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>- In some situations, automatic line routing enabled diagram needs to ignore a specific connector from automatic line routing. So, in this case, auto routing feature can be disabled to the specific connector using the
constraintsproperty of the connector like the following code snippet.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Diagram, DiagramComponent, LineRouting, DiagramConstraints, ConnectorConstraints } from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(LineRouting);
/**
* Diagram Default sample
*/
//Initializes the nodes for the diagram
let nodes = [
{ id: 'shape1', offsetX: 100, offsetY: 100, width: 120, height: 50 },
{ id: 'shape2', offsetX: 350, offsetY: 300, width: 120, height: 50 },
{ id: 'shape3', offsetX: 150, offsetY: 200, width: 120, height: 50 },
{ id: 'shape4', offsetX: 300, offsetY: 200, width: 120, height: 50 }
];
//Initializes the connector for the diagram
let connectors = [
{ id: 'connector', sourceID: 'shape1', targetID: 'shape2', type: 'Orthogonal', annotations: [{ offset: .7, content: ' Routing \n enabled', style: { fill: "white" } }] },
{ id: 'connector2', sourceID: 'shape1', targetID: 'shape2', annotations: [{ offset: .6, content: ' Routing \n disabled', style: { fill: "white" } }], type: 'Orthogonal', constraints: ConnectorConstraints.Default & ~ConnectorConstraints.InheritLineRouting }
];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'700px'} nodes={nodes} connectors={connectors} //Sets the default values of a node
constraints={DiagramConstraints.Default | DiagramConstraints.LineRouting} getNodeDefaults={(node) => {
node = { style: { strokeColor: '#6BA5D7', fill: '#6BA5D7' } };
return node;
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram, DiagramComponent, NodeModel, SnapConstraints, LineRouting, DiagramConstraints, NodeModel, ConnectorModel, ConnectorConstraints
} from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(LineRouting);
/**
* Diagram Default sample
*/
//Initializes the nodes for the diagram
let nodes = [
{ id: 'shape1', offsetX: 100, offsetY: 100, width: 120, height: 50 },
{ id: 'shape2', offsetX: 350, offsetY: 300, width: 120, height: 50 },
{ id: 'shape3', offsetX: 150, offsetY: 200, width: 120, height: 50 },
{ id: 'shape4', offsetX: 300, offsetY: 200, width: 120, height: 50 }
];
//Initializes the connector for the diagram
let connectors = [
{ id: 'connector', sourceID: 'shape1', targetID: 'shape2', type: 'Orthogonal', annotations: [{ offset: .7, content: ' Routing \n enabled', style: { fill: "white" } }] },
{ id: 'connector2', sourceID: 'shape1', targetID: 'shape2', annotations: [{ offset: .6, content: ' Routing \n disabled', style: { fill: "white" } }], type: 'Orthogonal', constraints: ConnectorConstraints.Default & ~ConnectorConstraints.InheritLineRouting }
];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'700px'}
nodes={nodes}
connectors={connectors} //Sets the default values of a node
constraints={DiagramConstraints.Default | DiagramConstraints.LineRouting}
getNodeDefaults={(node) => {
node = { style: { strokeColor: '#6BA5D7', fill: '#6BA5D7' } };
return node;
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Chart-DataLabel</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#diagram {
display: block;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='diagram'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Constraints
-
The
constraintsproperty of connector allows to enable/disable certain features of connectors. -
To enable or disable the constraints, refer
constraints.
The following code illustrates how to disable selection.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, ConnectorConstraints } from "@syncfusion/ej2-react-diagrams";
let connectors = [{
id: "connector1",
// Disables selection constraints
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Select,
type: 'Straight',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'700px'} 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,
DiagramConstraints,
ConnectorConstraints,
ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
id: "connector1",
// Disables selection constraints
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Select,
type: 'Straight',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'700px'}
connectors={connectors}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Custom properties
- The
addInfoproperty of connectors allow you to maintain additional information to the connectors.
let connectors: ConnectorModel[] = [{
id: 'connector1',
// Defines the information about the connector
addInfo: 'centralconnector',
type: 'Straight',
sourceID: 'Transaction',
targetID: 'Verification'
}];Stack order
The connectors zIndex property specifies the stack order of the connector. A connector with greater stack order is always in front of a connector with a lower stack order.
The following code illustrates how to render connector based on the stack order.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let connectors = [{
id: 'connector1',
// Defines the z-index value for the connector
zIndex: 2,
type: 'Straight',
sourcePoint: {
x: 300,
y: 100
},
targetPoint: {
x: 300,
y: 200
}
},
{
id: 'connector2',
type: 'Straight',
// Defines the z-index value for the connector
zIndex: 1,
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}];
function App() {
return (<DiagramComponent id="container" width={'100%'} getConnectorDefaults={(obj) => {
obj.style.strokeColor = '#6BA5D7';
obj.style.fill = '#6BA5D7';
obj.style.strokeWidth = 2;
obj.targetDecorator.style.fill = '#6BA5D7';
obj.targetDecorator.style.strokeColor = '#6BA5D7';
return obj;
}} 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 {
Diagram,
DiagramComponent,
ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
id: 'connector1',
// Defines the z-index value for the connector
zIndex: 2,
type: 'Straight',
sourcePoint: {
x: 300,
y: 100
},
targetPoint: {
x: 300,
y: 200
}
},
{
id: 'connector2',
type: 'Straight',
// Defines the z-index value for the connector
zIndex: 1,
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
getConnectorDefaults={(obj) => {
obj.style.strokeColor = '#6BA5D7';
obj.style.fill = '#6BA5D7';
obj.style.strokeWidth = 2;
obj.targetDecorator.style.fill = '#6BA5D7';
obj.targetDecorator.style.strokeColor = '#6BA5D7';
return obj;
}}
height={'600px'}
connectors={connectors}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Line Routing
Line Routing is used to avoid the overlapping of nodes and connectors. Connectors are the most important elements of a diagram used to show the flow and relationship between shapes in the flowcharts, organizational charts, and hierarchy diagrams. Line Routing provides the flexibility to re-route the diagram connectors. A connector will frequently re-route itself when a shape moves next to it.
Note: You need to inject line routing module into the diagram. Line routing is applicable only for orthogonal segment of connector.
The following code illustrates how the automatic line routing is enabled for diagram.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, LineRouting, DiagramConstraints, } from "@syncfusion/ej2-react-diagrams";
//Initializes the nodes for the diagram
let nodes = [
{ id: 'shape1', offsetX: 100, offsetY: 100, width: 120, height: 50 },
{ id: 'shape2', offsetX: 300, offsetY: 300, width: 120, height: 50 },
{ id: 'shape3', offsetX: 150, offsetY: 200, width: 120, height: 50 }
];
//Initializes the connector for the diagram
let connectors = [
{ id: 'connector', sourceID: 'shape1', targetID: 'shape2', type: 'Orthogonal' }
];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'700px'} nodes={nodes} connectors={connectors} constraints={DiagramConstraints.Default | DiagramConstraints.LineRouting} getNodeDefaults={(node) => {
node = { style: { strokeColor: '#65B091', fill: '#65B091' } };
return node;
}}>
<Inject services={[LineRouting]}/>
</DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
Inject,
LineRouting,
DiagramConstraints,
ConnectorModel,
NodeModel,
} from "@syncfusion/ej2-react-diagrams";
//Initializes the nodes for the diagram
let nodes = [
{ id: 'shape1', offsetX: 100, offsetY: 100, width: 120, height: 50 },
{ id: 'shape2', offsetX: 300, offsetY: 300, width: 120, height: 50 },
{ id: 'shape3', offsetX: 150, offsetY: 200, width: 120, height: 50 }
];
//Initializes the connector for the diagram
let connectors = [
{ id: 'connector', sourceID: 'shape1', targetID: 'shape2', type: 'Orthogonal' }
];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'700px'}
nodes={nodes}
connectors={connectors}
constraints={DiagramConstraints.Default | DiagramConstraints.LineRouting}
getNodeDefaults={(node) => {
node = { style: { strokeColor: '#65B091', fill: '#65B091' } };
return node;
}}
>
<Inject services={[LineRouting]} />
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Enable Connector Splitting
The connectors are used to create a link between two points, ports, or nodes to represent the relationship between them. Split the connector between two nodes when dropping a new node onto an existing connector and create a connection between the new node and existing nodes by setting the enableConnectorSplit as true. The default value of the enableConnectorSplit is false.
The following code illustrates how to split the connector and create a connection with new node.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ConnectorConstraints,DiagramComponent } from '@syncfusion/ej2-react-diagrams';
let nodes = [{
id: 'node1',
width: 100, height: 100,
offsetX: 150, offsetY: 150,
annotations: [{ content: 'node1' }]
},
{
id: 'node2',
width: 100, height: 100,
offsetX: 650, offsetY: 150,
annotations: [{ content: 'node2' }]
},
{
id: 'node3',
width: 100, height: 100,
offsetX: 490, offsetY: 290,
annotations: [{ content: 'node3' }]
},
];
let connectors = [{
id: 'connector1', sourceID: "node1", targetID: "node2",
constraints: ConnectorConstraints.Default | ConnectorConstraints.AllowDrop
}
];
function App() {
return (<DiagramComponent id="container" width={1500} height={1000} enableConnectorSplit={true} 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 {
Diagram,NodeModel,ConnectorModel,ConnectorConstraints,DiagramComponent
} from '@syncfusion/ej2-react-diagrams';
let nodes: NodeModel[] = [{
id: 'node1',
width: 100, height: 100,
offsetX: 150, offsetY: 150,
annotations: [{ content: 'node1' }]
},
{
id: 'node2',
width: 100, height: 100,
offsetX: 650, offsetY: 150,
annotations: [{ content: 'node2' }]
},
{
id: 'node3',
width: 100, height: 100,
offsetX: 490, offsetY: 290,
annotations: [{ content: 'node3' }]
},
];
let connectors: ConnectorModel[] = [{
id: 'connector1',sourceID:"node1",targetID:"node2",
constraints: ConnectorConstraints.Default | ConnectorConstraints.AllowDrop
}
];
function App() {
return (
<DiagramComponent
id="container"
width={1500}
height={1000}
enableConnectorSplit={true}
nodes={nodes}
connectors={connectors}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);