@grafloria/element 0.3.20 → 0.3.21

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

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