feature(web): smart scroll on drag POC

Author: that-one-arab

packages/web/src/views/Calendar/components/Grid/MainGrid/MainGrid.tsx

@@ -21,6 +21,7 @@ import { MainGridEvents } from "./MainGridEvents";
 import { MainGridColumns } from "../Columns/MainGridColumns";
 import { selectIsDrafting } from "@web/ducks/events/selectors/draft.selectors";
 import { isRightClick } from "@web/common/utils/mouse/mouse.util";
+import { useDragEventSmartScroll } from "@web/views/Calendar/hooks/grid/useDragEventSmartScroll";
 
 interface Props {
   dateCalcs: DateCalcs;
@@ -40,7 +41,6 @@ export const MainGrid: FC<Props> = ({
   weekProps,
 }) => {
   const dispatch = useAppDispatch();
-
   const { component } = weekProps;
   const { isCurrentWeek, week, weekDays } = component;
   const isDrafting = useAppSelector(selectIsDrafting);
@@ -74,6 +74,8 @@ export const MainGrid: FC<Props> = ({
     );
   };
 
+  useDragEventSmartScroll(mainGridRef);
+
   return (
     <StyledMainGrid id={ID_GRID_MAIN} ref={mainGridRef}>
       <MainGridColumns

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

@@ -0,0 +1,71 @@
+import { selectDraft } from "@web/ducks/events/selectors/draft.selectors";
+import { useAppSelector } from "@web/store/store.hooks";
+import { MutableRefObject, useEffect, useState, useRef } from "react";
+
+const SCROLL_SPEED = 10;
+const EDGE_THRESHOLD = 50;
+
+export const useDragEventSmartScroll = (
+  mainGridRef: MutableRefObject<HTMLDivElement | null>,
+) => {
+  const draftEvent = useAppSelector(selectDraft);
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const scrollRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (!draftEvent) return;
+
+    const updateMousePosition = (event: MouseEvent) => {
+      setMousePosition({ x: event.clientX, y: event.clientY });
+    };
+
+    window.addEventListener("mousemove", updateMousePosition);
+
+    return () => {
+      window.removeEventListener("mousemove", updateMousePosition);
+    };
+  }, [draftEvent]);
+
+  useEffect(() => {
+    if (!draftEvent || !mainGridRef.current) return;
+
+    const container = mainGridRef.current;
+
+    const scrollIfNeeded = () => {
+      if (!container) return;
+
+      const { top, bottom } = container.getBoundingClientRect();
+      const { y } = mousePosition;
+
+      let scrollAmount = 0;
+
+      const isAtTop = container.scrollTop === 0;
+      const isAtBottom =
+        container.scrollTop + container.clientHeight >= container.scrollHeight;
+
+      if (y < top + EDGE_THRESHOLD && !isAtTop) {
+        scrollAmount = -SCROLL_SPEED;
+      } else if (y > bottom - EDGE_THRESHOLD && !isAtBottom) {
+        scrollAmount = SCROLL_SPEED;
+      }
+
+      if (scrollAmount !== 0) {
+        container.scrollTop += scrollAmount;
+        scrollRef.current = requestAnimationFrame(scrollIfNeeded);
+      } else {
+        scrollRef.current = null;
+      }
+    };
+
+    if (!scrollRef.current) {
+      scrollRef.current = requestAnimationFrame(scrollIfNeeded);
+    }
+
+    return () => {
+      if (scrollRef.current) {
+        cancelAnimationFrame(scrollRef.current);
+        scrollRef.current = null;
+      }
+    };
+  }, [mousePosition, draftEvent]);
+};