@hypen-space/web 0.4.45 → 0.4.81

package/src/canvas/dirty.ts

@@ -0,0 +1,116 @@
+/**
+ * Dirty Rect Tracker
+ *
+ * Tracks which rectangular regions of the canvas have changed and need repainting.
+ * Instead of per-node tracking, we accumulate dirty rectangles and merge them into
+ * a single bounding box. The canvas clip path ensures only dirty pixels are drawn.
+ */
+
+import type { Rectangle, VirtualNode } from "./types.js";
+
+export class DirtyRectTracker {
+  private dirtyRegion: Rectangle | null = null;
+  private canvasWidth: number;
+  private canvasHeight: number;
+
+  constructor(canvasWidth: number, canvasHeight: number) {
+    this.canvasWidth = canvasWidth;
+    this.canvasHeight = canvasHeight;
+  }
+
+  /**
+   * Update canvas dimensions (e.g. on resize)
+   */
+  setCanvasSize(width: number, height: number): void {
+    this.canvasWidth = width;
+    this.canvasHeight = height;
+  }
+
+  /**
+   * Union a rectangle into the dirty region
+   */
+  markDirty(rect: Rectangle): void {
+    if (rect.width <= 0 || rect.height <= 0) return;
+
+    if (this.dirtyRegion === null) {
+      this.dirtyRegion = { ...rect };
+    } else {
+      this.dirtyRegion = unionRects(this.dirtyRegion, rect);
+    }
+  }
+
+  /**
+   * Mark both old and new bounds of a node as dirty.
+   * This ensures the old position is erased and the new position is painted.
+   */
+  markNodeDirty(node: VirtualNode): void {
+    if (node.layout) {
+      // Mark current layout bounds (covers both erase of old content and paint of new)
+      this.markDirty({
+        x: node.layout.x,
+        y: node.layout.y,
+        width: node.layout.width,
+        height: node.layout.height,
+      });
+    }
+  }
+
+  /**
+   * Mark the entire canvas as dirty (first render, resize, etc.)
+   */
+  markFullDirty(): void {
+    this.dirtyRegion = {
+      x: 0,
+      y: 0,
+      width: this.canvasWidth,
+      height: this.canvasHeight,
+    };
+  }
+
+  /**
+   * Returns the merged bounding box of all dirty rects, or null if clean.
+   * Adds a 1px padding to avoid sub-pixel clipping artifacts.
+   */
+  getDirtyRegion(): Rectangle | null {
+    if (this.dirtyRegion === null) return null;
+
+    // Expand by 1px to avoid sub-pixel edge artifacts, clamped to canvas bounds
+    const padded: Rectangle = {
+      x: Math.max(0, Math.floor(this.dirtyRegion.x) - 1),
+      y: Math.max(0, Math.floor(this.dirtyRegion.y) - 1),
+      width: Math.min(
+        this.canvasWidth,
+        Math.ceil(this.dirtyRegion.width) + 2
+      ),
+      height: Math.min(
+        this.canvasHeight,
+        Math.ceil(this.dirtyRegion.height) + 2
+      ),
+    };
+
+    return padded;
+  }
+
+  /**
+   * Reset dirty state after a frame
+   */
+  clear(): void {
+    this.dirtyRegion = null;
+  }
+}
+
+/**
+ * Compute the union (bounding box) of two rectangles
+ */
+function unionRects(a: Rectangle, b: Rectangle): Rectangle {
+  const x = Math.min(a.x, b.x);
+  const y = Math.min(a.y, b.y);
+  const right = Math.max(a.x + a.width, b.x + b.width);
+  const bottom = Math.max(a.y + a.height, b.y + b.height);
+  return {
+    x,
+    y,
+    width: right - x,
+    height: bottom - y,
+  };
+}

package/src/canvas/events.ts

@@ -5,7 +5,8 @@
  */
 
 import type { VirtualNode, Point } from "./types.js";
-import { isPointInRoundedRect, getAbsoluteBounds } from "./utils.js";
+import { isPointInRoundedRect } from "./utils.js";
+import { getScrollAwareBounds } from "./scroll.js";
 
 // Interface for the engine that CanvasEventManager needs
 interface IEngine {
@@ -29,6 +30,7 @@ export class CanvasEventManager {
   private boundOnMouseUp!: (e: MouseEvent) => void;
   private boundOnClick!: (e: MouseEvent) => void;
   private boundOnDoubleClick!: (e: MouseEvent) => void;
+  private boundOnContextMenu!: (e: MouseEvent) => void;
   private boundOnKeyDown!: (e: KeyboardEvent) => void;
   private boundOnKeyUp!: (e: KeyboardEvent) => void;
 
@@ -54,6 +56,7 @@ export class CanvasEventManager {
     this.boundOnMouseUp = this.onMouseUp.bind(this);
     this.boundOnClick = this.onClick.bind(this);
     this.boundOnDoubleClick = this.onDoubleClick.bind(this);
+    this.boundOnContextMenu = this.onContextMenu.bind(this);
     this.boundOnKeyDown = this.onKeyDown.bind(this);
     this.boundOnKeyUp = this.onKeyUp.bind(this);
 
@@ -62,6 +65,7 @@ export class CanvasEventManager {
     this.canvas.addEventListener("mouseup", this.boundOnMouseUp);
     this.canvas.addEventListener("click", this.boundOnClick);
     this.canvas.addEventListener("dblclick", this.boundOnDoubleClick);
+    this.canvas.addEventListener("contextmenu", this.boundOnContextMenu);
     this.canvas.addEventListener("keydown", this.boundOnKeyDown);
     this.canvas.addEventListener("keyup", this.boundOnKeyUp);
   }
@@ -94,7 +98,7 @@ export class CanvasEventManager {
   private hitTestNode(node: VirtualNode, point: Point): VirtualNode | null {
     if (!node.visible || !node.layout) return null;
 
-    const bounds = getAbsoluteBounds(node);
+    const bounds = getScrollAwareBounds(node);
     if (!bounds) return null;
 
     // Test children first (front to back)
@@ -218,6 +222,27 @@ export class CanvasEventManager {
     }
   }
 
+  /**
+   * Handle context menu (right-click)
+   */
+  private onContextMenu(e: MouseEvent): void {
+    const point = this.getCanvasCoordinates(e);
+    const node = this.hitTest(point);
+
+    if (node) {
+      const actionName = node.props["oncontextmenu"] || node.props["contextmenu"];
+
+      if (actionName && typeof actionName === "string") {
+        e.preventDefault();
+        this.dispatchNodeEvent(node, "contextmenu", {
+          button: e.button,
+          clientX: e.clientX,
+          clientY: e.clientY,
+        });
+      }
+    }
+  }
+
   /**
    * Handle keyboard events
    */
@@ -284,7 +309,12 @@ export class CanvasEventManager {
    */
   private dispatchNodeEvent(node: VirtualNode, eventType: string, data: any): void {
     // Check if node has action handler for this event
-    const actionName = node.props[`on${eventType}`] || node.props[eventType];
+    let actionName = node.props[`on${eventType}`] || node.props[eventType];
+
+    // Actionable components: fall back to "action" prop for click events
+    if (!actionName && eventType === "click" && node.props.action) {
+      actionName = node.props.action;
+    }
 
     if (actionName && typeof actionName === "string") {
       // Dispatch to engine
@@ -315,6 +345,7 @@ export class CanvasEventManager {
     this.canvas.removeEventListener("mouseup", this.boundOnMouseUp);
     this.canvas.removeEventListener("click", this.boundOnClick);
     this.canvas.removeEventListener("dblclick", this.boundOnDoubleClick);
+    this.canvas.removeEventListener("contextmenu", this.boundOnContextMenu);
     this.canvas.removeEventListener("keydown", this.boundOnKeyDown);
     this.canvas.removeEventListener("keyup", this.boundOnKeyUp);
     this.rootNode = null;

package/src/canvas/index.ts

@@ -9,6 +9,10 @@ export { registerPainter } from "./paint.js";
 export { CanvasEventManager } from "./events.js";
 export { InputOverlay } from "./input.js";
 export { AccessibilityLayer } from "./accessibility.js";
+export { initTaffyLayout } from "./layout.js";
+export { ScrollManager } from "./scroll.js";
+export { DirtyRectTracker } from "./dirty.js";
+export { SelectionManager } from "./selection.js";
 
 export type {
   VirtualNode,
@@ -18,6 +22,7 @@ export type {
   FontStyle,
   TextStyle,
   TextMetrics,
+  ScrollState,
   CanvasRendererOptions,
   PainterFunction,
   LayoutFunction,