dyomedea/src/components/map/Map.tsx

96 lines
2.4 KiB
TypeScript
Raw Normal View History

import react from 'react';
import { atom, useAtom } from 'jotai';
2022-10-18 11:45:16 +00:00
import Handlers from './Handlers';
import { Point } from './types';
import LayerStack from './LayerStack';
2022-10-17 08:37:26 +00:00
2022-10-17 10:04:25 +00:00
export interface MapProperties {}
2022-10-17 08:37:26 +00:00
2022-10-19 11:55:44 +00:00
/**
* Definition of a coordinate system
*
* The coordinate system is shifted and zoomed (from the viewport origin)
*
*/
export interface CoordinateSystem {
/** Zoom relative to the origin */
zoom: number;
/** Origin's shift (in pixels) */
shift: Point;
}
const initialCoordinateSystem: CoordinateSystem = {
zoom: 1,
shift: { x: 0, y: 0 },
};
2022-10-18 11:45:16 +00:00
2022-10-19 11:55:44 +00:00
/** An atom to store the map coordinates system */
export const coordinateSystemAtom = atom(initialCoordinateSystem);
2022-10-19 11:04:56 +00:00
/**
* Description of coordinates system transformation
*/
export interface Transformation {
2022-10-19 11:04:56 +00:00
/** New translation to apply */
deltaShift: Point | null;
2022-10-19 11:04:56 +00:00
/** Zoom factor to apply */
deltaZoom: number | null;
2022-10-19 11:04:56 +00:00
/** Center of the new zoom to apply */
zoomCenter: Point | null;
}
2022-10-17 20:37:07 +00:00
2022-10-19 11:04:56 +00:00
/**
* A write only atom to translate and zoom the coordinate system
*/
export const relativeCoordinateSystemAtom = atom(
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);
2022-10-18 11:45:16 +00:00
var newCoordinateSystem = {
shift: {
x:
coordinateSystem.shift.x +
actualDeltaShift.x +
(coordinateSystem.shift.x - actualZoomCenter.x) *
(actualDeltaZoom - 1),
y:
coordinateSystem.shift.y +
actualDeltaShift.y +
(coordinateSystem.shift.y - actualZoomCenter.y) *
(actualDeltaZoom - 1),
},
zoom: coordinateSystem.zoom * actualDeltaZoom,
};
set(coordinateSystemAtom, newCoordinateSystem);
}
);
/**
*
* @returns A Map component
*
* TODO: Is this component really useful ?
* TODO: does the coordinate system belong to this component or to `<LayerStack>` ?
*/
export const Map: react.FC<MapProperties> = (props: MapProperties) => {
const [coordinateSystem, setCoordinateSystem] = useAtom(coordinateSystemAtom);
2022-10-17 20:37:07 +00:00
return (
2022-10-18 11:45:16 +00:00
<>
<Handlers />
<LayerStack
numberOfTiledLayers={3}
keyObject={{ provider: 'osm', zoomLevel: 16, x: 33485, y: 23936 }}
/>
2022-10-18 11:45:16 +00:00
</>
2022-10-17 20:37:07 +00:00
);
2022-10-17 08:37:26 +00:00
};
export default Map;