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

src/components/map/Handlers.tsx

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