@formicoidea/labre-framework-edgy 0.23.0 → 0.23.1

package/dist/consts.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Visual constants for the EDGY "Enterprise Design Facets" diagram.
+ *
+ * The whole diagram is authored in a FIXED reference coordinate space
+ * (`REF_W × REF_H`, matching the validated mockup) and the renderer scales it
+ * uniformly to the element bounds — so the three circles always stay circular
+ * and the pictos/labels keep their relative proportions at any size.
+ */
+/** Reference design size (the validated mockup canvas). */
+export declare const REF_W = 680;
+export declare const REF_H = 400;
+/** Circle geometry in reference coords. */
+export declare const VENN: {
+    readonly cx: number;
+    readonly cy: 176;
+    /** Circle radius. */
+    readonly R: 95;
+    /** Distance of each circle centre from the diagram centre. */
+    readonly r0: 56;
+};
+/** Saturated facet + intersection colours (faithful to the official icons). */
+export declare const COLORS: {
+    readonly identity: "#00ea4e";
+    readonly architecture: "#034cee";
+    readonly experience: "#ff0056";
+    readonly organisation: "#00caf4";
+    readonly brand: "#ffa500";
+    readonly product: "#cf00ff";
+    readonly center: "#ffffff";
+    readonly separator: "#ffffff";
+    readonly picto: "#ffffff";
+};
+/** Fixed picto line width + label font. */
+export declare const PICTO_STROKE = 2.4;
+export declare const LABEL_FONT_SIZE = 15;
+export declare const FONT_FAMILY = "Inter, sans-serif";
+/**
+ * Uniform fit of the reference design into an element of size `w × h`: the
+ * scale factor plus the centering offsets (letterboxed). Shared by the renderer
+ * (to draw) and the view (to map clicks back into reference coords).
+ */
+export declare function refScale(w: number, h: number): {
+    s: number;
+    ox: number;
+    oy: number;
+};
+//# sourceMappingURL=consts.d.ts.map

package/{src/consts.ts → dist/consts.js}

@@ -1,50 +1,46 @@
-/**
- * Visual constants for the EDGY "Enterprise Design Facets" diagram.
- *
- * The whole diagram is authored in a FIXED reference coordinate space
- * (`REF_W × REF_H`, matching the validated mockup) and the renderer scales it
- * uniformly to the element bounds — so the three circles always stay circular
- * and the pictos/labels keep their relative proportions at any size.
- */
-
-/** Reference design size (the validated mockup canvas). */
-export const REF_W = 680;
-export const REF_H = 400;
-
-/** Circle geometry in reference coords. */
-export const VENN = {
-  cx: REF_W / 2,
-  cy: 176,
-  /** Circle radius. */
-  R: 95,
-  /** Distance of each circle centre from the diagram centre. */
-  r0: 56,
-} as const;
-
-/** Saturated facet + intersection colours (faithful to the official icons). */
-export const COLORS = {
-  identity: '#00ea4e',
-  architecture: '#034cee',
-  experience: '#ff0056',
-  organisation: '#00caf4',
-  brand: '#ffa500',
-  product: '#cf00ff',
-  center: '#ffffff',
-  separator: '#ffffff',
-  picto: '#ffffff',
-} as const;
-
-/** Fixed picto line width + label font. */
-export const PICTO_STROKE = 2.4;
-export const LABEL_FONT_SIZE = 15;
-export const FONT_FAMILY = 'Inter, sans-serif';
-
-/**
- * Uniform fit of the reference design into an element of size `w × h`: the
- * scale factor plus the centering offsets (letterboxed). Shared by the renderer
- * (to draw) and the view (to map clicks back into reference coords).
- */
-export function refScale(w: number, h: number) {
-  const s = Math.min(w / REF_W, h / REF_H);
-  return { s, ox: (w - REF_W * s) / 2, oy: (h - REF_H * s) / 2 };
-}
+/**
+ * Visual constants for the EDGY "Enterprise Design Facets" diagram.
+ *
+ * The whole diagram is authored in a FIXED reference coordinate space
+ * (`REF_W × REF_H`, matching the validated mockup) and the renderer scales it
+ * uniformly to the element bounds — so the three circles always stay circular
+ * and the pictos/labels keep their relative proportions at any size.
+ */
+/** Reference design size (the validated mockup canvas). */
+export const REF_W = 680;
+export const REF_H = 400;
+/** Circle geometry in reference coords. */
+export const VENN = {
+    cx: REF_W / 2,
+    cy: 176,
+    /** Circle radius. */
+    R: 95,
+    /** Distance of each circle centre from the diagram centre. */
+    r0: 56,
+};
+/** Saturated facet + intersection colours (faithful to the official icons). */
+export const COLORS = {
+    identity: '#00ea4e',
+    architecture: '#034cee',
+    experience: '#ff0056',
+    organisation: '#00caf4',
+    brand: '#ffa500',
+    product: '#cf00ff',
+    center: '#ffffff',
+    separator: '#ffffff',
+    picto: '#ffffff',
+};
+/** Fixed picto line width + label font. */
+export const PICTO_STROKE = 2.4;
+export const LABEL_FONT_SIZE = 15;
+export const FONT_FAMILY = 'Inter, sans-serif';
+/**
+ * Uniform fit of the reference design into an element of size `w × h`: the
+ * scale factor plus the centering offsets (letterboxed). Shared by the renderer
+ * (to draw) and the view (to map clicks back into reference coords).
+ */
+export function refScale(w, h) {
+    const s = Math.min(w / REF_W, h / REF_H);
+    return { s, ox: (w - REF_W * s) / 2, oy: (h - REF_H * s) / 2 };
+}
+//# sourceMappingURL=consts.js.map

package/dist/descriptor.d.ts

@@ -0,0 +1,7 @@
+import { EdgyViewExtension } from './view.js';
+
+export declare const edgyFramework: {
+  readonly flag: 'edgy';
+  readonly telemetry: 'edgy';
+  readonly viewExtension: typeof EdgyViewExtension;
+};

package/{src/descriptor.ts → dist/descriptor.js}

@@ -5,4 +5,4 @@ export const edgyFramework = {
   flag: 'edgy',
   telemetry: 'edgy',
   viewExtension: EdgyViewExtension,
-} as const;
+};

package/dist/effects.d.ts

@@ -0,0 +1,10 @@
+import { EdgelessEdgyMenu } from './toolbar/edgy-menu';
+import { EdgelessEdgySeniorButton } from './toolbar/edgy-senior-button';
+export declare function effects(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'edgeless-edgy-menu': EdgelessEdgyMenu;
+        'edgeless-edgy-senior-button': EdgelessEdgySeniorButton;
+    }
+}
+//# sourceMappingURL=effects.d.ts.map

package/dist/effects.js

@@ -0,0 +1,7 @@
+import { EdgelessEdgyMenu } from './toolbar/edgy-menu';
+import { EdgelessEdgySeniorButton } from './toolbar/edgy-senior-button';
+export function effects() {
+    customElements.define('edgeless-edgy-menu', EdgelessEdgyMenu);
+    customElements.define('edgeless-edgy-senior-button', EdgelessEdgySeniorButton);
+}
+//# sourceMappingURL=effects.js.map

package/dist/element-renderer.d.ts

@@ -0,0 +1,17 @@
+import { type ElementRenderer } from '@formicoidea/labre-core/blocks/surface';
+import type { EdgyFacetsElementModel } from '@formicoidea/labre-core/model';
+/**
+ * Canvas renderer for the EDGY Enterprise Design Facets diagram — reproduces the
+ * validated mockup: three overlapping circles (Identity / Architecture /
+ * Experience), the three pairwise intersection regions (Organisation / Brand /
+ * Product) painted by clip-intersection, the white centre, the six white
+ * pictograms and the three facet labels placed outside the circles.
+ *
+ * The whole diagram is drawn in the fixed reference space and scaled uniformly
+ * to the element bounds so the circles never distort.
+ */
+export declare const edgy: ElementRenderer<EdgyFacetsElementModel>;
+export declare const EdgyFacetsRendererExtension: import("@formicoidea/labre-core/store").ExtensionType & {
+    identifier: import("@formicoidea/labre-core/global/di").ServiceIdentifier<ElementRenderer<EdgyFacetsElementModel>>;
+};
+//# sourceMappingURL=element-renderer.d.ts.map

package/dist/element-renderer.js

@@ -0,0 +1,177 @@
+import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { COLORS, FONT_FAMILY, LABEL_FONT_SIZE, PICTO_STROKE, REF_H, REF_W, refScale, VENN, } from './consts';
+import { CIRCLE_A, CIRCLE_B, CIRCLE_C, facetLabelAnchors } from './label-layout';
+/**
+ * Canvas renderer for the EDGY Enterprise Design Facets diagram — reproduces the
+ * validated mockup: three overlapping circles (Identity / Architecture /
+ * Experience), the three pairwise intersection regions (Organisation / Brand /
+ * Product) painted by clip-intersection, the white centre, the six white
+ * pictograms and the three facet labels placed outside the circles.
+ *
+ * The whole diagram is drawn in the fixed reference space and scaled uniformly
+ * to the element bounds so the circles never distort.
+ */
+export const edgy = (model, ctx, matrix) => {
+    const [, , w, h] = model.deserializedXYWH;
+    const cx = w / 2;
+    const cy = h / 2;
+    ctx.setTransform(matrix.translateSelf(cx, cy).rotateSelf(model.rotate).translateSelf(-cx, -cy));
+    // Uniform fit of the reference design, centered (letterboxed).
+    const { s, ox, oy } = refScale(w, h);
+    ctx.translate(ox, oy);
+    ctx.scale(s, s);
+    const A = CIRCLE_A;
+    const B = CIRCLE_B;
+    const C = CIRCLE_C;
+    const R = VENN.R;
+    const disc = (c, color) => {
+        ctx.beginPath();
+        ctx.arc(c.x, c.y, R, 0, Math.PI * 2);
+        ctx.fillStyle = color;
+        ctx.fill();
+    };
+    // Paint the region common to every circle in `cs` (clip-intersection).
+    const inter = (cs, color) => {
+        ctx.save();
+        for (const c of cs) {
+            ctx.beginPath();
+            ctx.arc(c.x, c.y, R, 0, Math.PI * 2);
+            ctx.clip();
+        }
+        ctx.fillStyle = color;
+        ctx.fillRect(0, 0, REF_W, REF_H);
+        ctx.restore();
+    };
+    // ── Facets + intersections ──────────────────────────────────────────
+    disc(A, COLORS.identity);
+    disc(B, COLORS.architecture);
+    disc(C, COLORS.experience);
+    inter([A, B], COLORS.organisation);
+    inter([A, C], COLORS.brand);
+    inter([B, C], COLORS.product);
+    inter([A, B, C], COLORS.center);
+    // White separating outlines.
+    ctx.strokeStyle = COLORS.separator;
+    ctx.lineWidth = 2.5;
+    for (const c of [A, B, C]) {
+        ctx.beginPath();
+        ctx.arc(c.x, c.y, R, 0, Math.PI * 2);
+        ctx.stroke();
+    }
+    // ── White pictos ────────────────────────────────────────────────────
+    const pictoSetup = () => {
+        ctx.strokeStyle = COLORS.picto;
+        ctx.fillStyle = COLORS.picto;
+        ctx.lineWidth = PICTO_STROKE;
+        ctx.lineJoin = 'round';
+        ctx.lineCap = 'round';
+    };
+    const lens = (x, y) => {
+        pictoSetup();
+        ctx.beginPath();
+        ctx.arc(x, y, 10, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(x + 7, y + 7);
+        ctx.lineTo(x + 15, y + 15);
+        ctx.stroke();
+    };
+    const house = (x, y) => {
+        pictoSetup();
+        ctx.beginPath();
+        ctx.moveTo(x - 11, y + 9);
+        ctx.lineTo(x - 11, y - 2);
+        ctx.lineTo(x, y - 11);
+        ctx.lineTo(x + 11, y - 2);
+        ctx.lineTo(x + 11, y + 9);
+        ctx.closePath();
+        ctx.stroke();
+    };
+    const heart = (x, y) => {
+        pictoSetup();
+        ctx.beginPath();
+        ctx.moveTo(x, y + 11);
+        ctx.bezierCurveTo(x - 14, y - 1, x - 9, y - 12, x, y - 4);
+        ctx.bezierCurveTo(x + 9, y - 12, x + 14, y - 1, x, y + 11);
+        ctx.closePath();
+        ctx.stroke();
+    };
+    const network = (x, y) => {
+        pictoSetup();
+        ctx.beginPath();
+        ctx.moveTo(x, y - 9);
+        ctx.lineTo(x - 9, y + 7);
+        ctx.lineTo(x + 9, y + 7);
+        ctx.closePath();
+        ctx.stroke();
+        for (const [px, py] of [
+            [x, y - 9],
+            [x - 9, y + 7],
+            [x + 9, y + 7],
+        ]) {
+            ctx.beginPath();
+            ctx.arc(px, py, 2.6, 0, Math.PI * 2);
+            ctx.fill();
+        }
+    };
+    const sun = (x, y) => {
+        pictoSetup();
+        ctx.beginPath();
+        ctx.arc(x, y, 6, 0, Math.PI * 2);
+        ctx.stroke();
+        for (let i = 0; i < 8; i++) {
+            const a = (i * Math.PI) / 4;
+            ctx.beginPath();
+            ctx.moveTo(x + Math.cos(a) * 9, y + Math.sin(a) * 9);
+            ctx.lineTo(x + Math.cos(a) * 12, y + Math.sin(a) * 12);
+            ctx.stroke();
+        }
+    };
+    const cube = (x, y) => {
+        pictoSetup();
+        const p = [
+            [x, y - 11],
+            [x + 10, y - 5],
+            [x + 10, y + 6],
+            [x, y + 12],
+            [x - 10, y + 6],
+            [x - 10, y - 5],
+        ];
+        ctx.beginPath();
+        p.forEach(([qx, qy], i) => (i ? ctx.lineTo(qx, qy) : ctx.moveTo(qx, qy)));
+        ctx.closePath();
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(x - 10, y - 5);
+        ctx.lineTo(x, y + 1);
+        ctx.lineTo(x + 10, y - 5);
+        ctx.moveTo(x, y + 1);
+        ctx.lineTo(x, y + 12);
+        ctx.stroke();
+    };
+    // Single-facet zone pictos.
+    lens(A.x - 30, A.y - 22);
+    house(B.x + 30, B.y - 22);
+    heart(C.x, C.y + 36);
+    // Intersection pictos at the validated sweet spots.
+    network(VENN.cx, 114);
+    sun(VENN.cx - 58, 206);
+    cube(VENN.cx + 58, 206);
+    // ── Labels (outside the circles) ────────────────────────────────────
+    if (model.showLabels) {
+        ctx.font = `500 ${LABEL_FONT_SIZE}px ${FONT_FAMILY}`;
+        ctx.textBaseline = 'middle';
+        const colorByField = {
+            identityLabel: COLORS.identity,
+            architectureLabel: COLORS.architecture,
+            experienceLabel: COLORS.experience,
+        };
+        for (const { field, text, x, y, align } of facetLabelAnchors(model)) {
+            ctx.fillStyle = colorByField[field];
+            ctx.textAlign = align;
+            ctx.fillText(text, x, y);
+        }
+    }
+};
+export const EdgyFacetsRendererExtension = ElementRendererExtension('edgy', edgy);
+//# sourceMappingURL=element-renderer.js.map

package/dist/element-view.d.ts

@@ -0,0 +1,19 @@
+import type { EdgyFacetsElementModel } from '@formicoidea/labre-core/model';
+import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
+export declare class EdgyView extends GfxElementModelView<EdgyFacetsElementModel> {
+    static type: string;
+    /** The in-place `<input>` used to edit a label, or null when idle. */
+    private _labelEditor;
+    onCreated(): void;
+    onDestroyed(): void;
+    /** Double-click on a label → edit its text in place. */
+    private _onDblClick;
+    private _openLabelEditor;
+    private _closeLabelEditor;
+}
+/**
+ * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
+ * true (toggled from the toolbar). Moving/selecting stays available throughout.
+ */
+export declare const EdgyInteraction: import("@formicoidea/labre-core/store").ExtensionType;
+//# sourceMappingURL=element-view.d.ts.map

package/dist/element-view.js

@@ -0,0 +1,123 @@
+import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import { rotatePoint } from '@formicoidea/labre-core/global/gfx';
+import { GfxElementModelView, GfxViewInteractionExtension, } from '@formicoidea/labre-core/std/gfx';
+import { refScale } from './consts';
+import { getEdgyLabelHits, hitTestEdgyLabel, } from './label-layout';
+export class EdgyView extends GfxElementModelView {
+    constructor() {
+        super(...arguments);
+        /** The in-place `<input>` used to edit a label, or null when idle. */
+        this._labelEditor = null;
+    }
+    static { this.type = 'edgy'; }
+    onCreated() {
+        super.onCreated();
+        this.on('dblclick', e => this._onDblClick(e));
+    }
+    onDestroyed() {
+        this._closeLabelEditor();
+        super.onDestroyed();
+    }
+    /** Double-click on a label → edit its text in place. */
+    _onDblClick(e) {
+        if (this.model.isLocked())
+            return;
+        const [mx, my] = this.gfx.viewport.toModelCoord(e.x, e.y);
+        const [bx, by, w, h] = this.model.deserializedXYWH;
+        // Convert the model-space point into element-local coordinates, undoing the
+        // element rotation around its center.
+        let lx = mx - bx;
+        let ly = my - by;
+        const rot = this.model.rotate ?? 0;
+        if (rot) {
+            const center = [bx + w / 2, by + h / 2];
+            const [ux, uy] = rotatePoint([mx, my], center, -rot);
+            lx = ux - bx;
+            ly = uy - by;
+        }
+        // Map element-local coords into the fixed reference space the labels live in.
+        const { s, ox, oy } = refScale(w, h);
+        const rx = (lx - ox) / s;
+        const ry = (ly - oy) / s;
+        const hit = hitTestEdgyLabel(getEdgyLabelHits(this.model), rx, ry);
+        if (!hit)
+            return;
+        this._openLabelEditor(hit.field, e);
+    }
+    _openLabelEditor(field, e) {
+        this._closeLabelEditor();
+        const input = document.createElement('input');
+        input.value = String(this.model[field] ?? '');
+        Object.assign(input.style, {
+            position: 'fixed',
+            left: `${e.raw.clientX}px`,
+            top: `${e.raw.clientY}px`,
+            transform: 'translate(-50%, -50%)',
+            zIndex: '10000',
+            minWidth: '140px',
+            padding: '3px 8px',
+            font: '14px Inter, sans-serif',
+            color: 'var(--affine-text-primary-color, #1f2328)',
+            background: 'var(--affine-background-overlay-panel-color, #ffffff)',
+            border: '1px solid var(--affine-primary-color, #1e96eb)',
+            borderRadius: '6px',
+            boxShadow: 'var(--affine-shadow-2, 0 2px 8px rgba(0,0,0,0.18))',
+            outline: 'none',
+        });
+        document.body.append(input);
+        this._labelEditor = input;
+        // Mark the element as "editing" so the global edgeless key handlers
+        // (delete, escape, etc.) don't act on it while the user types.
+        this.gfx.selection.set({ elements: [this.model.id], editing: true });
+        input.focus();
+        input.select();
+        const commit = () => {
+            if (this._labelEditor !== input)
+                return;
+            const value = input.value;
+            this._closeLabelEditor();
+            this.gfx.std.store.captureSync();
+            this.gfx.std
+                .get(EdgelessCRUDIdentifier)
+                .updateElement(this.model.id, { [field]: value });
+        };
+        input.addEventListener('keydown', ev => {
+            ev.stopPropagation();
+            if (ev.key === 'Enter') {
+                ev.preventDefault();
+                commit();
+            }
+            else if (ev.key === 'Escape') {
+                ev.preventDefault();
+                this._closeLabelEditor();
+            }
+        });
+        input.addEventListener('blur', commit);
+    }
+    _closeLabelEditor() {
+        if (!this._labelEditor)
+            return;
+        const input = this._labelEditor;
+        this._labelEditor = null;
+        input.remove();
+        if (this.isConnected) {
+            this.gfx.selection.set({ elements: [this.model.id], editing: false });
+        }
+    }
+}
+/**
+ * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
+ * true (toggled from the toolbar). Moving/selecting stays available throughout.
+ */
+export const EdgyInteraction = GfxViewInteractionExtension(EdgyView.type, {
+    handleResize({ model }) {
+        return {
+            beforeResize({ set }) {
+                if (!model.resizeEnabled) {
+                    set({ allowedHandlers: [] });
+                }
+            },
+        };
+    },
+});
+//# sourceMappingURL=element-view.js.map

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.js.map

package/dist/label-layout.d.ts

@@ -0,0 +1,46 @@
+import type { EdgyFacetsElementModel } from '@formicoidea/labre-core/model';
+/** The three circle centres in reference coords. */
+export declare const CIRCLE_A: {
+    x: number;
+    y: number;
+};
+export declare const CIRCLE_B: {
+    x: number;
+    y: number;
+};
+export declare const CIRCLE_C: {
+    x: number;
+    y: number;
+};
+/** The editable label fields of the facets diagram. */
+export type EdgyLabelField = 'identityLabel' | 'architectureLabel' | 'experienceLabel';
+export interface EdgyLabelAnchor {
+    field: EdgyLabelField;
+    text: string;
+    x: number;
+    y: number;
+    align: 'start' | 'end' | 'center';
+}
+/**
+ * The three facet name anchors in reference coords, positioned fully outside
+ * their circle (validated mockup). Shared by the renderer (to draw them) and
+ * the label-layout hit testing (to edit them).
+ */
+export declare function facetLabelAnchors(model: EdgyFacetsElementModel): EdgyLabelAnchor[];
+/** A label's hit box in reference coords (axis-aligned, padded). */
+export interface EdgyLabelHit {
+    field: EdgyLabelField;
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+/**
+ * Clickable boxes of every facet label, in reference coords. Derived from the
+ * SAME anchors the renderer uses so they track the drawn text. Boxes are padded
+ * so double-clicking is forgiving. Hidden when `showLabels` is false.
+ */
+export declare function getEdgyLabelHits(model: EdgyFacetsElementModel): EdgyLabelHit[];
+/** First label whose (padded) box contains the reference-space point, or null. */
+export declare function hitTestEdgyLabel(hits: EdgyLabelHit[], rx: number, ry: number): EdgyLabelHit | null;
+//# sourceMappingURL=label-layout.d.ts.map

package/dist/label-layout.js

@@ -0,0 +1,69 @@
+import { LABEL_FONT_SIZE, VENN } from './consts';
+/** The three circle centres in reference coords. */
+export const CIRCLE_A = { x: VENN.cx - 0.866 * VENN.r0, y: VENN.cy - 0.5 * VENN.r0 }; // Identity
+export const CIRCLE_B = { x: VENN.cx + 0.866 * VENN.r0, y: VENN.cy - 0.5 * VENN.r0 }; // Architecture
+export const CIRCLE_C = { x: VENN.cx, y: VENN.cy + VENN.r0 }; // Experience
+/**
+ * The three facet name anchors in reference coords, positioned fully outside
+ * their circle (validated mockup). Shared by the renderer (to draw them) and
+ * the label-layout hit testing (to edit them).
+ */
+export function facetLabelAnchors(model) {
+    return [
+        {
+            field: 'identityLabel',
+            text: model.identityLabel,
+            x: CIRCLE_A.x - VENN.R - 10,
+            y: CIRCLE_A.y - 28,
+            align: 'end',
+        },
+        {
+            field: 'architectureLabel',
+            text: model.architectureLabel,
+            x: CIRCLE_B.x + VENN.R + 10,
+            y: CIRCLE_B.y - 28,
+            align: 'start',
+        },
+        {
+            field: 'experienceLabel',
+            text: model.experienceLabel,
+            x: CIRCLE_C.x,
+            y: CIRCLE_C.y + VENN.R + 22,
+            align: 'center',
+        },
+    ];
+}
+const approxTextWidth = (text, fontSize) => Math.max(fontSize, text.length * fontSize * 0.6);
+/**
+ * Clickable boxes of every facet label, in reference coords. Derived from the
+ * SAME anchors the renderer uses so they track the drawn text. Boxes are padded
+ * so double-clicking is forgiving. Hidden when `showLabels` is false.
+ */
+export function getEdgyLabelHits(model) {
+    if (!model.showLabels)
+        return [];
+    const pad = 6;
+    const fs = LABEL_FONT_SIZE;
+    return facetLabelAnchors(model).map(({ field, text, x, y, align }) => {
+        const tw = approxTextWidth(text, fs);
+        const minX = align === 'end' ? x - tw : align === 'center' ? x - tw / 2 : x;
+        const maxX = align === 'end' ? x : align === 'center' ? x + tw / 2 : x + tw;
+        return {
+            field,
+            minX: minX - pad,
+            maxX: maxX + pad,
+            minY: y - fs / 2 - pad,
+            maxY: y + fs / 2 + pad,
+        };
+    });
+}
+/** First label whose (padded) box contains the reference-space point, or null. */
+export function hitTestEdgyLabel(hits, rx, ry) {
+    for (const hit of hits) {
+        if (rx >= hit.minX && rx <= hit.maxX && ry >= hit.minY && ry <= hit.maxY) {
+            return hit;
+        }
+    }
+    return null;
+}
+//# sourceMappingURL=label-layout.js.map