@llc3233149/core 0.9.0

package/src/renderer/label-cache.ts

@@ -0,0 +1,114 @@
+import type { SceneGraph, SceneNode } from '../scene-graph'
+
+export interface CachedSection {
+  nodeId: string
+  absX: number
+  absY: number
+  nested: boolean
+}
+
+export interface CachedComponent {
+  nodeId: string
+  absX: number
+  absY: number
+  parentType: string
+}
+
+interface Viewport {
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+const LABEL_TYPES = new Set(['COMPONENT', 'COMPONENT_SET'])
+
+export class LabelCache {
+  private sections: CachedSection[] = []
+  private components: CachedComponent[] = []
+  private cachedSceneVersion = -1
+  private cachedPageId: string | null = null
+
+  update(graph: SceneGraph, pageId: string | null, sceneVersion: number): void {
+    if (sceneVersion === this.cachedSceneVersion && pageId === this.cachedPageId) return
+    this.rebuild(graph, pageId)
+    this.cachedSceneVersion = sceneVersion
+    this.cachedPageId = pageId
+  }
+
+  invalidate(): void {
+    this.cachedSceneVersion = -1
+    this.cachedPageId = null
+    this.sections = []
+    this.components = []
+  }
+
+  getSections(graph: SceneGraph, viewport: Viewport): Array<{ node: SceneNode; absX: number; absY: number; nested: boolean }> {
+    const result: Array<{ node: SceneNode; absX: number; absY: number; nested: boolean }> = []
+    for (const cached of this.sections) {
+      const node = graph.getNode(cached.nodeId)
+      if (!node) continue
+      if (
+        cached.absX + node.width >= viewport.x &&
+        cached.absY + node.height >= viewport.y &&
+        cached.absX <= viewport.x + viewport.w &&
+        cached.absY <= viewport.y + viewport.h
+      ) {
+        result.push({ node, absX: cached.absX, absY: cached.absY, nested: cached.nested })
+      }
+    }
+    return result
+  }
+
+  getComponents(graph: SceneGraph, viewport: Viewport): Array<{ node: SceneNode; absX: number; absY: number; inside: boolean }> {
+    const result: Array<{ node: SceneNode; absX: number; absY: number; inside: boolean }> = []
+    for (const cached of this.components) {
+      const node = graph.getNode(cached.nodeId)
+      if (!node) continue
+      if (
+        cached.absX + node.width >= viewport.x &&
+        cached.absY + node.height >= viewport.y &&
+        cached.absX <= viewport.x + viewport.w &&
+        cached.absY <= viewport.y + viewport.h
+      ) {
+        result.push({ node, absX: cached.absX, absY: cached.absY, inside: cached.parentType === 'COMPONENT_SET' })
+      }
+    }
+    return result
+  }
+
+  private rebuild(graph: SceneGraph, pageId: string | null): void {
+    this.sections = []
+    this.components = []
+
+    const pageNode = graph.getNode(pageId ?? graph.rootId)
+    if (!pageNode) return
+
+    this.walkChildren(graph, pageNode.id, 0, 0, false)
+  }
+
+  private walkChildren(graph: SceneGraph, parentId: string, ox: number, oy: number, insideSection: boolean): void {
+    const parent = graph.getNode(parentId)
+    if (!parent) return
+    const parentType = parent.type
+
+    for (const childId of parent.childIds) {
+      const child = graph.getNode(childId)
+      if (!child || !child.visible) continue
+      const ax = ox + child.x
+      const ay = oy + child.y
+
+      if (child.type === 'SECTION') {
+        this.sections.push({ nodeId: childId, absX: ax, absY: ay, nested: insideSection })
+        this.walkChildren(graph, childId, ax, ay, true)
+      } else if (LABEL_TYPES.has(child.type)) {
+        this.components.push({ nodeId: childId, absX: ax, absY: ay, parentType })
+        if (child.childIds.length > 0) {
+          this.walkChildren(graph, childId, ax, ay, insideSection)
+        }
+      } else if (child.childIds.length > 0) {
+        this.walkChildren(graph, childId, ax, ay, insideSection)
+      }
+    }
+  }
+}

package/src/renderer/labels.ts

@@ -0,0 +1,168 @@
+import {
+  SECTION_TITLE_HEIGHT,
+  SECTION_TITLE_PADDING_X,
+  SECTION_TITLE_RADIUS,
+  SECTION_TITLE_GAP,
+  COMPONENT_LABEL_FONT_SIZE,
+  COMPONENT_LABEL_GAP,
+  COMPONENT_LABEL_ICON_SIZE,
+  COMPONENT_LABEL_ICON_GAP
+} from '../constants'
+import type { SceneNode, SceneGraph } from '../scene-graph'
+import type { Canvas, Font } from 'canvaskit-wasm'
+import type { SkiaRenderer } from './renderer'
+
+export function drawSectionTitles(r: SkiaRenderer, canvas: Canvas, graph: SceneGraph): void {
+  if (!r.sectionTitleFont || r.zoom < 0.15) return
+
+  const sections = r.labelCache.getSections(graph, r.worldViewport)
+  if (sections.length === 0) return
+
+  const font = r.sectionTitleFont
+  const ellipsis = '…'
+  const ellipsisGlyphs = font.getGlyphIDs(ellipsis)
+  const ellipsisWidth = font.getGlyphWidths(ellipsisGlyphs)[0]
+
+  for (const { node, absX, absY, nested } of sections) {
+    drawSectionTitle(r, canvas, font, node, absX, absY, nested, ellipsis, ellipsisWidth)
+  }
+}
+
+function drawSectionTitle(
+  r: SkiaRenderer,
+  canvas: Canvas,
+  font: Font,
+  node: SceneNode,
+  absX: number,
+  absY: number,
+  nested: boolean,
+  ellipsis: string,
+  ellipsisWidth: number
+): void {
+  const screenX = absX * r.zoom + r.panX
+  const screenY = absY * r.zoom + r.panY
+  const screenW = node.width * r.zoom
+  const maxPillW = Math.max(screenW, 0)
+
+  const glyphIds = font.getGlyphIDs(node.name)
+  const widths = font.getGlyphWidths(glyphIds)
+
+  let fullTextWidth = 0
+  for (const w of widths) fullTextWidth += w
+
+  const maxTextW = maxPillW - SECTION_TITLE_PADDING_X * 2
+  let displayText = node.name
+  let textWidth = fullTextWidth
+
+  if (textWidth > maxTextW && maxTextW > ellipsisWidth) {
+    let truncW = 0
+    let truncIdx = 0
+    for (let i = 0; i < widths.length; i++) {
+      if (truncW + widths[i] + ellipsisWidth > maxTextW) break
+      truncW += widths[i]
+      truncIdx = i + 1
+    }
+    displayText = node.name.slice(0, truncIdx) + ellipsis
+    textWidth = truncW + ellipsisWidth
+  } else if (maxTextW <= ellipsisWidth) {
+    displayText = ellipsis
+    textWidth = ellipsisWidth
+  }
+
+  const pillW = Math.min(textWidth + SECTION_TITLE_PADDING_X * 2, maxPillW)
+  const pillH = SECTION_TITLE_HEIGHT
+  const pillX = screenX
+  const pillY = nested ? screenY + SECTION_TITLE_GAP : screenY - pillH - SECTION_TITLE_GAP
+
+  if (node.fills.length > 0 && node.fills[0].visible) {
+    const c = node.fills[0].color
+    r.auxFill.setColor(r.ck.Color4f(c.r, c.g, c.b, node.fills[0].opacity))
+  } else {
+    r.auxFill.setColor(r.ck.Color4f(0.37, 0.37, 0.37, 1))
+  }
+  const pillRect = r.ck.LTRBRect(pillX, pillY, pillX + pillW, pillY + pillH)
+  canvas.drawRRect(
+    r.ck.RRectXY(pillRect, SECTION_TITLE_RADIUS, SECTION_TITLE_RADIUS),
+    r.auxFill
+  )
+
+  const pillColor =
+    node.fills.length > 0 && node.fills[0].visible
+      ? node.fills[0].color
+      : { r: 0.37, g: 0.37, b: 0.37 }
+  const lum = 0.299 * pillColor.r + 0.587 * pillColor.g + 0.114 * pillColor.b
+  r.auxFill.setColor(lum > 0.5 ? r.ck.BLACK : r.ck.WHITE)
+  const textY = pillY + pillH * 0.7
+  canvas.drawText(displayText, pillX + SECTION_TITLE_PADDING_X, textY, r.auxFill, font)
+}
+
+export function drawComponentLabels(r: SkiaRenderer, canvas: Canvas, graph: SceneGraph): void {
+  if (!r.componentLabelFont || r.zoom < 0.15) return
+
+  const components = r.labelCache.getComponents(graph, r.worldViewport)
+  if (components.length === 0) return
+
+  const font = r.componentLabelFont
+  const compColor = r.compColor()
+  const iconS = COMPONENT_LABEL_ICON_SIZE
+
+  for (const { node, absX, absY, inside } of components) {
+    const screenX = absX * r.zoom + r.panX
+    const screenY = absY * r.zoom + r.panY
+
+    const labelX = screenX
+    let labelY: number
+    if (inside) {
+      labelY = screenY + COMPONENT_LABEL_GAP + COMPONENT_LABEL_FONT_SIZE
+    } else {
+      labelY = screenY - COMPONENT_LABEL_GAP
+    }
+
+    const iconX = labelX
+    const iconY = labelY - COMPONENT_LABEL_FONT_SIZE * 0.75
+    const iconCx = iconX + iconS / 2
+    const iconCy = iconY + iconS / 2
+    const iconR = iconS / 2
+
+    r.auxFill.setColor(compColor)
+
+    if (node.type === 'COMPONENT_SET') {
+      const s = iconR * 0.45
+      const gap = iconR * 0.2
+      const path = new r.ck.Path()
+      for (const [dx, dy] of [
+        [-1, -1],
+        [1, -1],
+        [-1, 1],
+        [1, 1]
+      ]) {
+        const cx = iconCx + dx * (s + gap)
+        const cy = iconCy + dy * (s + gap)
+        path.moveTo(cx, cy - s)
+        path.lineTo(cx + s, cy)
+        path.lineTo(cx, cy + s)
+        path.lineTo(cx - s, cy)
+        path.close()
+      }
+      canvas.drawPath(path, r.auxFill)
+      path.delete()
+    } else {
+      const path = new r.ck.Path()
+      path.moveTo(iconCx, iconCy - iconR)
+      path.lineTo(iconCx + iconR, iconCy)
+      path.lineTo(iconCx, iconCy + iconR)
+      path.lineTo(iconCx - iconR, iconCy)
+      path.close()
+      canvas.drawPath(path, r.auxFill)
+      path.delete()
+    }
+
+    canvas.drawText(
+      node.name,
+      labelX + iconS + COMPONENT_LABEL_ICON_GAP,
+      labelY,
+      r.auxFill,
+      font
+    )
+  }
+}

package/src/renderer/lru-cache.ts

@@ -0,0 +1,71 @@
+/**
+ * Simple LRU cache with configurable max size.
+ * Calls `dispose` on evicted values so WASM/CanvasKit objects are freed.
+ */
+export class LRUCache<K, V> {
+  private readonly map = new Map<K, V>()
+  private readonly dispose: (value: V) => void
+  readonly maxSize: number
+
+  constructor(maxSize: number, dispose: (value: V) => void) {
+    this.maxSize = maxSize
+    this.dispose = dispose
+  }
+
+  get(key: K): V | undefined {
+    const value = this.map.get(key)
+    if (value === undefined) return undefined
+    // Move to end (most recently used)
+    this.map.delete(key)
+    this.map.set(key, value)
+    return value
+  }
+
+  set(key: K, value: V): void {
+    const existing = this.map.get(key)
+    if (existing !== undefined) {
+      this.dispose(existing)
+      this.map.delete(key)
+    }
+    this.map.set(key, value)
+    this.evict()
+  }
+
+  has(key: K): boolean {
+    return this.map.has(key)
+  }
+
+  delete(key: K): boolean {
+    const value = this.map.get(key)
+    if (value === undefined) return false
+    this.dispose(value)
+    return this.map.delete(key)
+  }
+
+  clear(): void {
+    for (const value of this.map.values()) {
+      this.dispose(value)
+    }
+    this.map.clear()
+  }
+
+  get size(): number {
+    return this.map.size
+  }
+
+  values(): IterableIterator<V> {
+    return this.map.values()
+  }
+
+  keys(): IterableIterator<K> {
+    return this.map.keys()
+  }
+
+  private evict(): void {
+    while (this.map.size > this.maxSize) {
+      const { value: oldest } = this.map.keys().next()
+      if (oldest === undefined) break
+      this.delete(oldest)
+    }
+  }
+}