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

In this article, you can learn about how to disable the copy action on a specific node in an Angular diagram. In Syncfusion® Angular Diagram, 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
 public commandManger: any = {
   commands: [
     {
       name: 'customCopy',
       parameter: 'node',
       //Define whether the command can be executed at the current moment
       canExecute: () => {
         if (this.diagram.selectedItems.nodes.length > 0 &&
             (this.diagram.selectedItems.nodes[0].addInfo as any).Copy) {
           return true;
         }
         return false;
       },
       //execute commands if canExecute returns true
       execute: () => {
         console.log('copy triggered');
         this.diagram.copy();
       },
       //The gesture property specifies that this command should be triggered using Ctrl+C.
       gesture: {
         key: Keys.C,
         keyModifiers: KeyModifiers.Control,
       },
     },
   ],
 };
 

// Diagram component with command manager included
<ejs-diagram #diagram id="diagram" width="100%" height="500px" [nodes]="nodes"
    [commandManager]='commandManger'>
</ejs-diagram>

Sample: Click Here

Conclusion

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

You can refer to our Angular 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 Angular Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to explore 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!