How to Disable Copy Action on Specific Node in Vue Diagram?
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:
- 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.
- 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!