From 02884b8b7990b23596e2a6f0fbdaa1aae459b893 Mon Sep 17 00:00:00 2001
From: "krzysztof.grudzinski" <krzysztof.grudzinski@melfore.com>
Date: Wed, 15 Nov 2023 10:09:54 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20[ToolTip]=20Fixed=20posit?=
 =?UTF-8?q?ion=20on=20DragAndDrop=20event?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed toolTip position, changed height of task and added rows color

✅ Closes: #147
---
 src/grid/Row/index.tsx                    | 11 +++++++++--
 src/resources/components/Header/index.tsx | 11 +++++++++--
 src/tasks/components/Task/index.tsx       |  7 ++++---
 src/tasks/components/Tooltip/index.tsx    | 11 ++---------
 src/tasks/utils/tasks.ts                  |  2 +-
 5 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/grid/Row/index.tsx b/src/grid/Row/index.tsx
index 83bd409..02638e3 100644
--- a/src/grid/Row/index.tsx
+++ b/src/grid/Row/index.tsx
@@ -1,6 +1,6 @@
 import React, { memo, useMemo } from "react";
 
-import { KonvaLine } from "../../@konva";
+import { KonvaGroup, KonvaLine, KonvaRect } from "../../@konva";
 import { useTimelineContext } from "../../timeline/TimelineContext";
 
 interface GridRowProps {
@@ -16,7 +16,14 @@ const GridRow = ({ index }: GridRowProps) => {
 
   const yPos = useMemo(() => rowHeight * (index + 1), [index, rowHeight]);
 
-  return <KonvaLine points={[drawRangeStart, yPos, drawRangeEnd, yPos]} stroke={themeColor} />;
+  const fill = useMemo(() => (index % 2 === 0 ? "#F0F0F0" : "rgb(255,255,255)"), [index]);
+
+  return (
+    <KonvaGroup>
+      <KonvaLine points={[drawRangeStart, yPos, drawRangeEnd, yPos]} stroke={themeColor} />
+      <KonvaRect x={drawRangeStart} y={yPos} width={drawRangeEnd - drawRangeStart} height={rowHeight} fill={fill} />
+    </KonvaGroup>
+  );
 };
 
 export default memo(GridRow);
diff --git a/src/resources/components/Header/index.tsx b/src/resources/components/Header/index.tsx
index d09c891..302d100 100644
--- a/src/resources/components/Header/index.tsx
+++ b/src/resources/components/Header/index.tsx
@@ -1,6 +1,6 @@
 import React, { memo, useMemo } from "react";
 
-import { KonvaGroup, KonvaLine, KonvaText } from "../../../@konva";
+import { KonvaGroup, KonvaLine, KonvaRect, KonvaText } from "../../../@konva";
 import { useTimelineContext } from "../../../timeline/TimelineContext";
 import { DEFAULT_STROKE_WIDTH, DEFAULT_TEXT_SIZE } from "../../../utils/dimensions";
 import { Resource, RESOURCE_HEADER_WIDTH, RESOURCE_TEXT_OFFSET } from "../../utils/resources";
@@ -33,6 +33,8 @@ const ResourceHeader = ({ index, isLast = false, resource }: ResourceHeaderProps
 
   const yCoordinate = useMemo(() => rowHeight * index, [index, rowHeight]);
 
+  const fill = useMemo(() => (index % 2 === 0 ? "#F0F0F0" : "rgb(255,255,255)"), [index]);
+
   return (
     <KonvaGroup y={yCoordinate}>
       <KonvaText
@@ -43,7 +45,12 @@ const ResourceHeader = ({ index, isLast = false, resource }: ResourceHeaderProps
         verticalAlign="middle"
         x={RESOURCE_TEXT_OFFSET}
       />
-      {!isLast && <KonvaLine points={rowPoints} stroke={themeColor} strokeWidth={DEFAULT_STROKE_WIDTH} />}
+      {!isLast && (
+        <KonvaGroup>
+          <KonvaLine points={rowPoints} stroke={themeColor} strokeWidth={DEFAULT_STROKE_WIDTH} />
+          <KonvaRect x={0} y={rowHeight} width={RESOURCE_HEADER_WIDTH} height={rowHeight} fill={fill} />
+        </KonvaGroup>
+      )}
     </KonvaGroup>
   );
 };
diff --git a/src/tasks/components/Task/index.tsx b/src/tasks/components/Task/index.tsx
index fa6fb13..6cef566 100644
--- a/src/tasks/components/Task/index.tsx
+++ b/src/tasks/components/Task/index.tsx
@@ -70,6 +70,7 @@ const Task = ({ data, fill = TASK_DEFAULT_FILL, onLeave, onOver, x, y, width, fi
     resolution: { sizeInUnits, unit },
     resources,
     rowHeight,
+    drawRange,
   } = useTimelineContext();
 
   const { id: taskId, completedPercentage } = data;
@@ -142,9 +143,9 @@ const Task = ({ data, fill = TASK_DEFAULT_FILL, onLeave, onOver, x, y, width, fi
         return;
       }
 
-      callback(taskId, point);
+      callback(taskId, { ...point, x: point.x + drawRange.start });
     },
-    [taskId]
+    [taskId, drawRange]
   );
 
   const onClick = useCallback(() => onTaskClick && onTaskClick(data), [data, onTaskClick]);
@@ -225,7 +226,7 @@ const Task = ({ data, fill = TASK_DEFAULT_FILL, onLeave, onOver, x, y, width, fi
 
   const opacity = useMemo(() => (dragging || resizing ? 0.5 : 1), [dragging, resizing]);
 
-  const taskHeight = useMemo(() => rowHeight * 0.8, [rowHeight]);
+  const taskHeight = useMemo(() => rowHeight * 0.7, [rowHeight]);
 
   const textOffsets = useMemo(() => taskHeight / 3, [taskHeight]);
 
diff --git a/src/tasks/components/Tooltip/index.tsx b/src/tasks/components/Tooltip/index.tsx
index 4ea8241..e4ef1c0 100644
--- a/src/tasks/components/Tooltip/index.tsx
+++ b/src/tasks/components/Tooltip/index.tsx
@@ -1,7 +1,6 @@
-import React, { FC, useMemo } from "react";
+import React, { FC } from "react";
 import { Label, Tag, Text } from "react-konva";
 
-import { useTimelineContext } from "../../../timeline/TimelineContext";
 import { KonvaPoint } from "../../../utils/konva";
 import { TaskData } from "../../utils/tasks";
 
@@ -18,14 +17,8 @@ const TASK_TOOLTIP_SHADOW_SIZE = 10;
  * This component renders a task tooltip inside a canvas.
  */
 const TaskTooltip: FC<TaskTooltipProps> = ({ task: { label: taskLabel }, x, y }) => {
-  const {
-    drawRange: { start: drawRangeStart },
-  } = useTimelineContext();
-
-  const xPos = useMemo(() => x + drawRangeStart, [drawRangeStart, x]);
-
   return (
-    <Label x={xPos} y={y} opacity={0.75}>
+    <Label x={x} y={y} opacity={0.75}>
       <Tag
         fill={TASK_TOOLTIP_BACKGROUND}
         lineJoin="round"
diff --git a/src/tasks/utils/tasks.ts b/src/tasks/utils/tasks.ts
index 278ab90..62ac021 100644
--- a/src/tasks/utils/tasks.ts
+++ b/src/tasks/utils/tasks.ts
@@ -26,7 +26,7 @@ export interface TaskData<T extends TimeRange = TimeRange> {
 
 type FilteredTasks = Operation<TaskData<InternalTimeRange>>;
 
-const TASK_OFFSET_Y = 0.1;
+const TASK_OFFSET_Y = 0.15;
 
 export const TASK_BORDER_RADIUS = 4;