@weasel-js/labkit 1.7.0 → 1.7.1

package/dist/loupe/index.js

@@ -1,8 +1,587 @@
-export { CanvasLoupe, DomLoupe, LOUPE_DEFAULTS, LOUPE_MAGNIFY_ID, LOUPE_PEEK_ID, LoupeBubble, LoupeGestures, TrialLoupe, createLoupeActions, drawCanvasLens, lensCamera, lensSourceRect, resolveLoupe, sampleStack, useLoupe } from '../chunk-M7HP3FTK.js';
-import '../chunk-JVBYV6TL.js';
-import '../chunk-AWQG7FCC.js';
-import '../chunk-UNAZSLWE.js';
-import '../chunk-24W5VEJW.js';
-import '../chunk-CQLQPQ4P.js';
+import { LoupeSwitchContext } from '../chunk-2ES4W47N.js';
+import { centerOn, zoomAt } from '../chunk-ROGJWDQA.js';
+import { screenToWorld } from '../chunk-FG3EXZDV.js';
+import { CameraContext, CameraScope, fromCameraView } from '../chunk-VYVGVBGY.js';
+import { resolveFrame, DEFAULT_FRAME } from '../chunk-ULYYNWGP.js';
+import { CanvasStackContext } from '../chunk-ZQIHJXP4.js';
+import { useLatest, useVisibleRaf, useActionsRegistry, useGestureDispatcher, normalizeZoom } from '@weasel-js/core';
+import { useRef, useEffect, useContext, useReducer, useCallback, useMemo, useState } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/loupe/canvasLens.ts
+function lensCamera(aim, outer, outerFrame, factor, diameter, worldSpec) {
+  const size = { width: diameter, height: diameter };
+  const frame = resolveFrame(worldSpec, size);
+  const world = screenToWorld(aim, outer, outerFrame);
+  return { view: centerOn(world, outer.zoom * factor, size, frame), frame };
+}
+function lensSourceRect(aim, factor, diameter, dpr) {
+  const span = diameter / factor;
+  return {
+    sx: (aim.x - span / 2) * dpr,
+    sy: (aim.y - span / 2) * dpr,
+    sw: span * dpr,
+    sh: span * dpr
+  };
+}
+function sampleStack(layers, canvases, p, dpr) {
+  for (let i = layers.length - 1; i >= 0; i--) {
+    const layer = layers[i];
+    if (!layer.visible) continue;
+    const canvas = canvases.get(layer.id);
+    if (!canvas) continue;
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
+    if (!ctx) continue;
+    const x = Math.floor(p.x * dpr);
+    const y = Math.floor(p.y * dpr);
+    if (x < 0 || y < 0 || x >= canvas.width || y >= canvas.height) continue;
+    const [r, g, b, a] = ctx.getImageData(x, y, 1, 1).data;
+    if (a === 0) continue;
+    return `#${[r, g, b].map((c) => c.toString(16).padStart(2, "0")).join("")}`;
+  }
+  return null;
+}
+function drawCanvasLens(ctx, opts) {
+  const { aim, factor, diameter, dpr, mode, outer, layers, canvases } = opts;
+  ctx.save();
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, diameter, diameter);
+  if (mode === "pixel") {
+    const { sx, sy, sw, sh } = lensSourceRect(aim, factor, diameter, dpr);
+    ctx.imageSmoothingEnabled = false;
+    for (const layer of layers) {
+      if (!layer.visible) continue;
+      const canvas = canvases.get(layer.id);
+      if (!canvas || canvas.width === 0 || canvas.height === 0) continue;
+      ctx.drawImage(canvas, sx, sy, sw, sh, 0, 0, diameter, diameter);
+    }
+    ctx.restore();
+    return;
+  }
+  const lens = lensCamera(
+    aim,
+    outer,
+    opts.outerFrame ?? DEFAULT_FRAME,
+    factor,
+    diameter,
+    opts.worldSpec
+  );
+  for (const layer of layers) {
+    if (!layer.visible) continue;
+    ctx.save();
+    layer.render(ctx, lens.view, lens.frame);
+    ctx.restore();
+  }
+  ctx.restore();
+}
+function CanvasLoupe({
+  aim,
+  factor,
+  mode,
+  diameter,
+  surface,
+  view,
+  frame,
+  worldSpec
+}) {
+  const canvasRef = useRef(null);
+  const dpr = surface.size.dpr;
+  const args = { aim, factor, mode, diameter, dpr, view, frame, worldSpec, surface };
+  const argsRef = useLatest(args);
+  const loop = useVisibleRaf(
+    () => {
+      loop.request();
+      const canvas = canvasRef.current;
+      const ctx = canvas?.getContext("2d");
+      const canvases = argsRef.current.surface.canvases.current;
+      if (!ctx || !canvases) return;
+      const a = argsRef.current;
+      drawCanvasLens(ctx, {
+        aim: a.aim,
+        factor: a.factor,
+        diameter: a.diameter,
+        dpr: a.dpr,
+        mode: a.mode,
+        outer: a.view,
+        outerFrame: a.frame,
+        worldSpec: a.worldSpec,
+        layers: a.surface.layers,
+        canvases
+      });
+    },
+    { target: canvasRef }
+  );
+  useEffect(() => {
+    loop.request();
+    return () => loop.cancel();
+  }, [loop]);
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      className: "lk-loupe__canvas",
+      width: Math.max(1, Math.round(diameter * dpr)),
+      height: Math.max(1, Math.round(diameter * dpr))
+    }
+  );
+}
+function DomLoupe({
+  aim,
+  factor,
+  mode,
+  diameter,
+  size,
+  view,
+  frame,
+  render
+}) {
+  const style = {
+    width: `${size.width}px`,
+    height: `${size.height}px`,
+    transform: `translate(${diameter / 2 - aim.x}px, ${diameter / 2 - aim.y}px)`
+  };
+  return /* @__PURE__ */ jsx("div", { className: "lk-loupe__stage", style, children: render({
+    view: zoomAt(view, factor, aim, { frame }),
+    factor,
+    mode,
+    size
+  }) });
+}
+function LoupeBubble({ aim, diameter, hostRef, children }) {
+  const style = {
+    width: `${diameter}px`,
+    height: `${diameter}px`,
+    transform: `translate(${aim.x - diameter / 2}px, ${aim.y - diameter / 2}px)`
+  };
+  return /* @__PURE__ */ jsx("div", { ref: hostRef, className: "lk-loupe", style, "aria-hidden": "true", children });
+}
+
+// src/loupe/loupeActions.ts
+var LOUPE_PEEK_ID = "loupe.peek";
+var LOUPE_MAGNIFY_ID = "loupe.magnify";
+var WHEEL_RATE = 2e-3;
+function createLoupeActions(input, peekKey) {
+  const magnify = {
+    id: LOUPE_MAGNIFY_ID,
+    label: "Magnify (loupe)",
+    group: "loupe",
+    // Hotkey scope, so while the lens is up it outranks the trial camera's
+    // wheel zoom on the same dispatcher; while it is down `enabled` declines
+    // and the zoom runs.
+    scope: "hotkey",
+    // Every modifier optional: the lens claims the wheel whenever it is up,
+    // which is what the hand-rolled capture-phase listener did. A bare spec
+    // would forbid modifiers and hand Cmd+wheel back to the lab mid-peek.
+    defaultBinding: [
+      {
+        spec: {
+          kind: "wheel",
+          mods: { alt: "optional", ctrl: "optional", meta: "optional", shift: "optional" }
+        },
+        opts: {}
+      }
+    ],
+    enabled: () => input.shown() ? true : "not-applicable",
+    invoker: {
+      timing: "immediate",
+      run(_deps, params) {
+        input.magnifyBy(params?.deltaY ?? 0);
+      }
+    }
+  };
+  if (peekKey === null) return [magnify];
+  const peek = {
+    id: LOUPE_PEEK_ID,
+    label: "Peek (loupe)",
+    group: "loupe",
+    // Hotkey scope: peeking must beat whatever the lab's active tool binds to
+    // the same key, the way every other held-key trigger does.
+    scope: "hotkey",
+    // Every modifier optional because the peek key may BE one: the keydown
+    // that carries `Alt` — the default — also reports `altKey: true`, and the
+    // matcher forbids any modifier a spec does not name.
+    defaultBinding: [
+      {
+        spec: {
+          kind: "key-held",
+          key: peekKey,
+          mods: { alt: "optional", ctrl: "optional", meta: "optional", shift: "optional" }
+        },
+        opts: {}
+      }
+    ],
+    invoker: {
+      timing: "ongoing",
+      start() {
+        input.setPeeking(true);
+        return { onEnd: () => input.setPeeking(false) };
+      }
+    }
+  };
+  return [peek, magnify];
+}
+var NO_TOOLS = /* @__PURE__ */ new Map();
+var CHANNELS = { pointer: false, contextMenu: false, ingest: false };
+function LoupeDispatch({
+  hostRef,
+  input,
+  peekKey,
+  registry,
+  ownDispatcher
+}) {
+  const actions = useMemo(() => createLoupeActions(input, peekKey), [input, peekKey]);
+  useEffect(() => {
+    const offs = actions.map((a) => registry.register(a));
+    return () => {
+      for (const off of offs) off();
+    };
+  }, [registry, actions]);
+  useGestureDispatcher({
+    canvasRef: hostRef,
+    actions: registry,
+    entriesById: NO_TOOLS,
+    channels: CHANNELS,
+    enabled: ownDispatcher
+  });
+  return null;
+}
+function LoupeGestures(props) {
+  const registry = useActionsRegistry();
+  const camera = useContext(CameraContext);
+  if (!registry) return null;
+  return /* @__PURE__ */ jsx(LoupeDispatch, { ...props, registry, ownDispatcher: camera === null });
+}
+
+// src/loupe/types.ts
+var LOUPE_DEFAULTS = {
+  factor: 6,
+  minFactor: 2,
+  maxFactor: 32,
+  mode: "vector",
+  diameter: 200,
+  peekKey: "Alt"
+};
+function resolveLoupe(options = {}) {
+  const minFactor = options.minFactor ?? LOUPE_DEFAULTS.minFactor;
+  const maxFactor = options.maxFactor ?? LOUPE_DEFAULTS.maxFactor;
+  return {
+    render: options.render,
+    onColorChange: options.onColorChange,
+    minFactor,
+    maxFactor,
+    factor: Math.min(maxFactor, Math.max(minFactor, options.factor ?? LOUPE_DEFAULTS.factor)),
+    diameter: options.diameter ?? LOUPE_DEFAULTS.diameter,
+    peekKey: options.peekKey === void 0 ? LOUPE_DEFAULTS.peekKey : options.peekKey,
+    // A DOM loupe has no framebuffer, so `pixel` would have nothing to enlarge.
+    mode: options.render ? "vector" : options.mode ?? LOUPE_DEFAULTS.mode
+  };
+}
+var ZERO = { width: 0, height: 0 };
+function useHostSize(ref) {
+  const [size, setSize] = useState(ZERO);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const update = () => {
+      const rect = el.getBoundingClientRect();
+      setSize(
+        (prev) => prev.width === rect.width && prev.height === rect.height ? prev : { width: rect.width, height: rect.height }
+      );
+    };
+    update();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [ref]);
+  return size;
+}
+function loupeSourcePoint(p, rect, aim, factor) {
+  return {
+    x: aim.x + (p.x - (rect.x + rect.w / 2)) / factor,
+    y: aim.y + (p.y - (rect.y + rect.h / 2)) / factor
+  };
+}
+function createLoupeModel(opts) {
+  const { surface } = opts;
+  let mode = opts.mode ?? "vector";
+  let factor = normalizeZoom(opts.factor ?? 8);
+  let aim = { x: 0, y: 0 };
+  let color = null;
+  let disposed = false;
+  let aimUnsampled = false;
+  const clamp = (n) => normalizeZoom(Math.min(
+    opts.maxFactor ?? Number.POSITIVE_INFINITY,
+    Math.max(opts.minFactor ?? Number.NEGATIVE_INFINITY, n)
+  ));
+  const sampleColor = () => {
+    const hex = surface.sample(aim);
+    if (hex === null || hex === color) return;
+    color = hex;
+    opts.onColorChange?.(hex);
+  };
+  const unsubscribeFrame = surface.subscribeFrame?.(() => {
+    if (!aimUnsampled) return;
+    aimUnsampled = false;
+    sampleColor();
+  });
+  const teardown = () => {
+    if (disposed) return;
+    disposed = true;
+    unsubscribeFrame?.();
+    opts.onDispose?.();
+  };
+  return {
+    get mode() {
+      return mode;
+    },
+    get factor() {
+      return factor;
+    },
+    get aim() {
+      return aim;
+    },
+    get color() {
+      return color;
+    },
+    setMode(next) {
+      if (disposed || next === mode) return;
+      mode = next;
+      surface.changed();
+    },
+    setFactor(next) {
+      if (disposed) return;
+      factor = clamp(next);
+      surface.changed();
+    },
+    aimAt(p) {
+      if (disposed) return;
+      if (surface.gone()) {
+        teardown();
+        return;
+      }
+      if (surface.hidden()) return;
+      if (surface.covers(p)) return;
+      aim = p;
+      if (unsubscribeFrame) aimUnsampled = true;
+      else sampleColor();
+      surface.changed();
+    },
+    pick(p) {
+      if (disposed) return null;
+      let at = aim;
+      if (p) {
+        const rect = surface.lens();
+        if (!rect) return null;
+        at = loupeSourcePoint(p, rect, aim, factor);
+        if (surface.covers(at)) return null;
+      }
+      const hex = surface.sample(at);
+      if (hex !== null) opts.onPick?.(hex);
+      return hex;
+    },
+    dispose: teardown
+  };
+}
+function lensShown(over, enabled, peeking) {
+  return over && (enabled || peeking);
+}
+function useLoupe({ options, hostRef, enabled, sample }) {
+  const [, bump] = useReducer((n) => n + 1, 0);
+  const overRef = useRef(false);
+  const peekingRef = useRef(false);
+  const enabledRef = useLatest(enabled);
+  const sampleRef = useLatest(sample);
+  const onColorChangeRef = useLatest(options.onColorChange);
+  const shown = useCallback(
+    () => lensShown(overRef.current, enabledRef.current, peekingRef.current),
+    [enabledRef]
+  );
+  const modelRef = useRef(null);
+  if (modelRef.current === null) {
+    modelRef.current = createLoupeModel({
+      mode: options.mode,
+      factor: options.factor,
+      minFactor: options.minFactor,
+      maxFactor: options.maxFactor,
+      onColorChange: (hex) => onColorChangeRef.current?.(hex),
+      surface: {
+        lens: () => {
+          const d = diameterRef.current;
+          const { x, y } = modelRef.current?.aim ?? { x: 0, y: 0 };
+          return { x: x - d / 2, y: y - d / 2, w: d, h: d };
+        },
+        // The lens follows the pointer and is painted over the host rather than
+        // into it, so it is never part of the picture being magnified.
+        covers: () => false,
+        sample: (p) => sampleRef.current?.(p) ?? null,
+        hidden: () => !shown(),
+        gone: () => goneRef.current,
+        changed: bump
+      }
+    });
+  }
+  const model = modelRef.current;
+  const diameterRef = useLatest(options.diameter);
+  const goneRef = useRef(false);
+  useEffect(() => {
+    goneRef.current = false;
+    return () => {
+      goneRef.current = true;
+    };
+  }, []);
+  useEffect(() => {
+    if (!enabled && !peekingRef.current) bump();
+  }, [enabled]);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const onPointerMove = (e) => {
+      overRef.current = true;
+      const rect = host.getBoundingClientRect();
+      model.aimAt({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+      if (!shown()) return;
+      bump();
+    };
+    const onPointerLeave = () => {
+      overRef.current = false;
+      bump();
+    };
+    host.addEventListener("pointermove", onPointerMove);
+    host.addEventListener("pointerleave", onPointerLeave);
+    return () => {
+      host.removeEventListener("pointermove", onPointerMove);
+      host.removeEventListener("pointerleave", onPointerLeave);
+    };
+  }, [hostRef, model, shown]);
+  const inputRef = useRef(null);
+  if (inputRef.current === null) {
+    inputRef.current = {
+      shown,
+      setPeeking: (on) => {
+        if (peekingRef.current === on) return;
+        peekingRef.current = on;
+        bump();
+      },
+      magnifyBy: (deltaY) => {
+        const m = modelRef.current;
+        if (m) m.setFactor(m.factor * Math.exp(-deltaY * WHEEL_RATE));
+      }
+    };
+  }
+  return {
+    // This render's `enabled`: `enabledRef` holds the last committed one.
+    visible: lensShown(overRef.current, enabled, peekingRef.current),
+    aim: model.aim,
+    factor: model.factor,
+    mode: model.mode,
+    color: model.color,
+    setMode: model.setMode,
+    setFactor: model.setFactor,
+    pick: model.pick,
+    input: inputRef.current
+  };
+}
+var IDENTITY = { zoom: 1, pan: { x: 0, y: 0 } };
+function TrialLoupe({
+  enabled,
+  view,
+  hostRef,
+  children,
+  render,
+  factor,
+  minFactor,
+  maxFactor,
+  mode,
+  diameter,
+  peekKey,
+  onColorChange
+}) {
+  const options = useMemo(
+    () => resolveLoupe({
+      render,
+      factor,
+      minFactor,
+      maxFactor,
+      mode,
+      diameter,
+      peekKey,
+      onColorChange
+    }),
+    [render, factor, minFactor, maxFactor, mode, diameter, peekKey, onColorChange]
+  );
+  const stack = useContext(CanvasStackContext);
+  const camera = useContext(CameraContext);
+  const loupeSwitch = useContext(LoupeSwitchContext);
+  const surface = options.render ? void 0 : stack?.surface;
+  const ownHost = useRef(null);
+  const cameraHost = useMemo(
+    () => camera ? {
+      get current() {
+        return camera.element();
+      }
+    } : null,
+    [camera]
+  );
+  const host = surface?.element ?? hostRef ?? cameraHost ?? ownHost;
+  const wraps = host === ownHost;
+  const mount = enabled === void 0 ? loupeSwitch?.mount : void 0;
+  useEffect(() => mount?.(), [mount]);
+  const sample = useMemo(() => {
+    if (!surface) return void 0;
+    return (p) => {
+      const canvases = surface.canvases.current;
+      return canvases ? sampleStack(surface.layers, canvases, p, surface.size.dpr) : null;
+    };
+  }, [surface]);
+  const loupe = useLoupe({
+    options,
+    hostRef: host,
+    enabled: enabled ?? loupeSwitch?.on ?? false,
+    sample
+  });
+  const measured = useHostSize(host);
+  const size = surface?.size ?? measured;
+  const gestures = /* @__PURE__ */ jsx(CameraScope, { children: /* @__PURE__ */ jsx(LoupeGestures, { hostRef: host, input: loupe.input, peekKey: options.peekKey ?? null }) });
+  const lens = loupe.visible ? /* @__PURE__ */ jsx(LoupeBubble, { aim: loupe.aim, diameter: options.diameter, children: options.render ? /* @__PURE__ */ jsx(
+    DomLoupe,
+    {
+      aim: loupe.aim,
+      factor: loupe.factor,
+      mode: loupe.mode,
+      diameter: options.diameter,
+      size,
+      view: view ?? stack?.view ?? (camera ? fromCameraView(camera.view.get(), camera.frame) : IDENTITY),
+      frame: stack?.frame ?? camera?.frame,
+      render: options.render
+    }
+  ) : surface && stack ? /* @__PURE__ */ jsx(
+    CanvasLoupe,
+    {
+      aim: loupe.aim,
+      factor: loupe.factor,
+      mode: loupe.mode,
+      diameter: options.diameter,
+      surface,
+      view: stack.view,
+      frame: stack.frame,
+      worldSpec: surface.worldSpec
+    }
+  ) : null }) : null;
+  if (wraps) {
+    return /* @__PURE__ */ jsxs("div", { ref: ownHost, className: "lk-loupe-host", children: [
+      children,
+      gestures,
+      lens
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    gestures,
+    lens
+  ] });
+}
+
+export { CanvasLoupe, DomLoupe, LOUPE_DEFAULTS, LOUPE_MAGNIFY_ID, LOUPE_PEEK_ID, LoupeBubble, LoupeGestures, TrialLoupe, createLoupeActions, drawCanvasLens, lensCamera, lensSourceRect, resolveLoupe, sampleStack, useLoupe };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map