Handling Annotation Events in Diagram Component
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 an annotation is focused.
- KeyUp - Triggered when a pressed key is released while an annotation is focused.
- DoubleClick - Triggered when double-clicking on annotations, nodes, connectors, or diagram surface.
- 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. 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 />);Double Click 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. 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:
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: function (args) {
// Prevents any new content from being added to the annotation
args.cancel = true;
},Selection Change 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.
Preventing Selection
Selection can be prevented by setting the cancel property of SelectionChangeEventArgs to true during the selection change process:
selectionChange: function (args) {
if (args.state === 'Changing') {
// Prevents selection
args.cancel = true;
}
}