gantt-task-react-v 1.2.11 → 1.2.12

package/dist/components/gantt-today/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Distances, ViewMode, Task } from "../../types";
+import { Distances, ViewMode } from "../../types";
 export type GanttTodayProps = {
     additionalLeftSpace: number;
     distances: Distances;
@@ -15,6 +15,7 @@ export type GanttTodayProps = {
     dataDateColor?: string | null;
     todayLabel?: string;
     dataDateLabel?: string;
-    tasks?: readonly Task[];
+    taskHeight?: number;
+    taskYOffset?: number;
 };
 export declare const GanttToday: React.NamedExoticComponent<GanttTodayProps>;

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

@@ -10909,223 +10909,9 @@ const styles$c = {
   ganttToday,
   ganttTodayCircle
 };
-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 calculateDataDatePosition = ({
-  dataDate,
-  startDate,
-  viewMode,
-  columnWidth
-}) => {
-  const milestoneCenter = taskXCoordinate(
-    dataDate,
-    startDate,
-    viewMode,
-    columnWidth
-  );
-  const taskHeight = 32;
-  const milestoneRightEdge = milestoneCenter + taskHeight * 0.5;
-  return milestoneRightEdge;
-};
 const GanttTodayInner = ({
   additionalLeftSpace,
-  distances: { columnWidth },
+  distances: { columnWidth, barCornerRadius },
   ganttFullHeight,
   isUnknownDates,
   rtl,
@@ -11138,7 +10924,8 @@ const GanttTodayInner = ({
   dataDateColor = null,
   todayLabel = "Today",
   dataDateLabel = "Data Date",
-  tasks = []
+  taskHeight = 20,
+  taskYOffset = 5
 }) => {
   const todayElement = useMemo(() => {
     if (isUnknownDates || !showTodayLine) {
@@ -11221,52 +11008,72 @@ const GanttTodayInner = ({
     if (!showDataDateLine || !dataDate) {
       return null;
     }
-    const tickX = calculateDataDatePosition({
-      dataDate,
-      startDate,
-      viewMode,
-      columnWidth,
-      tasks,
-      rtl
-    });
-    const x = rtl ? tickX : tickX;
+    const dataIndex = 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 percent = dataDate.getMonth() / 12;
+          return 1 + percent * 0.5;
+        }
+        default:
+          return 1;
+      }
+    };
+    const tickX = dataIndex * columnWidth * extraMultiplier();
+    const x = rtl ? tickX + columnWidth : tickX;
     const color = dataDateColor || "var(--gantt-calendar-today-color)";
+    const rotatedHeight = taskHeight / 1.414;
+    const milestoneX = x + additionalLeftSpace - rotatedHeight * 0.5;
+    const milestoneY = taskYOffset;
+    const transform = `rotate(45 ${milestoneX + rotatedHeight * 0.356} ${milestoneY + rotatedHeight * 0.85})`;
+    const milestoneCenterX = milestoneX + rotatedHeight * 0.5;
+    const lineX = milestoneCenterX + rotatedHeight / Math.sqrt(2) * 0.5;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "rect",
         {
-          x: additionalLeftSpace + x,
-          y: 0,
-          width: 2,
-          height: ganttFullHeight,
+          x: milestoneX,
+          y: milestoneY,
+          width: rotatedHeight,
+          height: rotatedHeight,
+          rx: barCornerRadius,
+          ry: barCornerRadius,
+          transform,
           fill: color,
-          opacity: 0.9
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "circle",
-        {
-          className: styles$c.ganttTodayCircle,
-          cx: x + 1,
-          cy: 6,
-          r: 6,
-          fill: color
+          opacity: 0.9,
+          stroke: color,
+          strokeWidth: 1
         }
       ),
       /* @__PURE__ */ jsx(
-        "text",
+        "rect",
         {
-          x: additionalLeftSpace + x + 8,
-          y: 10,
+          x: lineX,
+          y: 0,
+          width: 2,
+          height: ganttFullHeight,
           fill: color,
-          fontSize: 12,
-          fontWeight: 600,
-          children: dataDateLabel || "Data Date"
+          opacity: 0.7
         }
-      )
+      ),
+      /* @__PURE__ */ jsx("text", { x: lineX + 8, y: 10, fill: color, fontSize: 12, fontWeight: 600, children: dataDateLabel || "Data Date" })
     ] });
   }, [
     additionalLeftSpace,
+    barCornerRadius,
     columnWidth,
     ganttFullHeight,
     rtl,
@@ -11276,7 +11083,8 @@ const GanttTodayInner = ({
     dataDate,
     dataDateColor,
     dataDateLabel,
-    tasks
+    taskHeight,
+    taskYOffset
   ]);
   return /* @__PURE__ */ jsxs("g", { className: "today", children: [
     dataDateElement,
@@ -11971,6 +11779,204 @@ const 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;
+    }
+    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 barWrapper = "_barWrapper_5jhkr_1";
 const barHandle = "_barHandle_5jhkr_11";
 const barHandleImportantVisible = "_barHandleImportantVisible_5jhkr_37";
@@ -20188,7 +20194,8 @@ const Gantt = (props) => {
       dataDateColor,
       todayLabel,
       dataDateLabel,
-      tasks: sortedTasks.filter((task) => task.type !== "empty")
+      taskHeight,
+      taskYOffset
     }),
     [
       additionalLeftSpace,
@@ -20205,7 +20212,8 @@ const Gantt = (props) => {
       dataDateColor,
       todayLabel,
       dataDateLabel,
-      sortedTasks
+      taskHeight,
+      taskYOffset
     ]
   );
   const calendarProps = useMemo(

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

@@ -10926,223 +10926,9 @@
     ganttToday,
     ganttTodayCircle
   };
-  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 calculateDataDatePosition = ({
-    dataDate,
-    startDate,
-    viewMode,
-    columnWidth
-  }) => {
-    const milestoneCenter = taskXCoordinate(
-      dataDate,
-      startDate,
-      viewMode,
-      columnWidth
-    );
-    const taskHeight = 32;
-    const milestoneRightEdge = milestoneCenter + taskHeight * 0.5;
-    return milestoneRightEdge;
-  };
   const GanttTodayInner = ({
     additionalLeftSpace,
-    distances: { columnWidth },
+    distances: { columnWidth, barCornerRadius },
     ganttFullHeight,
     isUnknownDates,
     rtl,
@@ -11155,7 +10941,8 @@
     dataDateColor = null,
     todayLabel = "Today",
     dataDateLabel = "Data Date",
-    tasks = []
+    taskHeight = 20,
+    taskYOffset = 5
   }) => {
     const todayElement = React.useMemo(() => {
       if (isUnknownDates || !showTodayLine) {
@@ -11238,52 +11025,72 @@
       if (!showDataDateLine || !dataDate) {
         return null;
       }
-      const tickX = calculateDataDatePosition({
-        dataDate,
-        startDate,
-        viewMode,
-        columnWidth,
-        tasks,
-        rtl
-      });
-      const x = rtl ? tickX : tickX;
+      const dataIndex = 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 percent = dataDate.getMonth() / 12;
+            return 1 + percent * 0.5;
+          }
+          default:
+            return 1;
+        }
+      };
+      const tickX = dataIndex * columnWidth * extraMultiplier();
+      const x = rtl ? tickX + columnWidth : tickX;
       const color = dataDateColor || "var(--gantt-calendar-today-color)";
+      const rotatedHeight = taskHeight / 1.414;
+      const milestoneX = x + additionalLeftSpace - rotatedHeight * 0.5;
+      const milestoneY = taskYOffset;
+      const transform = `rotate(45 ${milestoneX + rotatedHeight * 0.356} ${milestoneY + rotatedHeight * 0.85})`;
+      const milestoneCenterX = milestoneX + rotatedHeight * 0.5;
+      const lineX = milestoneCenterX + rotatedHeight / Math.sqrt(2) * 0.5;
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "rect",
           {
-            x: additionalLeftSpace + x,
-            y: 0,
-            width: 2,
-            height: ganttFullHeight,
+            x: milestoneX,
+            y: milestoneY,
+            width: rotatedHeight,
+            height: rotatedHeight,
+            rx: barCornerRadius,
+            ry: barCornerRadius,
+            transform,
             fill: color,
-            opacity: 0.9
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "circle",
-          {
-            className: styles$c.ganttTodayCircle,
-            cx: x + 1,
-            cy: 6,
-            r: 6,
-            fill: color
+            opacity: 0.9,
+            stroke: color,
+            strokeWidth: 1
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "text",
+          "rect",
           {
-            x: additionalLeftSpace + x + 8,
-            y: 10,
+            x: lineX,
+            y: 0,
+            width: 2,
+            height: ganttFullHeight,
             fill: color,
-            fontSize: 12,
-            fontWeight: 600,
-            children: dataDateLabel || "Data Date"
+            opacity: 0.7
           }
-        )
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: lineX + 8, y: 10, fill: color, fontSize: 12, fontWeight: 600, children: dataDateLabel || "Data Date" })
       ] });
     }, [
       additionalLeftSpace,
+      barCornerRadius,
       columnWidth,
       ganttFullHeight,
       rtl,
@@ -11293,7 +11100,8 @@
       dataDate,
       dataDateColor,
       dataDateLabel,
-      tasks
+      taskHeight,
+      taskYOffset
     ]);
     return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "today", children: [
       dataDateElement,
@@ -11988,6 +11796,204 @@
       }
     );
   };
+  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 barWrapper = "_barWrapper_5jhkr_1";
   const barHandle = "_barHandle_5jhkr_11";
   const barHandleImportantVisible = "_barHandleImportantVisible_5jhkr_37";
@@ -20205,7 +20211,8 @@
         dataDateColor,
         todayLabel,
         dataDateLabel,
-        tasks: sortedTasks.filter((task) => task.type !== "empty")
+        taskHeight,
+        taskYOffset
       }),
       [
         additionalLeftSpace,
@@ -20222,7 +20229,8 @@
         dataDateColor,
         todayLabel,
         dataDateLabel,
-        sortedTasks
+        taskHeight,
+        taskYOffset
       ]
     );
     const calendarProps = React.useMemo(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react-v",
-  "version": "1.2.11",
+  "version": "1.2.12",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",

package/dist/helpers/data-date-helper.d.ts

@@ -1,18 +0,0 @@
-import { Task, ViewMode } from "../types";
-export interface DataDatePositionOptions {
-    dataDate: Date;
-    startDate: Date;
-    viewMode: ViewMode;
-    columnWidth: number;
-    tasks?: readonly Task[];
-    rtl?: boolean;
-}
-/**
- * Calculate data date line position by creating a virtual milestone bar for the data date
- * and positioning the line at the end of that milestone bar (just like the custom frontend fix)
- */
-/**
- * Calculate data date line position by positioning it at the right edge of where a milestone
- * would be positioned (exactly matching the actual milestone positioning logic)
- */
-export declare const calculateDataDatePosition: ({ dataDate, startDate, viewMode, columnWidth, }: DataDatePositionOptions) => number;