@grafloria/element 0.3.20 → 0.3.21

package/src/libs/renderer/src/canvas/dirty-region.js

@@ -1,171 +0,0 @@
-"use strict";
-// dirty-region.ts — which part of the canvas actually has to be repainted.
-//
-// Retained-mode canvas rendering only beats immediate-mode redraw if a frame
-// that changed ONE node repaints roughly one node's worth of pixels. This module
-// is the part that decides that.
-//
-// HOW IT KNOWS WHAT CHANGED — for free, from the VNode contract:
-//
-//   `SVGRenderer` caches VNodes per entity and re-serves THE SAME OBJECT for a
-//   clean entity (that is the invariant `vnode/patch.ts` relies on to skip whole
-//   subtrees: `oldVNode === newVNode ⇒ nothing changed`). So the canvas backend
-//   gets change detection from object identity, exactly like the patcher does —
-//   no model diffing, no engine hooks, no dirty-flag plumbing of its own.
-//
-//   changed entity  → dirty rect = union(old bounds, new bounds)
-//   removed entity  → dirty rect = old bounds
-//   added entity    → dirty rect = new bounds
-//
-// Bounds of an UNCHANGED entity are never recomputed: they are carried over from
-// the previous frame, so a steady-state frame does no geometry work at all.
-//
-// A viewport / zoom / DPR / theme change invalidates everything — the whole
-// canvas is one big dirty rect, and the tracker says so by returning `null`.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DirtyRegionTracker = void 0;
-exports.mergeRects = mergeRects;
-exports.collectEntities = collectEntities;
-exports.previewIsActive = previewIsActive;
-const path_geometry_1 = require("./path-geometry");
-/**
- * Above this many changed entities, a partial repaint stops paying: the clip
- * setup and per-rect clearing cost more than just redrawing the frame. (A drag
- * over a 5k-node diagram changes 1–2 entities; a layout run changes all of them.)
- */
-const FULL_REDRAW_THRESHOLD = 64;
-/** Merge rects that overlap or nearly touch, so we don't clip 40 slivers. */
-function mergeRects(rects, slack = 8) {
-    if (rects.length <= 1)
-        return rects;
-    const out = [];
-    for (const rect of rects) {
-        const grown = {
-            minX: rect.minX - slack,
-            minY: rect.minY - slack,
-            maxX: rect.maxX + slack,
-            maxY: rect.maxY + slack,
-        };
-        let merged = false;
-        for (let i = 0; i < out.length; i++) {
-            if ((0, path_geometry_1.boundsIntersect)(out[i], grown)) {
-                out[i] = (0, path_geometry_1.boundsUnion)(out[i], rect);
-                merged = true;
-                break;
-            }
-        }
-        if (!merged)
-            out.push(Object.assign({}, rect));
-    }
-    // One more pass: the merges above can bring two output rects into contact.
-    if (out.length > 1 && out.length < rects.length)
-        return mergeRects(out, slack);
-    return out;
-}
-class DirtyRegionTracker {
-    constructor() {
-        this.prev = new Map();
-        this.forceFull = true;
-    }
-    /** Next frame repaints everything (camera moved, theme swapped, resized …). */
-    invalidateAll() {
-        this.forceFull = true;
-    }
-    /** Forget everything (a new diagram, or a disposed renderer). */
-    reset() {
-        this.prev.clear();
-        this.forceFull = true;
-    }
-    /**
-     * Diff this frame's entities against the last one.
-     *
-     * @param current  entity key → this frame's VNode.
-     * @param measure  computes an entity's world bounds. Called ONLY for entities
-     *                 whose VNode object actually changed — an unchanged entity is
-     *                 never measured at all.
-     */
-    diff(current, measure) {
-        var _a;
-        const changed = [];
-        const removed = [];
-        const rects = [];
-        const next = new Map();
-        for (const [key, vnode] of current) {
-            const before = this.prev.get(key);
-            // Identity: the SVG renderer re-serves the same VNode object for a clean
-            // entity, so this is a complete and exact change test.
-            if (before && before.vnode === vnode) {
-                next.set(key, before);
-                continue;
-            }
-            const bounds = measure(vnode);
-            next.set(key, { vnode, bounds });
-            changed.push(key);
-            const union = (0, path_geometry_1.boundsUnion)((_a = before === null || before === void 0 ? void 0 : before.bounds) !== null && _a !== void 0 ? _a : null, bounds);
-            if (union)
-                rects.push(union);
-        }
-        for (const [key, before] of this.prev) {
-            if (current.has(key))
-                continue;
-            removed.push(key);
-            if (before.bounds)
-                rects.push(before.bounds);
-        }
-        const wasForced = this.forceFull;
-        this.forceFull = false;
-        this.prev = next;
-        if (wasForced || changed.length + removed.length > FULL_REDRAW_THRESHOLD) {
-            return { rects: null, changed, removed };
-        }
-        return { rects: mergeRects(rects), changed, removed };
-    }
-    /** Bounds recorded for an entity on the last frame (testing / diagnostics). */
-    getBounds(key) {
-        var _a;
-        return (_a = this.prev.get(key)) === null || _a === void 0 ? void 0 : _a.bounds;
-    }
-    get size() {
-        return this.prev.size;
-    }
-}
-exports.DirtyRegionTracker = DirtyRegionTracker;
-/**
- * The top-level entities of a rendered tree: every keyed child of the links and
- * nodes layers. These are the units of change — the granularity at which the SVG
- * renderer caches, and therefore the granularity at which identity means
- * "unchanged".
- *
- * The connection-preview layer is deliberately NOT an entity: it exists only
- * mid-drag, changes every frame, and is handled by {@link previewIsActive}.
- */
-function collectEntities(root) {
-    var _a, _b;
-    const out = new Map();
-    for (const layer of (_a = root.children) !== null && _a !== void 0 ? _a : []) {
-        if (!layer || layer.type !== 'g')
-            continue;
-        if (layer.key !== 'links-layer' && layer.key !== 'nodes-layer')
-            continue;
-        for (const child of (_b = layer.children) !== null && _b !== void 0 ? _b : []) {
-            if (child === null || child === void 0 ? void 0 : child.key)
-                out.set(child.key, child);
-        }
-    }
-    return out;
-}
-/**
- * True when the tree carries a live connection / reconnection preview. It has no
- * stable identity and moves with the pointer, so any frame containing one is
- * repainted whole — the honest, correct answer, and it only happens mid-drag.
- */
-function previewIsActive(root) {
-    var _a, _b, _c;
-    for (const layer of (_a = root.children) !== null && _a !== void 0 ? _a : []) {
-        if ((layer === null || layer === void 0 ? void 0 : layer.key) === 'connection-preview-layer') {
-            return ((_c = (_b = layer.children) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0;
-        }
-    }
-    return false;
-}
-//# sourceMappingURL=dirty-region.js.map

package/src/libs/renderer/src/canvas/index.d.ts

@@ -1,16 +0,0 @@
-export { CanvasRenderer, parseViewBox } from './canvas-renderer';
-export type { CanvasFrameStats, CanvasLike, CanvasPick, CanvasRendererOptions, } from './canvas-renderer';
-export { DiagramRenderBackend } from './render-backend';
-export type { BackendMode, CanvasRefusedEvent, RenderBackendOptions } from './render-backend';
-export { ALWAYS_SAFE_MODE, canvasSafety, explainHazards } from './tier-policy';
-export type { CanvasHazard, CanvasSafety, CanvasSafetyInput } from './tier-policy';
-export { CANVAS_LINK_HIT_TOLERANCE, VNodePainter, collectDefinitions, colorKeyFromPixel, entityOf, geometryOf, nextColorKey, textLines, } from './vnode-painter';
-export type { EntityScope, HitKind, HitRecord, PaintOptions, PaintResult, TextLine, } from './vnode-painter';
-export { CanvasStyleResolver, INHERITED_DEFAULTS, classListOf, fontString, parseDashArray, parseInlineStyle, readCssVarOverrides, textAlignFor, textBaselineFor, toNumber, } from './style-resolution';
-export type { ComputedStyle, StyleResolverOptions } from './style-resolution';
-export { NULL_CONTEXT, RecordingContext2D } from './canvas-context';
-export type { Canvas2DLike, DrawCall } from './canvas-context';
-export { DirtyRegionTracker, collectEntities, mergeRects, previewIsActive, } from './dirty-region';
-export type { DirtyDiff, EntitySnapshot } from './dirty-region';
-export { IDENTITY, applyMatrix, arcToCubics, boundsIntersect, boundsUnion, circlePath, distanceToPath, distanceToSegment, ellipsePath, flattenPath, linePath, multiply, padBounds, parsePath, parseTransform, pathBounds, pointInPath, polyPath, rectPath, rotation, scaling, transformCmds, translation, } from './path-geometry';
-export type { Bounds, Matrix, PathCmd, SubPath } from './path-geometry';

package/src/libs/renderer/src/canvas/index.js

@@ -1,79 +0,0 @@
-"use strict";
-// Canvas 2D backend — the second consumer of the VNode tree.
-//
-// `svg/svg-renderer.ts` PRODUCES the tree; `vnode/patch.ts` turns it into SVG
-// DOM; this turns it into Canvas 2D draw calls, with colour-keyed hit-testing,
-// devicePixelRatio scaling and dirty-rectangle partial redraw. `render-backend.ts`
-// lets one live diagram switch between the two.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.rotation = exports.rectPath = exports.polyPath = exports.pointInPath = exports.pathBounds = exports.parseTransform = exports.parsePath = exports.padBounds = exports.multiply = exports.linePath = exports.flattenPath = exports.ellipsePath = exports.distanceToSegment = exports.distanceToPath = exports.circlePath = exports.boundsUnion = exports.boundsIntersect = exports.arcToCubics = exports.applyMatrix = exports.IDENTITY = exports.previewIsActive = exports.mergeRects = exports.collectEntities = exports.DirtyRegionTracker = exports.RecordingContext2D = exports.NULL_CONTEXT = exports.toNumber = exports.textBaselineFor = exports.textAlignFor = exports.readCssVarOverrides = exports.parseInlineStyle = exports.parseDashArray = exports.fontString = exports.classListOf = exports.INHERITED_DEFAULTS = exports.CanvasStyleResolver = exports.textLines = exports.nextColorKey = exports.geometryOf = exports.entityOf = exports.colorKeyFromPixel = exports.collectDefinitions = exports.VNodePainter = exports.CANVAS_LINK_HIT_TOLERANCE = exports.explainHazards = exports.canvasSafety = exports.ALWAYS_SAFE_MODE = exports.DiagramRenderBackend = exports.parseViewBox = exports.CanvasRenderer = void 0;
-exports.translation = exports.transformCmds = exports.scaling = void 0;
-var canvas_renderer_1 = require("./canvas-renderer");
-Object.defineProperty(exports, "CanvasRenderer", { enumerable: true, get: function () { return canvas_renderer_1.CanvasRenderer; } });
-Object.defineProperty(exports, "parseViewBox", { enumerable: true, get: function () { return canvas_renderer_1.parseViewBox; } });
-var render_backend_1 = require("./render-backend");
-Object.defineProperty(exports, "DiagramRenderBackend", { enumerable: true, get: function () { return render_backend_1.DiagramRenderBackend; } });
-// Wave 8 (Card 5): what a switch to canvas would COST this diagram.
-//
-// The automatic far-zoom tier the card asked for was built, measured and deleted — the
-// numbers are in the header of `tier-policy.ts`. What survives is not a perf switch but a
-// safety check on the switch that has existed since wave 4: canvas mode has no
-// accessibility semantics, cannot paint HTML nodes, and drops DOM focus, and until now it
-// would do all three without a word.
-var tier_policy_1 = require("./tier-policy");
-Object.defineProperty(exports, "ALWAYS_SAFE_MODE", { enumerable: true, get: function () { return tier_policy_1.ALWAYS_SAFE_MODE; } });
-Object.defineProperty(exports, "canvasSafety", { enumerable: true, get: function () { return tier_policy_1.canvasSafety; } });
-Object.defineProperty(exports, "explainHazards", { enumerable: true, get: function () { return tier_policy_1.explainHazards; } });
-var vnode_painter_1 = require("./vnode-painter");
-Object.defineProperty(exports, "CANVAS_LINK_HIT_TOLERANCE", { enumerable: true, get: function () { return vnode_painter_1.CANVAS_LINK_HIT_TOLERANCE; } });
-Object.defineProperty(exports, "VNodePainter", { enumerable: true, get: function () { return vnode_painter_1.VNodePainter; } });
-Object.defineProperty(exports, "collectDefinitions", { enumerable: true, get: function () { return vnode_painter_1.collectDefinitions; } });
-Object.defineProperty(exports, "colorKeyFromPixel", { enumerable: true, get: function () { return vnode_painter_1.colorKeyFromPixel; } });
-Object.defineProperty(exports, "entityOf", { enumerable: true, get: function () { return vnode_painter_1.entityOf; } });
-Object.defineProperty(exports, "geometryOf", { enumerable: true, get: function () { return vnode_painter_1.geometryOf; } });
-Object.defineProperty(exports, "nextColorKey", { enumerable: true, get: function () { return vnode_painter_1.nextColorKey; } });
-Object.defineProperty(exports, "textLines", { enumerable: true, get: function () { return vnode_painter_1.textLines; } });
-var style_resolution_1 = require("./style-resolution");
-Object.defineProperty(exports, "CanvasStyleResolver", { enumerable: true, get: function () { return style_resolution_1.CanvasStyleResolver; } });
-Object.defineProperty(exports, "INHERITED_DEFAULTS", { enumerable: true, get: function () { return style_resolution_1.INHERITED_DEFAULTS; } });
-Object.defineProperty(exports, "classListOf", { enumerable: true, get: function () { return style_resolution_1.classListOf; } });
-Object.defineProperty(exports, "fontString", { enumerable: true, get: function () { return style_resolution_1.fontString; } });
-Object.defineProperty(exports, "parseDashArray", { enumerable: true, get: function () { return style_resolution_1.parseDashArray; } });
-Object.defineProperty(exports, "parseInlineStyle", { enumerable: true, get: function () { return style_resolution_1.parseInlineStyle; } });
-Object.defineProperty(exports, "readCssVarOverrides", { enumerable: true, get: function () { return style_resolution_1.readCssVarOverrides; } });
-Object.defineProperty(exports, "textAlignFor", { enumerable: true, get: function () { return style_resolution_1.textAlignFor; } });
-Object.defineProperty(exports, "textBaselineFor", { enumerable: true, get: function () { return style_resolution_1.textBaselineFor; } });
-Object.defineProperty(exports, "toNumber", { enumerable: true, get: function () { return style_resolution_1.toNumber; } });
-var canvas_context_1 = require("./canvas-context");
-Object.defineProperty(exports, "NULL_CONTEXT", { enumerable: true, get: function () { return canvas_context_1.NULL_CONTEXT; } });
-Object.defineProperty(exports, "RecordingContext2D", { enumerable: true, get: function () { return canvas_context_1.RecordingContext2D; } });
-var dirty_region_1 = require("./dirty-region");
-Object.defineProperty(exports, "DirtyRegionTracker", { enumerable: true, get: function () { return dirty_region_1.DirtyRegionTracker; } });
-Object.defineProperty(exports, "collectEntities", { enumerable: true, get: function () { return dirty_region_1.collectEntities; } });
-Object.defineProperty(exports, "mergeRects", { enumerable: true, get: function () { return dirty_region_1.mergeRects; } });
-Object.defineProperty(exports, "previewIsActive", { enumerable: true, get: function () { return dirty_region_1.previewIsActive; } });
-var path_geometry_1 = require("./path-geometry");
-Object.defineProperty(exports, "IDENTITY", { enumerable: true, get: function () { return path_geometry_1.IDENTITY; } });
-Object.defineProperty(exports, "applyMatrix", { enumerable: true, get: function () { return path_geometry_1.applyMatrix; } });
-Object.defineProperty(exports, "arcToCubics", { enumerable: true, get: function () { return path_geometry_1.arcToCubics; } });
-Object.defineProperty(exports, "boundsIntersect", { enumerable: true, get: function () { return path_geometry_1.boundsIntersect; } });
-Object.defineProperty(exports, "boundsUnion", { enumerable: true, get: function () { return path_geometry_1.boundsUnion; } });
-Object.defineProperty(exports, "circlePath", { enumerable: true, get: function () { return path_geometry_1.circlePath; } });
-Object.defineProperty(exports, "distanceToPath", { enumerable: true, get: function () { return path_geometry_1.distanceToPath; } });
-Object.defineProperty(exports, "distanceToSegment", { enumerable: true, get: function () { return path_geometry_1.distanceToSegment; } });
-Object.defineProperty(exports, "ellipsePath", { enumerable: true, get: function () { return path_geometry_1.ellipsePath; } });
-Object.defineProperty(exports, "flattenPath", { enumerable: true, get: function () { return path_geometry_1.flattenPath; } });
-Object.defineProperty(exports, "linePath", { enumerable: true, get: function () { return path_geometry_1.linePath; } });
-Object.defineProperty(exports, "multiply", { enumerable: true, get: function () { return path_geometry_1.multiply; } });
-Object.defineProperty(exports, "padBounds", { enumerable: true, get: function () { return path_geometry_1.padBounds; } });
-Object.defineProperty(exports, "parsePath", { enumerable: true, get: function () { return path_geometry_1.parsePath; } });
-Object.defineProperty(exports, "parseTransform", { enumerable: true, get: function () { return path_geometry_1.parseTransform; } });
-Object.defineProperty(exports, "pathBounds", { enumerable: true, get: function () { return path_geometry_1.pathBounds; } });
-Object.defineProperty(exports, "pointInPath", { enumerable: true, get: function () { return path_geometry_1.pointInPath; } });
-Object.defineProperty(exports, "polyPath", { enumerable: true, get: function () { return path_geometry_1.polyPath; } });
-Object.defineProperty(exports, "rectPath", { enumerable: true, get: function () { return path_geometry_1.rectPath; } });
-Object.defineProperty(exports, "rotation", { enumerable: true, get: function () { return path_geometry_1.rotation; } });
-Object.defineProperty(exports, "scaling", { enumerable: true, get: function () { return path_geometry_1.scaling; } });
-Object.defineProperty(exports, "transformCmds", { enumerable: true, get: function () { return path_geometry_1.transformCmds; } });
-Object.defineProperty(exports, "translation", { enumerable: true, get: function () { return path_geometry_1.translation; } });
-//# sourceMappingURL=index.js.map

package/src/libs/renderer/src/canvas/path-geometry.d.ts

@@ -1,112 +0,0 @@
-export type PathCmd = {
-    op: 'M';
-    x: number;
-    y: number;
-} | {
-    op: 'L';
-    x: number;
-    y: number;
-} | {
-    op: 'C';
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-    x: number;
-    y: number;
-} | {
-    op: 'Q';
-    x1: number;
-    y1: number;
-    x: number;
-    y: number;
-} | {
-    op: 'Z';
-};
-/** A 2D affine transform, in the order a canvas `setTransform(a,b,c,d,e,f)` takes. */
-export interface Matrix {
-    a: number;
-    b: number;
-    c: number;
-    d: number;
-    e: number;
-    f: number;
-}
-export interface Point {
-    x: number;
-    y: number;
-}
-export interface Bounds {
-    minX: number;
-    minY: number;
-    maxX: number;
-    maxY: number;
-}
-export declare const IDENTITY: Matrix;
-/** `m1 · m2` — apply m2 FIRST, then m1 (the SVG/canvas nesting convention). */
-export declare function multiply(m1: Matrix, m2: Matrix): Matrix;
-export declare function applyMatrix(m: Matrix, p: Point): Point;
-export declare function translation(dx: number, dy: number): Matrix;
-export declare function scaling(sx: number, sy?: number): Matrix;
-export declare function rotation(degrees: number, cx?: number, cy?: number): Matrix;
-/**
- * Parse an SVG `transform` attribute into a matrix.
- *
- * Supports the forms the renderer actually emits — translate / rotate / scale /
- * matrix — composed left-to-right, exactly as SVG composes them. An
- * unrecognised function is skipped rather than throwing: a transform we cannot
- * read must not take the whole frame down.
- */
-export declare function parseTransform(transform: string | undefined | null): Matrix;
-/** Axis-aligned rectangle, with optional (possibly asymmetric) corner radii. */
-export declare function rectPath(x: number, y: number, width: number, height: number, rx?: number, ry?: number): PathCmd[];
-/** Ellipse centred at (cx, cy) as four cubic segments. */
-export declare function ellipsePath(cx: number, cy: number, rx: number, ry: number): PathCmd[];
-export declare function circlePath(cx: number, cy: number, r: number): PathCmd[];
-export declare function linePath(x1: number, y1: number, x2: number, y2: number): PathCmd[];
-/** `points="1,2 3,4"` (or `1 2 3 4`) → a polyline / polygon command list. */
-export declare function polyPath(points: string | undefined, close: boolean): PathCmd[];
-/**
- * Parse an SVG path `d` string into {@link PathCmd}s.
- *
- * Full command coverage (M m L l H h V v C c S s Q q T t A a Z z) including
- * implicit repeated coordinate sets ("M 0 0 10 10" ⇒ moveto + lineto) and the
- * smooth-curve reflection rules. Arcs are converted to cubics.
- *
- * Written by hand rather than leaned on the DOM (`SVGPathElement`) so it works
- * headlessly — in Node, in a worker, in a test — which is exactly where the
- * canvas backend has to be provable.
- */
-export declare function parsePath(d: string | undefined | null): PathCmd[];
-/**
- * SVG elliptical arc → cubic béziers (endpoint→centre parameterisation, SVG 1.1
- * appendix F.6). Used by `A` path commands — the actor shape's head, cylinder
- * caps, jump-point arcs.
- */
-export declare function arcToCubics(x1: number, y1: number, rx: number, ry: number, rotationDeg: number, largeArc: boolean, sweep: boolean, x2: number, y2: number): PathCmd[];
-/** One flattened sub-path: a polyline, plus whether it was explicitly closed. */
-export interface SubPath {
-    points: Point[];
-    closed: boolean;
-}
-/**
- * Flatten a command list into polylines. `steps` controls curve subdivision —
- * 16 segments per curve keeps the deviation well under a pixel for the curve
- * sizes a diagram draws, and hit-testing only ever needs "within tolerance".
- */
-export declare function flattenPath(cmds: PathCmd[], steps?: number): SubPath[];
-export declare function transformCmds(cmds: PathCmd[], m: Matrix): PathCmd[];
-/** Bounding box of the flattened path. `null` for an empty path. */
-export declare function pathBounds(cmds: PathCmd[]): Bounds | null;
-/**
- * Non-zero-winding point-in-path — the same fill rule a 2D context uses by
- * default, so "is this point inside the filled shape?" answers identically to
- * "did the fill put a pixel here?".
- */
-export declare function pointInPath(cmds: PathCmd[], p: Point): boolean;
-/** Shortest distance from `p` to the path's outline (open OR closed). */
-export declare function distanceToPath(cmds: PathCmd[], p: Point): number;
-export declare function distanceToSegment(p: Point, a: Point, b: Point): number;
-export declare function boundsUnion(a: Bounds | null, b: Bounds | null): Bounds | null;
-export declare function boundsIntersect(a: Bounds, b: Bounds): boolean;
-export declare function padBounds(b: Bounds, pad: number): Bounds;