@hypen-space/web 0.2.0

package/src/canvas/events.ts

@@ -0,0 +1,307 @@
+/**
+ * Event System
+ *
+ * Hit testing and event handling for canvas nodes
+ */
+
+import type { VirtualNode, Point } from "./types.js";
+import { isPointInRoundedRect, getAbsoluteBounds } from "./utils.js";
+
+// Interface for the engine that CanvasEventManager needs
+interface IEngine {
+  dispatchAction(name: string, payload?: any): void;
+}
+
+/**
+ * Canvas Event Manager
+ */
+export class CanvasEventManager {
+  private canvas: HTMLCanvasElement;
+  private engine: IEngine;
+  private rootNode: VirtualNode | null = null;
+  private hoveredNode: VirtualNode | null = null;
+  private focusedNode: VirtualNode | null = null;
+  private mouseDownNode: VirtualNode | null = null;
+
+  constructor(canvas: HTMLCanvasElement, engine: IEngine) {
+    this.canvas = canvas;
+    this.engine = engine;
+    this.setupEventListeners();
+  }
+
+  /**
+   * Set the root node for hit testing
+   */
+  setRootNode(node: VirtualNode | null): void {
+    this.rootNode = node;
+  }
+
+  /**
+   * Setup canvas event listeners
+   */
+  private setupEventListeners(): void {
+    this.canvas.addEventListener("mousemove", this.onMouseMove.bind(this));
+    this.canvas.addEventListener("mousedown", this.onMouseDown.bind(this));
+    this.canvas.addEventListener("mouseup", this.onMouseUp.bind(this));
+    this.canvas.addEventListener("click", this.onClick.bind(this));
+    this.canvas.addEventListener("dblclick", this.onDoubleClick.bind(this));
+    this.canvas.addEventListener("keydown", this.onKeyDown.bind(this));
+    this.canvas.addEventListener("keyup", this.onKeyUp.bind(this));
+  }
+
+  /**
+   * Get canvas coordinates from mouse event
+   */
+  private getCanvasCoordinates(e: MouseEvent): Point {
+    const rect = this.canvas.getBoundingClientRect();
+    const scaleX = this.canvas.width / rect.width;
+    const scaleY = this.canvas.height / rect.height;
+
+    return {
+      x: (e.clientX - rect.left) * scaleX,
+      y: (e.clientY - rect.top) * scaleY,
+    };
+  }
+
+  /**
+   * Find node at canvas coordinates
+   */
+  private hitTest(point: Point): VirtualNode | null {
+    if (!this.rootNode) return null;
+    return this.hitTestNode(this.rootNode, point);
+  }
+
+  /**
+   * Recursively test node and children
+   */
+  private hitTestNode(node: VirtualNode, point: Point): VirtualNode | null {
+    if (!node.visible || !node.layout) return null;
+
+    const bounds = getAbsoluteBounds(node);
+    if (!bounds) return null;
+
+    // Test children first (front to back)
+    for (let i = node.children.length - 1; i >= 0; i--) {
+      const child = node.children[i];
+      const hit = this.hitTestNode(child, point);
+      if (hit) return hit;
+    }
+
+    // Test this node
+    const radius = node.layout.border.radius;
+    if (isPointInRoundedRect(point, bounds, radius)) {
+      return node;
+    }
+
+    return null;
+  }
+
+  /**
+   * Handle mouse move
+   */
+  private onMouseMove(e: MouseEvent): void {
+    const point = this.getCanvasCoordinates(e);
+    const node = this.hitTest(point);
+
+    // Update hover state
+    if (node !== this.hoveredNode) {
+      // Leave old node
+      if (this.hoveredNode) {
+        this.hoveredNode.hovered = false;
+        this.dispatchNodeEvent(this.hoveredNode, "mouseleave", {});
+      }
+
+      // Enter new node
+      this.hoveredNode = node;
+      if (node) {
+        node.hovered = true;
+        this.dispatchNodeEvent(node, "mouseenter", {});
+      }
+
+      // Update cursor
+      this.updateCursor(node);
+
+      // Request redraw for hover effects
+      this.requestRedraw();
+    }
+  }
+
+  /**
+   * Handle mouse down
+   */
+  private onMouseDown(e: MouseEvent): void {
+    const point = this.getCanvasCoordinates(e);
+    const node = this.hitTest(point);
+
+    this.mouseDownNode = node;
+
+    if (node && node.clickable) {
+      this.dispatchNodeEvent(node, "mousedown", {
+        button: e.button,
+        clientX: e.clientX,
+        clientY: e.clientY,
+      });
+    }
+
+    // Update focus
+    if (node && node.focusable) {
+      this.setFocus(node);
+    } else {
+      this.setFocus(null);
+    }
+  }
+
+  /**
+   * Handle mouse up
+   */
+  private onMouseUp(e: MouseEvent): void {
+    const point = this.getCanvasCoordinates(e);
+    const node = this.hitTest(point);
+
+    if (node && node.clickable) {
+      this.dispatchNodeEvent(node, "mouseup", {
+        button: e.button,
+        clientX: e.clientX,
+        clientY: e.clientY,
+      });
+    }
+
+    this.mouseDownNode = null;
+  }
+
+  /**
+   * Handle click
+   */
+  private onClick(e: MouseEvent): void {
+    const point = this.getCanvasCoordinates(e);
+    const node = this.hitTest(point);
+
+    if (node && node.clickable && node === this.mouseDownNode) {
+      this.dispatchNodeEvent(node, "click", {
+        button: e.button,
+        clientX: e.clientX,
+        clientY: e.clientY,
+      });
+    }
+  }
+
+  /**
+   * Handle double click
+   */
+  private onDoubleClick(e: MouseEvent): void {
+    const point = this.getCanvasCoordinates(e);
+    const node = this.hitTest(point);
+
+    if (node && node.clickable) {
+      this.dispatchNodeEvent(node, "dblclick", {
+        button: e.button,
+        clientX: e.clientX,
+        clientY: e.clientY,
+      });
+    }
+  }
+
+  /**
+   * Handle keyboard events
+   */
+  private onKeyDown(e: KeyboardEvent): void {
+    if (this.focusedNode) {
+      this.dispatchNodeEvent(this.focusedNode, "keydown", {
+        key: e.key,
+        code: e.code,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        altKey: e.altKey,
+      });
+    }
+  }
+
+  private onKeyUp(e: KeyboardEvent): void {
+    if (this.focusedNode) {
+      this.dispatchNodeEvent(this.focusedNode, "keyup", {
+        key: e.key,
+        code: e.code,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        altKey: e.altKey,
+      });
+    }
+  }
+
+  /**
+   * Set focused node
+   */
+  private setFocus(node: VirtualNode | null): void {
+    if (node === this.focusedNode) return;
+
+    if (this.focusedNode) {
+      this.focusedNode.focused = false;
+      this.dispatchNodeEvent(this.focusedNode, "blur", {});
+    }
+
+    this.focusedNode = node;
+
+    if (node) {
+      node.focused = true;
+      this.dispatchNodeEvent(node, "focus", {});
+    }
+
+    this.requestRedraw();
+  }
+
+  /**
+   * Update cursor based on node
+   */
+  private updateCursor(node: VirtualNode | null): void {
+    if (!node) {
+      this.canvas.style.cursor = "default";
+      return;
+    }
+
+    const cursor = node.props.cursor || (node.clickable ? "pointer" : "default");
+    this.canvas.style.cursor = cursor;
+  }
+
+  /**
+   * Dispatch event to engine
+   */
+  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];
+
+    if (actionName && typeof actionName === "string") {
+      // Dispatch to engine
+      this.engine.dispatchAction(actionName, {
+        type: eventType,
+        nodeId: node.id,
+        timestamp: Date.now(),
+        ...data,
+      });
+    }
+  }
+
+  /**
+   * Request redraw from renderer
+   */
+  private requestRedraw(): void {
+    // This will be called via a callback set by the renderer
+    // For now, dispatch a custom event
+    this.canvas.dispatchEvent(new CustomEvent("hypen:redraw"));
+  }
+
+  /**
+   * Cleanup
+   */
+  destroy(): void {
+    // Remove event listeners if needed
+  }
+}
+
+
+
+
+
+
+
+
+

package/src/canvas/index.ts

@@ -0,0 +1,35 @@
+/**
+ * Canvas Renderer for Hypen
+ *
+ * Browser-only module for rendering Hypen UI to Canvas
+ */
+
+export { CanvasRenderer } from "./renderer.js";
+export { registerPainter } from "./paint.js";
+export { CanvasEventManager } from "./events.js";
+export { InputOverlay } from "./input.js";
+export { AccessibilityLayer } from "./accessibility.js";
+
+export type {
+  VirtualNode,
+  Layout,
+  Rectangle,
+  Point,
+  FontStyle,
+  TextStyle,
+  TextMetrics,
+  CanvasRendererOptions,
+  PainterFunction,
+  LayoutFunction,
+} from "./types.js";
+
+
+
+
+
+
+
+
+
+
+

package/src/canvas/input.ts

@@ -0,0 +1,210 @@
+/**
+ * Input Overlay System
+ *
+ * Handle text input using DOM overlay elements
+ */
+
+import type { VirtualNode, Rectangle } from "./types.js";
+import { getAbsoluteBounds } from "./utils.js";
+
+/**
+ * Input Overlay Manager
+ */
+export class InputOverlay {
+  private container: HTMLElement;
+  private overlay: HTMLInputElement | HTMLTextAreaElement | null = null;
+  private focusedNode: VirtualNode | null = null;
+  private onChangeCallback: ((value: string) => void) | null = null;
+
+  constructor(container: HTMLElement | null) {
+    this.container = container || ({} as HTMLElement);
+  }
+
+  /**
+   * Show input overlay for a node
+   */
+  showInput(
+    node: VirtualNode,
+    canvasBounds: DOMRect,
+    onChange: (value: string) => void
+  ): void {
+    // Skip if document is not available (non-browser environment)
+    if (typeof document === "undefined") return;
+
+    this.hideInput();
+
+    const bounds = getAbsoluteBounds(node);
+    if (!bounds) return;
+
+    const isMultiline = node.type === "textarea";
+    this.overlay = isMultiline
+      ? document.createElement("textarea")
+      : document.createElement("input");
+
+    // Style overlay
+    this.styleOverlay(node, bounds, canvasBounds);
+
+    // Set initial value
+    const value = node.props.value || "";
+    this.overlay.value = value;
+
+    // Setup event handlers
+    this.onChangeCallback = onChange;
+    this.overlay.addEventListener("input", this.onInput.bind(this));
+    this.overlay.addEventListener("blur", this.onBlur.bind(this));
+    this.overlay.addEventListener("keydown", this.onKeyDown.bind(this) as EventListener);
+
+    // Add to DOM and focus
+    this.container.appendChild(this.overlay);
+    this.overlay.focus();
+
+    this.focusedNode = node;
+  }
+
+  /**
+   * Hide input overlay
+   */
+  hideInput(): void {
+    if (this.overlay) {
+      this.overlay.remove();
+      this.overlay = null;
+    }
+    this.focusedNode = null;
+    this.onChangeCallback = null;
+  }
+
+  /**
+   * Update overlay position
+   */
+  updatePosition(node: VirtualNode, canvasBounds: DOMRect): void {
+    if (!this.overlay || node !== this.focusedNode) return;
+
+    const bounds = getAbsoluteBounds(node);
+    if (!bounds) return;
+
+    this.positionOverlay(bounds, canvasBounds);
+  }
+
+  /**
+   * Style overlay to match canvas node
+   */
+  private styleOverlay(
+    node: VirtualNode,
+    bounds: Rectangle,
+    canvasBounds: DOMRect
+  ): void {
+    if (!this.overlay) return;
+
+    const props = node.props;
+
+    // Position
+    this.positionOverlay(bounds, canvasBounds);
+
+    // Font and text styling
+    const fontSize = parseFloat(props.fontSize) || 16;
+    const fontWeight = props.fontWeight || "normal";
+    const fontFamily = props.fontFamily || "system-ui, sans-serif";
+    const color = props.color || "#000000";
+
+    Object.assign(this.overlay.style, {
+      fontSize: `${fontSize}px`,
+      fontWeight: fontWeight,
+      fontFamily: fontFamily,
+      color: color,
+      border: "none",
+      outline: "2px solid #007bff",
+      backgroundColor: props.backgroundColor || "#ffffff",
+      padding: `${props.padding || 8}px`,
+      borderRadius: `${props.borderRadius || 4}px`,
+      boxSizing: "border-box",
+      resize: "none",
+    });
+
+    // Placeholder
+    if (props.placeholder) {
+      this.overlay.placeholder = props.placeholder;
+    }
+
+    // Input type
+    if (this.overlay instanceof HTMLInputElement && props.type) {
+      this.overlay.type = props.type;
+    }
+  }
+
+  /**
+   * Position overlay over canvas node
+   */
+  private positionOverlay(bounds: Rectangle, canvasBounds: DOMRect): void {
+    if (!this.overlay) return;
+
+    // Calculate scale factor between canvas and display
+    const canvas = this.container.querySelector("canvas") as HTMLCanvasElement;
+    const scaleX = canvasBounds.width / canvas.width;
+    const scaleY = canvasBounds.height / canvas.height;
+
+    const left = bounds.x * scaleX;
+    const top = bounds.y * scaleY;
+    const width = bounds.width * scaleX;
+    const height = bounds.height * scaleY;
+
+    Object.assign(this.overlay.style, {
+      position: "absolute",
+      left: `${left}px`,
+      top: `${top}px`,
+      width: `${width}px`,
+      height: `${height}px`,
+    });
+  }
+
+  /**
+   * Handle input event
+   */
+  private onInput(e: Event): void {
+    if (!this.overlay || !this.onChangeCallback) return;
+
+    const value = this.overlay.value;
+    this.onChangeCallback(value);
+  }
+
+  /**
+   * Handle blur event
+   */
+  private onBlur(): void {
+    // Hide overlay when focus is lost
+    this.hideInput();
+  }
+
+  /**
+   * Handle keyboard events
+   */
+  private onKeyDown(e: KeyboardEvent): void {
+    if (!this.overlay) return;
+
+    // Enter key submits (unless multiline)
+    if (e.key === "Enter" && this.overlay instanceof HTMLInputElement) {
+      e.preventDefault();
+      this.overlay.blur();
+    }
+
+    // Escape cancels
+    if (e.key === "Escape") {
+      e.preventDefault();
+      this.overlay.blur();
+    }
+  }
+
+  /**
+   * Check if input is currently shown
+   */
+  isShown(): boolean {
+    return this.overlay !== null;
+  }
+
+  /**
+   * Get current focused node
+   */
+  getFocusedNode(): VirtualNode | null {
+    return this.focusedNode;
+  }
+}
+