From eda85b74350d05ceb17924a2b4d0795f09605a66 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Fri, 21 Nov 2025 21:01:46 +0100
Subject: [PATCH] feat: useMouseWheel -> useScreenMouseWheel

---
 .../Projects/BottomScreen/Projects.vue         |  2 +-
 app/components/Screen.vue                      | 17 +++++++++++++++++
 app/composables/useMouseWheel.ts               | 15 ---------------
 app/composables/useScreenMouseWheel.ts         | 18 ++++++++++++++++++
 4 files changed, 36 insertions(+), 16 deletions(-)
 delete mode 100644 app/composables/useMouseWheel.ts
 create mode 100644 app/composables/useScreenMouseWheel.ts

diff --git a/app/components/Projects/BottomScreen/Projects.vue b/app/components/Projects/BottomScreen/Projects.vue
index a42c401..4b2e499 100644
--- a/app/components/Projects/BottomScreen/Projects.vue
+++ b/app/components/Projects/BottomScreen/Projects.vue
@@ -88,7 +88,7 @@ useKeyDown((key) => {
   }
 });
 
-useMouseWheel((dy) => {
+useScreenMouseWheel((dy) => {
   if (dy > 0) {
     scrollProjects("right");
   } else if (dy < 0) {
diff --git a/app/components/Screen.vue b/app/components/Screen.vue
index 61f6e2b..9a432d5 100644
--- a/app/components/Screen.vue
+++ b/app/components/Screen.vue
@@ -4,6 +4,7 @@ const canvas = useTemplateRef("canvas");
 const updateCallbacks = new Set<UpdateCallback>();
 const renderCallbacks = new Set<RenderCallback>();
 const screenClickCallbacks = new Set<ScreenClickCallback>();
+const screenMouseWheelCallbacks = new Set<ScreenMouseWheelCallback>();
 
 let ctx: CanvasRenderingContext2D | null = null;
 let animationFrameId: number | null = null;
@@ -25,6 +26,13 @@ const registerScreenClickCallback = (callback: ScreenClickCallback) => {
   return () => screenClickCallbacks.delete(callback);
 };
 
+const registerScreenMouseWheelCallback = (
+  callback: ScreenMouseWheelCallback,
+) => {
+  screenMouseWheelCallbacks.add(callback);
+  return () => screenMouseWheelCallbacks.delete(callback);
+};
+
 const handleCanvasClick = (event: MouseEvent) => {
   if (!canvas.value) return;
 
@@ -40,6 +48,12 @@ const handleCanvasClick = (event: MouseEvent) => {
   }
 };
 
+const handleCanvasWheel = (event: WheelEvent) => {
+  for (const callback of screenMouseWheelCallbacks) {
+    callback(event.deltaY, event.deltaX);
+  }
+};
+
 const renderFrame = (timestamp: number) => {
   if (!ctx) return;
 
@@ -78,8 +92,10 @@ onMounted(() => {
   provide("registerUpdateCallback", registerUpdateCallback);
   provide("registerRenderCallback", registerRenderCallback);
   provide("registerScreenClickCallback", registerScreenClickCallback);
+  provide("registerScreenMouseWheelCallback", registerScreenMouseWheelCallback);
 
   canvas.value.addEventListener("click", handleCanvasClick);
+  canvas.value.addEventListener("wheel", handleCanvasWheel, { passive: true });
 
   animationFrameId = requestAnimationFrame(renderFrame);
 });
@@ -91,6 +107,7 @@ onUnmounted(() => {
 
   if (canvas.value) {
     canvas.value.removeEventListener("click", handleCanvasClick);
+    canvas.value.removeEventListener("wheel", handleCanvasWheel);
   }
 });
 </script>
diff --git a/app/composables/useMouseWheel.ts b/app/composables/useMouseWheel.ts
deleted file mode 100644
index 2d50598..0000000
--- a/app/composables/useMouseWheel.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export type MouseWheelCallback = (deltaY: number, deltaX: number) => void;
-
-export const useMouseWheel = (callback: MouseWheelCallback) => {
-  const handleWheel = (event: WheelEvent) => {
-    callback(event.deltaY, event.deltaX);
-  };
-
-  onMounted(() => {
-    window.addEventListener("wheel", handleWheel, { passive: true });
-  });
-
-  onUnmounted(() => {
-    window.removeEventListener("wheel", handleWheel);
-  });
-};
diff --git a/app/composables/useScreenMouseWheel.ts b/app/composables/useScreenMouseWheel.ts
new file mode 100644
index 0000000..4424971
--- /dev/null
+++ b/app/composables/useScreenMouseWheel.ts
@@ -0,0 +1,18 @@
+export type ScreenMouseWheelCallback = (deltaY: number, deltaX: number) => void;
+
+export const useScreenMouseWheel = (callback: ScreenMouseWheelCallback) => {
+  const registerScreenMouseWheelCallback = inject<
+    (callback: ScreenMouseWheelCallback) => () => void
+  >("registerScreenMouseWheelCallback");
+
+  onMounted(() => {
+    if (!registerScreenMouseWheelCallback) {
+      throw new Error(
+        "Missing registerScreenMouseWheelCallback - useScreenMouseWheel must be used within a Screen component",
+      );
+    }
+
+    const unregister = registerScreenMouseWheelCallback(callback);
+    onUnmounted(unregister);
+  });
+};