sliftutils 1.9.1 → 1.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sliftutils",
-    "version": "1.9.1",
+    "version": "1.9.2",
     "main": "index.js",
     "license": "MIT",
     "files": [

package/render-utils/drag.ts

@@ -3,6 +3,16 @@ import { runInAction } from "./mobxTyped";
 
 export let dragCount = 0;
 
+const ARROW_STEP_PER_FRAME = 1;
+const ARROW_STEP_PER_FRAME_SHIFT = 10;
+const ARROW_STEP_PER_FRAME_CTRL = 0.1;
+const ARROW_DIRECTIONS: { [code: string]: DragOffset } = {
+    ArrowUp: { x: 0, y: -1 },
+    ArrowDown: { x: 0, y: 1 },
+    ArrowLeft: { x: -1, y: 0 },
+    ArrowRight: { x: 1, y: 0 },
+};
+
 type DragOffset = { x: number; y: number };
 
 function throttleFunctionFast<Args extends unknown[]>(
@@ -60,12 +70,30 @@ export function performDrag2(
     let startMouseY = e.clientY;
     let lastMouseX = e.clientX;
     let lastMouseY = e.clientY;
+    let keyX = 0;
+    let keyY = 0;
+    let heldArrows = new Set<string>();
+    let shiftHeld = e.shiftKey;
+    let ctrlHeld = e.ctrlKey;
+    let arrowRepeatRunning = false;
 
     let passedSlop = !slop;
 
+    function getDelta(): DragOffset {
+        let deltaX = lastMouseX - startMouseX + keyX;
+        let deltaY = lastMouseY - startMouseY + keyY;
+        if (slop) {
+            let dist = Math.sqrt(deltaX ** 2 + deltaY ** 2);
+            if (dist > slop) passedSlop = true;
+        }
+        return { x: deltaX, y: deltaY };
+    }
+
     function cancel() {
         lastMouseX = startMouseX;
         lastMouseY = startMouseY;
+        keyX = 0;
+        keyY = 0;
         finish();
     }
 
@@ -74,17 +102,41 @@ export function performDrag2(
 
     const triggerMove = throttleFunctionFast(async () => {
         if (disposed) return;
-        let deltaX = lastMouseX - startMouseX;
-        let deltaY = lastMouseY - startMouseY;
-        if (slop) {
-            let dist = Math.sqrt(deltaX ** 2 + deltaY ** 2);
-            if (dist > slop) passedSlop = true;
-            if (!passedSlop) return;
-        }
-        onMove({ x: deltaX, y: deltaY });
+        let delta = getDelta();
+        if (!passedSlop) return;
+        onMove(delta);
         await new Promise(r => requestAnimationFrame(r));
     });
 
+    function applyArrowStep() {
+        let step = ARROW_STEP_PER_FRAME;
+        if (shiftHeld) {
+            step = ARROW_STEP_PER_FRAME_SHIFT;
+        } else if (ctrlHeld) {
+            step = ARROW_STEP_PER_FRAME_CTRL;
+        }
+        for (let code of heldArrows) {
+            let direction = ARROW_DIRECTIONS[code];
+            keyX += direction.x * step;
+            keyY += direction.y * step;
+        }
+        triggerMove();
+    }
+
+    function runArrowRepeat() {
+        if (arrowRepeatRunning) return;
+        arrowRepeatRunning = true;
+        const frame = () => {
+            if (finished || !heldArrows.size) {
+                arrowRepeatRunning = false;
+                return;
+            }
+            applyArrowStep();
+            requestAnimationFrame(frame);
+        };
+        requestAnimationFrame(frame);
+    }
+
     const onMouseMove = (e: MouseEvent) => {
         if (finished) return;
         if (e.buttons === 0) {
@@ -106,16 +158,12 @@ export function performDrag2(
             window.removeEventListener("mouseup", finish, { capture: true });
             window.removeEventListener("blur", onBlur);
             document.removeEventListener("keydown", keyDown);
+            document.removeEventListener("keyup", keyUp);
             triggerMove();
             if (onDone) {
-                let deltaX = lastMouseX - startMouseX;
-                let deltaY = lastMouseY - startMouseY;
-                if (slop) {
-                    let dist = Math.sqrt(deltaX ** 2 + deltaY ** 2);
-                    if (dist > slop) passedSlop = true;
-                    if (!passedSlop) return;
-                }
-                onDone({ x: deltaX, y: deltaY });
+                let delta = getDelta();
+                if (!passedSlop) return;
+                onDone(delta);
             }
         } finally {
             setTimeout(() => {
@@ -127,9 +175,25 @@ export function performDrag2(
 
     const keyDown = (e: KeyboardEvent) => {
         if (finished) return;
+        shiftHeld = e.shiftKey;
+        ctrlHeld = e.ctrlKey;
         if (e.code === "Escape") {
             cancel();
+            return;
         }
+        if (!ARROW_DIRECTIONS[e.code]) return;
+        e.preventDefault();
+        if (e.repeat || heldArrows.has(e.code)) return;
+        heldArrows.add(e.code);
+        applyArrowStep();
+        runArrowRepeat();
+    };
+
+    const keyUp = (e: KeyboardEvent) => {
+        if (finished) return;
+        shiftHeld = e.shiftKey;
+        ctrlHeld = e.ctrlKey;
+        heldArrows.delete(e.code);
     };
 
     const onBlur = () => {
@@ -141,6 +205,7 @@ export function performDrag2(
     window.addEventListener("mouseup", finish, { capture: true });
     window.addEventListener("blur", onBlur);
     document.addEventListener("keydown", keyDown);
+    document.addEventListener("keyup", keyUp);
     selfCancelCallback.add(cancel);
 
     if (!slop) {