How To Perform Interactions In The React Diagram Component

A quick-start project that shows how to interact with the Syncfusion React Diagram Component. Learn about various interactions such as selection, dragging, resizing, rotating nodes, editing texts, deletion, and how to restrict interactions. Also learn how to perform zooming, panning, and undo-redo operations.

The React Diagram is a feature-rich library for creating, visualizing, and editing interactive diagrams. It lets users create flowcharts, organizational charts, mind maps, and BPMN charts using code or a visual interface. In this visualization tool, graphical objects are represented as nodes, providing flexibility and easy manipulation on the diagram page.

We can utilize various predefined standard shapes or create and incorporate custom shapes. We can populate diagrams with nodes and connectors created and positioned based on data from data sources. Without having to write any code, easily convert, map, and consume data in any format by setting a few properties. Design and apply the node UI template across multiple nodes, ensuring consistency throughout the diagram.

We can perform interactions for nodes and connectors using mouse and keyboard shortcut keys. Interactions are shown visually in the elements. For example, when a node is selected, the selector visually represents the selected node. It behaves like a container and allows users to update the size, position, and rotation angle of the selected elements through interaction or programmatically. Single or multiple elements can be selected at a time. Interactions can be customized using the constraints property. You can add or remove interactions using the NodeConstraints and ConnectorConstraints enum. Undo and redo operations can be performed by injecting the UndoRedo module.

Documentations: https://ej2.syncfusion.com/react/documentation/diagram/interaction

Demo: https://ej2.syncfusion.com/react/demos/#/material3/diagram/key-board-functions

Project prerequisites

Make sure that you have the compatible versions of Visual Studio Code, and NodeJS or a later version on your machine before starting to work on this project.

How to run this application

To run this application, follow these steps:

• Step 1:

   Clone the repository.
  

  git clone https://github.com/SyncfusionExamples/how-to-perform-interactions-in-the-react-diagram
  

• Step 2:

   Open the application folder, install the dependencies and run the application.
  

  cd how-to-perform-interactions-in-the-react-diagram
  npm install
  npm start