feat(input): drag artboard transform controls

view/canvas/useCanvasInput.ts

@@ -3,6 +3,7 @@ import type { AppStore } from "@editor/store";
 import { isPanInteractionMode } from "@editor/tools";
 import type { GlobalKeybindConsumer, GlobalPointerConsumer, GlobalWheelConsumer } from "@input/index";
 import {
+  createTransformControlsInputController,
   createViewportPanInputController,
   handleArtboardSelection,
   handleViewportWheel,
@@ -32,6 +33,12 @@ export function useCanvasInput(
     const canvas = canvasRef.current;
     if (!canvas) return;
 
+    const transformHandler = createTransformControlsInputController({
+      getDocument: () => store.getState().document,
+      getEditor: () => store.getState().editor,
+      dispatch: store.dispatch,
+    });
+
     const panHandler = createViewportPanInputController({
       globalKeyConsumer: options.globalKeybindConsumer,
       globalPointerConsumer: options.globalPointerConsumer,
@@ -52,6 +59,13 @@ export function useCanvasInput(
 
     const handlePointerDown = (event: PointerEvent) => {
       const inputEvent = pointerInputEventFromPointerEvent(event);
+      const transformed = transformHandler.pointerDown(inputEvent);
+      if (transformed) {
+        canvas.setPointerCapture(event.pointerId);
+        event.preventDefault();
+        return;
+      }
+
       const consumed = panHandler.pointerDown(inputEvent);
       if (consumed) {
         canvas.setPointerCapture(event.pointerId);
@@ -71,12 +85,26 @@ export function useCanvasInput(
     };
 
     const handlePointerMove = (event: PointerEvent) => {
-      const consumed = panHandler.pointerMove(pointerInputEventFromPointerEvent(event));
+      const inputEvent = pointerInputEventFromPointerEvent(event);
+      const transformed = transformHandler.pointerMove(inputEvent);
+      if (transformed) {
+        event.preventDefault();
+        return;
+      }
+
+      const consumed = panHandler.pointerMove(inputEvent);
       if (consumed) event.preventDefault();
     };
 
     const handlePointerUp = (event: PointerEvent) => {
-      const consumed = panHandler.pointerUp(pointerInputEventFromPointerEvent(event));
+      const inputEvent = pointerInputEventFromPointerEvent(event);
+      const transformed = transformHandler.pointerUp(inputEvent);
+      if (transformed) {
+        event.preventDefault();
+        return;
+      }
+
+      const consumed = panHandler.pointerUp(inputEvent);
       if (!consumed) return;
 
       setIsPanning(false);