iter(g32): tree 补 ↑↓/Home/End 行间导航

This commit is contained in:
HIsheR
2026-10-26 11:43:15 +08:00
parent e203c9ed5d
commit 097f79fa1e
5 changed files with 26 additions and 5 deletions
+13
View File
@@ -72,9 +72,22 @@ export function tree(props: TreeProps): HTMLElement {
}
});
/*** 当前可见的节点行(收起分支的子节点不参与 ↑↓ 遍历) ***/
const visibleRows = (): HTMLElement[] =>
Array.from(root.querySelectorAll<HTMLElement>('.ua-tree-row')).filter((el) => !el.closest('.ua-tree-children[hidden]'));
root.addEventListener('keydown', (e: KeyboardEvent) => {
const row = (e.target as HTMLElement).closest('.ua-tree-row') as HTMLElement | null;
if (!row) return; // 卫语句:焦点不在节点行
if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {
const list = visibleRows();
const at = list.indexOf(row);
if (at < 0) return; // 卫语句:行已不在可见集
e.preventDefault();
const next = e.key === 'Home' ? list[0] : e.key === 'End' ? list[list.length - 1] : list[at + (e.key === 'ArrowDown' ? 1 : -1)];
next?.focus(); // 行间移动只改焦点,不改变选中
return;
}
const key = [...rows.entries()].find(([, el]) => el === row)?.[0];
if (!key) return; // 卫语句:找不到对应节点
const node = findNode(props.nodes, key);