feat(input): add viewport wheel zoom and panning

view/CanvasViewport.tsx

@@ -1,12 +1,28 @@
 import { useEffect, useRef } from "react";
 import type { AppStore } from "@editor/store";
+import type { GlobalPointerConsumer, GlobalWheelConsumer } from "@input/index";
+import {
+  createViewportPointerPanHandler,
+  handleViewportWheel,
+  pointerInputEventFromPointerEvent,
+  wheelInputEventFromWheelEvent,
+} from "@input/index";
 import { createRenderer } from "@renderer/index";
 
+const ignoreGlobalPointer: GlobalPointerConsumer = () => false;
+const ignoreGlobalWheel: GlobalWheelConsumer = () => false;
+
 export type CanvasViewportProps = {
   store: AppStore;
+  globalPointerConsumer?: GlobalPointerConsumer;
+  globalWheelConsumer?: GlobalWheelConsumer;
 };
 
-export function CanvasViewport({ store }: CanvasViewportProps) {
+export function CanvasViewport({
+  store,
+  globalPointerConsumer = ignoreGlobalPointer,
+  globalWheelConsumer = ignoreGlobalWheel,
+}: CanvasViewportProps) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
 
   useEffect(() => {
@@ -42,5 +58,65 @@ export function CanvasViewport({ store }: CanvasViewportProps) {
     return () => resizeObserver.disconnect();
   }, [store]);
 
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const panHandler = createViewportPointerPanHandler({
+      globalConsumer: globalPointerConsumer,
+      dispatch: store.dispatch,
+      getCurrentZoom: () => store.getState().editor.viewport.zoom,
+    });
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const consumed = panHandler.pointerDown(pointerInputEventFromPointerEvent(event));
+      if (!consumed) return;
+
+      canvas.setPointerCapture(event.pointerId);
+      event.preventDefault();
+    };
+
+    const handlePointerMove = (event: PointerEvent) => {
+      const consumed = panHandler.pointerMove(pointerInputEventFromPointerEvent(event));
+      if (consumed) event.preventDefault();
+    };
+
+    const handlePointerUp = (event: PointerEvent) => {
+      const consumed = panHandler.pointerUp(pointerInputEventFromPointerEvent(event));
+      if (consumed) event.preventDefault();
+    };
+
+    canvas.addEventListener("pointerdown", handlePointerDown);
+    canvas.addEventListener("pointermove", handlePointerMove);
+    canvas.addEventListener("pointerup", handlePointerUp);
+    canvas.addEventListener("pointercancel", handlePointerUp);
+
+    return () => {
+      canvas.removeEventListener("pointerdown", handlePointerDown);
+      canvas.removeEventListener("pointermove", handlePointerMove);
+      canvas.removeEventListener("pointerup", handlePointerUp);
+      canvas.removeEventListener("pointercancel", handlePointerUp);
+    };
+  }, [globalPointerConsumer, store]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const handleWheel = (event: WheelEvent) => {
+      const consumed = handleViewportWheel({
+        event: wheelInputEventFromWheelEvent(event),
+        globalConsumer: globalWheelConsumer,
+        dispatch: store.dispatch,
+        currentZoom: store.getState().editor.viewport.zoom,
+      });
+
+      if (consumed) event.preventDefault();
+    };
+
+    canvas.addEventListener("wheel", handleWheel, { passive: false });
+    return () => canvas.removeEventListener("wheel", handleWheel);
+  }, [globalWheelConsumer, store]);
+
   return <canvas ref={canvasRef} className="h-full w-full" />;
 }