refactor hold functionality

src/behaviors/CellSelectionBehavior.ts

@@ -123,7 +123,16 @@ export const CellSelectionBehavior: Behavior = {
   },
 
   handlePointerEnter(event, store) {
+    return store;
+  },
+
+  handlePointerHold: function (event, store) {
+    devEnvironment && console.log("CSB/handlePointerHold");
+    return store;
+  },
 
+  handlePointerHoldTouch: function (event, store) {
+    devEnvironment && console.log("CSB/handlePointerHoldTouch");
     return store;
   },
 
@@ -165,7 +174,6 @@ export const CellSelectionBehavior: Behavior = {
   },
 
   handlePointerEnterTouch(event, store) {
-
     return store;
   },
 };

src/behaviors/DefaultBehavior.ts

@@ -58,6 +58,16 @@ export const DefaultBehavior = (config: DefaultBehaviorConfig = CONFIG_DEFAULTS)
     return store;
   },
 
+  handlePointerHold: function (event, store) {
+    devEnvironment && console.log("DB/handlePointerHold");
+    return store;
+  },
+
+  handlePointerHoldTouch: function (event, store) {
+    devEnvironment && console.log("DB/handlePointerHoldTouch");
+    return store;
+  },
+
   handleKeyDown: function (event, store) {
     return handleKeyDown(event, store, { moveHorizontallyOnEnter: config.moveHorizontallyOnEnter });
   },

src/controllers/handlePointerDown.ts

@@ -7,12 +7,23 @@ import { updateStoreWithApiAndEventHandler } from "../utils/updateStoreWithApiAn
 import { ReactGridStore } from "../types/ReactGridStore.ts";
 
 export const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>, storeApi: StoreApi<ReactGridStore>) => {
+  const usedTouch = event.pointerType !== "mouse"; // * keep in mind there is also "pen" pointerType
+
+  let holdTimeoutId: NodeJS.Timeout;
+
+  if (event.button === 2 || usedTouch) {
+    holdTimeoutId = setTimeout(() => {
+      const handler = usedTouch
+        ? getNewestState().currentBehavior.handlePointerHoldTouch
+        : getNewestState().currentBehavior.handlePointerHold;
+      updateWithStoreApi(event, handler);
+    }, 500);
+  }
+
   function getNewestState() {
     return storeApi.getState();
   }
 
-  const usedTouch = event.pointerType !== "mouse"; // * keep in mind there is also "pen" pointerType
-
   const updateWithStoreApi = <TEvent extends React.SyntheticEvent<HTMLElement> | PointerEvent>(
     event: TEvent,
     handler?: HandlerFn<TEvent>
@@ -52,61 +63,15 @@ export const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>, sto
     window.removeEventListener("pointermove", handlePointerMove);
     window.removeEventListener("pointerup", handlePointerUp);
 
+    if (holdTimeoutId) clearTimeout(holdTimeoutId);
+
     const handler = usedTouch
       ? getNewestState().currentBehavior.handlePointerUpTouch
       : getNewestState().currentBehavior.handlePointerUp;
 
     updateWithStoreApi(event, handler);
   };
 
-  function detectHold(event: React.PointerEvent<HTMLDivElement>, usedTouch: boolean) {
-    return new Promise((resolve) => {
-      let startTime: number = 0;
-      let isCheckingHold: boolean = false;
-      let intervalId: NodeJS.Timeout;
-
-      function handleHold() {
-        console.log("Hold detected");
-        isCheckingHold = false;
-      }
-
-      function checkHoldDuration() {
-        if (!isCheckingHold) return;
-        if (Date.now() - startTime >= 500) {
-          handleHold();
-          clearInterval(intervalId);
-        }
-      }
-
-      function pointerDownHandler(e: React.PointerEvent<HTMLDivElement>) {
-        if ((e.button === 2 || usedTouch) && !isCheckingHold) {
-          // right mouse button or touch
-          startTime = Date.now();
-          isCheckingHold = true;
-          intervalId = setInterval(checkHoldDuration, 50); // check every 50ms
-          window.addEventListener("pointerup", pointerUpHandler);
-        }
-      }
-
-      function pointerUpHandler(e: PointerEvent) {
-        if (e.button === 2 || usedTouch) {
-          isCheckingHold = false;
-          clearInterval(intervalId);
-          window.removeEventListener("pointerup", pointerUpHandler);
-          if (Date.now() - startTime >= 200) {
-            resolve(true); // resolve if the button was held down for 200ms or more
-          }
-        }
-      }
-
-      pointerDownHandler(event);
-    });
-  }
-
-  detectHold(event, usedTouch).then(() => {
-    console.log("Hold action completed");
-  });
-
   // Remove listeners after pointerDown
   window.addEventListener("pointermove", handlePointerMove);
   window.addEventListener("pointerup", handlePointerUp);

src/types/Behavior.ts

@@ -10,6 +10,8 @@ export type HandlerFn<TEvent extends React.SyntheticEvent | Event> = (
 ) => ReactGridStore;
 
 export type PointerEventHandler = HandlerFn<React.PointerEvent<HTMLDivElement> | PointerEvent>;
+export type PointerHoldEventHandler = HandlerFn<React.PointerEvent<HTMLDivElement> | PointerEvent>;
+export type PointerHoldTouchEventHandler = HandlerFn<React.PointerEvent<HTMLDivElement> | PointerEvent>;
 export type MouseEventHandler = HandlerFn<React.MouseEvent<HTMLDivElement>>;
 export type KeyboardEventHandler = HandlerFn<React.KeyboardEvent<HTMLDivElement>>;
 export type CompositionEventHandler = HandlerFn<React.CompositionEvent<HTMLDivElement>>;
@@ -23,11 +25,13 @@ export type Behavior = {
   handlePointerMove?: PointerEventHandler;
   handlePointerLeave?: PointerEventHandler;
   handlePointerUp?: PointerEventHandler;
+  handlePointerHold?: PointerHoldEventHandler;
 
   handlePointerDownTouch?: PointerEventHandler;
   handlePointerMoveTouch?: PointerEventHandler;
   handlePointerEnterTouch?: PointerEventHandler;
   handlePointerUpTouch?: PointerEventHandler;
+  handlePointerHoldTouch?: PointerHoldEventHandler;
 
   handleDoubleClick?: MouseEventHandler;
 

src/utils/updateStoreWithApiAndEventHandler.ts

@@ -18,4 +18,4 @@ export const updateStoreWithApiAndEventHandler = <TEvent extends React.Synthetic
   }
 
   return store;
-}
+};