dyomedea/src/components/map/Map.tsx

import react from 'react';
import { atom, useAtom } from 'jotai';

import Handlers from './Handlers';
import { Point } from './types';
import LayerStack from './LayerStack';

export interface MapProperties {}

/**
 * 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 },
};

/** An atom to store the map coordinates system */
export const coordinateSystemAtom = atom(initialCoordinateSystem);

/**
 * Description of coordinates system transformation
 */
export interface Transformation {
  /** New translation to apply */
  deltaShift: Point | null;
  /** Zoom factor to apply */
  deltaZoom: number | null;
  /** Center of the new zoom to apply */
  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);
  }
);

/**
 *
 * @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);

  return (
    <>
      <Handlers />
      <LayerStack
        numberOfTiledLayers={3}
        keyObject={{ provider: 'osm', zoomLevel: 16, x: 33485, y: 23936 }}
      />
    </>
  );
};

export default Map;