refactor(view): extract canvas viewport hooks

view/canvas/useCanvasInput.ts

@@ -0,0 +1,104 @@
+import { useEffect, useState, type RefObject } from "react";
+import type { AppStore } from "@editor/store";
+import type { GlobalKeybindConsumer, GlobalPointerConsumer, GlobalWheelConsumer } from "@input/index";
+import {
+  createViewportPanInputController,
+  handleViewportWheel,
+  keybindEventFromKeyboardEvent,
+  pointerInputEventFromPointerEvent,
+  wheelInputEventFromWheelEvent,
+} from "@input/index";
+
+export type CanvasInputOptions = {
+  globalKeybindConsumer: GlobalKeybindConsumer;
+  globalPointerConsumer: GlobalPointerConsumer;
+  globalWheelConsumer: GlobalWheelConsumer;
+};
+
+export type CanvasInputState = {
+  isPanning: boolean;
+};
+
+export function useCanvasInput(
+  canvasRef: RefObject<HTMLCanvasElement | null>,
+  store: AppStore,
+  options: CanvasInputOptions,
+): CanvasInputState {
+  const [isPanning, setIsPanning] = useState(false);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const panHandler = createViewportPanInputController({
+      globalKeyConsumer: options.globalKeybindConsumer,
+      globalPointerConsumer: options.globalPointerConsumer,
+      dispatch: store.dispatch,
+      getCurrentZoom: () => store.getState().editor.viewport.zoom,
+      isPanMode: () => store.getState().editor.tools.interactionMode.type === "temporary-pan",
+    });
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const consumed = panHandler.keyDown(keybindEventFromKeyboardEvent(event));
+      if (consumed) event.preventDefault();
+    };
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      const consumed = panHandler.keyUp(keybindEventFromKeyboardEvent(event));
+      if (consumed) event.preventDefault();
+    };
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const consumed = panHandler.pointerDown(pointerInputEventFromPointerEvent(event));
+      if (!consumed) return;
+
+      canvas.setPointerCapture(event.pointerId);
+      setIsPanning(true);
+      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) return;
+
+      setIsPanning(false);
+      event.preventDefault();
+    };
+
+    const handleWheel = (event: WheelEvent) => {
+      const consumed = handleViewportWheel({
+        event: wheelInputEventFromWheelEvent(event),
+        globalConsumer: options.globalWheelConsumer,
+        dispatch: store.dispatch,
+        currentZoom: store.getState().editor.viewport.zoom,
+      });
+
+      if (consumed) event.preventDefault();
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    canvas.addEventListener("pointerdown", handlePointerDown);
+    canvas.addEventListener("pointermove", handlePointerMove);
+    canvas.addEventListener("pointerup", handlePointerUp);
+    canvas.addEventListener("pointercancel", handlePointerUp);
+    canvas.addEventListener("wheel", handleWheel, { passive: false });
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+      canvas.removeEventListener("pointerdown", handlePointerDown);
+      canvas.removeEventListener("pointermove", handlePointerMove);
+      canvas.removeEventListener("pointerup", handlePointerUp);
+      canvas.removeEventListener("pointercancel", handlePointerUp);
+      canvas.removeEventListener("wheel", handleWheel);
+    };
+  }, [canvasRef, options, store]);
+
+  return { isPanning };
+}