Implementing a SVG layout (aka whiteboard).

src/store/map.ts

@@ -17,9 +17,9 @@ export interface MapScope {
   center: geoPoint;
   zoom: number;
 }
-const initialMapScope: MapScope = {
+var initialMapScope: MapScope = {
   center: { lat: -37.8403508, lon: 77.5539501 },
-  zoom: 13,
+  zoom: 4,
 };
 
 // Derived properties
@@ -37,11 +37,18 @@ export interface SlippyState {
   translation: Point;
 }
 
+// Properties needed to render the SVG whiteboard
+export interface WhiteboardState {
+  scale: number;
+  translation: Point;
+}
+
 // Global state
 export interface MapState {
   scope: MapScope;
   tiles: TilesDescription;
   slippy: SlippyState;
+  whiteboard: WhiteboardState;
 }
 /*
 
@@ -87,6 +94,30 @@ export var initialMapState: MapState = {
     },
     zoom: 0,
   },
+  whiteboard: {
+    scale: 0,
+    translation: {
+      x: 0,
+      y: 0,
+    },
+  },
+};
+
+const evaluateWhiteboardViewBox = (
+  state: MapState,
+  visibleTileSize: number
+) => {
+  // Update the whiteboard SVG viewBox
+
+  const scaleFactor = 2 ** state.scope.zoom;
+
+  state.whiteboard.scale = scaleFactor * tileSize;
+  state.whiteboard.translation.x =
+    (-state.tiles.first.x * visibleTileSize + state.slippy.translation.x) /
+    state.whiteboard.scale;
+  state.whiteboard.translation.y =
+    (-state.tiles.first.y * visibleTileSize + state.slippy.translation.y) /
+    state.whiteboard.scale;
 };
 
 export const evaluateStateFromScope = (state: MapState) => {
@@ -122,6 +153,8 @@ export const evaluateStateFromScope = (state: MapState) => {
     tilesCenterTargetLocation.x - tilesCenterActualLocation.x;
   state.slippy.translation.y =
     tilesCenterTargetLocation.y - tilesCenterActualLocation.y;
+
+  evaluateWhiteboardViewBox(state, visibleTileSize);
 };
 
 evaluateStateFromScope(initialMapState);
@@ -146,7 +179,8 @@ export const reevaluateState = (state: MapState) => {
 
   state.scope.zoom = state.tiles.zoom + Math.log2(state.slippy.scale);
 
-  // TODO: zoom level
+  // Check if the state must be reevaluated
+
   if (
     -state.slippy.translation.x < visibleTileSize ||
     -state.slippy.translation.y < visibleTileSize ||
@@ -158,6 +192,8 @@ export const reevaluateState = (state: MapState) => {
     state.slippy.scale < Math.SQRT1_2
   ) {
     evaluateStateFromScope(state);
+  } else {
+    evaluateWhiteboardViewBox(state, visibleTileSize);
   }
 };