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 ;
+ const fill = useMemo(() => (index % 2 === 0 ? "#F0F0F0" : "rgb(255,255,255)"), [index]);
+
+ return (
+
+
+
+
+ );
};
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 (
- {!isLast && }
+ {!isLast && (
+
+
+
+
+ )}
);
};
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 = ({ task: { label: taskLabel }, x, y }) => {
- const {
- drawRange: { start: drawRangeStart },
- } = useTimelineContext();
-
- const xPos = useMemo(() => x + drawRangeStart, [drawRangeStart, x]);
-
return (
-