Merge pull request #211 from melfore/210-fix-time-return-of-drag-and-…

…resize-event [Task] Fixed time return
melfore · Mar 12, 2024 · 929e198 · 929e198
2 parents 0eeff8d + 13e9814
commit 929e198
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,8 @@
 # [1.35.0](https://github.com/melfore/konva-timeline/compare/v1.34.0...v1.35.0) (2024-03-04)
 
-
 ### Features
 
-* 🎸 [TimeLine]Changed StartLine Display ([e0f3ad2](https://github.com/melfore/konva-timeline/commit/e0f3ad20be3a8dda5d1a8e911807b01a5dc9e921)), closes [#207](https://github.com/melfore/konva-timeline/issues/207)
+- 🎸 [TimeLine]Changed StartLine Display ([e0f3ad2](https://github.com/melfore/konva-timeline/commit/e0f3ad20be3a8dda5d1a8e911807b01a5dc9e921)), closes [#207](https://github.com/melfore/konva-timeline/issues/207)
 
 # [1.34.0](https://github.com/melfore/konva-timeline/compare/v1.33.2...v1.34.0) (2024-03-04)
 

diff --git a/src/KonvaTimeline/line-scenario.stories.tsx b/src/KonvaTimeline/line-scenario.stories.tsx
@@ -78,8 +78,8 @@ export const Line: Story = {
         label: "Task2",
         resourceId: "2",
         time: {
-          start: 1700434800000,
-          end: 1700934800000,
+          start: 1699900000000,
+          end: 1700048000000,
         },
         relatedTasks: ["5"],
       },
@@ -88,8 +88,8 @@ export const Line: Story = {
         label: "Task5",
         resourceId: "1",
         time: {
-          start: 1701505200000,
-          end: 1702095200000,
+          start: 1700505200000,
+          end: 1700805200000,
         },
       },
     ],

diff --git a/src/grid/Cell/index.tsx b/src/grid/Cell/index.tsx
@@ -62,6 +62,7 @@ const GridCell = ({ column, height, index, hourInfo: visibleDayInfo }: GridCellP
     }
     return DEFAULT_STROKE_DARK_MODE;
   }, [themeColor]);
+
   return (
     <KonvaGroup key={`timeslot-${index}`}>
       <KonvaLine x={xPos} y={yPos} points={[0, 0, 0, height]} stroke={stroke} strokeWidth={1} />

diff --git a/src/tasks/components/Task/index.tsx b/src/tasks/components/Task/index.tsx
@@ -157,7 +157,7 @@ const Task = ({
   const dragSnapInPX = useMemo(() => {
     const resolutionInSnapUnit = Duration.fromObject({ [unit]: sizeInUnits }).as(dragUnit);
     const dragSnapInResUnit = dragSizeInUnits / resolutionInSnapUnit;
-    const dragSnapInPx = Math.floor(dragSnapInResUnit * columnWidth);
+    const dragSnapInPx = dragSnapInResUnit * columnWidth;
     if (!dragSnapInPx || isNaN(dragSnapInPx)) {
       return 1;
     }

diff --git a/src/tasks/components/TaskLine/index.tsx b/src/tasks/components/TaskLine/index.tsx
@@ -179,11 +179,10 @@ const TaskLine = ({
   const dragSnapInPX = useMemo(() => {
     const resolutionInSnapUnit = Duration.fromObject({ [unit]: sizeInUnits }).as(dragUnit);
     const dragSnapInResUnit = dragSizeInUnits / resolutionInSnapUnit;
-    const dragSnapInPx = Math.floor(dragSnapInResUnit * columnWidth);
+    const dragSnapInPx = dragSnapInResUnit * columnWidth;
     if (!dragSnapInPx || isNaN(dragSnapInPx)) {
       return 1;
     }
-
     return dragSnapInPx;
   }, [columnWidth, dragUnit, dragSizeInUnits, sizeInUnits, unit]);
 
@@ -371,8 +370,8 @@ const TaskLine = ({
       workLine && workLine([]);
       if (data.relatedTasks) {
         const addTime = +time.end - +data.time.end;
-        const tasksId = connectedTasks(data, allValidTasks);
-        onTaskChange({ ...data, resourceId, time }, { tasksId, addTime });
+        const tasksId = connectedTasks(data, allValidTasks, addTime, externalRangeInMillis);
+        onTaskChange({ ...data, resourceId, time }, { tasksId: tasksId.allKLine, addTime: tasksId.maxAddTime });
         return;
       }
       onTaskChange({ ...data, resourceId, time });
@@ -391,6 +390,7 @@ const TaskLine = ({
       interval,
       workLine,
       allValidTasks,
+      externalRangeInMillis,
     ]
   );
 
@@ -498,8 +498,8 @@ const TaskLine = ({
       workLine && workLine([]);
       if (enableLines && data.relatedTasks && frontLine) {
         const addTime = +time.end - +data.time.end;
-        const tasksId = connectedTasks(data, allValidTasks);
-        onTaskChange({ ...data, time }, { tasksId, addTime });
+        const tasksId = connectedTasks(data, allValidTasks, addTime, externalRangeInMillis);
+        onTaskChange({ ...data, time }, { tasksId: tasksId.allKLine, addTime: tasksId.maxAddTime });
         return;
       }
       onTaskChange({ ...data, time });
@@ -516,6 +516,7 @@ const TaskLine = ({
       allValidTasks,
       workLine,
       frontLine,
+      externalRangeInMillis,
     ]
   );
   const percentage = useMemo(() => {

diff --git a/src/tasks/utils/tasks.ts b/src/tasks/utils/tasks.ts
@@ -158,31 +158,79 @@ export const onEndTimeRange = (
   columnWidth: number,
   interval: Interval
 ): TimeRange => {
+  const columnInHrs = resolution.unit === "week" ? (resolution.sizeInUnits === 1 ? 168 : 336) : 24;
   const hrs = 3600000;
+  const hrsInPx = columnWidth / columnInHrs;
 
   const timeOffset = fromPxToTime(taskDimesion.x, resolution, columnWidth);
   const startTaskMillis = interval.start!.plus({ [resolution.unit]: timeOffset }).toMillis();
   const startDate = DateTime.fromMillis(startTaskMillis);
 
+  const startOfBeforeDay = DateTime.fromMillis(startTaskMillis - 3600000).startOf("day");
+  const startOfBeforeDayTz = startOfBeforeDay.toISO()!.slice(-5, -3);
+
+  const startOfNextDay = DateTime.fromMillis(startTaskMillis + 3600000)
+    .startOf("day")
+    .toISO()!
+    .slice(-5, -3);
+
   const intervalStartTZ = interval.start?.toISO().slice(-5, -3); //Interval start TZ
-  const taskStartTZ = DateTime.fromMillis(startTaskMillis).toISO()?.slice(-5, -3); //Task start TZ
+  const taskStartTZ = DateTime.fromMillis(startTaskMillis).startOf("day").toISO()?.slice(-5, -3); //Task start TZ
   const diffTZ = +intervalStartTZ! - +taskStartTZ!;
 
   const startOfDay = startDate.startOf("day").toISO()?.slice(-5, -3); //Day start TZ
-  const nexDay = startDate.plus({ day: 1 }).toISO()?.slice(-5, -3); //Next Day TZ
-  const diffTZInDay = +startOfDay! - +nexDay!;
-  const nexDayMillis = startDate.startOf("day").toMillis() + 24 * hrs;
+  const nextDay = startDate.startOf("day").plus({ day: 1 }).toISO()?.slice(-5, -3); //Next Day TZ
+  const diffTZInDay = +nextDay! - +startOfDay!;
 
   let gap = 0;
+  let hrsSpecialCase = 0;
+
   if (resolution.unit === "day" || resolution.unit === "week") {
-    if (diffTZ !== 0) {
-      gap = hrs * diffTZ;
-      if (diffTZInDay !== 0 && startTaskMillis < nexDayMillis) {
+    if (diffTZ === 1) {
+      gap = hrsInPx * diffTZ;
+
+      if (+startOfBeforeDayTz - +intervalStartTZ! === 0 && +startOfNextDay - +intervalStartTZ! !== 0) {
         gap = 0;
+        hrsSpecialCase = hrs;
+      }
+    }
+
+    if (+startOfBeforeDayTz - +intervalStartTZ! !== 0 && +startOfNextDay - +intervalStartTZ! === 0) {
+      const timeOffsett = fromPxToTime(taskDimesion.x - hrsInPx * 23, resolution, columnWidth);
+      const startTaskDayBefore = interval
+        .start!.plus({ [resolution.unit]: timeOffsett })
+        .startOf("hour")
+        .toMillis();
+      if (startOfBeforeDay.toMillis() === startTaskDayBefore) {
+        hrsSpecialCase = hrs;
+      }
+    }
+    if (diffTZ === -1) {
+      gap = hrsInPx * diffTZ;
+
+      if (diffTZInDay === -1) {
+        gap = hrsInPx * diffTZInDay;
+      }
+      const timeOffsett = fromPxToTime(taskDimesion.x - hrsInPx * 23, resolution, columnWidth);
+      const startTaskDayBefore = interval.start!.plus({ [resolution.unit]: timeOffsett }).startOf("hour");
+      if (startOfBeforeDay.toMillis() === startTaskDayBefore.toMillis()) {
+        if (diffTZInDay !== 0) {
+          gap = 0;
+          hrsSpecialCase = -hrs;
+        }
+      }
+      if (
+        startTaskDayBefore.toMillis() + hrs * 23 === startDate.startOf("day").toMillis() &&
+        startTaskDayBefore.toISO().slice(-5, -3) === intervalStartTZ
+      ) {
+        gap = 0;
+        hrsSpecialCase = 0;
       }
     }
   }
-  const start = interval.start!.plus({ [resolution.unit]: timeOffset }).toMillis() - gap;
+  const timeOffsetB = fromPxToTime(taskDimesion.x - gap, resolution, columnWidth);
+
+  const start = interval.start!.plus({ [resolution.unit]: timeOffsetB }).toMillis() - hrsSpecialCase;
   const end =
     start +
     Duration.fromObject({
@@ -191,16 +239,31 @@ export const onEndTimeRange = (
   return { start, end };
 };
 
-export const connectedTasks = (taskData: TaskData, allValidTasks: TaskData[]) => {
+export const connectedTasks = (
+  taskData: TaskData,
+  allValidTasks: TaskData[],
+  addTime: number,
+  range: InternalTimeRange
+) => {
+  const { start, end } = range;
   let allKLine = taskData.relatedTasks ? taskData.relatedTasks : [];
   let newKLine: string[] = [];
   let noKLine = true;
   let iOffset = 0;
+  let maxAddTime = addTime;
   do {
     noKLine = false;
     let pushCount = iOffset === 0 ? allKLine.length - 1 : 0;
     for (let i = 0 + iOffset; i < allKLine.length; i++) {
       const val = allValidTasks.find((item) => item.id === allKLine[i]);
+      if (val) {
+        if (+val.time.start + addTime < start) {
+          maxAddTime = start - +val.time.start;
+        }
+        if (+val.time.end + addTime > end) {
+          maxAddTime = end - +val.time.end;
+        }
+      }
       if (val?.relatedTasks) {
         val.relatedTasks.map((value) => {
           if (!allKLine.includes(value) && !newKLine.includes(value)) {
@@ -219,5 +282,5 @@ export const connectedTasks = (taskData: TaskData, allValidTasks: TaskData[]) =>
     newKLine = [];
     iOffset = iOffset + pushCount;
   } while (noKLine);
-  return allKLine;
+  return { allKLine, maxAddTime };
 };
diff --git a/src/utils/timeBlockArray.ts b/src/utils/timeBlockArray.ts
@@ -24,14 +24,16 @@ export const getTimeBlocksTzInfo = (timeBlock: Interval[], initialTz?: string) =
           backHour: true,
           nextHour: false,
         });
-
         return;
       }
 
-      dayInfoArray.push({
-        backHour: false,
-        nextHour: true,
-      });
+      if (Number(initialTz?.slice(1, 3)) - Number(tzStart!.slice(1, 3)) < 0) {
+        dayInfoArray.push({
+          backHour: false,
+          nextHour: true,
+        });
+        return;
+      }
     }
 
     dayInfoArray.push({