From ab5c8ff6bb0978dba8d1c3641b94652f0ae9405c Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Tue, 18 Oct 2022 14:24:21 +0200
Subject: [PATCH] Simple implementation of event handler throttling.

---
 src/components/map/Handlers.tsx   | 53 ++++++++++++++++++-------------
 src/components/map/TiledLayer.tsx |  2 +-
 src/components/map/config.ts      |  2 +-
 3 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/components/map/Handlers.tsx b/src/components/map/Handlers.tsx
index 460bc42..6d04db3 100644
--- a/src/components/map/Handlers.tsx
+++ b/src/components/map/Handlers.tsx
@@ -1,8 +1,7 @@
 import react, { useState } from 'react';
-import { throttle } from 'lodash';
 import { Point } from './types';
-import { handlersConfig } from './config';
 import './Handler.css';
+import { handlersConfig } from './config';
 
 export interface HandlersProperties {
   /**Transform the map:
@@ -44,7 +43,11 @@ export const Handlers: react.FC<HandlersProperties> = (
   const initialMouseState = {
     down: false,
     starting: { x: -1, y: -1 },
+    timestamp: 0,
   };
+
+  const [mouseState, setMouseState] = useState(initialMouseState);
+
   const mouseLeaveHandler = (event: any) => {
     genericHandler(event);
     setMouseState(initialMouseState);
@@ -55,6 +58,7 @@ export const Handlers: react.FC<HandlersProperties> = (
     setMouseState({
       down: true,
       starting: { x: event.clientX, y: event.clientY },
+      timestamp: 0,
     });
   };
 
@@ -63,28 +67,33 @@ export const Handlers: react.FC<HandlersProperties> = (
     setMouseState(initialMouseState);
   };
 
-  const mouseMoveHandler = throttle((event: any) => {
-    genericHandler(event);
-    if (mouseState.down) {
-      props.transformMap(
-        {
-          x: event.clientX - mouseState.starting.x,
-          y: event.clientY - mouseState.starting.y,
-        },
-        null,
-        null
-      );
-      setMouseState({
-        down: true,
-        starting: {
-          x: event.clientX,
-          y: event.clientY,
-        },
-      });
+  const mouseMoveHandler = (event: any) => {
+    if (
+      mouseState.down &&
+      Date.now() - mouseState.timestamp > handlersConfig.mouseMoveThrottleDelay
+    ) {
+      genericHandler(event);
+      if (mouseState.down) {
+        props.transformMap(
+          {
+            x: event.clientX - mouseState.starting.x,
+            y: event.clientY - mouseState.starting.y,
+          },
+          null,
+          null
+        );
+        setMouseState({
+          down: true,
+          starting: {
+            x: event.clientX,
+            y: event.clientY,
+          },
+          timestamp: Date.now(),
+        });
+      }
     }
-  }, handlersConfig.mouseMoveThrottleDelay);
+  };
 
-  const [mouseState, setMouseState] = useState(initialMouseState);
   return (
     <div
       className='handler'
diff --git a/src/components/map/TiledLayer.tsx b/src/components/map/TiledLayer.tsx
index 8f99bd3..e780c18 100644
--- a/src/components/map/TiledLayer.tsx
+++ b/src/components/map/TiledLayer.tsx
@@ -1,4 +1,4 @@
-import react, { useEffect, useRef } from 'react';
+import react, { useRef } from 'react';
 import { range, isEqual } from 'lodash';
 
 import { Rectangle, TileFactory, TileKeyObject } from './types';
diff --git a/src/components/map/config.ts b/src/components/map/config.ts
index fe38b5c..426e59b 100644
--- a/src/components/map/config.ts
+++ b/src/components/map/config.ts
@@ -1,5 +1,5 @@
 /**The handlers configuration */
 export const handlersConfig = {
     /**Controls the activity of the mouse mouse event */
-    mouseMoveThrottleDelay: 1000,
+    mouseMoveThrottleDelay: 50,
 }
\ No newline at end of file