Events of nodes in React Diagram control

11 Dec 202424 minutes to read

Diagram provides some events support for node that triggers when interacting with the node.

Click event

Triggers when the node is clicked. The following code example explains how to get the click event in the diagram.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  DiagramComponent,
  Node,
  Connector,
} from '@syncfusion/ej2-react-diagrams';
// A node is created and stored in nodes array.
let node = [
  {
    id: 'Start',
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    annotations: [
      {
        content: 'Click node',
      },
    ],
  },
];

let connectors = [
  {
    // Unique name for the connector
    id: 'connector1',
    sourceID: 'Start',
    targetPoint: { x: 250, y: 450 },
    type: 'Orthogonal',
    annotations: [
      {
        content: 'Click Connector',
      },
    ],
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
      connectors={connectors}
      click={(args) => {
        let element = 'Diagram';
        if (args.actualObject instanceof Node) {
          element = 'Node';
        }
        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,
  Node,
  NodeModel,
  Connector,
  ConnectorModel,
  IClickEventArgs
} from '@syncfusion/ej2-react-diagrams';
// A node is created and stored in nodes array.
let node: NodeModel[] = [
  {
    id: 'Start',
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    annotations: [
      {
        content: 'Click node',
      },
    ],
  },
];

let connectors: ConnectorModel[] = [
  {
    // Unique name for the connector
    id: 'connector1',
    sourceID: 'Start',
    targetPoint: { x: 250, y: 450 },
    type: 'Orthogonal',
    annotations: [
      {
        content: 'Click Connector',
      },
    ],
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
      connectors={connectors}
      click={(args: IClickEventArgs) => {
        let element: string = 'Diagram';
        if (args.actualObject instanceof Node) {
          element = 'Node';
        }
        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 the node is selected in diagram.
The following code example explains how to get the selectionChange event in the diagram.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  DiagramComponent,
} from '@syncfusion/ej2-react-diagrams';
// A node is created and stored in nodes array.
let node = [
  {
    id: 'Start',
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
      selectionChange={(args) => {
        if (args.state === 'Changed') {
          console.log('Selection change');
        }
      }}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  DiagramComponent,
  NodeModel,
  ISelectionChangeEventArgs
} from '@syncfusion/ej2-react-diagrams';
// A node is created and stored in nodes array.
let node: NodeModel[] = [
  {
    id: 'Start',
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
      selectionChange={(args: ISelectionChangeEventArgs) => {
        if (args.state === 'Changed') {
          console.log('Selection change');
        }
      }}
    />
  );
}
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: function (args: ISelectionChangeEventArgs) {
    if (args.state == 'Changing') {
      //Prevents selection
      args.cancel = true;
    }
  },

Position change event

While dragging the node through interaction, the position change event can be used to do the customization.
The following code example explains how to get the positionChange event in the diagram.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent } from '@syncfusion/ej2-react-diagrams';
// A node is created and stored in nodes array.
let node = [
  {
    id: 'Start',
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
      positionChange={(args) => {
        if (args.state === 'Completed') {
          console.log('Position change');
        }
      }}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  DiagramComponent,
  NodeModel,
  IDraggingEventArgs
} from '@syncfusion/ej2-react-diagrams';
// A node is created and stored in nodes array.
let node: NodeModel[] = [
  {
    id: 'Start',
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
      positionChange={(args: IDraggingEventArgs) => {
        if (args.state === 'Completed') {
          console.log('Position change');
        }
      }}
    />
  );
}
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: function (args: IDraggingEventArgs) {
    if (args.state == 'Progress') {
      //Prevents dragging
      args.cancel = true;
    }
  },

Size change event

While resizing the node during the interaction, the size change event can be used to do the customization.
The following code example explains how to get the sizeChange event in the diagram.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent } from '@syncfusion/ej2-react-diagrams';
// A node is created and stored in nodes array.
let node = [
  {
    id: 'Start',
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
      sizeChange={(args) => {
        if (args.state === 'Completed') {
          console.log('Size change');
        }
      }}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  DiagramComponent,
  NodeModel,
  ISizeChangeEventArgs
} from '@syncfusion/ej2-react-diagrams';
// A node is created and stored in nodes array.
let node: NodeModel[] = [
  {
    id: 'Start',
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
      sizeChange={(args: ISizeChangeEventArgs) => {
        if (args.state === 'Completed') {
          console.log('Size change');
        }
      }}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

You can prevent resizing by setting the cancel property of SizeChangeEventArgs to true, as shown in the code snippet below.

    sizeChange: function (args: ISizeChangeEventArgs) {
    if (args.state == 'Progress') {
      //Prevents resizing
      args.cancel = true;
    }
  },

Rotate change event

While rotating the node during the interaction, the rotate change event can be used to do the customization.
The following code example explains how to get the rotateChange event in the diagram.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent } from '@syncfusion/ej2-react-diagrams';
// A node is created and stored in nodes array.
let node = [
  {
    id: 'Start',
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
      rotateChange={(args) => {
        if (args.state === 'Completed') {
          console.log('Rotate change');
        }
      }}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  DiagramComponent,
  NodeModel,
  IRotationEventArgs
} from '@syncfusion/ej2-react-diagrams';
// A node is created and stored in nodes array.
let node: NodeModel[] = [
  {
    id: 'Start',
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
      rotateChange={(args: IRotationEventArgs) => {
        if (args.state === 'Completed') {
          console.log('Rotate change');
        }
      }}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

You can prevent rotation by setting the cancel property of RotationEventArgs to true, as shown in the code snippet below.

  rotateChange: function (args: IRotationEventArgs) {
    if (args.state == 'Progress') {
      //Prevents rotation
      args.cancel = true;
    }
  },

Property change event

Triggers when there is any property change occurred for the node. The following code example explains how to get the propertyChange event in the diagram.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent } from '@syncfusion/ej2-react-diagrams';
// A node is created and stored in nodes array.
let node = [
  {
    id: 'Start',
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
      propertyChange={(args) => {
        console.log(args.newValue);
    }}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  DiagramComponent,
  NodeModel,
  IPropertyChangeEventArgs
} from '@syncfusion/ej2-react-diagrams';
// A node is created and stored in nodes array.
let node: NodeModel[] = [
  {
    id: 'Start',
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
      propertyChange={(args: IPropertyChangeEventArgs) => {
        console.log(args.newValue);
    }}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

Collection change event

Triggers when the node is added or removed in diagram dynamically.
The following code example explains how to get 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;
// A node is created and stored in nodes array.
let node = [
  {
    id: 'Start',
    // Position of the node
    offsetX: 250,
    offsetY: 150,
    // Size of the node
    width: 100,
    height: 100,
  },
];
var nodes = [
  {
    id: 'node1',
    offsetX: 140,
    offsetY: 250,
    annotations: [{ content: 'node1' }],
  },
  {
    id: 'node2',
    offsetX: 250,
    offsetY: 250,
    annotations: [{ content: 'node2' }],
  },
  {
    id: 'node3',
    offsetX: 360,
    offsetY: 250,
    annotations: [{ content: 'node3' }],
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      ref={(diagram) => (diagramInstance = diagram)}
      width={'100%'}
      height={'600px'}
      nodes={node}
      collectionChange={(args) => {
        if (args.state === 'Changed') {
          console.log('Collection change');
        }
      }}
      created={() => {
        // Add collection of nodes
        diagramInstance.addElements(nodes);
      }}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, NodeModel, ICollectionChangeEventArgs } from '@syncfusion/ej2-react-diagrams';
let diagramInstance: DiagramComponent;
// A node is created and stored in nodes array.
let node: NodeModel[]= [
  {
    id: 'Start',
    // Position of the node
    offsetX: 250,
    offsetY: 150,
    // Size of the node
    width: 100,
    height: 100,
  },
];
var nodes: NodeModel[] = [
  {
    id: 'node1',
    offsetX: 140,
    offsetY: 250,
    annotations: [{ content: 'node1' }],
  },
  {
    id: 'node2',
    offsetX: 250,
    offsetY: 250,
    annotations: [{ content: 'node2' }],
  },
  {
    id: 'node3',
    offsetX: 360,
    offsetY: 250,
    annotations: [{ content: 'node3' }],
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      ref={(diagram) => (diagramInstance = diagram)}
      width={'100%'}
      height={'600px'}
      nodes={node}
      collectionChange={(args: ICollectionChangeEventArgs) => {
        if (args.state === 'Changed') {
          console.log('Collection change');
        }
      }}
      created={() => {
        // Add collection of nodes
        diagramInstance.addElements(nodes);
      }}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

You can prevent changes to the diagram collection, such as adding or deleting nodes, by setting the cancel property of CollectionChangeEventArgs to true, as shown in the code snippet below.

    collectionChange: function (args: ICollectionChangeEventArgs) {
    if (args.state == 'Changing') {
      //Prevents collection change - Prevents Adding or deleting nodes
      args.cancel = true;
    }
  },

Mouse Events

Mouse enter event

The mouseEnter is triggered when the mouse enters the node surface.

Mouse over event

The mouseOver is triggered when the mouse hover over the node surface.

Mouse leave event

The mouseLeave is triggered when the mouse leaves the node surface.

The following code example shows how to handle these events in the diagram and change the color of a node based on these events:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent } from '@syncfusion/ej2-react-diagrams';
let diagramInstance;
// A node is created and stored in nodes array.
let node = [
  {
    id: 'Start',
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      ref={(diagram) => (diagramInstance = diagram)}
      width={'100%'}
      height={'600px'}
      nodes={node}
      mouseEnter={(args) => {
        (args.actualObject).style.fill = 'red';
      }}
      mouseOver={(args) => {
        //Customize
      }}
      mouseLeave={(args) => {
        (args.element).style.fill = 'none';
      }}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, NodeModel, MouseEventArgs } from '@syncfusion/ej2-react-diagrams';
let diagramInstance: DiagramComponent;
// A node is created and stored in nodes array.
let node: NodeModel[] = [
  {
    id: 'Start',
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      ref={(diagram) => (diagramInstance = diagram)}
      width={'100%'}
      height={'600px'}
      nodes={node}
      mouseEnter={(args: MouseEventArgs) => {
        (args.actualObject as NodeModel).style.fill = 'red';
        diagramInstance.dataBind();
      }}
      mouseOver={(args: MouseEventArgs) => {
        //Customize
      }}
      mouseLeave={(args: MouseEventArgs) => {
        ((args as any).element as NodeModel).style.fill = 'none';
      }}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);