From 4204168a3ffb7391e8cc456d8a6702db36b6b0ee Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Wed, 14 Sep 2022 20:36:43 +0200
Subject: [PATCH] Taking scale into account while reevaluating the state.

---
 src/store/map.ts | 69 ++++++++++++++++++++++++++----------------------
 1 file changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/store/map.ts b/src/store/map.ts
index 4b7b428..8bdf237 100644
--- a/src/store/map.ts
+++ b/src/store/map.ts
@@ -93,20 +93,22 @@ export const evaluateStateFromScope = (state: MapState) => {
   console.log('<<<<<<<<<<<< evaluateStateFromScope');
   state.tiles.zoom = _.round(state.scope.zoom);
   const softZoom = state.scope.zoom - state.tiles.zoom;
+
   state.slippy.scale = 2 ** softZoom;
+
   const visibleTileSize = tileSize * state.slippy.scale;
-  state.tiles.nb = {
-    x: _.ceil(window.innerWidth / visibleTileSize + 4),
-    y: _.ceil(window.innerHeight / visibleTileSize + 4),
-  };
+
+  state.tiles.nb.x = _.ceil(window.innerWidth / visibleTileSize + 4);
+  state.tiles.nb.y = _.ceil(window.innerHeight / visibleTileSize + 4);
+
   const tilesCenter: Point = {
     x: lon2tile(state.scope.center.lon, state.tiles.zoom),
     y: lat2tile(state.scope.center.lat, state.tiles.zoom),
   };
-  state.tiles.first = {
-    x: _.floor(tilesCenter.x - state.tiles.nb.x / 2),
-    y: _.floor(tilesCenter.y - state.tiles.nb.y / 2),
-  };
+
+  state.tiles.first.x = _.floor(tilesCenter.x - state.tiles.nb.x / 2);
+  state.tiles.first.y = _.floor(tilesCenter.y - state.tiles.nb.y / 2);
+
   const tilesCenterTargetLocation: Point = {
     x: window.innerWidth / 2,
     y: window.innerHeight / 2,
@@ -115,10 +117,11 @@ export const evaluateStateFromScope = (state: MapState) => {
     x: (tilesCenter.x - state.tiles.first.x) * visibleTileSize,
     y: (tilesCenter.y - state.tiles.first.y) * visibleTileSize,
   };
-  state.slippy.translation = {
-    x: tilesCenterTargetLocation.x - tilesCenterActualLocation.x,
-    y: tilesCenterTargetLocation.y - tilesCenterActualLocation.y,
-  };
+
+  state.slippy.translation.x =
+    tilesCenterTargetLocation.x - tilesCenterActualLocation.x;
+  state.slippy.translation.y =
+    tilesCenterTargetLocation.y - tilesCenterActualLocation.y;
 };
 
 evaluateStateFromScope(initialMapState);
@@ -129,7 +132,7 @@ export const reevaluateState = (state: MapState) => {
     x: window.innerWidth / 2,
     y: window.innerHeight / 2,
   };
-  const visibleTileSize = tileSize / state.slippy.scale;
+  const visibleTileSize = tileSize * state.slippy.scale;
   const centerTiles = {
     x:
       state.tiles.first.x +
@@ -138,10 +141,11 @@ export const reevaluateState = (state: MapState) => {
       state.tiles.first.y +
       (centerPX.y - state.slippy.translation.y) / visibleTileSize,
   };
-  state.scope.center = {
-    lat: tile2lat(centerTiles.y, state.tiles.zoom),
-    lon: tile2long(centerTiles.x, state.tiles.zoom),
-  };
+  state.scope.center.lat = tile2lat(centerTiles.y, state.tiles.zoom);
+  state.scope.center.lon = tile2long(centerTiles.x, state.tiles.zoom);
+
+  state.scope.zoom = state.tiles.zoom + Math.log2(state.slippy.scale);
+
   // TODO: zoom level
   if (
     -state.slippy.translation.x < visibleTileSize ||
@@ -149,7 +153,9 @@ export const reevaluateState = (state: MapState) => {
     -state.slippy.translation.x >
       (state.tiles.nb.x - 1) * visibleTileSize - window.innerWidth ||
     -state.slippy.translation.y >
-      (state.tiles.nb.y - 1) * visibleTileSize - window.innerHeight
+      (state.tiles.nb.y - 1) * visibleTileSize - window.innerHeight ||
+    state.slippy.scale > Math.SQRT2 ||
+    state.slippy.scale < Math.SQRT1_2
   ) {
     evaluateStateFromScope(state);
   }
@@ -163,24 +169,23 @@ const mapSlice = createSlice({
       evaluateStateFromScope(state);
     },
     shift: (state, action) => {
-      state.slippy.translation = {
-        x: state.slippy.translation.x + action.payload.x,
-        y: state.slippy.translation.y + action.payload.y,
-      };
+      state.slippy.translation.x =
+        state.slippy.translation.x + action.payload.x;
+      state.slippy.translation.y =
+        state.slippy.translation.y + action.payload.y;
       reevaluateState(state);
     },
     scale: (state, action) => {
       state.slippy.scale = state.slippy.scale * action.payload.factor;
-      state.slippy.translation = {
-        x:
-          state.slippy.translation.x +
-          (state.slippy.translation.x - action.payload.center.x) *
-            (action.payload.factor - 1),
-        y:
-          state.slippy.translation.y +
-          (state.slippy.translation.y - action.payload.center.y) *
-            (action.payload.factor - 1),
-      };
+      state.slippy.translation.x =
+        state.slippy.translation.x +
+        (state.slippy.translation.x - action.payload.center.x) *
+          (action.payload.factor - 1);
+      state.slippy.translation.y =
+        state.slippy.translation.y +
+        (state.slippy.translation.y - action.payload.center.y) *
+          (action.payload.factor - 1);
+
       reevaluateState(state);
     },
   },