From d5196f4340b467293c9e7533664a251fdb2df1ae Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Wed, 14 Sep 2022 11:21:39 +0200
Subject: [PATCH] Re-implementing basic scale and shift actions (without
 reevaluating the scope).

---
 src/components/map/map.tsx |  2 +-
 src/store/map.ts           | 25 +++++++++++++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx
index 695b127..afb75c1 100644
--- a/src/components/map/map.tsx
+++ b/src/components/map/map.tsx
@@ -1,5 +1,5 @@
 import react, { useMemo, useEffect, Fragment } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { mapActions } from '../../store/map';
 import _ from 'lodash';
 
diff --git a/src/store/map.ts b/src/store/map.ts
index 5356ac1..bb73750 100644
--- a/src/store/map.ts
+++ b/src/store/map.ts
@@ -1,5 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
-import _, { round } from 'lodash';
+import _ from 'lodash';
 import { tileSize } from '../components/map/tiled-map';
 import { geoPoint, Point, lon2tile, lat2tile } from '../lib/geo';
 
@@ -11,7 +11,7 @@ export interface MapScope {
   zoom: number;
 }
 const initialMapScope: MapScope = {
-  center: { lat:  -37.8403508, lon: 77.5539501 },
+  center: { lat: -37.8403508, lon: 77.5539501 },
   zoom: 13.49,
 };
 
@@ -107,8 +107,25 @@ const mapSlice = createSlice({
     resize: (state) => {
       return computeStateFromScope(state.scope);
     },
-    shift: (state, action) => {},
-    scale: (state, action) => {},
+    shift: (state, action) => {
+      state.slippy.translation = {
+        x: state.slippy.translation.x + action.payload.x,
+        y: state.slippy.translation.y + action.payload.y,
+      };
+    },
+    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),
+      };
+    },
   },
 });