122 lines
3.0 KiB
TypeScript
122 lines
3.0 KiB
TypeScript
export type ButtonConfig = [x: number, y: number, w: number, h: number];
|
|
|
|
export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
|
|
buttons,
|
|
initialButton,
|
|
onButtonClick,
|
|
navigation,
|
|
}: {
|
|
buttons: T;
|
|
initialButton: keyof T;
|
|
onButtonClick?: (buttonName: keyof T) => void;
|
|
navigation?: Record<
|
|
keyof T,
|
|
{
|
|
up?: keyof T;
|
|
down?: keyof T | "last";
|
|
left?: keyof T;
|
|
right?: keyof T;
|
|
horizontalMode?: "navigate" | "preview";
|
|
}
|
|
>;
|
|
}) => {
|
|
const selectedButton = ref(initialButton);
|
|
const selectorPosition = computed(() => buttons[selectedButton.value]!);
|
|
|
|
const nextButton = ref<keyof T | undefined>();
|
|
|
|
useScreenClick((x: number, y: number) => {
|
|
for (const [buttonName, config] of Object.entries(buttons) as [
|
|
keyof T,
|
|
ButtonConfig,
|
|
][]) {
|
|
const [sx, sy, sw, sh] = config;
|
|
if (x >= sx && x <= sx + sw && y >= sy && y <= sy + sh) {
|
|
if (selectedButton.value === buttonName) {
|
|
onButtonClick?.(buttonName);
|
|
} else {
|
|
selectedButton.value = buttonName;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
|
|
if (navigation) {
|
|
const handleKeyPress = (event: KeyboardEvent) => {
|
|
const currentButton = selectedButton.value as keyof T;
|
|
const currentNav = navigation[currentButton];
|
|
|
|
if (!currentNav) return;
|
|
|
|
switch (event.key) {
|
|
case "ArrowUp":
|
|
if (!currentNav.up) return;
|
|
|
|
if (currentNav.up === "last") {
|
|
selectedButton.value = nextButton.value;
|
|
} else {
|
|
nextButton.value = selectedButton.value as keyof T;
|
|
selectedButton.value = currentNav.up;
|
|
}
|
|
|
|
break;
|
|
|
|
case "ArrowDown":
|
|
if (!currentNav.down) return;
|
|
|
|
if (currentNav.down === "last") {
|
|
if (nextButton.value) {
|
|
selectedButton.value = nextButton.value;
|
|
} else {
|
|
selectedButton.value = currentNav.left ?? currentNav.right;
|
|
}
|
|
} else {
|
|
selectedButton.value = currentNav.down;
|
|
}
|
|
break;
|
|
|
|
case "ArrowLeft":
|
|
if (!currentNav.left) return;
|
|
|
|
if (currentNav.horizontalMode === "preview") {
|
|
nextButton.value = currentNav.left;
|
|
} else {
|
|
selectedButton.value = currentNav.left;
|
|
}
|
|
break;
|
|
|
|
case "ArrowRight":
|
|
if (!currentNav.right) return;
|
|
|
|
if (currentNav.horizontalMode === "preview") {
|
|
nextButton.value = currentNav.right;
|
|
} else {
|
|
selectedButton.value = currentNav.right;
|
|
}
|
|
break;
|
|
|
|
case "Enter":
|
|
case " ":
|
|
onButtonClick?.(selectedButton.value);
|
|
break;
|
|
}
|
|
|
|
event.preventDefault();
|
|
};
|
|
|
|
onMounted(() => {
|
|
window.addEventListener("keydown", handleKeyPress);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener("keydown", handleKeyPress);
|
|
});
|
|
}
|
|
|
|
return {
|
|
selectedButton,
|
|
selectorPosition,
|
|
};
|
|
};
|