Re-pluging handlers (on LiveMap).

src/components/map/Handlers.tsx

@@ -4,14 +4,16 @@ import { useAtom } from 'jotai';
 import { Point } from './types';
 import './Handler.css';
 import { handlersConfig } from './config';
-import { relativeCoordinateSystemAtom } from './Map';
+import { relativeCoordinateSystemAtom, Transformation } from './LiveMap';
 
 /**
- * 
+ *
  * See also {@link components/map/Map!relativeCoordinateSystemAtom}.
- * 
+ *
  */
-export interface HandlersProperties {}
+export interface HandlersProperties {
+  transformMap: (t: Transformation) => void;
+}
 /**
  *
  * @param props
@@ -28,8 +30,6 @@ 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) {
@@ -81,11 +81,14 @@ export const Handlers: react.FC<HandlersProperties> = (
     if (
       mouseState.current.down &&
       Date.now() - mouseState.current.timestamp >
-        handlersConfig.mouseMoveThrottleDelay
+        handlersConfig.mouseMoveThrottleDelay &&
+      (event.clientX - mouseState.current.starting.x) ** 2 +
+        (event.clientY - mouseState.current.starting.y) ** 2 >
+        100
     ) {
       genericHandler(event);
       if (mouseState.current.down) {
-        transformMap({
+        props.transformMap({
           deltaShift: {
             x: event.clientX - mouseState.current.starting.x,
             y: event.clientY - mouseState.current.starting.y,
@@ -113,7 +116,7 @@ export const Handlers: react.FC<HandlersProperties> = (
 
   const doubleClickHandler = (event: any) => {
     genericHandler(event);
-    transformMap({
+    props.transformMap({
       deltaShift: null,
       deltaZoom: Math.SQRT2,
       zoomCenter: {
@@ -142,7 +145,7 @@ export const Handlers: react.FC<HandlersProperties> = (
       Date.now() - wheelState.current.timestamp >
         handlersConfig.wheelThrottleDelay
     ) {
-      transformMap({
+      props.transformMap({
         deltaShift: null,
         deltaZoom: event.deltaY < 0 ? Math.SQRT2 : Math.SQRT1_2,
         zoomCenter: {
@@ -247,7 +250,7 @@ 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,
         };
-        transformMap({
+        props.transformMap({
           deltaShift: {
             x: currentCenter.x - previousCenter.x,
             y: currentCenter.y - previousCenter.y,
@@ -266,7 +269,7 @@ export const Handlers: react.FC<HandlersProperties> = (
     ) {
       if (event.touches.length === 1) {
         genericHandler(event);
-        transformMap({
+        props.transformMap({
           deltaShift: {
             x: event.touches[0].screenX - touchState.current.touches[0].x,
             y: event.touches[0].screenY - touchState.current.touches[0].y,