@weasel-js/routing 1.11.0 → 1.11.1

package/dist/react.js

@@ -1,4 +1,4 @@
-import { createDepRegistry, createDispatcher, assembleEntries, liveScope, reportRouteConflicts, offhandKeyFor, makeToolOffhandAction, buildToolOffhandBindings, dlog, ScopeNode, tuneAction, createMenuHost, pushOwner, evaluateEnabled, tunedParams, validateActionId, validateActionDefaultBinding, isTool, depNodeOf, DepNode, buildDepsFromRequires, clientToCanvas, DEV, publishLiveDispatch, LONG_PRESS_HAPTIC_MS, multiTouchGestureId, openPointerSession, addCarrySurface, gestureIdFor, isEditableTarget, focusedControlOwnsKey, itemsFromClipboardData, itemsFromDataTransfer, itemTypesFromDataTransfer, actionCursor } from './chunk-QBQQIFPI.js';
+import { createDepRegistry, createDispatchTrace, createDispatcher, assembleEntries, liveScope, reportRouteConflicts, offhandKeyFor, makeToolOffhandAction, buildToolOffhandBindings, dlog, ScopeNode, tuneAction, createMenuHost, pushOwner, evaluateEnabled, tunedParams, validateActionId, validateActionDefaultBinding, isTool, depNodeOf, DepNode, buildDepsFromRequires, clientToCanvas, LONG_PRESS_HAPTIC_MS, multiTouchGestureId, openPointerSession, addCarrySurface, carryGestureId, anyBinding, isEditableTarget, focusedControlOwnsKey, itemsFromClipboardData, itemsFromDataTransfer, itemTypesFromDataTransfer, actionCursor } from './chunk-KLBH7VFF.js';
 import { createContext, useState, useContext, useEffect, useMemo, useRef, useCallback, useSyncExternalStore } from 'react';
 import { isApplePlatform, heldPointers, createPointerRecognizer, isInControlWithin, longPressEvents, stylusOf } from '@weasel-js/gestures';
 import { isDev, useLatest, useKitSettings, useStableByContent, sameList } from '@weasel-js/react';
@@ -108,7 +108,7 @@ function useDepSource(name, source) {
   const registry = useDepRegistry();
   const sourceRef = useLatest(source);
   useEffect(() => {
-    return registry.register(name, () => sourceRef.current());
+    return registry.register(name, (below) => sourceRef.current(below));
   }, [name, registry, sourceRef]);
 }
 var MenuHostContext = createContext(null);
@@ -419,6 +419,7 @@ function useToolLifecycle(opts) {
 function createDispatchCore(src) {
   const { canvas } = src;
   let routedId = null;
+  let over = false;
   const target = () => {
     if (routedId === null) return src.root();
     return src.views()?.targets().find((t) => t.id === routedId) ?? src.root();
@@ -461,12 +462,16 @@ function createDispatchCore(src) {
       const [x, y] = clientToCanvas(canvas, cx, cy);
       return { x, y };
     },
-    dispatch: (ev, on) => {
+    dispatch: (ev, on, reach) => {
       const d = on ?? dispatcherNow();
       src.uses(d);
-      return d.handleInput(ev, ctxNow());
+      return d.handleInput(ev, reach ? { ...ctxNow(), keyReach: reach } : ctxNow());
     },
     holdsKeys: () => canvas ? src.actions().holdsKeys() : src.actions().isActive(),
+    pointerOver: () => over,
+    setPointerOver: (next) => {
+      over = canvas !== null && next;
+    },
     activate: () => src.actions().activate(),
     disposed: src.disposed
   };
@@ -505,6 +510,25 @@ function dispatcherWatch(onChange) {
   };
 }
 
+// src/interactions/dispatcher/underPointer.ts
+function underPointer(view, mods, w) {
+  const affordance = view.affordanceAt?.(w) ?? void 0;
+  const body = view.classifyTarget?.(w);
+  return {
+    altKey: mods.altKey,
+    ctrlKey: mods.ctrlKey,
+    metaKey: mods.metaKey,
+    shiftKey: mods.shiftKey,
+    ...affordance !== void 0 ? { affordance } : {},
+    ...body?.body !== void 0 ? { bodyTarget: body.body } : {},
+    ...body?.kind !== void 0 ? { bodyKind: body.kind } : {},
+    ...body?.doubleClick !== void 0 ? { doubleClickBody: doubleClickBodyOf(body.doubleClick) } : {}
+  };
+}
+function doubleClickBodyOf(named) {
+  return { bodyTarget: named.body, ...named.kind !== void 0 ? { bodyKind: named.kind } : {} };
+}
+
 // src/interactions/dispatcher/channels/carry.ts
 function carryInput(core) {
   const { canvas } = core;
@@ -517,6 +541,7 @@ function carryInput(core) {
       if (core.disposed()) return "unhandled";
       const event = () => {
         const w = core.toWorld(at.clientX, at.clientY);
+        const { affordance, bodyTarget, bodyKind } = underPointer(core.target(), at, w);
         return {
           kind: "carry",
           stage,
@@ -530,7 +555,10 @@ function carryInput(core) {
           altKey: at.altKey,
           ctrlKey: at.ctrlKey,
           metaKey: at.metaKey,
-          shiftKey: at.shiftKey
+          shiftKey: at.shiftKey,
+          ...affordance !== void 0 ? { affordance } : {},
+          ...bodyTarget !== void 0 ? { bodyTarget } : {},
+          ...bodyKind !== void 0 ? { bodyKind } : {}
         };
       };
       const routedNow = core.routedView();
@@ -541,13 +569,12 @@ function carryInput(core) {
           return core.dispatch(event());
         }
         if (pinned.has(pointerId)) core.setRoutedView(pinned.get(pointerId));
-        if (stage !== "move") pinned.delete(pointerId);
-        const ev = event();
-        if (stage === "drop" && !core.dispatcherNow().inFlight().has(gestureIdFor(ev))) {
+        if (stage === "drop" || stage === "leave") pinned.delete(pointerId);
+        if (stage !== "leave" && !core.dispatcherNow().inFlight().has(carryGestureId(pointerId))) {
           core.routeAt(null, at.clientX, at.clientY);
-          return core.dispatch(event());
+          if (stage === "move") pinned.set(pointerId, core.routedView());
         }
-        return core.dispatch(ev);
+        return core.dispatch(event());
       } finally {
         core.setRoutedView(routedNow);
       }
@@ -555,25 +582,6 @@ function carryInput(core) {
   });
 }
 
-// src/interactions/dispatcher/underPointer.ts
-function underPointer(view, mods, w) {
-  const affordance = view.affordanceAt?.(w) ?? void 0;
-  const body = view.classifyTarget?.(w);
-  return {
-    altKey: mods.altKey,
-    ctrlKey: mods.ctrlKey,
-    metaKey: mods.metaKey,
-    shiftKey: mods.shiftKey,
-    ...affordance !== void 0 ? { affordance } : {},
-    ...body?.body !== void 0 ? { bodyTarget: body.body } : {},
-    ...body?.kind !== void 0 ? { bodyKind: body.kind } : {},
-    ...body?.doubleClick !== void 0 ? { doubleClickBody: doubleClickBodyOf(body.doubleClick) } : {}
-  };
-}
-function doubleClickBodyOf(named) {
-  return { bodyTarget: named.body, ...named.kind !== void 0 ? { bodyKind: named.kind } : {} };
-}
-
 // src/interactions/dispatcher/channels/contextMenu.ts
 function contextMenuInput(core, takeNativeHold) {
   const { routeAt, toWorld, target, dispatch } = core;
@@ -618,6 +626,15 @@ function hoverCursorInput(core, paintedCursor, pointersHeld, cursorSink = () =>
   };
   let last = null;
   let facts = null;
+  let heldHeard = null;
+  const hears = () => {
+    if (pointersHeld() === 0) {
+      heldHeard = null;
+      return true;
+    }
+    heldHeard ??= anyBinding(ctxNow(), (s) => s.kind === "hover" && s.held !== void 0);
+    return heldHeard;
+  };
   const resolve = () => {
     if (!canvas || !last) return;
     if (pointersHeld() > 0 || dispatcherNow().inFlight().size > 0) {
@@ -635,7 +652,7 @@ function hoverCursorInput(core, paintedCursor, pointersHeld, cursorSink = () =>
     const ctx = ctxNow();
     const d = dispatcherNow();
     const press = { kind: "pointerdown", x: w.x, y: w.y, clientX: h.clientX, clientY: h.clientY, ...where };
-    if (DEV) publishLiveDispatch(() => d.explain(press, ctx));
+    if (ctx.trace?.recording()) ctx.trace.setLive(() => d.explain(press, ctx));
     const click = { kind: "click", x: w.x, y: w.y, pressX: w.x, pressY: w.y, ...where };
     const cursorOf = (r) => r ? actionCursor(r.action, r.params) : void 0;
     const cursor = cursorOf(d.resolveOnly(press, ctx)) ?? cursorOf(dispatcherNow().resolveOnly(click, ctx));
@@ -657,16 +674,18 @@ function hoverCursorInput(core, paintedCursor, pointersHeld, cursorSink = () =>
     const w = toWorld(at.clientX, at.clientY);
     const where = underPointer(target(), at, w);
     const from = facts ? { from: whereOf(facts.where) } : {};
+    const held = pointersHeld() > 0 ? { held: true } : {};
     facts = { at, where };
-    dispatch({ kind: "hover", x: w.x, y: w.y, clientX: at.clientX, clientY: at.clientY, ...where, ...from });
+    dispatch({ kind: "hover", x: w.x, y: w.y, clientX: at.clientX, clientY: at.clientY, ...where, ...from, ...held });
   };
   return {
     moved(e) {
       last = hoverOf(e);
-      if (pointersHeld() === 0) hoverAt(last);
+      if (hears()) hoverAt(last);
       refresh();
     },
     released(e) {
+      heldHeard = null;
       last = hoverOf(e);
       refreshSoon();
     },
@@ -678,7 +697,7 @@ function hoverCursorInput(core, paintedCursor, pointersHeld, cursorSink = () =>
       }
       facts = null;
       last = null;
-      if (DEV) publishLiveDispatch(null);
+      ctxNow().trace?.setLive(null);
       paintedCursor()?.clearPointer();
       override.clear();
     },
@@ -687,7 +706,7 @@ function hoverCursorInput(core, paintedCursor, pointersHeld, cursorSink = () =>
       const prev = last;
       last = { ...last, altKey: e.altKey, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey };
       const changed = prev.altKey !== last.altKey || prev.ctrlKey !== last.ctrlKey || prev.metaKey !== last.metaKey || prev.shiftKey !== last.shiftKey;
-      if (changed && pointersHeld() === 0) hoverAt(last);
+      if (changed && hears()) hoverAt(last);
       refreshSoon();
     },
     clear: override.clear
@@ -792,15 +811,16 @@ function keyboardInput(core) {
   const physicalKey = (e) => e.code || e.key.toLowerCase();
   const onKeyDown = (e) => {
     if (e.defaultPrevented || isEditableTarget(e.target) || inMenu(e.target) || focusedControlOwnsKey(e)) return;
-    if (!core.holdsKeys()) return;
+    const reach = { held: core.holdsKeys(), over: core.pointerOver() };
+    if (!reach.held && !reach.over) return;
     if (e.repeat && heldKeys.has(physicalKey(e))) {
       e.preventDefault();
       return;
     }
-    if (press(e, { altKey: e.altKey, ctrlKey: e.ctrlKey })) return;
-    if (typedWithAltGraph(e)) press(e, { altKey: false, ctrlKey: false });
+    if (press(e, { altKey: e.altKey, ctrlKey: e.ctrlKey }, reach)) return;
+    if (typedWithAltGraph(e)) press(e, { altKey: false, ctrlKey: false }, reach);
   };
-  const press = (e, mods) => {
+  const press = (e, mods, reach) => {
     const keyEv = {
       kind: "key",
       key: e.key,
@@ -810,7 +830,7 @@ function keyboardInput(core) {
       shiftKey: e.shiftKey,
       repeat: e.repeat
     };
-    const keyResult = dispatch(keyEv);
+    const keyResult = dispatch(keyEv, void 0, reach);
     const heldEv = {
       kind: "key-held",
       key: e.key,
@@ -821,7 +841,7 @@ function keyboardInput(core) {
       shiftKey: e.shiftKey
     };
     const heldOn = dispatcherNow();
-    const heldResult = dispatch(heldEv, heldOn);
+    const heldResult = dispatch(heldEv, heldOn, reach);
     if (heldResult === "handled") {
       heldKeys.set(physicalKey(e), { key: e.key, ...codeOf(e), on: heldOn });
     }
@@ -887,6 +907,7 @@ var sampleOf = (e) => ({
   clientX: e.clientX,
   clientY: e.clientY,
   target: e.target,
+  timeStamp: e.timeStamp,
   altKey: e.altKey,
   ctrlKey: e.ctrlKey,
   metaKey: e.metaKey,
@@ -1184,6 +1205,12 @@ function attachInput(canvas, src, channels) {
   listeners.on(canvas, "pointerdown", () => {
     src.actions().activate();
   });
+  const setOver = (on) => () => {
+    core.setPointerOver(on);
+  };
+  listeners.on(canvas, "pointerenter", setOver(true));
+  listeners.on(canvas, "pointermove", setOver(true));
+  listeners.on(canvas, "pointerleave", setOver(false));
   if (channels.pointer) {
     listeners.on(window, "keydown", hover.onKey);
     listeners.on(window, "keyup", hover.onKey);
@@ -1191,6 +1218,14 @@ function attachInput(canvas, src, channels) {
     listeners.on(canvas, "pointerdown", pointer.onPointerDown);
     listeners.on(canvas, "pointermove", pointer.onHoverMove);
     listeners.on(canvas, "dblclick", pointer.onNativeDoubleClick);
+  } else if (channels.hover) {
+    listeners.on(window, "keydown", hover.onKey);
+    listeners.on(window, "keyup", hover.onKey);
+    listeners.on(canvas, "pointerleave", hover.onLeave);
+    listeners.on(canvas, "pointermove", (e) => {
+      core.routeAt(null, e.clientX, e.clientY);
+      hover.moved(e);
+    });
   }
   if (channels.wheel) {
     listeners.on(canvas, "wheel", wheelInput(core, pinch.live), { passive: false, capture: true });
@@ -1227,8 +1262,9 @@ function attachInput(canvas, src, channels) {
 
 // src/interactions/dispatcher/useGestureDispatcher.tsx
 function useGestureDispatcher(opts) {
-  const { canvasRef, actions, entriesById, enabled = true, keyboard = true, affordanceAt, classifyTarget, dispatcher: dispatcherOpt, clientToWorld, clientToLocal, requestRedraw, paintedCursor, cursorSink, getRuleCtx, onClick, onDoubleClick, views, channels, longPress, claimKeys = false, hears = "scope" } = opts;
+  const { canvasRef, actions, entriesById, enabled = true, keyboard = true, affordanceAt, classifyTarget, dispatcher: dispatcherOpt, trace: traceOpt, clientToWorld, clientToLocal, requestRedraw, paintedCursor, cursorSink, getRuleCtx, onClick, onDoubleClick, views, channels, longPress, claimKeys = false, hears = "scope" } = opts;
   const pointerChannel = channels?.pointer !== false;
+  const hoverChannel = channels?.hover ?? pointerChannel;
   const wheelChannel = channels?.wheel !== false;
   const pinchChannel = channels?.pinch !== false;
   const contextMenuChannel = channels?.contextMenu !== false;
@@ -1239,6 +1275,9 @@ function useGestureDispatcher(opts) {
   const activeTool = useActiveToolContext();
   const depRegistry = useDepRegistry();
   const [isMac] = useState(isApplePlatform);
+  const [ownTrace] = useState(createDispatchTrace);
+  const trace = traceOpt ?? ownTrace;
+  useEffect(() => depRegistry.register("dispatchTrace", () => trace), [depRegistry, trace]);
   const dispatcherRef = useRef(null);
   if (!dispatcherRef.current) {
     dispatcherRef.current = dispatcherOpt ?? createDispatcher();
@@ -1254,7 +1293,8 @@ function useGestureDispatcher(opts) {
     activeToolId: activeTool.active,
     hotkeyStack: activeTool.hotkeyStack,
     entriesById,
-    isMac
+    isMac,
+    trace
   });
   const rootTargetRef = useLatest({
     id: null,
@@ -1309,6 +1349,7 @@ function useGestureDispatcher(opts) {
     }, {
       keyboard,
       pointer: pointerChannel,
+      hover: hoverChannel,
       wheel: wheelChannel,
       pinch: pinchChannel,
       contextMenu: contextMenuChannel,
@@ -1320,6 +1361,7 @@ function useGestureDispatcher(opts) {
     keyboard,
     canvasRef,
     pointerChannel,
+    hoverChannel,
     wheelChannel,
     pinchChannel,
     contextMenuChannel,