Straight in EJ2 React Diagram Control
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'
}],
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 />);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
}
}],
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
End point of each straight segment is represented by a thumb that enables to edit the segment.
Any number of new segments can be inserted into a straight line by clicking when Shift and Ctrl keys are pressed (Ctrl+Shift+Click).
Straight segments can be removed by clicking the segment end point when Ctrl and Shift keys are pressed (Ctrl+Shift+Click). You can also add/remove segments by using the editSegment method of diagram.
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 />);