Straight Connector Segments
Straight connector segments create direct linear connections between two points in a React Diagram. These segments are the simplest form of connector routing, providing the shortest path between nodes or connection points. Straight segments are ideal when you need clean, unobstructed connections without intermediate directional changes.
Creating Straight Segments
To create a straight line connector, specify the type of the segment as straight and add a straight segment to segments collection and need to specify type property for the connector itself. The following code example demonstrates how to create a basic straight segment 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'
}],
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'
}],
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 />);Defining Segment End Points
The point property of a straight segment allows you to define its end point coordinates. This provides precise control over where each segment terminates, enabling complex connector paths composed of multiple straight segments. 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
}
}],
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
}
}],
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 />);Straight Segment Editing
The end point of each straight segment is represented by a visual thumb control that enables interactive editing of the segment position. This allows users to dynamically modify connector paths by dragging segment endpoints.
Adding Segments
New segments can be inserted into a straight line connector by clicking on the connector while pressing Shift and Ctrl keys simultaneously (Ctrl+Shift+Click). This creates additional control points for more complex routing.
Removing Segments
Straight segments can be removed by clicking the segment end point while holding Ctrl and Shift keys (Ctrl+Shift+Click). This simplifies the connector path by eliminating unnecessary way points.
Programmatic Editing
You can also add or remove segments programmatically using the editSegment method of the diagram component. This provides API-level control over connector segment manipulation.
The following example demonstrates how to add segments to a straight connector programmatically.
The following example shows how to add segments at runtime for the straight connector.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,ConnectorConstraints,ConnectorEditing,Diagram } from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing)
let diagramInstance;
// Define initial connectors
let connectors = [{
id: "connector1",
constraints:ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
// 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: 150,
y: 100
},
targetPoint: {
x: 340,
y: 200
}
}];
// App component
const App = () => {
// Function to handle clone button click
const segmentEdit = () => {
let options = {}
options.SegmentEditing = 'Toggle';
options.point = { x: 220, y: 150 };
options.connector = diagramInstance.connectors[0];
options.hitPadding = diagramInstance.connectors[0].hitPadding;
diagramInstance.editSegment(options);
};
return (
<div>
<button onClick={segmentEdit}>segmentEdit</button>
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
connectors={connectors}
created={() => {
diagramInstance.select([diagramInstance.connectors[0]]);
}}
/>
</div>
);
};
// Render the App component
const root = ReactDOM.createRoot(document.getElementById('diagram') );
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,ConnectorConstraints,ConnectorEditing,Diagram,ConnectorModel,IEditSegmentOptions } from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing)
let diagramInstance:DiagramComponent;
// Define initial connectors
let connectors: ConnectorModel[] = [{
id: "connector1",
constraints:ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
// 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: 150,
y: 100
},
targetPoint: {
x: 340,
y: 200
}
}];
// App component
const App = () => {
// Function to handle clone button click
const segmentEdit = () => {
let options:IEditSegmentOptions = {}
options.SegmentEditing = 'Toggle';
options.point = { x: 220, y: 150 };
options.connector = diagramInstance.connectors[0];
options.hitPadding = diagramInstance.connectors[0].hitPadding;
diagramInstance.editSegment(options);
};
return (
<div>
<button onClick={segmentEdit}>segmentEdit</button>
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
connectors={connectors}
created={() => {
diagramInstance.select([diagramInstance.connectors[0]]);
}}
/>
</div>
);
};
// Render the App component
const root = ReactDOM.createRoot(document.getElementById('diagram') );
root.render(<App />);