Continuing to re-plug the handlers.

This commit is contained in:
Eric van der Vlist 2022-10-31 21:01:56 +01:00
parent eb1618d009
commit 8deed17b05
2 changed files with 38 additions and 17 deletions

View File

@ -81,10 +81,10 @@ export const Handlers: react.FC<HandlersProperties> = (
if ( if (
mouseState.current.down && mouseState.current.down &&
Date.now() - mouseState.current.timestamp > Date.now() - mouseState.current.timestamp >
handlersConfig.mouseMoveThrottleDelay && handlersConfig.mouseMoveThrottleDelay /* &&
(event.clientX - mouseState.current.starting.x) ** 2 + (event.clientX - mouseState.current.starting.x) ** 2 +
(event.clientY - mouseState.current.starting.y) ** 2 > (event.clientY - mouseState.current.starting.y) ** 2 >
100 100 */
) { ) {
genericHandler(event); genericHandler(event);
if (mouseState.current.down) { if (mouseState.current.down) {
@ -227,15 +227,6 @@ export const Handlers: react.FC<HandlersProperties> = (
); );
const factor = newDistance / touchState.current.distance; const factor = newDistance / touchState.current.distance;
// console.log(`+++++++++ ZOOM Factor is ${factor} ++++++++++`); // console.log(`+++++++++ ZOOM Factor is ${factor} ++++++++++`);
touchState.current = {
state: 'double',
touches: [
{ x: event.touches[0].screenX, y: event.touches[0].screenY },
{ x: event.touches[1].screenX, y: event.touches[1].screenY },
],
distance: newDistance,
timestamp: Date.now(),
};
const previousCenter = { const previousCenter = {
x: x:
(touchState.current.touches[0].x + (touchState.current.touches[0].x +
@ -257,10 +248,19 @@ export const Handlers: react.FC<HandlersProperties> = (
}, },
deltaZoom: factor, deltaZoom: factor,
zoomCenter: { zoomCenter: {
x: currentCenter.x - previousCenter.x, x: (currentCenter.x + previousCenter.x) / 2,
y: currentCenter.y - previousCenter.y, y: (currentCenter.y + previousCenter.y) / 2,
}, },
}); });
touchState.current = {
state: 'double',
touches: [
{ x: event.touches[0].screenX, y: event.touches[0].screenY },
{ x: event.touches[1].screenX, y: event.touches[1].screenY },
],
distance: newDistance,
timestamp: Date.now(),
};
} }
} else if ( } else if (
touchState.current.state === 'pointer' && touchState.current.state === 'pointer' &&

View File

@ -81,7 +81,8 @@ export const LiveMap: react.FC<LiveMapProperties> = (
const [scope, setScope] = useState(props.scope); const [scope, setScope] = useState(props.scope);
console.log(`LiveMap rendering: ${JSON.stringify(scope)}`); console.log(`LiveMap rendering: ${JSON.stringify(scope)}`);
const transform = (t: Transformation) => { const transform = (t: Transformation) => {
const deltaZoom = t.deltaZoom === null ? 0 : Math.log2(t.deltaZoom); const deltaZoom = t.deltaZoom === null ? 1 : t.deltaZoom;
const deltaZoomLevel = Math.log2(deltaZoom);
const tileProvider = tileProviders[scope.tileProvider]; const tileProvider = tileProviders[scope.tileProvider];
@ -93,17 +94,37 @@ export const LiveMap: react.FC<LiveMapProperties> = (
const relativeScale = 2 ** softZoom; const relativeScale = 2 ** softZoom;
const visibleTileSize = tileProvider.tileSize * relativeScale; const visibleTileSize = tileProvider.tileSize * relativeScale;
// Values in pixels
const actualDeltaShift =
t.deltaShift === null ? { x: 0, y: 0 } : t.deltaShift;
const actualZoomCenter =
t.zoomCenter === null ? { x: 0, y: 0 } : t.zoomCenter;
// Values in tiles (for the current zoom level)
const actualDeltaShiftTiles = {
x: actualDeltaShift.x / visibleTileSize,
y: actualDeltaShift.y / visibleTileSize,
};
const actualZoomCenterTiles = {
x: actualZoomCenter.x / visibleTileSize,
y: actualZoomCenter.y / visibleTileSize,
};
const tilesCenter: Point = { const tilesCenter: Point = {
x: lon2tile(scope.center.lon, tilesZoom), x: lon2tile(scope.center.lon, tilesZoom),
y: lat2tile(scope.center.lat, tilesZoom), y: lat2tile(scope.center.lat, tilesZoom),
}; };
const newTilesCenter = { const newTilesCenter = {
x: x:
tilesCenter.x - tilesCenter.x -
(t.deltaShift === null ? 0 : t.deltaShift.x) / visibleTileSize, actualDeltaShiftTiles.x -
(window.innerWidth / 2 / visibleTileSize - actualZoomCenterTiles.x) *
(deltaZoom - 1),
y: y:
tilesCenter.y - tilesCenter.y -
(t.deltaShift === null ? 0 : t.deltaShift.y) / visibleTileSize, actualDeltaShiftTiles.y -
(window.innerHeight / 2 / visibleTileSize - actualZoomCenterTiles.y) *
(deltaZoom - 1),
}; };
const newScope: MapScope = { const newScope: MapScope = {
@ -111,7 +132,7 @@ export const LiveMap: react.FC<LiveMapProperties> = (
lat: tile2lat(newTilesCenter.y, tilesZoom), lat: tile2lat(newTilesCenter.y, tilesZoom),
lon: tile2long(newTilesCenter.x, tilesZoom), lon: tile2long(newTilesCenter.x, tilesZoom),
}, },
zoom: deltaZoom + scope.zoom, zoom: deltaZoomLevel + scope.zoom,
tileProvider: scope.tileProvider, tileProvider: scope.tileProvider,
}; };
console.log( console.log(