feat(poc): differentiate between click and drag depending on mouse behavior

if mousing up before threshold: click
if mouse is still down after threshold: drag
if mouse down + move before threshold: drag

Author: tyler-dane

packages/web/src/views/Calendar/hooks/grid/useGridEventMouseHold.ts

@@ -11,7 +11,7 @@ const GRID_EVENT_MOUSE_HOLD_DELAY = 750; // ms
 const GRID_EVENT_MOUSE_HOLD_MOVE_THRESHOLD = 25; // pixels
 
 export const useGridEventMouseHold = (
-  cb: (event: Schema_GridEvent) => void,
+  cb: (event: Schema_GridEvent, nextAction: "click" | "drag") => void,
   eventType: Categories_Event.TIMED | Categories_Event.ALLDAY,
   delay: number = GRID_EVENT_MOUSE_HOLD_DELAY,
 ) => {
@@ -25,8 +25,11 @@ export const useGridEventMouseHold = (
   const timeoutId = useRef<NodeJS.Timeout | null>(null);
   const mouseMoved = useRef<boolean>(false);
 
-  const handleCallback = (event: Schema_GridEvent) => {
-    cb(event);
+  const handleCallback = (
+    event: Schema_GridEvent,
+    nextAction: "click" | "drag",
+  ) => {
+    cb(event, nextAction);
   };
 
   const onMouseDown = (e: ReactMouseEvent, event: Schema_GridEvent) => {
@@ -38,7 +41,8 @@ export const useGridEventMouseHold = (
 
     timeoutId.current = setTimeout(() => {
       if (!mouseMoved.current) {
-        handleCallback(event);
+        console.log("dragging cuz timeout elapsed");
+        handleCallback(event, "drag");
       }
     }, delay);
 
@@ -55,36 +59,50 @@ export const useGridEventMouseHold = (
         if (timeoutId.current) {
           clearTimeout(timeoutId.current);
         }
-        handleCallback(event);
+        console.log("dragging cuz mouse moved");
+        handleCallback(event, "drag");
         cleanup();
       }
     };
 
     const onMouseUp = () => {
+      if (!mouseMoved.current && timeoutId.current) {
+        clearTimeout(timeoutId.current);
+        console.log("clicking cuz mouse up");
+        handleCallback(event, "click");
+      }
       cleanup();
-
-      // Manually dispatch a new 'mouseup' event to ensure other listeners execute
-      const _event = new MouseEvent("mouseup", {
-        bubbles: true,
-        cancelable: true,
-        button: 0,
-        clientX: e.clientX,
-        clientY: e.clientY,
-      });
-
-      // Delay dispatching the new event to let React flush updates
-      setTimeout(() => {
-        getElemById(elementId).dispatchEvent(_event);
-      }, 1);
     };
+    // const onMouseUp = () => {
+    //   console.log("onMouseUp...");
+    //   cleanup();
+
+    //   // Manually dispatch a new 'mouseup' event to ensure other listeners execute
+    //   const _event = new MouseEvent("mouseup", {
+    //     bubbles: true,
+    //     cancelable: true,
+    //     button: 0,
+    //     clientX: e.clientX,
+    //     clientY: e.clientY,
+    //   });
+
+    //   // Delay dispatching the new event to let React flush updates
+    //   setTimeout(() => {
+    //     console.log("dispatching mouseup event...");
+    //     getElemById(elementId).dispatchEvent(_event);
+    //   }, 1);
+    // };
 
     const cleanup = () => {
-      handleCallback(event);
+      console.log("cleaning up...");
+      handleCallback(event, "drag");
 
       if (timeoutId.current) {
+        console.log("clearing timeout...");
         clearTimeout(timeoutId.current);
       }
 
+      console.log("removing event listeners...");
       getElemById(elementId).removeEventListener("mousemove", onMouseMove);
       getElemById(elementId).removeEventListener("mouseup", onMouseUp);
     };