add space+drag to pan

Author: softmarshmallow

editor-packages/editor-canvas/canvas-event-target/canvas-event-target.tsx

@@ -47,11 +47,34 @@ export function CanvasEventTarget({
 }) {
   const interactionEventTargetRef = useRef();
 
+  const [isSpacebarPressed, setIsSpacebarPressed] = useState(false);
   let platform: PlatformName = "other";
   useEffect(() => {
     platform = getCurrentPlatform(window.navigator);
   });
 
+  useEffect(() => {
+    const kd = (e) => {
+      // if spacebar is pressed, enable panning wirt dragging.
+      if (e.code === "Space") {
+        setIsSpacebarPressed(true);
+      }
+    };
+    const ku = (e) => {
+      if (e.code === "Space") {
+        setIsSpacebarPressed(false);
+      }
+    };
+
+    document.addEventListener("keydown", kd);
+    document.addEventListener("keyup", ku);
+
+    return () => {
+      document.removeEventListener("keydown", kd);
+      document.removeEventListener("keyup", ku);
+    };
+  });
+
   const transform_wheel_to_zoom = (s) => {
     return {
       ...s,
@@ -65,6 +88,10 @@ export function CanvasEventTarget({
       onPinchStart: onZoomingStart,
       onPinchEnd: onZoomingEnd,
       onWheel: (s) => {
+        if (s.altKey) {
+          // altkey prevents panning the canvas.
+          return;
+        }
         if (s.ctrlKey) {
           // crtl key is also enabled on onPinch - we don't have to explicitly add linux & windows support for ctrl + scroll.
           return;
@@ -80,6 +107,24 @@ export function CanvasEventTarget({
       onWheelStart: onPanningStart,
       onWheelEnd: onPanningEnd,
       onMove: onPointerMove,
+      onDragStart: (s) => {
+        if (isSpacebarPressed) {
+          onPanningStart(s as any);
+        }
+      },
+      onDrag: (s) => {
+        if (isSpacebarPressed) {
+          onPanning({
+            ...s,
+            delta: [-s.delta[0], -s.delta[1]],
+          } as any);
+        }
+      },
+      onDragEnd: (s) => {
+        if (isSpacebarPressed) {
+          onPanningEnd(s as any);
+        }
+      },
       onMouseDown: onPointerDown,
       onMoveStart: onPointerMoveStart,
       onMoveEnd: onPointerMoveEnd,
@@ -89,6 +134,9 @@ export function CanvasEventTarget({
 
   return (
     <EventTargetContainer
+      style={{
+        cursor: isSpacebarPressed ? "grab" : "default",
+      }}
       id="gesture-event-listener"
       ref={interactionEventTargetRef}
     />

editor-packages/editor-canvas/canvas/canvas.tsx

@@ -96,14 +96,22 @@ export function Canvas({
   };
 
   const onPointerDown: OnPointerDownHandler = (state) => {
+    if (isPanning || isZooming) {
+      return;
+    }
     if (hoveringLayer) {
       onSelectNode(hoveringLayer);
     } else {
       onClearSelection();
     }
   };
 
-  const onPanning: OnPanningHandler = ({ delta: [x, y], wheeling }) => {
+  const onPanning: OnPanningHandler = (s) => {
+    const {
+      delta: [x, y],
+      wheeling,
+    } = s;
+
     setXY([xy[0] - x / zoom, xy[1] - y / zoom]);
   };
   const onZooming: OnZoomingHandler = (state) => {