@weasel-js/routing 1.5.1 → 1.6.0

package/dist/react.js

@@ -1,4 +1,4 @@
-import { createDispatcher, buildDepsFromRequires, validateActionId, validateActionDefaultBinding, scopeBindings, liveScope, offhandKeyFor, makeToolOffhandAction, buildToolOffhandBindings, isDev, reportRouteConflicts, dlog, isEditableTarget, clientToCanvasRect, openPointerSession, pointerGestureId, itemsFromDataTransfer, itemsFromClipboardData } from './chunk-ZZICE4J7.js';
+import { createDispatcher, buildDepsFromRequires, validateActionId, validateActionDefaultBinding, scopeBindings, liveScope, offhandKeyFor, makeToolOffhandAction, buildToolOffhandBindings, isDev, reportRouteConflicts, dlog, isEditableTarget, clientToCanvasRect, openPointerSession, pointerGestureId, itemsFromDataTransfer, itemsFromClipboardData } from './chunk-D2TZLDP5.js';
 import { createContext, useState, useCallback, useMemo, useContext, useRef, useEffect } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { resolveCursorTier } from '@weasel-js/cursor';
@@ -137,6 +137,7 @@ function useGestureDispatcher(opts) {
   const { canvasRef, actions, toolsById, enabled = true, keyboard = true, affordanceAt, classifyTarget, dispatcher: dispatcherOpt, clientToWorld, requestRedraw, paintedCursor, getRuleCtx, onDoubleClick, views, channels } = opts;
   const pointerChannel = channels?.pointer !== false;
   const wheelChannel = channels?.wheel !== false;
+  const pinchChannel = channels?.pinch !== false;
   const contextMenuChannel = channels?.contextMenu !== false;
   const ingestChannel = channels?.ingest !== false;
   const onDoubleClickRef = useRef(onDoubleClick);
@@ -261,6 +262,14 @@ function useGestureDispatcher(opts) {
       );
       return { centroid: toCanvasLocal(centroid), spread };
     };
+    let pinchLive = false;
+    let pinchScale = 1;
+    let pinchRotation = 0;
+    const endPinch = () => {
+      pinchLive = false;
+      pinchScale = 1;
+      pinchRotation = 0;
+    };
     let multiTouchStart = null;
     const TAP_THRESHOLD_PX = 8;
     const DRAG_THRESHOLD_PX = 4;
@@ -301,8 +310,10 @@ function useGestureDispatcher(opts) {
       if (result === "unhandled") {
         dispatch({
           kind: "contextmenu",
-          worldX: down.worldX,
-          worldY: down.worldY,
+          x: down.worldX,
+          y: down.worldY,
+          clientX: down.clientX,
+          clientY: down.clientY,
           ...shared
         });
       }
@@ -357,6 +368,7 @@ function useGestureDispatcher(opts) {
       heldKeys.delete(e.key);
     };
     const onWindowBlur = () => {
+      endPinch();
       for (const p of [...held.values()]) p.session.cancel();
       for (const key of heldKeys) {
         const ev = {
@@ -373,6 +385,11 @@ function useGestureDispatcher(opts) {
       heldKeys.clear();
     };
     const onWheel = (e) => {
+      if (pinchLive && e.ctrlKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
       routeAt(null, e.clientX, e.clientY);
       const rect = canvas?.getBoundingClientRect();
       const [localX, localY] = rect ? clientToCanvasRect(rect, e.clientX, e.clientY) : [e.clientX, e.clientY];
@@ -399,6 +416,57 @@ function useGestureDispatcher(opts) {
         e.stopPropagation();
       }
     };
+    const pinchEventOf = (e, scale, rotation) => {
+      const g = e;
+      const rect = canvas?.getBoundingClientRect();
+      const cx = typeof g.clientX === "number" ? g.clientX : rect ? rect.left + rect.width / 2 : 0;
+      const cy = typeof g.clientY === "number" ? g.clientY : rect ? rect.top + rect.height / 2 : 0;
+      routeAt(null, cx, cy);
+      const [localX, localY] = rect ? clientToCanvasRect(rect, cx, cy) : [cx, cy];
+      const hitPoint = toWorld(cx, cy);
+      const affordance = target().affordanceAt?.(hitPoint) ?? void 0;
+      const body = target().classifyTarget?.(hitPoint);
+      return {
+        kind: "pinch",
+        altKey: g.altKey === true,
+        ctrlKey: g.ctrlKey === true,
+        metaKey: g.metaKey === true,
+        shiftKey: g.shiftKey === true,
+        scale,
+        rotation,
+        clientX: localX,
+        clientY: localY,
+        ...affordance !== void 0 ? { affordance } : {},
+        ...body?.body !== void 0 ? { bodyTarget: body.body } : {},
+        ...body?.kind !== void 0 ? { bodyKind: body.kind } : {}
+      };
+    };
+    const onGestureStart = (e) => {
+      endPinch();
+      const probe = pinchEventOf(e, 1, 0);
+      if (dispatcherNow().resolveOnly(probe, ctxNow()) === null) return;
+      pinchLive = true;
+      e.preventDefault();
+    };
+    const onGestureChange = (e) => {
+      const g = e;
+      const scale = typeof g.scale === "number" && g.scale > 0 ? g.scale : pinchScale;
+      const rotation = typeof g.rotation === "number" ? g.rotation : pinchRotation;
+      const step = scale / pinchScale;
+      const turn = rotation - pinchRotation;
+      pinchScale = scale;
+      pinchRotation = rotation;
+      if (dispatch(pinchEventOf(e, step, turn)) === "handled") {
+        pinchLive = true;
+        e.preventDefault();
+      } else if (pinchLive) {
+        e.preventDefault();
+      }
+    };
+    const onGestureEnd = (e) => {
+      if (pinchLive) e.preventDefault();
+      endPinch();
+    };
     const onPointerDown = (e) => {
       if ((e.button ?? 0) !== 0) return;
       if (!canvas) return;
@@ -607,7 +675,7 @@ function useGestureDispatcher(opts) {
         ctx
       )?.action.cursor;
       const cursor = dragCursor ?? dispatcherNow().resolveOnly(
-        { kind: "click", worldX: w.x, worldY: w.y, pressX: w.x, pressY: w.y, ...where },
+        { kind: "click", x: w.x, y: w.y, pressX: w.x, pressY: w.y, ...where },
         ctx
       )?.action.cursor;
       applyHoverCursor(cursor ?? null);
@@ -696,8 +764,10 @@ function useGestureDispatcher(opts) {
           ctrlKey: e.ctrlKey,
           metaKey: e.metaKey,
           shiftKey: e.shiftKey,
-          worldX: wClick.x,
-          worldY: wClick.y,
+          x: wClick.x,
+          y: wClick.y,
+          clientX: e.clientX,
+          clientY: e.clientY,
           pressX: down.worldX,
           pressY: down.worldY,
           ...down.affordance !== void 0 ? { affordance: down.affordance } : {},
@@ -717,8 +787,10 @@ function useGestureDispatcher(opts) {
             ctrlKey: e.ctrlKey,
             metaKey: e.metaKey,
             shiftKey: e.shiftKey,
-            worldX: wClick.x,
-            worldY: wClick.y,
+            x: wClick.x,
+            y: wClick.y,
+            clientX: e.clientX,
+            clientY: e.clientY,
             ...down.affordance !== void 0 ? { affordance: down.affordance } : {},
             ...down.bodyTarget !== void 0 ? { bodyTarget: down.bodyTarget } : {},
             ...down.bodyKind !== void 0 ? { bodyKind: down.bodyKind } : {}
@@ -775,8 +847,10 @@ function useGestureDispatcher(opts) {
         ctrlKey: e.ctrlKey,
         metaKey: e.metaKey,
         shiftKey: e.shiftKey,
-        worldX: w.x,
-        worldY: w.y,
+        x: w.x,
+        y: w.y,
+        clientX: e.clientX,
+        clientY: e.clientY,
         ...affordance !== void 0 ? { affordance } : {},
         ...menuBody?.body !== void 0 ? { bodyTarget: menuBody.body } : {},
         ...menuBody?.kind !== void 0 ? { bodyKind: menuBody.kind } : {}
@@ -850,6 +924,11 @@ function useGestureDispatcher(opts) {
       canvas?.addEventListener("pointermove", onHoverMove);
     }
     if (wheelChannel) canvas?.addEventListener("wheel", onWheel, { passive: false });
+    if (pinchChannel) {
+      canvas?.addEventListener("gesturestart", onGestureStart);
+      canvas?.addEventListener("gesturechange", onGestureChange);
+      canvas?.addEventListener("gestureend", onGestureEnd);
+    }
     if (contextMenuChannel) canvas?.addEventListener("contextmenu", onContextMenu);
     if (ingestChannel) {
       canvas?.addEventListener("dragenter", onDragOver);
@@ -868,6 +947,9 @@ function useGestureDispatcher(opts) {
       window.removeEventListener("keyup", scheduleHoverCursorRefresh);
       canvas?.removeEventListener("pointerleave", onHoverPointerLeave);
       canvas?.removeEventListener("wheel", onWheel);
+      canvas?.removeEventListener("gesturestart", onGestureStart);
+      canvas?.removeEventListener("gesturechange", onGestureChange);
+      canvas?.removeEventListener("gestureend", onGestureEnd);
       canvas?.removeEventListener("pointerdown", onPointerDown);
       canvas?.removeEventListener("pointermove", onHoverMove);
       canvas?.removeEventListener("contextmenu", onContextMenu);
@@ -884,7 +966,7 @@ function useGestureDispatcher(opts) {
       held.clear();
       for (const d of allDispatchers()) d.cancelAll("cancel");
     };
-  }, [enabled, keyboard, canvasRef, pointerChannel, wheelChannel, contextMenuChannel, ingestChannel]);
+  }, [enabled, keyboard, canvasRef, pointerChannel, wheelChannel, pinchChannel, contextMenuChannel, ingestChannel]);
 }
 var ActionsContext = createContext(null);
 function useMuted(base) {
@@ -1109,6 +1191,39 @@ function useAction(action) {
     return reg.register(action);
   }, [reg, action]);
 }
+function useOngoingAction(actionId) {
+  const reg = useActionsRegistry();
+  const regRef = useRef(reg);
+  regRef.current = reg;
+  const idRef = useRef(actionId);
+  idRef.current = actionId;
+  const ctrlRef = useRef(null);
+  const edit = useMemo(() => {
+    const end = (reason) => {
+      const ctrl = ctrlRef.current;
+      ctrlRef.current = null;
+      ctrl?.end(reason);
+    };
+    return {
+      input(params) {
+        if (ctrlRef.current) ctrlRef.current.update(params);
+        else ctrlRef.current = regRef.current?.begin(idRef.current, params) ?? null;
+      },
+      commit(params) {
+        if (params !== void 0) {
+          if (ctrlRef.current) ctrlRef.current.update(params);
+          else ctrlRef.current = regRef.current?.begin(idRef.current, params) ?? null;
+        }
+        end("commit");
+      },
+      cancel() {
+        end("cancel");
+      }
+    };
+  }, []);
+  useEffect(() => () => edit.commit(), [edit, actionId]);
+  return edit;
+}
 function useContributions(opts) {
   const ctx = useActiveToolContext();
   const actionsRegistry = useActionsRegistry();
@@ -1305,6 +1420,6 @@ function useTools(opts) {
   );
 }
 
-export { ActionsProvider, ActionsScope, ActiveToolContextProvider, ActiveToolContextProviderIfRoot, DepRegistryProvider, useAction, useActionsRegistry, useActiveToolContext, useContributions, useDepRegistry, useDepSource, useGestureDispatcher, useOptionalActiveToolContext, useOptionalDepRegistry, useTools };
+export { ActionsProvider, ActionsScope, ActiveToolContextProvider, ActiveToolContextProviderIfRoot, DepRegistryProvider, useAction, useActionsRegistry, useActiveToolContext, useContributions, useDepRegistry, useDepSource, useGestureDispatcher, useOngoingAction, useOptionalActiveToolContext, useOptionalDepRegistry, useTools };
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map