Articles in this section
Category / Section

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

3 mins read

In the Syncfusion® Vue 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.
data: function() {
 return {
   width: "100%",
   height: "499px",
   //To define the command manager settings
   commandManager: {
     commands: [
       {
         name: "customCopy",
         parameter: "node",
         //Define whether the command can be executed at the current moment
         canExecute: () => {
           return (
             diagramInstance.selectedItems.nodes.length > 0 &&
             diagramInstance.selectedItems.nodes[0].addInfo.Copy
           );
         },
         //execute commands if canExecute returns true
         execute: () => {
           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,
         },
       },
     ],
   },

 };
}; 


// Diagram component with command manager included
<template>
     <ejs-diagram
       style="display: block"
       ref="diagramObj"
       id="diagram"
       :commandManager="commandManager"
     ></ejs-diagram>
</template>

Sample: Click Here

Conclusion
I hope you enjoyed learning about how to disable copy action on specific node in Vue Diagram.

You can refer to our Vue 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 Vue 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, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied