gantt-task-react-v 1.0.49 → 1.0.51

package/dist/gantt-task-react.es.js

@@ -10901,6 +10901,204 @@ const TaskListInner = ({
   ] });
 };
 const TaskList = memo(TaskListInner);
+const getDateByOffset = (startDate, offset2, viewMode) => {
+  switch (viewMode) {
+    case ViewMode.Day:
+      return addDays(startDate, offset2);
+    case ViewMode.HalfDay:
+      return addHours(startDate, offset2 * 12);
+    case ViewMode.QuarterDay:
+      return addHours(startDate, offset2 * 6);
+    case ViewMode.Hour:
+      return addHours(startDate, offset2);
+    case ViewMode.Month:
+      return addMonths(startDate, offset2);
+    case ViewMode.Week:
+      return addWeeks(startDate, offset2);
+    case ViewMode.Year:
+      return addYears(startDate, offset2);
+    default:
+      throw new Error("Unknown view mode");
+  }
+};
+const taskXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
+  const index2 = getDatesDiff(xDate, startDate, viewMode);
+  const currentDate = getDateByOffset(startDate, index2, viewMode);
+  const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
+  const remainderMillis = xDate.getTime() - currentDate.getTime();
+  const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
+  return index2 * columnWidth + percentOfInterval * columnWidth;
+};
+const taskComparisonXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
+  const index2 = getDatesDiff(xDate, startDate, viewMode);
+  const currentDate = getDateByOffset(startDate, index2, viewMode);
+  const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
+  const remainderMillis = xDate.getTime() - currentDate.getTime();
+  const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
+  return index2 * columnWidth + percentOfInterval * columnWidth;
+};
+const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
+  const progressWidth = Math.max((taskX2 - taskX1) * progress * 0.01, 0);
+  let progressX;
+  if (rtl) {
+    progressX = taskX2 - progressWidth;
+  } else {
+    progressX = taskX1;
+  }
+  return [progressWidth, progressX];
+};
+const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
+  let newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
+  newDate = new Date(
+    newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 6e4
+  );
+  return newDate;
+};
+const handleTaskBySVGMouseEvent = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
+  let result;
+  switch (selectedTask.type) {
+    case "milestone":
+      result = handleTaskBySVGMouseEventForMilestone(
+        action,
+        selectedTask,
+        initialCoordinates,
+        coordinates,
+        xStep,
+        timeStep
+      );
+      break;
+    default:
+      result = handleTaskBySVGMouseEventForBar(
+        action,
+        selectedTask,
+        initialCoordinates,
+        coordinates,
+        xStep,
+        timeStep,
+        rtl
+      );
+      break;
+  }
+  return result;
+};
+const handleTaskBySVGMouseEventForBar = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
+  const changedTask = { ...selectedTask };
+  let isChanged = false;
+  switch (action) {
+    case "progress":
+      isChanged = initialCoordinates.progressWidth !== coordinates.progressWidth;
+      if (isChanged) {
+        changedTask.progress = Math.round(
+          coordinates.progressWidth * 100 / (coordinates.x2 - coordinates.x1)
+        );
+      }
+      break;
+    case "start": {
+      isChanged = initialCoordinates.x1 !== coordinates.x1;
+      if (isChanged) {
+        if (rtl) {
+          changedTask.end = dateByX(
+            coordinates.x1,
+            initialCoordinates.x1,
+            selectedTask.end,
+            xStep,
+            timeStep
+          );
+        } else {
+          changedTask.start = dateByX(
+            coordinates.x1,
+            initialCoordinates.x1,
+            selectedTask.start,
+            xStep,
+            timeStep
+          );
+        }
+      }
+      break;
+    }
+    case "end": {
+      isChanged = initialCoordinates.x2 !== coordinates.x2;
+      if (isChanged) {
+        if (rtl) {
+          changedTask.start = dateByX(
+            coordinates.x2,
+            initialCoordinates.x2,
+            selectedTask.start,
+            xStep,
+            timeStep
+          );
+        } else {
+          changedTask.end = dateByX(
+            coordinates.x2,
+            initialCoordinates.x2,
+            selectedTask.end,
+            xStep,
+            timeStep
+          );
+        }
+      }
+      break;
+    }
+    case "move": {
+      isChanged = initialCoordinates.x1 !== coordinates.x1;
+      if (isChanged) {
+        if (rtl) {
+          changedTask.end = dateByX(
+            coordinates.x1,
+            initialCoordinates.x1,
+            selectedTask.end,
+            xStep,
+            timeStep
+          );
+          changedTask.start = dateByX(
+            coordinates.x2,
+            initialCoordinates.x2,
+            selectedTask.start,
+            xStep,
+            timeStep
+          );
+        } else {
+          changedTask.start = dateByX(
+            coordinates.x1,
+            initialCoordinates.x1,
+            selectedTask.start,
+            xStep,
+            timeStep
+          );
+          changedTask.end = dateByX(
+            coordinates.x2,
+            initialCoordinates.x2,
+            selectedTask.end,
+            xStep,
+            timeStep
+          );
+        }
+      }
+      break;
+    }
+  }
+  return { isChanged, changedTask };
+};
+const handleTaskBySVGMouseEventForMilestone = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep) => {
+  const changedTask = { ...selectedTask };
+  const isChanged = coordinates.x1 !== initialCoordinates.x1;
+  if (isChanged) {
+    switch (action) {
+      case "move": {
+        changedTask.start = dateByX(
+          coordinates.x1,
+          initialCoordinates.x1,
+          selectedTask.start,
+          xStep,
+          timeStep
+        );
+        changedTask.end = changedTask.start;
+        break;
+      }
+    }
+  }
+  return { isChanged, changedTask };
+};
 const ganttToday = "_ganttToday_1oyhk_1";
 const ganttTodayCircle = "_ganttTodayCircle_1oyhk_9";
 const styles$c = {
@@ -10912,12 +11110,12 @@ const GanttTodayInner = ({
   distances: { columnWidth },
   ganttFullHeight,
   isUnknownDates,
+  rtl,
   startDate,
   viewMode,
   showTodayLine = true,
   showDataDateLine = false,
   dataDate = null,
-  dataDateX,
   todayColor = null,
   dataDateColor = null,
   todayLabel = "Today",
@@ -10928,164 +11126,110 @@ const GanttTodayInner = ({
       return null;
     }
     const today = /* @__PURE__ */ new Date();
-    const todayIndex = getDatesDiff(today, startDate, viewMode);
-    const extraMultiplier = () => {
-      switch (viewMode) {
-        case ViewMode.Week: {
-          const percent = today.getDay() / 7;
-          return 1 + percent * 0.2;
-        }
-        case ViewMode.Month: {
-          const dayInMonth = today.getDate();
-          const maxDaysInMonth = getDaysInMonth(
-            today.getMonth(),
-            today.getFullYear()
-          );
-          const percent = dayInMonth / maxDaysInMonth;
-          return 1 + percent * 0.5;
-        }
-        case ViewMode.Year: {
-          const todayOfYear = Math.floor(
-            (today.getTime() - new Date(today.getFullYear(), 0, 0).getTime()) / (1e3 * 60 * 60 * 24)
-          );
-          const totalDaysInYear = new Date(today.getFullYear(), 11, 31).getDate() === 31 ? 366 : 365;
-          const percent = todayOfYear / totalDaysInYear;
-          return 1 + percent * 0.5;
-        }
-        default:
-          return 1;
-      }
-    };
-    const x = additionalLeftSpace + todayIndex * columnWidth * extraMultiplier();
-    return /* @__PURE__ */ jsxs("g", { className: "today-line", children: [
+    const tickX = taskXCoordinate(today, startDate, viewMode, columnWidth);
+    const x = rtl ? tickX + columnWidth : tickX;
+    const color = todayColor || "var(--gantt-calendar-today-color)";
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        "line",
+        "rect",
         {
-          x1: x,
-          y1: 0,
-          x2: x,
-          y2: ganttFullHeight,
-          className: styles$c.todayLine,
-          stroke: todayColor || void 0
+          x: additionalLeftSpace + x,
+          y: 0,
+          width: 2,
+          height: ganttFullHeight,
+          fill: color
         }
       ),
       /* @__PURE__ */ jsx(
-        "polygon",
+        "circle",
         {
-          className: styles$c.todayTriangle,
-          fill: todayColor || void 0,
-          points: `${x},0 ${x - 5},8 ${x + 5},8`
+          className: styles$c.ganttTodayCircle,
+          cx: x + 1,
+          cy: 6,
+          r: 6,
+          fill: color
         }
       ),
       /* @__PURE__ */ jsx(
         "text",
         {
-          x,
-          y: 15,
-          className: styles$c.todayLabel,
-          fill: todayColor || void 0,
-          textAnchor: "middle",
+          x: additionalLeftSpace + x + 8,
+          y: 10,
+          fill: color,
+          fontSize: 12,
+          fontWeight: 600,
           children: todayLabel
         }
       )
-    ] }, "today-line");
+    ] });
   }, [
-    isUnknownDates,
-    showTodayLine,
-    startDate,
-    viewMode,
     additionalLeftSpace,
     columnWidth,
     ganttFullHeight,
+    isUnknownDates,
+    rtl,
+    startDate,
+    viewMode,
+    showTodayLine,
     todayColor,
     todayLabel
   ]);
   const dataDateElement = useMemo(() => {
-    if (isUnknownDates || !showDataDateLine || !dataDate) {
+    if (!showDataDateLine || !dataDate) {
       return null;
     }
-    let x;
-    if (dataDateX !== void 0) {
-      x = dataDateX;
-    } else {
-      const dataDateIndex = getDatesDiff(dataDate, startDate, viewMode);
-      const extraMultiplier = () => {
-        switch (viewMode) {
-          case ViewMode.Week: {
-            const percent = dataDate.getDay() / 7;
-            return 1 + percent * 0.2;
-          }
-          case ViewMode.Month: {
-            const dayInMonth = dataDate.getDate();
-            const maxDaysInMonth = getDaysInMonth(
-              dataDate.getMonth(),
-              dataDate.getFullYear()
-            );
-            const percent = dayInMonth / maxDaysInMonth;
-            return 1 + percent * 0.5;
-          }
-          case ViewMode.Year: {
-            const dataDateOfYear = Math.floor(
-              (dataDate.getTime() - new Date(dataDate.getFullYear(), 0, 0).getTime()) / (1e3 * 60 * 60 * 24)
-            );
-            const totalDaysInYear = new Date(dataDate.getFullYear(), 11, 31).getDate() === 31 ? 366 : 365;
-            const percent = dataDateOfYear / totalDaysInYear;
-            return 1 + percent * 0.5;
-          }
-          default:
-            return 1;
-        }
-      };
-      x = additionalLeftSpace + dataDateIndex * columnWidth * extraMultiplier();
-    }
-    return /* @__PURE__ */ jsxs("g", { className: "data-date-line", children: [
+    const tickX = taskXCoordinate(dataDate, startDate, viewMode, columnWidth);
+    const x = rtl ? tickX + columnWidth : tickX;
+    const color = dataDateColor || "var(--gantt-calendar-today-color)";
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        "line",
+        "rect",
         {
-          x1: x,
-          y1: 0,
-          x2: x,
-          y2: ganttFullHeight,
-          className: styles$c.dataDateLine,
-          stroke: dataDateColor || void 0
+          x: additionalLeftSpace + x,
+          y: 0,
+          width: 2,
+          height: ganttFullHeight,
+          fill: color,
+          opacity: 0.9
         }
       ),
       /* @__PURE__ */ jsx(
-        "polygon",
+        "circle",
         {
-          className: styles$c.dataDateTriangle,
-          fill: dataDateColor || void 0,
-          points: `${x},0 ${x - 5},8 ${x + 5},8`
+          className: styles$c.ganttTodayCircle,
+          cx: x + 1,
+          cy: 6,
+          r: 6,
+          fill: color
         }
       ),
       /* @__PURE__ */ jsx(
         "text",
         {
-          x,
-          y: 30,
-          className: styles$c.dataDateLabel,
-          fill: dataDateColor || void 0,
-          textAnchor: "middle",
-          children: dataDateLabel
+          x: additionalLeftSpace + x + 8,
+          y: 10,
+          fill: color,
+          fontSize: 12,
+          fontWeight: 600,
+          children: dataDateLabel || "Data Date"
         }
       )
-    ] }, "data-date-line");
+    ] });
   }, [
-    isUnknownDates,
-    showDataDateLine,
-    dataDate,
-    dataDateX,
-    startDate,
-    viewMode,
     additionalLeftSpace,
     columnWidth,
     ganttFullHeight,
+    rtl,
+    startDate,
+    viewMode,
+    showDataDateLine,
+    dataDate,
     dataDateColor,
     dataDateLabel
   ]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    todayElement,
-    dataDateElement
+  return /* @__PURE__ */ jsxs("g", { className: "today", children: [
+    dataDateElement,
+    todayElement
   ] });
 };
 const GanttToday = memo(GanttTodayInner);
@@ -11675,304 +11819,106 @@ const ArrowInner = (props) => {
   } = props;
   const indexFrom = useMemo(
     () => Math.floor(fromY / fullRowHeight),
-    [fromY, fullRowHeight]
-  );
-  const indexTo = useMemo(
-    () => Math.floor(toY / fullRowHeight),
-    [toY, fullRowHeight]
-  );
-  const onDoubleClick = useCallback(() => {
-    if (onArrowDoubleClick) {
-      onArrowDoubleClick(taskFrom, taskTo);
-    }
-  }, [taskFrom, taskTo, onArrowDoubleClick]);
-  const [path, trianglePoints] = useMemo(
-    () => drownPathAndTriangle(
-      indexFrom,
-      fromX1,
-      fromX2,
-      fromY,
-      targetFrom === "startOfTask" !== rtl,
-      indexTo,
-      toX1,
-      toX2,
-      toY,
-      targetTo === "startOfTask" !== rtl,
-      fullRowHeight,
-      taskHeight,
-      arrowIndent
-    ),
-    [
-      indexFrom,
-      fromX1,
-      fromX2,
-      fromY,
-      targetFrom,
-      indexTo,
-      toX1,
-      toX2,
-      toY,
-      targetTo,
-      rtl,
-      fullRowHeight,
-      taskHeight,
-      arrowIndent
-    ]
-  );
-  const color = useMemo(() => {
-    if (isCritical) {
-      return "var(--gantt-arrow-critical-color)";
-    }
-    return "var(--gantt-arrow-color)";
-  }, [isCritical]);
-  return /* @__PURE__ */ jsx("g", { fill: color, stroke: color, children: /* @__PURE__ */ jsxs(
-    "g",
-    {
-      "data-testid": `task-arrow-${targetFrom}-${taskFrom.name}-${targetTo}-${taskTo.name}`,
-      className: `arrow ${styles$a.arrow_clickable}`,
-      onDoubleClick,
-      children: [
-        onArrowDoubleClick && /* @__PURE__ */ jsx("path", { d: path, className: styles$a.clickZone }),
-        /* @__PURE__ */ jsx("path", { className: styles$a.mainPath, d: path }),
-        /* @__PURE__ */ jsx("polygon", { className: "polygon", points: trianglePoints })
-      ]
-    }
-  ) });
-};
-const Arrow = memo(ArrowInner);
-const drownPathAndTriangle = (indexForm, fromX1, fromX2, fromY, isTaskFromLeftSide, indexTo, toX1, toX2, toY, isTaskToLeftSide, fullRowHeight, taskHeight, arrowIndent) => {
-  const isDownDirected = indexTo > indexForm;
-  const horizontalDockingY = isDownDirected ? (indexForm + 1) * fullRowHeight : indexForm * fullRowHeight;
-  const taskFromEndPositionX = isTaskFromLeftSide ? fromX1 - arrowIndent : fromX2 + arrowIndent;
-  const taskToEndPositionX = isTaskToLeftSide ? toX1 - arrowIndent : toX2 + arrowIndent;
-  const taskToEndPositionY = toY + taskHeight / 2;
-  const path = `M ${isTaskFromLeftSide ? fromX1 : fromX2} ${fromY + taskHeight / 2}
-  H ${taskFromEndPositionX}
-  V ${horizontalDockingY}
-  H ${taskToEndPositionX}
-  V ${taskToEndPositionY}
-  H ${isTaskToLeftSide ? toX1 : toX2}`;
-  const trianglePoints = isTaskToLeftSide ? generateTrianglePoints(toX1, taskToEndPositionY, 5, false) : generateTrianglePoints(toX2, taskToEndPositionY, 5, true);
-  return [path, trianglePoints];
-};
-const relationLine = "_relationLine_wh2qy_1";
-const styles$9 = {
-  relationLine
-};
-const RelationLine = ({
-  x1,
-  x2,
-  y1,
-  y2
-}) => {
-  return /* @__PURE__ */ jsx(
-    "line",
-    {
-      x1,
-      x2,
-      y1,
-      y2,
-      className: styles$9.relationLine
-    }
-  );
-};
-const getDateByOffset = (startDate, offset2, viewMode) => {
-  switch (viewMode) {
-    case ViewMode.Day:
-      return addDays(startDate, offset2);
-    case ViewMode.HalfDay:
-      return addHours(startDate, offset2 * 12);
-    case ViewMode.QuarterDay:
-      return addHours(startDate, offset2 * 6);
-    case ViewMode.Hour:
-      return addHours(startDate, offset2);
-    case ViewMode.Month:
-      return addMonths(startDate, offset2);
-    case ViewMode.Week:
-      return addWeeks(startDate, offset2);
-    case ViewMode.Year:
-      return addYears(startDate, offset2);
-    default:
-      throw new Error("Unknown view mode");
-  }
-};
-const taskXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
-  const index2 = getDatesDiff(xDate, startDate, viewMode);
-  const currentDate = getDateByOffset(startDate, index2, viewMode);
-  const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
-  const remainderMillis = xDate.getTime() - currentDate.getTime();
-  const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
-  return index2 * columnWidth + percentOfInterval * columnWidth;
-};
-const taskComparisonXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
-  const index2 = getDatesDiff(xDate, startDate, viewMode);
-  const currentDate = getDateByOffset(startDate, index2, viewMode);
-  const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
-  const remainderMillis = xDate.getTime() - currentDate.getTime();
-  const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
-  return index2 * columnWidth + percentOfInterval * columnWidth;
-};
-const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
-  const progressWidth = Math.max((taskX2 - taskX1) * progress * 0.01, 0);
-  let progressX;
-  if (rtl) {
-    progressX = taskX2 - progressWidth;
-  } else {
-    progressX = taskX1;
-  }
-  return [progressWidth, progressX];
-};
-const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
-  let newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
-  newDate = new Date(
-    newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 6e4
-  );
-  return newDate;
-};
-const handleTaskBySVGMouseEvent = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
-  let result;
-  switch (selectedTask.type) {
-    case "milestone":
-      result = handleTaskBySVGMouseEventForMilestone(
-        action,
-        selectedTask,
-        initialCoordinates,
-        coordinates,
-        xStep,
-        timeStep
-      );
-      break;
-    default:
-      result = handleTaskBySVGMouseEventForBar(
-        action,
-        selectedTask,
-        initialCoordinates,
-        coordinates,
-        xStep,
-        timeStep,
-        rtl
-      );
-      break;
-  }
-  return result;
-};
-const handleTaskBySVGMouseEventForBar = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
-  const changedTask = { ...selectedTask };
-  let isChanged = false;
-  switch (action) {
-    case "progress":
-      isChanged = initialCoordinates.progressWidth !== coordinates.progressWidth;
-      if (isChanged) {
-        changedTask.progress = Math.round(
-          coordinates.progressWidth * 100 / (coordinates.x2 - coordinates.x1)
-        );
-      }
-      break;
-    case "start": {
-      isChanged = initialCoordinates.x1 !== coordinates.x1;
-      if (isChanged) {
-        if (rtl) {
-          changedTask.end = dateByX(
-            coordinates.x1,
-            initialCoordinates.x1,
-            selectedTask.end,
-            xStep,
-            timeStep
-          );
-        } else {
-          changedTask.start = dateByX(
-            coordinates.x1,
-            initialCoordinates.x1,
-            selectedTask.start,
-            xStep,
-            timeStep
-          );
-        }
-      }
-      break;
+    [fromY, fullRowHeight]
+  );
+  const indexTo = useMemo(
+    () => Math.floor(toY / fullRowHeight),
+    [toY, fullRowHeight]
+  );
+  const onDoubleClick = useCallback(() => {
+    if (onArrowDoubleClick) {
+      onArrowDoubleClick(taskFrom, taskTo);
     }
-    case "end": {
-      isChanged = initialCoordinates.x2 !== coordinates.x2;
-      if (isChanged) {
-        if (rtl) {
-          changedTask.start = dateByX(
-            coordinates.x2,
-            initialCoordinates.x2,
-            selectedTask.start,
-            xStep,
-            timeStep
-          );
-        } else {
-          changedTask.end = dateByX(
-            coordinates.x2,
-            initialCoordinates.x2,
-            selectedTask.end,
-            xStep,
-            timeStep
-          );
-        }
-      }
-      break;
+  }, [taskFrom, taskTo, onArrowDoubleClick]);
+  const [path, trianglePoints] = useMemo(
+    () => drownPathAndTriangle(
+      indexFrom,
+      fromX1,
+      fromX2,
+      fromY,
+      targetFrom === "startOfTask" !== rtl,
+      indexTo,
+      toX1,
+      toX2,
+      toY,
+      targetTo === "startOfTask" !== rtl,
+      fullRowHeight,
+      taskHeight,
+      arrowIndent
+    ),
+    [
+      indexFrom,
+      fromX1,
+      fromX2,
+      fromY,
+      targetFrom,
+      indexTo,
+      toX1,
+      toX2,
+      toY,
+      targetTo,
+      rtl,
+      fullRowHeight,
+      taskHeight,
+      arrowIndent
+    ]
+  );
+  const color = useMemo(() => {
+    if (isCritical) {
+      return "var(--gantt-arrow-critical-color)";
     }
-    case "move": {
-      isChanged = initialCoordinates.x1 !== coordinates.x1;
-      if (isChanged) {
-        if (rtl) {
-          changedTask.end = dateByX(
-            coordinates.x1,
-            initialCoordinates.x1,
-            selectedTask.end,
-            xStep,
-            timeStep
-          );
-          changedTask.start = dateByX(
-            coordinates.x2,
-            initialCoordinates.x2,
-            selectedTask.start,
-            xStep,
-            timeStep
-          );
-        } else {
-          changedTask.start = dateByX(
-            coordinates.x1,
-            initialCoordinates.x1,
-            selectedTask.start,
-            xStep,
-            timeStep
-          );
-          changedTask.end = dateByX(
-            coordinates.x2,
-            initialCoordinates.x2,
-            selectedTask.end,
-            xStep,
-            timeStep
-          );
-        }
-      }
-      break;
+    return "var(--gantt-arrow-color)";
+  }, [isCritical]);
+  return /* @__PURE__ */ jsx("g", { fill: color, stroke: color, children: /* @__PURE__ */ jsxs(
+    "g",
+    {
+      "data-testid": `task-arrow-${targetFrom}-${taskFrom.name}-${targetTo}-${taskTo.name}`,
+      className: `arrow ${styles$a.arrow_clickable}`,
+      onDoubleClick,
+      children: [
+        onArrowDoubleClick && /* @__PURE__ */ jsx("path", { d: path, className: styles$a.clickZone }),
+        /* @__PURE__ */ jsx("path", { className: styles$a.mainPath, d: path }),
+        /* @__PURE__ */ jsx("polygon", { className: "polygon", points: trianglePoints })
+      ]
     }
-  }
-  return { isChanged, changedTask };
+  ) });
 };
-const handleTaskBySVGMouseEventForMilestone = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep) => {
-  const changedTask = { ...selectedTask };
-  const isChanged = coordinates.x1 !== initialCoordinates.x1;
-  if (isChanged) {
-    switch (action) {
-      case "move": {
-        changedTask.start = dateByX(
-          coordinates.x1,
-          initialCoordinates.x1,
-          selectedTask.start,
-          xStep,
-          timeStep
-        );
-        changedTask.end = changedTask.start;
-        break;
-      }
+const Arrow = memo(ArrowInner);
+const drownPathAndTriangle = (indexForm, fromX1, fromX2, fromY, isTaskFromLeftSide, indexTo, toX1, toX2, toY, isTaskToLeftSide, fullRowHeight, taskHeight, arrowIndent) => {
+  const isDownDirected = indexTo > indexForm;
+  const horizontalDockingY = isDownDirected ? (indexForm + 1) * fullRowHeight : indexForm * fullRowHeight;
+  const taskFromEndPositionX = isTaskFromLeftSide ? fromX1 - arrowIndent : fromX2 + arrowIndent;
+  const taskToEndPositionX = isTaskToLeftSide ? toX1 - arrowIndent : toX2 + arrowIndent;
+  const taskToEndPositionY = toY + taskHeight / 2;
+  const path = `M ${isTaskFromLeftSide ? fromX1 : fromX2} ${fromY + taskHeight / 2}
+  H ${taskFromEndPositionX}
+  V ${horizontalDockingY}
+  H ${taskToEndPositionX}
+  V ${taskToEndPositionY}
+  H ${isTaskToLeftSide ? toX1 : toX2}`;
+  const trianglePoints = isTaskToLeftSide ? generateTrianglePoints(toX1, taskToEndPositionY, 5, false) : generateTrianglePoints(toX2, taskToEndPositionY, 5, true);
+  return [path, trianglePoints];
+};
+const relationLine = "_relationLine_wh2qy_1";
+const styles$9 = {
+  relationLine
+};
+const RelationLine = ({
+  x1,
+  x2,
+  y1,
+  y2
+}) => {
+  return /* @__PURE__ */ jsx(
+    "line",
+    {
+      x1,
+      x2,
+      y1,
+      y2,
+      className: styles$9.relationLine
     }
-  }
-  return { isChanged, changedTask };
+  );
 };
 const barWrapper = "_barWrapper_5jhkr_1";
 const barHandle = "_barHandle_5jhkr_11";
@@ -11989,9 +11935,9 @@ const styles$8 = {
 const BarDisplay = ({
   taskId,
   barCornerRadius,
-  // isCritical,
-  // isSelected,
-  // hasChildren,
+  isCritical,
+  isSelected,
+  hasChildren,
   height,
   progressWidth,
   progressX,
@@ -12000,11 +11946,60 @@ const BarDisplay = ({
   x,
   y,
   customStyle,
-  dataDateX,
-  splitbarColors,
-  showProgressBar = true,
-  progressBarColor
+  showProgress = true,
+  progressColor
 }) => {
+  const processColor = useMemo(() => {
+    if (progressColor) {
+      return progressColor;
+    }
+    if (isCritical) {
+      if (hasChildren) {
+        if (isSelected) {
+          return "var(--gantt-group-progress-selected-critical-color)";
+        }
+        return "var(--gantt-group-progress-critical-color)";
+      }
+      if (isSelected) {
+        return "var(--gantt-bar-progress-selected-critical-color)";
+      }
+      return "var(--gantt-bar-progress-critical-color)";
+    }
+    if (hasChildren) {
+      if (isSelected) {
+        return "var(--gantt-group-progress-selected-color)";
+      }
+      return "var(--gantt-group-progress-color)";
+    }
+    if (isSelected) {
+      return "var(--gantt-bar-progress-selected-color)";
+    }
+    return "var(--gantt-bar-progress-color)";
+  }, [isSelected, isCritical, hasChildren, progressColor]);
+  const barColor = useMemo(() => {
+    if (isCritical) {
+      if (hasChildren) {
+        if (isSelected) {
+          return "var(--gantt-group-background-selected-critical-color)";
+        }
+        return "var(--gantt-group-background-critical-color)";
+      }
+      if (isSelected) {
+        return "var(--gantt-bar-background-selected-critical-color)";
+      }
+      return "var(--gantt-bar-background-critical-color)";
+    }
+    if (hasChildren) {
+      if (isSelected) {
+        return "var(--gantt-group-background-selected-color)";
+      }
+      return "var(--gantt-group-background-color)";
+    }
+    if (isSelected) {
+      return "var(--gantt-bar-background-selected-color)";
+    }
+    return "var(--gantt-bar-background-color)";
+  }, [isSelected, isCritical, hasChildren]);
   return /* @__PURE__ */ jsxs(
     "g",
     {
@@ -12022,40 +12017,7 @@ const BarDisplay = ({
         }
       },
       children: [
-        typeof dataDateX === "number" ? (() => {
-          var _a, _b;
-          const localSplit = Math.max(0, Math.min(width, dataDateX - x));
-          const leftFill = ((_a = splitbarColors == null ? void 0 : splitbarColors.task) == null ? void 0 : _a.onTime) || "var(--gantt-bar-background-color)";
-          const rightFill = ((_b = splitbarColors == null ? void 0 : splitbarColors.task) == null ? void 0 : _b.delayed) || "var(--gantt-bar-background-color)";
-          return /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x,
-                width: localSplit,
-                y,
-                height,
-                ry: barCornerRadius,
-                rx: barCornerRadius,
-                fill: leftFill,
-                className: styles$8.barBackground
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: x + localSplit,
-                width: Math.max(0, width - localSplit),
-                y,
-                height,
-                ry: barCornerRadius,
-                rx: barCornerRadius,
-                fill: rightFill,
-                className: styles$8.barBackground
-              }
-            )
-          ] });
-        })() : /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           "rect",
           {
             x,
@@ -12064,11 +12026,11 @@ const BarDisplay = ({
             height,
             ry: barCornerRadius,
             rx: barCornerRadius,
-            fill: "unset",
+            fill: barColor,
             className: styles$8.barBackground
           }
         ),
-        showProgressBar && /* @__PURE__ */ jsx(
+        showProgress && /* @__PURE__ */ jsx(
           "rect",
           {
             x: progressX,
@@ -12077,7 +12039,7 @@ const BarDisplay = ({
             height,
             ry: barCornerRadius,
             rx: barCornerRadius,
-            fill: progressBarColor || "var(--gantt-bar-progress-color)"
+            fill: processColor
           }
         )
       ]
@@ -12132,8 +12094,8 @@ const ProjectDisplay = ({
   taskName: taskName2,
   taskHalfHeight,
   taskHeight,
-  // isSelected,
-  // isCritical,
+  isSelected,
+  isCritical,
   progressWidth,
   progressX,
   taskYOffset,
@@ -12142,11 +12104,36 @@ const ProjectDisplay = ({
   x2,
   startMoveFullTask,
   customStyle,
-  dataDateX,
-  splitbarColors,
-  showProgressBar = true,
-  progressBarColor
+  showProgress = true,
+  progressColor
 }) => {
+  const barColor = useMemo(() => {
+    if (isCritical) {
+      if (isSelected) {
+        return "var(--gantt-project-background-selected-critical-color)";
+      }
+      return "var(--gantt-project-background-critical-color)";
+    }
+    if (isSelected) {
+      return "var(--gantt-project-background-selected-color)";
+    }
+    return "var(--gantt-project-background-color)";
+  }, [isSelected, isCritical]);
+  const processColor = useMemo(() => {
+    if (progressColor) {
+      return progressColor;
+    }
+    if (isCritical) {
+      if (isSelected) {
+        return "var(--gantt-project-progress-selected-critical-color)";
+      }
+      return "var(--gantt-project-progress-critical-color)";
+    }
+    if (isSelected) {
+      return "var(--gantt-project-progress-selected-color)";
+    }
+    return "var(--gantt-project-progress-color)";
+  }, [isSelected, isCritical, progressColor]);
   const projectLeftTriangle = [
     x1,
     taskYOffset + taskHeight / 2 - 1,
@@ -12180,53 +12167,20 @@ const ProjectDisplay = ({
       },
       className: styles$7.projectWrapper,
       children: [
-        typeof dataDateX === "number" ? (() => {
-          var _a, _b;
-          const localSplit = Math.max(0, Math.min(width, dataDateX - x1));
-          const leftFill = ((_a = splitbarColors == null ? void 0 : splitbarColors.project) == null ? void 0 : _a.onTime) || "var(--gantt-project-background-color)";
-          const rightFill = ((_b = splitbarColors == null ? void 0 : splitbarColors.project) == null ? void 0 : _b.delayed) || "var(--gantt-project-background-color)";
-          return /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: x1,
-                width: localSplit,
-                y: taskYOffset,
-                height: taskHeight,
-                rx: barCornerRadius,
-                ry: barCornerRadius,
-                className: styles$7.projectBackground,
-                fill: leftFill
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: x1 + localSplit,
-                width: Math.max(0, width - localSplit),
-                y: taskYOffset,
-                height: taskHeight,
-                rx: barCornerRadius,
-                ry: barCornerRadius,
-                className: styles$7.projectBackground,
-                fill: rightFill
-              }
-            )
-          ] });
-        })() : /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           "rect",
           {
+            fill: barColor,
             x: x1,
             width,
             y: taskYOffset,
             height: taskHeight,
             rx: barCornerRadius,
             ry: barCornerRadius,
-            className: styles$7.projectBackground,
-            fill: "unset"
+            className: styles$7.projectBackground
           }
         ),
-        showProgressBar && /* @__PURE__ */ jsx(
+        showProgress && /* @__PURE__ */ jsx(
           "rect",
           {
             x: progressX,
@@ -12235,13 +12189,13 @@ const ProjectDisplay = ({
             height: taskHeight,
             ry: barCornerRadius,
             rx: barCornerRadius,
-            fill: progressBarColor || "var(--gantt-bar-progress-color)"
+            fill: processColor
           }
         ),
         /* @__PURE__ */ jsx(
           "rect",
           {
-            fill: "unset",
+            fill: barColor,
             x: x1,
             width,
             y: taskYOffset,
@@ -12256,7 +12210,7 @@ const ProjectDisplay = ({
           {
             className: styles$7.projectTop,
             points: projectLeftTriangle,
-            fill: "unset"
+            fill: barColor
           }
         ),
         /* @__PURE__ */ jsx(
@@ -12264,7 +12218,7 @@ const ProjectDisplay = ({
           {
             className: styles$7.projectTop,
             points: projectRightTriangle,
-            fill: "unset"
+            fill: barColor
           }
         )
       ]
@@ -12335,10 +12289,8 @@ const Bar = (props) => {
     x2,
     movingAction,
     ganttRelationEvent,
-    dataDateX,
-    splitbarColors,
-    showProgressBar,
-    progressBarColor
+    showProgress = true,
+    progressColor
   } = props;
   useMemo(() => width < 30, [width]);
   const handleHeight = useMemo(() => taskHeight - 2, [taskHeight]);
@@ -12400,10 +12352,8 @@ const Bar = (props) => {
           isCritical,
           hasChildren,
           startMoveFullTask,
-          dataDateX,
-          splitbarColors,
-          showProgressBar,
-          progressBarColor
+          showProgress,
+          progressColor
         }
       );
     } else {
@@ -12423,10 +12373,8 @@ const Bar = (props) => {
           isCritical,
           hasChildren,
           startMoveFullTask,
-          dataDateX,
-          splitbarColors,
-          showProgressBar,
-          progressBarColor
+          showProgress,
+          progressColor
         }
       );
     }
@@ -12985,10 +12933,8 @@ const TaskGanttContentInner = (props) => {
     taskBarMovingAction,
     waitCommitTasks,
     viewMode,
-    dataDateX,
-    splitbarColors,
-    showProgressBar,
-    progressBarColor
+    showProgress = true,
+    progressColor
   } = props;
   const renderedHolidays = useMemo(() => {
     const { columnWidth } = distances;
@@ -13075,11 +13021,6 @@ const TaskGanttContentInner = (props) => {
         x2: taskX2,
         comparisonDates
       } = getTaskCoordinates2(task);
-      const containerXAbs = Math.max(
-        containerX + (additionalLeftSpace || 0),
-        0
-      );
-      const dataDateXLocal = typeof dataDateX === "number" ? dataDateX - containerXAbs : void 0;
       tasksRes.push(
         /* @__PURE__ */ jsx(
           "svg",
@@ -13124,10 +13065,8 @@ const TaskGanttContentInner = (props) => {
                 onDeleteTask,
                 renderCustomLabel,
                 viewMode,
-                dataDateX: dataDateXLocal,
-                splitbarColors,
-                showProgressBar,
-                progressBarColor
+                showProgress,
+                progressColor
               }
             )
           },
@@ -13337,10 +13276,6 @@ const TaskGanttContentInner = (props) => {
     isDateChangeable,
     isRelationChangeable,
     visibleTasksMirror,
-    dataDateX,
-    splitbarColors,
-    showProgressBar,
-    progressBarColor,
     onArrowDoubleClick
   ]);
   return /* @__PURE__ */ jsxs("g", { className: "content", children: [
@@ -18786,9 +18721,8 @@ const Gantt = (props) => {
     dataDateColor,
     todayLabel = "Today",
     dataDateLabel = "Data Date",
-    splitbarColors,
-    showProgressBar = true,
-    progressBarColor
+    showProgress = true,
+    progressColor
   } = props;
   const ganttSVGRef = useRef(null);
   const wrapperRef = useRef(null);
@@ -19917,29 +19851,6 @@ const Gantt = (props) => {
     () => svgWidth + additionalLeftSpace + additionalRightSpace,
     [additionalLeftSpace, additionalRightSpace, svgWidth]
   );
-  const dataDateX = useMemo(() => {
-    if (!dataDate)
-      return void 0;
-    try {
-      const roundedDataDate = roundStartDate(dataDate);
-      const x = taskXCoordinate(
-        roundedDataDate,
-        startDate,
-        viewMode,
-        distances.columnWidth
-      );
-      return additionalLeftSpace + x;
-    } catch {
-      return void 0;
-    }
-  }, [
-    dataDate,
-    startDate,
-    viewMode,
-    distances,
-    additionalLeftSpace,
-    roundStartDate
-  ]);
   const gridProps = useMemo(
     () => ({
       additionalLeftSpace,
@@ -19952,7 +19863,6 @@ const Gantt = (props) => {
       showTodayLine,
       showDataDateLine,
       dataDate,
-      dataDateX,
       todayColor,
       dataDateColor,
       todayLabel,
@@ -19969,7 +19879,6 @@ const Gantt = (props) => {
       showTodayLine,
       showDataDateLine,
       dataDate,
-      dataDateX,
       todayColor,
       dataDateColor,
       todayLabel,
@@ -20009,11 +19918,6 @@ const Gantt = (props) => {
   const renderTaskBarProps = useMemo(
     () => ({
       ...taskBar,
-      splitbarColors,
-      dataDate,
-      dataDateX,
-      showProgressBar,
-      progressBarColor,
       taskBarMovingAction: (task) => {
         var _a2;
         return task.id === ((_a2 = changeInProgress == null ? void 0 : changeInProgress.changedTask) == null ? void 0 : _a2.id) ? changeInProgress.action : null;
@@ -20049,16 +19953,13 @@ const Gantt = (props) => {
       taskHeight,
       taskYOffset,
       visibleTasksMirror,
-      viewMode
+      viewMode,
+      showProgress,
+      progressColor
     }),
     [
       viewMode,
       taskBar,
-      splitbarColors,
-      dataDate,
-      dataDateX,
-      showProgressBar,
-      progressBarColor,
       authorizedRelations,
       additionalLeftSpace,
       additionalRightSpace,
@@ -20091,7 +19992,9 @@ const Gantt = (props) => {
       visibleTasksMirror,
       (_b = changeInProgress == null ? void 0 : changeInProgress.changedTask) == null ? void 0 : _b.id,
       changeInProgress == null ? void 0 : changeInProgress.action,
-      handleDeleteTasks
+      handleDeleteTasks,
+      showProgress,
+      progressColor
     ]
   );
   const renderTaskListProps = useMemo(