Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Taking scale into account while reevaluating the state.

This commit is contained in:
Eric van der Vlist 2022-09-14 20:36:43 +02:00
parent 67e4d13989
commit 4204168a3f
1 changed files with 37 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/store/map.ts
View File

@ -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 +
(state.slippy.translation.x - action.payload.center.x) *
(action.payload.factor - 1),
y:
(action.payload.factor - 1);
state.slippy.translation.y =
state.slippy.translation.y +
(state.slippy.translation.y - action.payload.center.y) *
(action.payload.factor - 1),
};
(action.payload.factor - 1);
reevaluateState(state);
},
},