SYNC: designer right-mouse drag scroll implementation

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);
+      }
+    },
+  };
+}