Prevent deletion in the React Diagram component

[Rodrigo]

I want to prevent the immediate deletion of the node when the delete key is pressed. I need to trigger some kind of a modal to confirm the delete action and then, if it was confirmed, proceed with the deletion.

[Balasubramanian Manikandan]

Use commandManager to prevent deletion of a node.  We have created a sample in which we can delete node1 and prevent delete action for other nodes. Refer to the below mentioned code example, documentation and sample.

Code Example:

function getCommandManagerSettings() {

  let commandManager = {

    commands: [

      {

        name: 'Delete',

        canExecute: () => {

          if (

            diagramInstance.selectedItems.nodes.length > 0 ||

            diagramInstance.selectedItems.connectors.length > 0

          ) {

            if (diagramInstance.selectedItems.nodes[0].id == 'node1') {

              return true;

            }

          }

          return false;

        },

        execute: () => {

          diagramInstance.remove();

        },

        gesture: { key: Keys.Delete },

      },

    ],

  };

  return commandManager;

}

Documentation Link:

https://ej2.syncfusion.com/react/documentation/diagram/commands/#command-manager

 

Sample:

https://stackblitz.com/edit/react-nju32y-hbq2av?file=index.js