@grafloria/element 0.3.17 → 0.3.19

package/src/libs/renderer/src/ext/components/background.js

@@ -0,0 +1,202 @@
+"use strict";
+/**
+ * ============================================================================
+ * Card 6 — <Background>: the rendered grid. GAP CLOSED.
+ * ============================================================================
+ *
+ * The audit's finding was blunt: "no background grid". The engine had a
+ * `gridEnabled` flag on `DiagramStore` with ZERO consumers — declared, defaulted
+ * to `true`, and read by nobody. There were `gridSize` values all over the
+ * renderer, but every one of them belonged to the A-star / Manhattan ROUTING
+ * grid, not to anything drawn on screen. Nothing ever painted a pixel of grid.
+ *
+ * This is that grid, and it is wired to `DiagramStore.gridEnabled`, so the flag
+ * now means something (see `attachBackground`, which subscribes to the store).
+ *
+ * ---------------------------------------------------------------------------
+ * How it tracks the camera
+ * ---------------------------------------------------------------------------
+ * The background lives in its own layer BELOW the SVG layer, and is a single
+ * `<rect>` filled with an SVG `<pattern>`. It is NOT re-tessellated per frame:
+ * a pattern tile of `gap * zoom` CSS px, offset by the camera's fractional
+ * remainder, gives an infinite grid for the cost of two attribute writes.
+ *
+ *     tile   = gap * zoom
+ *     offset = -(world.x * zoom) mod tile     (likewise y)
+ *
+ * The modulo is what makes it infinite: only the SUB-TILE remainder matters, so
+ * the numbers stay small no matter how far you pan. Panning to x = 10^7 does not
+ * produce a 10^7-px pattern offset and lose float precision.
+ *
+ * ---------------------------------------------------------------------------
+ * Why not draw it into the main VNode tree?
+ * ---------------------------------------------------------------------------
+ * Because the patcher reconciles that tree every frame against the diagram
+ * model, and the grid is not part of the model. Keeping it in a sibling layer
+ * means (a) zero interaction with the reconciler's keyed diff, (b) it costs
+ * nothing when the model changes, and (c) it cannot be picked or hit-tested —
+ * it is `pointer-events: none`, so it can never eat a click.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BACKGROUND_LAYER_CLASS = void 0;
+exports.createBackground = createBackground;
+const disposable_1 = require("../disposable");
+exports.BACKGROUND_LAYER_CLASS = 'grafloria-background-layer';
+const SVG_NS = 'http://www.w3.org/2000/svg';
+let backgroundSeq = 0;
+/**
+ * Create the background grid inside `root`, tracking `viewport`.
+ *
+ * Returns a handle whose `dispose()` unsubscribes from the camera — the
+ * subscription is the leak that Wave 6's "every register() returns a disposer"
+ * rule exists to prevent.
+ */
+function createBackground(root, viewport, options = {}) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const doc = root.ownerDocument;
+    let opts = {
+        variant: (_a = options.variant) !== null && _a !== void 0 ? _a : 'dots',
+        gap: (_b = options.gap) !== null && _b !== void 0 ? _b : 20,
+        size: (_c = options.size) !== null && _c !== void 0 ? _c : 1,
+        color: (_d = options.color) !== null && _d !== void 0 ? _d : 'rgba(120,130,145,0.45)',
+        majorEvery: (_e = options.majorEvery) !== null && _e !== void 0 ? _e : 0,
+        minZoom: (_f = options.minZoom) !== null && _f !== void 0 ? _f : 0.25,
+        majorColor: options.majorColor,
+        backgroundColor: options.backgroundColor,
+        idSuffix: options.idSuffix,
+    };
+    const uid = (_g = opts.idSuffix) !== null && _g !== void 0 ? _g : `bg${++backgroundSeq}`;
+    const patternId = `grafloria-grid-${uid}`;
+    const majorId = `grafloria-grid-major-${uid}`;
+    // -- layer (below the SVG layer) --------------------------------------------
+    let layer = root.querySelector(`:scope > .${exports.BACKGROUND_LAYER_CLASS}`);
+    if (!layer) {
+        layer = doc.createElement('div');
+        layer.className = exports.BACKGROUND_LAYER_CLASS;
+        layer.setAttribute('style', 'position:absolute;inset:0;pointer-events:none;overflow:hidden');
+        // FIRST child ⇒ painted under the diagram.
+        root.insertBefore(layer, root.firstChild);
+    }
+    const svg = doc.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('width', '100%');
+    svg.setAttribute('height', '100%');
+    svg.setAttribute('class', 'grafloria-background');
+    svg.style.display = 'block';
+    const defs = doc.createElementNS(SVG_NS, 'defs');
+    const pattern = doc.createElementNS(SVG_NS, 'pattern');
+    pattern.setAttribute('id', patternId);
+    pattern.setAttribute('patternUnits', 'userSpaceOnUse');
+    const majorPattern = doc.createElementNS(SVG_NS, 'pattern');
+    majorPattern.setAttribute('id', majorId);
+    majorPattern.setAttribute('patternUnits', 'userSpaceOnUse');
+    defs.appendChild(pattern);
+    defs.appendChild(majorPattern);
+    svg.appendChild(defs);
+    const bgRect = doc.createElementNS(SVG_NS, 'rect');
+    bgRect.setAttribute('width', '100%');
+    bgRect.setAttribute('height', '100%');
+    svg.appendChild(bgRect);
+    const gridRect = doc.createElementNS(SVG_NS, 'rect');
+    gridRect.setAttribute('width', '100%');
+    gridRect.setAttribute('height', '100%');
+    gridRect.setAttribute('fill', `url(#${patternId})`);
+    svg.appendChild(gridRect);
+    const majorRect = doc.createElementNS(SVG_NS, 'rect');
+    majorRect.setAttribute('width', '100%');
+    majorRect.setAttribute('height', '100%');
+    majorRect.setAttribute('fill', `url(#${majorId})`);
+    svg.appendChild(majorRect);
+    layer.appendChild(svg);
+    let visible = true;
+    /** Fill one pattern element with the geometry for a given tile size. */
+    const paintPattern = (target, tile, offsetX, offsetY, color, thickness, variant) => {
+        target.setAttribute('width', String(tile));
+        target.setAttribute('height', String(tile));
+        target.setAttribute('patternTransform', `translate(${offsetX},${offsetY})`);
+        while (target.firstChild)
+            target.removeChild(target.firstChild);
+        if (variant === 'none' || tile <= 0)
+            return;
+        if (variant === 'dots') {
+            const dot = doc.createElementNS(SVG_NS, 'circle');
+            dot.setAttribute('cx', String(thickness));
+            dot.setAttribute('cy', String(thickness));
+            dot.setAttribute('r', String(thickness));
+            dot.setAttribute('fill', color);
+            target.appendChild(dot);
+            return;
+        }
+        if (variant === 'cross') {
+            // Small plus signs at each intersection.
+            const arm = Math.max(2, tile * 0.12);
+            const path = doc.createElementNS(SVG_NS, 'path');
+            path.setAttribute('d', `M ${-arm} 0 H ${arm} M 0 ${-arm} V ${arm}`);
+            path.setAttribute('stroke', color);
+            path.setAttribute('stroke-width', String(thickness));
+            path.setAttribute('fill', 'none');
+            target.appendChild(path);
+            return;
+        }
+        // 'lines' — one horizontal + one vertical edge per tile.
+        const path = doc.createElementNS(SVG_NS, 'path');
+        path.setAttribute('d', `M ${tile} 0 V ${tile} M 0 ${tile} H ${tile}`);
+        path.setAttribute('stroke', color);
+        path.setAttribute('stroke-width', String(thickness));
+        path.setAttribute('fill', 'none');
+        target.appendChild(path);
+    };
+    const render = () => {
+        var _a, _b;
+        const zoom = viewport.getZoom() || 1;
+        const world = viewport.getViewport();
+        // Below minZoom the grid is noise, not information.
+        const suppressed = opts.variant === 'none' || (opts.minZoom > 0 && zoom < opts.minZoom);
+        svg.style.display = visible && !suppressed ? 'block' : 'none';
+        if (!visible || suppressed)
+            return;
+        bgRect.setAttribute('fill', (_a = opts.backgroundColor) !== null && _a !== void 0 ? _a : 'none');
+        const tile = opts.gap * zoom;
+        if (!(tile > 0.5) || !Number.isFinite(tile)) {
+            // Degenerate camera (zoom→0, gap 0). Draw nothing rather than emit an
+            // invalid pattern the browser will complain about.
+            svg.style.display = 'none';
+            return;
+        }
+        // Only the SUB-TILE remainder matters — see the header note on precision.
+        const modulo = (v, m) => ((v % m) + m) % m;
+        const offsetX = modulo(-world.x * zoom, tile);
+        const offsetY = modulo(-world.y * zoom, tile);
+        paintPattern(pattern, tile, offsetX, offsetY, opts.color, opts.size, opts.variant);
+        if (opts.majorEvery > 0 && opts.variant !== 'dots') {
+            const majorTile = tile * opts.majorEvery;
+            paintPattern(majorPattern, majorTile, modulo(-world.x * zoom, majorTile), modulo(-world.y * zoom, majorTile), (_b = opts.majorColor) !== null && _b !== void 0 ? _b : opts.color, opts.size * 1.5, 'lines');
+            majorRect.style.display = 'block';
+        }
+        else {
+            majorRect.style.display = 'none';
+        }
+    };
+    render();
+    const unsubscribe = viewport.onChange(render);
+    return {
+        element: svg,
+        update(next) {
+            opts = Object.assign(Object.assign({}, opts), next);
+            render();
+        },
+        setVisible(next) {
+            if (visible === next)
+                return;
+            visible = next;
+            render();
+        },
+        isVisible: () => visible,
+        dispose: (0, disposable_1.once)(() => {
+            unsubscribe();
+            svg.remove();
+            if (layer && layer.childElementCount === 0)
+                layer.remove();
+        }),
+    };
+}
+//# sourceMappingURL=background.js.map

package/src/libs/renderer/src/ext/components/background.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"background.js","sourceRoot":"","sources":["../../../../../../../renderer/src/ext/components/background.ts"],"names":[],"mappings":"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"}

package/src/libs/renderer/src/ext/components/controls.d.ts

@@ -0,0 +1,49 @@
+/**
+ * ============================================================================
+ * Card 6 — <Controls>: the zoom / fit / lock toolbar
+ * ============================================================================
+ *
+ * A screen-space portal with the four buttons every canvas product ships. It is
+ * deliberately thin: each button is one call into `ViewportController` (or the
+ * `onFitView` / `onToggleLock` callbacks the host supplies), so there is no
+ * duplicate camera maths here to drift from the canvas's own.
+ *
+ * Framework-free (plain DOM, zero Angular), keyboard-reachable (real `<button>`
+ * elements, so Tab/Enter/Space work with no ARIA gymnastics), and every listener
+ * it adds is removed by `dispose()`.
+ *
+ * NOTE ON A11Y: this only uses the semantics that come free with a native
+ * `<button>` (focusability, Enter/Space activation, `aria-label`, `aria-pressed`
+ * for the lock toggle). The ARIA/live-region emission for the CANVAS itself is
+ * `wave6/a11y`'s territory and is not touched here.
+ */
+import type { ViewportController } from '../../viewport/viewport-controller';
+import type { Portal, PortalPlacement } from '../portal';
+export interface ControlsOptions {
+    placement?: PortalPlacement;
+    offset?: number;
+    /** Which buttons to show. Default: all except lock. */
+    showZoom?: boolean;
+    showFitView?: boolean;
+    showLock?: boolean;
+    /** Lay the buttons out horizontally instead of vertically. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Zoom step per click (multiplicative). Default 1.2. */
+    zoomStep?: number;
+    /** Called when "fit view" is pressed. Wire this to `instance.fitView()`. */
+    onFitView?: () => void;
+    /** Called when the lock is toggled. Return/ignore as you like. */
+    onToggleLock?: (locked: boolean) => void;
+    /** Initial lock state. */
+    locked?: boolean;
+}
+export interface ControlsHandle {
+    readonly portal: Portal;
+    readonly element: HTMLElement;
+    setVisible(visible: boolean): void;
+    isVisible(): boolean;
+    /** Reflect a lock state changed elsewhere (keeps `aria-pressed` honest). */
+    setLocked(locked: boolean): void;
+    dispose(): void;
+}
+export declare function createControls(root: HTMLElement, viewport: ViewportController, options?: ControlsOptions): ControlsHandle;

package/src/libs/renderer/src/ext/components/controls.js

@@ -0,0 +1,144 @@
+"use strict";
+/**
+ * ============================================================================
+ * Card 6 — <Controls>: the zoom / fit / lock toolbar
+ * ============================================================================
+ *
+ * A screen-space portal with the four buttons every canvas product ships. It is
+ * deliberately thin: each button is one call into `ViewportController` (or the
+ * `onFitView` / `onToggleLock` callbacks the host supplies), so there is no
+ * duplicate camera maths here to drift from the canvas's own.
+ *
+ * Framework-free (plain DOM, zero Angular), keyboard-reachable (real `<button>`
+ * elements, so Tab/Enter/Space work with no ARIA gymnastics), and every listener
+ * it adds is removed by `dispose()`.
+ *
+ * NOTE ON A11Y: this only uses the semantics that come free with a native
+ * `<button>` (focusability, Enter/Space activation, `aria-label`, `aria-pressed`
+ * for the lock toggle). The ARIA/live-region emission for the CANVAS itself is
+ * `wave6/a11y`'s territory and is not touched here.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createControls = createControls;
+const disposable_1 = require("../disposable");
+const portal_1 = require("../portal");
+/** Minimal inline SVG icons — no icon-font dependency, no external fetch. */
+const ICONS = {
+    zoomIn: '<path d="M7 3v8M3 7h8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>',
+    zoomOut: '<path d="M3 7h8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>',
+    fit: '<path d="M2 5V2h3M12 5V2H9M2 9v3h3M12 9v3H9" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/>',
+    lock: '<path d="M4 6V4.5a3 3 0 0 1 6 0V6M3 6h8v6H3z" stroke="currentColor" stroke-width="1.3" fill="none"/>',
+    unlock: '<path d="M4 6V4.5a3 3 0 0 1 5.7-1.3M3 6h8v6H3z" stroke="currentColor" stroke-width="1.3" fill="none"/>',
+};
+function createControls(root, viewport, options = {}) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const doc = root.ownerDocument;
+    const opts = {
+        placement: (_a = options.placement) !== null && _a !== void 0 ? _a : 'bottom-left',
+        offset: (_b = options.offset) !== null && _b !== void 0 ? _b : 12,
+        showZoom: (_c = options.showZoom) !== null && _c !== void 0 ? _c : true,
+        showFitView: (_d = options.showFitView) !== null && _d !== void 0 ? _d : true,
+        showLock: (_e = options.showLock) !== null && _e !== void 0 ? _e : false,
+        orientation: (_f = options.orientation) !== null && _f !== void 0 ? _f : 'vertical',
+        zoomStep: (_g = options.zoomStep) !== null && _g !== void 0 ? _g : 1.2,
+        onFitView: options.onFitView,
+        onToggleLock: options.onToggleLock,
+    };
+    let locked = (_h = options.locked) !== null && _h !== void 0 ? _h : false;
+    let visible = true;
+    const portal = (0, portal_1.createPortal)(root, {
+        placement: opts.placement,
+        offset: opts.offset,
+        className: 'grafloria-controls',
+    });
+    const bar = doc.createElement('div');
+    bar.setAttribute('role', 'toolbar');
+    bar.setAttribute('aria-label', 'Diagram controls');
+    bar.setAttribute('style', 'display:flex;gap:1px;background:rgba(0,0,0,0.12);border-radius:4px;overflow:hidden;' +
+        `flex-direction:${opts.orientation === 'horizontal' ? 'row' : 'column'};`);
+    portal.element.appendChild(bar);
+    const cleanups = [];
+    const makeButton = (icon, label, onClick) => {
+        const button = doc.createElement('button');
+        button.type = 'button';
+        button.setAttribute('aria-label', label);
+        button.title = label;
+        button.setAttribute('style', 'width:26px;height:26px;display:flex;align-items:center;justify-content:center;' +
+            'border:0;padding:0;cursor:pointer;background:#fff;color:#333;');
+        button.innerHTML = `<svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true" focusable="false">${icon}</svg>`;
+        const handler = (event) => {
+            // The canvas below listens for mousedown/click on the container; without
+            // this a control press would ALSO deselect / start a marquee behind it.
+            event.preventDefault();
+            event.stopPropagation();
+            onClick();
+        };
+        button.addEventListener('click', handler);
+        // Stop the press reaching the canvas's pointer ladder as well.
+        const swallow = (event) => event.stopPropagation();
+        button.addEventListener('pointerdown', swallow);
+        button.addEventListener('mousedown', swallow);
+        cleanups.push(() => {
+            button.removeEventListener('click', handler);
+            button.removeEventListener('pointerdown', swallow);
+            button.removeEventListener('mousedown', swallow);
+        });
+        bar.appendChild(button);
+        return button;
+    };
+    if (opts.showZoom) {
+        makeButton(ICONS.zoomIn, 'Zoom in', () => {
+            viewport.setZoom(viewport.getZoom() * opts.zoomStep);
+        });
+        makeButton(ICONS.zoomOut, 'Zoom out', () => {
+            viewport.setZoom(viewport.getZoom() / opts.zoomStep);
+        });
+    }
+    if (opts.showFitView) {
+        makeButton(ICONS.fit, 'Fit view', () => {
+            var _a;
+            (_a = opts.onFitView) === null || _a === void 0 ? void 0 : _a.call(opts);
+        });
+    }
+    let lockButton;
+    const paintLock = () => {
+        if (!lockButton)
+            return;
+        lockButton.setAttribute('aria-pressed', String(locked));
+        lockButton.setAttribute('aria-label', locked ? 'Unlock canvas' : 'Lock canvas');
+        lockButton.title = locked ? 'Unlock canvas' : 'Lock canvas';
+        lockButton.innerHTML = `<svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true" focusable="false">${locked ? ICONS.lock : ICONS.unlock}</svg>`;
+        lockButton.style.background = locked ? '#e8eefc' : '#fff';
+    };
+    if (opts.showLock) {
+        lockButton = makeButton(ICONS.unlock, 'Lock canvas', () => {
+            var _a;
+            locked = !locked;
+            paintLock();
+            (_a = opts.onToggleLock) === null || _a === void 0 ? void 0 : _a.call(opts, locked);
+        });
+        paintLock();
+    }
+    return {
+        portal,
+        element: bar,
+        setVisible(next) {
+            if (visible === next)
+                return;
+            visible = next;
+            portal.element.style.display = next ? 'block' : 'none';
+        },
+        isVisible: () => visible,
+        setLocked(next) {
+            locked = next;
+            paintLock();
+        },
+        dispose: (0, disposable_1.once)(() => {
+            for (const cleanup of cleanups)
+                cleanup();
+            cleanups.length = 0;
+            portal.dispose();
+        }),
+    };
+}
+//# sourceMappingURL=controls.js.map

package/src/libs/renderer/src/ext/components/controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.js","sourceRoot":"","sources":["../../../../../../../renderer/src/ext/components/controls.ts"],"names":[],"mappings":"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"}

package/src/libs/renderer/src/ext/components/minimap.d.ts

@@ -0,0 +1,78 @@
+/**
+ * ============================================================================
+ * Card 6 — <MiniMap>: the overview panel. GAP CLOSED.
+ * ============================================================================
+ *
+ * The audit's finding: "no minimap". Every competitor ships one, and its absence
+ * is the first thing a side-by-side eval notices. `DiagramStore.showMinimap`
+ * existed as a `false`-defaulted boolean with ZERO consumers — the flag was the
+ * fossil of a feature that had never been built. It drives this component now.
+ *
+ * ---------------------------------------------------------------------------
+ * What it draws
+ * ---------------------------------------------------------------------------
+ * A screen-space panel (a portal) containing an SVG whose `viewBox` is the
+ * CONTENT bounding box of the diagram. Because the viewBox does the scaling, the
+ * node rects are drawn in raw world coordinates — no manual scale maths, and no
+ * drift between the minimap and the canvas.
+ *
+ * On top sits the VIEWPORT RECT: the camera's world rectangle, drawn in the same
+ * coordinate system. Panning the canvas moves it; dragging it pans the canvas.
+ *
+ * ---------------------------------------------------------------------------
+ * Interaction (this is the part that makes it a real minimap, not a picture)
+ * ---------------------------------------------------------------------------
+ *   click      → centre the camera on that world point
+ *   drag       → pan continuously
+ *   wheel      → zoom the canvas
+ *
+ * Screen→world for the minimap is NOT the canvas's `clientToWorld` — the minimap
+ * has its own camera (its viewBox). It is inverted here from the panel's own
+ * bounding rect, which is why the two never fight.
+ *
+ * ---------------------------------------------------------------------------
+ * Cost
+ * ---------------------------------------------------------------------------
+ * Redrawing every node rect on every camera change would make panning O(nodes)
+ * for no reason — the nodes have not moved. So the node layer is rebuilt ONLY on
+ * model change, while the camera rect is updated on viewport change. Panning a
+ * 5,000-node diagram therefore touches exactly one `<rect>`.
+ */
+import type { DiagramModel, NodeModel } from '@grafloria/engine';
+import type { ViewportController } from '../../viewport/viewport-controller';
+import type { Portal } from '../portal';
+import type { PortalPlacement } from '../portal';
+export interface MiniMapOptions {
+    placement?: PortalPlacement;
+    offset?: number;
+    width?: number;
+    height?: number;
+    /** Padding (world units) around the content in the minimap's viewBox. */
+    padding?: number;
+    /** Node fill. A function lets you colour-code by type/state. */
+    nodeColor?: string | ((node: NodeModel) => string);
+    /** Fill of the camera rectangle. */
+    maskColor?: string;
+    /** Stroke of the camera rectangle. */
+    maskStroke?: string;
+    panelBackground?: string;
+    panelBorder?: string;
+    /** Allow click/drag-to-pan and wheel-to-zoom. Default true. */
+    interactive?: boolean;
+    /** Draw links too. Default false (nodes carry the shape of a diagram). */
+    showLinks?: boolean;
+    linkColor?: string;
+    /** ARIA label on the panel. */
+    ariaLabel?: string;
+}
+export interface MiniMapHandle {
+    readonly portal: Portal;
+    readonly element: SVGSVGElement;
+    /** Rebuild the node layer (call when the model changed). */
+    refresh(): void;
+    setVisible(visible: boolean): void;
+    isVisible(): boolean;
+    update(options: Partial<MiniMapOptions>): void;
+    dispose(): void;
+}
+export declare function createMiniMap(root: HTMLElement, viewport: ViewportController, getModel: () => DiagramModel, options?: MiniMapOptions): MiniMapHandle;