feat(utils): useButtonNavigation now exposes pressed button

app/components/Screen.vue

@@ -3,6 +3,7 @@ const canvas = useTemplateRef("canvas");
 
 const renderCallbacks = new Map<RenderCallback, number>();
 const screenClickCallbacks = new Set<ScreenClickCallback>();
+const screenMouseDownCallbacks = new Set<ScreenClickCallback>();
 const screenMouseWheelCallbacks = new Set<ScreenMouseWheelCallback>();
 
 let ctx: CanvasRenderingContext2D | null = null;
@@ -20,6 +21,11 @@ const registerScreenClickCallback = (callback: ScreenClickCallback) => {
   return () => screenClickCallbacks.delete(callback);
 };
 
+const registerScreenMouseDownCallback = (callback: ScreenClickCallback) => {
+  screenMouseDownCallbacks.add(callback);
+  return () => screenMouseDownCallbacks.delete(callback);
+};
+
 const registerScreenMouseWheelCallback = (
   callback: ScreenMouseWheelCallback,
 ) => {
@@ -42,6 +48,21 @@ const handleCanvasClick = (event: MouseEvent) => {
   }
 };
 
+const handleCanvasMouseDown = (event: MouseEvent) => {
+  if (!canvas.value) return;
+
+  const rect = canvas.value.getBoundingClientRect();
+  const scaleX = LOGICAL_WIDTH / rect.width;
+  const scaleY = LOGICAL_HEIGHT / rect.height;
+
+  const x = (event.clientX - rect.left) * scaleX;
+  const y = (event.clientY - rect.top) * scaleY;
+
+  for (const callback of screenMouseDownCallbacks) {
+    callback(x, y);
+  }
+};
+
 const handleCanvasWheel = (event: WheelEvent) => {
   for (const callback of screenMouseWheelCallbacks) {
     callback(event.deltaY, event.deltaX);
@@ -87,6 +108,7 @@ const renderFrame = (timestamp: number) => {
 
 provide("registerRenderCallback", registerRenderCallback);
 provide("registerScreenClickCallback", registerScreenClickCallback);
+provide("registerScreenMouseDownCallback", registerScreenMouseDownCallback);
 provide("registerScreenMouseWheelCallback", registerScreenMouseWheelCallback);
 
 onMounted(() => {
@@ -98,6 +120,7 @@ onMounted(() => {
   ctx.imageSmoothingEnabled = false;
 
   canvas.value.addEventListener("click", handleCanvasClick);
+  canvas.value.addEventListener("mousedown", handleCanvasMouseDown);
   canvas.value.addEventListener("wheel", handleCanvasWheel, { passive: true });
 
   animationFrameId = requestAnimationFrame(renderFrame);
@@ -110,6 +133,7 @@ onUnmounted(() => {
 
   if (canvas.value) {
     canvas.value.removeEventListener("click", handleCanvasClick);
+    canvas.value.removeEventListener("mousedown", handleCanvasMouseDown);
     canvas.value.removeEventListener("wheel", handleCanvasWheel);
   }
 });