feat(input): add viewport wheel zoom and panning

input/index.ts

@@ -6,4 +6,5 @@ export {
 export type { CommandKeybind, GlobalKeybindConsumer, Keybind, KeybindEvent, KeybindMap } from "./keyboard";
 export { handleKeybind, keybindFromEvent } from "./keyboard";
 export type { GlobalPointerConsumer, GlobalWheelConsumer, PointerInputEvent, WheelInputEvent } from "./pointer";
-export { handleViewportWheel } from "./viewport";
+export type { ViewportPointerPanHandler } from "./viewport";
+export { createViewportPointerPanHandler, handleViewportWheel } from "./viewport";

input/viewport.ts

@@ -1,5 +1,59 @@
 import type { Dispatch } from "@commands/dispatcher";
-import type { GlobalWheelConsumer, WheelInputEvent } from "./pointer";
+import type { GlobalPointerConsumer, GlobalWheelConsumer, PointerInputEvent, WheelInputEvent } from "./pointer";
+
+export type ViewportPointerPanHandler = {
+  pointerDown(event: PointerInputEvent): boolean;
+  pointerMove(event: PointerInputEvent): boolean;
+  pointerUp(event: PointerInputEvent): boolean;
+};
+
+export function createViewportPointerPanHandler(options: {
+  globalConsumer: GlobalPointerConsumer;
+  dispatch: Dispatch;
+  getCurrentZoom: () => number;
+}): ViewportPointerPanHandler {
+  let activePointerId: number | undefined;
+  let lastPosition: PointerInputEvent["position"] | undefined;
+
+  const canPan = (event: PointerInputEvent) => event.pointerType !== "mouse" || (event.buttons & 4) === 4;
+
+  return {
+    pointerDown(event) {
+      if (options.globalConsumer(event)) return true;
+      if (!canPan(event)) return false;
+
+      activePointerId = event.pointerId;
+      lastPosition = event.position;
+      return true;
+    },
+    pointerMove(event) {
+      if (activePointerId !== event.pointerId || !lastPosition) return false;
+
+      const zoom = options.getCurrentZoom();
+      const screenDelta = {
+        x: event.position.x - lastPosition.x,
+        y: event.position.y - lastPosition.y,
+      };
+
+      lastPosition = event.position;
+      options.dispatch("viewport.pan", {
+        delta: {
+          x: -screenDelta.x / zoom,
+          y: -screenDelta.y / zoom,
+        },
+      });
+
+      return true;
+    },
+    pointerUp(event) {
+      if (activePointerId !== event.pointerId) return false;
+
+      activePointerId = undefined;
+      lastPosition = undefined;
+      return true;
+    },
+  };
+}
 
 export function handleViewportWheel(options: {
   event: WheelInputEvent;