@grafloria/element 0.3.20 → 0.3.21

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

@@ -1,49 +0,0 @@
-/**
- * ============================================================================
- * 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

@@ -1,144 +0,0 @@
-"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

@@ -1,78 +0,0 @@
-/**
- * ============================================================================
- * 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

@@ -1,326 +0,0 @@
-"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