feat(panning): implement panning using spacebar and mouse

src/components/Editor.tsx

@@ -6,6 +6,7 @@ import * as Artboards from '../contexts/Artboards';
 import * as Artboard from '../contexts/Artboard';
 import * as Layers from '../contexts/Layers';
 import * as Frames from '../contexts/Frames';
+import * as Modifiers from '../contexts/Modifiers';
 
 interface EditorProps {
   children: React.ReactNode;
@@ -15,17 +16,19 @@ const Editor: React.FC<EditorProps> = (props) => {
   const { children } = props;
 
   return (
-    <Frames.Provider>
-      <Layers.Provider>
-        <Sprites.Provider>
-          <Sprite.Provider>
-            <Artboards.Provider>
-              <Artboard.Provider>{children}</Artboard.Provider>
-            </Artboards.Provider>
-          </Sprite.Provider>
-        </Sprites.Provider>
-      </Layers.Provider>
-    </Frames.Provider>
+    <Modifiers.Provider>
+      <Frames.Provider>
+        <Layers.Provider>
+          <Sprites.Provider>
+            <Sprite.Provider>
+              <Artboards.Provider>
+                <Artboard.Provider>{children}</Artboard.Provider>
+              </Artboards.Provider>
+            </Sprite.Provider>
+          </Sprites.Provider>
+        </Layers.Provider>
+      </Frames.Provider>
+    </Modifiers.Provider>
   );
 };
 

src/components/Preview.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import CanvasLayer from './CanvasLayer';
 import { useCanvas2DContext } from '../hooks/useCanvas';
-import { useArtboard } from '../contexts/Artboard';
+import { useArtboard, useArtboardActions } from '../contexts/Artboard';
 import { paintPreview } from '../utils/paint';
 import { clean } from '../utils';
 import { useSprite } from '../contexts/Sprite';
 import { calculatePosition, validCord } from '../utils/canvas';
+import { useModifier, Key } from '../contexts/Modifiers';
 
 const noop = () => {
   console.log('noop');
@@ -16,14 +17,53 @@ interface PropTypes {
   style: React.CSSProperties;
 }
 
-const useMouseMove = (isMouseDown, canvas, context) => {
+interface Vector {
+  x: number;
+  y: number;
+}
+
+const getDiff = (vec1: Vector, vec2: Vector): Vector => ({
+  x: vec1.x - vec2.x,
+  y: vec1.y - vec2.y,
+});
+
+const useMouseMove = (
+  isMouseDown: boolean,
+  canvas: HTMLCanvasElement,
+  context: CanvasRenderingContext2D,
+  lastDragRef: React.MutableRefObject<Vector>,
+) => {
+  const isPanning = useModifier(Key.Spacebar);
   const artboard = useArtboard();
+  const { changePosition } = useArtboardActions();
   const sprite = useSprite();
 
   if (!context) {
     return noop;
   }
 
+  if (isPanning && isMouseDown) {
+    const onMouseMove = (event: React.MouseEvent) => {
+      event.preventDefault();
+      const { clientX, clientY } = event;
+      const currentDrag = { x: clientX, y: clientY };
+      // const cord = calculatePosition(artboard, clientX, clientY);
+      clean(canvas);
+      const dragDiff = lastDragRef.current
+        ? getDiff(currentDrag, lastDragRef.current)
+        : { x: 0, y: 0 };
+
+      changePosition({
+        x: artboard.x + dragDiff.x,
+        y: artboard.y + dragDiff.y,
+        scale: artboard.scale,
+      });
+      lastDragRef.current = currentDrag;
+    };
+
+    return onMouseMove;
+  }
+
   if (isMouseDown) {
     const onMouseMove = () => {
       console.log('paiting');
@@ -33,8 +73,8 @@ const useMouseMove = (isMouseDown, canvas, context) => {
   }
 
   const onMouseMove = (event: React.MouseEvent) => {
-    const { clientX, clientY } = event;
     event.preventDefault();
+    const { clientX, clientY } = event;
     clean(canvas);
     const cord = calculatePosition(artboard, clientX, clientY);
 
@@ -51,15 +91,20 @@ const useMouseMove = (isMouseDown, canvas, context) => {
 const usePreview = () => {
   const { onRef: setRef, context, canvas } = useCanvas2DContext();
   const [isMouseDown, setIsMouseDown] = React.useState(false);
+  const lastDragRef = React.useRef<Vector>();
 
-  const onMouseDown = () => {
+  const onMouseDown = (event: React.MouseEvent) => {
+    const { clientX, clientY } = event;
+    const currentDrag = { x: clientX, y: clientY };
     setIsMouseDown(true);
+    lastDragRef.current = currentDrag;
   };
   const onMouseUp = () => {
     setIsMouseDown(false);
+    lastDragRef.current = null;
   };
 
-  const onMouseMove = useMouseMove(isMouseDown, canvas, context);
+  const onMouseMove = useMouseMove(isMouseDown, canvas, context, lastDragRef);
 
   return {
     setRef,