diff --git a/src/core/nav.js b/src/core/nav.js index 331a5bb..429bade 100644 --- a/src/core/nav.js +++ b/src/core/nav.js @@ -9,17 +9,30 @@ const getRect = (element) => { }; const scoreCandidate = (source, target, direction) => { - const horizontal = target.col - source.col; - const vertical = target.row - source.row; + const sourceRect = getRect(source.element); + const targetRect = getRect(target.element); + const sourceCenterX = sourceRect.x + sourceRect.width / 2; + const sourceCenterY = sourceRect.y + sourceRect.height / 2; + const targetCenterX = targetRect.x + targetRect.width / 2; + const targetCenterY = targetRect.y + targetRect.height / 2; + const horizontal = targetCenterX - sourceCenterX; + const vertical = targetCenterY - sourceCenterY; - if (direction === "up" && vertical >= 0) return Number.POSITIVE_INFINITY; - if (direction === "down" && vertical <= 0) return Number.POSITIVE_INFINITY; - if (direction === "left" && horizontal >= 0) return Number.POSITIVE_INFINITY; - if (direction === "right" && horizontal <= 0) return Number.POSITIVE_INFINITY; + if (direction === "up" && vertical >= -1) return Number.POSITIVE_INFINITY; + if (direction === "down" && vertical <= 1) return Number.POSITIVE_INFINITY; + if (direction === "left" && horizontal >= -1) return Number.POSITIVE_INFINITY; + if (direction === "right" && horizontal <= 1) return Number.POSITIVE_INFINITY; const primary = direction === "up" || direction === "down" ? Math.abs(vertical) : Math.abs(horizontal); const secondary = direction === "up" || direction === "down" ? Math.abs(horizontal) : Math.abs(vertical); - return primary * 100 + secondary; + const sourceStart = direction === "up" || direction === "down" ? sourceRect.x : sourceRect.y; + const sourceEnd = sourceStart + (direction === "up" || direction === "down" ? sourceRect.width : sourceRect.height); + const targetStart = direction === "up" || direction === "down" ? targetRect.x : targetRect.y; + const targetEnd = targetStart + (direction === "up" || direction === "down" ? targetRect.width : targetRect.height); + const overlap = Math.max(0, Math.min(sourceEnd, targetEnd) - Math.max(sourceStart, targetStart)); + const overlapPenalty = overlap > 0 ? -40 : 0; + + return primary * 10 + secondary + overlapPenalty; }; export const createNavigationManager = () => { @@ -75,7 +88,10 @@ export const createNavigationManager = () => { return; } - const nodes = Array.from(contract.focusRoot.querySelectorAll("[data-focusable='true']")); + const roots = [contract.focusRoot, ...(contract.extraFocusRoots ?? [])].filter(Boolean); + const nodes = Array.from( + new Set(roots.flatMap((root) => Array.from(root.querySelectorAll("[data-focusable='true']")))), + ); focusables = nodes .map((element, index) => { @@ -86,6 +102,7 @@ export const createNavigationManager = () => { row: Number(element.dataset.row ?? 0), col: Number(element.dataset.col ?? 0), key: element.dataset.focusKey ?? String(index), + region: element.dataset.navRegion ?? "content", }; }) .sort((left, right) => { @@ -111,7 +128,56 @@ export const createNavigationManager = () => { return 0; }; + const resolveDefaultContentFocus = () => { + if (!focusables.length) { + return -1; + } + + if (contract?.defaultFocus) { + const defaultIndex = focusables.findIndex((focusable) => focusable.element === contract.defaultFocus); + if (defaultIndex >= 0 && focusables[defaultIndex]?.region !== "sidebar") { + return defaultIndex; + } + } + + return focusables.findIndex((focusable) => focusable.region !== "sidebar"); + }; + + const findSidebarIndex = () => { + const activeIndex = focusables.findIndex( + (focusable) => focusable.region === "sidebar" && focusable.element.classList.contains("is-active"), + ); + if (activeIndex >= 0) { + return activeIndex; + } + + return focusables.findIndex((focusable) => focusable.region === "sidebar"); + }; + + const findNextSidebarIndex = (direction) => { + const source = focusables[focusedIndex]; + if (!source || source.region !== "sidebar") { + return null; + } + + const sidebarItems = focusables + .map((item, index) => ({ item, index })) + .filter(({ item }) => item.region === "sidebar") + .sort((left, right) => left.item.row - right.item.row); + const currentSidebarIndex = sidebarItems.findIndex(({ index }) => index === focusedIndex); + if (currentSidebarIndex < 0) { + return null; + } + + const nextSidebarIndex = direction === "up" ? currentSidebarIndex - 1 : currentSidebarIndex + 1; + return sidebarItems[nextSidebarIndex]?.index ?? null; + }; + const moveWithNebula = (direction) => { + if (contract?.useNebulaNavigation === false) { + return null; + } + const picker = contract?.nebulaNavigation?.pickBestCandidate; if (typeof picker !== "function") { return null; @@ -149,13 +215,38 @@ export const createNavigationManager = () => { return; } + const source = focusables[focusedIndex]; + + if (direction === "left" && source?.region !== "sidebar") { + const sidebarIndex = findSidebarIndex(); + if (sidebarIndex >= 0) { + applyFocus(sidebarIndex); + } + return; + } + + if (direction === "right" && source?.region === "sidebar") { + const contentIndex = resolveDefaultContentFocus(); + if (contentIndex >= 0) { + applyFocus(contentIndex); + } + return; + } + + if ((direction === "up" || direction === "down") && source?.region === "sidebar") { + const nextSidebarIndex = findNextSidebarIndex(direction); + if (nextSidebarIndex !== null) { + applyFocus(nextSidebarIndex); + } + return; + } + const nebulaIndex = moveWithNebula(direction); if (nebulaIndex !== null) { applyFocus(nebulaIndex); return; } - const source = focusables[focusedIndex]; let bestIndex = focusedIndex; let bestScore = Number.POSITIVE_INFINITY; diff --git a/src/index.html b/src/index.html index 774f1e9..c6a094f 100644 --- a/src/index.html +++ b/src/index.html @@ -24,13 +24,54 @@
-