sliftutils 1.9.0 → 1.9.1

package/.cursor/rules/coding-styles.mdc

@@ -14,7 +14,6 @@ alwaysApply: true
 - When functions have more than one primitive parameter, such that you could confuse them (even something as simple as start time and end time), you should put them inside of an object and call that object `config`, so the function only has a single parameter.
 - Never use return codes, always prefer to throw on error. Include a lot of context information in the error. If any values might be extremely large, such as parsing a file, limit them (ex, to 500 characters).
 - Use double quotes, not single quotes.
-- Never use the ternary operator. Instead, do this: `x ? y : z` => `x && y || z`.
 - Never use non-null assertion operator, instead check the value, and if necessary (because it is accessed in nested functions), use a `const` variable to preserve the type.
 - Errors should almost always use a template string to include the expected value, and the actual value, as in: `throw new Error(\`Expected X, was \${Y}\`);`
 - Don't use switch statements. Use if/else statements instead.

package/.cursor/rules/styling-css.mdc

@@ -34,7 +34,7 @@ className={css
     + (conditionalExample && css.opacity(0.5))
 }
 ```
-Specifically, it should be a value that you check for, and then the value. Don't use ternary, don't do `|| ""`. If you have multiple values, chain them with `||` and `&&`. Keep the CSS simple, don't add too much, because it's easier to add than to remove.
+Specifically, it should be a value that you check for, and then the value. Don't do `|| ""`. If you have multiple values, chain them with `||` and `&&`. Keep the CSS simple, don't add too much, because it's easier to add than to remove.
 
 ## Aliases and Helpers
 

package/CLAUDE.md

@@ -102,7 +102,7 @@ className={css.size(100, 100).hbox(4)
 }
 ```
 
-Conditionals come after, never as a ternary:
+Conditionals come after:
 
 ```tsx
 className={css

package/index.d.ts

@@ -852,6 +852,25 @@ declare module "sliftutils/render-utils/colors" {
 
 }
 
+declare module "sliftutils/render-utils/drag" {
+    export declare let dragCount: number;
+    type DragOffset = {
+        x: number;
+        y: number;
+    };
+    export declare function performDrag(e: MouseEvent, onMove: (offset: DragOffset) => void, onDone?: (offset: DragOffset) => void): void;
+    export declare function performDrag2(config: {
+        e: MouseEvent;
+        onMove?: (offset: DragOffset) => void;
+        onDone?: (offset: DragOffset) => void;
+        onFinally?: (passedSlop: boolean) => void;
+        slop?: number;
+    }): void;
+    export declare function cancelDrag(): void;
+    export {};
+
+}
+
 declare module "sliftutils/render-utils/mobxTyped" {
     import { observable, runInAction, computed, autorun, onBecomeObserved, onBecomeUnobserved, Reaction } from "mobx";
     export { observable, runInAction, computed, autorun, onBecomeObserved, onBecomeUnobserved, Reaction };

package/package.json

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

package/render-utils/drag.d.ts

@@ -0,0 +1,15 @@
+export declare let dragCount: number;
+type DragOffset = {
+    x: number;
+    y: number;
+};
+export declare function performDrag(e: MouseEvent, onMove: (offset: DragOffset) => void, onDone?: (offset: DragOffset) => void): void;
+export declare function performDrag2(config: {
+    e: MouseEvent;
+    onMove?: (offset: DragOffset) => void;
+    onDone?: (offset: DragOffset) => void;
+    onFinally?: (passedSlop: boolean) => void;
+    slop?: number;
+}): void;
+export declare function cancelDrag(): void;
+export {};

package/render-utils/drag.ts

@@ -0,0 +1,161 @@
+import { MaybePromise } from "socket-function/src/types";
+import { runInAction } from "./mobxTyped";
+
+export let dragCount = 0;
+
+type DragOffset = { x: number; y: number };
+
+function throttleFunctionFast<Args extends unknown[]>(
+    fnc: (...args: Args) => MaybePromise<void>
+): (...args: Args) => void {
+    let pendingCall: { args: Args } | undefined;
+    let inCall = false;
+    return async (...args: Args) => {
+        if (inCall) {
+            pendingCall = { args };
+            return;
+        }
+        inCall = true;
+        try {
+            await fnc(...args);
+        } finally {
+            inCall = false;
+            if (pendingCall) {
+                let call = pendingCall;
+                pendingCall = undefined;
+                void fnc(...call.args);
+            }
+        }
+    };
+}
+
+function inAction<Args extends unknown[]>(fnc: (...args: Args) => void): (...args: Args) => void {
+    return (...args: Args) => runInAction(() => fnc(...args));
+}
+
+export function performDrag(
+    e: MouseEvent,
+    onMove: (offset: DragOffset) => void,
+    onDone?: (offset: DragOffset) => void,
+) {
+    return performDrag2({ e, onMove, onDone });
+}
+
+export function performDrag2(
+    config: {
+        e: MouseEvent;
+        onMove?: (offset: DragOffset) => void;
+        onDone?: (offset: DragOffset) => void;
+        onFinally?: (passedSlop: boolean) => void;
+        slop?: number;
+    }
+) {
+    let { e, slop } = config;
+    let onMove = inAction(config.onMove ?? (() => { }));
+    let onDone = config.onDone && inAction(config.onDone);
+    let onFinally = config.onFinally && inAction(config.onFinally);
+    dragCount++;
+
+    let startMouseX = e.clientX;
+    let startMouseY = e.clientY;
+    let lastMouseX = e.clientX;
+    let lastMouseY = e.clientY;
+
+    let passedSlop = !slop;
+
+    function cancel() {
+        lastMouseX = startMouseX;
+        lastMouseY = startMouseY;
+        finish();
+    }
+
+    let finished = false;
+    let disposed = false;
+
+    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 });
+        await new Promise(r => requestAnimationFrame(r));
+    });
+
+    const onMouseMove = (e: MouseEvent) => {
+        if (finished) return;
+        if (e.buttons === 0) {
+            finish();
+            return;
+        }
+        if (lastMouseX === e.clientX && lastMouseY === e.clientY) return;
+        lastMouseX = e.clientX;
+        lastMouseY = e.clientY;
+        triggerMove();
+    };
+    let finish = () => {
+        selfCancelCallback.delete(cancel);
+        try {
+            if (finished) return;
+            finished = true;
+            dragCount--;
+            window.removeEventListener("mousemove", onMouseMove);
+            window.removeEventListener("mouseup", finish, { capture: true });
+            window.removeEventListener("blur", onBlur);
+            document.removeEventListener("keydown", keyDown);
+            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 });
+            }
+        } finally {
+            setTimeout(() => {
+                onFinally?.(passedSlop);
+            }, 0);
+        }
+        disposed = true;
+    };
+
+    const keyDown = (e: KeyboardEvent) => {
+        if (finished) return;
+        if (e.code === "Escape") {
+            cancel();
+        }
+    };
+
+    const onBlur = () => {
+        if (finished) return;
+        cancel();
+    };
+
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", finish, { capture: true });
+    window.addEventListener("blur", onBlur);
+    document.addEventListener("keydown", keyDown);
+    selfCancelCallback.add(cancel);
+
+    if (!slop) {
+        onMove({ x: 0, y: 0 });
+    }
+}
+
+let selfCancelCallback = new Set<() => void>();
+export function cancelDrag() {
+    for (let callback of selfCancelCallback) {
+        try {
+            callback();
+        } catch (e) {
+            console.error(`Error in drag cancel callback: ${(e as Error).stack ?? e}`);
+        }
+    }
+    selfCancelCallback.clear();
+}