@oh-just-another/state 0.57.0

package/dist/editor/hit-test.d.ts

@@ -0,0 +1,178 @@
+import { type Scene, type Element } from "@oh-just-another/scene";
+import type { AnnotationId, Bounds, LayerId, LinkId, ElementId, Transform, Vec2 } from "@oh-just-another/types";
+import type { RenderTarget } from "@oh-just-another/renderer-core";
+import type { PressTarget } from "../machine.js";
+import type * as Selection from "../selection.js";
+/**
+ * Bundle of everything `pickPressTarget` needs from the host
+ * editor. Kept narrow so this module doesn't import `Editor` and
+ * stays acycle-free. Callbacks are passed in instead of methods on
+ * a ref class because there are only a handful of them and each is
+ * a small closure over editor state at call time.
+ */
+export interface HitTestContext {
+    readonly scene: Scene;
+    readonly selection: Selection.Selection;
+    readonly selectedLink: LinkId | null;
+    /** Count of selected links — group handles trigger on total objects > 1. */
+    readonly selectedLinkCount: number;
+    readonly enteredGroup: ElementId | null;
+    readonly handleHitSlop: number;
+    readonly edgeHandleHitSlop: number;
+    readonly edgeHitThreshold: number;
+    readonly hitAnnotation: (worldPoint: Vec2) => AnnotationId | null;
+    readonly selectionIsAspectLocked: () => boolean;
+    readonly combinedSelectionBounds: () => Bounds | null;
+    readonly acceleratedElementAt: (worldPoint: Vec2) => Element | undefined;
+    readonly isElementInteractable: (shape: Element) => boolean;
+    readonly isLayerLocked: (layerId: LayerId) => boolean;
+    readonly promoteToGroupRoot: (shape: Element) => Element;
+}
+/**
+ * Resolve the press target under the cursor — annotation pin →
+ * group resize handles → single-shape resize handles → edge
+ * endpoint handles → topmost shape → edge body → empty.
+ *
+ * Order matters: annotation pins sit visually above everything, so
+ * a click on one always wins. Resize handles win over the body of
+ * the shape they belong to so a click on the corner is treated as
+ * resize, not move. Link body comes after shapes because shapes
+ * have richer hit targets.
+ *
+ * Pure — every dependency on Editor goes through `ctx`. Editor's
+ * wrapper just forwards `worldPoint`.
+ */
+export declare const pickPressTarget: (worldPoint: Vec2, ctx: HitTestContext) => PressTarget;
+/**
+ * Minimal slice of the selected link's handle geometry the debug viz
+ * needs — endpoints plus the bend / segment handle world positions the
+ * orchestrator already computed for the real overlay. Mirrors
+ * `LinkSelection` in `overlay.ts` without importing it (would close the
+ * overlay ↔ hit-test runtime cycle).
+ */
+export interface HitZoneEdge {
+    readonly from: Vec2;
+    readonly to: Vec2;
+    /** Existing bend points (world) — grabbable at `LINK_ENDPOINT_HANDLE_RADIUS`. */
+    readonly waypoints?: readonly Vec2[];
+    /** Segment / "add waypoint" midpoints (world) — same grab radius. */
+    readonly midpoints?: readonly Vec2[];
+}
+/**
+ * Link-attach drop-zones to paint while a link endpoint is being placed
+ * (drag from a start dot / draw-edge / endpoint rebind). These are the
+ * snap-engine catchments `snapLinkEndpoint` resolves against, so the user
+ * can see where a drop lands ON a point vs ON an edge:
+ *   - `anchors` — world landing points of each element's connection anchors
+ *     (drop within `thresholdWorld` → fixed anchor);
+ *   - `outlineLoops` — world outline loops of each element (drop within
+ *     `thresholdWorld` of the perimeter → fixed outline point).
+ * `thresholdWorld` is the snap threshold in WORLD units (constant on screen
+ * only after × zoom), matching the engine which compares world distances.
+ */
+export interface HitZoneAttach {
+    readonly anchors: readonly Vec2[];
+    readonly outlineLoops: readonly (readonly Vec2[])[];
+    readonly thresholdWorld: number;
+}
+/**
+ * Element drop-zones to paint while an ELEMENT is being dragged — the two
+ * (separate) membership systems an element can be dropped into:
+ *   - `frames` — full world bounds of every frame; an element joins the
+ *     top-most frame whose bounds contain the dragged element's CENTROID
+ *     (`reconcileFrameMembership`).
+ *   - `containers` — resolved drop-zone world bounds of every template /
+ *     auto-layout / static container; an element reparents to the container
+ *     whose drop-zone contains the cursor (`findContainerAt`).
+ * All bounds are WORLD-space; the draw projects them to screen.
+ */
+export interface HitZoneContainers {
+    readonly frames: readonly Bounds[];
+    readonly containers: readonly Bounds[];
+}
+/**
+ * Which hit-zone categories the debug overlay should paint. Each flag maps to
+ * one block in `drawHitZones`.
+ */
+export interface HitZoneVisibility {
+    /** Resize-handle slop squares on resizable shapes. */
+    readonly resizeHandles: boolean;
+    /** Body bands for every link (the `findLinkAt` catchment). */
+    readonly linkBodies: boolean;
+    /** The selected link's endpoint / waypoint / segment handle circles. */
+    readonly selectedEdgeHandles: boolean;
+    /** The single selected element's link-start anchor dots (grab + click). */
+    readonly anchorDots: boolean;
+    /** Link-attach drop-zones (anchor catchments + edge bands + floating body). */
+    readonly attachDropZones: boolean;
+    /** Element drop-zones (frames + containers) while dragging an element. */
+    readonly containerDropZones: boolean;
+    /** Group-bounds resize-handle slop (multi-select / aspect-locked group). */
+    readonly groupHandles: boolean;
+    /** Annotation-pin grab radius. */
+    readonly annotationPins: boolean;
+}
+/**
+ * SINGLE source of truth for which hit-zone categories are actionable in the
+ * current interaction state — so the debug overlay highlights ONLY what the
+ * user can actually do right now (and the real `pickPressTarget` /
+ * pointer-binding would accept).
+ *
+ * Three mutually-exclusive regimes:
+ *   - placing a link endpoint (drag from a start dot / draw-edge / endpoint
+ *     rebind) → only the link-attach drop-zones are live;
+ *   - dragging an element → only the element drop-zones (frames + containers)
+ *     are live;
+ *   - at rest → resize / link-body / selected-edge / start-dot zones.
+ * Every press in a drag regime is consumed by that gesture, so the other
+ * categories are inert and hidden.
+ */
+export declare const hitZoneVisibility: (input: {
+    readonly linkDragActive: boolean;
+    readonly elementDragActive: boolean;
+}) => HitZoneVisibility;
+/**
+ * Inputs for `drawHitZones`. `visibility` (from `hitZoneVisibility`) gates
+ * which blocks paint; the geometry fields are consumed only by their
+ * corresponding block.
+ */
+export interface DrawHitZonesOptions {
+    readonly scene: Scene;
+    readonly w2s: Transform;
+    readonly zoom: number;
+    readonly selection: Selection.Selection;
+    readonly visibility: HitZoneVisibility;
+    readonly edgeSelection?: HitZoneEdge;
+    readonly attach?: HitZoneAttach;
+    readonly containers?: HitZoneContainers;
+    /** Combined multi-selection / group bounds (world) — for group-handle slop. */
+    readonly groupBounds?: Bounds;
+    /** Restrict group-handle slop to the four corners (aspect-locked). */
+    readonly groupAspectLocked?: boolean;
+}
+/**
+ * Paint the mouse hit-zones gated by `visibility` so the tuned slop /
+ * threshold values can be eyeballed in the browser AND only the currently
+ * actionable targets show. Covers, in screen space (the hit-test works in
+ * screen px):
+ *   - resize-handle slop squares for resizable shapes (matches the handle
+ *     hit-test in `pickPressTarget`);
+ *   - a body band for every link (the `LINK_HIT_THRESHOLD` band `findLinkAt`
+ *     uses);
+ *   - the SELECTED link's endpoint + waypoint + segment handle circles
+ *     (`LINK_ENDPOINT_HANDLE_RADIUS` — these handles are only hit-testable on
+ *     the selected link, so they're drawn only for it);
+ *   - the SINGLE selected element's link-start anchor dots, each with TWO
+ *     nested zones: the wider filled grab halo
+ *     (`ANCHOR_DOT_ACTIVE_RADIUS + ANCHOR_START_HIT_SLOP`, begins a link
+ *     drag) and the narrow dashed click radius (`ANCHOR_DOT_CLICK_RADIUS`,
+ *     click-to-create-element).
+ *
+ * `edgeSelection` carries the sole selected link's handle positions the
+ * orchestrator already computed for the real overlay, so the drawn handle
+ * zones land exactly where the chrome does. Isolated in its own
+ * save/restore so the translucent paint state never leaks into the real
+ * selection chrome.
+ */
+export declare const drawHitZones: (target: RenderTarget, opts: DrawHitZonesOptions) => void;
+//# sourceMappingURL=hit-test.d.ts.map

package/dist/editor/hit-test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hit-test.d.ts","sourceRoot":"","sources":["../../src/editor/hit-test.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,KAAK,EACV,KAAK,OAAO,EACb,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EACV,YAAY,EACZ,MAAM,EACN,OAAO,EACP,MAAM,EACN,SAAS,EACT,SAAS,EACT,IAAI,EACL,MAAM,wBAAwB,CAAC;AAEhC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAgCnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,KAAK,SAAS,MAAM,iBAAiB,CAAC;AAYlD;;;;;;GAMG;AACH,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC;IACxC,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,4EAA4E;IAC5E,QAAQ,CAAC,iBAAiB,EAAE,MAAM,CAAC;IACnC,QAAQ,CAAC,YAAY,EAAE,SAAS,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,iBAAiB,EAAE,MAAM,CAAC;IACnC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,aAAa,EAAE,CAAC,UAAU,EAAE,IAAI,KAAK,YAAY,GAAG,IAAI,CAAC;IAClE,QAAQ,CAAC,uBAAuB,EAAE,MAAM,OAAO,CAAC;IAChD,QAAQ,CAAC,uBAAuB,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;IACtD,QAAQ,CAAC,oBAAoB,EAAE,CAAC,UAAU,EAAE,IAAI,KAAK,OAAO,GAAG,SAAS,CAAC;IACzE,QAAQ,CAAC,qBAAqB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,CAAC;IAC5D,QAAQ,CAAC,aAAa,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;IACtD,QAAQ,CAAC,kBAAkB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,CAAC;CAC1D;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,eAAe,GAAI,YAAY,IAAI,EAAE,KAAK,cAAc,KAAG,WA4FvE,CAAC;AAmKF;;;;;;GAMG;AACH,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC;IAClB,iFAAiF;IACjF,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACrC,qEAAqE;IACrE,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;CACtC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,OAAO,EAAE,SAAS,IAAI,EAAE,CAAC;IAClC,QAAQ,CAAC,YAAY,EAAE,SAAS,CAAC,SAAS,IAAI,EAAE,CAAC,EAAE,CAAC;IACpD,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;CACjC;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,QAAQ,CAAC,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;CACxC;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,sDAAsD;IACtD,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC;IAChC,8DAA8D;IAC9D,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,wEAAwE;IACxE,QAAQ,CAAC,mBAAmB,EAAE,OAAO,CAAC;IACtC,2EAA2E;IAC3E,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,+EAA+E;IAC/E,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAC;IAClC,0EAA0E;IAC1E,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAC;IACrC,4EAA4E;IAC5E,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,kCAAkC;IAClC,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAC;CAClC;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,iBAAiB,GAAI,OAAO;IACvC,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,iBAAiB,EAAE,OAAO,CAAC;CACrC,KAAG,iBAuBH,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,GAAG,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC;IACxC,QAAQ,CAAC,UAAU,EAAE,iBAAiB,CAAC;IACvC,QAAQ,CAAC,aAAa,CAAC,EAAE,WAAW,CAAC;IACrC,QAAQ,CAAC,MAAM,CAAC,EAAE,aAAa,CAAC;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,iBAAiB,CAAC;IACxC,+EAA+E;IAC/E,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,sEAAsE;IACtE,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,YAAY,GAAI,QAAQ,YAAY,EAAE,MAAM,mBAAmB,KAAG,IAkJ9E,CAAC"}

package/dist/editor/hit-test.js

@@ -0,0 +1,460 @@
+import { findLinkAt, getAnnotationWorldPosition, getLink, getLinkPath, getElementWorldBounds, } from "@oh-just-another/scene";
+import { matrix } from "@oh-just-another/math";
+import { ALL_HANDLES, CORNER_HANDLES, HANDLE_HIT_SLOP, handlePosition, hitHandle, } from "../handle.js";
+import { isResizable, resizeHandlesFor } from "./shape-traits.js";
+import { anchorOverlayPoints } from "./anchor-points.js";
+import { ANCHOR_DOT_ACTIVE_RADIUS, ANCHOR_DOT_CLICK_RADIUS, ANCHOR_START_HIT_SLOP, ANNOTATION_PIN_HIT_SLOP, DEBUG_HIT_ZONE_FILL_OPACITY, DEBUG_HIT_ZONE_STROKE_OPACITY, DEBUG_ZONE_ANCHOR_START, DEBUG_ZONE_ANNOTATION, DEBUG_ZONE_ATTACH_BODY, DEBUG_ZONE_ATTACH_EDGE, DEBUG_ZONE_ATTACH_POINT, DEBUG_ZONE_CONTAINER, DEBUG_ZONE_FRAME, DEBUG_ZONE_LINK_BODY, DEBUG_ZONE_LINK_HANDLE, DEBUG_ZONE_RESIZE, LINK_ENDPOINT_HANDLE_RADIUS, LINK_HIT_THRESHOLD, LINK_START_ANCHOR_OUTSET, } from "../constants.js";
+import { getElement } from "@oh-just-another/scene";
+/** Local hypot helper for the hit-test hot path (cheaper than a matrix op). */
+const distanceTo = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+/** Index-access helper: throws on out-of-range instead of returning `undefined`. */
+const req = (v) => {
+    if (v === undefined)
+        throw new Error("packages/state: index out of range");
+    return v;
+};
+/**
+ * Resolve the press target under the cursor — annotation pin →
+ * group resize handles → single-shape resize handles → edge
+ * endpoint handles → topmost shape → edge body → empty.
+ *
+ * Order matters: annotation pins sit visually above everything, so
+ * a click on one always wins. Resize handles win over the body of
+ * the shape they belong to so a click on the corner is treated as
+ * resize, not move. Link body comes after shapes because shapes
+ * have richer hit targets.
+ *
+ * Pure — every dependency on Editor goes through `ctx`. Editor's
+ * wrapper just forwards `worldPoint`.
+ */
+export const pickPressTarget = (worldPoint, ctx) => {
+    const zoom = ctx.scene.viewport.zoom;
+    // 0. Annotation pin first — pins sit visually above everything,
+    //    so a pointer-down that lands on a pin drives the pin drag
+    //    gesture regardless of what's underneath.
+    const annId = ctx.hitAnnotation(worldPoint);
+    if (annId !== null) {
+        const ann = ctx.scene.annotations.get(annId);
+        if (ann) {
+            return {
+                kind: "annotation",
+                id: annId,
+                origin: getAnnotationWorldPosition(ctx.scene, ann),
+            };
+        }
+    }
+    // 1a. Group resize handles win when several shapes are selected,
+    //     OR when a single group-typed shape is selected (which has
+    //     no intrinsic bounds — children's union AABB serves as the
+    //     resize frame). Aspect-locked groups restrict the hit set to
+    //     the four corner handles.
+    const useGroupHandles = ctx.selection.size + ctx.selectedLinkCount > 1 || ctx.selectionIsAspectLocked();
+    if (useGroupHandles) {
+        const combined = ctx.combinedSelectionBounds();
+        if (combined) {
+            const aspectLocked = ctx.selectionIsAspectLocked();
+            const handleSet = aspectLocked ? CORNER_HANDLES : ALL_HANDLES;
+            const handle = hitHandle(worldPoint, combined, zoom, ctx.handleHitSlop, handleSet);
+            if (handle) {
+                return { kind: "group-handle", handle, bounds: combined };
+            }
+        }
+    }
+    // 1b. Resize handles on a single selected shape — only when exactly
+    //     one shape is selected. Multi-selection drops per-shape handles
+    //     in favour of the group bbox handles above; otherwise users
+    //     could resize one child outside the combined frame, which is
+    //     inconsistent with the group outline.
+    if (ctx.selection.size === 1) {
+        for (const id of ctx.selection) {
+            const shape = getElement(ctx.scene, id);
+            if (!shape || !isResizable(shape))
+                continue;
+            if (shape.locked === true)
+                continue; // locked: no resize handles
+            const bounds = getElementWorldBounds(shape);
+            const handle = hitHandle(worldPoint, bounds, zoom, ctx.handleHitSlop, resizeHandlesFor(shape));
+            if (handle) {
+                return { kind: "handle", elementId: id, handle, bounds };
+            }
+        }
+    }
+    // 2. Endpoint handles on a selected edge — only when an edge is
+    //    selected. Threshold in screen pixels, converted to world.
+    if (ctx.selectedLink) {
+        const edge = getLink(ctx.scene, ctx.selectedLink);
+        if (edge) {
+            const path = getLinkPath(ctx.scene, edge);
+            if (path && path.length >= 2) {
+                const handleR = ctx.edgeHandleHitSlop / zoom;
+                const fromPoint = req(path[0]);
+                const toPoint = req(path[path.length - 1]);
+                if (distanceTo(worldPoint, fromPoint) <= handleR) {
+                    return { kind: "edge-endpoint", linkId: edge.id, side: "from" };
+                }
+                if (distanceTo(worldPoint, toPoint) <= handleR) {
+                    return { kind: "edge-endpoint", linkId: edge.id, side: "to" };
+                }
+            }
+        }
+    }
+    // 3. Topmost shape under cursor. Skip shapes whose layer is locked
+    //    OR whose own / ancestor `locked` flag is set (group lock
+    //    propagation). When the hit shape is a child of a group,
+    //    promote to the group root unless the user has "entered" that
+    //    group via double-click.
+    const shape = ctx.acceleratedElementAt(worldPoint);
+    if (shape && ctx.isElementInteractable(shape)) {
+        const target = ctx.promoteToGroupRoot(shape);
+        return { kind: "element", id: target.id, bounds: getElementWorldBounds(target) };
+    }
+    // 4. Link body under cursor.
+    const edge = findLinkAt(ctx.scene, worldPoint, ctx.edgeHitThreshold / zoom);
+    if (edge && !ctx.isLayerLocked(edge.layerId)) {
+        return { kind: "link", id: edge.id };
+    }
+    return { kind: "empty" };
+};
+// ---------------------------------------------------------------------------
+// Debug hit-zone visualisation
+// ---------------------------------------------------------------------------
+// Lives next to `pickPressTarget` (the hit-test it visualises) so the drawn
+// zones and the real hit-targets share the same geometry — handle slop,
+// link threshold, endpoint radius — and can't drift. Painted by the
+// selection overlay (host debug panel → Display → "Show hit-zones"); all
+// sizes are screen-pixel because the hit-test works in screen space.
+/** Translucent debug rect in `color`: filled zone + faint outline. */
+const fillZoneRect = (target, x, y, w, h, color) => {
+    target.setStroke(null);
+    target.setFill(color);
+    target.setOpacity(DEBUG_HIT_ZONE_FILL_OPACITY);
+    target.beginPath();
+    target.rect(x, y, w, h);
+    target.fill();
+    target.setFill(null);
+    target.setStroke(color);
+    target.setStrokeWidth(1);
+    target.setOpacity(DEBUG_HIT_ZONE_STROKE_OPACITY);
+    target.beginPath();
+    target.rect(x, y, w, h);
+    target.stroke();
+};
+/** Translucent debug circle in `color`: filled zone + faint outline. */
+const fillZoneCircle = (target, cx, cy, r, color) => {
+    target.setStroke(null);
+    target.setFill(color);
+    target.setOpacity(DEBUG_HIT_ZONE_FILL_OPACITY);
+    target.beginPath();
+    target.ellipse(cx, cy, r, r);
+    target.fill();
+    target.setFill(null);
+    target.setStroke(color);
+    target.setStrokeWidth(1);
+    target.setOpacity(DEBUG_HIT_ZONE_STROKE_OPACITY);
+    target.beginPath();
+    target.ellipse(cx, cy, r, r);
+    target.stroke();
+};
+/**
+ * Outline-only debug circle in `color` — no fill. Used to draw a SECONDARY
+ * zone nested inside a filled one (e.g. the narrow click radius inside the
+ * wider grab halo of an anchor dot) so the two read as distinct without the
+ * inner fill muddying the outer one. Dashed so it can't be mistaken for the
+ * solid grab-halo outline.
+ */
+const strokeZoneCircle = (target, cx, cy, r, color) => {
+    target.setFill(null);
+    target.setStroke(color);
+    target.setStrokeWidth(1);
+    target.setDashArray([2, 2]);
+    target.setOpacity(DEBUG_HIT_ZONE_STROKE_OPACITY);
+    target.beginPath();
+    target.ellipse(cx, cy, r, r);
+    target.stroke();
+    target.setDashArray(null);
+};
+/**
+ * Translucent debug polygon (filled closed loop) in `color` — used for area
+ * zones like a floating-attach body or a container drop-zone. `pts` are
+ * SCREEN-space points.
+ */
+const fillZoneLoop = (target, pts, color) => {
+    if (pts.length < 3)
+        return;
+    target.setStroke(null);
+    target.setFill(color);
+    target.setOpacity(DEBUG_HIT_ZONE_FILL_OPACITY);
+    target.beginPath();
+    const first = req(pts[0]);
+    target.moveTo(first.x, first.y);
+    for (let i = 1; i < pts.length; i++) {
+        const p = req(pts[i]);
+        target.lineTo(p.x, p.y);
+    }
+    target.closePath();
+    target.fill();
+    target.setFill(null);
+    target.setStroke(color);
+    target.setStrokeWidth(1);
+    target.setOpacity(DEBUG_HIT_ZONE_STROKE_OPACITY);
+    target.beginPath();
+    target.moveTo(first.x, first.y);
+    for (let i = 1; i < pts.length; i++) {
+        const p = req(pts[i]);
+        target.lineTo(p.x, p.y);
+    }
+    target.closePath();
+    target.stroke();
+};
+/**
+ * Resize hit-zones for a world AABB, matching `hitHandle` exactly: CORNER
+ * handles are square grabs at the outset dot positions; EDGE handles
+ * (`n/s/e/w`) are slop BANDS along the whole side (edge resize = drag the box
+ * side, not a midpoint square). Drawn in screen space.
+ */
+const drawResizeZones = (target, w2s, wb, zoom, handleSet, color) => {
+    const tl = matrix.applyToPoint(w2s, { x: wb.x, y: wb.y });
+    const br = matrix.applyToPoint(w2s, { x: wb.x + wb.width, y: wb.y + wb.height });
+    const x = Math.min(tl.x, br.x);
+    const y = Math.min(tl.y, br.y);
+    const w = Math.abs(br.x - tl.x);
+    const h = Math.abs(br.y - tl.y);
+    const s = HANDLE_HIT_SLOP;
+    for (const id of handleSet) {
+        switch (id) {
+            case "nw":
+            case "ne":
+            case "se":
+            case "sw": {
+                const c = matrix.applyToPoint(w2s, handlePosition(id, wb, zoom));
+                fillZoneRect(target, c.x - s, c.y - s, s * 2, s * 2, color);
+                break;
+            }
+            case "n":
+                fillZoneRect(target, x - s, y - s, w + s * 2, s * 2, color);
+                break;
+            case "s":
+                fillZoneRect(target, x - s, y + h - s, w + s * 2, s * 2, color);
+                break;
+            case "w":
+                fillZoneRect(target, x - s, y - s, s * 2, h + s * 2, color);
+                break;
+            case "e":
+                fillZoneRect(target, x + w - s, y - s, s * 2, h + s * 2, color);
+                break;
+        }
+    }
+};
+/**
+ * SINGLE source of truth for which hit-zone categories are actionable in the
+ * current interaction state — so the debug overlay highlights ONLY what the
+ * user can actually do right now (and the real `pickPressTarget` /
+ * pointer-binding would accept).
+ *
+ * Three mutually-exclusive regimes:
+ *   - placing a link endpoint (drag from a start dot / draw-edge / endpoint
+ *     rebind) → only the link-attach drop-zones are live;
+ *   - dragging an element → only the element drop-zones (frames + containers)
+ *     are live;
+ *   - at rest → resize / link-body / selected-edge / start-dot zones.
+ * Every press in a drag regime is consumed by that gesture, so the other
+ * categories are inert and hidden.
+ */
+export const hitZoneVisibility = (input) => {
+    const none = {
+        resizeHandles: false,
+        linkBodies: false,
+        selectedEdgeHandles: false,
+        anchorDots: false,
+        attachDropZones: false,
+        containerDropZones: false,
+        groupHandles: false,
+        annotationPins: false,
+    };
+    // Link placement wins if somehow both are set (it can't normally).
+    if (input.linkDragActive)
+        return { ...none, attachDropZones: true };
+    if (input.elementDragActive)
+        return { ...none, containerDropZones: true };
+    return {
+        ...none,
+        resizeHandles: true,
+        linkBodies: true,
+        selectedEdgeHandles: true,
+        anchorDots: true,
+        groupHandles: true,
+        annotationPins: true,
+    };
+};
+/**
+ * Paint the mouse hit-zones gated by `visibility` so the tuned slop /
+ * threshold values can be eyeballed in the browser AND only the currently
+ * actionable targets show. Covers, in screen space (the hit-test works in
+ * screen px):
+ *   - resize-handle slop squares for resizable shapes (matches the handle
+ *     hit-test in `pickPressTarget`);
+ *   - a body band for every link (the `LINK_HIT_THRESHOLD` band `findLinkAt`
+ *     uses);
+ *   - the SELECTED link's endpoint + waypoint + segment handle circles
+ *     (`LINK_ENDPOINT_HANDLE_RADIUS` — these handles are only hit-testable on
+ *     the selected link, so they're drawn only for it);
+ *   - the SINGLE selected element's link-start anchor dots, each with TWO
+ *     nested zones: the wider filled grab halo
+ *     (`ANCHOR_DOT_ACTIVE_RADIUS + ANCHOR_START_HIT_SLOP`, begins a link
+ *     drag) and the narrow dashed click radius (`ANCHOR_DOT_CLICK_RADIUS`,
+ *     click-to-create-element).
+ *
+ * `edgeSelection` carries the sole selected link's handle positions the
+ * orchestrator already computed for the real overlay, so the drawn handle
+ * zones land exactly where the chrome does. Isolated in its own
+ * save/restore so the translucent paint state never leaks into the real
+ * selection chrome.
+ */
+export const drawHitZones = (target, opts) => {
+    const { scene, w2s, zoom, selection, visibility, edgeSelection, attach, containers } = opts;
+    const { groupBounds, groupAspectLocked } = opts;
+    target.save();
+    // Resize-handle zones — ONLY for the single selected resizable, unlocked
+    // shape. Mirrors `pickPressTarget` step 1b, which offers per-shape handles
+    // only when exactly one shape is selected (multi-select / groups use the
+    // group-bounds handles below). Nothing is resizable with no selection.
+    if (visibility.resizeHandles && selection.size === 1) {
+        const id = req([...selection][0]);
+        const shape = getElement(scene, id);
+        if (shape && isResizable(shape) && shape.locked !== true) {
+            drawResizeZones(target, w2s, getElementWorldBounds(shape), zoom, resizeHandlesFor(shape), DEBUG_ZONE_RESIZE);
+        }
+    }
+    // Link body bands (polyline stroked at 2× the hit threshold) — the
+    // `findLinkAt` target, hit-testable for EVERY link.
+    if (visibility.linkBodies) {
+        for (const edge of scene.links.values()) {
+            const path = getLinkPath(scene, edge);
+            if (!path || path.length < 2)
+                continue;
+            target.setFill(null);
+            target.setStroke(DEBUG_ZONE_LINK_BODY);
+            target.setStrokeWidth(LINK_HIT_THRESHOLD * 2);
+            target.setOpacity(DEBUG_HIT_ZONE_FILL_OPACITY);
+            target.setLineCap("round");
+            target.setLineJoin("round");
+            target.beginPath();
+            const start = matrix.applyToPoint(w2s, req(path[0]));
+            target.moveTo(start.x, start.y);
+            for (let i = 1; i < path.length; i++) {
+                const p = matrix.applyToPoint(w2s, req(path[i]));
+                target.lineTo(p.x, p.y);
+            }
+            target.stroke();
+        }
+    }
+    // Selected link's handle zones — endpoint, waypoint and segment-midpoint
+    // grab circles. These handles only exist on the selected link (see
+    // `pickPressTarget` step 2 + the waypoint / segment drag in
+    // `pointer-binding`), so they're drawn only for it, at the same
+    // `LINK_ENDPOINT_HANDLE_RADIUS` the press uses.
+    if (visibility.selectedEdgeHandles && edgeSelection) {
+        const from = matrix.applyToPoint(w2s, edgeSelection.from);
+        const to = matrix.applyToPoint(w2s, edgeSelection.to);
+        fillZoneCircle(target, from.x, from.y, LINK_ENDPOINT_HANDLE_RADIUS, DEBUG_ZONE_LINK_HANDLE);
+        fillZoneCircle(target, to.x, to.y, LINK_ENDPOINT_HANDLE_RADIUS, DEBUG_ZONE_LINK_HANDLE);
+        for (const w of edgeSelection.waypoints ?? []) {
+            const p = matrix.applyToPoint(w2s, w);
+            fillZoneCircle(target, p.x, p.y, LINK_ENDPOINT_HANDLE_RADIUS, DEBUG_ZONE_LINK_HANDLE);
+        }
+        for (const m of edgeSelection.midpoints ?? []) {
+            const p = matrix.applyToPoint(w2s, m);
+            fillZoneCircle(target, p.x, p.y, LINK_ENDPOINT_HANDLE_RADIUS, DEBUG_ZONE_LINK_HANDLE);
+        }
+    }
+    // Single selected element's link-start anchor dots — wider filled grab
+    // halo (begins a link drag) + narrow dashed click radius (click-to-create).
+    // Only on a sole-element selection, matching the anchor-drag hit-test.
+    if (visibility.anchorDots && selection.size === 1) {
+        const id = req([...selection][0]);
+        const shape = getElement(scene, id);
+        if (shape) {
+            const grab = ANCHOR_DOT_ACTIVE_RADIUS + ANCHOR_START_HIT_SLOP;
+            const { worldPoints } = anchorOverlayPoints(shape, LINK_START_ANCHOR_OUTSET / zoom);
+            for (const p of worldPoints) {
+                const c = matrix.applyToPoint(w2s, p);
+                fillZoneCircle(target, c.x, c.y, grab, DEBUG_ZONE_ANCHOR_START);
+                strokeZoneCircle(target, c.x, c.y, ANCHOR_DOT_CLICK_RADIUS, DEBUG_ZONE_ANCHOR_START);
+            }
+        }
+    }
+    // Link-attach drop-zones — only while a link endpoint is being placed.
+    // Snap catchment is in WORLD units, so screen radius / band width = world
+    // threshold × zoom. Order (under → over): floating body fill (L4), edge band
+    // (L3), anchor catchment circles (L1/L2) so points sit on top.
+    if (visibility.attachDropZones && attach) {
+        const bandWorld = attach.thresholdWorld * zoom;
+        // L4: drop on the body interior → floating attach. Fill each candidate's
+        // outline loop so the user sees "drop anywhere here floats to this shape".
+        for (const loop of attach.outlineLoops) {
+            fillZoneLoop(target, loop.map((p) => matrix.applyToPoint(w2s, p)), DEBUG_ZONE_ATTACH_BODY);
+        }
+        // L3: outline band (fixed outline point along the perimeter).
+        target.setFill(null);
+        target.setStroke(DEBUG_ZONE_ATTACH_EDGE);
+        target.setStrokeWidth(bandWorld * 2);
+        target.setOpacity(DEBUG_HIT_ZONE_FILL_OPACITY);
+        target.setLineCap("round");
+        target.setLineJoin("round");
+        for (const loop of attach.outlineLoops) {
+            if (loop.length < 2)
+                continue;
+            target.beginPath();
+            const first = matrix.applyToPoint(w2s, req(loop[0]));
+            target.moveTo(first.x, first.y);
+            for (let i = 1; i < loop.length; i++) {
+                const p = matrix.applyToPoint(w2s, req(loop[i]));
+                target.lineTo(p.x, p.y);
+            }
+            target.closePath();
+            target.stroke();
+        }
+        // L1/L2: named / edge anchor catchment circles.
+        for (const a of attach.anchors) {
+            const c = matrix.applyToPoint(w2s, a);
+            fillZoneCircle(target, c.x, c.y, bandWorld, DEBUG_ZONE_ATTACH_POINT);
+        }
+    }
+    // Element drop-zones — only while an element is being dragged. Frames
+    // (centroid-in-bounds) and containers (cursor-in-drop-zone). Bounds
+    // are world-space; project the four corners to a screen loop.
+    if (visibility.containerDropZones && containers) {
+        const drawBounds = (b, color) => {
+            const corners = [
+                { x: b.x, y: b.y },
+                { x: b.x + b.width, y: b.y },
+                { x: b.x + b.width, y: b.y + b.height },
+                { x: b.x, y: b.y + b.height },
+            ].map((p) => matrix.applyToPoint(w2s, p));
+            fillZoneLoop(target, corners, color);
+        };
+        for (const b of containers.frames)
+            drawBounds(b, DEBUG_ZONE_FRAME);
+        for (const b of containers.containers)
+            drawBounds(b, DEBUG_ZONE_CONTAINER);
+    }
+    // Group-bounds resize-handle slop — multi-selection / aspect-locked group.
+    // Handle set matches the hit-test: corners only when aspect-locked, else all
+    // 8. Same `HANDLE_HIT_SLOP` squares as single-shape handles, resize colour.
+    if (visibility.groupHandles && groupBounds) {
+        const handleSet = groupAspectLocked ? CORNER_HANDLES : ALL_HANDLES;
+        drawResizeZones(target, w2s, groupBounds, zoom, handleSet, DEBUG_ZONE_RESIZE);
+    }
+    // Annotation-pin grab circles — radius `ANNOTATION_PIN_HIT_SLOP` (screen px),
+    // matching `hitAnnotation`. Pins sit visually above everything, so their hit
+    // wins first in `pickPressTarget`.
+    if (visibility.annotationPins) {
+        for (const ann of scene.annotations.values()) {
+            const c = matrix.applyToPoint(w2s, getAnnotationWorldPosition(scene, ann));
+            fillZoneCircle(target, c.x, c.y, ANNOTATION_PIN_HIT_SLOP, DEBUG_ZONE_ANNOTATION);
+        }
+    }
+    target.setOpacity(1);
+    target.restore();
+};
+//# sourceMappingURL=hit-test.js.map