feat: useMouseWheel -> useScreenMouseWheel

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>