@llc3233149/core 0.9.0

package/src/renderer/renderer.ts

@@ -0,0 +1,1226 @@
+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'
+import { isFontLoaded, getCJKFallbackFamily } from '../fonts'
+import { RenderProfiler } from '../profiler'
+
+import type { SceneNode, SceneGraph, Fill, Stroke } from '../scene-graph'
+import type { SnapGuide } from '../snap'
+import type { TextEditor } from '../text-editor'
+import type { Color, Rect, Vector } from '../types'
+import type {
+  Image as CKImage,
+  Path,
+  CanvasKit,
+  Surface,
+  Canvas,
+  Paint,
+  Font,
+  FontMgr,
+  FontWeight,
+  TypefaceFontProvider,
+  SkPicture,
+  ImageFilter,
+  MaskFilter,
+  Paragraph
+} from 'canvaskit-wasm'
+
+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'
+import { drawRulers as drawRulersFn } from './rulers'
+import {
+  drawSectionTitles as drawSectionTitlesFn,
+  drawComponentLabels as drawComponentLabelsFn
+} from './labels'
+import { LabelCache } from './label-cache'
+import { LRUCache } from './lru-cache'
+import {
+  renderNode as renderNodeFn,
+  renderSection as renderSectionFn,
+  renderComponentSet as renderComponentSetFn,
+  renderShape as renderShapeFn,
+  renderShapeUncached as renderShapeUncachedFn,
+  renderEffects as renderEffectsFn,
+  renderText as renderTextFn
+} from './scene'
+import {
+  drawNodeFill as drawNodeFillFn,
+  applyFill as applyFillFn,
+  applyGradientFill as applyGradientFillFn,
+  applyImageFill as applyImageFillFn,
+  drawArc as drawArcFn
+} from './fills'
+import {
+  drawNodeStroke as drawNodeStrokeFn,
+  drawStrokeWithAlign as drawStrokeWithAlignFn,
+  drawRRectStrokeWithAlign as drawRRectStrokeWithAlignFn,
+  drawIndividualSideStrokes as drawIndividualSideStrokesFn,
+  strokeNodeShape as strokeNodeShapeFn
+} from './strokes'
+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'
+import {
+  getCachedDropShadow as getCachedDropShadowFn,
+  getCachedBlur as getCachedBlurFn,
+  getCachedDecalBlur as getCachedDecalBlurFn,
+  getCachedMaskBlur as getCachedMaskBlurFn,
+  applyClippedBlur as applyClippedBlurFn
+} from './effects'
+
+export interface RenderOverlays {
+  hoveredNodeId?: string | null
+  editingTextId?: string | null
+  textEditor?: TextEditor | null
+  marquee?: Rect | null
+  snapGuides?: SnapGuide[]
+  rotationPreview?: { nodeId: string; angle: number } | null
+  dropTargetId?: string | null
+  layoutInsertIndicator?: {
+    x: number
+    y: number
+    length: number
+    direction: 'HORIZONTAL' | 'VERTICAL'
+  } | null
+  penState?: {
+    vertices: Vector[]
+    segments: Array<{
+      start: number
+      end: number
+      tangentStart: Vector
+      tangentEnd: Vector
+    }>
+    dragTangent: Vector | null
+    closingToFirst: boolean
+    cursorX?: number
+    cursorY?: number
+  } | null
+  remoteCursors?: Array<{
+    name: string
+    color: Color
+    x: number
+    y: number
+    selection?: string[]
+  }>
+  measurementMode?: boolean
+}
+
+export class SkiaRenderer {
+  ck: CanvasKit
+  surface: Surface
+  fillPaint: Paint
+  strokePaint: Paint
+  selectionPaint: Paint
+  parentOutlinePaint: Paint
+  snapPaint: Paint
+  auxFill: Paint
+  auxStroke: Paint
+  opacityPaint: Paint
+  effectLayerPaint: Paint
+  imageFilterCache = new Map<string, ImageFilter>()
+  maskFilterCache = new Map<number, MaskFilter>()
+  _tmpColor = new Float32Array(4)
+  _tmpRect = new Float32Array(4)
+  textFont: Font | null = null
+  labelFont: Font | null = null
+  sizeFont: Font | null = null
+  sectionTitleFont: Font | null = null
+  componentLabelFont: Font | null = null
+  fontMgr: FontMgr | null = null
+  fontProvider: TypefaceFontProvider | null = null
+  fontsLoaded = false
+  imageCache = new LRUCache<string, CKImage>(512, (img) => img.delete())
+  vectorPathCache = new LRUCache<string, Path[]>(512, (paths) => { for (const p of paths) p.delete() })
+  fillGeometryCache = new LRUCache<string, Path[]>(512, (paths) => { for (const p of paths) p.delete() })
+  strokeGeometryCache = new LRUCache<string, Path[]>(512, (paths) => { for (const p of paths) p.delete() })
+  scenePicture: SkPicture | null = null
+  scenePictureVersion = -1
+  scenePicturePageId: string | null = null
+  nodePictureCache = new LRUCache<string, SkPicture>(512, (pic) => pic.delete())
+  readonly labelCache = new LabelCache()
+  readonly profiler: RenderProfiler
+
+  rulerBgPaint: Paint
+  rulerTickPaint: Paint
+  rulerTextPaint: Paint
+  rulerHlPaint: Paint
+  rulerBadgePaint: Paint
+  rulerLabelPaint: Paint
+  penPathPaint: Paint
+  penHandlePaint: Paint
+  penVertexFill: Paint
+  penVertexStroke: Paint
+
+  panX = 0
+  panY = 0
+  zoom = 1
+  dpr = 1
+  viewportWidth = 0
+  viewportHeight = 0
+  showRulers = true
+  pageColor = CANVAS_BG_COLOR
+  pageId: string | null = null
+
+  worldViewport = { x: 0, y: 0, w: 0, h: 0 }
+  _nodeCount = 0
+  _culledCount = 0
+  _flashes: Array<{ nodeId: string; startTime: number }> = []
+  _flashPaint: Paint | null = null
+
+  readonly DEFAULT_FONT_SIZE = DEFAULT_FONT_SIZE
+  readonly COMPONENT_SET_BORDER_WIDTH = COMPONENT_SET_BORDER_WIDTH
+  readonly COMPONENT_SET_DASH = COMPONENT_SET_DASH
+  readonly 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: number, g: number, b: number, a: number): Float32Array {
+    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: number, t: number, r: number, b: number): Float32Array {
+    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: string): boolean {
+    return type === 'COMPONENT' || type === 'COMPONENT_SET' || type === 'INSTANCE'
+  }
+
+  isRectangularType(type: string): boolean {
+    return (
+      type === 'FRAME' ||
+      type === 'RECTANGLE' ||
+      type === 'ROUNDED_RECTANGLE' ||
+      type === 'COMPONENT' ||
+      type === 'INSTANCE' ||
+      type === 'SECTION' ||
+      type === 'GROUP'
+    )
+  }
+
+  effectOverflow(node: SceneNode): number {
+    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: CanvasKit, surface: Surface, gl?: WebGL2RenderingContext | null) {
+    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(): TypefaceFontProvider | null {
+    return this.fontProvider
+  }
+
+  async loadFonts(): Promise<void> {
+    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: Surface): void {
+    this.surface.delete()
+    this.surface = surface
+    this.invalidateScenePicture()
+  }
+
+  invalidateScenePicture(): void {
+    this.scenePicture?.delete()
+    this.scenePicture = null
+    this.scenePictureVersion = -1
+  }
+
+  invalidateAllPictures(): void {
+    this.invalidateScenePicture()
+    this.nodePictureCache.clear()
+  }
+
+  invalidateNodePicture(nodeId: string): void {
+    this.nodePictureCache.delete(nodeId)
+  }
+
+  flashNode(nodeId: string): void {
+    this._flashes.push({ nodeId, startTime: performance.now() })
+  }
+
+  get hasActiveFlashes(): boolean {
+    return this._flashes.length > 0
+  }
+
+  hitTestSectionTitle(graph: SceneGraph, canvasX: number, canvasY: number): SceneNode | null {
+    if (!this.sectionTitleFont) return null
+
+    const pageNode = graph.getNode(this.pageId ?? graph.rootId)
+    if (!pageNode) return null
+
+    const font = this.sectionTitleFont
+    let result: SceneNode | null = null
+
+    const check = (parentId: string, ox: number, oy: number, insideSection: boolean) => {
+      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: number
+          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: SceneGraph, canvasX: number, canvasY: number): SceneNode | null {
+    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: SceneNode | null = null
+
+    const check = (parentId: string, ox: number, oy: number) => {
+      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: number
+          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: SceneGraph,
+    canvasX: number,
+    canvasY: number,
+    selectedIds: Set<string>
+  ): SceneNode | null {
+    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: Canvas, graph: SceneGraph, pageId: string): void {
+    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: SceneGraph,
+    selectedIds: Set<string>,
+    overlays: RenderOverlays = {},
+    sceneVersion = -1
+  ): void {
+    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()
+  }
+
+  private recordScenePicture(canvas: Canvas, graph: SceneGraph, sceneVersion: number): void {
+    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: string): void {
+    this.vectorPathCache.delete(nodeId)
+    this.fillGeometryCache.delete(nodeId)
+    this.strokeGeometryCache.delete(nodeId)
+  }
+
+  measureTextNode(node: SceneNode, maxWidth?: number): { width: number; height: number } | null {
+    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: SceneNode): boolean {
+    const families = new Set<string>()
+    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: SceneNode): Uint8Array | null {
+    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: SceneNode,
+    color?: Float32Array,
+    { halfLeading = false }: { halfLeading?: boolean } = {}
+  ): Paragraph {
+    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: string) =>
+      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 } as FontWeight,
+          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
+  }
+
+  private buildTruncateOpts(
+    node: SceneNode,
+    baseFontSize: number
+  ): { maxLines?: number; ellipsis?: string } {
+    if (node.textTruncation !== 'ENDING') return {}
+
+    const opts: { maxLines?: number; ellipsis: string } = { 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
+  }
+
+  private addStyledRuns(
+    builder: ReturnType<CanvasKit['ParagraphBuilder']['MakeFromFontProvider']>,
+    node: SceneNode,
+    baseColor: Float32Array,
+    baseFontSize: number,
+    fontFamilies: (primary: string) => string[],
+    halfLeading: boolean
+  ): void {
+    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 } as FontWeight,
+            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))
+    }
+  }
+
+  private textDecorationValue(decoration: string): number {
+    switch (decoration) {
+      case 'UNDERLINE':
+        return this.ck.UnderlineDecoration
+      case 'STRIKETHROUGH':
+        return this.ck.LineThroughDecoration
+      default:
+        return this.ck.NoDecoration
+    }
+  }
+
+  private getTextAlign(align: string) {
+    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: Fill, fillIndex: number, node: SceneNode, graph: SceneGraph): Color {
+    const varId = node.boundVariables[`fills/${fillIndex}/color`]
+    if (varId) {
+      const resolved = graph.resolveColorVariable(varId)
+      if (resolved) return resolved
+    }
+    return fill.color
+  }
+
+  resolveStrokeColor(
+    stroke: Stroke,
+    strokeIndex: number,
+    node: SceneNode,
+    graph: SceneGraph
+  ): Color {
+    const varId = node.boundVariables[`strokes/${strokeIndex}/color`]
+    if (varId) {
+      const resolved = graph.resolveColorVariable(varId)
+      if (resolved) return resolved
+    }
+    return stroke.color
+  }
+
+  screenToCanvas(sx: number, sy: number): Vector {
+    return {
+      x: (sx - this.panX) / this.zoom,
+      y: (sy - this.panY) / this.zoom
+    }
+  }
+
+  destroyed = false
+
+  destroy(): void {
+    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 ---
+
+  private drawHoverHighlight(canvas: Canvas, graph: SceneGraph, hoveredNodeId?: string | null): void {
+    drawHoverHighlightFn(this, canvas, graph, hoveredNodeId)
+  }
+
+  private drawSelection(canvas: Canvas, graph: SceneGraph, selectedIds: Set<string>, overlays: RenderOverlays): void {
+    drawSelectionFn(this, canvas, graph, selectedIds, overlays)
+  }
+
+  drawNodeSelection(canvas: Canvas, node: SceneNode, rotation: number, graph: SceneGraph): void {
+    drawNodeSelectionFn(this, canvas, node, rotation, graph)
+  }
+
+  drawSelectionLabels(canvas: Canvas, graph: SceneGraph, selectedIds: Set<string>): void {
+    drawSelectionLabelsFn(this, canvas, graph, selectedIds)
+  }
+
+  drawParentFrameOutlines(canvas: Canvas, graph: SceneGraph, selectedIds: Set<string>): void {
+    drawParentFrameOutlinesFn(this, canvas, graph, selectedIds)
+  }
+
+  drawNodeOutline(canvas: Canvas, node: SceneNode, rotation: number, graph: SceneGraph): void {
+    drawNodeOutlineFn(this, canvas, node, rotation, graph)
+  }
+
+  drawGroupBounds(canvas: Canvas, nodes: SceneNode[], graph: SceneGraph): void {
+    drawGroupBoundsFn(this, canvas, nodes, graph)
+  }
+
+  getRotatedCorners(n: SceneNode, abs: Vector): Vector[] {
+    return getRotatedCornersFn(this, n, abs)
+  }
+
+  drawHandle(canvas: Canvas, x: number, y: number): void {
+    drawHandleFn(this, canvas, x, y)
+  }
+
+  private drawSnapGuides(canvas: Canvas, guides?: SnapGuide[]): void {
+    drawSnapGuidesFn(this, canvas, guides)
+  }
+
+  private drawMeasurements(canvas: Canvas, graph: SceneGraph, selectedIds: Set<string>, hoveredNodeId?: string | null): void {
+    drawMeasurementsFn(this, canvas, graph, selectedIds, hoveredNodeId)
+  }
+
+  private drawPaddingOverlay(canvas: Canvas, graph: SceneGraph, selectedIds: Set<string>): void {
+    drawPaddingOverlayFn(this, canvas, graph, selectedIds)
+  }
+
+  private drawMarquee(canvas: Canvas, marquee?: Rect | null): void {
+    drawMarqueeFn(this, canvas, marquee)
+  }
+
+  private drawFlashes(canvas: Canvas, graph: SceneGraph): void {
+    drawFlashesFn(this, canvas, graph)
+  }
+
+  private drawLayoutInsertIndicator(canvas: Canvas, indicator?: RenderOverlays['layoutInsertIndicator']): void {
+    drawLayoutInsertIndicatorFn(this, canvas, indicator)
+  }
+
+  drawTextEditOverlay(canvas: Canvas, node: SceneNode, editor: TextEditor): void {
+    drawTextEditOverlayFn(this, canvas, node, editor)
+  }
+
+  private drawPenOverlay(canvas: Canvas, penState: RenderOverlays['penState']): void {
+    drawPenOverlayFn(this, canvas, penState)
+  }
+
+  private drawRemoteCursors(canvas: Canvas, graph: SceneGraph, cursors?: RenderOverlays['remoteCursors']): void {
+    drawRemoteCursorsFn(this, canvas, graph, cursors)
+  }
+
+  private drawRulers(canvas: Canvas, graph: SceneGraph, selectedIds: Set<string>): void {
+    drawRulersFn(this, canvas, graph, selectedIds)
+  }
+
+  private drawSectionTitles(canvas: Canvas, graph: SceneGraph): void {
+    drawSectionTitlesFn(this, canvas, graph)
+  }
+
+  private drawComponentLabels(canvas: Canvas, graph: SceneGraph): void {
+    drawComponentLabelsFn(this, canvas, graph)
+  }
+
+  renderNode(canvas: Canvas, graph: SceneGraph, nodeId: string, overlays: RenderOverlays, parentAbsX = 0, parentAbsY = 0): void {
+    renderNodeFn(this, canvas, graph, nodeId, overlays, parentAbsX, parentAbsY)
+  }
+
+  renderSection(canvas: Canvas, node: SceneNode, graph: SceneGraph): void {
+    renderSectionFn(this, canvas, node, graph)
+  }
+
+  renderComponentSet(canvas: Canvas, node: SceneNode, graph: SceneGraph): void {
+    renderComponentSetFn(this, canvas, node, graph)
+  }
+
+  renderShape(canvas: Canvas, node: SceneNode, graph: SceneGraph): void {
+    renderShapeFn(this, canvas, node, graph)
+  }
+
+  renderShapeUncached(canvas: Canvas, node: SceneNode, graph: SceneGraph): void {
+    renderShapeUncachedFn(this, canvas, node, graph)
+  }
+
+  renderEffects(canvas: Canvas, node: SceneNode, rect: Float32Array, hasRadius: boolean, pass: 'behind' | 'front'): void {
+    renderEffectsFn(this, canvas, node, rect, hasRadius, pass)
+  }
+
+  renderText(canvas: Canvas, node: SceneNode): void {
+    renderTextFn(this, canvas, node)
+  }
+
+  drawNodeFill(canvas: Canvas, node: SceneNode, rect: Float32Array, hasRadius: boolean): void {
+    drawNodeFillFn(this, canvas, node, rect, hasRadius)
+  }
+
+  applyFill(fill: Fill, node: SceneNode, graph: SceneGraph, fillIndex = 0): boolean {
+    return applyFillFn(this, fill, node, graph, fillIndex)
+  }
+
+  applyGradientFill(fill: Fill, node: SceneNode): void {
+    applyGradientFillFn(this, fill, node)
+  }
+
+  applyImageFill(fill: Fill, node: SceneNode, graph: SceneGraph): boolean {
+    return applyImageFillFn(this, fill, node, graph)
+  }
+
+  drawArc(canvas: Canvas, node: SceneNode, paint: Paint): void {
+    drawArcFn(this, canvas, node, paint)
+  }
+
+  drawNodeStroke(canvas: Canvas, node: SceneNode, rect: Float32Array, hasRadius: boolean): void {
+    drawNodeStrokeFn(this, canvas, node, rect, hasRadius)
+  }
+
+  drawStrokeWithAlign(canvas: Canvas, node: SceneNode, rect: Float32Array, hasRadius: boolean, align: 'INSIDE' | 'CENTER' | 'OUTSIDE'): void {
+    drawStrokeWithAlignFn(this, canvas, node, rect, hasRadius, align)
+  }
+
+  drawRRectStrokeWithAlign(canvas: Canvas, rrect: Float32Array, node: SceneNode, stroke: Stroke): void {
+    drawRRectStrokeWithAlignFn(this, canvas, rrect, node, stroke)
+  }
+
+  drawIndividualSideStrokes(canvas: Canvas, node: SceneNode, align: 'INSIDE' | 'CENTER' | 'OUTSIDE'): void {
+    drawIndividualSideStrokesFn(this, canvas, node, align)
+  }
+
+  strokeNodeShape(canvas: Canvas, node: SceneNode, paint: Paint): void {
+    strokeNodeShapeFn(this, canvas, node, paint)
+  }
+
+  makeNodeShapePath(node: SceneNode, rect: Float32Array, hasRadius: boolean): Path {
+    return makeNodeShapePathFn(this, node, rect, hasRadius)
+  }
+
+  makePolygonPath(node: SceneNode): Path {
+    return makePolygonPathFn(this, node)
+  }
+
+  makeRRect(node: SceneNode): Float32Array {
+    return makeRRectFn(this, node)
+  }
+
+  makeRRectWithSpread(node: SceneNode, spread: number): Float32Array {
+    return makeRRectWithSpreadFn(this, node, spread)
+  }
+
+  makeRRectWithOffset(node: SceneNode, ox: number, oy: number, spread: number): Float32Array {
+    return makeRRectWithOffsetFn(this, node, ox, oy, spread)
+  }
+
+  clipNodeShape(canvas: Canvas, node: SceneNode, rect: Float32Array, hasRadius: boolean): void {
+    clipNodeShapeFn(this, canvas, node, rect, hasRadius)
+  }
+
+  getVectorPaths(node: SceneNode): Path[] | null {
+    return getVectorPathsFn(this, node)
+  }
+
+  getFillGeometry(node: SceneNode): Path[] | null {
+    return getFillGeometryFn(this, node)
+  }
+
+  getStrokeGeometry(node: SceneNode): Path[] | null {
+    return getStrokeGeometryFn(this, node)
+  }
+
+  getCachedDropShadow(dx: number, dy: number, sigma: number, color: Float32Array): ImageFilter {
+    return getCachedDropShadowFn(this, dx, dy, sigma, color)
+  }
+
+  getCachedBlur(sigma: number): ImageFilter {
+    return getCachedBlurFn(this, sigma)
+  }
+
+  getCachedDecalBlur(sigma: number): ImageFilter {
+    return getCachedDecalBlurFn(this, sigma)
+  }
+
+  getCachedMaskBlur(sigma: number): MaskFilter {
+    return getCachedMaskBlurFn(this, sigma)
+  }
+
+  applyClippedBlur(canvas: Canvas, node: SceneNode, rect: Float32Array, hasRadius: boolean, sigma: number): void {
+    applyClippedBlurFn(this, canvas, node, rect, hasRadius, sigma)
+  }
+}