feat(buttonNavigation): move the selector along the path instead of moving directly to the selected button
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
export type ButtonConfig = [x: number, y: number, w: number, h: number];
|
||||
import gsap from "gsap";
|
||||
|
||||
export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
|
||||
export const useButtonNavigation = <T extends Record<string, Rect>>({
|
||||
buttons,
|
||||
initialButton,
|
||||
onButtonClick,
|
||||
@@ -22,27 +22,160 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
|
||||
>;
|
||||
disabled?: Ref<boolean>;
|
||||
}) => {
|
||||
type Entry = keyof T;
|
||||
|
||||
const confirmationModal = useConfirmationModal();
|
||||
|
||||
const selectedButton = ref(initialButton);
|
||||
const selectorPosition = computed(() => buttons[selectedButton.value]!);
|
||||
const selectorPosition = ref<Rect>(buttons[initialButton]!);
|
||||
const nextButton = ref<Entry | undefined>();
|
||||
|
||||
const nextButton = ref<keyof T | undefined>();
|
||||
const buildNavigationGraph = (
|
||||
nav: typeof navigation,
|
||||
): Map<Entry, Set<Entry>> => {
|
||||
const edges = new Map<Entry, Set<Entry>>();
|
||||
|
||||
for (const [button, navConfig] of Object.entries(nav) as [
|
||||
Entry,
|
||||
(typeof nav)[Entry],
|
||||
][]) {
|
||||
if (!edges.has(button)) {
|
||||
edges.set(button, new Set());
|
||||
}
|
||||
|
||||
if (navConfig.up && navConfig.up !== "last") {
|
||||
edges.get(button)!.add(navConfig.up);
|
||||
}
|
||||
if (navConfig.down && navConfig.down !== "last") {
|
||||
edges.get(button)!.add(navConfig.down);
|
||||
}
|
||||
if (navConfig.left) {
|
||||
edges.get(button)!.add(navConfig.left);
|
||||
}
|
||||
if (navConfig.right) {
|
||||
edges.get(button)!.add(navConfig.right);
|
||||
}
|
||||
|
||||
if (navConfig.up === "last" || navConfig.down === "last") {
|
||||
for (const [otherButton, otherNav] of Object.entries(nav) as [
|
||||
Entry,
|
||||
(typeof nav)[Entry],
|
||||
][]) {
|
||||
if (otherButton === button) continue;
|
||||
|
||||
if (
|
||||
otherNav.up === button ||
|
||||
otherNav.down === button ||
|
||||
otherNav.left === button ||
|
||||
otherNav.right === button
|
||||
) {
|
||||
edges.get(button)!.add(otherButton);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return edges;
|
||||
};
|
||||
|
||||
const findPath = (
|
||||
graph: Map<Entry, Set<Entry>>,
|
||||
from: Entry,
|
||||
to: Entry,
|
||||
): Array<Entry> | null => {
|
||||
if (from === to) return [];
|
||||
|
||||
const queue: Array<{ button: Entry; path: Array<Entry> }> = [
|
||||
{ button: from, path: [] },
|
||||
];
|
||||
const visited = new Set<Entry>([from]);
|
||||
|
||||
while (queue.length > 0) {
|
||||
const { button, path } = queue.shift()!;
|
||||
|
||||
const neighbors = graph.get(button);
|
||||
if (!neighbors) continue;
|
||||
|
||||
for (const neighbor of neighbors) {
|
||||
if (visited.has(neighbor)) continue;
|
||||
|
||||
const newPath = [...path, neighbor];
|
||||
|
||||
if (neighbor === to) {
|
||||
return newPath;
|
||||
}
|
||||
|
||||
visited.add(neighbor);
|
||||
queue.push({ button: neighbor, path: newPath });
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const graph = buildNavigationGraph(navigation);
|
||||
|
||||
const calculateDistance = (
|
||||
[x1, y1, w1, h1]: Rect,
|
||||
[x2, y2, w2, h2]: Rect,
|
||||
): number => {
|
||||
const cx1 = x1 + w1 / 2;
|
||||
const cy1 = y1 + h1 / 2;
|
||||
const cx2 = x2 + w2 / 2;
|
||||
const cy2 = y2 + h2 / 2;
|
||||
|
||||
return Math.sqrt((cx2 - cx1) ** 2 + (cy2 - cy1) ** 2);
|
||||
};
|
||||
|
||||
const animateToButton = (targetButton: Entry, path?: Array<Entry> | null) => {
|
||||
const SPEED = 400;
|
||||
const pathButtons = path && path.length > 0 ? path : [targetButton];
|
||||
|
||||
const timeline = gsap.timeline();
|
||||
let prevRect = selectorPosition.value;
|
||||
|
||||
selectorPosition.value = [...selectorPosition.value];
|
||||
|
||||
for (const button of pathButtons) {
|
||||
const buttonRect = buttons[button]!;
|
||||
const distance = calculateDistance(prevRect, buttonRect);
|
||||
const duration = distance / SPEED;
|
||||
|
||||
timeline.to(
|
||||
selectorPosition.value,
|
||||
{
|
||||
[0]: buttonRect[0],
|
||||
[1]: buttonRect[1],
|
||||
[2]: buttonRect[2],
|
||||
[3]: buttonRect[3],
|
||||
duration,
|
||||
ease: "none",
|
||||
},
|
||||
"+=0",
|
||||
);
|
||||
|
||||
prevRect = buttonRect;
|
||||
}
|
||||
|
||||
selectedButton.value = targetButton;
|
||||
};
|
||||
|
||||
const { onClick } = useScreen();
|
||||
|
||||
onClick((x: number, y: number) => {
|
||||
if (confirmationModal.isOpen || disabled?.value) return;
|
||||
|
||||
for (const [buttonName, config] of Object.entries(buttons) as [
|
||||
keyof T,
|
||||
ButtonConfig,
|
||||
for (const [buttonName, buttonRect] of Object.entries(buttons) as [
|
||||
Entry,
|
||||
Rect,
|
||||
][]) {
|
||||
const [sx, sy, sw, sh] = config;
|
||||
const [sx, sy, sw, sh] = buttonRect;
|
||||
if (x >= sx && x <= sx + sw && y >= sy && y <= sy + sh) {
|
||||
if (selectedButton.value === buttonName) {
|
||||
onButtonClick?.(buttonName);
|
||||
} else {
|
||||
const path = findPath(graph, selectedButton.value, buttonName);
|
||||
|
||||
if (
|
||||
(navigation[buttonName].down === "last" &&
|
||||
navigation[selectedButton.value]!.up === buttonName) ||
|
||||
@@ -52,7 +185,7 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
|
||||
nextButton.value = selectedButton.value;
|
||||
}
|
||||
|
||||
selectedButton.value = buttonName;
|
||||
animateToButton(buttonName, path);
|
||||
}
|
||||
break;
|
||||
}
|
||||
@@ -62,26 +195,28 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
|
||||
useKeyDown((key) => {
|
||||
if (confirmationModal.isOpen || disabled?.value) return;
|
||||
|
||||
const currentButton = selectedButton.value as keyof T;
|
||||
const currentButton = selectedButton.value as Entry;
|
||||
const currentNav = navigation[currentButton];
|
||||
|
||||
if (!currentNav) return;
|
||||
|
||||
let targetButton: Entry | undefined;
|
||||
|
||||
switch (key) {
|
||||
case "NDS_UP":
|
||||
if (!currentNav.up) return;
|
||||
|
||||
if (currentNav.up === "last") {
|
||||
if (nextButton.value) {
|
||||
selectedButton.value = nextButton.value;
|
||||
targetButton = nextButton.value;
|
||||
} else {
|
||||
selectedButton.value = currentNav.left ?? currentNav.right;
|
||||
targetButton = currentNav.left ?? currentNav.right;
|
||||
}
|
||||
} else {
|
||||
if (navigation[currentNav.up].down === "last") {
|
||||
nextButton.value = selectedButton.value as keyof T;
|
||||
nextButton.value = selectedButton.value as Entry;
|
||||
}
|
||||
selectedButton.value = currentNav.up;
|
||||
targetButton = currentNav.up;
|
||||
}
|
||||
|
||||
break;
|
||||
@@ -91,15 +226,15 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
|
||||
|
||||
if (currentNav.down === "last") {
|
||||
if (nextButton.value) {
|
||||
selectedButton.value = nextButton.value;
|
||||
targetButton = nextButton.value;
|
||||
} else {
|
||||
selectedButton.value = currentNav.left ?? currentNav.right;
|
||||
targetButton = currentNav.left ?? currentNav.right;
|
||||
}
|
||||
} else {
|
||||
if (navigation[currentNav.down].up === "last") {
|
||||
nextButton.value = selectedButton.value as keyof T;
|
||||
nextButton.value = selectedButton.value as Entry;
|
||||
}
|
||||
selectedButton.value = currentNav.down;
|
||||
targetButton = currentNav.down;
|
||||
}
|
||||
break;
|
||||
|
||||
@@ -109,7 +244,7 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
|
||||
if (currentNav.horizontalMode === "preview") {
|
||||
nextButton.value = currentNav.left;
|
||||
} else {
|
||||
selectedButton.value = currentNav.left;
|
||||
targetButton = currentNav.left;
|
||||
}
|
||||
break;
|
||||
|
||||
@@ -119,7 +254,7 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
|
||||
if (currentNav.horizontalMode === "preview") {
|
||||
nextButton.value = currentNav.right;
|
||||
} else {
|
||||
selectedButton.value = currentNav.right;
|
||||
targetButton = currentNav.right;
|
||||
}
|
||||
break;
|
||||
|
||||
@@ -131,6 +266,10 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
|
||||
default:
|
||||
return;
|
||||
}
|
||||
|
||||
if (targetButton) {
|
||||
animateToButton(targetButton, null);
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user