Copy the implementation of useMovable into useDraggable

.changeset/olive-rivers-eat.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Internal: copy Mafs' implementation of useMovable into our own useDraggable hook.

packages/perseus/package.json

@@ -46,6 +46,7 @@
         "@khanacademy/perseus-linter": "^0.4.0",
         "@khanacademy/pure-markdown": "^0.3.5",
         "@khanacademy/simple-markdown": "^0.12.0",
+        "@use-gesture/react": "^10.2.27",
         "mafs": "0.18.7"
     },
     "devDependencies": {

packages/perseus/src/widgets/interactive-graphs/graphs/use-draggable.test.tsx

@@ -0,0 +1,78 @@
+import {render, screen} from "@testing-library/react";
+import {userEvent as userEventLib} from "@testing-library/user-event";
+import {Mafs} from "mafs";
+import * as React from "react";
+import {useRef} from "react";
+
+import {useDraggable} from "./use-draggable";
+
+import type {vec} from "mafs";
+
+function TestDraggable(props: {
+    point: vec.Vector2;
+    constrain: (point: vec.Vector2) => vec.Vector2;
+}) {
+    const gestureTarget = useRef<HTMLParagraphElement>(null);
+    const {dragging} = useDraggable({
+        ...props,
+        gestureTarget,
+        onMove: () => {},
+    });
+    return (
+        <p role="button" ref={gestureTarget}>
+            dragging: {String(dragging)}
+        </p>
+    );
+}
+
+describe("useDraggable", () => {
+    let userEvent;
+    beforeEach(() => {
+        userEvent = userEventLib.setup({
+            advanceTimers: jest.advanceTimersByTime,
+        });
+    });
+
+    it("initially returns {dragging: false}", () => {
+        render(
+            <Mafs width={200} height={200}>
+                <TestDraggable point={[0, 0]} constrain={(p) => p} />
+            </Mafs>,
+        );
+
+        expect(screen.getByText("dragging: false")).toBeInTheDocument();
+    });
+
+    it("returns {dragging: true} when the mouse button is held down", async () => {
+        render(
+            <Mafs width={200} height={200}>
+                <TestDraggable point={[0, 0]} constrain={(p) => p} />
+            </Mafs>,
+        );
+        const dragHandle = screen.getByRole("button");
+
+        // Act
+        await userEvent.pointer({keys: "[MouseLeft>]", target: dragHandle});
+
+        // Assert
+        expect(screen.getByText("dragging: true")).toBeInTheDocument();
+    });
+
+    it("returns {dragging: false} when the mouse button is released", async () => {
+        render(
+            <Mafs width={200} height={200}>
+                <TestDraggable point={[0, 0]} constrain={(p) => p} />
+            </Mafs>,
+        );
+        const dragHandle = screen.getByRole("button");
+
+        // Act
+        await userEvent.pointer([
+            {keys: "[MouseLeft>]", target: dragHandle},
+            {keys: "[/MouseLeft]"},
+        ]);
+
+        // Assert
+        expect(screen.getByText("dragging: false")).toBeInTheDocument();
+    });
+});

packages/perseus/src/widgets/interactive-graphs/graphs/use-draggable.ts

@@ -1,9 +1,31 @@
-import {useMovable} from "mafs";
+import {useDrag} from "@use-gesture/react";
+import {useTransformContext, vec} from "mafs";
+import * as React from "react";
+import invariant from "tiny-invariant";
+
+import useGraphConfig from "../reducer/use-graph-config";
 
-import type {vec} from "mafs";
 import type {RefObject} from "react";
 
-type Params = {
+/**
+ * Code in this file is derived from
+ * https://github.com/stevenpetryk/mafs/blob/4520319379a2cc2df8148d8baaef1f85db117103/src/interaction/useMovable.tsx#L20-L83
+ * and copied here under the terms of the MIT license.
+ *
+ * Copyright 2021 Steven Petryk
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ */
+
+export type Params = {
     gestureTarget: RefObject<Element>;
     onMove: (point: vec.Vector2) => unknown;
     point: vec.Vector2;
@@ -14,6 +36,137 @@
     dragging: boolean;
 };
 
-export function useDraggable(params: Params): DragState {
-    return useMovable(params);
+export function useDraggable(args: Params): DragState {
+    const {gestureTarget: target, onMove, point, constrain} = args;
+    const [dragging, setDragging] = React.useState(false);
+    const {xSpan, ySpan} = useSpanContext();
+    const {viewTransform, userTransform} = useTransformContext();
+
+    const inverseViewTransform = vec.matrixInvert(viewTransform);
+    invariant(inverseViewTransform, "The view transform must be invertible.");
+
+    const inverseTransform = React.useMemo(
+        () => getInverseTransform(userTransform),
+        [userTransform],
+    );
+
+    const pickup = React.useRef<vec.Vector2>([0, 0]);
+
+    useDrag(
+        (state) => {
+            const {type, event} = state;
+            event?.stopPropagation();
+
+            const isKeyboard = type.includes("key");
+            if (isKeyboard) {
+                event?.preventDefault();
+                const {
+                    direction: yDownDirection,
+                    altKey,
+                    metaKey,
+                    shiftKey,
+                } = state;
+
+                const direction = [
+                    yDownDirection[0],
+                    -yDownDirection[1],
+                ] as vec.Vector2;
+                const span = Math.abs(direction[0]) ? xSpan : ySpan;
+
+                let divisions = 50;
+                if (altKey || metaKey) {
+                    divisions = 200;
+                }
+                if (shiftKey) {
+                    divisions = 10;
+                }
+
+                const min = span / (divisions * 2);
+                const tests = range(
+                    span / divisions,
+                    span / 2,
+                    span / divisions,
+                );
+
+                for (const dx of tests) {
+                    // Transform the test back into the point's coordinate system
+                    const testMovement = vec.scale(direction, dx);
+                    const testPoint = constrain(
+                        vec.transform(
+                            vec.add(
+                                vec.transform(point, userTransform),
+                                testMovement,
+                            ),
+                            inverseTransform,
+                        ),
+                    );
+
+                    if (vec.dist(testPoint, point) > min) {
+                        onMove(testPoint);
+                        break;
+                    }
+                }
+            } else {
+                const {last, movement: pixelMovement, first} = state;
+
+                setDragging(!last);
+
+                if (first) {
+                    pickup.current = vec.transform(point, userTransform);
+                }
+                if (vec.mag(pixelMovement) === 0) {
+                    return;
+                }
+
+                const movement = vec.transform(
+                    pixelMovement,
+                    inverseViewTransform,
+                );
+                onMove(
+                    constrain(
+                        vec.transform(
+                            vec.add(pickup.current, movement),
+                            inverseTransform,
+                        ),
+                    ),
+                );
+            }
+        },
+        {target, eventOptions: {passive: false}},
+    );
+    return {dragging};
+}
+
+function getInverseTransform(transform: vec.Matrix) {
+    const invert = vec.matrixInvert(transform);
+    invariant(
+        invert !== null,
+        "Could not invert transform matrix. A parent transformation matrix might be degenerative (mapping 2D space to a line).",
+    );
+    return invert;
+}
+
+function useSpanContext() {
+    const {
+        range: [[xMin, xMax], [yMin, yMax]],
+    } = useGraphConfig();
+    const xSpan = xMax - xMin;
+    const ySpan = yMax - yMin;
+    return {xSpan, ySpan};
+}
+
+function range(min: number, max: number, step = 1): number[] {
+    const result: number[] = [];
+    for (let i = min; i < max - step / 2; i += step) {
+        result.push(i);
+    }
+
+    const computedMax = result[result.length - 1] + step;
+    if (Math.abs(max - computedMax) < step / 1e-6) {
+        result.push(max);
+    } else {
+        result.push(computedMax);
+    }
+
+    return result;
 }