How to prevent deletion of node or connector in React Diagram using commandManager?

In the Syncfusion® React Diagram, you can use the Command Manager to map and bind command execution to specific key gestures. The Command Manager allows you to define custom commands with properties such as execute, canExecute, gesture, parameter, and name.

To restrict the Delete key press using the Command Manager, you can follow these steps:

Command Manager Configuration:

• Define the commandManager property to manage commands for the diagram.
• Inside the commands array, specify a custom command name, canExecute function, and gesture property.

canExecute Function:

• The canExecute function is responsible for determining whether the command can be executed at the current moment.
• Within the function, access the diagram instance and check the selection list.
• If there are selected nodes or connectors in the diagram, return false to indicate that the Delete command cannot be executed.
• Otherwise, return true to allow the execution of the Delete command.

gesture Property:
• Specify the gesture property within the command configuration to define the key gesture for the command.
• In this case, set the key property to the Keys.Delete to represent the Delete key.

Here’s an example of the code:

<DiagramComponent id="diagram" ref={diagram => (diagramInstance = diagram)} width={"100%"} height={"499px"} nodes={nodes} connectors={connectors} 
       commandManager={{
         commands: [
           {
             name: 'deletefn',
              //Method to define whether the command can be executed at the current moment.
             canExecute: function () {
             //Defines that the delete command can be executed only if the selection list is not empty.
               if (
                 diagramInstance.selectedItems.nodes.length > 0 ||
                 diagramInstance.selectedItems.connectors.length > 0
               ) {
                 return false;
               }
               return true;
             },
           //Defines that the delete command has to be executed on the recognition of the key press.
             gesture: {
               key: Keys.Delete,
             }
           },
         ]
       }} >
         <Inject services={[UndoRedo]} />
</DiagramComponent>

You can find a working example of this implementation in the provided sample on StackBlitz.

Sample

Conclusion
I hope you enjoyed learning about how to prevent deletion of node or connector in React Diagram using commandManager.

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentations. You can also explore our React Diagram example to understand how to present and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our React Spreadsheet and other components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!