Merge pull request #1 from hoon2hooni/feature-select-area-horizontally

Feature select area horizontally

Author: hoon2hooni

.eslintrc.json

@@ -7,6 +7,6 @@
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error",
     "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": "warn"
+    "@typescript-eslint/no-unused-vars": ["error"]
   }
 }

components/events/Days.tsx

@@ -110,7 +110,7 @@ const Days: FC<ComponentProps> = ({
       });
       const selectedDates = getSelectedDates({
         startDate,
-        currentTableIndex: dayIndex,
+        startXIndex: dayIndex,
         pageIndex: currentPageIndex,
       });
       const method = {

components/events/Timetable.tsx

@@ -17,6 +17,7 @@ import useUrlEventId from "@lib/hooks/useUrlEventId";
 import {
   generateSelectedArea,
   getColumnIndexAtTimetable,
+  getXOfTable,
 } from "@lib/tableHelper";
 import updateCurrentAttendee from "@lib/updateCurrentAttendee";
 import { FC, useCallback, useRef, useState } from "react";
@@ -80,7 +81,7 @@ const Timetable: FC<ComponentProps> = ({
     });
   const hasNotStartMove = startClientX === 0 && startClientY === 0;
   const columnIndexOfSelectedAreaRef = useRef(0);
-  const { moveClientY, initializeMouseAndTouchMove } =
+  const { moveClientX, moveClientY, initializeMouseAndTouchMove } =
     useMouseAndTouchMoveLocation({
       skipEvent: hasNotStartMove,
     });
@@ -92,13 +93,28 @@ const Timetable: FC<ComponentProps> = ({
     startClientX
   );
 
-  currentSelectedAreaRef.current = generateSelectedArea(
-    hasNotStartMove,
-    moveClientY,
+  const availableIndexAtTable = new Array(7)
+    .fill(0)
+    .map((_, i) =>
+      isInRange(endDate, startWeekOfMonday, currentPageIndex, i, startDate)
+    );
+  const startDayIndex = availableIndexAtTable.findIndex((v) => v);
+  const endDayIndex = 6 - availableIndexAtTable.reverse().findIndex((v) => v);
+  const minClientX = getXOfTable(1, timetableArea.w / 7, startDayIndex) - 1;
+  const maxClientX = getXOfTable(1, timetableArea.w / 7, endDayIndex);
+  const client = {
+    startClientX,
     startClientY,
+    currentClientX: moveClientX,
+    currentClientY: moveClientY,
+  };
+  const limitClient = { minClientX, maxClientX };
+  currentSelectedAreaRef.current = generateSelectedArea({
+    hasNotStartMove,
+    client,
+    limitClient,
     timetableArea,
-    startClientX
-  );
+  });
 
   const resizeTimeTableHandler = () => {
     if (containerRef.current) {
@@ -128,7 +144,6 @@ const Timetable: FC<ComponentProps> = ({
       currentSelectedArea,
       timetableAreaRef.current,
       startDate,
-      columnIndexOfSelectedAreaRef.current,
       currentPageIndex
     );
 
@@ -153,14 +168,15 @@ const Timetable: FC<ComponentProps> = ({
     currentAttendee,
     isEraseMode,
     startDate,
-    currentPageIndex,
     initializeMouseAndTouchMove,
     initializeMouseAndTouchStart,
     id,
+    currentPageIndex,
   ]);
 
   useMouseAndTouchEnd(updateAttendeesAndResetSelectedArea);
   const dateToAttendees = generateDateToAttendees(attendees);
+
   return (
     <Container ref={containerRef}>
       {DAY_TIME_ARRAY.map((hours, dayIndex) => {

lib/days.ts

@@ -1,3 +1,4 @@
+import { getTimetableColumnAreaWidth } from "./tableHelper";
 interface TimeProps {
   x: number;
   y: number;
@@ -88,53 +89,88 @@ export function getSelectedDatesWithSelectedArea(
   selectedArea: TimeProps,
   table: TimeProps,
   startDate: Date,
-  currentTableIndex: number,
   pageIndex: number
 ) {
-  const { startIdx, endIdx } = getIndexesFromTable(selectedArea, table);
+  const { startXIndex, endXIndex } = getXIndexesFromTable(selectedArea, table);
+  const { startYIndex, endYIndex } = getYIndexesFromTable(selectedArea, table);
+  
   return getSelectedDates({
-    startIdx,
-    endIdx,
-    startDate,
-    currentTableIndex,
     pageIndex,
+    startDate,
+    startXIndex,
+    endXIndex,
+    startYIndex,
+    endYIndex,
   });
 }
 
-function getIndexesFromTable(selectedArea: TimeProps, table: TimeProps) {
+function getXIndexesFromTable(selectedArea: TimeProps, timetable: TimeProps) {
+  const GAP_SIZE = 1;
+
+  const { x: selectedAreaX, w: selectedAreaWidth } = selectedArea;
+  const { x: timetableX, w: timetableWidth } = timetable;
+
+  const columnWidth = getTimetableColumnAreaWidth(timetableWidth);
+
+  let startXIndex = 0;
+  for (let index = 0; index < 7; index++) {
+    const eachColumnXByIndex =
+      timetableX + columnWidth * index + GAP_SIZE * index;
+    //해당 인덱스의 컬럼의 x좌표와 선택영역의 x좌표가 소수점으로인해 다를수 있기에 반올림했음
+    if (Math.round(selectedAreaX - eachColumnXByIndex) === 0) {
+      startXIndex = index;
+      break;
+    }
+  }
+
+  const endXIndex =
+    Math.round(selectedAreaWidth / columnWidth) + startXIndex - 1;
+
+  return { startXIndex, endXIndex };
+}
+
+function getYIndexesFromTable(selectedArea: TimeProps, table: TimeProps) {
   const fromTableToSelectedArea = selectedArea.y - table.y;
   const GAP = 1;
   const HEIGHT =
     (table.h - GAP * (END_TIME - START_TIME - 1)) / (END_TIME - START_TIME);
 
-  const startIdx = Math.round(fromTableToSelectedArea / (HEIGHT + GAP));
-  const endIdx =
+  const startYIndex = Math.round(fromTableToSelectedArea / (HEIGHT + GAP));
+  const endYIndex =
     Math.round((fromTableToSelectedArea + selectedArea.h) / (HEIGHT + GAP)) - 1;
-  return { startIdx, endIdx };
+  return { startYIndex, endYIndex };
 }
 
 export function getSelectedDates({
-  endIdx = 15,
-  startIdx = 0,
-  startDate,
-  currentTableIndex,
   pageIndex,
+  startDate,
+  startXIndex,
+  endXIndex = startXIndex,
+  startYIndex = 0,
+  endYIndex = 15,
   startTime = 8,
 }: {
-  endIdx?: number;
-  startIdx?: number;
-  startDate: Date;
-  currentTableIndex: number;
   pageIndex: number;
+  startDate: Date;
+  startXIndex: number;
+  endXIndex?: number;
+  startYIndex?: number;
+  endYIndex?: number;
   startTime?: number;
 }) {
-  if (endIdx - startIdx + 1 < 0) return [];
-  const selectedDates = new Array(endIdx - startIdx + 1).fill(0).map((_, idx) =>
-    addDateAndTime(startDate, {
-      days: currentTableIndex + pageIndex * 7,
-      hours: startIdx + idx + startTime,
-    })
-  );
+  if (endYIndex - startYIndex + 1 < 0) return [];
+  let selectedDates: Date[] = [];
+  for (let startIndex = startXIndex; startIndex <= endXIndex; startIndex++) {
+    selectedDates = selectedDates.concat(
+      new Array(endYIndex - startYIndex + 1).fill(0).map((_, idx) =>
+        addDateAndTime(startDate, {
+          days: startIndex + pageIndex * 7,
+          hours: startYIndex + idx + startTime,
+        })
+      )
+    );
+  }
+  console.log(selectedDates);
   return selectedDates;
 }