@hypen-space/web 0.4.46 → 0.4.82

package/src/canvas/paint.ts

@@ -6,6 +6,18 @@
 
 import type { VirtualNode, PainterFunction } from "./types.js";
 import { renderText } from "./text.js";
+import { ScrollManager, isScrollable } from "./scroll.js";
+import { getVisibleChildren, VIRTUALIZE_THRESHOLD } from "./virtualize.js";
+import type { SelectionManager } from "./selection.js";
+
+/**
+ * Module-level reference to the active SelectionManager so paintText
+ * can render selection highlights. Set once from the renderer.
+ */
+let activeSelectionManager: SelectionManager | null = null;
+export function setSelectionManager(mgr: SelectionManager | null): void {
+  activeSelectionManager = mgr;
+}
 
 /**
  * Custom painters registry
@@ -116,11 +128,44 @@ export function paintNode(ctx: CanvasRenderingContext2D, node: VirtualNode): voi
 
   ctx.restore();
 
-  // Paint children
-  for (const child of node.children) {
+  // Apply scroll translation for scrollable containers
+  const ss = node.scrollState;
+  if (ss && (ss.scrollX !== 0 || ss.scrollY !== 0)) {
+    ctx.save();
+    ctx.translate(-ss.scrollX, -ss.scrollY);
+    (node as any)._scrollRestore = true;
+  }
+
+  // Paint children -- use windowed rendering for large scrollable lists
+  const shouldVirtualize =
+    isScrollable(node) &&
+    node.children.length > VIRTUALIZE_THRESHOLD &&
+    node.layout != null;
+
+  const childrenToPaint = shouldVirtualize
+    ? getVisibleChildren(node, {
+        x: node.layout!.x,
+        y: node.layout!.y,
+        width: node.layout!.width,
+        height: node.layout!.height,
+      })
+    : node.children;
+
+  for (const child of childrenToPaint) {
     paintNode(ctx, child);
   }
 
+  // Undo scroll translation before drawing scrollbars
+  if ((node as any)._scrollRestore) {
+    ctx.restore();
+    delete (node as any)._scrollRestore;
+  }
+
+  // Paint scrollbar indicators (on top of children, inside clip)
+  if (ss && ss.scrollbarOpacity > 0) {
+    ScrollManager.paintScrollbars(ctx, node);
+  }
+
   // Restore context if overflow clipping was applied
   if ((node as any)._needsRestore) {
     ctx.restore();
@@ -206,6 +251,11 @@ function paintContainer(ctx: CanvasRenderingContext2D, node: VirtualNode): void
  * Paint text node
  */
 function paintText(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
+  // Draw selection highlight behind text
+  if (activeSelectionManager) {
+    activeSelectionManager.paintSelection(ctx, node);
+  }
+
   const layout = node.layout!;
   const props = node.props;
 
@@ -1217,7 +1267,8 @@ function paintAvatar(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
 }
 
 /**
- * Paint icon node (simple placeholder - real icons would need SVG path support)
+ * Paint icon node using SVG path data from the engine's icon registry.
+ * Falls back to simple shapes if no path data is provided.
  */
 function paintIcon(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
   const layout = node.layout!;
@@ -1226,25 +1277,71 @@ function paintIcon(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
   const size = Math.min(layout.width, layout.height);
   const x = layout.x;
   const y = layout.y;
-  const color = props.color || "#000000";
-  const iconName = props.icon || props.name || "circle";
+  const color = props.color || props["color.0"] || "#000000";
+
+  // Server-resolved SVG path data (from engine's ResourceRegistry)
+  const iconPaths: Array<{
+    d: string;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+  }> = props.__iconPaths;
+  const viewBox: string = props.__iconViewBox || "0 0 24 24";
+
+  if (iconPaths && Array.isArray(iconPaths) && iconPaths.length > 0) {
+    // Parse viewBox to compute scale
+    const vbParts = viewBox.split(" ").map(Number);
+    const vbWidth = vbParts[2] || 24;
+    const vbHeight = vbParts[3] || 24;
+    const scale = size / Math.max(vbWidth, vbHeight);
+
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.scale(scale, scale);
+
+    for (const pathData of iconPaths) {
+      const path2d = new Path2D(pathData.d);
+      const fill = pathData.fill || "none";
+      const stroke =
+        (pathData.stroke || "currentColor") === "currentColor"
+          ? color
+          : pathData.stroke || color;
+
+      if (fill && fill !== "none") {
+        ctx.fillStyle = fill === "currentColor" ? color : fill;
+        ctx.fill(path2d);
+      }
+      if (stroke && stroke !== "none") {
+        ctx.strokeStyle = stroke;
+        ctx.lineWidth = (pathData.strokeWidth || 2) ;
+        ctx.lineCap = "round";
+        ctx.lineJoin = "round";
+        ctx.stroke(path2d);
+      }
+    }
 
+    ctx.restore();
+    return;
+  }
+
+  // Fallback: simple shapes for when no icon registry is available
+  const iconName = props.icon || props.name || props["0"] || "circle";
   ctx.fillStyle = color;
   ctx.strokeStyle = color;
   ctx.lineWidth = 2;
 
-  // Simple icon shapes
-  switch (iconName.toLowerCase()) {
+  switch (String(iconName).toLowerCase()) {
     case "circle":
       ctx.beginPath();
       ctx.arc(x + size / 2, y + size / 2, size / 3, 0, Math.PI * 2);
       ctx.fill();
       break;
 
-    case "square":
+    case "square": {
       const padding = size * 0.2;
       ctx.fillRect(x + padding, y + padding, size - padding * 2, size - padding * 2);
       break;
+    }
 
     case "star":
       drawStar(ctx, x + size / 2, y + size / 2, 5, size / 3, size / 6);
@@ -1252,7 +1349,7 @@ function paintIcon(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
       break;
 
     case "check":
-    case "checkmark":
+    case "checkmark": {
       const p = size * 0.2;
       ctx.beginPath();
       ctx.moveTo(x + p, y + size / 2);
@@ -1260,9 +1357,10 @@ function paintIcon(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
       ctx.lineTo(x + size - p, y + p);
       ctx.stroke();
       break;
+    }
 
     case "x":
-    case "close":
+    case "close": {
       const pd = size * 0.2;
       ctx.beginPath();
       ctx.moveTo(x + pd, y + pd);
@@ -1271,9 +1369,9 @@ function paintIcon(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
       ctx.lineTo(x + pd, y + size - pd);
       ctx.stroke();
       break;
+    }
 
     default:
-      // Default: filled circle
       ctx.beginPath();
       ctx.arc(x + size / 2, y + size / 2, size / 3, 0, Math.PI * 2);
       ctx.fill();

package/src/canvas/renderer.ts

@@ -20,12 +20,16 @@ import type {
   PainterFunction,
   LayoutFunction,
 } from "./types.js";
-import { computeLayout } from "./layout.js";
+import { computeLayout, initTaffyLayout } from "./layout.js";
 import { paintNode, registerPainter } from "./paint.js";
 import { CanvasEventManager } from "./events.js";
 import { InputOverlay } from "./input.js";
 import { AccessibilityLayer } from "./accessibility.js";
 import { findNodeById } from "./utils.js";
+import { ScrollManager } from "./scroll.js";
+import { SelectionManager } from "./selection.js";
+import { setSelectionManager } from "./paint.js";
+import { DirtyRectTracker } from "./dirty.js";
 
 const DEFAULT_OPTIONS: CanvasRendererOptions = {
   devicePixelRatio: typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1,
@@ -54,12 +58,16 @@ export class CanvasRenderer implements Renderer {
   private nodes = new Map<string, VirtualNode>();
   
   private eventManager: CanvasEventManager;
+  private scrollManager: ScrollManager;
+  private selectionManager: SelectionManager;
   private inputOverlay: InputOverlay;
   private accessibilityLayer: AccessibilityLayer;
   
+  private dirtyTracker: DirtyRectTracker;
+
   private rafId: number | null = null;
   private needsRedraw = false;
-  
+
   private frameCount = 0;
   private lastFrameTime = 0;
 
@@ -78,8 +86,16 @@ export class CanvasRenderer implements Renderer {
     // Setup HiDPI
     this.setupHiDPI();
 
+    // Initialize dirty rect tracker
+    const dpr = this.options.devicePixelRatio || 1;
+    const rect = canvas.getBoundingClientRect();
+    this.dirtyTracker = new DirtyRectTracker(rect.width, rect.height);
+
     // Initialize subsystems
     this.eventManager = new CanvasEventManager(canvas, engine);
+    this.scrollManager = new ScrollManager(canvas, () => this.scheduleRedraw());
+    this.selectionManager = new SelectionManager(canvas, () => this.scheduleRedraw());
+    setSelectionManager(this.selectionManager);
     this.inputOverlay = new InputOverlay(
       (canvas as any).parentElement || (typeof document !== "undefined" ? document.body : null)
     );
@@ -91,6 +107,9 @@ export class CanvasRenderer implements Renderer {
     // Listen for redraw requests from event manager
     this.canvas.addEventListener("hypen:redraw", () => this.scheduleRedraw());
 
+    // Eagerly initialise Taffy WASM for layout (non-blocking — fallback used until ready)
+    initTaffyLayout();
+
     // Don't schedule initial render - wait for patches
   }
 
@@ -109,16 +128,40 @@ export class CanvasRenderer implements Renderer {
     // Update canvas display size
     this.canvas.style.width = `${rect.width}px`;
     this.canvas.style.height = `${rect.height}px`;
+
+    // Sync dirty tracker with new canvas size
+    if (this.dirtyTracker) {
+      this.dirtyTracker.setCanvasSize(rect.width, rect.height);
+      this.dirtyTracker.markFullDirty();
+    }
+  }
+
+  /**
+   * Resize the canvas and re-run HiDPI setup + redraw.
+   * Called by DOMRenderer when the Canvas component's width/height props change.
+   */
+  resize(width: number, height: number): void {
+    this.canvas.width = width;
+    this.canvas.height = height;
+    this.setupHiDPI();
+    this.scheduleRedraw();
   }
 
   /**
    * Apply patches from engine
    */
   applyPatches(patches: Patch[]): void {
+    const hadRoot = this.rootNode !== null;
+
     for (const patch of patches) {
       this.applyPatch(patch);
     }
 
+    // On first render (root just appeared), mark the entire canvas dirty
+    if (this.options.enableDirtyRects && !hadRoot && this.rootNode !== null) {
+      this.dirtyTracker.markFullDirty();
+    }
+
     // Update accessibility layer
     if (this.rootNode) {
       this.accessibilityLayer.syncTree(this.rootNode);
@@ -175,7 +218,7 @@ export class CanvasRenderer implements Renderer {
       parent: null,
       visible: true,
       opacity: parseFloat(props.opacity) || 1,
-      clickable: elementType === "button" || !!props.onclick,
+      clickable: elementType === "button" || !!props.onclick || !!props.action,
       hoverable: true,
       focusable: elementType === "input" || elementType === "textarea" || elementType === "button",
       focused: false,
@@ -192,6 +235,11 @@ export class CanvasRenderer implements Renderer {
     const node = this.nodes.get(id);
     if (!node) return;
 
+    // Mark dirty before prop change (old bounds)
+    if (this.options.enableDirtyRects) {
+      this.dirtyTracker.markNodeDirty(node);
+    }
+
     node.props[name] = value;
 
     // Update computed properties
@@ -201,6 +249,14 @@ export class CanvasRenderer implements Renderer {
     if (name === "opacity") {
       node.opacity = parseFloat(value) || 1;
     }
+    if (name === "action" || name === "onclick") {
+      node.clickable = !!value;
+    }
+
+    // Mark dirty after prop change (new bounds will be captured after layout)
+    if (this.options.enableDirtyRects) {
+      this.dirtyTracker.markNodeDirty(node);
+    }
 
     // Update accessibility
     this.accessibilityLayer.updateNode(node);
@@ -213,6 +269,10 @@ export class CanvasRenderer implements Renderer {
     const node = this.nodes.get(id);
     if (!node) return;
 
+    if (this.options.enableDirtyRects) {
+      this.dirtyTracker.markNodeDirty(node);
+    }
+
     delete node.props[name];
 
     if (name === "visible") {
@@ -222,6 +282,10 @@ export class CanvasRenderer implements Renderer {
       node.opacity = 1;
     }
 
+    if (this.options.enableDirtyRects) {
+      this.dirtyTracker.markNodeDirty(node);
+    }
+
     this.accessibilityLayer.updateNode(node);
   }
 
@@ -232,8 +296,16 @@ export class CanvasRenderer implements Renderer {
     const node = this.nodes.get(id);
     if (!node) return;
 
+    if (this.options.enableDirtyRects) {
+      this.dirtyTracker.markNodeDirty(node);
+    }
+
     node.props[0] = text;
 
+    if (this.options.enableDirtyRects) {
+      this.dirtyTracker.markNodeDirty(node);
+    }
+
     // Update accessibility
     this.accessibilityLayer.updateNode(node);
   }
@@ -249,6 +321,8 @@ export class CanvasRenderer implements Renderer {
     if (parentId === "root" && id === "root") {
       this.rootNode = child;
       this.eventManager.setRootNode(child);
+      this.scrollManager.setRootNode(child);
+      this.selectionManager.setRootNode(child);
       return;
     }
 
@@ -259,6 +333,8 @@ export class CanvasRenderer implements Renderer {
       if (parentId === "root") {
         this.rootNode = child;
         this.eventManager.setRootNode(child);
+      this.scrollManager.setRootNode(child);
+      this.selectionManager.setRootNode(child);
       }
       return;
     }
@@ -276,6 +352,11 @@ export class CanvasRenderer implements Renderer {
     } else {
       parent.children.push(child);
     }
+
+    // Mark parent dirty since its children changed
+    if (this.options.enableDirtyRects) {
+      this.dirtyTracker.markNodeDirty(parent);
+    }
   }
 
   /**
@@ -287,12 +368,19 @@ export class CanvasRenderer implements Renderer {
     if (!node || !node.parent) return;
 
     const oldParent = node.parent;
+
+    // Mark old position dirty before move
+    if (this.options.enableDirtyRects) {
+      this.dirtyTracker.markNodeDirty(node);
+      this.dirtyTracker.markNodeDirty(oldParent);
+    }
+
     const oldIndex = oldParent.children.indexOf(node);
     if (oldIndex >= 0) {
       oldParent.children.splice(oldIndex, 1);
     }
 
-    // Insert into new location
+    // Insert into new location (also marks new parent dirty)
     this.onInsert(parentId, id, beforeId);
   }
 
@@ -303,6 +391,11 @@ export class CanvasRenderer implements Renderer {
     const node = this.nodes.get(id);
     if (!node) return;
 
+    // Mark dirty before removal
+    if (this.options.enableDirtyRects) {
+      this.dirtyTracker.markNodeDirty(node);
+    }
+
     // Remove from parent
     if (node.parent) {
       const index = node.parent.children.indexOf(node);
@@ -315,6 +408,8 @@ export class CanvasRenderer implements Renderer {
     if (this.rootNode === node) {
       this.rootNode = null;
       this.eventManager.setRootNode(null);
+      this.scrollManager.setRootNode(null);
+    this.selectionManager.setRootNode(null);
     }
 
     // Remove from nodes map
@@ -344,7 +439,30 @@ export class CanvasRenderer implements Renderer {
    */
   private render(): void {
     const startTime = performance.now();
+    const dpr = this.options.devicePixelRatio || 1;
+
+    if (this.options.enableDirtyRects) {
+      this.renderWithDirtyRects(dpr);
+    } else {
+      this.renderFull(dpr);
+    }
+
+    // Performance logging
+    if (this.options.logPerformance) {
+      const elapsed = performance.now() - startTime;
+      this.frameCount++;
+      if (performance.now() - this.lastFrameTime > 1000) {
+        log.debug(`Canvas FPS: ${this.frameCount}, Last frame: ${elapsed.toFixed(2)}ms`);
+        this.frameCount = 0;
+        this.lastFrameTime = performance.now();
+      }
+    }
+  }
 
+  /**
+   * Full canvas repaint (default behavior when dirty rects disabled)
+   */
+  private renderFull(dpr: number): void {
     // Clear canvas
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
@@ -356,8 +474,6 @@ export class CanvasRenderer implements Renderer {
 
     // Layout and paint
     if (this.rootNode) {
-      // Compute layout
-      const dpr = this.options.devicePixelRatio || 1;
       computeLayout(
         this.ctx,
         this.rootNode,
@@ -365,25 +481,76 @@ export class CanvasRenderer implements Renderer {
         this.canvas.height / dpr
       );
 
-      // Paint
+      ScrollManager.updateScrollBounds(this.rootNode);
+
       paintNode(this.ctx, this.rootNode);
 
-      // Debug: show layout bounds
       if (this.options.showLayoutBounds) {
         this.drawLayoutBounds(this.rootNode);
       }
     }
+  }
 
-    // Performance logging
-    if (this.options.logPerformance) {
-      const elapsed = performance.now() - startTime;
-      this.frameCount++;
-      if (performance.now() - this.lastFrameTime > 1000) {
-        log.debug(`Canvas FPS: ${this.frameCount}, Last frame: ${elapsed.toFixed(2)}ms`);
-        this.frameCount = 0;
-        this.lastFrameTime = performance.now();
+  /**
+   * Optimized render that only repaints dirty regions
+   */
+  private renderWithDirtyRects(dpr: number): void {
+    // Always run layout so nodes have up-to-date bounds
+    if (this.rootNode) {
+      computeLayout(
+        this.ctx,
+        this.rootNode,
+        this.canvas.width / dpr,
+        this.canvas.height / dpr
+      );
+      ScrollManager.updateScrollBounds(this.rootNode);
+    }
+
+    const dirtyRegion = this.dirtyTracker.getDirtyRegion();
+    this.dirtyTracker.clear();
+
+    // Nothing dirty — skip repaint entirely
+    if (dirtyRegion === null) {
+      return;
+    }
+
+    this.ctx.save();
+
+    // Clip to dirty region so only affected pixels are drawn
+    this.ctx.beginPath();
+    this.ctx.rect(dirtyRegion.x, dirtyRegion.y, dirtyRegion.width, dirtyRegion.height);
+    this.ctx.clip();
+
+    // Clear only the dirty region
+    this.ctx.clearRect(dirtyRegion.x, dirtyRegion.y, dirtyRegion.width, dirtyRegion.height);
+
+    // Repaint background within dirty region
+    if (this.options.backgroundColor) {
+      this.ctx.fillStyle = this.options.backgroundColor;
+      this.ctx.fillRect(dirtyRegion.x, dirtyRegion.y, dirtyRegion.width, dirtyRegion.height);
+    }
+
+    // Repaint the full tree — clip path ensures only dirty pixels are touched
+    if (this.rootNode) {
+      paintNode(this.ctx, this.rootNode);
+
+      if (this.options.showLayoutBounds) {
+        this.drawLayoutBounds(this.rootNode);
       }
     }
+
+    this.ctx.restore();
+
+    // Debug: show dirty rect outline
+    if (this.options.showDirtyRects) {
+      this.ctx.save();
+      this.ctx.strokeStyle = "rgba(255, 0, 0, 0.8)";
+      this.ctx.lineWidth = 2;
+      this.ctx.setLineDash([4, 2]);
+      this.ctx.strokeRect(dirtyRegion.x, dirtyRegion.y, dirtyRegion.width, dirtyRegion.height);
+      this.ctx.setLineDash([]);
+      this.ctx.restore();
+    }
   }
 
   /**
@@ -417,6 +584,9 @@ export class CanvasRenderer implements Renderer {
     this.rootNode = null;
     this.nodes.clear();
     this.eventManager.setRootNode(null);
+    this.scrollManager.setRootNode(null);
+    this.selectionManager.setRootNode(null);
+    this.dirtyTracker.clear();
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
   }
 
@@ -443,6 +613,9 @@ export class CanvasRenderer implements Renderer {
       cancelAnimationFrame(this.rafId);
     }
     this.eventManager.destroy();
+    this.scrollManager.destroy();
+    this.selectionManager.destroy();
+    setSelectionManager(null);
     this.accessibilityLayer.destroy();
   }
 }