@grafloria/element 0.3.17 → 0.3.19

package/src/libs/renderer/src/canvas/vnode-painter.js

@@ -0,0 +1,649 @@
+"use strict";
+// vnode-painter.ts — draws a VNode tree onto a 2D context.
+//
+// This is the OTHER consumer of the VNode tree. `vnode/patch.ts` turns it into
+// SVG DOM; this turns it into Canvas 2D draw calls. Neither knows about the
+// other, and neither is the "real" one — the VNode tree is the contract, which
+// is exactly what makes the backend switchable.
+//
+// What the painter does, in order, for every element:
+//   1. resolve its style through the SVG cascade      (style-resolution.ts,
+//      which reuses the export card's class-rule flattener)
+//   2. compose its transform onto the parent's        (path-geometry.ts)
+//   3. normalise its geometry to path commands        (path-geometry.ts)
+//   4. fill / stroke / draw text
+//   5. record a HIT REGION for it, in world coordinates
+//
+// Step 5 is why hit-testing cannot drift from what is drawn: the pick geometry
+// and the pixels come from the same command list, produced in the same pass.
+//
+// NOT PAINTABLE ON CANVAS (deliberate, reported, not silently dropped):
+//   - `foreignObject` — it embeds live HTML/components. Canvas cannot rasterise
+//     a DOM subtree. The painter records these in `unpaintableNodes` so the host
+//     can position an HTML overlay over the canvas (the standard hybrid answer,
+//     and what `RendererCapabilities.supportsForeignObject: false` announces).
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VNodePainter = exports.CANVAS_LINK_HIT_TOLERANCE = void 0;
+exports.entityOf = entityOf;
+exports.collectDefinitions = collectDefinitions;
+exports.geometryOf = geometryOf;
+exports.textLines = textLines;
+exports.nextColorKey = nextColorKey;
+exports.colorKeyFromPixel = colorKeyFromPixel;
+const link_hit_test_1 = require("../svg/link-hit-test");
+const path_geometry_1 = require("./path-geometry");
+const style_resolution_1 = require("./style-resolution");
+const canvas_context_1 = require("./canvas-context");
+/**
+ * Link pick tolerance, in WORLD units.
+ *
+ * Not a new number — it IS the floor `InteractionController` applies in SVG
+ * mode, imported from the one place that owns it. Hit parity between the two
+ * backends is therefore a property of the code, not a coincidence maintained by
+ * two constants that happen to agree today. (The full grab distance is per
+ * link — `linkBodyHitTolerance(strokeWidth)` — which both backends now use.)
+ */
+exports.CANVAS_LINK_HIT_TOLERANCE = link_hit_test_1.DEFAULT_LINK_HIT_TOLERANCE;
+/**
+ * Classes whose elements are DECORATION: they are painted, but they must not be
+ * pickable, because they extend beyond the entity's real silhouette (the shadow
+ * is offset, the selection ring is grown by 3px). Picking them would make the
+ * canvas backend select a node from outside the shape — which SVG mode, via
+ * `isPointInShape`, does not do.
+ */
+const NON_PICKABLE_CLASSES = new Set([
+    'node-shadow',
+    'selection-highlight',
+    'connection-target-highlight',
+    // The SVG renderer's invisible wide "interaction stroke". Its width is a
+    // DOM-hit-area convention (>= 12px), not the tolerance the interaction layer
+    // actually applies (5 world units), so consuming it here would make canvas
+    // picking looser than SVG picking. The link's real pick region is derived from
+    // the VISIBLE path with CANVAS_LINK_HIT_TOLERANCE.
+    'link-hit-area',
+]);
+/** Elements that define, rather than draw. */
+const DEFINITION_TYPES = new Set([
+    'defs',
+    'clipPath',
+    'linearGradient',
+    'radialGradient',
+    'pattern',
+    'filter',
+    'feDropShadow',
+    'feGaussianBlur',
+    'feOffset',
+    'feFlood',
+    'feComposite',
+    'feMerge',
+    'feMergeNode',
+    'stop',
+    'marker',
+    'title',
+    'desc',
+]);
+/**
+ * Paints VNode trees. Stateless between frames apart from the colour-key
+ * allocator the caller injects.
+ */
+class VNodePainter {
+    constructor(resolver) {
+        this.resolver = resolver;
+    }
+    paint(ctx, root, options) {
+        var _a;
+        const defs = collectDefinitions(root);
+        let fallbackCounter = 0;
+        const state = {
+            ctx,
+            defs,
+            options,
+            hitRecords: [],
+            colorKeyIndex: new Map(),
+            unpaintableNodes: [],
+            bounds: null,
+            entityBounds: new Map(),
+            paintedCount: 0,
+            culledCount: 0,
+            allocateColorKey: (_a = options.allocateColorKey) !== null && _a !== void 0 ? _a : (() => nextColorKey(fallbackCounter++)),
+            entityPickCount: new Map(),
+            entity: null,
+            entityStack: [],
+            gradientCache: new Map(),
+        };
+        this.paintNode(state, root, path_geometry_1.IDENTITY, this.resolver.rootStyle());
+        return {
+            hitRecords: state.hitRecords,
+            colorKeyIndex: state.colorKeyIndex,
+            unpaintableNodes: state.unpaintableNodes,
+            bounds: state.bounds,
+            entityBounds: state.entityBounds,
+            paintedCount: state.paintedCount,
+            culledCount: state.culledCount,
+        };
+    }
+    /**
+     * World bounds of a subtree, drawing nothing. Used by the dirty tracker to
+     * measure the entities that actually changed (and only those).
+     */
+    measure(vnode, worldToDevice = path_geometry_1.IDENTITY) {
+        return this.paint(canvas_context_1.NULL_CONTEXT, vnode, { worldToDevice, measureOnly: true }).bounds;
+    }
+    // -------------------------------------------------------------------------
+    paintNode(state, vnode, parentMatrix, inherited) {
+        var _a, _b, _c;
+        if (!vnode || typeof vnode.type !== 'string')
+            return;
+        // Definitions are consulted, never drawn.
+        if (DEFINITION_TYPES.has(vnode.type))
+            return;
+        // foreignObject: live HTML. Canvas cannot rasterise it — report, don't drop.
+        if (vnode.type === 'foreignObject') {
+            state.unpaintableNodes.push(vnode);
+            return;
+        }
+        // <image>: raster content (a composite panel's image/icon slot, Card 5). The
+        // retained-mode backend has no async image cache, so it REPORTS images as
+        // unpaintable — the host may overlay them, exactly like foreignObject —
+        // rather than dropping them silently. The rest of the panel (header band,
+        // rows, badges) is ordinary rect/text and paints natively, so a composite
+        // node still reads correctly in Canvas mode minus the bitmap.
+        if (vnode.type === 'image') {
+            state.unpaintableNodes.push(vnode);
+            return;
+        }
+        const props = (_a = vnode.props) !== null && _a !== void 0 ? _a : {};
+        const style = this.resolver.resolve(props, inherited);
+        if (!style.visible)
+            return;
+        const matrix = props['transform']
+            ? (0, path_geometry_1.multiply)(parentMatrix, (0, path_geometry_1.parseTransform)(String(props['transform'])))
+            : parentMatrix;
+        // Entity scope: a `node-…` / `link-…` group owns every pickable region
+        // beneath it, which is how a link's <path> (which carries no key of its own)
+        // gets attributed to its link. The scopes NEST (a port lives inside a node),
+        // so bounds accumulate onto every enclosing entity — a port that sticks out
+        // past the node's edge still grows the node's dirty rect.
+        const prevEntity = state.entity;
+        const scope = entityOf(vnode);
+        if (scope) {
+            state.entity = scope;
+            state.entityStack.push(scope.key);
+        }
+        if (vnode.type === 'g' || vnode.type === 'svg') {
+            for (const child of (_b = vnode.children) !== null && _b !== void 0 ? _b : []) {
+                this.paintNode(state, child, matrix, style);
+            }
+        }
+        else if (vnode.type === 'text') {
+            this.paintText(state, vnode, matrix, style);
+        }
+        else {
+            const cmds = geometryOf(vnode);
+            if (cmds.length > 0) {
+                this.paintShape(state, vnode, cmds, matrix, style);
+            }
+            // A shape can still have children (rare, but the tree allows it).
+            for (const child of (_c = vnode.children) !== null && _c !== void 0 ? _c : []) {
+                this.paintNode(state, child, matrix, style);
+            }
+        }
+        if (scope) {
+            state.entityStack.pop();
+            state.entity = prevEntity;
+        }
+    }
+    paintShape(state, vnode, localCmds, matrix, style) {
+        var _a, _b, _c;
+        const worldCmds = (0, path_geometry_1.transformCmds)(localCmds, matrix);
+        const geomBounds = (0, path_geometry_1.pathBounds)(worldCmds);
+        const padded = geomBounds ? padForPaint(geomBounds, style) : null;
+        accumulateBounds(state, padded);
+        // The pick region is registered even when the element is dirty-culled: the
+        // hit index describes the whole scene, not just the repainted part of it.
+        const record = this.registerHit(state, vnode, worldCmds, style, geomBounds);
+        if (state.options.measureOnly)
+            return;
+        if (!intersectsDirty(padded, state.options.dirtyWorld)) {
+            state.culledCount++;
+            return;
+        }
+        state.paintedCount++;
+        const ctx = state.ctx;
+        const m = (0, path_geometry_1.multiply)(state.options.worldToDevice, matrix);
+        ctx.save();
+        ctx.setTransform(m.a, m.b, m.c, m.d, m.e, m.f);
+        this.applyClip(state, style);
+        // --- picking pass: flat colour-key silhouette, no styling at all ---------
+        if (state.options.pickingPass) {
+            if (record) {
+                emitPath(ctx, localCmds);
+                ctx.globalAlpha = 1;
+                if (record.filled) {
+                    ctx.fillStyle = record.colorKey;
+                    ctx.fill();
+                }
+                else {
+                    ctx.strokeStyle = record.colorKey;
+                    ctx.lineWidth = record.tolerance * 2;
+                    ctx.lineJoin = 'round';
+                    ctx.lineCap = 'round';
+                    ctx.setLineDash([]);
+                    ctx.stroke();
+                }
+            }
+            ctx.restore();
+            return;
+        }
+        // --- normal pass --------------------------------------------------------
+        if (style.filter && 'filter' in ctx) {
+            ctx.filter = style.filter;
+        }
+        emitPath(ctx, localCmds);
+        if (style.fill !== undefined) {
+            ctx.fillStyle = this.paintValue(state, style.fill, geomBounds);
+            ctx.globalAlpha = style.opacity * ((_a = style.fillOpacity) !== null && _a !== void 0 ? _a : 1);
+            ctx.fill();
+        }
+        if (style.stroke !== undefined && style.strokeWidth > 0) {
+            ctx.strokeStyle = this.paintValue(state, style.stroke, geomBounds);
+            ctx.globalAlpha = style.opacity * ((_b = style.strokeOpacity) !== null && _b !== void 0 ? _b : 1);
+            ctx.lineWidth = style.strokeWidth;
+            ctx.lineJoin = 'round';
+            ctx.lineCap = 'butt';
+            ctx.setLineDash((_c = style.strokeDasharray) !== null && _c !== void 0 ? _c : []);
+            ctx.stroke();
+        }
+        ctx.restore();
+    }
+    paintText(state, vnode, matrix, style) {
+        var _a, _b, _c, _d, _e;
+        const props = (_a = vnode.props) !== null && _a !== void 0 ? _a : {};
+        const x = (_b = (0, style_resolution_1.toNumber)(props['x'])) !== null && _b !== void 0 ? _b : 0;
+        const y = (_c = (0, style_resolution_1.toNumber)(props['y'])) !== null && _c !== void 0 ? _c : 0;
+        const lines = textLines(vnode, x, y);
+        if (lines.length === 0)
+            return;
+        // Text bounds are estimated (the same `length * fontSize * 0.6` heuristic the
+        // SVG text-block engine uses to wrap), which is enough for dirty rects.
+        const geomBounds = textBounds(lines, style);
+        const worldBounds = geomBounds ? transformBounds(geomBounds, matrix) : null;
+        accumulateBounds(state, worldBounds);
+        if (state.options.measureOnly)
+            return;
+        if (!intersectsDirty(worldBounds, state.options.dirtyWorld)) {
+            state.culledCount++;
+            return;
+        }
+        // Text is never a pick target: every label the renderer emits carries
+        // `pointer-events: none`, and picking glyph boxes would make a node's hit
+        // region depend on its label's length.
+        if (state.options.pickingPass)
+            return;
+        state.paintedCount++;
+        const ctx = state.ctx;
+        const m = (0, path_geometry_1.multiply)(state.options.worldToDevice, matrix);
+        ctx.save();
+        ctx.setTransform(m.a, m.b, m.c, m.d, m.e, m.f);
+        this.applyClip(state, style);
+        ctx.font = (0, style_resolution_1.fontString)(style);
+        ctx.textAlign = (0, style_resolution_1.textAlignFor)(style.textAnchor);
+        ctx.textBaseline = (0, style_resolution_1.textBaselineFor)(style.dominantBaseline);
+        ctx.globalAlpha = style.opacity * ((_d = style.fillOpacity) !== null && _d !== void 0 ? _d : 1);
+        ctx.fillStyle = this.paintValue(state, (_e = style.fill) !== null && _e !== void 0 ? _e : '#000000', null);
+        for (const line of lines) {
+            ctx.fillText(line.text, line.x, line.y);
+        }
+        ctx.restore();
+    }
+    /** `url(#id)` → a real CanvasGradient; anything else passes through. */
+    paintValue(state, paint, bounds) {
+        var _a;
+        if (!paint.startsWith('url('))
+            return paint;
+        const id = (_a = /url\(\s*#([^)\s]+)\s*\)/.exec(paint)) === null || _a === void 0 ? void 0 : _a[1];
+        if (!id)
+            return '#000000';
+        const cached = state.gradientCache.get(id);
+        if (cached !== undefined)
+            return cached;
+        const def = state.defs.get(id);
+        const gradient = def ? buildGradient(state.ctx, def, bounds) : undefined;
+        // A pattern / unresolvable ref falls back to a flat mid-grey rather than
+        // throwing or painting black: a missing paint server must not blank a node.
+        const value = gradient !== null && gradient !== void 0 ? gradient : '#999999';
+        state.gradientCache.set(id, value);
+        return value;
+    }
+    applyClip(state, style) {
+        var _a, _b;
+        if (!style.clipPathId)
+            return;
+        const clip = state.defs.get(style.clipPathId);
+        if (!clip)
+            return;
+        const ctx = state.ctx;
+        ctx.beginPath();
+        for (const child of (_a = clip.children) !== null && _a !== void 0 ? _a : []) {
+            const cmds = geometryOf(child);
+            if (cmds.length === 0)
+                continue;
+            // A clipPath child may carry its own transform.
+            const childMatrix = ((_b = child.props) === null || _b === void 0 ? void 0 : _b['transform'])
+                ? (0, path_geometry_1.parseTransform)(String(child.props['transform']))
+                : path_geometry_1.IDENTITY;
+            emitPathInto(ctx, childMatrix === path_geometry_1.IDENTITY ? cmds : (0, path_geometry_1.transformCmds)(cmds, childMatrix));
+        }
+        ctx.clip();
+    }
+    registerHit(state, vnode, worldCmds, style, bounds) {
+        var _a, _b, _c, _d;
+        const entity = state.entity;
+        if (!entity)
+            return null;
+        if (((_a = vnode.props) === null || _a === void 0 ? void 0 : _a['pointerEvents']) === 'none')
+            return null;
+        const classes = String((_c = (_b = vnode.props) === null || _b === void 0 ? void 0 : _b['className']) !== null && _c !== void 0 ? _c : '').split(/\s+/);
+        if (classes.some((c) => NON_PICKABLE_CLASSES.has(c)))
+            return null;
+        // Filled shapes pick by their INTERIOR (a node body, an arrowhead polygon);
+        // a stroke-only element — the link path itself, which is `fill: none` — picks
+        // by PROXIMITY to the line, because a zero-area path has no interior to be
+        // inside of. The link's proximity band is the shared interaction tolerance,
+        // not its visual stroke width: a 2px line has to be clickable.
+        const filled = style.fill !== undefined;
+        const isLink = entity.kind === 'link';
+        // Stable within the entity, and therefore stable across frames — see
+        // PaintOptions.allocateColorKey for why that is load-bearing.
+        const ordinal = (_d = state.entityPickCount.get(entity.key)) !== null && _d !== void 0 ? _d : 0;
+        state.entityPickCount.set(entity.key, ordinal + 1);
+        const record = {
+            kind: entity.kind,
+            id: entity.id,
+            cmds: worldCmds,
+            filled,
+            tolerance: !filled && isLink
+                ? (0, link_hit_test_1.linkBodyHitTolerance)(style.strokeWidth)
+                : Math.max(style.strokeWidth / 2, 0.5),
+            zIndex: state.hitRecords.length,
+            vnode,
+            colorKey: state.allocateColorKey(`${entity.key}#${ordinal}`),
+            bounds,
+        };
+        state.hitRecords.push(record);
+        state.colorKeyIndex.set(record.colorKey, record);
+        return record;
+    }
+}
+exports.VNodePainter = VNodePainter;
+// ---------------------------------------------------------------------------
+// internals
+// ---------------------------------------------------------------------------
+/** Add a shape's world bounds to the frame total AND to every enclosing entity. */
+function accumulateBounds(state, bounds) {
+    var _a;
+    if (!bounds)
+        return;
+    state.bounds = (0, path_geometry_1.boundsUnion)(state.bounds, bounds);
+    for (const key of state.entityStack) {
+        state.entityBounds.set(key, (0, path_geometry_1.boundsUnion)((_a = state.entityBounds.get(key)) !== null && _a !== void 0 ? _a : null, bounds));
+    }
+}
+/** `node-n1` / `link-l1` / `port-p3` → the entity that owns the subtree. */
+function entityOf(vnode) {
+    const key = vnode.key;
+    if (!key)
+        return null;
+    // The HTML-layer placeholder group is not a paintable node.
+    if (key.endsWith('-html-layer'))
+        return null;
+    if (key.startsWith('node-'))
+        return { kind: 'node', id: key.slice(5), key };
+    if (key.startsWith('link-'))
+        return { kind: 'link', id: key.slice(5), key };
+    if (key.startsWith('port-'))
+        return { kind: 'port', id: key.slice(5), key };
+    return null;
+}
+/**
+ * Every `id`-bearing definition anywhere in the tree: paint servers and filters
+ * from `<defs>`, and the per-node `<clipPath>`s the label engine emits INLINE
+ * (as a sibling of the text it clips). A single recursive pre-pass, because
+ * `<defs>` is appended LAST by the SVG renderer while the elements referencing
+ * it are painted first.
+ */
+function collectDefinitions(root) {
+    const out = new Map();
+    const walk = (vnode) => {
+        var _a, _b;
+        const id = (_a = vnode.props) === null || _a === void 0 ? void 0 : _a['id'];
+        if (typeof id === 'string' && id)
+            out.set(id, vnode);
+        for (const child of (_b = vnode.children) !== null && _b !== void 0 ? _b : []) {
+            if (child)
+                walk(child);
+        }
+    };
+    walk(root);
+    return out;
+}
+/** VNode primitive → path commands, in the element's own local coordinates. */
+function geometryOf(vnode) {
+    var _a, _b;
+    const p = (_a = vnode.props) !== null && _a !== void 0 ? _a : {};
+    const n = (key, fallback = 0) => { var _a; return (_a = (0, style_resolution_1.toNumber)(p[key])) !== null && _a !== void 0 ? _a : fallback; };
+    switch (vnode.type) {
+        case 'rect':
+            return (0, path_geometry_1.rectPath)(n('x'), n('y'), n('width'), n('height'), n('rx'), (_b = (0, style_resolution_1.toNumber)(p['ry'])) !== null && _b !== void 0 ? _b : n('rx'));
+        case 'circle':
+            return (0, path_geometry_1.circlePath)(n('cx'), n('cy'), n('r'));
+        case 'ellipse':
+            return (0, path_geometry_1.ellipsePath)(n('cx'), n('cy'), n('rx'), n('ry'));
+        case 'line':
+            return (0, path_geometry_1.linePath)(n('x1'), n('y1'), n('x2'), n('y2'));
+        case 'polyline':
+            return (0, path_geometry_1.polyPath)(p['points'], false);
+        case 'polygon':
+            return (0, path_geometry_1.polyPath)(p['points'], true);
+        case 'path':
+            return (0, path_geometry_1.parsePath)(p['d']);
+        default:
+            return [];
+    }
+}
+function emitPath(ctx, cmds) {
+    ctx.beginPath();
+    emitPathInto(ctx, cmds);
+}
+function emitPathInto(ctx, cmds) {
+    for (const cmd of cmds) {
+        switch (cmd.op) {
+            case 'M':
+                ctx.moveTo(cmd.x, cmd.y);
+                break;
+            case 'L':
+                ctx.lineTo(cmd.x, cmd.y);
+                break;
+            case 'C':
+                ctx.bezierCurveTo(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
+                break;
+            case 'Q':
+                ctx.quadraticCurveTo(cmd.x1, cmd.y1, cmd.x, cmd.y);
+                break;
+            case 'Z':
+                ctx.closePath();
+                break;
+        }
+    }
+}
+/**
+ * The lines a `<text>` element draws.
+ *
+ * Two shapes, both emitted by the shared text-block engine:
+ *   - single line  → `textContent` on the `<text>` itself,
+ *   - multi line   → one `<tspan>` per line, each with `x` and a `dy` offset
+ *     from the running baseline (the first `dy` carries the block's vertical
+ *     alignment). Canvas has no tspan, so the dy chain is accumulated here.
+ */
+function textLines(vnode, x, y) {
+    var _a, _b, _c, _d, _e;
+    const props = (_a = vnode.props) !== null && _a !== void 0 ? _a : {};
+    const children = ((_b = vnode.children) !== null && _b !== void 0 ? _b : []).filter((c) => c && c.type === 'tspan');
+    if (children.length === 0) {
+        const text = props['textContent'];
+        if (text === undefined || text === null || String(text) === '')
+            return [];
+        return [{ text: String(text), x, y }];
+    }
+    const lines = [];
+    let cursorY = y;
+    for (const span of children) {
+        const sp = (_c = span.props) !== null && _c !== void 0 ? _c : {};
+        cursorY += (_d = (0, style_resolution_1.toNumber)(sp['dy'])) !== null && _d !== void 0 ? _d : 0;
+        const text = sp['textContent'];
+        if (text === undefined || text === null)
+            continue;
+        lines.push({ text: String(text), x: (_e = (0, style_resolution_1.toNumber)(sp['x'])) !== null && _e !== void 0 ? _e : x, y: cursorY });
+    }
+    return lines;
+}
+/** Estimated local-space bounds of a drawn text block. */
+function textBounds(lines, style) {
+    if (lines.length === 0)
+        return null;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const line of lines) {
+        const width = line.text.length * style.fontSize * 0.6;
+        const half = style.textAnchor === 'middle' ? width / 2 : style.textAnchor === 'end' ? width : 0;
+        const left = line.x - half;
+        minX = Math.min(minX, left);
+        maxX = Math.max(maxX, left + width);
+        minY = Math.min(minY, line.y - style.fontSize);
+        maxY = Math.max(maxY, line.y + style.fontSize);
+    }
+    return isFinite(minX) ? { minX, minY, maxX, maxY } : null;
+}
+function transformBounds(b, m) {
+    const corners = [
+        { x: b.minX, y: b.minY },
+        { x: b.maxX, y: b.minY },
+        { x: b.maxX, y: b.maxY },
+        { x: b.minX, y: b.maxY },
+    ].map((p) => ({ x: m.a * p.x + m.c * p.y + m.e, y: m.b * p.x + m.d * p.y + m.f }));
+    return {
+        minX: Math.min(...corners.map((p) => p.x)),
+        minY: Math.min(...corners.map((p) => p.y)),
+        maxX: Math.max(...corners.map((p) => p.x)),
+        maxY: Math.max(...corners.map((p) => p.y)),
+    };
+}
+/**
+ * Grow a shape's geometric bounds by everything that paints OUTSIDE it: half the
+ * stroke, plus a blur allowance when a CSS filter is in play. Over-padding costs
+ * a few extra repainted pixels; under-padding leaves visible crumbs behind a
+ * dirty-rect redraw, so this errs generously.
+ */
+function padForPaint(b, style) {
+    var _a, _b;
+    let pad = style.stroke !== undefined ? style.strokeWidth / 2 + 1 : 1;
+    if (style.filter) {
+        const blur = (_b = (0, style_resolution_1.toNumber)((_a = /blur\(\s*([\d.]+)/.exec(style.filter)) === null || _a === void 0 ? void 0 : _a[1])) !== null && _b !== void 0 ? _b : 0;
+        pad += blur * 3; // a Gaussian's visible extent is ~3σ
+    }
+    return { minX: b.minX - pad, minY: b.minY - pad, maxX: b.maxX + pad, maxY: b.maxY + pad };
+}
+function intersectsDirty(bounds, dirty) {
+    if (!dirty || dirty.length === 0)
+        return true; // full repaint
+    if (!bounds)
+        return false;
+    return dirty.some((d) => !(bounds.maxX < d.minX ||
+        bounds.minX > d.maxX ||
+        bounds.maxY < d.minY ||
+        bounds.minY > d.maxY));
+}
+/**
+ * Colour keys for the offscreen picking canvas.
+ *
+ * The index is spread across the 24-bit colour space with a stride so that
+ * adjacent records get FAR-APART colours. That matters: a browser antialiases
+ * even the picking pass, and a blended edge pixel between two adjacent keys must
+ * not land on a third VALID key. With a large stride, a blend of two keys is
+ * overwhelmingly likely to be a colour no record owns — which reads as "miss",
+ * not as "wrong entity". Exact-match lookup does the rest.
+ */
+function nextColorKey(index) {
+    // 2^24 / golden ratio, rounded to an odd number → a full-period generator over
+    // the 24-bit space with maximally-spread successive values.
+    const value = ((index + 1) * 10368889) % 0xffffff;
+    return `#${value.toString(16).padStart(6, '0')}`;
+}
+/** `#rrggbb` from a picking-canvas pixel. */
+function colorKeyFromPixel(r, g, b, a) {
+    if (a === 0)
+        return null;
+    const value = (r << 16) | (g << 8) | b;
+    return `#${value.toString(16).padStart(6, '0')}`;
+}
+/** Build a CanvasGradient from a `<linearGradient>` / `<radialGradient>` VNode. */
+function buildGradient(ctx, def, bounds) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    const stops = ((_a = def.children) !== null && _a !== void 0 ? _a : []).filter((c) => c && c.type === 'stop');
+    if (stops.length === 0)
+        return undefined;
+    // objectBoundingBox is the SVG default: coordinates are fractions of the
+    // element's bounds. Canvas gradients are always in user space, so the box has
+    // to be resolved here.
+    const units = String((_c = (_b = def.props) === null || _b === void 0 ? void 0 : _b['gradientUnits']) !== null && _c !== void 0 ? _c : 'objectBoundingBox');
+    const box = bounds !== null && bounds !== void 0 ? bounds : { minX: 0, minY: 0, maxX: 1, maxY: 1 };
+    const w = box.maxX - box.minX;
+    const h = box.maxY - box.minY;
+    const mapX = (v) => (units === 'userSpaceOnUse' ? v : box.minX + v * w);
+    const mapY = (v) => (units === 'userSpaceOnUse' ? v : box.minY + v * h);
+    const mapR = (v) => (units === 'userSpaceOnUse' ? v : v * Math.max(w, h));
+    const frac = (raw, fallback) => {
+        if (raw === undefined || raw === null)
+            return fallback;
+        const s = String(raw);
+        const n = parseFloat(s);
+        if (Number.isNaN(n))
+            return fallback;
+        return s.trim().endsWith('%') ? n / 100 : n;
+    };
+    let gradient;
+    if (def.type === 'radialGradient') {
+        if (!ctx.createRadialGradient)
+            return undefined;
+        const cx = mapX(frac((_d = def.props) === null || _d === void 0 ? void 0 : _d['cx'], 0.5));
+        const cy = mapY(frac((_e = def.props) === null || _e === void 0 ? void 0 : _e['cy'], 0.5));
+        const r = mapR(frac((_f = def.props) === null || _f === void 0 ? void 0 : _f['r'], 0.5));
+        gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.max(r, 0.0001));
+    }
+    else {
+        if (!ctx.createLinearGradient)
+            return undefined;
+        gradient = ctx.createLinearGradient(mapX(frac((_g = def.props) === null || _g === void 0 ? void 0 : _g['x1'], 0)), mapY(frac((_h = def.props) === null || _h === void 0 ? void 0 : _h['y1'], 0)), mapX(frac((_j = def.props) === null || _j === void 0 ? void 0 : _j['x2'], 1)), mapY(frac((_k = def.props) === null || _k === void 0 ? void 0 : _k['y2'], 0)));
+    }
+    const g = gradient;
+    if (typeof (g === null || g === void 0 ? void 0 : g.addColorStop) !== 'function')
+        return undefined;
+    for (const stop of stops) {
+        const offset = frac((_l = stop.props) === null || _l === void 0 ? void 0 : _l['offset'], 0);
+        const color = String((_q = (_o = (_m = stop.props) === null || _m === void 0 ? void 0 : _m['stopColor']) !== null && _o !== void 0 ? _o : (_p = stop.props) === null || _p === void 0 ? void 0 : _p['stop-color']) !== null && _q !== void 0 ? _q : '#000000');
+        const opacity = (0, style_resolution_1.toNumber)((_s = (_r = stop.props) === null || _r === void 0 ? void 0 : _r['stopOpacity']) !== null && _s !== void 0 ? _s : (_t = stop.props) === null || _t === void 0 ? void 0 : _t['stop-opacity']);
+        g.addColorStop(Math.max(0, Math.min(1, offset)), opacity !== undefined && opacity < 1 ? applyAlpha(color, opacity) : color);
+    }
+    return gradient;
+}
+/** `#rrggbb` + alpha → `rgba(...)`. Non-hex colours pass through unchanged. */
+function applyAlpha(color, alpha) {
+    const m = /^#([0-9a-f]{6})$/i.exec(color.trim());
+    if (!m)
+        return color;
+    const v = parseInt(m[1], 16);
+    return `rgba(${(v >> 16) & 255}, ${(v >> 8) & 255}, ${v & 255}, ${alpha})`;
+}
+//# sourceMappingURL=vnode-painter.js.map