diff --git a/src/components/map/LiveMap.test.tsx b/src/components/map/LiveMap.test.tsx deleted file mode 100644 index 44abb43..0000000 --- a/src/components/map/LiveMap.test.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import { renderHook, act } from '@testing-library/react'; -import { useAtom } from 'jotai'; -import { coordinateSystemAtom, relativeCoordinateSystemAtom } from './LiveMap'; - -describe('The Map component coordinate system', () => { - test('is initialized', () => { - const { result } = renderHook(() => useAtom(coordinateSystemAtom)); - expect(result.current[0]).toMatchInlineSnapshot(` -Object { - "shift": Object { - "x": 0, - "y": 0, - }, - "zoom": 1, -} -`); - }); - - test('reacts to a translation', () => { - const { result } = renderHook(() => [ - useAtom(coordinateSystemAtom), - useAtom(relativeCoordinateSystemAtom), - ]); - act(() => { - result.current[0][1]({ - shift: { - x: 0, - y: 0, - }, - zoom: 1, - } as any); - result.current[1][1]({ - deltaShift: { x: 5, y: 1 }, - zoomCenter: null, - deltaZoom: null, - } as any); - }); - expect(result.current[0][0]).toMatchInlineSnapshot(` -Object { - "shift": Object { - "x": 5, - "y": 1, - }, - "zoom": 1, -} -`); - }); - - test('reacts to a zoom on its origin', () => { - const { result } = renderHook(() => [ - useAtom(coordinateSystemAtom), - useAtom(relativeCoordinateSystemAtom), - ]); - act(() => { - result.current[0][1]({ - shift: { - x: 0, - y: 0, - }, - zoom: 1, - } as any); - result.current[1][1]({ - deltaShift: null, - zoomCenter: null, - deltaZoom: 5, - } as any); - }); - expect(result.current[0][0]).toMatchInlineSnapshot(` -Object { - "shift": Object { - "x": 0, - "y": 0, - }, - "zoom": 5, -} -`); - }); - - test('reacts to a zoom around another point', () => { - const { result } = renderHook(() => [ - useAtom(coordinateSystemAtom), - useAtom(relativeCoordinateSystemAtom), - ]); - act(() => { - result.current[0][1]({ - shift: { - x: 0, - y: 0, - }, - zoom: 1, - } as any); - result.current[1][1]({ - deltaShift: null, - zoomCenter: { x: 2, y: 2 }, - deltaZoom: 5, - } as any); - }); - expect(result.current[0][0]).toMatchInlineSnapshot(` -Object { - "shift": Object { - "x": -8, - "y": -8, - }, - "zoom": 5, -} -`); - }); - - test('reacts to a zoom (around another point) and a translation', () => { - const { result } = renderHook(() => [ - useAtom(coordinateSystemAtom), - useAtom(relativeCoordinateSystemAtom), - ]); - act(() => { - result.current[0][1]({ - shift: { - x: 0, - y: 0, - }, - zoom: 1, - } as any); - result.current[1][1]({ - deltaShift: { x: 1, y: 3 }, - zoomCenter: { x: 2, y: 2 }, - deltaZoom: 5, - } as any); - }); - expect(result.current[0][0]).toMatchInlineSnapshot(` -Object { - "shift": Object { - "x": -7, - "y": -5, - }, - "zoom": 5, -} -`); - }); -}); diff --git a/src/components/map/LiveMap.tsx b/src/components/map/LiveMap.tsx index 7740628..398ae4e 100644 --- a/src/components/map/LiveMap.tsx +++ b/src/components/map/LiveMap.tsx @@ -2,7 +2,6 @@ import react, { useState } from 'react'; import { MapScope, Point } from './types'; import Map from './Map'; import Handlers from './Handlers'; -import { atom } from 'jotai'; import { tileProviders } from './tile-providers'; import { lon2tile, lat2tile, tile2lat, tile2long } from '../../lib/geo'; @@ -19,14 +18,6 @@ export interface CoordinateSystem { shift: Point; } -const initialCoordinateSystem: CoordinateSystem = { - zoom: 1, - shift: { x: 0, y: 0 }, -}; - -/** An atom to store the map coordinates system */ -export const coordinateSystemAtom = atom(initialCoordinateSystem); - /** * Description of coordinates system transformation */ @@ -39,37 +30,6 @@ export interface Transformation { zoomCenter: Point | null; } -/** - * 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); - 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); - } -); - export interface LiveMapProperties { scope: MapScope; numberOfTiledLayers?: number;