Merge pull request #208 from melfore/207-startline-display

[TimeLine] Startline display
melfore · Mar 4, 2024 · 41b0143 · 41b0143
2 parents ba5606b + d7e094a
commit 41b0143
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,8 @@
 # [1.34.0](https://github.com/melfore/konva-timeline/compare/v1.33.2...v1.34.0) (2024-03-04)
 
-
 ### Features
 
-* 🎸 [TimeLine]Reported start-end range ([df79cb0](https://github.com/melfore/konva-timeline/commit/df79cb0e5623b6abaf452a30def1180bf7a88da0)), closes [#202](https://github.com/melfore/konva-timeline/issues/202)
+- 🎸 [TimeLine]Reported start-end range ([df79cb0](https://github.com/melfore/konva-timeline/commit/df79cb0e5623b6abaf452a30def1180bf7a88da0)), closes [#202](https://github.com/melfore/konva-timeline/issues/202)
 
 ## [1.33.2](https://github.com/melfore/konva-timeline/compare/v1.33.1...v1.33.2) (2024-02-29)
 

diff --git a/src/KonvaTimeline/index.stories.tsx b/src/KonvaTimeline/index.stories.tsx
@@ -132,7 +132,34 @@ export const NonPreciseRange: Story = {
  resourceId: "1",
  time: {
  start: 1697632200000,
- end: 1697639400000,
+ end: 1697739400000,
+ },
+ },
+ {
+ id: "4",
+ label: "Task4",
+ resourceId: "3",
+ time: {
+ start: 1697802666000,
+ end: 1697939066000,
+ },
+ },
+ {
+ id: "3",
+ label: "Task3",
+ resourceId: "1",
+ time: {
+ start: 1697925606000,
+ end: 1698091206000,
+ },
+ },
+ {
+ id: "2",
+ label: "Task2",
+ resourceId: "2",
+ time: {
+ start: 1697691606000,
+ end: 1697818006000,
  },
  },
  ],
@@ -157,7 +184,7 @@ export const CompletedPercentage: Story = {
  resourceId: "2",
  completedPercentage: 28,
  time: {
- start: 1698047900000,
+ start: 1698357600000,
  end: 1698557900000,
  },
  },

diff --git a/src/tasks/utils/tasks.ts b/src/tasks/utils/tasks.ts
@@ -94,7 +94,7 @@ export const validateTasks = (
  return false;
  }
 
- if (taskEnd < range.start || taskStart > range.end) {
+ if (taskStart < range.start || taskEnd > range.end) {
  errors.push({ entity: "task", level: "warn", message: "Outside range", refId: taskId });
  return false;
  }

diff --git a/src/timeline/index.tsx b/src/timeline/index.tsx
@@ -167,6 +167,13 @@ const Timeline: FC<TimelineProps> = () => {
  [scrollbarSize, themeColor, timelineCommonStyle]
  );
 
+ const startOffset = useMemo(() => {
+ if (externalRangeInMillis.start === +interval.start!) {
+ return false;
+ }
+ return true;
+ }, [externalRangeInMillis, interval]);
+
  const xOfStart = useMemo(() => {
  const timeStart = DateTime.fromMillis(externalRangeInMillis.start);
  const startOffsetInUnit = timeStart.diff(interval.start!).as(resolution.unit);
@@ -184,7 +191,7 @@ const Timeline: FC<TimelineProps> = () => {
  }, [fullTimelineWidth, xOfEnd]);
 
  const marginOffset = useMemo(() => {
- return columnWidth * 0.01;
+ return columnWidth * 0.015;
  }, [columnWidth]);
 
  const gridStageWrapperStyle = useMemo(
@@ -308,17 +315,19 @@ const Timeline: FC<TimelineProps> = () => {
  onTaskEvent={setExistTask}
  />
  )}
- <Layer>
- <KonvaLine
- x={xOfStart}
- y={rowHeight * 0.8}
- points={[0, 0, 0, stageHeight]}
- stroke="red"
- strokeWidth={1}
- dash={[8, 3]}
- />
- <KonvaText fill="red" x={xOfStart - 13} y={rowHeight * 0.8 - 10} text="Start" width={columnWidth} />
- </Layer>
+ {startOffset && (
+ <Layer>
+ <KonvaLine
+ x={xOfStart}
+ y={rowHeight * 0.8}
+ points={[0, 0, 0, stageHeight]}
+ stroke="red"
+ strokeWidth={1}
+ dash={[8, 3]}
+ />
+ <KonvaText fill="red" x={xOfStart - 13} y={rowHeight * 0.8 - 20} text="Start" width={columnWidth} />
+ </Layer>
+ )}
  {newTask && (
  <Layer>
  <Rect