How to copy paste nodes on current mouse position using context menu in Angular Diagram?

This article explains how to copy and paste nodes at the current mouse position using the context menu in Angular Diagram. In Syncfusion® Angular Diagram, you can utilize context menus to perform various operations on diagram elements. Context menus are triggered by right-clicking on diagram elements and can contain both default and custom menu items. You can configure these menu items through the contextMenuSettings property.

Initializing the Context Menu:

The following code illustrates how to enable the default context menu items.

<div>
    <ejs-diagram
         #diagram
         id="diagram"
         width="100%"
         height="1000px"
         [nodes]="nodes"
         [contextMenuSettings]="contextMenuSettings"
         (contextMenuOpen)="contextMenuOpen($event)"
         (contextMenuClick)="contextMenuClick($event)"
       >
       </ejs-diagram>
  </div> 

 public contextMenuSettings: ContextMenuSettingsModel = {
 //Enables the context menu
   show: true,
 };

This code sets the show property to true, enabling the default context menu items.

Initializing a Custom Context Menu:

To define a custom context menu, specify the menu items within the contextMenuSettings property. You can enable or disable default context menu items by setting the showCustomMenuOnly property to true.

 public contextMenuSettings: ContextMenuSettingsModel = {
   show: true,
   //custom menu items
   items: [
     {
       text: 'cut',
       id: 'cut',
       target: '.e-diagramcontent',
     },
     {
       text: 'copy',
       id: 'copy',
       target: '.e-diagramcontent',
     },
     {
       text: 'Paste',
       id: 'Paste',
       target: '.e-diagramcontent',
     },
   ],
   showCustomMenuOnly: true,
 }; 

Multiple nodes copy-paste:

When a user right-clicks on a node in the diagram, the contextMenuOpen event is triggered. This event provides information about the selected object, allowing you to customize context menu item visibility. Interaction with context menu items is managed through the contextMenuClick event, enabling you to respond to user actions.

The code below handles the contextMenuClick event, managing cut, copy, and paste operations:

   public contextMenuClick(args: MenuEventArgs): void {
   switch (args.item.id) {
     case 'cut':
     case 'copy':
       this.copyNodes = [];
       if (
         this.diagram.selectedItems.nodes &&
         this.diagram.selectedItems.nodes.length > 0
       ) {
         for (
           let i: number = 0;
           i < this.diagram.selectedItems.nodes.length;
           i++
         ) {
           this.copyNodes.push(this.diagram.selectedItems.nodes[i]);
           if (args.item.id == 'cut') {
             // Remove nodes individually only for 'cut' operation
             this.diagram.remove(this.diagram.selectedItems.nodes[i]);
           }
         }
       }
       break;
     case 'Paste':
       if (this.copyNodes.length > 0) {
         for (let i: number = 0; i < this.copyNodes.length; i++) {
           let pasteNode: any[] = [
             {
               id: randomId() + i,
               width: this.copyNodes[i].width,
               height: this.copyNodes[i].height,
               shape: this.copyNodes[i].shape,
               offsetX: (args.event as any).pageX,
               offsetY: (args.event as any).pageY,
             },
           ];
           if (i > 0) {
             pasteNode[0].offsetX =
               (args.event as any).pageX +
               (this.copyNodes[i].offsetX - this.copyNodes[0].offsetX);
             pasteNode[0].offsetY =
               (args.event as any).pageY +
               (this.copyNodes[i].offsetY - this.copyNodes[0].offsetY);
           }
           this.diagram.add(pasteNode[0]);
         }
       }
       break;
   }
 }

The code maintains an array named copyNodes to store copied objects when the ‘cut’ or ‘copy’ items are clicked. Additionally, it removes the selected object if the action is ‘cut’.

When the ‘paste’ item is clicked, the code iterates through the copyNodes collection and creates new nodes with properties such as height, width, and shape similar to those in the copyNodes collection. The new nodes are positioned at the mouse point using the pageX and pageY properties of the contextMenuClick event arguments.

In scenarios where multiple items are copied, the code ensures proper separation between them by calculating new offsetX and offsetY values for each node. These values are derived by subtracting the pageX and pageY coordinates of the first node from subsequent nodes.

Sample:

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

Conclusion

We hope you enjoyed learning about how to copy-paste nodes at the current mouse position using the context menu in Angular Diagram.

You can refer to our Angular 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 Angular 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!