@oh-just-another/state 0.57.0

package/dist/overlay.js

@@ -0,0 +1,673 @@
+import { getAnnotationWorldPosition, getElementWorldBounds, getWorldToScreen, } from "@oh-just-another/scene";
+import { bounds as B, matrix } from "@oh-just-another/math";
+import { getElementRenderer, strokeRoundedPolyline, LINK_CORNER_RADIUS, } from "@oh-just-another/renderer-core";
+import { ANCHOR_DOT_ACTIVE_RADIUS, ANCHOR_DOT_RADIUS, ANCHOR_DOT_STROKE_WIDTH, ANNOTATION_PIN_BADGE_FONT_SIZE, ANNOTATION_PIN_FILL, ANNOTATION_PIN_RADIUS, ANNOTATION_PIN_RESOLVED_FILL, ANNOTATION_PIN_STROKE, CURSOR_ARROW_SIZE, CURSOR_NAME_CHIP_OFFSET, CURSOR_NAME_CHIP_PADDING_X, CURSOR_NAME_CHIP_PADDING_Y, CURSOR_NAME_FONT_SIZE, DRAW_PREVIEW_OPACITY, GHOST_PREVIEW_OPACITY, LINK_ATTACH_ANCHOR_FILL, LINK_ATTACH_ANCHOR_STROKE, LINK_ENDPOINT_HANDLE_DRAW_RADIUS, LINK_MIDPOINT_HANDLE_DRAW_RADIUS, SELECTION_HALO_PEEK_PX, LINK_START_ANCHOR_FILL, LINK_START_ANCHOR_STROKE, PEER_SELECTION_DASH, PEER_SELECTION_PADDING, PEER_SELECTION_STROKE_WIDTH, TEXT_CARET_WIDTH_PX, TEXT_SELECTION_FILL, TEXT_SELECTION_OPACITY, } from "./constants.js";
+import { CORNER_HANDLES, HANDLE_SIZE, handlePosition, } from "./handle.js";
+import { isResizable } from "./editor/shape-traits.js";
+import { drawHitZones, hitZoneVisibility, } from "./editor/hit-test.js";
+/** 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;
+};
+/**
+ * Union AABB of every direct child of `groupId` (recursive). Returns
+ * `null` for empty groups so callers can skip the outline pass. Used
+ * by the selection overlay to draw a halo around grouped shapes.
+ */
+const groupWorldBounds = (scene, groupId) => {
+    let acc = null;
+    for (const shape of scene.elements.values()) {
+        if (shape.parentId !== groupId)
+            continue;
+        const inner = shape.type === "group" ? groupWorldBounds(scene, shape.id) : getElementWorldBounds(shape);
+        if (!inner)
+            continue;
+        acc = acc ? B.union(acc, inner) : inner;
+    }
+    return acc;
+};
+export const DEFAULT_OVERLAY_STYLE = {
+    selectionStroke: "#1a73e8",
+    selectionStrokeWidth: 1,
+    handleFill: "#fff",
+    handleStroke: "#1a73e8",
+    drawingStroke: "#1a73e8",
+    drawingDash: [4, 4],
+};
+/** Translucent fill opacity for the under-shape selection halo. */
+const SELECTION_HALO_OPACITY = 0.32;
+/**
+ * Paint the contour selection halo for elements — a translucent stroke
+ * hugging each world-space outline loop. Drawn on the dedicated background
+ * layer (under the shapes) so it peeks out from behind them. The stroke is
+ * centred on the contour with width `2 × (outset + peek/zoom)`, so its outer
+ * edge lands exactly `peek` screen px beyond the element's VISIBLE edge
+ * (contour + border outset) at every zoom and border thickness. Sets the
+ * world transform itself; resets to identity at the end.
+ */
+export const paintElementSelectionHalo = (target, w2s, halos, zoom, style = DEFAULT_OVERLAY_STYLE) => {
+    if (halos.length === 0)
+        return;
+    const z = zoom || 1;
+    const peekWorld = SELECTION_HALO_PEEK_PX / z;
+    target.setTransform(w2s);
+    target.setStroke(style.selectionStroke);
+    target.setOpacity(SELECTION_HALO_OPACITY);
+    target.setDashArray(null);
+    // Miter join so the halo reproduces the element's own corners (sharp on a
+    // rectangle / polygon, pointed on a star); rounded corners come from the
+    // traced outline points (rounded-rect / ellipse), not the join.
+    target.setLineJoin("miter");
+    target.setLineCap("butt");
+    for (const { loops, outsetWorld } of halos) {
+        // Centred stroke → outer edge sits (width/2) past the contour. We want
+        // that to be outset + peek, so width = 2 × (outset + peek).
+        target.setStrokeWidth(2 * (outsetWorld + peekWorld));
+        for (const loop of loops) {
+            if (loop.length < 2)
+                continue;
+            target.beginPath();
+            let started = false;
+            for (const p of loop) {
+                if (started)
+                    target.lineTo(p.x, p.y);
+                else {
+                    target.moveTo(p.x, p.y);
+                    started = true;
+                }
+            }
+            target.closePath();
+            target.stroke();
+        }
+    }
+    target.setOpacity(1);
+    target.setTransform(matrix.IDENTITY);
+};
+export const renderOverlay = (scene, selection, target, options = {}) => {
+    const style = { ...DEFAULT_OVERLAY_STYLE, ...options.style };
+    target.clear();
+    // World → screen transform: handles draw at constant screen size.
+    const w2s = getWorldToScreen(scene.viewport);
+    const zoom = scene.viewport.zoom;
+    target.save();
+    target.setTransform(matrix.IDENTITY);
+    // 0. Debug hit-zones — drawn first so the real selection chrome sits
+    //    on top. Visualises every element's mouse hit-targets.
+    if (options.debugHitZones) {
+        drawHitZones(target, {
+            scene,
+            w2s,
+            zoom,
+            selection,
+            visibility: options.debugHitZoneVisibility ??
+                hitZoneVisibility({ linkDragActive: false, elementDragActive: false }),
+            ...(options.edgeSelection ? { edgeSelection: options.edgeSelection } : {}),
+            ...(options.debugAttachZones ? { attach: options.debugAttachZones } : {}),
+            ...(options.debugContainerZones ? { containers: options.debugContainerZones } : {}),
+            ...(options.groupBounds ? { groupBounds: options.groupBounds } : {}),
+            ...(options.groupAspectLocked !== undefined
+                ? { groupAspectLocked: options.groupAspectLocked }
+                : {}),
+        });
+    }
+    // 1. Selection outlines (+ handles only when a single shape is
+    //    selected). Multi-selection skips per-shape handles in favour of
+    //    the combined group bbox handles drawn later — otherwise the
+    //    overlay would look like a forest of corner squares and the user
+    //    could grab a child handle, which `hitTest` also blocks.
+    const multiSelect = selection.size > 1;
+    for (const id of selection) {
+        const shape = scene.elements.get(id);
+        if (!shape)
+            continue;
+        // Groups have no intrinsic geometry — outline the union of their
+        // descendants instead. Otherwise the selection chrome would collapse
+        // to a zero-size point at the group's origin.
+        const worldBounds = shape.type === "group" ? groupWorldBounds(scene, id) : getElementWorldBounds(shape);
+        if (!worldBounds)
+            continue;
+        const screenBounds = projectBounds(worldBounds, w2s);
+        drawOutline(target, screenBounds, style);
+        // Locked element: no resize handles; show a small lock badge instead so
+        // the user sees why it won't move/resize (click still selects → unlock).
+        if (shape.locked === true) {
+            drawLockBadge(target, screenBounds);
+            continue;
+        }
+        if (multiSelect || !isResizable(shape))
+            continue;
+        // Draw only the four CORNER dots. The edge-midpoint handles are gone from
+        // the chrome — edge resize is done by dragging the selection-box side
+        // (see `hitHandle`), so no midpoint dot is needed. `resizeHandlesFor`
+        // (ALL_HANDLES) still drives hit-test capability.
+        for (const handle of CORNER_HANDLES) {
+            const worldPoint = handlePosition(handle, worldBounds, zoom);
+            const screenPoint = matrix.applyToPoint(w2s, worldPoint);
+            drawHandle(target, screenPoint, style);
+        }
+    }
+    // 2. Rubber-band drawing preview (already in world coords if drawn before transform reset)
+    if (options.drawingPreview) {
+        const screenBounds = projectBounds(options.drawingPreview, w2s);
+        drawDrawingPreview(target, screenBounds, style);
+    }
+    // 2.5 WYSIWYG shape-draw preview — render the would-be element through
+    //     its real renderer (in the world→screen transform, like renderScene)
+    //     so a drag shows the actual rect / ellipse + default style, not just
+    //     a dashed box. Drawn faded so it reads as "not committed yet".
+    if (options.drawingPreviewElement) {
+        const el = options.drawingPreviewElement;
+        const renderer = getElementRenderer(el.type);
+        if (renderer) {
+            target.save();
+            target.setTransform(w2s);
+            target.setOpacity(DRAW_PREVIEW_OPACITY);
+            target.setDashArray(null);
+            target.translate(el.position.x, el.position.y);
+            if (el.rotation !== 0)
+                target.rotate(el.rotation);
+            if (el.scale.x !== 1 || el.scale.y !== 1)
+                target.scale(el.scale.x, el.scale.y);
+            renderer(el, target);
+            target.restore();
+        }
+    }
+    // 3. Link-drawing preview — dashed line in screen space. An elbow preview
+    //    carries the full orthogonal polyline (`points`); otherwise a straight
+    //    from→to segment.
+    if (options.edgePreview) {
+        const pts = options.edgePreview.points;
+        if (pts && pts.length >= 2) {
+            drawLinkPreviewPath(target, pts.map((p) => matrix.applyToPoint(w2s, p)), style);
+        }
+        else {
+            const from = matrix.applyToPoint(w2s, options.edgePreview.from);
+            const to = matrix.applyToPoint(w2s, options.edgePreview.to);
+            drawLinkPreview(target, from, to, style);
+        }
+    }
+    // 3.4 Ghost preview for "click a start dot → create element". Just the
+    //     would-be ELEMENT here (faded); its connector is drawn separately
+    //     through the real link renderer by the orchestrator (so it matches
+    //     the link that'll be created, not a dashed line).
+    if (options.ghostElement || options.ghostElementShape) {
+        target.setOpacity(GHOST_PREVIEW_OPACITY);
+        const ghostShape = options.ghostElementShape;
+        const ghostRenderer = ghostShape ? getElementRenderer(ghostShape.type) : undefined;
+        if (ghostShape && ghostRenderer) {
+            // Render the actual shape through its renderer (in the world→screen
+            // transform, like renderScene) so the ghost matches the real element.
+            target.save();
+            target.setTransform(w2s);
+            target.setDashArray(null); // shape is solid; don't inherit any dash state
+            target.translate(ghostShape.position.x, ghostShape.position.y);
+            if (ghostShape.rotation !== 0)
+                target.rotate(ghostShape.rotation);
+            if (ghostShape.scale.x !== 1 || ghostShape.scale.y !== 1) {
+                target.scale(ghostShape.scale.x, ghostShape.scale.y);
+            }
+            ghostRenderer(ghostShape, target);
+            target.restore();
+        }
+        else if (options.ghostElement) {
+            const g = projectBounds(options.ghostElement, w2s);
+            target.setStroke(style.selectionStroke);
+            target.setStrokeWidth(1.5);
+            target.setDashArray(null);
+            target.setFill(null);
+            target.beginPath();
+            target.rect(g.x, g.y, g.width, g.height);
+            target.stroke();
+        }
+        target.setOpacity(1);
+    }
+    // 3.5 Float-attach target highlight — the whole element a connector will
+    //     attach to (drop on body, not a dot). Brand outline, under the dots.
+    if (options.linkAttachHighlight) {
+        const b = projectBounds(options.linkAttachHighlight, w2s);
+        const pad = 2;
+        target.setStroke(style.selectionStroke);
+        target.setStrokeWidth(2);
+        target.setDashArray(null);
+        target.setFill(null);
+        target.beginPath();
+        target.rect(b.x - pad, b.y - pad, b.width + pad * 2, b.height + pad * 2);
+        target.stroke();
+    }
+    // 4. Port dots — hover affordance in draw-edge mode. May be one set or
+    //    several (source start-anchors + target attach-anchors at once).
+    if (options.ports) {
+        const portSets = Array.isArray(options.ports)
+            ? options.ports
+            : [options.ports];
+        for (const set of portSets) {
+            for (let i = 0; i < set.worldPoints.length; i++) {
+                const screen = matrix.applyToPoint(w2s, req(set.worldPoints[i]));
+                const active = set.activeIndex === i;
+                drawPortDot(target, screen, style, active, set.role, active ? set.activeRadius : undefined);
+            }
+        }
+    }
+    // 4.6 Persistent selection halo around every selected link. Same world-
+    // space rounded-stroke technique as the hover halo, but with the
+    // selection colour and a touch more opacity so it reads as "selected".
+    if (options.selectedLinkPaths && options.selectedLinkPaths.length > 0) {
+        target.setTransform(w2s);
+        target.setStroke(style.selectionStroke);
+        target.setOpacity(0.32);
+        target.setDashArray(null);
+        target.setLineJoin("round");
+        target.setLineCap("round");
+        // A link's stroke is centred on its path, so its visible edge is
+        // `width/2` from the path. Halo width `= width + 2 × peek/zoom` →
+        // `2 × (width/2 + peek/zoom)` → peeks exactly `peek` screen px beyond the
+        // link's visible edge, same constant as elements.
+        const peekWorld = SELECTION_HALO_PEEK_PX / (zoom || 1);
+        for (const { path, width } of options.selectedLinkPaths) {
+            if (path.length < 2)
+                continue;
+            target.setStrokeWidth(width + 2 * peekWorld);
+            target.beginPath();
+            strokeRoundedPolyline(target, path, LINK_CORNER_RADIUS);
+            target.stroke();
+        }
+        target.setOpacity(1);
+        target.setLineJoin("miter");
+        target.setLineCap("butt");
+        target.setTransform(matrix.IDENTITY);
+    }
+    // 5. Selected-edge endpoint handles + bend-point (waypoint) handles.
+    if (options.edgeSelection) {
+        const from = matrix.applyToPoint(w2s, options.edgeSelection.from);
+        const to = matrix.applyToPoint(w2s, options.edgeSelection.to);
+        // Segment-midpoint "add waypoint" handles (drawn first, under the rest).
+        for (const m of options.edgeSelection.midpoints ?? []) {
+            drawLinkMidpointHandle(target, matrix.applyToPoint(w2s, m), style);
+        }
+        drawLinkEndpointHandle(target, from, style);
+        drawLinkEndpointHandle(target, to, style);
+        for (const w of options.edgeSelection.waypoints ?? []) {
+            drawLinkEndpointHandle(target, matrix.applyToPoint(w2s, w), style);
+        }
+    }
+    // 6. Peer selection halos — dashed outline around shapes selected
+    // by remote users, painted in their colour. Drawn before own-
+    // selection outlines so own selection stays on top.
+    if (options.peerSelections) {
+        for (const peer of options.peerSelections) {
+            for (const wb of peer.bounds) {
+                const sb = projectBounds(wb, w2s);
+                drawPeerSelection(target, sb, peer.color);
+            }
+        }
+    }
+    // 6.5. Live brush stroke preview — quad-strip with interpolated
+    //      widths, same render path as the committed BrushElement. Runs
+    //      in world coords so the stroke stays anchored to the cursor
+    //      as the user zooms / pans mid-stroke.
+    if (options.brushPreview && options.brushPreview.points.length > 0) {
+        const bp = options.brushPreview;
+        target.save();
+        target.setTransform(w2s);
+        target.setFill(bp.fill);
+        target.setStroke(null);
+        const pts = bp.points;
+        const ox = bp.origin.x;
+        const oy = bp.origin.y;
+        if (pts.length === 1) {
+            const p = req(pts[0]);
+            target.beginPath();
+            target.ellipse(ox + p.x, oy + p.y, p.width, p.width);
+            target.fill();
+        }
+        else {
+            for (let i = 0; i < pts.length - 1; i++) {
+                const a = req(pts[i]);
+                const b = req(pts[i + 1]);
+                const ax = ox + a.x;
+                const ay = oy + a.y;
+                const bx = ox + b.x;
+                const by = oy + b.y;
+                const dx = bx - ax;
+                const dy = by - ay;
+                const len = Math.hypot(dx, dy) || 1;
+                const nx = -dy / len;
+                const ny = dx / len;
+                target.beginPath();
+                target.moveTo(ax + nx * a.width, ay + ny * a.width);
+                target.lineTo(bx + nx * b.width, by + ny * b.width);
+                target.lineTo(bx - nx * b.width, by - ny * b.width);
+                target.lineTo(ax - nx * a.width, ay - ny * a.width);
+                target.closePath();
+                target.fill();
+                target.beginPath();
+                target.ellipse(bx, by, b.width, b.width);
+                target.fill();
+            }
+        }
+        target.restore();
+    }
+    // 7.0. Container drop-zone highlight — drawn under selection chrome
+    //      so handles stay legible. Dashed rect + soft fill — same
+    //      visual language as the drawing preview.
+    if (options.containerDropZone) {
+        const zoneScreen = projectBounds(options.containerDropZone, w2s);
+        target.setFill("rgba(26, 115, 232, 0.10)");
+        target.setStroke("#1a73e8");
+        target.setStrokeWidth(2);
+        target.setDashArray([6, 3]);
+        target.beginPath();
+        target.rect(zoneScreen.x, zoneScreen.y, zoneScreen.width, zoneScreen.height);
+        target.fill();
+        target.stroke();
+        target.setDashArray(null);
+    }
+    // 7. Multi-selection / group-typed combined bounds — outline + handles.
+    //    Only CORNER dots are drawn (edge resize = drag the box side); the
+    //    edge handles stay hit-testable via `hitHandle` for non-aspect-locked
+    //    groups.
+    if (options.groupBounds) {
+        const groupScreen = projectBounds(options.groupBounds, w2s);
+        drawOutline(target, groupScreen, style);
+        const handleSet = CORNER_HANDLES;
+        for (const handle of handleSet) {
+            const worldPoint = handlePosition(handle, options.groupBounds, zoom);
+            const screenPoint = matrix.applyToPoint(w2s, worldPoint);
+            drawHandle(target, screenPoint, style);
+        }
+    }
+    // 7.5. Annotation pins — drawn before peer cursors so cursors stay
+    // on top, but on top of selection handles. Each pin shows a comment
+    // count badge when the thread has > 0 replies.
+    if (options.annotations && options.annotations.length > 0) {
+        for (const ann of options.annotations) {
+            const world = getAnnotationWorldPosition(scene, ann);
+            const screen = matrix.applyToPoint(w2s, world);
+            drawAnnotationPin(target, screen, ann, options.selectedAnnotation ?? null);
+        }
+    }
+    // 8. Remote peer cursors — drawn last so they sit on top of every
+    // other overlay element (including own selection handles).
+    if (options.peerCursors) {
+        for (const cursor of options.peerCursors) {
+            const screen = matrix.applyToPoint(w2s, cursor.position);
+            drawPeerCursor(target, screen, cursor.color, cursor.name);
+        }
+    }
+    // 9. GIF "play" badges on paused animated shapes — drawn last
+    //    so they sit above selection chrome.
+    if (options.gifBadges) {
+        for (const b of options.gifBadges) {
+            drawGifBadge(target, projectBounds(b, w2s));
+        }
+    }
+    // 10. In-canvas text editing: translucent selection highlight, then
+    //     the caret bar on top. Both backends draw this via the shared
+    //     RenderTarget primitives (rect + fill), so it's identical on
+    //     Canvas2D and WebGL2.
+    if (options.editingText) {
+        const et = options.editingText;
+        if (et.selectionRects.length > 0) {
+            target.setFill(TEXT_SELECTION_FILL);
+            target.setOpacity(TEXT_SELECTION_OPACITY);
+            for (const r of et.selectionRects) {
+                const s = projectBounds(r, w2s);
+                target.beginPath();
+                target.rect(s.x, s.y, s.width, s.height);
+                target.fill();
+            }
+            target.setOpacity(1);
+        }
+        if (et.caret) {
+            const p = matrix.applyToPoint(w2s, { x: et.caret.x, y: et.caret.y });
+            target.setFill(et.caretColor);
+            target.setOpacity(1);
+            target.beginPath();
+            target.rect(p.x, p.y, TEXT_CARET_WIDTH_PX, et.caret.height * zoom);
+            target.fill();
+        }
+    }
+    target.restore();
+};
+/** Rounded "gif" chip in a shape's top-left corner — signals a paused
+ *  GIF the user can click (or hover) to resume. */
+const GIF_BADGE_W = 30;
+const GIF_BADGE_H = 16;
+const GIF_BADGE_PAD = 4;
+const GIF_BADGE_RADIUS = 4;
+/** Small padlock badge at a selected locked element's top-right corner. */
+const LOCK_BADGE_SIZE = 16;
+const drawLockBadge = (target, b) => {
+    const s = LOCK_BADGE_SIZE;
+    const x = b.x + b.width - s - 2;
+    const y = b.y + 2;
+    const color = "#1a73e8";
+    // Shackle — a ring above the body; its lower half is hidden by the body so
+    // the visible top arc reads as the lock's bow.
+    target.setStroke(color);
+    target.setFill(null);
+    target.setStrokeWidth(2);
+    target.setDashArray(null);
+    target.setOpacity(1);
+    target.beginPath();
+    target.ellipse(x + s / 2, y + s * 0.46, s * 0.22, s * 0.26);
+    target.stroke();
+    // Body — solid rounded block.
+    target.setStroke(null);
+    target.setFill(color);
+    target.beginPath();
+    target.rect(x + s * 0.2, y + s * 0.44, s * 0.6, s * 0.48);
+    target.fill();
+    // Keyhole.
+    target.setFill("#fff");
+    target.beginPath();
+    target.ellipse(x + s / 2, y + s * 0.64, s * 0.07, s * 0.07);
+    target.fill();
+};
+const drawGifBadge = (target, screen) => {
+    const x = screen.x + GIF_BADGE_PAD;
+    const y = screen.y + GIF_BADGE_PAD;
+    const w = GIF_BADGE_W;
+    const h = GIF_BADGE_H;
+    const r = GIF_BADGE_RADIUS;
+    // Rounded-rect background.
+    target.setStroke(null);
+    target.setFill("rgba(0,0,0,0.65)");
+    target.beginPath();
+    target.moveTo(x + r, y);
+    target.lineTo(x + w - r, y);
+    target.quadraticCurveTo(x + w, y, x + w, y + r);
+    target.lineTo(x + w, y + h - r);
+    target.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+    target.lineTo(x + r, y + h);
+    target.quadraticCurveTo(x, y + h, x, y + h - r);
+    target.lineTo(x, y + r);
+    target.quadraticCurveTo(x, y, x + r, y);
+    target.closePath();
+    target.fill();
+    // "gif" label.
+    target.setFill("#ffffff");
+    target.setFont("system-ui, sans-serif", 10);
+    target.setTextAlign("center");
+    target.setTextBaseline("middle");
+    target.fillText("gif", x + w / 2, y + h / 2);
+};
+const projectBounds = (b, w2s) => {
+    const tl = matrix.applyToPoint(w2s, { x: b.x, y: b.y });
+    const br = matrix.applyToPoint(w2s, { x: b.x + b.width, y: b.y + b.height });
+    const x = Math.min(tl.x, br.x);
+    const y = Math.min(tl.y, br.y);
+    return { x, y, width: Math.abs(br.x - tl.x), height: Math.abs(br.y - tl.y) };
+};
+const drawOutline = (target, b, style) => {
+    target.setStroke(style.selectionStroke);
+    target.setStrokeWidth(style.selectionStrokeWidth);
+    target.setDashArray(null);
+    target.beginPath();
+    target.rect(b.x, b.y, b.width, b.height);
+    target.stroke();
+};
+const drawHandle = (target, center, style) => {
+    // Circle of radius HANDLE_SIZE — visually equivalent to a rounded
+    // square with maximum corner radius, but renders via `ellipse`
+    // which every RenderTarget already supports (canvas, svg). A rounded
+    // shape reads as "draggable handle" more clearly than a sharp rectangle.
+    target.setFill(style.handleFill);
+    target.setStroke(style.handleStroke);
+    target.setStrokeWidth(1);
+    target.setDashArray(null);
+    target.beginPath();
+    target.ellipse(center.x, center.y, HANDLE_SIZE, HANDLE_SIZE);
+    target.fill();
+    target.stroke();
+};
+const drawDrawingPreview = (target, b, style) => {
+    target.setStroke(style.drawingStroke);
+    target.setStrokeWidth(1);
+    target.setDashArray(style.drawingDash);
+    target.beginPath();
+    target.rect(b.x, b.y, b.width, b.height);
+    target.stroke();
+};
+const drawLinkPreview = (target, from, to, style) => {
+    target.setStroke(style.drawingStroke);
+    target.setStrokeWidth(1.5);
+    target.setDashArray(style.drawingDash);
+    target.beginPath();
+    target.moveTo(from.x, from.y);
+    target.lineTo(to.x, to.y);
+    target.stroke();
+};
+/** Dashed polyline preview (elbow) in screen space. */
+const drawLinkPreviewPath = (target, pts, style) => {
+    target.setStroke(style.drawingStroke);
+    target.setStrokeWidth(1.5);
+    target.setDashArray(style.drawingDash);
+    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.stroke();
+};
+const drawPortDot = (target, center, style, active, role = "link-start", activeRadius) => {
+    const radius = active ? (activeRadius ?? ANCHOR_DOT_ACTIVE_RADIUS) : ANCHOR_DOT_RADIUS;
+    const isStart = role === "link-start";
+    // When active (snapped), use the inverse fill of the resting state
+    // to highlight the dot.
+    const fill = active
+        ? (isStart ? LINK_START_ANCHOR_STROKE : LINK_ATTACH_ANCHOR_STROKE)
+        : (isStart ? LINK_START_ANCHOR_FILL : LINK_ATTACH_ANCHOR_FILL);
+    const stroke = isStart ? LINK_START_ANCHOR_STROKE : LINK_ATTACH_ANCHOR_STROKE;
+    target.setStroke(stroke);
+    target.setStrokeWidth(ANCHOR_DOT_STROKE_WIDTH);
+    target.setDashArray(null);
+    target.setFill(fill);
+    target.beginPath();
+    target.ellipse(center.x, center.y, radius, radius);
+    target.fill();
+    target.stroke();
+};
+const drawLinkEndpointHandle = (target, center, style) => {
+    const radius = LINK_ENDPOINT_HANDLE_DRAW_RADIUS;
+    target.setStroke(style.selectionStroke);
+    target.setStrokeWidth(2);
+    target.setDashArray(null);
+    target.setFill(style.handleFill);
+    target.beginPath();
+    target.ellipse(center.x, center.y, radius, radius);
+    target.fill();
+    target.stroke();
+};
+// Smaller, semi-transparent dot on a segment midpoint — the "drag to add a
+// bend point" affordance. Lighter than a real waypoint handle so it reads
+// as secondary.
+const drawLinkMidpointHandle = (target, center, style) => {
+    const radius = LINK_MIDPOINT_HANDLE_DRAW_RADIUS;
+    target.setOpacity(0.55);
+    target.setStroke(style.selectionStroke);
+    target.setStrokeWidth(1.5);
+    target.setDashArray(null);
+    target.setFill(style.handleFill);
+    target.beginPath();
+    target.ellipse(center.x, center.y, radius, radius);
+    target.fill();
+    target.stroke();
+    target.setOpacity(1);
+};
+const drawPeerSelection = (target, b, color) => {
+    const pad = PEER_SELECTION_PADDING;
+    target.setStroke(color);
+    target.setStrokeWidth(PEER_SELECTION_STROKE_WIDTH);
+    target.setDashArray(PEER_SELECTION_DASH);
+    target.beginPath();
+    target.rect(b.x - pad, b.y - pad, b.width + 2 * pad, b.height + 2 * pad);
+    target.stroke();
+};
+const drawPeerCursor = (target, tip, color, name) => {
+    // Arrow glyph — a triangle anchored at the cursor tip. Coordinates
+    // are relative to the tip; the canonical macOS pointer leans down-
+    // right.
+    const size = CURSOR_ARROW_SIZE;
+    target.setFill(color);
+    target.setStroke("#fff");
+    target.setStrokeWidth(1);
+    target.setDashArray(null);
+    target.beginPath();
+    target.moveTo(tip.x, tip.y);
+    target.lineTo(tip.x + size * 0.7, tip.y + size * 0.25);
+    target.lineTo(tip.x + size * 0.35, tip.y + size * 0.4);
+    target.lineTo(tip.x + size * 0.5, tip.y + size * 0.95);
+    target.lineTo(tip.x + size * 0.35, tip.y + size * 1.05);
+    target.lineTo(tip.x + size * 0.2, tip.y + size * 0.5);
+    target.lineTo(tip.x, tip.y + size * 0.65);
+    target.closePath();
+    target.fill();
+    target.stroke();
+    // Name chip — anchored down-right of the tip.
+    target.setFont("sans-serif", CURSOR_NAME_FONT_SIZE);
+    target.setTextBaseline("top");
+    target.setTextAlign("left");
+    const textWidth = target.measureText(name).width;
+    const chipX = tip.x + CURSOR_NAME_CHIP_OFFSET;
+    const chipY = tip.y + CURSOR_NAME_CHIP_OFFSET;
+    const chipW = textWidth + 2 * CURSOR_NAME_CHIP_PADDING_X;
+    const chipH = CURSOR_NAME_FONT_SIZE + 2 * CURSOR_NAME_CHIP_PADDING_Y;
+    target.setFill(color);
+    target.setStrokeWidth(0);
+    target.beginPath();
+    target.rect(chipX, chipY, chipW, chipH);
+    target.fill();
+    target.setFill("#fff");
+    target.fillText(name, chipX + CURSOR_NAME_CHIP_PADDING_X, chipY + CURSOR_NAME_CHIP_PADDING_Y);
+};
+const drawAnnotationPin = (target, center, annotation, selectedId) => {
+    const radius = ANNOTATION_PIN_RADIUS;
+    const fill = annotation.resolved ? ANNOTATION_PIN_RESOLVED_FILL : ANNOTATION_PIN_FILL;
+    const selected = annotation.id === selectedId;
+    // Circle body.
+    target.setFill(fill);
+    target.setStroke(selected ? "#1a73e8" : ANNOTATION_PIN_STROKE);
+    target.setStrokeWidth(selected ? 2 : 1.5);
+    target.setDashArray(null);
+    target.beginPath();
+    target.ellipse(center.x, center.y, radius, radius);
+    target.fill();
+    target.stroke();
+    // Comment-count badge (when thread length > 1; the first comment is the
+    // body of the pin itself).
+    if (annotation.thread.length > 0) {
+        const count = annotation.thread.length;
+        const label = count > 9 ? "9+" : String(count);
+        target.setFont("sans-serif", ANNOTATION_PIN_BADGE_FONT_SIZE);
+        target.setTextAlign("center");
+        target.setTextBaseline("middle");
+        target.setFill("#fff");
+        target.fillText(label, center.x, center.y);
+    }
+};
+//# sourceMappingURL=overlay.js.map