@hypen-space/web 0.4.36 → 0.4.37

package/dist/canvas/events.js

@@ -1,378 +1,282 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toCommonJS = (from) => {
-  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
-  if (entry)
-    return entry;
-  entry = __defProp({}, "__esModule", { value: true });
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (var key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(entry, key))
-        __defProp(entry, key, {
-          get: __accessProp.bind(from, key),
-          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-        });
-  }
-  __moduleCache.set(from, entry);
-  return entry;
-};
-var __moduleCache;
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: __exportSetter.bind(all, name)
-    });
-};
-var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
-
-// src/canvas/utils.ts
-function parseSpacing(value) {
-  if (typeof value === "number") {
-    return { top: value, right: value, bottom: value, left: value };
-  }
-  if (typeof value === "string") {
-    const parts = value.split(/\s+/).map((v) => parseFloat(v) || 0);
-    if (parts.length === 1) {
-      return { top: parts[0], right: parts[0], bottom: parts[0], left: parts[0] };
+/**
+ * Event System
+ *
+ * Hit testing and event handling for canvas nodes
+ */
+import { isPointInRoundedRect, getAbsoluteBounds } from "./utils.js";
+/**
+ * Canvas Event Manager
+ */
+export class CanvasEventManager {
+    canvas;
+    engine;
+    rootNode = null;
+    hoveredNode = null;
+    focusedNode = null;
+    mouseDownNode = null;
+    // Bound handler references for cleanup
+    boundOnMouseMove;
+    boundOnMouseDown;
+    boundOnMouseUp;
+    boundOnClick;
+    boundOnDoubleClick;
+    boundOnKeyDown;
+    boundOnKeyUp;
+    constructor(canvas, engine) {
+        this.canvas = canvas;
+        this.engine = engine;
+        this.setupEventListeners();
     }
-    if (parts.length === 2) {
-      return { top: parts[0], right: parts[1], bottom: parts[0], left: parts[1] };
+    /**
+     * Set the root node for hit testing
+     */
+    setRootNode(node) {
+        this.rootNode = node;
     }
-    if (parts.length === 4) {
-      return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[3] };
+    /**
+     * Setup canvas event listeners
+     */
+    setupEventListeners() {
+        this.boundOnMouseMove = this.onMouseMove.bind(this);
+        this.boundOnMouseDown = this.onMouseDown.bind(this);
+        this.boundOnMouseUp = this.onMouseUp.bind(this);
+        this.boundOnClick = this.onClick.bind(this);
+        this.boundOnDoubleClick = this.onDoubleClick.bind(this);
+        this.boundOnKeyDown = this.onKeyDown.bind(this);
+        this.boundOnKeyUp = this.onKeyUp.bind(this);
+        this.canvas.addEventListener("mousemove", this.boundOnMouseMove);
+        this.canvas.addEventListener("mousedown", this.boundOnMouseDown);
+        this.canvas.addEventListener("mouseup", this.boundOnMouseUp);
+        this.canvas.addEventListener("click", this.boundOnClick);
+        this.canvas.addEventListener("dblclick", this.boundOnDoubleClick);
+        this.canvas.addEventListener("keydown", this.boundOnKeyDown);
+        this.canvas.addEventListener("keyup", this.boundOnKeyUp);
     }
-  }
-  if (typeof value === "object" && value !== null) {
-    return {
-      top: parseFloat(value.top) || 0,
-      right: parseFloat(value.right) || 0,
-      bottom: parseFloat(value.bottom) || 0,
-      left: parseFloat(value.left) || 0
-    };
-  }
-  return { top: 0, right: 0, bottom: 0, left: 0 };
-}
-function parseSize(value) {
-  if (typeof value === "number")
-    return value;
-  if (typeof value === "string") {
-    if (value === "auto")
-      return null;
-    const num = parseFloat(value);
-    return isNaN(num) ? null : num;
-  }
-  return null;
-}
-function isPointInRect(point, rect) {
-  return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
-}
-function isPointInRoundedRect(point, rect, radius) {
-  const { x, y, width, height } = rect;
-  if (!isPointInRect(point, rect))
-    return false;
-  if (radius <= 0)
-    return true;
-  const px = point.x;
-  const py = point.y;
-  if (px < x + radius && py < y + radius) {
-    return Math.pow(px - (x + radius), 2) + Math.pow(py - (y + radius), 2) <= Math.pow(radius, 2);
-  }
-  if (px > x + width - radius && py < y + radius) {
-    return Math.pow(px - (x + width - radius), 2) + Math.pow(py - (y + radius), 2) <= Math.pow(radius, 2);
-  }
-  if (px < x + radius && py > y + height - radius) {
-    return Math.pow(px - (x + radius), 2) + Math.pow(py - (y + height - radius), 2) <= Math.pow(radius, 2);
-  }
-  if (px > x + width - radius && py > y + height - radius) {
-    return Math.pow(px - (x + width - radius), 2) + Math.pow(py - (y + height - radius), 2) <= Math.pow(radius, 2);
-  }
-  return true;
-}
-function mergeRects(rects) {
-  if (rects.length === 0)
-    return null;
-  if (rects.length === 1)
-    return rects[0];
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  for (const rect of rects) {
-    minX = Math.min(minX, rect.x);
-    minY = Math.min(minY, rect.y);
-    maxX = Math.max(maxX, rect.x + rect.width);
-    maxY = Math.max(maxY, rect.y + rect.height);
-  }
-  return {
-    x: minX,
-    y: minY,
-    width: maxX - minX,
-    height: maxY - minY
-  };
-}
-function createFontString(fontSize, fontWeight, fontFamily) {
-  return `${fontWeight} ${fontSize}px ${fontFamily}`;
-}
-function walkTree(node, callback) {
-  callback(node);
-  for (const child of node.children) {
-    walkTree(child, callback);
-  }
-}
-function findNodeById(root, id) {
-  if (root.id === id)
-    return root;
-  for (const child of root.children) {
-    const found = findNodeById(child, id);
-    if (found)
-      return found;
-  }
-  return null;
-}
-function getAbsoluteBounds(node) {
-  if (!node.layout)
-    return null;
-  let x = node.layout.x;
-  let y = node.layout.y;
-  let current = node.parent;
-  while (current && current.layout) {
-    x += current.layout.contentX;
-    y += current.layout.contentY;
-    current = current.parent;
-  }
-  return {
-    x,
-    y,
-    width: node.layout.width,
-    height: node.layout.height
-  };
-}
-
-// src/canvas/events.ts
-class CanvasEventManager {
-  canvas;
-  engine;
-  rootNode = null;
-  hoveredNode = null;
-  focusedNode = null;
-  mouseDownNode = null;
-  boundOnMouseMove;
-  boundOnMouseDown;
-  boundOnMouseUp;
-  boundOnClick;
-  boundOnDoubleClick;
-  boundOnKeyDown;
-  boundOnKeyUp;
-  constructor(canvas, engine) {
-    this.canvas = canvas;
-    this.engine = engine;
-    this.setupEventListeners();
-  }
-  setRootNode(node) {
-    this.rootNode = node;
-  }
-  setupEventListeners() {
-    this.boundOnMouseMove = this.onMouseMove.bind(this);
-    this.boundOnMouseDown = this.onMouseDown.bind(this);
-    this.boundOnMouseUp = this.onMouseUp.bind(this);
-    this.boundOnClick = this.onClick.bind(this);
-    this.boundOnDoubleClick = this.onDoubleClick.bind(this);
-    this.boundOnKeyDown = this.onKeyDown.bind(this);
-    this.boundOnKeyUp = this.onKeyUp.bind(this);
-    this.canvas.addEventListener("mousemove", this.boundOnMouseMove);
-    this.canvas.addEventListener("mousedown", this.boundOnMouseDown);
-    this.canvas.addEventListener("mouseup", this.boundOnMouseUp);
-    this.canvas.addEventListener("click", this.boundOnClick);
-    this.canvas.addEventListener("dblclick", this.boundOnDoubleClick);
-    this.canvas.addEventListener("keydown", this.boundOnKeyDown);
-    this.canvas.addEventListener("keyup", this.boundOnKeyUp);
-  }
-  getCanvasCoordinates(e) {
-    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
-    };
-  }
-  hitTest(point) {
-    if (!this.rootNode)
-      return null;
-    return this.hitTestNode(this.rootNode, point);
-  }
-  hitTestNode(node, point) {
-    if (!node.visible || !node.layout)
-      return null;
-    const bounds = getAbsoluteBounds(node);
-    if (!bounds)
-      return null;
-    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;
+    /**
+     * Get canvas coordinates from mouse event
+     */
+    getCanvasCoordinates(e) {
+        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
+     */
+    hitTest(point) {
+        if (!this.rootNode)
+            return null;
+        return this.hitTestNode(this.rootNode, point);
     }
-    const radius = node.layout.border.radius;
-    if (isPointInRoundedRect(point, bounds, radius)) {
-      return node;
+    /**
+     * Recursively test node and children
+     */
+    hitTestNode(node, point) {
+        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;
     }
-    return null;
-  }
-  onMouseMove(e) {
-    const point = this.getCanvasCoordinates(e);
-    const node = this.hitTest(point);
-    if (node !== this.hoveredNode) {
-      if (this.hoveredNode) {
-        this.hoveredNode.hovered = false;
-        this.dispatchNodeEvent(this.hoveredNode, "mouseleave", {});
-      }
-      this.hoveredNode = node;
-      if (node) {
-        node.hovered = true;
-        this.dispatchNodeEvent(node, "mouseenter", {});
-      }
-      this.updateCursor(node);
-      this.requestRedraw();
+    /**
+     * Handle mouse move
+     */
+    onMouseMove(e) {
+        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();
+        }
     }
-  }
-  onMouseDown(e) {
-    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
-      });
+    /**
+     * Handle mouse down
+     */
+    onMouseDown(e) {
+        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);
+        }
     }
-    if (node && node.focusable) {
-      this.setFocus(node);
-    } else {
-      this.setFocus(null);
+    /**
+     * Handle mouse up
+     */
+    onMouseUp(e) {
+        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;
     }
-  }
-  onMouseUp(e) {
-    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
-      });
+    /**
+     * Handle click
+     */
+    onClick(e) {
+        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,
+            });
+        }
     }
-    this.mouseDownNode = null;
-  }
-  onClick(e) {
-    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
+     */
+    onDoubleClick(e) {
+        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,
+            });
+        }
     }
-  }
-  onDoubleClick(e) {
-    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
+     */
+    onKeyDown(e) {
+        if (this.focusedNode) {
+            this.dispatchNodeEvent(this.focusedNode, "keydown", {
+                key: e.key,
+                code: e.code,
+                ctrlKey: e.ctrlKey,
+                shiftKey: e.shiftKey,
+                altKey: e.altKey,
+            });
+        }
     }
-  }
-  onKeyDown(e) {
-    if (this.focusedNode) {
-      this.dispatchNodeEvent(this.focusedNode, "keydown", {
-        key: e.key,
-        code: e.code,
-        ctrlKey: e.ctrlKey,
-        shiftKey: e.shiftKey,
-        altKey: e.altKey
-      });
+    onKeyUp(e) {
+        if (this.focusedNode) {
+            this.dispatchNodeEvent(this.focusedNode, "keyup", {
+                key: e.key,
+                code: e.code,
+                ctrlKey: e.ctrlKey,
+                shiftKey: e.shiftKey,
+                altKey: e.altKey,
+            });
+        }
     }
-  }
-  onKeyUp(e) {
-    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
+     */
+    setFocus(node) {
+        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();
     }
-  }
-  setFocus(node) {
-    if (node === this.focusedNode)
-      return;
-    if (this.focusedNode) {
-      this.focusedNode.focused = false;
-      this.dispatchNodeEvent(this.focusedNode, "blur", {});
+    /**
+     * Update cursor based on node
+     */
+    updateCursor(node) {
+        if (!node) {
+            this.canvas.style.cursor = "default";
+            return;
+        }
+        const cursor = node.props.cursor || (node.clickable ? "pointer" : "default");
+        this.canvas.style.cursor = cursor;
     }
-    this.focusedNode = node;
-    if (node) {
-      node.focused = true;
-      this.dispatchNodeEvent(node, "focus", {});
+    /**
+     * Dispatch event to engine
+     */
+    dispatchNodeEvent(node, eventType, data) {
+        // 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,
+            });
+        }
     }
-    this.requestRedraw();
-  }
-  updateCursor(node) {
-    if (!node) {
-      this.canvas.style.cursor = "default";
-      return;
+    /**
+     * Request redraw from renderer
+     */
+    requestRedraw() {
+        // This will be called via a callback set by the renderer
+        // For now, dispatch a custom event
+        this.canvas.dispatchEvent(new CustomEvent("hypen:redraw"));
     }
-    const cursor = node.props.cursor || (node.clickable ? "pointer" : "default");
-    this.canvas.style.cursor = cursor;
-  }
-  dispatchNodeEvent(node, eventType, data) {
-    const actionName = node.props[`on${eventType}`] || node.props[eventType];
-    if (actionName && typeof actionName === "string") {
-      this.engine.dispatchAction(actionName, {
-        type: eventType,
-        nodeId: node.id,
-        timestamp: Date.now(),
-        ...data
-      });
+    /**
+     * Cleanup
+     */
+    destroy() {
+        this.canvas.removeEventListener("mousemove", this.boundOnMouseMove);
+        this.canvas.removeEventListener("mousedown", this.boundOnMouseDown);
+        this.canvas.removeEventListener("mouseup", this.boundOnMouseUp);
+        this.canvas.removeEventListener("click", this.boundOnClick);
+        this.canvas.removeEventListener("dblclick", this.boundOnDoubleClick);
+        this.canvas.removeEventListener("keydown", this.boundOnKeyDown);
+        this.canvas.removeEventListener("keyup", this.boundOnKeyUp);
+        this.rootNode = null;
+        this.hoveredNode = null;
+        this.focusedNode = null;
+        this.mouseDownNode = null;
     }
-  }
-  requestRedraw() {
-    this.canvas.dispatchEvent(new CustomEvent("hypen:redraw"));
-  }
-  destroy() {
-    this.canvas.removeEventListener("mousemove", this.boundOnMouseMove);
-    this.canvas.removeEventListener("mousedown", this.boundOnMouseDown);
-    this.canvas.removeEventListener("mouseup", this.boundOnMouseUp);
-    this.canvas.removeEventListener("click", this.boundOnClick);
-    this.canvas.removeEventListener("dblclick", this.boundOnDoubleClick);
-    this.canvas.removeEventListener("keydown", this.boundOnKeyDown);
-    this.canvas.removeEventListener("keyup", this.boundOnKeyUp);
-    this.rootNode = null;
-    this.hoveredNode = null;
-    this.focusedNode = null;
-    this.mouseDownNode = null;
-  }
 }
-export {
-  CanvasEventManager
-};
-
-//# debugId=69654AED1A0C380A64756E2164756E21
+//# sourceMappingURL=events.js.map