fix: fixes pan mode

src/interaction/reducers/Pan.ts

@@ -1,9 +1,14 @@
-import { CoordsUtils } from 'src/utils';
+import { CoordsUtils, setWindowCursor } from 'src/utils';
 import { InteractionReducer } from 'src/types';
 
 export const Pan: InteractionReducer = {
   type: 'PAN',
-  entry: () => {},
+  entry: () => {
+    setWindowCursor('grab');
+  },
+  exit: () => {
+    setWindowCursor('default');
+  },
   mousemove: (draftState) => {
     if (draftState.mode.type !== 'PAN') return;
 
@@ -15,5 +20,11 @@ export const Pan: InteractionReducer = {
           )
         : draftState.scroll.position;
     }
+  },
+  mousedown: () => {
+    setWindowCursor('grabbing');
+  },
+  mouseup: () => {
+    setWindowCursor('grab');
   }
 };

src/interaction/useInteractionManager.ts

@@ -58,11 +58,6 @@ export const useInteractionManager = () => {
 
       const reducer = reducers[mode.type];
 
-      // if (reducerTypeRef.current !== reducer.type) {
-      //   reducerTypeRef.current = reducer.type;
-      //   reducer.entry?.(scene);
-      // }
-
       if (
         !reducer ||
         !(
@@ -95,7 +90,37 @@ export const useInteractionManager = () => {
         itemControls
       };
 
-      const newState = produce(baseState, (draft) => {
+      const getTransitionaryState = () => {
+        if (reducerTypeRef.current === reducer.type) return null;
+
+        const prevReducerExitFn = reducerTypeRef.current
+          ? reducers[reducerTypeRef.current].exit
+          : null;
+        const nextReducerEntryFn = reducer.entry;
+
+        reducerTypeRef.current = reducer.type;
+
+        const transitionaryState: State = baseState;
+
+        const setTransitionaryState = (state: State, transitionaryFn: any) => {
+          return produce(state, (draft) => {
+            return transitionaryFn(draft);
+          });
+        };
+
+        if (prevReducerExitFn) {
+          setTransitionaryState(transitionaryState, prevReducerExitFn);
+        }
+
+        if (nextReducerEntryFn) {
+          setTransitionaryState(transitionaryState, nextReducerEntryFn);
+        }
+
+        return null;
+      };
+
+      const transitionaryState = getTransitionaryState();
+      const newState = produce(transitionaryState ?? baseState, (draft) => {
         return reducerAction(draft);
       });
 
@@ -108,9 +133,7 @@ export const useInteractionManager = () => {
     },
     [
       mode,
-      mouse.position.screen,
-      mouse.position.tile,
-      mouse.mousedown,
+      mouse,
       scroll,
       itemControls,
       uiStateActions,

src/types/interactions.ts

@@ -22,6 +22,7 @@ export type InteractionReducerAction = (state: Draft<State>) => void;
 export type InteractionReducer = {
   type: string;
   entry?: InteractionReducerAction;
+  exit?: InteractionReducerAction;
   mousemove?: InteractionReducerAction;
   mousedown?: InteractionReducerAction;
   mouseup?: InteractionReducerAction;

src/utils/common.ts

@@ -38,3 +38,7 @@ export const getColorVariant = (
       return chroma(color).alpha(alpha).css();
   }
 };
+
+export const setWindowCursor = (cursor: string) => {
+  window.document.body.style.cursor = cursor;
+};