130 lines
4.1 KiB
TypeScript
130 lines
4.1 KiB
TypeScript
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'
|
||
|
||
/**
|
||
* 找到其渲染矩形包含 (col, row) 的最深的 DOM 元素。
|
||
*
|
||
* 使用 renderNodeToOutput 填充的 nodeCache — 矩形在屏幕
|
||
* 坐标中，所有偏移（包括 scrollTop 平移）已应用。
|
||
* 子元素以逆序遍历，以便后期兄弟元素（画在上面）获胜。
|
||
* 不在 nodeCache 中的节点（此帧未渲染，或缺少 yogaNode）
|
||
* 及其子树被跳过。
|
||
*
|
||
* 即使命中节点没有 onClick 也返回命中节点 — dispatchClick 通过
|
||
* parentNode 向上查找处理器。
|
||
*/
|
||
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
|
||
}
|
||
// 后期兄弟元素画在上面；逆序遍历返回最顶层命中。
|
||
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
|
||
}
|
||
|
||
/**
|
||
* 在 (col, row) 处对根进行命中测试，并将 ClickEvent 从最深的
|
||
* 包含节点向上冒泡到 parentNode。只有具有 onClick 处理器的节点触发。
|
||
* 当处理器调用 stopImmediatePropagation() 时停止。如果至少一个
|
||
* onClick 处理器触发则返回 true。
|
||
*/
|
||
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
|
||
|
||
// 点击转焦点：找到最近的 focusable 祖先并聚焦它。
|
||
// root 始终是 ink-root，它拥有 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
|
||
}
|
||
|
||
/**
|
||
* 当指针移动时触发 onMouseEnter/onMouseLeave。类似于 DOM
|
||
* mouseenter/mouseleave：不冒泡 — 在子元素之间移动不会
|
||
* 在父元素上重新触发。从命中节点向上遍历，收集每个
|
||
* 有悬停处理器的祖先；与先前悬停集合对比；
|
||
* 对退出的节点触发 leave，对进入的节点触发 enter。
|
||
*
|
||
* 就地改变 `hovered`，以便调用者（App 实例）可以跨调用保留它。
|
||
* 当命中为空时清除集合（光标移动到未渲染的间隙或根矩形之外）。
|
||
*/
|
||
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)
|
||
// 跳过已分离节点上的处理器（在鼠标事件之间移除）
|
||
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?.()
|
||
}
|
||
}
|
||
}
|