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

This article explains how to prevent the deletion of a node or connector in a JavaScript Diagram using the Command Manager. In the Syncfusion® JavaScript 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:

var diagram = new ej.diagrams.Diagram({
 width: '100%',
 height: '645px',
 nodes: nodes,
 connectors: connections,
});
diagram.appendTo('#diagram');

diagram.commandManager = {
 commands: [
     {
         name: 'leftChild',
          // 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 (
             diagram.selectedItems.nodes.length > 0 ||
             diagram.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: ej.diagrams.Keys.Delete,
         }
     },
     
 ]
};

Refer to the working sample for additional details and implementation: Sample

Conclusion

We hope you enjoyed learning about how to prevent the deletion of a node or connector in the JavaScript Diagram using the commandManager.

You can refer to our JavaScript Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, as well as how to quickly get started with configuration specifications. You can also explore our JavaScript Diagram example to understand how to create 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 other controls.
​
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!