@grafloria/element 0.3.18 → 0.3.20

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/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;

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

@@ -0,0 +1,326 @@
+"use strict";
+/**
+ * ============================================================================
+ * 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>`.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMiniMap = createMiniMap;
+const disposable_1 = require("../disposable");
+const portal_1 = require("../portal");
+const SVG_NS = 'http://www.w3.org/2000/svg';
+function contentBoundsOf(model, padding) {
+    const nodes = model.getNodes().filter((n) => { var _a; return ((_a = n.state) === null || _a === void 0 ? void 0 : _a.visible) !== false; });
+    if (nodes.length === 0)
+        return null;
+    let left = Infinity;
+    let top = Infinity;
+    let right = -Infinity;
+    let bottom = -Infinity;
+    for (const node of nodes) {
+        const p = typeof node.getWorldPosition === 'function' ? node.getWorldPosition() : node.position;
+        left = Math.min(left, p.x);
+        top = Math.min(top, p.y);
+        right = Math.max(right, p.x + node.size.width);
+        bottom = Math.max(bottom, p.y + node.size.height);
+    }
+    if (!Number.isFinite(left))
+        return null;
+    return {
+        x: left - padding,
+        y: top - padding,
+        w: Math.max(1, right - left + padding * 2),
+        h: Math.max(1, bottom - top + padding * 2),
+    };
+}
+function createMiniMap(root, viewport, getModel, options = {}) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const doc = root.ownerDocument;
+    let opts = {
+        placement: (_a = options.placement) !== null && _a !== void 0 ? _a : 'bottom-right',
+        offset: (_b = options.offset) !== null && _b !== void 0 ? _b : 12,
+        width: (_c = options.width) !== null && _c !== void 0 ? _c : 200,
+        height: (_d = options.height) !== null && _d !== void 0 ? _d : 150,
+        padding: (_e = options.padding) !== null && _e !== void 0 ? _e : 40,
+        maskColor: (_f = options.maskColor) !== null && _f !== void 0 ? _f : 'rgba(80,130,220,0.18)',
+        maskStroke: (_g = options.maskStroke) !== null && _g !== void 0 ? _g : 'rgba(60,110,200,0.9)',
+        panelBackground: (_h = options.panelBackground) !== null && _h !== void 0 ? _h : 'rgba(250,250,252,0.92)',
+        panelBorder: (_j = options.panelBorder) !== null && _j !== void 0 ? _j : 'rgba(0,0,0,0.15)',
+        interactive: (_k = options.interactive) !== null && _k !== void 0 ? _k : true,
+        showLinks: (_l = options.showLinks) !== null && _l !== void 0 ? _l : false,
+        linkColor: (_m = options.linkColor) !== null && _m !== void 0 ? _m : 'rgba(120,130,145,0.6)',
+        ariaLabel: (_o = options.ariaLabel) !== null && _o !== void 0 ? _o : 'Diagram minimap',
+        nodeColor: options.nodeColor,
+    };
+    const portal = (0, portal_1.createPortal)(root, {
+        placement: opts.placement,
+        offset: opts.offset,
+        className: 'grafloria-minimap',
+    });
+    const applyPanelStyle = () => {
+        portal.element.style.width = `${opts.width}px`;
+        portal.element.style.height = `${opts.height}px`;
+        portal.element.style.background = opts.panelBackground;
+        portal.element.style.border = `1px solid ${opts.panelBorder}`;
+        portal.element.style.borderRadius = '4px';
+        portal.element.style.boxShadow = '0 1px 4px rgba(0,0,0,0.12)';
+        portal.element.style.overflow = 'hidden';
+        portal.element.style.cursor = opts.interactive ? 'pointer' : 'default';
+    };
+    applyPanelStyle();
+    const svg = doc.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('width', '100%');
+    svg.setAttribute('height', '100%');
+    svg.setAttribute('class', 'grafloria-minimap-svg');
+    svg.setAttribute('role', 'img');
+    svg.setAttribute('aria-label', opts.ariaLabel);
+    svg.style.display = 'block';
+    const linkLayer = doc.createElementNS(SVG_NS, 'g');
+    linkLayer.setAttribute('class', 'grafloria-minimap-links');
+    const nodeLayer = doc.createElementNS(SVG_NS, 'g');
+    nodeLayer.setAttribute('class', 'grafloria-minimap-nodes');
+    const cameraRect = doc.createElementNS(SVG_NS, 'rect');
+    cameraRect.setAttribute('class', 'grafloria-minimap-viewport');
+    cameraRect.setAttribute('pointer-events', 'none');
+    svg.appendChild(linkLayer);
+    svg.appendChild(nodeLayer);
+    svg.appendChild(cameraRect);
+    portal.element.appendChild(svg);
+    let visible = true;
+    /** The world box the minimap's viewBox currently shows. */
+    let bounds = null;
+    const nodeFill = (node) => {
+        var _a;
+        const c = opts.nodeColor;
+        if (typeof c === 'function')
+            return c(node);
+        if (typeof c === 'string')
+            return c;
+        // NOTE: NodeState is an OBJECT (`{ visible, locked, selected, … }`), unlike
+        // LinkModel.state which is a STRING enum. Comparing `node.state ===
+        // 'selected'` — the idiom the link code uses — is always false.
+        return ((_a = node.state) === null || _a === void 0 ? void 0 : _a.selected) ? 'rgba(60,110,200,0.95)' : 'rgba(140,150,165,0.85)';
+    };
+    /**
+     * Rebuild the viewBox + the node/link layers. Model-change only — NOT called
+     * on pan/zoom (see the cost note in the header).
+     */
+    const refresh = () => {
+        var _a;
+        if (!visible)
+            return;
+        const model = getModel();
+        bounds = contentBoundsOf(model, opts.padding);
+        while (nodeLayer.firstChild)
+            nodeLayer.removeChild(nodeLayer.firstChild);
+        while (linkLayer.firstChild)
+            linkLayer.removeChild(linkLayer.firstChild);
+        if (!bounds) {
+            // Empty diagram: nothing to show, and a 0-width viewBox is invalid.
+            svg.removeAttribute('viewBox');
+            cameraRect.setAttribute('width', '0');
+            cameraRect.setAttribute('height', '0');
+            return;
+        }
+        svg.setAttribute('viewBox', `${bounds.x} ${bounds.y} ${bounds.w} ${bounds.h}`);
+        // Match the canvas's aspect handling: never distort the picture.
+        svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+        if (opts.showLinks) {
+            for (const link of model.getLinks()) {
+                const pts = link.points;
+                if (!pts || pts.length < 2)
+                    continue;
+                const line = doc.createElementNS(SVG_NS, 'polyline');
+                line.setAttribute('points', pts.map((p) => `${p.x},${p.y}`).join(' '));
+                line.setAttribute('fill', 'none');
+                line.setAttribute('stroke', opts.linkColor);
+                // Keep hairlines visible regardless of how big the content box is.
+                line.setAttribute('stroke-width', String(Math.max(1, bounds.w / 300)));
+                linkLayer.appendChild(line);
+            }
+        }
+        for (const node of model.getNodes()) {
+            if (((_a = node.state) === null || _a === void 0 ? void 0 : _a.visible) === false)
+                continue;
+            const p = typeof node.getWorldPosition === 'function' ? node.getWorldPosition() : node.position;
+            const rect = doc.createElementNS(SVG_NS, 'rect');
+            rect.setAttribute('x', String(p.x));
+            rect.setAttribute('y', String(p.y));
+            rect.setAttribute('width', String(Math.max(1, node.size.width)));
+            rect.setAttribute('height', String(Math.max(1, node.size.height)));
+            rect.setAttribute('rx', '2');
+            rect.setAttribute('fill', nodeFill(node));
+            rect.setAttribute('data-node-id', node.id);
+            nodeLayer.appendChild(rect);
+        }
+        drawCamera();
+    };
+    /** Cheap: one rect. Runs on every camera change. */
+    const drawCamera = () => {
+        if (!visible || !bounds)
+            return;
+        // getViewBox(), NOT getViewport(): the viewport's width/height are CSS-pixel
+        // spans, the VISIBLE WORLD rect divides them by zoom. Copying the raw
+        // viewport made the tinted camera rect zoom-blind — at zoom 1.44 it still
+        // claimed the whole scene while the canvas showed ~60% of it (live audit).
+        const v = viewport.getViewBox();
+        cameraRect.setAttribute('x', String(v.x));
+        cameraRect.setAttribute('y', String(v.y));
+        cameraRect.setAttribute('width', String(Math.max(0, v.width)));
+        cameraRect.setAttribute('height', String(Math.max(0, v.height)));
+        cameraRect.setAttribute('fill', opts.maskColor);
+        cameraRect.setAttribute('stroke', opts.maskStroke);
+        // Constant visual weight regardless of content scale.
+        cameraRect.setAttribute('stroke-width', String(Math.max(1, bounds.w / 200)));
+    };
+    // -- interaction ------------------------------------------------------------
+    //
+    // The minimap has its OWN camera (the viewBox + preserveAspectRatio letterbox).
+    // Inverting it by hand is the only way to turn a click into a world point; the
+    // canvas's clientToWorld would answer for a different camera entirely.
+    const clientToMiniWorld = (clientX, clientY) => {
+        if (!bounds)
+            return null;
+        const r = svg.getBoundingClientRect();
+        if (r.width === 0 || r.height === 0)
+            return null;
+        // 'meet' letterboxes: the content scale is the SMALLER of the two ratios,
+        // and the unused axis is centred (xMidYMid).
+        const scale = Math.min(r.width / bounds.w, r.height / bounds.h);
+        const drawnW = bounds.w * scale;
+        const drawnH = bounds.h * scale;
+        const padX = (r.width - drawnW) / 2;
+        const padY = (r.height - drawnH) / 2;
+        return {
+            x: bounds.x + (clientX - r.left - padX) / scale,
+            y: bounds.y + (clientY - r.top - padY) / scale,
+        };
+    };
+    /** Centre the canvas camera on a world point. */
+    const centreOn = (world) => {
+        // World-rect maths — see drawCamera: spans must be the view box's, or the
+        // centring lands offset whenever zoom != 1.
+        const vp = viewport.getViewport();
+        const vb = viewport.getViewBox();
+        viewport.setViewport({
+            x: world.x - vb.width / 2,
+            y: world.y - vb.height / 2,
+            width: vp.width,
+            height: vp.height,
+        });
+    };
+    let dragging = false;
+    const onPointerDown = (event) => {
+        var _a;
+        if (!opts.interactive)
+            return;
+        const world = clientToMiniWorld(event.clientX, event.clientY);
+        if (!world)
+            return;
+        dragging = true;
+        // Capture on the SVG so a drag that leaves the little panel keeps panning —
+        // without capture the camera would stick the moment the pointer exits.
+        (_a = svg.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(svg, event.pointerId);
+        centreOn(world);
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    const onPointerMove = (event) => {
+        if (!dragging || !opts.interactive)
+            return;
+        const world = clientToMiniWorld(event.clientX, event.clientY);
+        if (!world)
+            return;
+        centreOn(world);
+        event.preventDefault();
+    };
+    const endDrag = (event) => {
+        var _a;
+        if (!dragging)
+            return;
+        dragging = false;
+        (_a = svg.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(svg, event.pointerId);
+    };
+    const onWheel = (event) => {
+        if (!opts.interactive)
+            return;
+        // Zoom the CANVAS about its own centre. Zooming about the minimap cursor
+        // would be a lie: the canvas is not showing that point.
+        viewport.zoomByWheel(event.deltaY);
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    svg.addEventListener('pointerdown', onPointerDown);
+    svg.addEventListener('pointermove', onPointerMove);
+    svg.addEventListener('pointerup', endDrag);
+    svg.addEventListener('pointercancel', endDrag);
+    svg.addEventListener('wheel', onWheel, { passive: false });
+    refresh();
+    const unsubscribeViewport = viewport.onChange(drawCamera);
+    return {
+        portal,
+        element: svg,
+        refresh,
+        setVisible(next) {
+            if (visible === next)
+                return;
+            visible = next;
+            portal.element.style.display = next ? 'block' : 'none';
+            if (next)
+                refresh();
+        },
+        isVisible: () => visible,
+        update(next) {
+            opts = Object.assign(Object.assign({}, opts), next);
+            applyPanelStyle();
+            portal.update({ placement: opts.placement, offset: opts.offset });
+            svg.setAttribute('aria-label', opts.ariaLabel);
+            refresh();
+        },
+        dispose: (0, disposable_1.once)(() => {
+            unsubscribeViewport();
+            svg.removeEventListener('pointerdown', onPointerDown);
+            svg.removeEventListener('pointermove', onPointerMove);
+            svg.removeEventListener('pointerup', endDrag);
+            svg.removeEventListener('pointercancel', endDrag);
+            svg.removeEventListener('wheel', onWheel);
+            portal.dispose();
+        }),
+    };
+}
+//# sourceMappingURL=minimap.js.map