feat: add mouse position utility and integrate it into grid event handling

Author: tyler-dane

…mon/utils/position/position.util.test.ts …on/utils/position/event.position.test.tspackages/web/src/common/utils/position/position.util.test.ts renamed to packages/web/src/common/utils/position/event.position.test.ts packages/web/src/common/utils/position/position.util.test.ts renamed to packages/web/src/common/utils/position/event.position.test.ts

@@ -5,7 +5,7 @@ import {
   getAllDayEventWidth,
   getLeftPosition,
   widthMinusPadding,
-} from "@web/common/utils/position/position.util";
+} from "@web/common/utils/position/event.position";
 
 describe("getAllDayEventWidth", () => {
   it("is never wider than 1 week", () => {

…c/common/utils/position/position.util.ts …/common/utils/position/event.position.tspackages/web/src/common/utils/position/position.util.ts renamed to packages/web/src/common/utils/position/event.position.ts packages/web/src/common/utils/position/position.util.ts renamed to packages/web/src/common/utils/position/event.position.ts

@@ -136,7 +136,7 @@ export const getEventCategory = (
   return Category.ThisWeekOnly;
 };
 
-export const getPosition = (
+export const getEventPosition = (
   event: Schema_GridEvent,
   startOfView: Dayjs,
   endOfView: Dayjs,

packages/web/src/common/utils/position/mouse.position.test.ts

@@ -0,0 +1,49 @@
+import { getMousePosition } from "./mouse.position";
+
+describe("getMousePosition", () => {
+  const layout = {
+    allDayRowBottom: 100,
+    allDayRowTop: 50,
+    gridYStart: 150,
+    sidebarXStart: 200,
+  };
+  it("should return false when x is less than sidebarXStart", () => {
+    const result = getMousePosition(layout, { x: 100, y: 100 });
+
+    expect(result).toEqual({
+      isOverGrid: false,
+      isOverMainGrid: false,
+      isOverAllDayRow: false,
+    });
+  });
+
+  it("should return isOverAllDayRow as true when y is between allDayRowTop and allDayRowBottom", () => {
+    const result = getMousePosition(layout, { x: 250, y: 75 });
+
+    expect(result).toEqual({
+      isOverGrid: true,
+      isOverMainGrid: false,
+      isOverAllDayRow: true,
+    });
+  });
+
+  it("should return isOverMainGrid as true when y is greater than gridYStart", () => {
+    const result = getMousePosition(layout, { x: 250, y: 200 });
+
+    expect(result).toEqual({
+      isOverGrid: true,
+      isOverMainGrid: true,
+      isOverAllDayRow: false,
+    });
+  });
+
+  it("should return isOverGrid as false when y is less than allDayRowTop and gridYStart", () => {
+    const result = getMousePosition(layout, { x: 250, y: 25 });
+
+    expect(result).toEqual({
+      isOverGrid: false,
+      isOverMainGrid: false,
+      isOverAllDayRow: false,
+    });
+  });
+});

packages/web/src/common/utils/position/mouse.position.ts

@@ -0,0 +1,28 @@
+import { Coordinates } from "@web/common/types/util.types";
+
+type Layout = {
+  allDayRowBottom: number;
+  allDayRowTop: number;
+  gridYStart: number;
+  sidebarXStart: number;
+};
+
+export const getMousePosition = (layout: Layout, coordinates: Coordinates) => {
+  const { allDayRowTop, allDayRowBottom, gridYStart, sidebarXStart } = layout;
+  const { x, y } = coordinates;
+
+  const isPastSidebar = x > sidebarXStart;
+
+  const isOverAllDayRow =
+    isPastSidebar && y < allDayRowBottom && y > allDayRowTop;
+
+  const isOverMainGrid = isPastSidebar && !isOverAllDayRow && y > gridYStart;
+
+  const isOverGrid = isOverAllDayRow || isOverMainGrid;
+
+  return {
+    isOverGrid,
+    isOverMainGrid,
+    isOverAllDayRow,
+  };
+};

packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx

@@ -23,7 +23,7 @@ import { ZIndex } from "@web/common/constants/web.constants";
 import { Text } from "@web/components/Text";
 
 import { StyledEvent, StyledEventScaler, StyledEventTitle } from "../../styled";
-import { getPosition } from "@web/common/utils/position/position.util";
+import { getEventPosition } from "@web/common/utils/position/event.position";
 
 interface Props {
   event: Schema_GridEvent;
@@ -61,7 +61,7 @@ const _GridEvent = (
   const event = _event;
   const isOptimistic = isOptimisticEvent(event);
 
-  const position = getPosition(
+  const position = getEventPosition(
     event,
     component.startOfView,
     component.endOfView,

packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayEvent.tsx

@@ -4,7 +4,7 @@ import { Priorities } from "@core/constants/core.constants";
 import { Flex } from "@web/components/Flex";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
 import { isOptimisticEvent } from "@web/common/utils/event.util";
-import { getPosition } from "@web/common/utils/position/position.util";
+import { getEventPosition } from "@web/common/utils/position/event.position";
 import { AlignItems, FlexDirections } from "@web/components/Flex/styled";
 import { SpaceCharacter } from "@web/components/SpaceCharacter";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
@@ -30,7 +30,7 @@ const AllDayEvent = ({
   endOfView,
   onMouseDown,
 }: Props) => {
-  const position = getPosition(
+  const position = getEventPosition(
     event,
     startOfView,
     endOfView,

packages/web/src/views/Calendar/hooks/draft/useGridMouseMove.ts

@@ -1,9 +1,9 @@
 import { MouseEvent, useCallback, useState } from "react";
 
-import { useEventListener } from "../mouse/useEventListener";
 import { State_GridDraft, Util_GridDraft } from "./useDraftUtil";
 import { Categories_Event } from "@core/types/event.types";
 import { assembleDefaultEvent } from "@web/common/utils/event.util";
+import { getMousePosition } from "@web/common/utils/position/mouse.position";
 import { getX } from "@web/common/utils/grid.util";
 import { draftSlice } from "@web/ducks/events/slices/draft.slice";
 import { useAppDispatch, useAppSelector } from "@web/store/store.hooks";
@@ -14,39 +14,10 @@ import {
   SIDEBAR_X_START,
 } from "../../layout.constants";
 import { DateCalcs } from "../grid/useDateCalcs";
+import { useEventListener } from "../mouse/useEventListener";
 import { WeekProps } from "../useWeek";
-import { useMousePosition } from "./useMousePosition";
 import { Measurements_Grid } from "../grid/useGridLayout";
-
-type Layout = {
-  allDayRowBottom: number;
-  allDayRowTop: number;
-  gridYStart: number;
-  sidebarXStart: number;
-};
-
-const getMousePosition = (e: MouseEvent, layout: Layout) => {
-  console.log("handling mouse move ...");
-  const x = e.clientX;
-  const y = e.clientY;
-
-  const { allDayRowTop, allDayRowBottom, gridYStart, sidebarXStart } = layout;
-
-  const isPastSidebar = x > sidebarXStart;
-
-  const isOverAllDayRow =
-    isPastSidebar && y < allDayRowBottom && y > allDayRowTop;
-
-  const isOverMainGrid = isPastSidebar && !isOverAllDayRow && y > gridYStart;
-
-  const isOverGrid = isOverAllDayRow || isOverMainGrid;
-
-  return {
-    isOverGrid,
-    isOverMainGrid,
-    isOverAllDayRow,
-  };
-};
+import { useMousePosition } from "./useMousePosition";
 
 export const useGridMouseMove = (
   draftState: State_GridDraft,
@@ -90,16 +61,28 @@ export const useGridMouseMove = (
 
   const onMouseMove = useCallback(
     (e: MouseEvent) => {
+      //TODO handle when dragging over grid
+      // TODO handle when dropping
       if (isMouseDown) {
-        const position = getMousePosition(e, {
-          allDayRowBottom: measurements.allDayRow?.bottom,
-          allDayRowTop: measurements.allDayRow?.top,
-          gridYStart: GRID_Y_START,
-          sidebarXStart: SIDEBAR_X_START,
-        });
-        console.log(position);
-        if (position.isOverGrid) {
-          console.log("over grid...");
+        const allDayRow = measurements.allDayRow;
+        if (!allDayRow?.bottom || !allDayRow?.top) {
+          throw Error("Missing measurements for all-day row");
+        }
+
+        const { isOverMainGrid } = getMousePosition(
+          {
+            allDayRowBottom: allDayRow.bottom,
+            allDayRowTop: allDayRow.top,
+            gridYStart: GRID_Y_START,
+            sidebarXStart: SIDEBAR_X_START,
+          },
+          {
+            x: e.clientX,
+            y: e.clientY,
+          }
+        );
+        if (isOverMainGrid) {
+          console.log("over main grid...");
         }
         if (isDrafting) {
           console.log("moved while mouse down and draftin!!!");

packages/web/src/views/Calendar/hooks/draft/useMousePosition.ts

@@ -5,6 +5,7 @@ import {
   GRID_Y_START,
 } from "@web/views/Calendar/layout.constants";
 import { Coordinates } from "@web/common/types/util.types";
+import { getMousePosition } from "@web/common/utils/position/mouse.position";
 
 export const useMousePosition = (
   isDragging: boolean,
@@ -22,18 +23,21 @@ export const useMousePosition = (
   useEffect(() => {
     const handleMouseMove = (e: MouseEvent) => {
       console.log("handling mouse move ...");
+      if (!allDayRow?.bottom || !allDayRow?.top) {
+        throw Error("Missing measurements for all-day row");
+      }
+
       const x = e.clientX;
       const y = e.clientY;
-
-      const isPastSidebar = x > SIDEBAR_X_START;
-
-      const isOverAllDayRow =
-        isPastSidebar && y < allDayRow.bottom && y > allDayRow.top;
-
-      const isOverMainGrid =
-        isPastSidebar && !isOverAllDayRow && y > GRID_Y_START;
-
-      const isOverGrid = isOverAllDayRow || isOverMainGrid;
+      const { isOverGrid, isOverAllDayRow, isOverMainGrid } = getMousePosition(
+        {
+          allDayRowBottom: allDayRow?.bottom,
+          allDayRowTop: allDayRow?.top,
+          gridYStart: GRID_Y_START,
+          sidebarXStart: SIDEBAR_X_START,
+        },
+        { x, y }
+      );
 
       setIsOverGrid(isOverGrid);
       setIsOverAllDayRow(isOverAllDayRow);