@zseven-w/pen-renderer 0.0.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zseven-w/pen-renderer",
-  "version": "0.0.1",
+  "version": "0.6.0",
   "description": "Standalone CanvasKit/Skia renderer for OpenPencil (.op) design files",
   "type": "module",
   "exports": {
@@ -16,8 +16,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@zseven-w/pen-types": "0.0.1",
-    "@zseven-w/pen-core": "0.0.1",
+    "@zseven-w/pen-types": "0.6.0",
+    "@zseven-w/pen-core": "0.6.0",
     "rbush": "^4.0.1"
   },
   "peerDependencies": {

package/src/__tests__/document-flattener.test.ts

@@ -0,0 +1,201 @@
+import { describe, it, expect } from 'vitest'
+import type { PenNode } from '@zseven-w/pen-types'
+import { flattenToRenderNodes } from '../document-flattener'
+
+const frame = (props: Partial<PenNode> & { children?: PenNode[] }): PenNode => ({
+  id: 'f1', type: 'frame', x: 0, y: 0, ...props,
+} as PenNode)
+
+const text = (id: string, content: string, props: Partial<PenNode> = {}): PenNode => ({
+  id, type: 'text', x: 0, y: 0, content, fontSize: 16, ...props,
+} as PenNode)
+
+describe('flattenToRenderNodes — dimension consistency', () => {
+  it('absH uses getNodeHeight for text without height, not sizeToNumber 100 fallback', () => {
+    // Simulates text after fixTextHeights deleted height
+    const root = frame({
+      id: 'root', width: 400, height: 600, layout: 'vertical' as any,
+      children: [
+        // Text with no height property (deleted by fixTextHeights)
+        { id: 't1', type: 'text', content: 'Hello world', fontSize: 16,
+          width: 'fill_container' as any } as PenNode,
+      ],
+    })
+
+    const nodes = flattenToRenderNodes([root])
+    const t1 = nodes.find(rn => rn.node.id === 't1')!
+
+    // absH should reflect estimated text height (~18-24px for single line at 16px),
+    // NOT the 100px sizeToNumber fallback
+    expect(t1.absH).toBeLessThan(50)
+    expect(t1.absH).toBeGreaterThan(10)
+  })
+
+  it('absW matches child layout width for frame with no explicit width', () => {
+    const root = frame({
+      id: 'root', width: 400, height: 600, layout: 'vertical' as any,
+      children: [
+        frame({
+          id: 'inner',
+          // No explicit width — getNodeWidth should compute from children
+          height: 100,
+          children: [
+            { id: 'r1', type: 'rectangle', x: 0, y: 0, width: 200, height: 50 } as PenNode,
+          ],
+        }),
+      ],
+    })
+
+    const nodes = flattenToRenderNodes([root])
+    const inner = nodes.find(rn => rn.node.id === 'inner')!
+
+    // inner absW should come from getNodeWidth (fitContentWidth → 200),
+    // not the sizeToNumber fallback of 100
+    expect(inner.absW).toBeGreaterThanOrEqual(200)
+  })
+
+  it('nested text nodes get correct positions and non-zero dimensions', () => {
+    const root = frame({
+      id: 'root', width: 375, height: 812, layout: 'vertical' as any,
+      padding: [20, 16],
+      gap: 8,
+      children: [
+        frame({
+          id: 'card', width: 'fill_container' as any, height: 'fit_content' as any,
+          layout: 'vertical' as any, padding: [16, 16], gap: 8,
+          children: [
+            text('title', 'Card Title', { width: 'fill_container' as any, fontSize: 18, fontWeight: '600' }),
+            text('desc', 'Description text that may wrap.', { width: 'fill_container' as any, fontSize: 14 }),
+          ],
+        }),
+      ],
+    })
+
+    const nodes = flattenToRenderNodes([root])
+
+    for (const rn of nodes) {
+      expect(rn.absW, `${rn.node.id} width > 0`).toBeGreaterThan(0)
+      expect(rn.absH, `${rn.node.id} height > 0`).toBeGreaterThan(0)
+    }
+
+    const card = nodes.find(rn => rn.node.id === 'card')!
+    const title = nodes.find(rn => rn.node.id === 'title')!
+    const desc = nodes.find(rn => rn.node.id === 'desc')!
+
+    // title inside card
+    expect(title.absX).toBeGreaterThan(card.absX)
+    expect(title.absY).toBeGreaterThan(card.absY)
+
+    // desc below title
+    expect(desc.absY).toBeGreaterThan(title.absY)
+  })
+
+  it('absW/absH match nodeW/nodeH for frame without explicit dimensions', () => {
+    // Frame has children but no explicit width — not inside a layout parent,
+    // so computeLayoutPositions does NOT set width. This exposes the divergence
+    // between sizeToNumber (fallback 100) and getNodeWidth (fitContent → 200).
+    const root = frame({
+      id: 'root', width: 400, height: 600,
+      // No layout, gap, padding, or fill_container children → inferLayout returns undefined
+      children: [
+        frame({
+          id: 'inner',
+          // No explicit width or height
+          children: [
+            { id: 'r1', type: 'rectangle', x: 10, y: 10, width: 200, height: 50 } as PenNode,
+          ],
+        }),
+      ],
+    })
+
+    const nodes = flattenToRenderNodes([root])
+    const inner = nodes.find(rn => rn.node.id === 'inner')!
+
+    // getNodeWidth → fitContentWidth → 200 (from child rectangle)
+    // Before fix: absW = 100 (sizeToNumber fallback). After fix: absW = 200.
+    expect(inner.absW).toBeGreaterThanOrEqual(200)
+    // getNodeHeight → fitContentHeight → 50 (from child rectangle)
+    // Before fix: absH = 100 (fallback). After fix: absH = 50 (or greater).
+    expect(inner.absH).toBeGreaterThanOrEqual(50)
+    expect(inner.absH).toBeLessThan(100) // not the 100 fallback
+  })
+
+  it('children with stripped x/y in layout frame get correct positions', () => {
+    const root = frame({
+      id: 'root', width: 400, height: 600, layout: 'vertical' as any,
+      padding: [20, 16],
+      gap: 12,
+      children: [
+        // x/y stripped by sanitizeLayoutChildPositions
+        { id: 't1', type: 'text', content: 'First', fontSize: 16,
+          width: 'fill_container' as any } as PenNode,
+        { id: 't2', type: 'text', content: 'Second', fontSize: 16,
+          width: 'fill_container' as any } as PenNode,
+      ],
+    })
+
+    const nodes = flattenToRenderNodes([root])
+    const t1 = nodes.find(rn => rn.node.id === 't1')!
+    const t2 = nodes.find(rn => rn.node.id === 't2')!
+
+    // t1 at padding offset
+    expect(t1.absX).toBe(16) // pad.left
+    expect(t1.absY).toBe(20) // pad.top
+
+    // t2 below t1 + gap
+    expect(t2.absY).toBeGreaterThan(t1.absY + t1.absH)
+  })
+
+  it('root frame clipRect matches absW/absH, not a divergent nodeW/nodeH', () => {
+    // Root frame (depth=0) creates a clipRect for its children.
+    // clipRect must use the same dimensions as the RenderNode's absW/absH.
+    const root = frame({
+      id: 'root', width: 400, height: 600,
+      cornerRadius: 12,
+      layout: 'vertical' as any,
+      children: [
+        text('t1', 'Hello', { width: 'fill_container' as any }),
+      ],
+    })
+
+    const nodes = flattenToRenderNodes([root])
+    const rootRN = nodes.find(rn => rn.node.id === 'root')!
+    const t1 = nodes.find(rn => rn.node.id === 't1')!
+
+    // Root frame itself has no clipRect (it IS the clip source)
+    expect(rootRN.clipRect).toBeUndefined()
+
+    // Child inherits root's clip — must match root's rendered dimensions
+    expect(t1.clipRect).toBeDefined()
+    expect(t1.clipRect!.w).toBe(rootRN.absW)
+    expect(t1.clipRect!.h).toBe(rootRN.absH)
+    expect(t1.clipRect!.x).toBe(rootRN.absX)
+    expect(t1.clipRect!.y).toBe(rootRN.absY)
+  })
+
+  it('root frame clipRect matches absW/absH for frame without explicit height', () => {
+    // Frame with fit_content height — getNodeHeight computes from children.
+    // clipRect.h must equal the RenderNode's absH, not a stale fallback.
+    const root = frame({
+      id: 'root', width: 375,
+      // No explicit height — relies on getNodeHeight → fitContentHeight
+      layout: 'vertical' as any,
+      padding: [20, 16],
+      children: [
+        text('t1', 'Card title', { width: 'fill_container' as any, fontSize: 18 }),
+      ],
+    })
+
+    const nodes = flattenToRenderNodes([root])
+    const rootRN = nodes.find(rn => rn.node.id === 'root')!
+    const t1 = nodes.find(rn => rn.node.id === 't1')!
+
+    // absH should be computed from content, not 100 fallback
+    expect(rootRN.absH).toBeGreaterThan(0)
+
+    // clipRect must match absH
+    expect(t1.clipRect).toBeDefined()
+    expect(t1.clipRect!.h).toBe(rootRN.absH)
+    expect(t1.clipRect!.w).toBe(rootRN.absW)
+  })
+})

package/src/document-flattener.ts

@@ -52,7 +52,7 @@ export function premeasureTextHeights(nodes: PenNode[]): PenNode[] {
         ? tNode.content
         : Array.isArray(tNode.content)
           ? tNode.content.map((s) => s.text ?? '').join('')
-          : ''
+          : (tNode as unknown as Record<string, unknown>).text as string ?? ''
 
       const textAlign = tNode.textAlign
       const isFixedWidthText = textGrowth === 'fixed-width' || textGrowth === 'fixed-width-height'
@@ -172,8 +172,16 @@ export function flattenToRenderNodes(
 
     const absX = (resolved.x ?? 0) + offsetX
     const absY = (resolved.y ?? 0) + offsetY
-    const absW = 'width' in resolved ? sizeToNumber(resolved.width, 100) : 100
-    const absH = 'height' in resolved ? sizeToNumber(resolved.height, 100) : 100
+
+    // Compute authoritative dimensions once via getNodeWidth/getNodeHeight.
+    // Used for: RenderNode absW/absH, child available space, and clip rect.
+    // This replaces the prior split where absW/absH used sizeToNumber (raw
+    // parse + 100 fallback) while child layout used getNodeWidth/getNodeHeight,
+    // causing divergence when nodes lacked numeric dimensions.
+    const nodeW = getNodeWidth(resolved, parentAvailW)
+    const nodeH = getNodeHeight(resolved, parentAvailH, parentAvailW)
+    const absW = nodeW > 0 ? nodeW : ('width' in resolved ? sizeToNumber(resolved.width, 100) : 100)
+    const absH = nodeH > 0 ? nodeH : ('height' in resolved ? sizeToNumber(resolved.height, 100) : 100)
 
     result.push({
       node: { ...resolved, x: absX, y: absY } as PenNode,
@@ -184,8 +192,6 @@ export function flattenToRenderNodes(
     // Recurse into children
     const children = 'children' in node ? node.children : undefined
     if (children && children.length > 0) {
-      const nodeW = getNodeWidth(resolved, parentAvailW)
-      const nodeH = getNodeHeight(resolved, parentAvailH, parentAvailW)
       const pad = resolvePadding('padding' in resolved ? (resolved as PenNode & ContainerProps).padding : undefined)
       const childAvailW = Math.max(0, nodeW - pad.left - pad.right)
       const childAvailH = Math.max(0, nodeH - pad.top - pad.bottom)

package/src/paint-utils.ts

@@ -71,6 +71,7 @@ export function resolveFillColor(fills?: PenFill[] | string): string {
   if (typeof fills === 'string') return fills
   if (!fills || fills.length === 0) return DEFAULT_FILL
   const first = fills[0]
+  if (!first) return DEFAULT_FILL
   if (first.type === 'solid') return first.color
   if (first.type === 'linear_gradient' || first.type === 'radial_gradient') {
     return first.stops[0]?.color ?? DEFAULT_FILL
@@ -80,8 +81,10 @@ export function resolveFillColor(fills?: PenFill[] | string): string {
 
 export function resolveStrokeColor(stroke?: PenStroke): string | undefined {
   if (!stroke) return undefined
+  if (typeof stroke === 'string') return stroke
   if (typeof stroke.fill === 'string') return stroke.fill
   if (stroke.fill && stroke.fill.length > 0) return resolveFillColor(stroke.fill)
+  if ('color' in stroke && typeof (stroke as any).color === 'string') return (stroke as any).color
   return undefined
 }
 

package/src/text-renderer.ts

@@ -153,7 +153,7 @@ export class SkiaTextRenderer {
       ? tNode.content
       : Array.isArray(tNode.content)
         ? tNode.content.map((s) => s.text ?? '').join('')
-        : ''
+        : (tNode as unknown as Record<string, unknown>).text as string ?? ''
     if (!content) return true
 
     const fontSize = tNode.fontSize ?? 16
@@ -288,10 +288,15 @@ export class SkiaTextRenderer {
     }
     const surfaceH = para.getHeight() + 2
 
-    // Try paragraph image cache: drawImageRect is far cheaper than drawParagraph per frame
-    const imgScale = Math.min(this._dpr, 2)
-    let cachedImg = this.paraImageCache.get(cacheKey)
-    if (cachedImg === undefined) {
+    // Try paragraph image cache: drawImageRect is far cheaper than drawParagraph per frame.
+    // Skip cache when zoomed in (> 1x) or significantly zoomed out (< 0.5x) — cached
+    // bitmaps are at fixed DPR resolution and produce jagged edges when scaled by the
+    // viewport transform. At normal zoom (0.5–1x), bitmap cache is safe and fast.
+    const useParaImageCache = this.zoom >= 0.5 && this.zoom <= 1
+    // Always rasterize at 2x minimum — 1x bitmaps produce jagged text on low-DPR displays
+    const imgScale = Math.max(this._dpr, 2)
+    let cachedImg: any = useParaImageCache ? this.paraImageCache.get(cacheKey) : null
+    if (useParaImageCache && cachedImg === undefined) {
       cachedImg = null
       const sw = Math.min(Math.ceil(surfaceW * imgScale), 4096)
       const sh = Math.min(Math.ceil(surfaceH * imgScale), 4096)
@@ -310,7 +315,7 @@ export class SkiaTextRenderer {
           }
         }
       }
-      this.paraImageCache.set(cacheKey, cachedImg)
+      if (useParaImageCache) this.paraImageCache.set(cacheKey, cachedImg)
     }
 
     if (cachedImg) {
@@ -399,7 +404,7 @@ export class SkiaTextRenderer {
       ? tNode.content
       : Array.isArray(tNode.content)
         ? tNode.content.map((s) => s.text ?? '').join('')
-        : ''
+        : (tNode as unknown as Record<string, unknown>).text as string ?? ''
 
     if (!content) return