How to Prevent Copy/Paste of Vue Diagram Elements?

In the Syncfusion® Vue Diagram, you can use the Command Manager to map and bind command execution to specific key gestures. The Command Manager allows you to define custom commands with properties such as execute, canExecute, gesture, parameter, and name.

To restrict the Copy/Paste using the Command Manager, you can follow these steps:

Command Manager Configuration:
• Define the commandManager property to manage commands for the diagram.
• Inside the commands array, specify a custom command name, canExecute function, and gesture property.

canExecute Function:
• The canExecute function is responsible for determining whether the command can be executed at the current moment.
• Within the function, access the diagram instance and check the selection list.
• If there are selected nodes or connectors in the diagram, return false to indicate that the copy/paste command cannot be executed.
• Otherwise, return true to allow the execution of the copy/paste command.

gesture Property:
• Specify the gesture property within the command configuration to define the key gesture for the command.

Here’s an example of the code:

<ejs-diagram
   style="display: block"
   ref="diagramObj"
   id="diagram"
   :width="width"
   :height="height"
   :nodes="nodes"
   :connectors="connectors"
   :getNodeDefaults="getNodeDefaults"
   :getConnectorDefaults="getConnectorDefaults"
   :commandManager="commandManager"
></ejs-diagram> 

commandManager: {
       commands: [
         {
           name: 'copy',
           canExecute: function () {
             if (
               diagramInstance.selectedItems.nodes.length > 0 ||
               diagramInstance.selectedItems.connectors.length > 0
             ) {
               return false;
             }
           },
           execute: function () {
             if (
               diagramInstance.selectedItems.nodes.length > 0 ||
               diagramInstance.selectedItems.connectors.length > 0
             ) {
               diagramInstance.copy();
             }
           },
           gesture: {
             key: Keys.C,
             keyModifiers: KeyModifiers.Control,
           },
         },
         {
           name: 'paste',
           canExecute: function () {
             if (
               diagramInstance.selectedItems.nodes.length > 0 ||
               diagramInstance.selectedItems.connectors.length > 0
             ) {
               return false;
             }
           },
           execute: function () {
             if (
               diagramInstance.selectedItems.nodes.length > 0 ||
               diagramInstance.selectedItems.connectors.length > 0
             ) {
               diagramInstance.paste();
             }
           },
           gesture: {
             key: Keys.V,
             keyModifiers: KeyModifiers.Control,
           },
         },
       ],
     }, 

Sample

Conclusion
I hope you enjoyed learning how to prevent copy/paste of Vue Diagram elements.
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!