refactor: Disable contextmenu during resize & drag

Author: rkaraivanov

src/components/common/controllers/drag.ts

@@ -86,7 +86,11 @@ type DragControllerConfiguration = {
   cancel?: DragCancelCallback;
 };
 
-const additionalEvents = ['pointermove', 'lostpointercapture'] as const;
+const additionalEvents = [
+  'pointermove',
+  'lostpointercapture',
+  'contextmenu',
+] as const;
 
 class DragController implements ReactiveController {
   private _host: ReactiveControllerHost & LitElement;
@@ -193,15 +197,13 @@ class DragController implements ReactiveController {
     this._host.addEventListener('dragstart', this);
     this._host.addEventListener('touchstart', this, { passive: false });
     this._host.addEventListener('pointerdown', this);
-    globalThis.addEventListener('contextmenu', this._handleContextMenu);
   }
 
   /** @internal */
   public hostDisconnected(): void {
     this._host.removeEventListener('dragstart', this);
     this._host.removeEventListener('touchstart', this);
     this._host.removeEventListener('pointerdown', this);
-    globalThis.removeEventListener('contextmenu', this._handleContextMenu);
     this._setDragCancelListener(false);
     this._removeGhost();
   }
@@ -215,6 +217,8 @@ class DragController implements ReactiveController {
     switch (event.type) {
       case 'touchstart':
       case 'dragstart':
+      // Prevent contextmenu default behavior during drag
+      case 'contextmenu':
         event.preventDefault();
         break;
       case 'keydown':
@@ -286,11 +290,6 @@ class DragController implements ReactiveController {
     }
   }
 
-  private _handleContextMenu(event: MouseEvent): void {
-    // Prevents the default context menu while dragging
-    event.preventDefault();
-  }
-
   // #endregion
 
   private _setDragCancelListener(enabled = true): void {

src/components/resize-container/resize-controller.ts

@@ -4,7 +4,11 @@ import { findElementFromEventPath } from '../common/util.js';
 import { createDefaultGhostElement, getDefaultLayer } from './default-ghost.js';
 import type { ResizeControllerConfiguration, ResizeState } from './types.js';
 
-const additionalEvents = ['pointermove', 'lostpointercapture'] as const;
+const additionalEvents = [
+  'pointermove',
+  'lostpointercapture',
+  'contextmenu',
+] as const;
 
 type State = {
   initial: DOMRect;
@@ -110,6 +114,8 @@ class ResizeController implements ReactiveController {
 
     switch (event.type) {
       case 'touchstart':
+      // Prevent contextmenu default behavior during resize
+      case 'contextmenu':
         event.preventDefault();
         break;
       case 'keydown':