Using Jotai between <Map> and <Handlers> (TODO: adapt Handlers.test.tsx)

This commit is contained in:
Eric van der Vlist 2022-10-19 11:17:24 +02:00
parent 552a49e0d6
commit acbefa983d
5 changed files with 138 additions and 64 deletions

56
package-lock.json generated
View File

@ -27,6 +27,7 @@
"@types/react-router-dom": "^5.1.7", "@types/react-router-dom": "^5.1.7",
"docuri": "^4.2.2", "docuri": "^4.2.2",
"ionicons": "^6.0.3", "ionicons": "^6.0.3",
"jotai": "^1.8.6",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
@ -10584,6 +10585,55 @@
"url": "https://github.com/chalk/supports-color?sponsor=1" "url": "https://github.com/chalk/supports-color?sponsor=1"
} }
}, },
"node_modules/jotai": {
"version": "1.8.6",
"resolved": "https://registry.npmjs.org/jotai/-/jotai-1.8.6.tgz",
"integrity": "sha512-6JXNd2ewR6Ur0hGY0kRJebQ++p7lN/8kNdGNXv7XT11FDPxAtPN2XLM+m0w4bV22f1knQlG8ZpVLfY6BEGF+UQ==",
"engines": {
"node": ">=12.7.0"
},
"peerDependencies": {
"@babel/core": "*",
"@babel/template": "*",
"@tanstack/query-core": "*",
"@urql/core": "*",
"immer": "*",
"optics-ts": "*",
"react": ">=16.8",
"valtio": "*",
"wonka": "*",
"xstate": "*"
},
"peerDependenciesMeta": {
"@babel/core": {
"optional": true
},
"@babel/template": {
"optional": true
},
"@tanstack/query-core": {
"optional": true
},
"@urql/core": {
"optional": true
},
"immer": {
"optional": true
},
"optics-ts": {
"optional": true
},
"valtio": {
"optional": true
},
"wonka": {
"optional": true
},
"xstate": {
"optional": true
}
}
},
"node_modules/js-sdsl": { "node_modules/js-sdsl": {
"version": "4.1.5", "version": "4.1.5",
"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
@ -24804,6 +24854,12 @@
} }
} }
}, },
"jotai": {
"version": "1.8.6",
"resolved": "https://registry.npmjs.org/jotai/-/jotai-1.8.6.tgz",
"integrity": "sha512-6JXNd2ewR6Ur0hGY0kRJebQ++p7lN/8kNdGNXv7XT11FDPxAtPN2XLM+m0w4bV22f1knQlG8ZpVLfY6BEGF+UQ==",
"requires": {}
},
"js-sdsl": { "js-sdsl": {
"version": "4.1.5", "version": "4.1.5",
"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",

View File

@ -22,6 +22,7 @@
"@types/react-router-dom": "^5.1.7", "@types/react-router-dom": "^5.1.7",
"docuri": "^4.2.2", "docuri": "^4.2.2",
"ionicons": "^6.0.3", "ionicons": "^6.0.3",
"jotai": "^1.8.6",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",

View File

@ -8,7 +8,7 @@ describe('The Handlers component ', () => {
deltaZoom: number | null, deltaZoom: number | null,
zoomCenter: Point | null zoomCenter: Point | null
) => {}; ) => {};
render(<Handlers transformMap={transformMap} />); render(<Handlers />);
// screen.debug(); // screen.debug();
const handlers = screen.getByRole('presentation'); const handlers = screen.getByRole('presentation');
// screen.debug(); // screen.debug();
@ -19,7 +19,7 @@ describe('The Handlers component ', () => {
/> />
`); `);
}); });
test('handle mouseDown / mouseMove events', () => { /* test('handle mouseDown / mouseMove events', () => {
var transformMapParams: any; var transformMapParams: any;
function transformMap( function transformMap(
deltaShift: Point | null, deltaShift: Point | null,
@ -242,5 +242,5 @@ Arguments [
null, null,
] ]
`); `);
}); }); */
}); });

View File

@ -1,19 +1,12 @@
import react, { useRef, useState } from 'react'; import react, { useRef, useState } from 'react';
import { atom, useAtom } from 'jotai';
import { Point } from './types'; import { Point } from './types';
import './Handler.css'; import './Handler.css';
import { handlersConfig } from './config'; import { handlersConfig } from './config';
import { Transformation, relativeCoordinateSystemAtom } from './Map';
export interface HandlersProperties { export interface HandlersProperties {}
/**Transform the map:
* * Shift the map by a number of pixel
* * Multiply the zoom by deltaZoom around the zoomCenter
* */
transformMap: (
deltaShift: Point | null,
deltaZoom: number | null,
zoomCenter: Point | null
) => void;
}
/** /**
* *
* @param props * @param props
@ -29,6 +22,8 @@ export interface HandlersProperties {
export const Handlers: react.FC<HandlersProperties> = ( export const Handlers: react.FC<HandlersProperties> = (
props: HandlersProperties props: HandlersProperties
) => { ) => {
const [, transformMap] = useAtom(relativeCoordinateSystemAtom);
const genericHandler = (event: any) => { const genericHandler = (event: any) => {
// console.log(`Log - Event: ${event.type}`); // console.log(`Log - Event: ${event.type}`);
// if (event.clientX !== undefined) { // if (event.clientX !== undefined) {
@ -84,14 +79,14 @@ export const Handlers: react.FC<HandlersProperties> = (
) { ) {
genericHandler(event); genericHandler(event);
if (mouseState.current.down) { if (mouseState.current.down) {
props.transformMap( transformMap({
{ deltaShift: {
x: event.clientX - mouseState.current.starting.x, x: event.clientX - mouseState.current.starting.x,
y: event.clientY - mouseState.current.starting.y, y: event.clientY - mouseState.current.starting.y,
}, },
null, deltaZoom: null,
null zoomCenter: null,
); });
mouseState.current = { mouseState.current = {
down: true, down: true,
starting: { starting: {
@ -112,9 +107,13 @@ export const Handlers: react.FC<HandlersProperties> = (
const doubleClickHandler = (event: any) => { const doubleClickHandler = (event: any) => {
genericHandler(event); genericHandler(event);
props.transformMap(null, Math.SQRT2, { transformMap({
deltaShift: null,
deltaZoom: Math.SQRT2,
zoomCenter: {
x: event.clientX, x: event.clientX,
y: event.clientY, y: event.clientY,
},
}); });
}; };
@ -137,9 +136,13 @@ export const Handlers: react.FC<HandlersProperties> = (
Date.now() - wheelState.current.timestamp > Date.now() - wheelState.current.timestamp >
handlersConfig.wheelThrottleDelay handlersConfig.wheelThrottleDelay
) { ) {
props.transformMap(null, event.deltaY < 0 ? Math.SQRT2 : Math.SQRT1_2, { transformMap({
deltaShift: null,
deltaZoom: event.deltaY < 0 ? Math.SQRT2 : Math.SQRT1_2,
zoomCenter: {
x: event.clientX, x: event.clientX,
y: event.clientY, y: event.clientY,
},
}); });
wheelState.current = { wheelState.current = {
timestamp: Date.now(), timestamp: Date.now(),
@ -238,17 +241,17 @@ export const Handlers: react.FC<HandlersProperties> = (
x: (event.touches[0].screenX + event.touches[1].screenX) / 2, x: (event.touches[0].screenX + event.touches[1].screenX) / 2,
y: (event.touches[0].screenY + event.touches[1].screenY) / 2, y: (event.touches[0].screenY + event.touches[1].screenY) / 2,
}; };
props.transformMap( transformMap({
{ deltaShift: {
x: currentCenter.x - previousCenter.x, x: currentCenter.x - previousCenter.x,
y: currentCenter.y - previousCenter.y, y: currentCenter.y - previousCenter.y,
}, },
factor, deltaZoom: factor,
{ zoomCenter: {
x: currentCenter.x - previousCenter.x, x: currentCenter.x - previousCenter.x,
y: currentCenter.y - previousCenter.y, y: currentCenter.y - previousCenter.y,
} },
); });
} }
} else if ( } else if (
touchState.current.state === 'pointer' && touchState.current.state === 'pointer' &&
@ -257,14 +260,14 @@ export const Handlers: react.FC<HandlersProperties> = (
) { ) {
if (event.touches.length === 1) { if (event.touches.length === 1) {
genericHandler(event); genericHandler(event);
props.transformMap( transformMap({
{ deltaShift: {
x: event.touches[0].screenX - touchState.current.touches[0].x, x: event.touches[0].screenX - touchState.current.touches[0].x,
y: event.touches[0].screenY - touchState.current.touches[0].y, y: event.touches[0].screenY - touchState.current.touches[0].y,
}, },
null, deltaZoom: null,
null zoomCenter: null,
); });
touchState.current = { touchState.current = {
state: 'pointer', state: 'pointer',
touches: [ touches: [

View File

@ -1,4 +1,6 @@
import react, { useCallback, useState } from 'react'; import react, { useCallback, useState } from 'react';
import { atom, useAtom } from 'jotai';
import Handlers from './Handlers'; import Handlers from './Handlers';
import Tile from './Tile'; import Tile from './Tile';
import TiledLayer from './TiledLayer'; import TiledLayer from './TiledLayer';
@ -6,33 +8,28 @@ import { Point, TileFactory } from './types';
export interface MapProperties {} export interface MapProperties {}
/** const initialCoordinateSystem = {
*
* @returns A Map component
*/
export const Map: react.FC<MapProperties> = (props: MapProperties) => {
const [coordinateSystem, setCoordinateSystem] = useState({
zoom: 1, zoom: 1,
shift: { x: 0, y: 0 }, shift: { x: 0, y: 0 },
}); };
const simpleTileFactory: TileFactory = useCallback( const coordinateSystemAtom = atom(initialCoordinateSystem);
(keyObject) => (
<Tile
href={`https://tile.openstreetmap.org/${keyObject.zoomLevel}/${keyObject.x}/${keyObject.y}.png`}
/>
),
[]
);
const transformMap = ( export interface Transformation {
deltaShift: Point | null, deltaShift: Point | null;
deltaZoom: number | null, deltaZoom: number | null;
zoomCenter: Point | null zoomCenter: Point | null;
) => { }
const actualDeltaShift = deltaShift === null ? { x: 0, y: 0 } : deltaShift;
const actualDeltaZoom = deltaZoom === null ? 1 : deltaZoom; export const relativeCoordinateSystemAtom = atom(
const actualZoomCenter = zoomCenter === null ? { x: 0, y: 0 } : zoomCenter; null,
(get, set, t: Transformation) => {
const actualDeltaShift =
t.deltaShift === null ? { x: 0, y: 0 } : t.deltaShift;
const actualDeltaZoom = t.deltaZoom === null ? 1 : t.deltaZoom;
const actualZoomCenter =
t.zoomCenter === null ? { x: 0, y: 0 } : t.zoomCenter;
const coordinateSystem = get(coordinateSystemAtom);
var newCoordinateSystem = { var newCoordinateSystem = {
shift: { shift: {
x: x:
@ -48,8 +45,25 @@ export const Map: react.FC<MapProperties> = (props: MapProperties) => {
}, },
zoom: coordinateSystem.zoom * actualDeltaZoom, zoom: coordinateSystem.zoom * actualDeltaZoom,
}; };
setCoordinateSystem(newCoordinateSystem); set(coordinateSystemAtom, newCoordinateSystem);
}; }
);
/**
*
* @returns A Map component
*/
export const Map: react.FC<MapProperties> = (props: MapProperties) => {
const [coordinateSystem, setCoordinateSystem] = useAtom(coordinateSystemAtom);
const simpleTileFactory: TileFactory = useCallback(
(keyObject) => (
<Tile
href={`https://tile.openstreetmap.org/${keyObject.zoomLevel}/${keyObject.x}/${keyObject.y}.png`}
/>
),
[]
);
const viewPort = { const viewPort = {
topLeft: { topLeft: {
@ -72,7 +86,7 @@ export const Map: react.FC<MapProperties> = (props: MapProperties) => {
return ( return (
<> <>
<Handlers transformMap={transformMap} /> <Handlers />
<svg width={window.innerWidth} height={window.innerHeight}> <svg width={window.innerWidth} height={window.innerHeight}>
<g <g
transform={`translate(${coordinateSystem.shift.x}, ${coordinateSystem.shift.y}) scale(${coordinateSystem.zoom})`} transform={`translate(${coordinateSystem.shift.x}, ${coordinateSystem.shift.y}) scale(${coordinateSystem.zoom})`}