move hover from gui to canvas reducer

src/components/CoordinatesBox.jsx

@@ -17,7 +17,7 @@ function renderCoordinates(cell) {
 
 const CoordinatesBox = () => {
   const view = useSelector((state) => state.canvas.view);
-  const hover = useSelector((state) => state.gui.hover);
+  const hover = useSelector((state) => state.canvas.hover);
   const dispatch = useDispatch();
 
   return (

src/controls/PixelPainterControls.js

@@ -391,7 +391,7 @@ class PixelPlainterControls {
     const { deltaY } = event;
     const { store } = this;
     const state = store.getState();
-    const { hover } = state.gui;
+    const { hover } = state.canvas;
     let zoompoint = null;
     if (hover) {
       zoompoint = hover;
@@ -427,7 +427,7 @@ class PixelPlainterControls {
         lastPosY - (deltaY / scale),
       ]));
     } else {
-      const { hover } = state.gui;
+      const { hover } = state.canvas;
       const screenCoor = screenToWorld(
         state,
         this.viewport,
@@ -580,7 +580,7 @@ class PixelPlainterControls {
       case 'Control':
       case 'Shift': {
         const state = store.getState();
-        const { hover } = state.gui;
+        const { hover } = state.canvas;
         if (hover) {
           if (event.key === 'Control') {
             // ctrl

src/controls/keypress.js

@@ -83,7 +83,7 @@ function createKeyPressHandler(store) {
           : t`Unmuted Sound`));
         return;
       case 'r': {
-        const { hover } = store.getState().gui;
+        const { hover } = store.getState().canvas;
         const text = hover.join('_');
         copy(text);
         store.dispatch(notify(t`Copied!`));

src/store/reducers/canvas.js

@@ -32,6 +32,7 @@ export type CanvasState = {
   historicalCanvasSize: number,
   historicalDate: string,
   historicalTime: string,
+  hover: Array,
   // object with all canvas informations from all canvases like colors and size
   canvases: Object,
   // last canvas view, scale, selectedColor and viewscale
@@ -138,6 +139,7 @@ const initialState = {
   historicalDate: null,
   historicalTime: null,
   showHiddenCanvases: false,
+  hover: null,
   prevCanvasCoords: {},
 };
 
@@ -261,6 +263,21 @@ export default function canvasReducer(
       };
     }
 
+    case 'SET_HOVER': {
+      const { hover } = action;
+      return {
+        ...state,
+        hover,
+      };
+    }
+
+    case 'UNSET_HOVER': {
+      return {
+        ...state,
+        hover: null,
+      };
+    }
+
     case 'SELECT_CANVAS': {
       let { canvasId } = action;
       const { canvases, prevCanvasCoords, canvasId: prevCanvasId } = state;

src/store/reducers/gui.js

@@ -1,7 +1,6 @@
 const initialState = {
   showGrid: false,
   showPixelNotify: false,
-  hover: null,
   autoZoomIn: false,
   isPotato: false,
   isLightGrid: false,
@@ -110,21 +109,6 @@ export default function gui(
       };
     }
 
-    case 'SET_HOVER': {
-      const { hover } = action;
-      return {
-        ...state,
-        hover,
-      };
-    }
-
-    case 'UNSET_HOVER': {
-      return {
-        ...state,
-        hover: null,
-      };
-    }
-
     case 'TOGGLE_MUTE':
       return {
         ...state,

src/store/sharedReducers.js

@@ -27,7 +27,6 @@ const guiPersist = persistReducer({
   storage,
   version: CURRENT_VERSION,
   migrate,
-  blacklist: ['hover'],
 }, gui);
 
 const ranksPersist = persistReducer({

src/ui/Renderer2D.js

@@ -419,7 +419,6 @@ class Renderer {
     const {
       showGrid,
       showPixelNotify,
-      hover,
       isPotato,
       isLightGrid,
     } = state.gui;
@@ -430,6 +429,7 @@ class Renderer {
       view,
       viewscale,
       canvasSize,
+      hover,
     } = state.canvas;
 
     const [x, y] = view;

src/ui/Renderer3D.js

@@ -429,7 +429,7 @@ class Renderer {
   onDocumentMouseDownOrTouchStart() {
     this.pressTime = Date.now();
     const state = this.store.getState();
-    this.mouseMoveStart = state.gui.hover;
+    this.mouseMoveStart = state.canvas.hover;
   }
 
   onDocumentTouchMove() {
@@ -501,7 +501,7 @@ class Renderer {
     const state = store.getState();
 
     const [px, py, pz] = mouseMoveStart;
-    const [qx, qy, qz] = state.gui.hover;
+    const [qx, qy, qz] = state.canvas.hover;
     if (px !== qx || py !== qy || pz !== qz) {
       return;
     }
@@ -587,7 +587,7 @@ class Renderer {
     }
 
     const [px, py, pz] = this.mouseMoveStart;
-    const [qx, qy, qz] = state.gui.hover;
+    const [qx, qy, qz] = state.canvas.hover;
     if (px !== qx || py !== qy || pz !== qz) {
       return;
     }

src/ui/render2Delements.js

@@ -15,7 +15,7 @@ export function renderPlaceholder(
 ) {
   const viewportCtx = $viewport.getContext('2d');
 
-  const { hover } = state.gui;
+  const { hover } = state.canvas;
   const { palette, selectedColor } = state.canvas;
 
   const [sx, sy] = worldToScreen(state, $viewport, hover);
@@ -49,7 +49,7 @@ export function renderPotatoPlaceholder(
 ) {
   const viewportCtx = $viewport.getContext('2d');
 
-  const { hover } = state.gui;
+  const { hover } = state.canvas;
   const { palette, selectedColor } = state.canvas;
 
   const [sx, sy] = worldToScreen(state, $viewport, hover);