add hold detection functionality (#345)

* add hold detection functionality * refactor hold functionality * remove unused type * minor refactor
silevis · Feb 14, 2024 · d6e2784 · d6e2784
1 parent 8323086
commit d6e2784
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 3 deletions.
diff --git a/src/behaviors/CellSelectionBehavior.ts b/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;
   },
 };
diff --git a/src/behaviors/DefaultBehavior.ts b/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 });
   },

diff --git a/src/controllers/handlePointerDown.ts b/src/controllers/handlePointerDown.ts
@@ -7,12 +7,26 @@ 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;
+
+  const isRightClick = event.button === 2;
+
+  if (isRightClick || usedTouch) {
+    // invoke the setTimeout callback if handlePointerUp is not called within 500ms (hold event)
+    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,6 +66,8 @@ 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;

diff --git a/src/types/Behavior.ts b/src/types/Behavior.ts
@@ -10,6 +10,7 @@ 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 MouseEventHandler = HandlerFn<React.MouseEvent<HTMLDivElement>>;
 export type KeyboardEventHandler = HandlerFn<React.KeyboardEvent<HTMLDivElement>>;
 export type CompositionEventHandler = HandlerFn<React.CompositionEvent<HTMLDivElement>>;
@@ -23,11 +24,13 @@ export type Behavior = {
   handlePointerMove?: PointerEventHandler;
   handlePointerLeave?: PointerEventHandler;
   handlePointerUp?: PointerEventHandler;
+  handlePointerHold?: PointerHoldEventHandler;
 
   handlePointerDownTouch?: PointerEventHandler;
   handlePointerMoveTouch?: PointerEventHandler;
   handlePointerEnterTouch?: PointerEventHandler;
   handlePointerUpTouch?: PointerEventHandler;
+  handlePointerHoldTouch?: PointerHoldEventHandler;
 
   handleDoubleClick?: MouseEventHandler;