@llc3233149/core 0.9.0

package/dist/renderer/renderer.js

@@ -0,0 +1,909 @@
+import { SELECTION_COLOR, COMPONENT_COLOR, SNAP_COLOR, CANVAS_BG_COLOR, PEN_PATH_STROKE_WIDTH, PARENT_OUTLINE_ALPHA, PARENT_OUTLINE_DASH, DEFAULT_FONT_SIZE, LABEL_FONT_SIZE, LABEL_OFFSET_Y, SIZE_FONT_SIZE, SECTION_TITLE_FONT_SIZE, SECTION_TITLE_HEIGHT, SECTION_TITLE_PADDING_X, SECTION_TITLE_GAP, COMPONENT_SET_DASH, COMPONENT_SET_DASH_GAP, COMPONENT_SET_BORDER_WIDTH, COMPONENT_LABEL_FONT_SIZE, COMPONENT_LABEL_GAP, COMPONENT_LABEL_ICON_SIZE, COMPONENT_LABEL_ICON_GAP, RULER_BG_COLOR, RULER_TICK_COLOR, RULER_TEXT_COLOR, DEFAULT_FONT_FAMILY } from '../constants.js';
+import { isFontLoaded, getCJKFallbackFamily } from '../fonts.js';
+import { RenderProfiler } from '../profiler.js';
+import { drawHoverHighlight as drawHoverHighlightFn, drawSelection as drawSelectionFn, drawNodeSelection as drawNodeSelectionFn, drawSelectionLabels as drawSelectionLabelsFn, drawParentFrameOutlines as drawParentFrameOutlinesFn, drawNodeOutline as drawNodeOutlineFn, drawGroupBounds as drawGroupBoundsFn, getRotatedCorners as getRotatedCornersFn, drawHandle as drawHandleFn, drawSnapGuides as drawSnapGuidesFn, drawMarquee as drawMarqueeFn, drawFlashes as drawFlashesFn, drawLayoutInsertIndicator as drawLayoutInsertIndicatorFn, drawTextEditOverlay as drawTextEditOverlayFn, drawPenOverlay as drawPenOverlayFn, drawRemoteCursors as drawRemoteCursorsFn, drawMeasurements as drawMeasurementsFn, drawPaddingOverlay as drawPaddingOverlayFn } from './overlays.js';
+import { drawRulers as drawRulersFn } from './rulers.js';
+import { drawSectionTitles as drawSectionTitlesFn, drawComponentLabels as drawComponentLabelsFn } from './labels.js';
+import { LabelCache } from './label-cache.js';
+import { LRUCache } from './lru-cache.js';
+import { renderNode as renderNodeFn, renderSection as renderSectionFn, renderComponentSet as renderComponentSetFn, renderShape as renderShapeFn, renderShapeUncached as renderShapeUncachedFn, renderEffects as renderEffectsFn, renderText as renderTextFn } from './scene.js';
+import { drawNodeFill as drawNodeFillFn, applyFill as applyFillFn, applyGradientFill as applyGradientFillFn, applyImageFill as applyImageFillFn, drawArc as drawArcFn } from './fills.js';
+import { drawNodeStroke as drawNodeStrokeFn, drawStrokeWithAlign as drawStrokeWithAlignFn, drawRRectStrokeWithAlign as drawRRectStrokeWithAlignFn, drawIndividualSideStrokes as drawIndividualSideStrokesFn, strokeNodeShape as strokeNodeShapeFn } from './strokes.js';
+import { makeNodeShapePath as makeNodeShapePathFn, makePolygonPath as makePolygonPathFn, makeRRect as makeRRectFn, makeRRectWithSpread as makeRRectWithSpreadFn, makeRRectWithOffset as makeRRectWithOffsetFn, clipNodeShape as clipNodeShapeFn, getVectorPaths as getVectorPathsFn, getFillGeometry as getFillGeometryFn, getStrokeGeometry as getStrokeGeometryFn } from './shapes.js';
+import { getCachedDropShadow as getCachedDropShadowFn, getCachedBlur as getCachedBlurFn, getCachedDecalBlur as getCachedDecalBlurFn, getCachedMaskBlur as getCachedMaskBlurFn, applyClippedBlur as applyClippedBlurFn } from './effects.js';
+export class SkiaRenderer {
+    ck;
+    surface;
+    fillPaint;
+    strokePaint;
+    selectionPaint;
+    parentOutlinePaint;
+    snapPaint;
+    auxFill;
+    auxStroke;
+    opacityPaint;
+    effectLayerPaint;
+    imageFilterCache = new Map();
+    maskFilterCache = new Map();
+    _tmpColor = new Float32Array(4);
+    _tmpRect = new Float32Array(4);
+    textFont = null;
+    labelFont = null;
+    sizeFont = null;
+    sectionTitleFont = null;
+    componentLabelFont = null;
+    fontMgr = null;
+    fontProvider = null;
+    fontsLoaded = false;
+    imageCache = new LRUCache(512, (img) => img.delete());
+    vectorPathCache = new LRUCache(512, (paths) => { for (const p of paths)
+        p.delete(); });
+    fillGeometryCache = new LRUCache(512, (paths) => { for (const p of paths)
+        p.delete(); });
+    strokeGeometryCache = new LRUCache(512, (paths) => { for (const p of paths)
+        p.delete(); });
+    scenePicture = null;
+    scenePictureVersion = -1;
+    scenePicturePageId = null;
+    nodePictureCache = new LRUCache(512, (pic) => pic.delete());
+    labelCache = new LabelCache();
+    profiler;
+    rulerBgPaint;
+    rulerTickPaint;
+    rulerTextPaint;
+    rulerHlPaint;
+    rulerBadgePaint;
+    rulerLabelPaint;
+    penPathPaint;
+    penHandlePaint;
+    penVertexFill;
+    penVertexStroke;
+    panX = 0;
+    panY = 0;
+    zoom = 1;
+    dpr = 1;
+    viewportWidth = 0;
+    viewportHeight = 0;
+    showRulers = true;
+    pageColor = CANVAS_BG_COLOR;
+    pageId = null;
+    worldViewport = { x: 0, y: 0, w: 0, h: 0 };
+    _nodeCount = 0;
+    _culledCount = 0;
+    _flashes = [];
+    _flashPaint = null;
+    DEFAULT_FONT_SIZE = DEFAULT_FONT_SIZE;
+    COMPONENT_SET_BORDER_WIDTH = COMPONENT_SET_BORDER_WIDTH;
+    COMPONENT_SET_DASH = COMPONENT_SET_DASH;
+    COMPONENT_SET_DASH_GAP = COMPONENT_SET_DASH_GAP;
+    /**
+     * Returns a shared Float32Array [r, g, b, a] for passing colors to CanvasKit.
+     * WARNING: The returned buffer is reused on every call. Callers must consume
+     * the value immediately (pass it to a CanvasKit API) before the next call to
+     * color4f(), as the underlying data will be overwritten.
+     */
+    color4f(r, g, b, a) {
+        const c = this._tmpColor;
+        c[0] = r;
+        c[1] = g;
+        c[2] = b;
+        c[3] = a;
+        return c;
+    }
+    /**
+     * Returns a shared Float32Array [left, top, right, bottom] for passing rects to CanvasKit.
+     * WARNING: The returned buffer is reused on every call. Callers must consume
+     * the value immediately (pass it to a CanvasKit API) before the next call to
+     * ltrb(), as the underlying data will be overwritten.
+     */
+    ltrb(l, t, r, b) {
+        const rc = this._tmpRect;
+        rc[0] = l;
+        rc[1] = t;
+        rc[2] = r;
+        rc[3] = b;
+        return rc;
+    }
+    selColor(alpha = 1) {
+        return this.ck.Color4f(SELECTION_COLOR.r, SELECTION_COLOR.g, SELECTION_COLOR.b, alpha);
+    }
+    compColor(alpha = 1) {
+        return this.ck.Color4f(COMPONENT_COLOR.r, COMPONENT_COLOR.g, COMPONENT_COLOR.b, alpha);
+    }
+    isComponentType(type) {
+        return type === 'COMPONENT' || type === 'COMPONENT_SET' || type === 'INSTANCE';
+    }
+    isRectangularType(type) {
+        return (type === 'FRAME' ||
+            type === 'RECTANGLE' ||
+            type === 'ROUNDED_RECTANGLE' ||
+            type === 'COMPONENT' ||
+            type === 'INSTANCE' ||
+            type === 'SECTION' ||
+            type === 'GROUP');
+    }
+    effectOverflow(node) {
+        let expand = 0;
+        for (const e of node.effects) {
+            if (!e.visible)
+                continue;
+            const blur = e.radius;
+            const spread = e.spread;
+            const ox = Math.abs(e.offset.x);
+            const oy = Math.abs(e.offset.y);
+            expand = Math.max(expand, blur + spread + ox, blur + spread + oy);
+        }
+        return expand;
+    }
+    constructor(ck, surface, gl) {
+        this.ck = ck;
+        this.surface = surface;
+        this.profiler = new RenderProfiler(ck, gl ?? null);
+        this.fillPaint = new ck.Paint();
+        this.fillPaint.setStyle(ck.PaintStyle.Fill);
+        this.fillPaint.setAntiAlias(true);
+        this.strokePaint = new ck.Paint();
+        this.strokePaint.setStyle(ck.PaintStyle.Stroke);
+        this.strokePaint.setAntiAlias(true);
+        this.selectionPaint = new ck.Paint();
+        this.selectionPaint.setStyle(ck.PaintStyle.Stroke);
+        this.selectionPaint.setStrokeWidth(1);
+        this.selectionPaint.setColor(this.selColor());
+        this.selectionPaint.setAntiAlias(true);
+        this.parentOutlinePaint = new ck.Paint();
+        this.parentOutlinePaint.setStyle(ck.PaintStyle.Stroke);
+        this.parentOutlinePaint.setStrokeWidth(1);
+        this.parentOutlinePaint.setColor(this.selColor(PARENT_OUTLINE_ALPHA));
+        this.parentOutlinePaint.setAntiAlias(true);
+        this.parentOutlinePaint.setPathEffect(ck.PathEffect.MakeDash([PARENT_OUTLINE_DASH, PARENT_OUTLINE_DASH], 0));
+        this.snapPaint = new ck.Paint();
+        this.snapPaint.setStyle(ck.PaintStyle.Stroke);
+        this.snapPaint.setStrokeWidth(1);
+        this.snapPaint.setColor(this.ck.Color4f(SNAP_COLOR.r, SNAP_COLOR.g, SNAP_COLOR.b, 1));
+        this.snapPaint.setAntiAlias(true);
+        this.auxFill = new ck.Paint();
+        this.auxFill.setStyle(ck.PaintStyle.Fill);
+        this.auxFill.setAntiAlias(true);
+        this.auxStroke = new ck.Paint();
+        this.auxStroke.setStyle(ck.PaintStyle.Stroke);
+        this.auxStroke.setAntiAlias(true);
+        this.opacityPaint = new ck.Paint();
+        this.effectLayerPaint = new ck.Paint();
+        this.textFont = new ck.Font(null, DEFAULT_FONT_SIZE);
+        const bg = RULER_BG_COLOR;
+        this.rulerBgPaint = new ck.Paint();
+        this.rulerBgPaint.setColor(ck.Color4f(bg.r, bg.g, bg.b, 1));
+        this.rulerTickPaint = new ck.Paint();
+        this.rulerTickPaint.setColor(ck.Color4f(RULER_TICK_COLOR.r, RULER_TICK_COLOR.g, RULER_TICK_COLOR.b, 1));
+        this.rulerTickPaint.setStrokeWidth(1);
+        this.rulerTickPaint.setAntiAlias(true);
+        const tc = RULER_TEXT_COLOR;
+        this.rulerTextPaint = new ck.Paint();
+        this.rulerTextPaint.setColor(ck.Color4f(tc.r, tc.g, tc.b, 1));
+        this.rulerTextPaint.setAntiAlias(true);
+        this.rulerHlPaint = new ck.Paint();
+        this.rulerHlPaint.setAntiAlias(true);
+        this.rulerBadgePaint = new ck.Paint();
+        this.rulerBadgePaint.setAntiAlias(true);
+        this.rulerLabelPaint = new ck.Paint();
+        this.rulerLabelPaint.setColor(ck.Color4f(1, 1, 1, 1));
+        this.rulerLabelPaint.setAntiAlias(true);
+        this.penPathPaint = new ck.Paint();
+        this.penPathPaint.setStyle(ck.PaintStyle.Stroke);
+        this.penPathPaint.setStrokeWidth(PEN_PATH_STROKE_WIDTH);
+        this.penPathPaint.setColor(this.selColor());
+        this.penPathPaint.setAntiAlias(true);
+        this.penHandlePaint = new ck.Paint();
+        this.penHandlePaint.setStyle(ck.PaintStyle.Stroke);
+        this.penHandlePaint.setStrokeWidth(1);
+        this.penHandlePaint.setColor(this.selColor(PARENT_OUTLINE_ALPHA));
+        this.penHandlePaint.setAntiAlias(true);
+        this.penVertexFill = new ck.Paint();
+        this.penVertexFill.setStyle(ck.PaintStyle.Fill);
+        this.penVertexFill.setColor(ck.WHITE);
+        this.penVertexFill.setAntiAlias(true);
+        this.penVertexStroke = new ck.Paint();
+        this.penVertexStroke.setStyle(ck.PaintStyle.Stroke);
+        this.penVertexStroke.setStrokeWidth(PEN_PATH_STROKE_WIDTH);
+        this.penVertexStroke.setColor(this.selColor());
+        this.penVertexStroke.setAntiAlias(true);
+    }
+    getFontProvider() {
+        return this.fontProvider;
+    }
+    async loadFonts() {
+        this.fontProvider = this.ck.TypefaceFontProvider.Make();
+        const { initFontService, loadFont, ensureCJKFallback } = await import('../fonts');
+        initFontService(this.ck, this.fontProvider);
+        const fontData = await loadFont(DEFAULT_FONT_FAMILY, 'Regular');
+        if (fontData) {
+            const typeface = this.ck.Typeface.MakeFreeTypeFaceFromData(fontData);
+            if (typeface) {
+                this.textFont?.delete();
+                this.labelFont?.delete();
+                this.sizeFont?.delete();
+                this.sectionTitleFont?.delete();
+                this.componentLabelFont?.delete();
+                this.textFont = new this.ck.Font(typeface, DEFAULT_FONT_SIZE);
+                this.labelFont = new this.ck.Font(typeface, LABEL_FONT_SIZE);
+                this.sizeFont = new this.ck.Font(typeface, SIZE_FONT_SIZE);
+                this.sectionTitleFont = new this.ck.Font(typeface, SECTION_TITLE_FONT_SIZE);
+                this.componentLabelFont = new this.ck.Font(typeface, COMPONENT_LABEL_FONT_SIZE);
+                this.profiler.setTypeface(typeface);
+            }
+            this.fontMgr = this.ck.FontMgr.FromData(fontData) ?? null;
+        }
+        this.fontsLoaded = true;
+        this.invalidateAllPictures();
+        void ensureCJKFallback().then((family) => {
+            if (family)
+                this.invalidateAllPictures();
+        });
+    }
+    replaceSurface(surface) {
+        this.surface.delete();
+        this.surface = surface;
+        this.invalidateScenePicture();
+    }
+    invalidateScenePicture() {
+        this.scenePicture?.delete();
+        this.scenePicture = null;
+        this.scenePictureVersion = -1;
+    }
+    invalidateAllPictures() {
+        this.invalidateScenePicture();
+        this.nodePictureCache.clear();
+    }
+    invalidateNodePicture(nodeId) {
+        this.nodePictureCache.delete(nodeId);
+    }
+    flashNode(nodeId) {
+        this._flashes.push({ nodeId, startTime: performance.now() });
+    }
+    get hasActiveFlashes() {
+        return this._flashes.length > 0;
+    }
+    hitTestSectionTitle(graph, canvasX, canvasY) {
+        if (!this.sectionTitleFont)
+            return null;
+        const pageNode = graph.getNode(this.pageId ?? graph.rootId);
+        if (!pageNode)
+            return null;
+        const font = this.sectionTitleFont;
+        let result = null;
+        const check = (parentId, ox, oy, insideSection) => {
+            const parent = graph.getNode(parentId);
+            if (!parent)
+                return;
+            for (let i = parent.childIds.length - 1; i >= 0; i--) {
+                if (result)
+                    return;
+                const childId = parent.childIds[i];
+                const child = graph.getNode(childId);
+                if (!child || !child.visible)
+                    continue;
+                const ax = ox + child.x;
+                const ay = oy + child.y;
+                if (child.type === 'SECTION') {
+                    const glyphIds = font.getGlyphIDs(child.name);
+                    const widths = font.getGlyphWidths(glyphIds);
+                    let textW = 0;
+                    for (const w of widths)
+                        textW += w;
+                    const pillW = Math.min(textW + SECTION_TITLE_PADDING_X * 2, child.width * this.zoom) / this.zoom;
+                    const pillH = SECTION_TITLE_HEIGHT / this.zoom;
+                    const gap = SECTION_TITLE_GAP / this.zoom;
+                    let pillX = ax;
+                    let pillY;
+                    if (insideSection) {
+                        pillY = ay + gap;
+                    }
+                    else {
+                        pillY = ay - pillH - gap;
+                    }
+                    if (canvasX >= pillX &&
+                        canvasX <= pillX + pillW &&
+                        canvasY >= pillY &&
+                        canvasY <= pillY + pillH) {
+                        result = child;
+                        return;
+                    }
+                    check(childId, ax, ay, true);
+                }
+                else if (child.childIds.length > 0) {
+                    check(childId, ax, ay, insideSection);
+                }
+            }
+        };
+        check(pageNode.id, 0, 0, false);
+        return result;
+    }
+    hitTestComponentLabel(graph, canvasX, canvasY) {
+        if (!this.componentLabelFont)
+            return null;
+        const pageNode = graph.getNode(this.pageId ?? graph.rootId);
+        if (!pageNode)
+            return null;
+        const font = this.componentLabelFont;
+        const LABEL_TYPES = new Set(['COMPONENT', 'COMPONENT_SET']);
+        let result = null;
+        const check = (parentId, ox, oy) => {
+            const parent = graph.getNode(parentId);
+            if (!parent)
+                return;
+            for (let i = parent.childIds.length - 1; i >= 0; i--) {
+                if (result)
+                    return;
+                const childId = parent.childIds[i];
+                const child = graph.getNode(childId);
+                if (!child || !child.visible)
+                    continue;
+                const ax = ox + child.x;
+                const ay = oy + child.y;
+                if (LABEL_TYPES.has(child.type)) {
+                    const glyphIds = font.getGlyphIDs(child.name);
+                    const widths = font.getGlyphWidths(glyphIds);
+                    let textW = 0;
+                    for (const w of widths)
+                        textW += w;
+                    const labelW = (COMPONENT_LABEL_ICON_SIZE + COMPONENT_LABEL_ICON_GAP + textW) / this.zoom;
+                    const labelH = COMPONENT_LABEL_FONT_SIZE / this.zoom;
+                    const gap = COMPONENT_LABEL_GAP / this.zoom;
+                    const isInsideSet = parent.type === 'COMPONENT_SET';
+                    const labelX = ax;
+                    let labelY;
+                    if (isInsideSet) {
+                        labelY = ay + gap;
+                    }
+                    else {
+                        labelY = ay - labelH - gap;
+                    }
+                    if (canvasX >= labelX &&
+                        canvasX <= labelX + labelW &&
+                        canvasY >= labelY &&
+                        canvasY <= labelY + labelH) {
+                        result = child;
+                        return;
+                    }
+                }
+                if (child.childIds.length > 0) {
+                    check(childId, ax, ay);
+                }
+            }
+        };
+        check(pageNode.id, 0, 0);
+        return result;
+    }
+    hitTestFrameTitle(graph, canvasX, canvasY, selectedIds) {
+        if (!this.labelFont || selectedIds.size !== 1)
+            return null;
+        const id = [...selectedIds][0];
+        const node = graph.getNode(id);
+        if (node?.type !== 'FRAME')
+            return null;
+        const parent = node.parentId ? graph.getNode(node.parentId) : null;
+        const isTopLevel = !parent || parent.type === 'CANVAS' || parent.type === 'SECTION';
+        if (!isTopLevel)
+            return null;
+        const abs = graph.getAbsolutePosition(id);
+        const font = this.labelFont;
+        const glyphIds = font.getGlyphIDs(node.name);
+        const widths = font.getGlyphWidths(glyphIds);
+        let textW = 0;
+        for (const w of widths)
+            textW += w;
+        const labelW = textW / this.zoom;
+        const labelH = LABEL_FONT_SIZE / this.zoom;
+        const gap = LABEL_OFFSET_Y / this.zoom;
+        const labelX = abs.x;
+        const labelY = abs.y - gap - labelH;
+        if (canvasX >= labelX &&
+            canvasX <= labelX + labelW &&
+            canvasY >= labelY &&
+            canvasY <= labelY + labelH) {
+            return node;
+        }
+        return null;
+    }
+    renderSceneToCanvas(canvas, graph, pageId) {
+        const prevViewport = this.worldViewport;
+        this.worldViewport = { x: -1e9, y: -1e9, w: 2e9, h: 2e9 };
+        const pageNode = graph.getNode(pageId);
+        if (pageNode) {
+            for (const childId of pageNode.childIds) {
+                this.renderNode(canvas, graph, childId, {});
+            }
+        }
+        this.worldViewport = prevViewport;
+    }
+    render(graph, selectedIds, overlays = {}, sceneVersion = -1) {
+        const p = this.profiler;
+        p.beginFrame();
+        graph.clearAbsPosCache();
+        const canvas = this.surface.getCanvas();
+        canvas.clear(this.ck.Color4f(this.pageColor.r, this.pageColor.g, this.pageColor.b, 1));
+        this.worldViewport = {
+            x: -this.panX / this.zoom,
+            y: -this.panY / this.zoom,
+            w: this.viewportWidth / this.zoom,
+            h: this.viewportHeight / this.zoom
+        };
+        const hasVolatileOverlays = overlays.dropTargetId != null ||
+            overlays.rotationPreview != null ||
+            overlays.editingTextId != null;
+        const canUsePicture = !hasVolatileOverlays &&
+            this.scenePicture &&
+            sceneVersion === this.scenePictureVersion &&
+            this.pageId === this.scenePicturePageId;
+        p.setCacheHit(!!canUsePicture);
+        canvas.save();
+        canvas.scale(this.dpr, this.dpr);
+        canvas.translate(this.panX, this.panY);
+        canvas.scale(this.zoom, this.zoom);
+        p.beginPhase('render:scene');
+        if (canUsePicture) {
+            p.beginPhase('render:drawPicture');
+            if (this.scenePicture)
+                canvas.drawPicture(this.scenePicture);
+            p.endPhase('render:drawPicture');
+        }
+        else if (hasVolatileOverlays) {
+            this._nodeCount = 0;
+            this._culledCount = 0;
+            p.beginPhase('render:volatile');
+            const pageNode = graph.getNode(this.pageId ?? graph.rootId);
+            if (pageNode) {
+                for (const childId of pageNode.childIds) {
+                    this.renderNode(canvas, graph, childId, overlays, 0, 0);
+                }
+            }
+            p.endPhase('render:volatile');
+        }
+        else {
+            this._nodeCount = 0;
+            this._culledCount = 0;
+            p.beginPhase('render:recordPicture');
+            this.recordScenePicture(canvas, graph, sceneVersion);
+            p.endPhase('render:recordPicture');
+        }
+        p.endPhase('render:scene');
+        canvas.restore();
+        canvas.save();
+        canvas.scale(this.dpr, this.dpr);
+        this.labelCache.update(graph, this.pageId, sceneVersion);
+        p.beginPhase('render:sectionTitles');
+        this.drawSectionTitles(canvas, graph);
+        p.endPhase('render:sectionTitles');
+        p.beginPhase('render:componentLabels');
+        this.drawComponentLabels(canvas, graph);
+        p.endPhase('render:componentLabels');
+        canvas.restore();
+        canvas.save();
+        canvas.scale(this.dpr, this.dpr);
+        this.drawHoverHighlight(canvas, graph, overlays.hoveredNodeId);
+        p.beginPhase('render:selection');
+        this.drawSelection(canvas, graph, selectedIds, overlays);
+        p.endPhase('render:selection');
+        this.drawFlashes(canvas, graph);
+        this.drawSnapGuides(canvas, overlays.snapGuides);
+        if (overlays.measurementMode) {
+            this.drawMeasurements(canvas, graph, selectedIds, overlays.hoveredNodeId);
+            this.drawPaddingOverlay(canvas, graph, selectedIds);
+        }
+        this.drawMarquee(canvas, overlays.marquee);
+        this.drawLayoutInsertIndicator(canvas, overlays.layoutInsertIndicator);
+        this.drawPenOverlay(canvas, overlays.penState);
+        this.drawRemoteCursors(canvas, graph, overlays.remoteCursors);
+        p.beginPhase('render:rulers');
+        if (this.showRulers)
+            this.drawRulers(canvas, graph, selectedIds);
+        p.endPhase('render:rulers');
+        p.drawHUD(canvas, this.showRulers);
+        canvas.restore();
+        p.beginPhase('render:flush');
+        this.surface.flush();
+        p.endPhase('render:flush');
+        p.setNodeCounts(this._nodeCount, this._culledCount);
+        p.endFrame();
+    }
+    recordScenePicture(canvas, graph, sceneVersion) {
+        this.scenePicture?.delete();
+        const prevViewport = this.worldViewport;
+        this.worldViewport = { x: -1e6, y: -1e6, w: 2e6, h: 2e6 };
+        const recorder = new this.ck.PictureRecorder();
+        const bounds = this.ck.LTRBRect(-1e6, -1e6, 1e6, 1e6);
+        const recCanvas = recorder.beginRecording(bounds);
+        const pageNode = graph.getNode(this.pageId ?? graph.rootId);
+        if (pageNode) {
+            for (const childId of pageNode.childIds) {
+                this.renderNode(recCanvas, graph, childId, {}, 0, 0);
+            }
+        }
+        this.scenePicture = recorder.finishRecordingAsPicture();
+        recorder.delete();
+        this.worldViewport = prevViewport;
+        this.scenePictureVersion = sceneVersion;
+        this.scenePicturePageId = this.pageId;
+        canvas.drawPicture(this.scenePicture);
+    }
+    invalidateVectorPath(nodeId) {
+        this.vectorPathCache.delete(nodeId);
+        this.fillGeometryCache.delete(nodeId);
+        this.strokeGeometryCache.delete(nodeId);
+    }
+    measureTextNode(node, maxWidth) {
+        if (!this.fontsLoaded || !this.fontProvider || !this.isNodeFontLoaded(node))
+            return null;
+        if (node.type !== 'TEXT' || !node.text)
+            return null;
+        const paragraph = this.buildParagraph(node);
+        const layoutWidth = maxWidth !== undefined
+            ? maxWidth
+            : (node.textAutoResize === 'WIDTH_AND_HEIGHT'
+                ? 1e6
+                : node.width || 1e6);
+        paragraph.layout(layoutWidth);
+        const width = paragraph.getLongestLine();
+        const height = paragraph.getHeight();
+        paragraph.delete();
+        return { width: Math.ceil(width), height: Math.ceil(height) };
+    }
+    isNodeFontLoaded(node) {
+        const families = new Set();
+        families.add(node.fontFamily || DEFAULT_FONT_FAMILY);
+        for (const run of node.styleRuns) {
+            if (run.style.fontFamily)
+                families.add(run.style.fontFamily);
+        }
+        return [...families].every((f) => isFontLoaded(f));
+    }
+    buildTextPicture(node) {
+        if (!this.fontsLoaded || !this.fontProvider || !this.isNodeFontLoaded(node))
+            return null;
+        if (node.type !== 'TEXT' || !node.text)
+            return null;
+        const ck = this.ck;
+        const recorder = new ck.PictureRecorder();
+        const bounds = ck.LTRBRect(0, 0, node.width || 1e6, node.height || 1e6);
+        const recCanvas = recorder.beginRecording(bounds);
+        const paragraph = this.buildParagraph(node, undefined, { halfLeading: true });
+        recCanvas.drawParagraph(paragraph, 0, 0);
+        paragraph.delete();
+        const picture = recorder.finishRecordingAsPicture();
+        recorder.delete();
+        const bytes = picture.serialize();
+        picture.delete();
+        return bytes ?? null;
+    }
+    buildParagraph(node, color, { halfLeading = false } = {}) {
+        const ck = this.ck;
+        const baseColor = color ?? ck.BLACK;
+        const baseFontSize = node.fontSize || DEFAULT_FONT_SIZE;
+        const cjkFallback = getCJKFallbackFamily();
+        const truncateOpts = this.buildTruncateOpts(node, baseFontSize);
+        const fontFamilies = (primary) => cjkFallback ? [primary, cjkFallback] : [primary];
+        const paraStyle = new ck.ParagraphStyle({
+            textAlign: this.getTextAlign(node.textAlignHorizontal),
+            ...truncateOpts,
+            textStyle: {
+                color: baseColor,
+                fontFamilies: fontFamilies(node.fontFamily || DEFAULT_FONT_FAMILY),
+                fontSize: baseFontSize,
+                fontStyle: {
+                    weight: { value: node.fontWeight || 400 },
+                    slant: node.italic ? ck.FontSlant.Italic : ck.FontSlant.Upright
+                },
+                letterSpacing: node.letterSpacing || 0,
+                decoration: this.textDecorationValue(node.textDecoration),
+                heightMultiplier: node.lineHeight ? node.lineHeight / baseFontSize : undefined,
+                halfLeading
+            }
+        });
+        if (!this.fontProvider)
+            throw new Error('Font provider not initialized');
+        const builder = ck.ParagraphBuilder.MakeFromFontProvider(paraStyle, this.fontProvider);
+        if (node.styleRuns.length === 0) {
+            builder.addText(node.text);
+        }
+        else {
+            this.addStyledRuns(builder, node, baseColor, baseFontSize, fontFamilies, halfLeading);
+        }
+        const paragraph = builder.build();
+        paragraph.layout(node.width || 1e6);
+        builder.delete();
+        return paragraph;
+    }
+    buildTruncateOpts(node, baseFontSize) {
+        if (node.textTruncation !== 'ENDING')
+            return {};
+        const opts = { ellipsis: '…' };
+        if (node.maxLines != null && node.maxLines > 0) {
+            opts.maxLines = node.maxLines;
+        }
+        else if (node.height > 0) {
+            const lineH = node.lineHeight || baseFontSize * 1.2;
+            opts.maxLines = Math.max(1, Math.floor(node.height / lineH));
+        }
+        return opts;
+    }
+    addStyledRuns(builder, node, baseColor, baseFontSize, fontFamilies, halfLeading) {
+        const ck = this.ck;
+        const text = node.text;
+        let pos = 0;
+        for (const run of node.styleRuns) {
+            if (pos < run.start) {
+                builder.addText(text.slice(pos, run.start));
+            }
+            const s = run.style;
+            const runLineHeight = s.lineHeight !== undefined ? s.lineHeight : node.lineHeight;
+            const runFontSize = s.fontSize ?? baseFontSize;
+            builder.pushStyle(new ck.TextStyle({
+                color: baseColor,
+                fontFamilies: fontFamilies(s.fontFamily ?? (node.fontFamily || DEFAULT_FONT_FAMILY)),
+                fontSize: runFontSize,
+                fontStyle: {
+                    weight: { value: (s.fontWeight ?? node.fontWeight) || 400 },
+                    slant: (s.italic ?? node.italic) ? ck.FontSlant.Italic : ck.FontSlant.Upright
+                },
+                letterSpacing: s.letterSpacing ?? (node.letterSpacing || 0),
+                decoration: this.textDecorationValue(s.textDecoration ?? node.textDecoration),
+                heightMultiplier: runLineHeight ? runLineHeight / runFontSize : undefined,
+                halfLeading
+            }));
+            builder.addText(text.slice(run.start, run.start + run.length));
+            builder.pop();
+            pos = run.start + run.length;
+        }
+        if (pos < text.length) {
+            builder.addText(text.slice(pos));
+        }
+    }
+    textDecorationValue(decoration) {
+        switch (decoration) {
+            case 'UNDERLINE':
+                return this.ck.UnderlineDecoration;
+            case 'STRIKETHROUGH':
+                return this.ck.LineThroughDecoration;
+            default:
+                return this.ck.NoDecoration;
+        }
+    }
+    getTextAlign(align) {
+        switch (align) {
+            case 'CENTER':
+                return this.ck.TextAlign.Center;
+            case 'RIGHT':
+                return this.ck.TextAlign.Right;
+            case 'JUSTIFIED':
+                return this.ck.TextAlign.Justify;
+            default:
+                return this.ck.TextAlign.Left;
+        }
+    }
+    resolveFillColor(fill, fillIndex, node, graph) {
+        const varId = node.boundVariables[`fills/${fillIndex}/color`];
+        if (varId) {
+            const resolved = graph.resolveColorVariable(varId);
+            if (resolved)
+                return resolved;
+        }
+        return fill.color;
+    }
+    resolveStrokeColor(stroke, strokeIndex, node, graph) {
+        const varId = node.boundVariables[`strokes/${strokeIndex}/color`];
+        if (varId) {
+            const resolved = graph.resolveColorVariable(varId);
+            if (resolved)
+                return resolved;
+        }
+        return stroke.color;
+    }
+    screenToCanvas(sx, sy) {
+        return {
+            x: (sx - this.panX) / this.zoom,
+            y: (sy - this.panY) / this.zoom
+        };
+    }
+    destroyed = false;
+    destroy() {
+        if (this.destroyed)
+            return;
+        this.destroyed = true;
+        this.imageCache.clear();
+        this.vectorPathCache.clear();
+        this.fillGeometryCache.clear();
+        this.strokeGeometryCache.clear();
+        this.fillPaint.delete();
+        this.strokePaint.delete();
+        this.selectionPaint.delete();
+        this.snapPaint.delete();
+        this.auxFill.delete();
+        this.auxStroke.delete();
+        this.opacityPaint.delete();
+        this.textFont?.delete();
+        this.labelFont?.delete();
+        this.sizeFont?.delete();
+        this.fontMgr?.delete();
+        this.fontProvider?.delete();
+        this.rulerBgPaint.delete();
+        this.rulerTickPaint.delete();
+        this.rulerTextPaint.delete();
+        this.rulerHlPaint.delete();
+        this.rulerBadgePaint.delete();
+        this.rulerLabelPaint.delete();
+        this.penPathPaint.delete();
+        this.penHandlePaint.delete();
+        this.penVertexFill.delete();
+        this.penVertexStroke.delete();
+        this.effectLayerPaint.delete();
+        for (const filter of this.imageFilterCache.values())
+            filter.delete();
+        this.imageFilterCache.clear();
+        for (const filter of this.maskFilterCache.values())
+            filter.delete();
+        this.maskFilterCache.clear();
+        this.nodePictureCache.clear();
+        this.scenePicture?.delete();
+        this._flashPaint?.delete();
+        this.profiler.destroy();
+        this.surface.delete();
+    }
+    // --- Delegation methods ---
+    drawHoverHighlight(canvas, graph, hoveredNodeId) {
+        drawHoverHighlightFn(this, canvas, graph, hoveredNodeId);
+    }
+    drawSelection(canvas, graph, selectedIds, overlays) {
+        drawSelectionFn(this, canvas, graph, selectedIds, overlays);
+    }
+    drawNodeSelection(canvas, node, rotation, graph) {
+        drawNodeSelectionFn(this, canvas, node, rotation, graph);
+    }
+    drawSelectionLabels(canvas, graph, selectedIds) {
+        drawSelectionLabelsFn(this, canvas, graph, selectedIds);
+    }
+    drawParentFrameOutlines(canvas, graph, selectedIds) {
+        drawParentFrameOutlinesFn(this, canvas, graph, selectedIds);
+    }
+    drawNodeOutline(canvas, node, rotation, graph) {
+        drawNodeOutlineFn(this, canvas, node, rotation, graph);
+    }
+    drawGroupBounds(canvas, nodes, graph) {
+        drawGroupBoundsFn(this, canvas, nodes, graph);
+    }
+    getRotatedCorners(n, abs) {
+        return getRotatedCornersFn(this, n, abs);
+    }
+    drawHandle(canvas, x, y) {
+        drawHandleFn(this, canvas, x, y);
+    }
+    drawSnapGuides(canvas, guides) {
+        drawSnapGuidesFn(this, canvas, guides);
+    }
+    drawMeasurements(canvas, graph, selectedIds, hoveredNodeId) {
+        drawMeasurementsFn(this, canvas, graph, selectedIds, hoveredNodeId);
+    }
+    drawPaddingOverlay(canvas, graph, selectedIds) {
+        drawPaddingOverlayFn(this, canvas, graph, selectedIds);
+    }
+    drawMarquee(canvas, marquee) {
+        drawMarqueeFn(this, canvas, marquee);
+    }
+    drawFlashes(canvas, graph) {
+        drawFlashesFn(this, canvas, graph);
+    }
+    drawLayoutInsertIndicator(canvas, indicator) {
+        drawLayoutInsertIndicatorFn(this, canvas, indicator);
+    }
+    drawTextEditOverlay(canvas, node, editor) {
+        drawTextEditOverlayFn(this, canvas, node, editor);
+    }
+    drawPenOverlay(canvas, penState) {
+        drawPenOverlayFn(this, canvas, penState);
+    }
+    drawRemoteCursors(canvas, graph, cursors) {
+        drawRemoteCursorsFn(this, canvas, graph, cursors);
+    }
+    drawRulers(canvas, graph, selectedIds) {
+        drawRulersFn(this, canvas, graph, selectedIds);
+    }
+    drawSectionTitles(canvas, graph) {
+        drawSectionTitlesFn(this, canvas, graph);
+    }
+    drawComponentLabels(canvas, graph) {
+        drawComponentLabelsFn(this, canvas, graph);
+    }
+    renderNode(canvas, graph, nodeId, overlays, parentAbsX = 0, parentAbsY = 0) {
+        renderNodeFn(this, canvas, graph, nodeId, overlays, parentAbsX, parentAbsY);
+    }
+    renderSection(canvas, node, graph) {
+        renderSectionFn(this, canvas, node, graph);
+    }
+    renderComponentSet(canvas, node, graph) {
+        renderComponentSetFn(this, canvas, node, graph);
+    }
+    renderShape(canvas, node, graph) {
+        renderShapeFn(this, canvas, node, graph);
+    }
+    renderShapeUncached(canvas, node, graph) {
+        renderShapeUncachedFn(this, canvas, node, graph);
+    }
+    renderEffects(canvas, node, rect, hasRadius, pass) {
+        renderEffectsFn(this, canvas, node, rect, hasRadius, pass);
+    }
+    renderText(canvas, node) {
+        renderTextFn(this, canvas, node);
+    }
+    drawNodeFill(canvas, node, rect, hasRadius) {
+        drawNodeFillFn(this, canvas, node, rect, hasRadius);
+    }
+    applyFill(fill, node, graph, fillIndex = 0) {
+        return applyFillFn(this, fill, node, graph, fillIndex);
+    }
+    applyGradientFill(fill, node) {
+        applyGradientFillFn(this, fill, node);
+    }
+    applyImageFill(fill, node, graph) {
+        return applyImageFillFn(this, fill, node, graph);
+    }
+    drawArc(canvas, node, paint) {
+        drawArcFn(this, canvas, node, paint);
+    }
+    drawNodeStroke(canvas, node, rect, hasRadius) {
+        drawNodeStrokeFn(this, canvas, node, rect, hasRadius);
+    }
+    drawStrokeWithAlign(canvas, node, rect, hasRadius, align) {
+        drawStrokeWithAlignFn(this, canvas, node, rect, hasRadius, align);
+    }
+    drawRRectStrokeWithAlign(canvas, rrect, node, stroke) {
+        drawRRectStrokeWithAlignFn(this, canvas, rrect, node, stroke);
+    }
+    drawIndividualSideStrokes(canvas, node, align) {
+        drawIndividualSideStrokesFn(this, canvas, node, align);
+    }
+    strokeNodeShape(canvas, node, paint) {
+        strokeNodeShapeFn(this, canvas, node, paint);
+    }
+    makeNodeShapePath(node, rect, hasRadius) {
+        return makeNodeShapePathFn(this, node, rect, hasRadius);
+    }
+    makePolygonPath(node) {
+        return makePolygonPathFn(this, node);
+    }
+    makeRRect(node) {
+        return makeRRectFn(this, node);
+    }
+    makeRRectWithSpread(node, spread) {
+        return makeRRectWithSpreadFn(this, node, spread);
+    }
+    makeRRectWithOffset(node, ox, oy, spread) {
+        return makeRRectWithOffsetFn(this, node, ox, oy, spread);
+    }
+    clipNodeShape(canvas, node, rect, hasRadius) {
+        clipNodeShapeFn(this, canvas, node, rect, hasRadius);
+    }
+    getVectorPaths(node) {
+        return getVectorPathsFn(this, node);
+    }
+    getFillGeometry(node) {
+        return getFillGeometryFn(this, node);
+    }
+    getStrokeGeometry(node) {
+        return getStrokeGeometryFn(this, node);
+    }
+    getCachedDropShadow(dx, dy, sigma, color) {
+        return getCachedDropShadowFn(this, dx, dy, sigma, color);
+    }
+    getCachedBlur(sigma) {
+        return getCachedBlurFn(this, sigma);
+    }
+    getCachedDecalBlur(sigma) {
+        return getCachedDecalBlurFn(this, sigma);
+    }
+    getCachedMaskBlur(sigma) {
+        return getCachedMaskBlurFn(this, sigma);
+    }
+    applyClippedBlur(canvas, node, rect, hasRadius, sigma) {
+        applyClippedBlurFn(this, canvas, node, rect, hasRadius, sigma);
+    }
+}
+//# sourceMappingURL=renderer.js.map