@hypen-space/web 0.2.0

package/src/canvas/renderer.ts

@@ -0,0 +1,422 @@
+/**
+ * Canvas Renderer
+ *
+ * Main renderer class that orchestrates layout, painting, and events
+ */
+
+import type { Renderer, Patch } from "@hypen/core";
+
+// Interface for the engine that canvas renderer needs
+interface IEngine {
+  dispatchAction(name: string, payload?: any): void;
+}
+import type {
+  VirtualNode,
+  CanvasRendererOptions,
+  PainterFunction,
+  LayoutFunction,
+} from "./types.js";
+import { computeLayout } 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";
+
+const DEFAULT_OPTIONS: CanvasRendererOptions = {
+  devicePixelRatio: typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1,
+  backgroundColor: "#ffffff",
+  enableAccessibility: true,
+  enableHitTesting: true,
+  enableInputOverlay: true,
+  enableDirtyRects: false,
+  enableLayerCaching: false,
+  maxLayerCacheSize: 10,
+  showLayoutBounds: false,
+  showDirtyRects: false,
+  logPerformance: false,
+};
+
+/**
+ * Canvas Renderer
+ */
+export class CanvasRenderer implements Renderer {
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D;
+  private engine: IEngine;
+  private options: CanvasRendererOptions;
+  
+  private rootNode: VirtualNode | null = null;
+  private nodes = new Map<string, VirtualNode>();
+  
+  private eventManager: CanvasEventManager;
+  private inputOverlay: InputOverlay;
+  private accessibilityLayer: AccessibilityLayer;
+  
+  private rafId: number | null = null;
+  private needsRedraw = false;
+  
+  private frameCount = 0;
+  private lastFrameTime = 0;
+
+  constructor(canvas: HTMLCanvasElement, engine: IEngine, options?: Partial<CanvasRendererOptions>) {
+    this.canvas = canvas;
+    this.engine = engine;
+    this.options = { ...DEFAULT_OPTIONS, ...options };
+
+    // Get context
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      throw new Error("Failed to get 2D context from canvas");
+    }
+    this.ctx = ctx;
+
+    // Setup HiDPI
+    this.setupHiDPI();
+
+    // Initialize subsystems
+    this.eventManager = new CanvasEventManager(canvas, engine);
+    this.inputOverlay = new InputOverlay(
+      (canvas as any).parentElement || (typeof document !== "undefined" ? document.body : null)
+    );
+    this.accessibilityLayer = new AccessibilityLayer(
+      (canvas as any).parentElement || (typeof document !== "undefined" ? document.body : null),
+      this.options.enableAccessibility || false
+    );
+
+    // Listen for redraw requests from event manager
+    this.canvas.addEventListener("hypen:redraw", () => this.scheduleRedraw());
+
+    // Don't schedule initial render - wait for patches
+  }
+
+  /**
+   * Setup HiDPI rendering
+   */
+  private setupHiDPI(): void {
+    const dpr = this.options.devicePixelRatio || 1;
+    const rect = this.canvas.getBoundingClientRect();
+
+    this.canvas.width = rect.width * dpr;
+    this.canvas.height = rect.height * dpr;
+
+    this.ctx.scale(dpr, dpr);
+
+    // Update canvas display size
+    this.canvas.style.width = `${rect.width}px`;
+    this.canvas.style.height = `${rect.height}px`;
+  }
+
+  /**
+   * Apply patches from engine
+   */
+  applyPatches(patches: Patch[]): void {
+    for (const patch of patches) {
+      this.applyPatch(patch);
+    }
+
+    // Update accessibility layer
+    if (this.rootNode) {
+      this.accessibilityLayer.syncTree(this.rootNode);
+    }
+
+    // Schedule redraw
+    this.scheduleRedraw();
+  }
+
+  /**
+   * Apply single patch
+   */
+  private applyPatch(patch: Patch): void {
+    switch (patch.type) {
+      case "create":
+        this.onCreate(patch.id!, (patch as any).element_type!, patch.props || {});
+        break;
+
+      case "setProp":
+        this.onSetProp(patch.id!, patch.name!, patch.value);
+        break;
+
+      case "setText":
+        this.onSetText(patch.id!, patch.text!);
+        break;
+
+      case "insert":
+        this.onInsert((patch as any).parent_id!, patch.id!, (patch as any).before_id);
+        break;
+
+      case "move":
+        this.onMove((patch as any).parent_id!, patch.id!, (patch as any).before_id);
+        break;
+
+      case "remove":
+        this.onRemove(patch.id!);
+        break;
+    }
+  }
+
+  /**
+   * Create new virtual node
+   */
+  private onCreate(id: string, elementType: string, props: Record<string, any>): void {
+    const node: VirtualNode = {
+      id,
+      type: elementType,
+      props: props instanceof Map ? Object.fromEntries(props) : props,
+      children: [],
+      parent: null,
+      visible: true,
+      opacity: parseFloat(props.opacity) || 1,
+      clickable: elementType === "button" || !!props.onclick,
+      hoverable: true,
+      focusable: elementType === "input" || elementType === "textarea" || elementType === "button",
+      focused: false,
+      hovered: false,
+    };
+
+    this.nodes.set(id, node);
+  }
+
+  /**
+   * Set property on node
+   */
+  private onSetProp(id: string, name: string, value: any): void {
+    const node = this.nodes.get(id);
+    if (!node) return;
+
+    node.props[name] = value;
+
+    // Update computed properties
+    if (name === "visible") {
+      node.visible = !!value;
+    }
+    if (name === "opacity") {
+      node.opacity = parseFloat(value) || 1;
+    }
+
+    // Update accessibility
+    this.accessibilityLayer.updateNode(node);
+  }
+
+  /**
+   * Set text on node
+   */
+  private onSetText(id: string, text: string): void {
+    const node = this.nodes.get(id);
+    if (!node) return;
+
+    node.props[0] = text;
+
+    // Update accessibility
+    this.accessibilityLayer.updateNode(node);
+  }
+
+  /**
+   * Insert node into tree
+   */
+  private onInsert(parentId: string, id: string, beforeId?: string): void {
+    const child = this.nodes.get(id);
+    if (!child) return;
+
+    // Check if this is setting the root node (parent_id === id === "root" or similar)
+    if (parentId === "root" && id === "root") {
+      this.rootNode = child;
+      this.eventManager.setRootNode(child);
+      return;
+    }
+
+    // Otherwise find the parent node
+    const parent = this.nodes.get(parentId);
+    if (!parent) {
+      // If parent is "root", this might be the first real root node
+      if (parentId === "root") {
+        this.rootNode = child;
+        this.eventManager.setRootNode(child);
+      }
+      return;
+    }
+
+    // Insert child into parent
+    child.parent = parent;
+
+    if (beforeId) {
+      const beforeIndex = parent.children.findIndex((c) => c.id === beforeId);
+      if (beforeIndex >= 0) {
+        parent.children.splice(beforeIndex, 0, child);
+      } else {
+        parent.children.push(child);
+      }
+    } else {
+      parent.children.push(child);
+    }
+  }
+
+  /**
+   * Move node in tree
+   */
+  private onMove(parentId: string, id: string, beforeId?: string): void {
+    // Remove from old parent
+    const node = this.nodes.get(id);
+    if (!node || !node.parent) return;
+
+    const oldParent = node.parent;
+    const oldIndex = oldParent.children.indexOf(node);
+    if (oldIndex >= 0) {
+      oldParent.children.splice(oldIndex, 1);
+    }
+
+    // Insert into new location
+    this.onInsert(parentId, id, beforeId);
+  }
+
+  /**
+   * Remove node from tree
+   */
+  private onRemove(id: string): void {
+    const node = this.nodes.get(id);
+    if (!node) return;
+
+    // Remove from parent
+    if (node.parent) {
+      const index = node.parent.children.indexOf(node);
+      if (index >= 0) {
+        node.parent.children.splice(index, 1);
+      }
+    }
+
+    // Remove from root
+    if (this.rootNode === node) {
+      this.rootNode = null;
+      this.eventManager.setRootNode(null);
+    }
+
+    // Remove from nodes map
+    this.nodes.delete(id);
+  }
+
+  /**
+   * Schedule redraw
+   */
+  private scheduleRedraw(): void {
+    if (this.rafId !== null) return;
+
+    // Use requestAnimationFrame if available (browser), otherwise render immediately (tests)
+    if (typeof requestAnimationFrame !== "undefined") {
+      this.rafId = requestAnimationFrame(() => {
+        this.render();
+        this.rafId = null;
+      });
+    } else {
+      // In non-browser environments (tests), render immediately
+      this.render();
+    }
+  }
+
+  /**
+   * Main render function
+   */
+  private render(): void {
+    const startTime = performance.now();
+
+    // Clear canvas
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+    // Draw background
+    if (this.options.backgroundColor) {
+      this.ctx.fillStyle = this.options.backgroundColor;
+      this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+
+    // Layout and paint
+    if (this.rootNode) {
+      // Compute layout
+      const dpr = this.options.devicePixelRatio || 1;
+      computeLayout(
+        this.ctx,
+        this.rootNode,
+        this.canvas.width / dpr,
+        this.canvas.height / dpr
+      );
+
+      // Paint
+      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) {
+        console.log(`Canvas FPS: ${this.frameCount}, Last frame: ${elapsed.toFixed(2)}ms`);
+        this.frameCount = 0;
+        this.lastFrameTime = performance.now();
+      }
+    }
+  }
+
+  /**
+   * Draw layout bounds for debugging
+   */
+  private drawLayoutBounds(node: VirtualNode): void {
+    if (!node.layout) return;
+
+    const layout = node.layout;
+
+    this.ctx.strokeStyle = "#ff0000";
+    this.ctx.lineWidth = 1;
+    this.ctx.strokeRect(layout.x, layout.y, layout.width, layout.height);
+
+    for (const child of node.children) {
+      this.drawLayoutBounds(child);
+    }
+  }
+
+  /**
+   * Get node by ID
+   */
+  getNode(id: string): VirtualNode | undefined {
+    return this.nodes.get(id);
+  }
+
+  /**
+   * Clear renderer
+   */
+  clear(): void {
+    this.rootNode = null;
+    this.nodes.clear();
+    this.eventManager.setRootNode(null);
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+
+  /**
+   * Register custom painter
+   */
+  registerPainter(type: string, painter: PainterFunction): void {
+    registerPainter(type, painter);
+  }
+
+  /**
+   * Set renderer options
+   */
+  setOptions(options: Partial<CanvasRendererOptions>): void {
+    this.options = { ...this.options, ...options };
+    this.accessibilityLayer.setEnabled(this.options.enableAccessibility || false);
+  }
+
+  /**
+   * Destroy renderer
+   */
+  destroy(): void {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+    }
+    this.eventManager.destroy();
+    this.accessibilityLayer.destroy();
+  }
+}
+

package/src/canvas/text.ts

@@ -0,0 +1,182 @@
+/**
+ * Text Rendering System
+ *
+ * Text measurement, wrapping, and rendering
+ */
+
+import type { FontStyle, TextMetrics, TextStyle } from "./types.js";
+import { createFontString } from "./utils.js";
+
+/**
+ * Text metrics cache
+ */
+const textMetricsCache = new Map<string, TextMetrics>();
+
+/**
+ * Get cache key for text metrics
+ */
+function getCacheKey(text: string, fontStyle: FontStyle, maxWidth?: number): string {
+  return `${text}|${fontStyle.fontSize}|${fontStyle.fontWeight}|${fontStyle.fontFamily}|${maxWidth || "auto"}`;
+}
+
+/**
+ * Measure text dimensions
+ */
+export function measureText(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  fontStyle: FontStyle,
+  maxWidth?: number
+): TextMetrics {
+  const cacheKey = getCacheKey(text, fontStyle, maxWidth);
+  const cached = textMetricsCache.get(cacheKey);
+  if (cached) return cached;
+
+  const font = createFontString(fontStyle.fontSize, fontStyle.fontWeight, fontStyle.fontFamily);
+  ctx.save();
+  ctx.font = font;
+
+  const lineHeight = fontStyle.lineHeight || fontStyle.fontSize * 1.2;
+
+  // No wrapping needed
+  if (!maxWidth) {
+    const metrics = ctx.measureText(text);
+    const result: TextMetrics = {
+      width: metrics.width,
+      height: lineHeight,
+      lines: [text],
+      lineHeight,
+    };
+    ctx.restore();
+    textMetricsCache.set(cacheKey, result);
+    return result;
+  }
+
+  // Wrap text
+  const lines = wrapText(ctx, text, maxWidth);
+  const width = Math.max(...lines.map((line) => ctx.measureText(line).width));
+  const height = lines.length * lineHeight;
+
+  const result: TextMetrics = {
+    width,
+    height,
+    lines,
+    lineHeight,
+  };
+
+  ctx.restore();
+  textMetricsCache.set(cacheKey, result);
+  return result;
+}
+
+/**
+ * Wrap text to fit within maxWidth
+ */
+function wrapText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number): string[] {
+  const lines: string[] = [];
+  const paragraphs = text.split("\n");
+
+  for (const paragraph of paragraphs) {
+    const words = paragraph.split(" ");
+    let currentLine = "";
+
+    for (const word of words) {
+      const testLine = currentLine ? `${currentLine} ${word}` : word;
+      const metrics = ctx.measureText(testLine);
+
+      if (metrics.width > maxWidth && currentLine) {
+        lines.push(currentLine);
+        currentLine = word;
+      } else {
+        currentLine = testLine;
+      }
+    }
+
+    if (currentLine) {
+      lines.push(currentLine);
+    }
+  }
+
+  return lines.length > 0 ? lines : [""];
+}
+
+/**
+ * Render text with style
+ */
+export function renderText(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  style: TextStyle
+): void {
+  const font = createFontString(style.fontSize, style.fontWeight, style.fontFamily);
+  ctx.save();
+  ctx.font = font;
+  ctx.fillStyle = style.color;
+  ctx.textBaseline = "top";
+
+  const metrics = measureText(ctx, text, style, width);
+
+  // Calculate starting Y based on vertical alignment
+  let startY = y;
+  if (style.verticalAlign === "middle") {
+    startY = y + (height - metrics.height) / 2;
+  } else if (style.verticalAlign === "bottom") {
+    startY = y + height - metrics.height;
+  }
+
+  // Render each line
+  for (let i = 0; i < metrics.lines.length; i++) {
+    const line = metrics.lines[i];
+    const lineY = startY + i * metrics.lineHeight;
+
+    // Calculate X based on text alignment
+    let lineX = x;
+    if (style.textAlign === "center") {
+      const lineWidth = ctx.measureText(line).width;
+      lineX = x + (width - lineWidth) / 2;
+    } else if (style.textAlign === "right") {
+      const lineWidth = ctx.measureText(line).width;
+      lineX = x + width - lineWidth;
+    }
+
+    ctx.fillText(line, lineX, lineY);
+  }
+
+  ctx.restore();
+}
+
+/**
+ * Clear text metrics cache
+ */
+export function clearTextCache(): void {
+  textMetricsCache.clear();
+}
+
+/**
+ * Preload font to ensure it's available
+ */
+export async function loadFont(fontFamily: string, fontWeight: string | number = "normal"): Promise<void> {
+  if (!("fonts" in document)) return;
+
+  const font = `${fontWeight} 16px ${fontFamily}`;
+  try {
+    await document.fonts.load(font);
+  } catch (error) {
+    console.warn(`Failed to load font: ${font}`, error);
+  }
+}
+
+
+
+
+
+
+
+
+
+
+