SYNC: designer right-mouse drag scroll implementation

packages/web/src/designer/Designer.svelte

@@ -53,6 +53,7 @@
   import DragColumnMemory from './DragColumnMemory.svelte';
   import createRef from '../utility/createRef';
   import { isProApp } from '../utility/proTools';
+  import dragScroll from '../utility/dragScroll';
 
   export let value;
   export let onChange;
@@ -65,6 +66,7 @@
   export const activator = createActivator('Designer', true);
 
   let domCanvas;
+  let domWrapper;
   let canvasWidth = 3000;
   let canvasHeight = 3000;
   let dragStartPoint = null;
@@ -901,9 +903,20 @@
       );
     }
   }
+
+  function handleDragScroll(x, y) {
+    domWrapper.scrollLeft -= x;
+    domWrapper.scrollTop -= y;
+  }
 </script>
 
-<div class="wrapper noselect" use:contextMenu={createMenu} on:wheel={handleWheel}>
+<div
+  class="wrapper noselect"
+  use:contextMenu={createMenu}
+  on:wheel={handleWheel}
+  bind:this={domWrapper}
+  use:dragScroll={handleDragScroll}
+>
   {#if !(tables?.length > 0)}
     <div class="empty">Drag &amp; drop tables or views from left panel here</div>
   {/if}

packages/web/src/utility/contextMenu.ts

@@ -5,16 +5,26 @@ import { runGroupCommand } from '../commands/runCommand';
 import { currentDropDownMenu, visibleCommandPalette } from '../stores';
 import getAsArray from './getAsArray';
 
+let isContextMenuSupressed = false;
+
 export function registerMenu(...items) {
   const parentMenu = getContext('componentContextMenu');
   setContext('componentContextMenu', [parentMenu, ...items]);
 }
 
+export function supressContextMenu() {
+  isContextMenuSupressed = true;
+}
+
 export default function contextMenu(node, items: any = []) {
   const handleContextMenu = async e => {
     e.preventDefault();
     e.stopPropagation();
 
+    if (isContextMenuSupressed) {
+      return;
+    }
+
     await invalidateCommands();
 
     if (items) {
@@ -24,13 +34,19 @@ export default function contextMenu(node, items: any = []) {
     }
   };
 
+  const handleMouseDown = () => {
+    isContextMenuSupressed = false;
+  };
+
   if (items == '__no_menu') return;
 
   node.addEventListener('contextmenu', handleContextMenu);
+  node.addEventListener('mousedown', handleMouseDown);
 
   return {
     destroy() {
       node.removeEventListener('contextmenu', handleContextMenu);
+      node.removeEventListener('mousedown', handleMouseDown);
     },
     update(value) {
       items = value;

packages/web/src/utility/dragScroll.ts

@@ -0,0 +1,58 @@
+import { supressContextMenu } from './contextMenu';
+
+export default function dragScroll(node, onScroll) {
+  if (!onScroll) return;
+
+  let lastX = null;
+  let lastY = null;
+
+  let sumMoved = 0;
+
+  const handleMoveDown = e => {
+    if (e.button != 2) return;
+
+    lastX = e.clientX;
+    lastY = e.clientY;
+    document.addEventListener('mousemove', handleMoveMove, true);
+    document.addEventListener('mouseup', handleMoveEnd, true);
+  };
+
+  const handleMoveMove = e => {
+    // const zoomKoef = window.getComputedStyle(node)['zoom'];
+
+    e.preventDefault();
+
+    sumMoved += Math.abs(e.clientX - lastX) + Math.abs(e.clientY - lastY);
+    if (sumMoved > 20) {
+      supressContextMenu();
+    }
+
+    onScroll(e.clientX - lastX, e.clientY - lastY);
+
+    lastX = e.clientX;
+    lastY = e.clientY;
+  };
+  const handleMoveEnd = e => {
+    // const zoomKoef = window.getComputedStyle(node)['zoom'];
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    lastX = null;
+    lastY = null;
+    document.removeEventListener('mousemove', handleMoveMove, true);
+    document.removeEventListener('mouseup', handleMoveEnd, true);
+  };
+
+  node.addEventListener('mousedown', handleMoveDown);
+
+  return {
+    destroy() {
+      node.removeEventListener('mousedown', handleMoveDown);
+      if (lastX != null || lastY != null) {
+        document.removeEventListener('mousemove', handleMoveMove, true);
+        document.removeEventListener('mouseup', handleMoveEnd, true);
+      }
+    },
+  };
+}