✨ Feat: Auto scroll when dragging (#262)

that-one-arab · tyler-dane · web-flow · commit 6a356e065235 · 2025-02-20T11:08:03.000-06:00
* chore(web): Remove `gridScrollRef`, simplify code, fix few TS errors.

- Remove `gridScrollRef` and replace with `mainGridRef`. Having `gridScrollRef` as a separate entity and having `mainGridRef` as a callback function that is not a ref and does not return a ref did not makes sense to me. I believe this change makes the code simpler and more readable.
- Remove unused `react-merge-refs` dependency as a consequence of above change
- Handle few TS errors

* feature(web): smart scroll on drag POC

* bug(web): Use `draftContext.state.isDragging` to get whether we are dragging or not

* bug(web): handle edge case with dragging an event to very bottom of the page, causing event to overflow past container. Refactor code

this occurs when we drag an event to the very bottom until the event's end time is past midnight, instead of preventing me from dragging the event past midnight, the event overflows past its container.

* refactor(web): Simplify draft event dragging logic in useDraftActions

* fix: skip smart scroll if drafting all-day event

without this, the main grid would screen when dragging an all-day event

* chore: format and cleanup

---------

Co-authored-by: Tyler Dane &lt;tyler@switchback.tech&gt;
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -35,7 +35,6 @@
     "react-dom": "^18.1.0",
     "react-google-button": "^0.8.0",
     "react-hotkeys-hook": "^4.4.1",
-    "react-merge-refs": "^1.1.0",
     "react-modal": "^3.16.1",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.8.1",
diff --git a/packages/web/src/views/Calendar/Calendar.tsx b/packages/web/src/views/Calendar/Calendar.tsx
@@ -33,9 +33,9 @@ export const CalendarView = () => {
     weekProps.component.week,
   );
 
-  const scrollUtil = useScroll(gridRefs.gridScrollRef);
+  const scrollUtil = useScroll(gridRefs.mainGridRef);
 
-  const dateCalcs = useDateCalcs(measurements, gridRefs.gridScrollRef);
+  const dateCalcs = useDateCalcs(measurements, gridRefs.mainGridRef);
 
   const isCurrentWeek = weekProps.component.isCurrentWeek;
   const util = weekProps.util;
diff --git a/packages/web/src/views/Calendar/components/Draft/hooks/actions/useDraftActions.ts b/packages/web/src/views/Calendar/components/Draft/hooks/actions/useDraftActions.ts
@@ -159,34 +159,40 @@ export const useDraftActions = (
   const drag = useCallback(
     (e: MouseEvent) => {
       const updateTimesDuringDrag = (e: MouseEvent) => {
-        setDraft((_draft) => {
-          const x = getX(e, isSidebarOpen);
-          const _initialStart = dateCalcs.getDateByXY(
-            x,
-            e.clientY,
-            weekProps.component.startOfView,
-          );
-
-          const startDate = _draft?.isAllDay
-            ? _initialStart.format(YEAR_MONTH_DAY_FORMAT)
-            : _initialStart.format();
-
-          const _end = _initialStart.add(
-            dragStatus?.durationMin || 0,
-            "minutes",
-          );
-
-          const endDate = _draft.isAllDay
-            ? _end.format(YEAR_MONTH_DAY_FORMAT)
-            : _end.format();
+        if (!draft) return;
 
-          return {
-            ..._draft,
-            startDate,
-            endDate,
-            priority: _draft?.priority || Priorities.UNASSIGNED,
-          };
-        });
+        const x = getX(e, isSidebarOpen);
+        const startEndDurationMin = dragStatus?.durationMin || 0;
+
+        let eventStart = dateCalcs.getDateByXY(
+          x,
+          e.clientY,
+          weekProps.component.startOfView,
+        );
+
+        let eventEnd = eventStart.add(startEndDurationMin, "minutes");
+
+        if (!draft.isAllDay) {
+          // Edge case: timed events' end times can overflow past midnight at the bottom of the grid.
+          // Below logic prevents that from occurring.
+          if (eventEnd.date() !== eventStart.date()) {
+            eventEnd = eventEnd.hour(0).minute(0);
+            eventStart = eventEnd.subtract(startEndDurationMin, "minutes");
+          }
+        }
+
+        const _draft: Schema_GridEvent = {
+          ...draft,
+          startDate: draft.isAllDay
+            ? eventStart.format(YEAR_MONTH_DAY_FORMAT)
+            : eventStart.format(),
+          endDate: draft.isAllDay
+            ? eventEnd.format(YEAR_MONTH_DAY_FORMAT)
+            : eventEnd.format(),
+          priority: draft.priority || Priorities.UNASSIGNED,
+        };
+
+        setDraft(_draft);
       };
 
       if (!isDragging) {
diff --git a/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/GridEventPreview.tsx b/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/GridEventPreview.tsx
@@ -28,7 +28,7 @@ export interface Props {
   measurements: Measurements_Grid;
   mouseCoords: MouseCoords;
   startOfView: WeekProps["component"]["startOfView"];
-  gridScrollRef: Refs_Grid["gridScrollRef"];
+  mainGridRef: Refs_Grid["mainGridRef"];
 }
 
 export const GridEventPreview: FC<Props> = memo(function GridEventPreview({
@@ -40,7 +40,7 @@ export const GridEventPreview: FC<Props> = memo(function GridEventPreview({
   measurements,
   mouseCoords,
   startOfView,
-  gridScrollRef,
+  mainGridRef,
 }) {
   const { colWidths } = measurements;
   const { x, y } = mouseCoords;
@@ -83,7 +83,7 @@ export const GridEventPreview: FC<Props> = memo(function GridEventPreview({
     x,
     y,
     measurements,
-    gridScrollRef.current?.scrollTop || 0,
+    mainGridRef.current?.scrollTop || 0,
   );
 
   return (
diff --git a/packages/web/src/views/Calendar/components/Grid/Grid.tsx b/packages/web/src/views/Calendar/components/Grid/Grid.tsx
@@ -24,7 +24,7 @@ export const Grid: FC<Props> = ({
   today,
   weekProps,
 }) => {
-  const { allDayRef, gridScrollRef, mainGridRef } = gridRefs;
+  const { allDayRef, mainGridRef } = gridRefs;
 
   return (
     <>
@@ -41,7 +41,6 @@ export const Grid: FC<Props> = ({
         isSidebarOpen={isSidebarOpen}
         mainGridRef={mainGridRef}
         measurements={measurements}
-        scrollRef={gridScrollRef}
         today={today}
         weekProps={weekProps}
       />
diff --git a/packages/web/src/views/Calendar/components/Grid/MainGrid/MainGrid.tsx b/packages/web/src/views/Calendar/components/Grid/MainGrid/MainGrid.tsx
@@ -1,13 +1,10 @@
-import React, { FC, MouseEvent } from "react";
-import mergeRefs from "react-merge-refs";
+import React, { FC, MouseEvent, MutableRefObject } from "react";
 import { Dayjs } from "dayjs";
 import { Categories_Event } from "@core/types/event.types";
 import { DRAFT_DURATION_MIN } from "@web/views/Calendar/layout.constants";
 import { useAppDispatch, useAppSelector } from "@web/store/store.hooks";
-import { Ref_Callback } from "@web/common/types/util.types";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs";
-import { Ref_Grid } from "@web/views/Calendar/components/Grid/grid.types";
 import { ID_GRID_MAIN } from "@web/common/constants/web.constants";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { assembleDefaultEvent } from "@web/common/utils/event.util";
@@ -24,14 +21,14 @@ 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;
   isSidebarOpen: boolean;
-  mainGridRef: Ref_Callback;
+  mainGridRef: MutableRefObject<HTMLDivElement | null>;
   measurements: Measurements_Grid;
   today: Dayjs;
-  scrollRef: Ref_Grid;
   weekProps: WeekProps;
 }
 
@@ -41,15 +38,15 @@ export const MainGrid: FC<Props> = ({
   mainGridRef,
   measurements,
   today,
-  scrollRef,
   weekProps,
 }) => {
   const dispatch = useAppDispatch();
-
   const { component } = weekProps;
   const { isCurrentWeek, week, weekDays } = component;
   const isDrafting = useAppSelector(selectIsDrafting);
 
+  useDragEventSmartScroll(mainGridRef);
+
   const onMouseDown = async (e: MouseEvent) => {
     if (isDrafting) {
       dispatch(draftSlice.actions.discard());
@@ -80,7 +77,7 @@ export const MainGrid: FC<Props> = ({
   };
 
   return (
-    <StyledMainGrid id={ID_GRID_MAIN} ref={mergeRefs([mainGridRef, scrollRef])}>
+    <StyledMainGrid id={ID_GRID_MAIN} ref={mainGridRef}>
       <MainGridColumns
         isCurrentWeek={isCurrentWeek}
         today={today}
diff --git a/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/MonthSection/MonthSection.tsx b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/MonthSection/MonthSection.tsx
@@ -48,7 +48,7 @@ export const MonthSection: FC<Props> = ({
         measurements={measurements}
         sidebarProps={somedayProps}
         viewStart={viewStart}
-        gridScrollRef={gridRefs.gridScrollRef}
+        mainGridRef={gridRefs.mainGridRef}
       />
     </SidebarSection>
   );
diff --git a/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEvents.tsx b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEvents.tsx
@@ -27,7 +27,7 @@ interface Props {
   measurements: Measurements_Grid;
   sidebarProps: SidebarProps;
   viewStart: WeekProps["component"]["startOfView"];
-  gridScrollRef: Refs_Grid["gridScrollRef"];
+  mainGridRef: Refs_Grid["mainGridRef"];
 }
 
 const getSomedayEvents = (
@@ -49,7 +49,7 @@ export const SomedayEvents: FC<Props> = ({
   measurements,
   sidebarProps,
   viewStart,
-  gridScrollRef,
+  mainGridRef,
 }) => {
   const { state, util } = sidebarProps;
   const gridX = state.mouseCoords.x - (SIDEBAR_OPEN_WIDTH + GRID_X_START);
@@ -75,7 +75,7 @@ export const SomedayEvents: FC<Props> = ({
           measurements={measurements}
           mouseCoords={state.mouseCoords}
           startOfView={viewStart}
-          gridScrollRef={gridScrollRef}
+          mainGridRef={mainGridRef}
         />
       )}
 
diff --git a/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/WeekSection/WeekSection.tsx b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/WeekSection/WeekSection.tsx
@@ -47,7 +47,7 @@ export const WeekSection: FC<Props> = ({
         measurements={measurements}
         sidebarProps={sidebarProps}
         viewStart={viewStart}
-        gridScrollRef={gridRefs.gridScrollRef}
+        mainGridRef={gridRefs.mainGridRef}
       />
     </SidebarSection>
   );
diff --git a/packages/web/src/views/Calendar/hooks/grid/useDateCalcs.ts b/packages/web/src/views/Calendar/hooks/grid/useDateCalcs.ts
@@ -1,3 +1,4 @@
+import { MutableRefObject } from "react";
 import dayjs, { Dayjs } from "dayjs";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
@@ -9,15 +10,13 @@ import { ACCEPTED_TIMES } from "@web/common/constants/web.constants";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { GRID_X_START } from "@web/views/Calendar/layout.constants";
 
-import { Ref_Grid } from "../../components/Grid/grid.types";
-
 dayjs.extend(weekPlugin);
 dayjs.extend(utc);
 dayjs.extend(timezone);
 
 export const useDateCalcs = (
   measurements: Measurements_Grid,
-  scrollRef: Ref_Grid,
+  mainGridRef: MutableRefObject<HTMLDivElement | null>,
 ) => {
   const getDateByX = (x: number, firstDayInView: Dayjs) => {
     const gridX = x - GRID_X_START;
@@ -71,7 +70,7 @@ export const useDateCalcs = (
   const getMinuteByY = (y: number) => {
     if (!measurements.mainGrid) return 0; // TS guard. This should never happen
 
-    const scrollTop = scrollRef.current.scrollTop;
+    const scrollTop = mainGridRef.current?.scrollTop || 0;
     // gridY is the distance from the top of the grid (main grid) to the click
     const gridY = y - measurements.mainGrid.top + scrollTop;
 
diff --git a/packages/web/src/views/Calendar/hooks/grid/useDragEventSmartScroll.ts b/packages/web/src/views/Calendar/hooks/grid/useDragEventSmartScroll.ts
@@ -0,0 +1,72 @@
+import { useDraftContext } from "@web/views/Calendar/components/Draft/context/useDraftContext";
+import { MutableRefObject, useEffect, useState, useRef } from "react";
+
+const SCROLL_SPEED = 10;
+const EDGE_THRESHOLD = 50;
+
+export const useDragEventSmartScroll = (
+  mainGridRef: MutableRefObject<HTMLDivElement | null>,
+) => {
+  const { state } = useDraftContext();
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const scrollRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (!state.isDragging) return;
+    if (state.draft?.isAllDay) return;
+
+    const updateMousePosition = (event: MouseEvent) => {
+      setMousePosition({ x: event.clientX, y: event.clientY });
+    };
+
+    window.addEventListener("mousemove", updateMousePosition);
+
+    return () => {
+      window.removeEventListener("mousemove", updateMousePosition);
+    };
+  }, [state.isDragging]);
+
+  useEffect(() => {
+    if (!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;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mousePosition]);
+};
diff --git a/packages/web/src/views/Calendar/hooks/grid/useGridLayout.ts b/packages/web/src/views/Calendar/hooks/grid/useGridLayout.ts
@@ -39,16 +39,7 @@ export const useGridLayout = (isSidebarOpen: boolean, week: number) => {
     }
   }, []);
 
-  const gridScrollRef = useRef<HTMLDivElement | null>(null);
-
-  const mainGridRef = useCallback(
-    (node: HTMLDivElement) => {
-      if (node !== null && !mainMeasurements) {
-        _measureMainGrid(node);
-      }
-    },
-    [mainMeasurements],
-  );
+  const mainGridRef = useRef<HTMLDivElement | null>(null);
 
   const _measureAllDayRow = (node?: HTMLDivElement) => {
     if (node) {
@@ -103,10 +94,15 @@ export const useGridLayout = (isSidebarOpen: boolean, week: number) => {
     }
   };
 
+  useEffect(() => {
+    if (mainGridRef.current && !mainMeasurements) {
+      _measureMainGrid(mainGridRef.current);
+    }
+  }, [mainGridRef.current]);
+
   return {
     gridRefs: {
       allDayRef,
-      gridScrollRef,
       mainGridRef,
     },
     measurements: {
diff --git a/packages/web/src/views/Calendar/hooks/grid/useScroll.ts b/packages/web/src/views/Calendar/hooks/grid/useScroll.ts
diff --git a/yarn.lock b/yarn.lock
