init

ink/hit-test.ts

@@ -0,0 +1,130 @@
+import type { DOMElement } from './dom.js'
+import { ClickEvent } from './events/click-event.js'
+import type { EventHandlerProps } from './events/event-handlers.js'
+import { nodeCache } from './node-cache.js'
+
+/**
+ * Find the deepest DOM element whose rendered rect contains (col, row).
+ *
+ * Uses the nodeCache populated by renderNodeToOutput — rects are in screen
+ * coordinates with all offsets (including scrollTop translation) already
+ * applied. Children are traversed in reverse so later siblings (painted on
+ * top) win. Nodes not in nodeCache (not rendered this frame, or lacking a
+ * yogaNode) are skipped along with their subtrees.
+ *
+ * Returns the hit node even if it has no onClick — dispatchClick walks up
+ * via parentNode to find handlers.
+ */
+export function hitTest(
+  node: DOMElement,
+  col: number,
+  row: number,
+): DOMElement | null {
+  const rect = nodeCache.get(node)
+  if (!rect) return null
+  if (
+    col < rect.x ||
+    col >= rect.x + rect.width ||
+    row < rect.y ||
+    row >= rect.y + rect.height
+  ) {
+    return null
+  }
+  // Later siblings paint on top; reversed traversal returns topmost hit.
+  for (let i = node.childNodes.length - 1; i >= 0; i--) {
+    const child = node.childNodes[i]!
+    if (child.nodeName === '#text') continue
+    const hit = hitTest(child, col, row)
+    if (hit) return hit
+  }
+  return node
+}
+
+/**
+ * Hit-test the root at (col, row) and bubble a ClickEvent from the deepest
+ * containing node up through parentNode. Only nodes with an onClick handler
+ * fire. Stops when a handler calls stopImmediatePropagation(). Returns
+ * true if at least one onClick handler fired.
+ */
+export function dispatchClick(
+  root: DOMElement,
+  col: number,
+  row: number,
+  cellIsBlank = false,
+): boolean {
+  let target: DOMElement | undefined = hitTest(root, col, row) ?? undefined
+  if (!target) return false
+
+  // Click-to-focus: find the closest focusable ancestor and focus it.
+  // root is always ink-root, which owns the FocusManager.
+  if (root.focusManager) {
+    let focusTarget: DOMElement | undefined = target
+    while (focusTarget) {
+      if (typeof focusTarget.attributes['tabIndex'] === 'number') {
+        root.focusManager.handleClickFocus(focusTarget)
+        break
+      }
+      focusTarget = focusTarget.parentNode
+    }
+  }
+  const event = new ClickEvent(col, row, cellIsBlank)
+  let handled = false
+  while (target) {
+    const handler = target._eventHandlers?.onClick as
+      | ((event: ClickEvent) => void)
+      | undefined
+    if (handler) {
+      handled = true
+      const rect = nodeCache.get(target)
+      if (rect) {
+        event.localCol = col - rect.x
+        event.localRow = row - rect.y
+      }
+      handler(event)
+      if (event.didStopImmediatePropagation()) return true
+    }
+    target = target.parentNode
+  }
+  return handled
+}
+
+/**
+ * Fire onMouseEnter/onMouseLeave as the pointer moves. Like DOM
+ * mouseenter/mouseleave: does NOT bubble — moving between children does
+ * not re-fire on the parent. Walks up from the hit node collecting every
+ * ancestor with a hover handler; diffs against the previous hovered set;
+ * fires leave on the nodes exited, enter on the nodes entered.
+ *
+ * Mutates `hovered` in place so the caller (App instance) can hold it
+ * across calls. Clears the set when the hit is null (cursor moved into a
+ * non-rendered gap or off the root rect).
+ */
+export function dispatchHover(
+  root: DOMElement,
+  col: number,
+  row: number,
+  hovered: Set<DOMElement>,
+): void {
+  const next = new Set<DOMElement>()
+  let node: DOMElement | undefined = hitTest(root, col, row) ?? undefined
+  while (node) {
+    const h = node._eventHandlers as EventHandlerProps | undefined
+    if (h?.onMouseEnter || h?.onMouseLeave) next.add(node)
+    node = node.parentNode
+  }
+  for (const old of hovered) {
+    if (!next.has(old)) {
+      hovered.delete(old)
+      // Skip handlers on detached nodes (removed between mouse events)
+      if (old.parentNode) {
+        ;(old._eventHandlers as EventHandlerProps | undefined)?.onMouseLeave?.()
+      }
+    }
+  }
+  for (const n of next) {
+    if (!hovered.has(n)) {
+      hovered.add(n)
+      ;(n._eventHandlers as EventHandlerProps | undefined)?.onMouseEnter?.()
+    }
+  }
+}