sliftutils 1.9.1 → 1.9.3

package/index.d.ts

@@ -554,6 +554,7 @@ declare module "sliftutils/render-utils/GenericFormat" {
 
 declare module "sliftutils/render-utils/Input" {
     import preact from "preact";
+    export declare function roundToDecimals(value: number, decimals: number): number;
     export type InputProps = (preact.JSX.HTMLAttributes<HTMLInputElement> & {
         /** ONLY throttles onChangeValue */
         throttle?: number;

package/package.json

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

package/render-utils/Input.d.ts

@@ -1,4 +1,5 @@
 import preact from "preact";
+export declare function roundToDecimals(value: number, decimals: number): number;
 export type InputProps = (preact.JSX.HTMLAttributes<HTMLInputElement> & {
     /** ONLY throttles onChangeValue */
     throttle?: number;

package/render-utils/Input.tsx

@@ -3,6 +3,22 @@ import { css } from "typesafecss";
 import { observer } from "./observer";
 import { throttleFunction } from "socket-function/src/misc";
 
+const ARROW_KEY_SHIFT_FACTOR = 10;
+
+export function roundToDecimals(value: number, decimals: number) {
+    return Math.round(value * 10 ** decimals) / 10 ** decimals;
+}
+
+function countDecimals(value: number) {
+    let text = String(value);
+    if (text.includes("e-")) {
+        return Number(text.split("e-")[1]);
+    }
+    let dot = text.indexOf(".");
+    if (dot < 0) return 0;
+    return text.length - dot - 1;
+}
+
 // TODO: Autogrow mode while typing
 
 // NOTE: "value" is optional. If you don't pass "value", we will preserve the value.
@@ -201,13 +217,11 @@ export class Input extends preact.Component<InputProps> {
                 }
                 if (this.elem && props.type === "number") {
                     let delta = 0;
-                    let magnitude = 1;
+                    let magnitude = Number(props.step) || 1;
                     if (e.shiftKey) {
-                        if (props.integer) {
-                            magnitude = 10;
-                        } else {
-                            magnitude = 0.1;
-                        }
+                        magnitude *= ARROW_KEY_SHIFT_FACTOR;
+                    } else if (e.ctrlKey && !props.integer) {
+                        magnitude /= ARROW_KEY_SHIFT_FACTOR;
                     }
                     if (e.code === "ArrowUp") {
                         delta = magnitude;
@@ -219,7 +233,8 @@ export class Input extends preact.Component<InputProps> {
                     }
                     if (delta !== 0) {
                         e.preventDefault();
-                        let newValue = Math.round(((+this.elem.value || 0) + delta) * 100) / 100;
+                        let decimals = Math.max(countDecimals(magnitude), countDecimals(+this.elem.value || 0));
+                        let newValue = roundToDecimals((+this.elem.value || 0) + delta, decimals);
                         e.currentTarget.value = newValue.toString();
                         callback?.(e as unknown as preact.JSX.TargetedInputEvent<HTMLInputElement>);
                     }

package/render-utils/InputLabel.tsx

@@ -1,5 +1,5 @@
 import preact from "preact";
-import { Input } from "./Input";
+import { Input, roundToDecimals } from "./Input";
 import { css } from "typesafecss";
 import { lazy } from "socket-function/src/caching";
 import { observer } from "./observer";
@@ -68,10 +68,6 @@ export type InputLabelProps = Omit<InputProps, "label" | "title"> & {
     useDateUI?: boolean;
 };
 
-function roundToDecimals(value: number, decimals: number) {
-    return Math.round(value * 10 ** decimals) / 10 ** decimals;
-}
-
 export const startGuessDateRange = +new Date(2010, 0, 1).getTime();
 export const endGuessDateRange = +new Date(2050, 0, 1).getTime();
 

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) {