How to Disable Copy Action on Specific Node in React Diagram?

This article explains how to disable the copy action on a specific node in a React diagram.

In the Syncfusion® React Diagrams, there is no built-in option to prevent copying a specific node using the default Ctrl+C behavior. However, you can customize the behavior by leveraging the commandManager functionality. This customization enables you to conditionally execute commands, such as allowing or restricting the copy operation based on the properties of the node.
Below is a code sample that demonstrates how to implement the above functionality:

1. A custom command named customCopy is defined in the commandManager. It utilizes the canExecute function to check the Copy flag before allowing the copy operation.
2. Each node uses the addInfo property to store a Copy flag. This flag determines whether the node can be copied.

// Function to define the command manager settings
function getCommandManagerSettings() {
   let commandManager = {
       commands: [{
           name: 'customCopy',
           parameter: 'node',
            // Define whether the command can be executed at the current moment
           canExecute: function () {
               //Defines that the clone command can be executed, if and only if the selection list is not empty.
               if (diagramInstance.selectedItems.nodes.length > 0 &&
                   diagramInstance.selectedItems.nodes[0].addInfo.Copy) {
                   return true;
               }
               return false;
           },
           //execute commands if canExecute returns true
           execute: function () {
               //Logic to clone the selected element
               console.log('copy triggered')
               diagramInstance.copy()

           },
           //The gesture property specifies that this command should be triggered using Ctrl+C.
           gesture: {
               key: Keys.C,
               keyModifiers: KeyModifiers.Control
           }
       }
       ]
   };
   return commandManager;
}

// Diagram component with command manager included
<DiagramComponent id="diagram" ref={diagram => (diagramInstance = diagram)} width={"100%"} height={"499px"} nodes={nodes}
 commandManager={getCommandManagerSettings()}>
</DiagramComponent>

Refer to the working sample for additional details and implementation: Click Here

Conclusion

We hope you enjoyed learning about how to disable the copy action on a specific node in React Diagram.

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React 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!