Connector Events in React Diagram
The Diagram component provides comprehensive event support for connectors, allowing developers to respond to various user interactions and programmatic changes. These events enable dynamic behavior and custom logic when users interact with connectors through clicking, dragging, connecting, or modifying segments.
Click Event
Triggers when a connector is clicked by the user. This event is useful for implementing custom actions, showing context menus, or displaying connector-specific information.
The following code example demonstrates how to handle the click event in the diagram.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Connector, Node } from "@syncfusion/ej2-react-diagrams";
let nodes = [
{
id: 'Start',
width: 140,
height: 50,
offsetX: 300,
offsetY: 50,
annotations: [
{
content: 'Click node',
},
],
}
]
let connectors = [{
// Name of the connector
id: "connector1",
// Sets source and target points
sourceID: 'Start',
targetPoint: { x: 300, y: 200 },
annotations: [
{
content: 'Click Connector',
},
],
}];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} connectors={connectors} nodes={nodes}
click={(args) => {
let element = 'Diagram';
if (args.actualObject instanceof Node) {
element = 'Node';
} else if (args.actualObject instanceof Connector) {
element = 'Connector';
}
alert(element + ' Clicked');
}}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Connector, Node, NodeModel, IClickEventArgs,ConnectorModel,} from "@syncfusion/ej2-react-diagrams";
let nodes: NodeModel[] = [
{
id: 'Start',
width: 140,
height: 50,
offsetX: 300,
offsetY: 50,
annotations: [
{
content: 'Click node',
},
],
}
]
let connectors: ConnectorModel[] = [{
// Name of the connector
id: "connector1",
// Sets source and target points
sourceID: 'Start',
targetPoint: { x: 300, y: 200 },
annotations: [
{
content: 'Click Connector',
},
],
}];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} connectors={connectors} nodes={nodes}
click={(args: IClickEventArgs) => {
let element = 'Diagram';
if (args.actualObject instanceof Node) {
element = 'Node';
} else if (args.actualObject instanceof Connector) {
element = 'Connector';
}
alert(element + ' Clicked');
}}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Selection Change Event
Triggers when a connector is selected or unselected. This event allows you to implement custom selection logic, update property panels, or perform actions based on selection state changes.
The following code example demonstrates how to handle the selectionChange event in the diagram:
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",
// 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}
selectionChange={
(args) =>{
if (args.state === 'Changed') {
console.log('selectionChange');
//Customize
}
}
}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent,
ConnectorModel,ISelectionChangeEventArgs
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
// Name of the connector
id: "connector1",
// 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}
selectionChange={
(args:ISelectionChangeEventArgs ) =>{
if (args.state === 'Changed') {
console.log('selectionChange');
//Customize
}
}
}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);You can prevent selection by setting the cancel property of SelectionChangeEventArgs to true, as shown in the code snippet below:
selectionChange= { (args) => {
if (args.state == 'Changing') {
//Prevents selection
args.cancel = true;
}
}
},Position Change Event
Triggers when a connector’s position changes during dragging operations. This event is essential for implementing validation, snapping behavior, or custom positioning logic.
The following code example demonstrates how to handle the positionChange event in the diagram:
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",
// 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}
positionChange={
(args) =>{
if (args.state === 'Completed') {
console.log('positionChange');
//Customize
}
}
}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent,
ConnectorModel,IDraggingEventArgs
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
// Name of the connector
id: "connector1",
// 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}
positionChange={
(args:IDraggingEventArgs) =>{
if (args.state === 'Completed') {
console.log('positionChange');
//Customize
}
}
}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);You can prevent dragging by setting the cancel property of DraggingEventArgs to true, as shown in the code snippet below.
positionChange={ (args) => {
if (args.state == 'Progress') {
//Prevents dragging
args.cancel = true;
}
}
},Connection Change Event
Triggers when a connector’s source or target point connects to or disconnects from nodes. This event is crucial for implementing connection validation, automatic routing updates, or maintaining data relationships.
The following code example demonstrates how to handle the connectionChange event in the diagram.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let nodes = [
{
id: 'node1',
offsetX: 200,
offsetY: 200,
width: 120,
height: 60,
style: { fill: 'skyblue' },
},
{
id: 'node2',
offsetX: 500,
offsetY: 200,
width: 120,
height: 60,
style: { fill: 'skyblue' },
},
];
let connectors = [{
// Name of the connector
id: 'connector1',
sourceID: 'node1',
targetID: 'node2',
}];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={nodes} connectors={connectors}
connectionChange={
(args) => {
if (args.state === 'Changed') {
console.log('connectionChange');
//Customize
}
}
}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {DiagramComponent, ConnectorModel, NodeModel, IConnectionChangeEventArgs
} from "@syncfusion/ej2-react-diagrams";
let nodes: NodeModel[] = [
{
id: 'node1',
offsetX: 200,
offsetY: 200,
width: 120,
height: 60,
style: { fill: 'skyblue' },
},
{
id: 'node2',
offsetX: 500,
offsetY: 200,
width: 120,
height: 60,
style: { fill: 'skyblue' },
},
];
let connectors: ConnectorModel[] = [
{
// Name of the connector
id: 'connector1',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2,
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7',
},
},
sourceID: 'node1',
targetID: 'node2',
},
];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
connectors={connectors}
nodes={nodes}
connectionChange={
(args: IConnectionChangeEventArgs) => {
if (args.state === 'Changed') {
console.log('connectionChange');
//Customize
}
}
}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Source Point Change Event
Triggers when a connector’s source point is modified through dragging or programmatic changes. This event enables validation of source connections and implementation of custom connection rules.
The following code example demonstrates how to handle the sourcePointChange event in the diagram.
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",
// 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}
sourcePointChange={
(args) =>{
if (args.state === 'Completed') {
console.log('sourcePointChange');
//Customize
}
}
}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent,
ConnectorModel,IEndChangeEventArgs
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
// Name of the connector
id: "connector1",
// 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}
sourcePointChange={
(args:IEndChangeEventArgs) =>{
if (args.state === 'Completed') {
console.log('sourcePointChange');
//Customize
}
}
}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);You can prevent source point dragging by setting the cancel property of EndChangeEventArgs to true, as shown in the code snippet below:
sourcePointChange={ (args) => {
if (args.state === 'Progress') {
//Prevents source point dragging
args.cancel = true;
//Customize
}
}
},Target Point Change Event
Triggers when a connector’s target point is modified through dragging or programmatic changes. This event allows validation of target connections and enforcement of connection constraints.
The following code example demonstrates how to handle the targetPointChange event in the diagram.
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",
// 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}
targetPointChange={
(args) =>{
if (args.state === 'Completed') {
console.log('targetPointChange');
//Customize
}
}
}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent,
ConnectorModel,IEndChangeEventArgs
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
// Name of the connector
id: "connector1",
// 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}
targetPointChange={
(args:IEndChangeEventArgs) =>{
if (args.state === 'Completed') {
console.log('targetPointChange');
//Customize
}
}
}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);You can prevent target point dragging by setting the cancel property of EndChangeEventArgs to true, as shown in the code snippet below.
targetPointChange={ (args) => {
if (args.state === 'Progress') {
//Prevents target point dragging
args.cancel = true;
//Customize
}
}
},Segment Collection Change Event
Triggers when connector segments are added or removed at runtime. This event is essential for tracking dynamic changes to connector paths and implementing custom segment management logic.
The following code example demonstrates how to handle the segmentCollectionChange event in the diagram:
Use CTRL+Shift+Click on connector to add/remove segments.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,ConnectorConstraints,Diagram, ConnectorEditing} from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let connectors = [{
// Name of the connector
id: "connector1",
// Sets source and target points
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
constraints:
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
}];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} connectors={connectors}
segmentCollectionChange={
(args) =>{
if (args.type === 'Addition') {
console.log('segmentCollectionChange');
//Customize
}
}
}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,ConnectorModel,ConnectorConstraints,Diagram, ConnectorEditing,ISegmentCollectionChangeEventArgs} from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let connectors: ConnectorModel[] = [{
// Name of the connector
id: "connector1",
// Sets source and target points
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
constraints:
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
}];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} connectors={connectors}
segmentCollectionChange={
(args:ISegmentCollectionChangeEventArgs) =>{
if (args.type === 'Addition') {
console.log('segmentCollectionChange');
//Customize
}
}
}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Segment Change Event
Triggers when connector segments are adjusted or edited by the user. This event enables custom validation and modification of segment positions during interactive editing.
The following code example demonstrates how to handle the segmentChange event in the diagram:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,ConnectorConstraints,Diagram, ConnectorEditing} from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let connectors = [{
// Name of the connector
id: "connector1",
// Sets source and target points
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
constraints:
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
}];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} connectors={connectors}
segmentChange={
(args) =>{
console.log('segmentChange');
}
}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,ConnectorConstraints,Diagram, ConnectorEditing,ConnectorModel,ISegmentChangeEventArgs} from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let connectors:ConnectorModel[] = [{
// Name of the connector
id: "connector1",
// Sets source and target points
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
constraints:
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
}];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} connectors={connectors}
segmentChange={
(args:ISegmentChangeEventArgs) =>{
console.log('segmentChange');
}
}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);You can prevent segment editing by setting the cancel property of SegmentChangeEventArgs to true, as shown in the code snippet below:
segmentChange={ (args) => {
if (args.state === 'Start') {
//Prevents the segment editing
args.cancel = true;
}
}
},Collection Change Event
Triggers when connectors are added to or removed from the diagram. This event is fundamental for tracking diagram modifications and implementing undo/redo functionality or change tracking systems.
The following code example demonstrates how to handle the collectionChange event in the diagram.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let diagramInstance;
let connectors = [{
// Name of the connector
id: "connector1",
// Sets source and target points
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
},
{
id: 'connector2',
type: 'Straight',
sourcePoint: {
x: 300,
y: 100,
},
targetPoint: {
x: 400,
y: 200,
},
},
];
function App() {
const add = () => {
// diagramInstance.add(connectors[0])
let connector = {
type: 'Straight',
sourcePoint: {
x: 100,
y: 300,
},
targetPoint: {
x: 200,
y: 400,
},
};
diagramInstance.add(connector);
}
const remove = () => {
let connector =
diagramInstance.selectedItems.connectors.length > 0
? diagramInstance.selectedItems.connectors[0]
: diagramInstance.connectors[0];
diagramInstance.remove(connector)
}
return (
<div>
<button onClick={add}>Add</button>
<button onClick={remove}>Remove</button>
<DiagramComponent id="container" width={'100%'}
ref={(diagram) => (diagramInstance = diagram)}
height={'600px'} connectors={connectors}
collectionChange={(args) => {
console.log('collectionChange');
}
}
/></div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, ConnectorModel, ICollectionChangeEventArgs } from "@syncfusion/ej2-react-diagrams";
let diagramInstance: DiagramComponent;
let connectors: ConnectorModel[] = [{
// Name of the connector
id: "connector1",
// Sets source and target points
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
},
{
id: 'connector2',
type: 'Straight',
sourcePoint: {
x: 300,
y: 100,
},
targetPoint: {
x: 400,
y: 200,
},
},
];
function App() {
const add = () => {
// diagramInstance.add(connectors[0])
let connector = {
type: 'Straight',
sourcePoint: {
x: 100,
y: 300,
},
targetPoint: {
x: 200,
y: 400,
},
};
diagramInstance.add(connector);
}
const remove = () => {
let connector =
diagramInstance.selectedItems.connectors.length > 0
? diagramInstance.selectedItems.connectors[0]
: diagramInstance.connectors[0];
diagramInstance.remove(connector)
}
return (
<div>
<button onClick={add}>Add</button>
<button onClick={remove}>Remove</button>
<DiagramComponent id="container" width={'100%'}
ref={(diagram) => (diagramInstance = diagram)}
height={'600px'} connectors={connectors}
collectionChange={(args: ICollectionChangeEventArgs) => {
console.log('collectionChange');
}
}
/></div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);You can prevent changes to the diagram collection, such as adding or deleting connectors, by setting the cancel property of CollectionChangeEventArgs to true, as shown in the code snippet below:
collectionChange={ (args) => {
if (args.state === 'Changing') {
//Prevents collection change - Prevents Adding or deleting connectors
args.cancel = true;
}
}
},