@ng-prism/core 22.3.0 → 22.4.1

package/dist/app/canvas/prism-canvas-measure.component.js

@@ -0,0 +1,554 @@
+import { afterNextRender, ChangeDetectionStrategy, Component, computed, DestroyRef, ElementRef, inject, signal } from '@angular/core';
+import { MEASURE_SNAP_TOLERANCE } from '../../shared/measure.type.js';
+import { PrismCanvasService } from '../services/prism-canvas.service.js';
+import { PrismMeasureService } from '../services/prism-measure.service.js';
+import { PrismRendererService } from '../services/prism-renderer.service.js';
+import { constrainDirection, formatMeasure, labelPlacement, measureDistance, quantizeFree, tickEndpoints, toHostSpace, toLocal, toScreen } from './measure-geometry.js';
+import { nudge } from './measure-keyboard.js';
+import { outlineOf, quadCentre, quadLines, quadSpans, quadSummary } from './measure-quad.js';
+import { nearestSnap, readElementBox, snapTargetsFor } from './measure-snap.js';
+import * as i0 from "@angular/core";
+function PrismCanvasMeasureComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElement(0, "rect", 7);
+} if (rf & 2) {
+    const r_r1 = ctx;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("m-outline--preview", ctx_r1.hover().preview);
+    i0.ɵɵattribute("x", r_r1.x)("y", r_r1.y)("width", r_r1.width)("height", r_r1.height);
+} }
+function PrismCanvasMeasureComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElement(0, "rect", 2);
+} if (rf & 2) {
+    const r_r3 = ctx;
+    i0.ɵɵattribute("x", r_r3.x)("y", r_r3.y)("width", r_r3.width)("height", r_r3.height);
+} }
+function PrismCanvasMeasureComponent_For_4_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElement(0, "line", 8);
+} if (rf & 2) {
+    const e_r4 = ctx.$implicit;
+    i0.ɵɵattribute("x1", e_r4[0].x)("y1", e_r4[0].y)("x2", e_r4[1].x)("y2", e_r4[1].y);
+} }
+function PrismCanvasMeasureComponent_For_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElementStart(0, "g");
+    i0.ɵɵdomElement(1, "line")(2, "line")(3, "line");
+    i0.ɵɵrepeaterCreate(4, PrismCanvasMeasureComponent_For_4_For_5_Template, 1, 4, ":svg:line", 8, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const l_r5 = ctx.$implicit;
+    i0.ɵɵclassProp("is-pinned", l_r5.pinned);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("x1", l_r5.a.x)("y1", l_r5.a.y)("x2", l_r5.b.x)("y2", l_r5.b.y);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("x1", l_r5.tickA[0].x)("y1", l_r5.tickA[0].y)("x2", l_r5.tickA[1].x)("y2", l_r5.tickA[1].y);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("x1", l_r5.tickB[0].x)("y1", l_r5.tickB[0].y)("x2", l_r5.tickB[1].x)("y2", l_r5.tickB[1].y);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(l_r5.echoes);
+} }
+function PrismCanvasMeasureComponent_For_6_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElement(0, "line", 8);
+} if (rf & 2) {
+    const e_r6 = ctx.$implicit;
+    i0.ɵɵattribute("x1", e_r6[0].x)("y1", e_r6[0].y)("x2", e_r6[1].x)("y2", e_r6[1].y);
+} }
+function PrismCanvasMeasureComponent_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElementStart(0, "g");
+    i0.ɵɵdomElement(1, "line")(2, "line")(3, "line");
+    i0.ɵɵrepeaterCreate(4, PrismCanvasMeasureComponent_For_6_For_5_Template, 1, 4, ":svg:line", 8, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const l_r7 = ctx.$implicit;
+    i0.ɵɵclassProp("is-pinned", l_r7.pinned);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("x1", l_r7.a.x)("y1", l_r7.a.y)("x2", l_r7.b.x)("y2", l_r7.b.y);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("x1", l_r7.tickA[0].x)("y1", l_r7.tickA[0].y)("x2", l_r7.tickA[1].x)("y2", l_r7.tickA[1].y);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("x1", l_r7.tickB[0].x)("y1", l_r7.tickB[0].y)("x2", l_r7.tickB[1].x)("y2", l_r7.tickB[1].y);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(l_r7.echoes);
+} }
+function PrismCanvasMeasureComponent_For_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 9);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const l_r8 = ctx.$implicit;
+    i0.ɵɵstyleProp("left", l_r8.label.x, "px")("top", l_r8.label.y, "px");
+    i0.ɵɵclassProp("is-pinned", l_r8.pinned);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", l_r8.text, " ");
+} }
+function PrismCanvasMeasureComponent_For_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 9);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const l_r9 = ctx.$implicit;
+    i0.ɵɵstyleProp("left", l_r9.label.x, "px")("top", l_r9.label.y, "px");
+    i0.ɵɵclassProp("is-pinned", l_r9.pinned);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", l_r9.text, " ");
+} }
+function PrismCanvasMeasureComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.hover().summary, " ");
+} }
+function PrismCanvasMeasureComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.lines()[ctx_r1.lines().length - 1].text, " ");
+} }
+/**
+ * The topmost element under a screen point that belongs to the specimen.
+ *
+ * `elementsFromPoint`, the plural one, and the loop are what make this work
+ * at all. The overlay host sits above `.demo-wrap` (see the `z-index` in the
+ * stylesheet and why it has to be there) and is the one layer that takes
+ * pointer events across the whole stage — so the singular `elementFromPoint`
+ * answers the overlay itself for every point over the specimen, `contains`
+ * then rejects it, and snapping and alt-click anchoring both stop working
+ * entirely. Walking the hit list past the overlay's own subtree is what
+ * gives the element actually underneath it.
+ *
+ * The `contains` check stays, and is still not optional: the toolrail and
+ * the viewport grips sit *above* the overlay, so they appear in the hit list
+ * ahead of anything in the specimen. Only the first hit the rendered root
+ * owns is the one the tool may latch onto.
+ */
+export function elementUnderPoint(x, y, root) {
+    if (!root)
+        return null;
+    for (const hit of document.elementsFromPoint(x, y)) {
+        if (root.contains(hit))
+            return hit;
+    }
+    return null;
+}
+/**
+ * A snap's edge as a line segment, crosswise to the edge's axis.
+ *
+ * The length is deliberately fixed rather than the full edge length: an echo
+ * that retraces the whole element edge reads as a second measurement instead
+ * of a footnote to the first.
+ */
+const ECHO_HALF_LENGTH = 14;
+export function echoFor(point, screen) {
+    if (!point.snap)
+        return null;
+    const horizontal = point.snap.side === 'top' || point.snap.side === 'bottom';
+    return horizontal
+        ? [
+            { x: screen.x - ECHO_HALF_LENGTH, y: screen.y },
+            { x: screen.x + ECHO_HALF_LENGTH, y: screen.y }
+        ]
+        : [
+            { x: screen.x, y: screen.y - ECHO_HALF_LENGTH },
+            { x: screen.x, y: screen.y + ECHO_HALF_LENGTH }
+        ];
+}
+/**
+ * Wires the two triggers that tell `lines` its drawn geometry might be
+ * stale, and returns how to undo them.
+ *
+ * A `ResizeObserver` on `stage` and `wrap` covers window resize, panel
+ * resize, and the specimen itself changing size. Resize alone is not enough
+ * because scrolling moves the specimen without resizing anything — a
+ * `ResizeObserver` does not fire on scroll — so `stage` also gets its own
+ * `scroll` listener. Dropping either one leaves the lines drawn at a screen
+ * position the specimen has since left, which is the worst impression a
+ * measuring tool can make.
+ *
+ * Takes the `ResizeObserver` constructor as a parameter instead of reading
+ * the global directly so the wiring stays testable without a real one:
+ * jsdom does not implement `ResizeObserver` at all, the same gap
+ * `elementsFromPoint` has above.
+ */
+export function watchGeometry(stage, wrap, onChange, ResizeObserverCtor = ResizeObserver) {
+    const ro = new ResizeObserverCtor(onChange);
+    ro.observe(stage);
+    if (wrap)
+        ro.observe(wrap);
+    stage.addEventListener('scroll', onChange);
+    return () => {
+        ro.disconnect();
+        stage.removeEventListener('scroll', onChange);
+    };
+}
+const EMPTY_HOVER = { lines: [], summary: '', anchor: null, target: null, preview: false };
+/**
+ * Keyboard support here only operates a draft that already exists: nudge,
+ * commit, cancel. There is deliberately no keyboard path to *start* one —
+ * Spec §10 calls for Tab to step through the specimen's snap targets as the
+ * accessible substitute for a pointer-down, and that is not built. Tab is
+ * left strictly alone by `onKey` (see its doc, and `nudge`'s) precisely so
+ * it stays free for that mechanism once it exists, rather than being
+ * repurposed here as a stand-in. The `aria-label` below only promises what
+ * this component actually does today; it does not mention Tab, because
+ * nothing happens when a user presses it. What the real interaction should
+ * be is still undecided — a tool covering the whole canvas cannot simply
+ * grab Tab for its own stepping without first deciding how a keyboard user
+ * gets back out, and that is a product decision, not one this task makes.
+ */
+export class PrismCanvasMeasureComponent {
+    el = inject((ElementRef));
+    destroyRef = inject(DestroyRef);
+    canvas = inject(PrismCanvasService);
+    renderer = inject(PrismRendererService);
+    measure = inject(PrismMeasureService);
+    /**
+     * Bumped whenever geometry `lines` depends on might have moved without
+     * touching zoom, pins or the draft — see {@link watchGeometry} below.
+     *
+     * `getBoundingClientRect()` inside `origin()`, `hostRect()`,
+     * `specimenCentre()` and `boxOf()` is not itself a reactive signal:
+     * without an explicit nudge like this one, nothing would tell `lines` to
+     * re-run after a scroll or a resize, and the drawn lines would stay put
+     * while the specimen moves out from under them. It covers the host's own
+     * rect too, so reading that per evaluation costs no new trigger.
+     */
+    geometryTick = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "geometryTick" }] : /* istanbul ignore next */ []));
+    /** Origin and zoom the projection runs from, in viewport coordinates. */
+    origin() {
+        const wrap = this.el.nativeElement.parentElement?.querySelector('.demo-wrap');
+        const r = wrap?.getBoundingClientRect();
+        return { x: r?.left ?? 0, y: r?.top ?? 0 };
+    }
+    /**
+     * The host's own rect — what every drawn coordinate is measured against.
+     *
+     * Read once per `lines()` / `hover()` evaluation and handed to
+     * {@link toHostSpace}, which carries the full explanation of why the
+     * subtraction exists at all.
+     */
+    hostRect() {
+        return this.el.nativeElement.getBoundingClientRect();
+    }
+    lines = computed(() => {
+        const zoom = this.canvas.zoom();
+        // Read for the dependency, not the value — the same way
+        // prism-canvas-rulers.component.ts forces a dependency on
+        // themeService.theme() without using it. This is what makes a
+        // scroll or a resize re-run this computed.
+        this.geometryTick();
+        const host = this.hostRect();
+        const origin = this.origin();
+        const centre = this.specimenCentre(host);
+        const all = [...this.measure.pins().map((m) => ({ m, pinned: true })), ...(this.measure.draft() ? [{ m: this.measure.draft(), pinned: false }] : [])];
+        return all.map(({ m, pinned }) => {
+            // toScreen answers in viewport coordinates, because that is the
+            // space `origin` lives in and the space `pointAt` reads the
+            // pointer in. toHostSpace is what turns that into the SVG's own
+            // user coordinates; everything downstream — ticks, label, echoes
+            // — is derived from the projected points and so follows.
+            const a = toHostSpace(toScreen(m.a, origin, zoom), host);
+            const b = toHostSpace(toScreen(m.b, origin, zoom), host);
+            return {
+                a,
+                b,
+                tickA: tickEndpoints(a, b, 'a'),
+                tickB: tickEndpoints(a, b, 'b'),
+                label: labelPlacement(a, b, centre),
+                text: `${formatMeasure(measureDistance(m.a, m.b))} px`,
+                pinned,
+                echoes: [echoFor(m.a, a), echoFor(m.b, b)].filter((e) => e !== null)
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+    /**
+     * Everything the alt-hover mode draws, in one evaluation.
+     *
+     * One computed rather than three because all of it comes out of the same
+     * two `getBoundingClientRect()` reads, and splitting it would read the
+     * anchor's box once per consumer on every change detection pass.
+     */
+    hover = computed(() => {
+        const anchorEl = this.measure.hoverAnchor();
+        const targetEl = this.hoverTarget();
+        // Same dependency-only read that `lines` above makes on
+        // `geometryTick`. `boxOf` reads `getBoundingClientRect()`, which is
+        // not itself reactive: holding the pointer still over an unchanged
+        // target does not re-set `hoverTarget` to a new value, so without
+        // this a scroll or a resize during that hold would leave the readout
+        // stale.
+        this.geometryTick();
+        // No anchor yet: outline whatever a click would take, so the choice is
+        // visible before it is made rather than after. Marked as a prediction
+        // so it draws fainter — at equal weight the click would change nothing
+        // on screen, the outline simply ceasing to follow the pointer, which is
+        // the same missing confirmation the anchor outline exists to provide.
+        if (!anchorEl) {
+            if (!targetEl)
+                return EMPTY_HOVER;
+            return { ...EMPTY_HOVER, anchor: outlineOf(this.boxOf(targetEl, this.hostRect())), preview: true };
+        }
+        const zoom = this.canvas.zoom();
+        const host = this.hostRect();
+        const a = this.boxOf(anchorEl, host);
+        // Spec §4.5: the anchor is outlined dashed from the moment it is
+        // set, before anything is hovered. Without it an Alt-click produces
+        // no visible change whatsoever — and hovering the anchor back to
+        // check cannot confirm it either, because that case deliberately
+        // draws no spans. The outline is the only confirmation the anchor
+        // registered, and it is also what tells the two ends of a single
+        // one-sided reading apart.
+        const anchor = outlineOf(a);
+        if (!targetEl || anchorEl === targetEl)
+            return { ...EMPTY_HOVER, anchor };
+        const t = this.boxOf(targetEl, host);
+        // `quadSpans` already drops a side with nothing to say, so an anchor
+        // and target that merely overlap correctly renders nothing at all —
+        // see its doc on `measure-quad.ts`. The DOM-bound half (boxOf) stops
+        // here; quadSpans/quadCentre/quadLines/quadSummary are all pure and tested
+        // directly in measure-quad.spec.ts.
+        const spans = quadSpans(a, t);
+        return {
+            lines: quadLines(spans, quadCentre(a, t), zoom),
+            summary: quadSummary(spans, zoom),
+            anchor,
+            // Solid against the anchor's dashed outline, per Spec §4.5.
+            target: outlineOf(t),
+            // The anchor is real by this point, not a prediction.
+            preview: false
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []));
+    /** The element under the pointer while alt-hovering, `null` otherwise. */
+    hoverTarget = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverTarget" }] : /* istanbul ignore next */ []));
+    /**
+     * An element's current rectangle as a {@link Box}, already in host
+     * space.
+     *
+     * Projected here rather than at the four call sites downstream: a box
+     * that reached `quadSpans` in viewport coordinates would produce correct
+     * *distances* — a constant offset cancels in a subtraction — and draw
+     * them in the wrong place, which is the half that is actually visible.
+     */
+    boxOf(element, host) {
+        const r = element.getBoundingClientRect();
+        const topLeft = toHostSpace({ x: r.left, y: r.top }, host);
+        const bottomRight = toHostSpace({ x: r.right, y: r.bottom }, host);
+        return { left: topLeft.x, top: topLeft.y, right: bottomRight.x, bottom: bottomRight.y };
+    }
+    specimenCentre(host) {
+        const r = this.renderer.renderedElement()?.getBoundingClientRect();
+        return r ? toHostSpace({ x: r.left + r.width / 2, y: r.top + r.height / 2 }, host) : { x: 0, y: 0 };
+    }
+    /** A pointer point, snapped to the nearest edge, in local coordinates. */
+    pointAt(clientX, clientY) {
+        const zoom = this.canvas.zoom();
+        const origin = this.origin();
+        const hit = elementUnderPoint(clientX, clientY, this.renderer.renderedElement());
+        const screen = { x: clientX, y: clientY };
+        // Every return below is quantized, and the asymmetry inside
+        // `quantizeFree` is the reason it is applied here rather than at the
+        // call site: only one axis of a snapped point comes from the document,
+        // and this is the only place that knows which.
+        if (!hit)
+            return quantizeFree({ ...toLocal(screen, origin, zoom), snap: null });
+        const target = nearestSnap(screen, snapTargetsFor(readElementBox(hit)), MEASURE_SNAP_TOLERANCE);
+        if (!target)
+            return quantizeFree({ ...toLocal(screen, origin, zoom), snap: null });
+        const snapped = target.axis === 'x' ? { x: target.at, y: clientY } : { x: clientX, y: target.at };
+        return quantizeFree({ ...toLocal(snapped, origin, zoom), snap: { kind: target.kind, side: target.side, from: hit } });
+    }
+    /**
+     * Keyboard operation of the running draft.
+     *
+     * `Escape` and `Enter` act regardless of what `nudge` would say about the
+     * key; everything else only matters while a draft is open.
+     * `preventDefault` is called only on the branches that actually consumed
+     * the key — never for `Tab`, which `nudge` returns `null` for and this
+     * method then leaves untouched. Swallowing it here would break keyboard
+     * navigation of the whole shell for the sake of a tool that, as shipped,
+     * has nothing of its own to put Tab to — see `nudge`'s doc.
+     */
+    onKey(event) {
+        if (event.key === 'Escape') {
+            this.measure.cancelDraft();
+            return;
+        }
+        if (event.key === 'Enter') {
+            this.measure.commitDraft();
+            event.preventDefault();
+            return;
+        }
+        const draft = this.measure.draft();
+        if (!draft)
+            return;
+        const moved = nudge(draft.b, event.key, event.shiftKey);
+        if (!moved)
+            return;
+        this.measure.updateDraft({ ...moved, snap: null });
+        event.preventDefault();
+    }
+    constructor() {
+        const host = this.el.nativeElement;
+        const down = (e) => {
+            // Primary button only, and the same failure
+            // `prism-resizer.directive.ts` guards against in its own
+            // `onMouseDown`: a right-click arms the drag, the context menu
+            // then takes the pointer so the matching `pointerup` never
+            // arrives, and the draft stays open afterwards with no button
+            // held. From there `move`'s `if (!this.measure.draft()) return;`
+            // protects nothing any more and the measurement simply follows
+            // the cursor. `preventDefault` does not suppress `contextmenu`,
+            // so the guard has to be the button check.
+            if (e.button !== 0)
+                return;
+            // Held Alt: fix the element under the pointer as the hover
+            // anchor instead of starting a drag measurement.
+            if (e.altKey) {
+                this.measure.setHoverAnchor(elementUnderPoint(e.clientX, e.clientY, this.renderer.renderedElement()));
+                return;
+            }
+            // Stops the drag from selecting the specimen's text and painting
+            // a selection highlight across the very thing being measured.
+            // `user-select: none` on the host does not cover it: the
+            // selection starts on the specimen underneath, not on the
+            // overlay.
+            e.preventDefault();
+            // …which also suppresses the compatibility `mousedown`, and with
+            // it the focus the host would otherwise have received from the
+            // click. Without this line the keyboard handling below becomes
+            // unreachable for anyone who starts with the pointer, which is
+            // everyone — a measurement cannot be started any other way.
+            host.focus({ preventScroll: true });
+            this.measure.beginDraft(this.pointAt(e.clientX, e.clientY));
+            host.setPointerCapture(e.pointerId);
+        };
+        const move = (e) => {
+            // Held Alt: track the element under the pointer as the hover
+            // target instead of updating a drag measurement in progress.
+            if (e.altKey) {
+                this.hoverTarget.set(elementUnderPoint(e.clientX, e.clientY, this.renderer.renderedElement()));
+                return;
+            }
+            this.hoverTarget.set(null);
+            const draft = this.measure.draft();
+            if (!draft)
+                return;
+            const point = this.pointAt(e.clientX, e.clientY);
+            // Shift pulls the measurement onto the nearest of the eight
+            // 45-degree directions, the same service it performs in Photoshop,
+            // Illustrator and Figma. It runs on the already-snapped point
+            // rather than instead of it, so a latched edge still contributes
+            // on whichever axis the constraint preserves — see
+            // `constrainDirection`. Releasing Shift frees the drag again
+            // immediately, mid-drag included, because nothing about the
+            // constraint is stored.
+            this.measure.updateDraft(e.shiftKey ? constrainDirection(draft.a, point) : point);
+        };
+        const up = () => {
+            const draft = this.measure.draft();
+            if (!draft)
+                return;
+            // A pointer-down that never moved is a click, not a drag.
+            // `beginDraft` seeds `b` with `a`, so the two stay exactly equal
+            // until the first `pointermove` — and committing that pins a
+            // `0 px` chip the user then has to dismiss by hand. A finished
+            // drag being a pin is the design; a bare click is not a drag.
+            if (draft.a.x === draft.b.x && draft.a.y === draft.b.y) {
+                this.measure.cancelDraft();
+                return;
+            }
+            this.measure.commitDraft();
+        };
+        // A cancelled pointer — the browser taking it for a scroll or a
+        // gesture, the device going away — otherwise leaves the draft open
+        // for ever, the same end state the missing button guard above
+        // produced by another route.
+        const cancel = () => this.measure.cancelDraft();
+        host.addEventListener('pointerdown', down);
+        host.addEventListener('pointermove', move);
+        host.addEventListener('pointerup', up);
+        host.addEventListener('pointercancel', cancel);
+        this.destroyRef.onDestroy(() => {
+            host.removeEventListener('pointerdown', down);
+            host.removeEventListener('pointermove', move);
+            host.removeEventListener('pointerup', up);
+            host.removeEventListener('pointercancel', cancel);
+        });
+        // Deferred the same way box-model-overlay.component.ts defers its
+        // own read of `parentElement`: the host is not reliably attached to
+        // its final place in the stage yet while the constructor is running.
+        afterNextRender(() => {
+            const stage = host.parentElement;
+            if (!stage)
+                return;
+            const wrap = stage.querySelector('.demo-wrap');
+            this.destroyRef.onDestroy(watchGeometry(stage, wrap, () => this.geometryTick.update((v) => v + 1)));
+        });
+    }
+    static ɵfac = function PrismCanvasMeasureComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismCanvasMeasureComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismCanvasMeasureComponent, selectors: [["prism-canvas-measure"]], hostAttrs: ["tabindex", "0", "role", "group", "aria-label", "Measure tool. Arrow keys nudge the active point, Shift for a larger step, Enter commits, Escape clears."], hostBindings: function PrismCanvasMeasureComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown", function PrismCanvasMeasureComponent_keydown_HostBindingHandler($event) { return ctx.onKey($event); });
+        } }, decls: 15, vars: 3, consts: [["aria-hidden", "true", 1, "m-svg"], [1, "m-outline", "m-outline--anchor", 3, "m-outline--preview"], [1, "m-outline", "m-outline--target"], [3, "is-pinned"], [1, "m-labels"], [1, "m-label", 3, "is-pinned", "left", "top"], ["role", "status", "aria-live", "polite", 1, "m-live"], [1, "m-outline", "m-outline--anchor"], [1, "m-echo"], [1, "m-label"]], template: function PrismCanvasMeasureComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵdomElementStart(0, "svg", 0);
+            i0.ɵɵconditionalCreate(1, PrismCanvasMeasureComponent_Conditional_1_Template, 1, 6, ":svg:rect", 1);
+            i0.ɵɵconditionalCreate(2, PrismCanvasMeasureComponent_Conditional_2_Template, 1, 4, ":svg:rect", 2);
+            i0.ɵɵrepeaterCreate(3, PrismCanvasMeasureComponent_For_4_Template, 6, 14, ":svg:g", 3, i0.ɵɵrepeaterTrackByIndex);
+            i0.ɵɵrepeaterCreate(5, PrismCanvasMeasureComponent_For_6_Template, 6, 14, ":svg:g", 3, i0.ɵɵrepeaterTrackByIndex);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵdomElementStart(7, "div", 4);
+            i0.ɵɵrepeaterCreate(8, PrismCanvasMeasureComponent_For_9_Template, 2, 7, "span", 5, i0.ɵɵrepeaterTrackByIndex);
+            i0.ɵɵrepeaterCreate(10, PrismCanvasMeasureComponent_For_11_Template, 2, 7, "span", 5, i0.ɵɵrepeaterTrackByIndex);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(12, "span", 6);
+            i0.ɵɵconditionalCreate(13, PrismCanvasMeasureComponent_Conditional_13_Template, 1, 1)(14, PrismCanvasMeasureComponent_Conditional_14_Template, 1, 1);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            let tmp_0_0;
+            let tmp_1_0;
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((tmp_0_0 = ctx.hover().anchor) ? 1 : -1, tmp_0_0);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((tmp_1_0 = ctx.hover().target) ? 2 : -1, tmp_1_0);
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.lines());
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.hover().lines);
+            i0.ɵɵadvance(3);
+            i0.ɵɵrepeater(ctx.lines());
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.hover().lines);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.hover().summary ? 13 : ctx.lines().length > 0 ? 14 : -1);
+        } }, styles: ["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    cursor: crosshair;\n\n    \n\n\n\n    user-select: none;\n}\n\n.m-svg[_ngcontent-%COMP%], \n.m-labels[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n}\n\n\n\n\n\n\n\n\n\n\n.m-svg[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n}\n\n.m-svg[_ngcontent-%COMP%]   line[_ngcontent-%COMP%] {\n    stroke: var(--%NS%prism-measure);\n    stroke-width: 1;\n    stroke-linecap: round;\n}\n\n.m-svg[_ngcontent-%COMP%]   .is-pinned[_ngcontent-%COMP%]   line[_ngcontent-%COMP%] {\n    stroke-opacity: 0.55;\n}\n\n\n\n.m-svg[_ngcontent-%COMP%]   .m-echo[_ngcontent-%COMP%] {\n    stroke-opacity: 0.34;\n    stroke-dasharray: 2 3;\n}\n\n.m-svg[_ngcontent-%COMP%]   .is-pinned[_ngcontent-%COMP%]   .m-echo[_ngcontent-%COMP%] {\n    stroke-opacity: 0.2;\n}\n\n\n\n\n\n\n.m-svg[_ngcontent-%COMP%]   .m-outline[_ngcontent-%COMP%] {\n    fill: none;\n    stroke: var(--%NS%prism-measure);\n    stroke-opacity: 0.7;\n    stroke-width: 1;\n}\n\n.m-svg[_ngcontent-%COMP%]   .m-outline--anchor[_ngcontent-%COMP%] {\n    stroke-dasharray: 4 3;\n}\n\n\n\n\n\n\n.m-svg[_ngcontent-%COMP%]   .m-outline--preview[_ngcontent-%COMP%] {\n    stroke-opacity: 0.35;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.m-label[_ngcontent-%COMP%] {\n    position: absolute;\n    padding: var(--%NS%sp-1) var(--%NS%sp-2);\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-xs);\n    font-variant-numeric: tabular-nums;\n    line-height: 1;\n    color: var(--%NS%prism-measure);\n    white-space: nowrap;\n    background: var(--%NS%prism-measure-plate, var(--%NS%prism-stage));\n    transform: translate(-50%, -50%);\n}\n\n.m-label.is-pinned[_ngcontent-%COMP%] {\n    opacity: 0.62;\n}\n\n\n\n.m-live[_ngcontent-%COMP%] {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n}\n\n[_nghost-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-measure);\n    outline-offset: -2px;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasMeasureComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-canvas-measure', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                    tabindex: '0',
+                    // `group`, not `application`. `application` is only justified for a
+                    // widget with complete custom keyboard handling, because it pulls
+                    // assistive technology out of browse mode and forwards every
+                    // keystroke to the widget. The keyboard handling here is explicitly
+                    // incomplete — see the class doc above: a measurement cannot be
+                    // started without a pointer — so `application` would trade a screen
+                    // reader user's browse mode for a key set that can do nothing.
+                    // `group` is labelled and announced on focus without suppressing
+                    // browse mode. `application` becomes the right answer the day Spec
+                    // §10's Tab-stepping through the specimen's snap targets exists,
+                    // and not before: revisit this line then, together with the
+                    // `aria-label` below.
+                    role: 'group',
+                    'aria-label': 'Measure tool. Arrow keys nudge the active point, Shift for a larger step, Enter commits, Escape clears.',
+                    '(keydown)': 'onKey($event)'
+                }, template: "<svg\n    class=\"m-svg\"\n    aria-hidden=\"true\">\n    <!-- Spec \u00A74.5. Drawn before the spans so the four measurement lines stay\n   the foreground mark and the two outlines read as the context they\n   describe. -->\n    @if (hover().anchor; as r) {\n        <rect\n            class=\"m-outline m-outline--anchor\"\n            [class.m-outline--preview]=\"hover().preview\"\n            [attr.x]=\"r.x\"\n            [attr.y]=\"r.y\"\n            [attr.width]=\"r.width\"\n            [attr.height]=\"r.height\" />\n    }\n    @if (hover().target; as r) {\n        <rect\n            class=\"m-outline m-outline--target\"\n            [attr.x]=\"r.x\"\n            [attr.y]=\"r.y\"\n            [attr.width]=\"r.width\"\n            [attr.height]=\"r.height\" />\n    }\n    @for (l of lines(); track $index) {\n        <g [class.is-pinned]=\"l.pinned\">\n            <line\n                [attr.x1]=\"l.a.x\"\n                [attr.y1]=\"l.a.y\"\n                [attr.x2]=\"l.b.x\"\n                [attr.y2]=\"l.b.y\" />\n            <line\n                [attr.x1]=\"l.tickA[0].x\"\n                [attr.y1]=\"l.tickA[0].y\"\n                [attr.x2]=\"l.tickA[1].x\"\n                [attr.y2]=\"l.tickA[1].y\" />\n            <line\n                [attr.x1]=\"l.tickB[0].x\"\n                [attr.y1]=\"l.tickB[0].y\"\n                [attr.x2]=\"l.tickB[1].x\"\n                [attr.y2]=\"l.tickB[1].y\" />\n            @for (e of l.echoes; track $index) {\n                <line\n                    class=\"m-echo\"\n                    [attr.x1]=\"e[0].x\"\n                    [attr.y1]=\"e[0].y\"\n                    [attr.x2]=\"e[1].x\"\n                    [attr.y2]=\"e[1].y\" />\n            }\n        </g>\n    }\n    @for (l of hover().lines; track $index) {\n        <g [class.is-pinned]=\"l.pinned\">\n            <line\n                [attr.x1]=\"l.a.x\"\n                [attr.y1]=\"l.a.y\"\n                [attr.x2]=\"l.b.x\"\n                [attr.y2]=\"l.b.y\" />\n            <line\n                [attr.x1]=\"l.tickA[0].x\"\n                [attr.y1]=\"l.tickA[0].y\"\n                [attr.x2]=\"l.tickA[1].x\"\n                [attr.y2]=\"l.tickA[1].y\" />\n            <line\n                [attr.x1]=\"l.tickB[0].x\"\n                [attr.y1]=\"l.tickB[0].y\"\n                [attr.x2]=\"l.tickB[1].x\"\n                [attr.y2]=\"l.tickB[1].y\" />\n            @for (e of l.echoes; track $index) {\n                <line\n                    class=\"m-echo\"\n                    [attr.x1]=\"e[0].x\"\n                    [attr.y1]=\"e[0].y\"\n                    [attr.x2]=\"e[1].x\"\n                    [attr.y2]=\"e[1].y\" />\n            }\n        </g>\n    }\n</svg>\n\n<div class=\"m-labels\">\n    @for (l of lines(); track $index) {\n        <span\n            class=\"m-label\"\n            [class.is-pinned]=\"l.pinned\"\n            [style.left.px]=\"l.label.x\"\n            [style.top.px]=\"l.label.y\">\n            {{ l.text }}\n        </span>\n    }\n    @for (l of hover().lines; track $index) {\n        <span\n            class=\"m-label\"\n            [class.is-pinned]=\"l.pinned\"\n            [style.left.px]=\"l.label.x\"\n            [style.top.px]=\"l.label.y\">\n            {{ l.text }}\n        </span>\n    }\n</div>\n\n<span\n    class=\"m-live\"\n    role=\"status\"\n    aria-live=\"polite\">\n    @if (hover().summary) {\n        {{ hover().summary }}\n    } @else if (lines().length > 0) {\n        {{ lines()[lines().length - 1].text }}\n    }\n</span>\n", styles: ["/* The host catches the pointer \u2014 it is the one layer allowed to. Everything\n   it draws is exempted from that, or the hit test would land on its own\n   lines instead of the specimen. Walking past the host itself is\n   elementUnderPoint's job; see its doc.\n\n   z-index 1, and both halves of that are load-bearing. It has to be set at\n   all because .demo-wrap is position: relative with a transform \u2014 a\n   stacking context of its own \u2014 and comes *after* this element in\n   prism-renderer.component.html: at z-index auto the two are painted in\n   tree order and .demo-wrap wins, hiding every line over the specimen and,\n   worse, swallowing the pointerdown that alt-click anchoring needs to land\n   on an element. And it has to be the *lowest* of the stage's overlays,\n   below the background pill at 2, the rulers, grips and dimension line at\n   4, and the toolrail at 5, because this is the only one of them that\n   takes pointer events across the whole stage. Raised past the pill it\n   would cover its Reset button \u2014 the failure .vp-grip already documents \u2014\n   and raised past the rail it would cover the very button that switches\n   the tool off again. */\n:host {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    cursor: crosshair;\n\n    /* A measuring drag across a text-bearing specimen would otherwise paint\n     a selection highlight over the thing being measured. `pointerdown`\n     calls preventDefault() for the selection that starts underneath; this\n     covers a selection that starts on the overlay itself. */\n    user-select: none;\n}\n\n.m-svg,\n.m-labels {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n}\n\n/* An `<svg>` is a replaced element, and for an absolutely positioned replaced\n   element CSS takes the used width and height from the intrinsic size \u2014 300x150\n   when the element declares none \u2014 instead of resolving them from `inset`. The\n   rule above therefore sized this box 300x150 in the stage's top-left corner,\n   while `.m-labels`, an ordinary div, stretched to the host as those same\n   declarations promised. Since an `<svg>` clips to its own viewport, every line,\n   tick, echo and outline beyond that corner was drawn and thrown away, and the\n   tool printed numbers with nothing to attach them to. The identical trap is why\n   `prism-canvas-rulers.component.ts` sizes its `<canvas>` elements by hand. */\n.m-svg {\n    width: 100%;\n    height: 100%;\n}\n\n.m-svg line {\n    stroke: var(--prism-measure);\n    stroke-width: 1;\n    stroke-linecap: round;\n}\n\n.m-svg .is-pinned line {\n    stroke-opacity: 0.55;\n}\n\n/* The snap echo is a footnote to the measurement, not a second measurement \u2014\n   hence dotted and noticeably weaker than the line itself. */\n.m-svg .m-echo {\n    stroke-opacity: 0.34;\n    stroke-dasharray: 2 3;\n}\n\n.m-svg .is-pinned .m-echo {\n    stroke-opacity: 0.2;\n}\n\n/* Spec \u00A74.5: anchor dashed, target solid. Both sit at reduced opacity for\n   the same reason the snap echo does \u2014 they say *which two boxes* the four\n   numbers are about, and must not compete with the numbers themselves. The\n   anchor outline is also the only feedback an Alt-click produces before a\n   second element is hovered. */\n.m-svg .m-outline {\n    fill: none;\n    stroke: var(--prism-measure);\n    stroke-opacity: 0.7;\n    stroke-width: 1;\n}\n\n.m-svg .m-outline--anchor {\n    stroke-dasharray: 4 3;\n}\n\n/* The same dashed shape the anchor takes, at half the weight, while it is\n   still only a prediction of what an Alt-click would take. Drawn at equal\n   weight the click would produce no visible change \u2014 the outline is already\n   there and merely stops following the pointer \u2014 which is the confirmation\n   the anchor outline exists to give. */\n.m-svg .m-outline--preview {\n    stroke-opacity: 0.35;\n}\n\n/* The number sits outside .demo-wrap and therefore does not scale with\n   --zoom. It also never rotates for a diagonal measurement: a tilted number\n   is slower to read, and readability is the whole point here.\n\n   The plate follows the *ground*, not --prism-stage, and that is the same\n   argument canvas-bg.styles.ts makes for --prism-measure itself. On\n   bg: 'light' and bg: 'dark' the ground is absolute while --prism-stage\n   stays with the theme, so a plate painted in --prism-stage puts the\n   re-pointed measurement colour on the other theme's surface: 2.10:1 for a\n   light ground under the dark theme, 2.13:1 the other way round. Both are\n   documented @Showcase({ bg }) values, so \"always visible\" would have been\n   true-in-the-common-case again \u2014 exactly the problem the token override\n   exists to prevent. --prism-measure-plate is re-pointed alongside\n   --prism-measure in that same file and falls back to --prism-stage\n   everywhere else, where the stage *is* the ground. */\n.m-label {\n    position: absolute;\n    padding: var(--sp-1) var(--sp-2);\n    font-family: var(--font-mono);\n    font-size: var(--fs-xs);\n    font-variant-numeric: tabular-nums;\n    line-height: 1;\n    color: var(--prism-measure);\n    white-space: nowrap;\n    background: var(--prism-measure-plate, var(--prism-stage));\n    transform: translate(-50%, -50%);\n}\n\n.m-label.is-pinned {\n    opacity: 0.62;\n}\n\n/* Visually hidden, not display:none \u2014 a status region only announces to a\n   screen reader while it stays in the accessibility tree. */\n.m-live {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n}\n\n:host(:focus-visible) {\n    outline: 2px solid var(--prism-measure);\n    outline-offset: -2px;\n}\n"] }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasMeasureComponent, { className: "PrismCanvasMeasureComponent", filePath: "app/canvas/prism-canvas-measure.component.ts", lineNumber: 163 }); })();

package/dist/app/canvas/prism-canvas-pin-row.component.d.ts

@@ -0,0 +1,23 @@
+import * as i0 from "@angular/core";
+/**
+ * The pinned measurements, as a row below the canvas.
+ *
+ * Not a panel in a corner of the stage: the top overlay band already carries
+ * the background pill on the left, the viewport dimension line in the
+ * middle and the toolrail on the right. A fourth floating surface there
+ * would be the first one to collide with another.
+ *
+ * A direct child of `.prism-canvas-wrap` and therefore without a capture
+ * guard of its own: `CAPTURE_CANVAS_ONLY_SELECTOR` structurally removes
+ * every child of the wrap that does not contain the stage. The rule is
+ * deliberately written structurally rather than as a list of selectors, so
+ * exactly this case works without anyone maintaining it.
+ */
+export declare class PrismCanvasPinRowComponent {
+    private readonly measure;
+    protected readonly chips: import("@angular/core").Signal<string[]>;
+    protected remove(index: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismCanvasPinRowComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismCanvasPinRowComponent, "prism-canvas-pin-row", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-canvas-pin-row.component.d.ts.map

package/dist/app/canvas/prism-canvas-pin-row.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-canvas-pin-row.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-pin-row.component.ts"],"names":[],"mappings":";AAKA;;;;;;;;;;;;;GAaG;AACH,qBAQa,0BAA0B;IACnC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+B;IAEvD,SAAS,CAAC,QAAQ,CAAC,KAAK,2CAAoG;IAE5H,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;yCAL5B,0BAA0B;2CAA1B,0BAA0B;CAQtC"}