Label Events in React Diagram
21 Aug 202618 minutes to read
Annotations in React Diagram components are text labels that can be added to nodes and connectors to provide additional information. When users interact with these annotations, various events are triggered that allow developers to customize behavior and respond to user actions.
The diagram component provides several annotation-related events that fire during different interaction scenarios:
- KeyDown - Triggered when any key is pressed while the diagram (or an annotation) has focus.
- KeyUp - Triggered when a pressed key is released while the diagram (or an annotation) has focus.
- DoubleClick - Triggered when double-clicking on diagram elements such as nodes, connectors, or the diagram surface; activates annotation editing if an annotation is present.
- TextEdit - Triggered when annotation text editing is completed and focus is lost.
- SelectionChange - Triggered when annotations are selected or deselected.
KeyDown Event
The keyDown event triggers whenever any key is pressed while interacting with the diagram. This event provides access to key information and allows modification of diagram elements based on keyboard input.
The event arguments include details about the pressed key, modifier keys, and the current diagram state. Useful members on IKeyEventArgs include key (the pressed key), keyCode, altKey, ctrlKey, and shiftKey. The following example demonstrates capturing the keyDown event to modify a node’s fill color with each key press:
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 = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
// Sets the annotation for the node
annotations: [{
content: 'Annotation',
}]
}];
let color = 'pink';
// initialize Diagram component
function App() {
const keydown=() => {
if (color === 'pink') {
color = 'yellow';
diagramInstance.nodes[0].style.fill = 'red';
diagramInstance.dataBind();
} else {
color = 'pink';
diagramInstance.nodes[0].style.fill = 'pink';
diagramInstance.dataBind();
}
}
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} keyDown={keydown}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
let diagramInstance: DiagramComponent;
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
// Sets the annotation for the node
annotations: [{
content: 'Annotation',
}]
}];
let color = 'pink';
// initialize Diagram component
function App() {
const keydown=() => {
if (color === 'pink') {
color = 'yellow';
diagramInstance.nodes[0].style.fill = 'red';
diagramInstance.dataBind();
} else {
color = 'pink';
diagramInstance.nodes[0].style.fill = 'pink';
diagramInstance.dataBind();
}
}
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} keyDown={keydown}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);KeyUp Event
The keyUp event triggers when a pressed key is released. This event is useful for handling scenarios where the complete key press cycle (press and release) needs to be captured, such as implementing keyboard shortcuts or text input validation.
Unlike the keyDown event, keyUp ensures that the key action has been fully completed. The following example shows how to capture the keyUp event and modify the fill color of a node:
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 = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
// Sets the annotation for the node
annotations: [{
content: 'Annotation',
}]
}];
let color = 'pink';
// initialize Diagram component
function App() {
const keyup=() => {
if (color === 'pink') {
color = 'yellow';
diagramInstance.nodes[0].style.fill = 'red';
diagramInstance.dataBind();
} else {
color = 'pink';
diagramInstance.nodes[0].style.fill = 'pink';
diagramInstance.dataBind();
}
}
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} keyUp={keyup}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
let diagramInstance: DiagramComponent;
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
// Sets the annotation for the node
annotations: [{
content: 'Annotation',
}]
}];
let color = 'pink';
// initialize Diagram component
function App() {
const keyup=() => {
if (color === 'pink') {
color = 'yellow';
diagramInstance.nodes[0].style.fill = 'red';
diagramInstance.dataBind();
} else {
color = 'pink';
diagramInstance.nodes[0].style.fill = 'pink';
diagramInstance.dataBind();
}
}
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} keyUp={keyup}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);DoubleClick Event
The doubleClick event triggers when users double-click on nodes, connectors, or the diagram surface. This interaction automatically activates annotation editing mode for the clicked element, allowing users to modify text content directly.
The event provides information about the clicked element, mouse position, and current selection state. Useful members on IDoubleClickEventArgs include element (the clicked diagram model), source, position, and cause. Developers can use this event to implement custom behaviors or prevent default annotation editing when needed:
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 = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
// Sets the annotation for the node
annotations: [{
content: 'Annotation',
}]
}];
// initialize Diagram component
function App() {
const doubleClick=() => {
// Handle double-click event for custom logic
}
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} doubleClick={doubleClick}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
// Sets the annotation for the node
annotations: [{
content: 'Annotation',
}]
}];
// initialize Diagram component
function App() {
const doubleClick=() => {
// Handle double-click event for custom logic
}
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} doubleClick={doubleClick}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);TextEdit Event
The textEdit event triggers when annotation text editing is completed and focus moves away from the text editor. This event occurs after users finish modifying annotation content and provides access to both the old and new text values.
This event is particularly useful for implementing text validation, formatting, or saving changes to external data sources. The handler receives an ITextEditEventArgs object with newValue, oldValue, annotation, and cancel (set to true to discard the change).
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 = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
// Sets the annotation for the node
annotations: [{
content: 'Annotation',
}]
}];
// initialize Diagram component
function App() {
const textEdit=() => {
// Handle text-edit event for custom logic
}
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} textEdit={textEdit}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
// Sets the annotation for the node
annotations: [{
content: 'Annotation',
}]
}];
// initialize Diagram component
function App() {
const textEdit=() => {
// Handle text-edit event for custom logic
}
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} textEdit={textEdit}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Preventing Text Changes
The textEdit event allows prevention of text modifications by setting the cancel property to true. This is useful for implementing validation rules or maintaining read-only annotations:
textEdit={(args) => {
// Prevents any new content from being added to the annotation
args.cancel = true;
}}SelectionChange Event
The selectionChange event triggers when annotations of nodes or connectors are selected or deselected within the diagram. This event provides detailed information about the selection state changes and affected elements.
The event is useful for implementing custom selection behaviors, updating property panels, or synchronizing selection state with other application components.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let node = [{
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
annotations: [{ content: 'Annotation' }]
}];
function App() {
const selectionChange = (args) => {
// Handle selection change for annotations
};
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={node}
selectionChange={selectionChange}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Preventing Selection
Selection can be prevented by setting the cancel property of ISelectionChangeEventArgs to true during the selection change process:
selectionChange={(args) => {
if (args.state === 'Changing') {
// Prevents selection
args.cancel = true;
}
}}