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