gantt-task-react-v 1.3.4 → 1.3.6

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

@@ -13115,73 +13115,19 @@ const TaskGanttContentInner = (props) => {
       const safeProgressWidth = isNaN(progressWidth) || !isFinite(progressWidth) ? 0 : Math.max(progressWidth, 0);
       const safeInnerX1 = isNaN(innerX1) || !isFinite(innerX1) ? 0 : innerX1;
       const safeInnerX2 = isNaN(innerX2) || !isFinite(innerX2) ? safeInnerX1 + safeWidth : innerX2;
-      tasksRes.push(
-        /* @__PURE__ */ jsx(
-          "svg",
-          {
-            id: task.id,
-            className: `${styles$4.TaskItemWrapper} TaskItemWrapper`,
-            x: Math.max(safeContainerX + (additionalLeftSpace || 0), 0),
-            y: safeLevelY,
-            width: Math.max(safeContainerWidth, 0),
-            height: fullRowHeight,
-            children: /* @__PURE__ */ jsx(
-              TaskItem,
-              {
-                movingAction: taskBarMovingAction(task),
-                allowMoveTaskBar,
-                hasChildren: checkHasChildren(task, childTasksMap),
-                progressWidth: safeProgressWidth,
-                progressX: rtl ? safeInnerX2 : safeInnerX1,
-                onSelectTaskOnMouseDown: selectTaskOnMouseDown,
-                task,
-                taskYOffset,
-                width: safeWidth,
-                x1: safeInnerX1,
-                x2: safeInnerX2,
-                distances,
-                taskHeight,
-                taskHalfHeight,
-                isProgressChangeable: (t) => isProgressChangeable(t) && !waitCommitTasks,
-                isDateChangeable: (t) => isDateChangeable(t) && !waitCommitTasks,
-                isRelationChangeable: (t) => isRelationChangeable(t) && !waitCommitTasks,
-                authorizedRelations,
-                ganttRelationEvent,
-                canDelete: !task.isDisabled && !waitCommitTasks,
-                onDoubleClick,
-                onClick,
-                onEventStart: onTaskBarDragStart,
-                onTooltipTask,
-                onRelationStart: onTaskBarRelationStart,
-                isSelected: Boolean(selectedIdsMirror[taskId]),
-                isCritical,
-                rtl,
-                onDeleteTask,
-                renderCustomLabel,
-                viewMode,
-                showProgress,
-                progressColor
-              }
-            )
-          },
-          key2
-        )
-      );
+      let comparisonBarElement = null;
       if (task.comparisonDates && comparisonDates) {
         const safeComparisonX = isNaN(comparisonDates.x) || !isFinite(comparisonDates.x) ? 0 : comparisonDates.x;
-        const safeComparisonY = isNaN(comparisonDates.y) || !isFinite(comparisonDates.y) ? safeLevelY : comparisonDates.y;
-        const safeComparisonWidth = isNaN(comparisonDates.width) || !isFinite(comparisonDates.width) ? 10 : Math.max(comparisonDates.width, 1);
-        const safeComparisonHeight = isNaN(comparisonDates.height) || !isFinite(comparisonDates.height) ? 4 : Math.max(comparisonDates.height, 1);
-        tasksRes.push(
-          /* @__PURE__ */ jsx(
-            "svg",
+        const safeComparisonWidth = isNaN(comparisonDates.width) || !isFinite(comparisonDates.width) ? 10 : Math.max(comparisonDates.width, 3);
+        const safeComparisonHeight = isNaN(comparisonDates.height) || !isFinite(comparisonDates.height) ? 6 : Math.max(comparisonDates.height, 3);
+        const comparisonRight = safeComparisonX + safeComparisonWidth;
+        const isVisible = comparisonRight >= 0 && safeComparisonX <= 1e4;
+        if (isVisible) {
+          const relativeComparisonX = safeComparisonX - safeContainerX;
+          comparisonBarElement = /* @__PURE__ */ jsx(
+            "g",
             {
-              id: task.id + "_comparison",
-              className: "TaskItemWrapperComparison",
-              x: Math.max(safeComparisonX + (additionalLeftSpace || 0), 0),
-              y: safeComparisonY,
-              width: safeComparisonWidth,
-              height: safeComparisonHeight * 2,
+              transform: `translate(${relativeComparisonX}, ${taskHeight + 2})`,
               children: /* @__PURE__ */ jsx(
                 BarComparison,
                 {
@@ -13193,16 +13139,70 @@ const TaskGanttContentInner = (props) => {
                   height: safeComparisonHeight,
                   width: safeComparisonWidth,
                   borderHeight: distances.barComparisonTaskBorderHeight,
-                  yOffset: distances.barComparisonTaskYOffset,
+                  yOffset: 0,
                   task,
                   onTooltipTask
                 }
               )
-            },
-            key2 + "_comparison"
-          )
-        );
+            }
+          );
+        }
       }
+      tasksRes.push(
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            id: task.id,
+            className: `${styles$4.TaskItemWrapper} TaskItemWrapper`,
+            x: Math.max(safeContainerX + (additionalLeftSpace || 0), 0),
+            y: safeLevelY,
+            width: Math.max(safeContainerWidth, 0),
+            height: fullRowHeight,
+            children: [
+              /* @__PURE__ */ jsx(
+                TaskItem,
+                {
+                  movingAction: taskBarMovingAction(task),
+                  allowMoveTaskBar,
+                  hasChildren: checkHasChildren(task, childTasksMap),
+                  progressWidth: safeProgressWidth,
+                  progressX: rtl ? safeInnerX2 : safeInnerX1,
+                  onSelectTaskOnMouseDown: selectTaskOnMouseDown,
+                  task,
+                  taskYOffset,
+                  width: safeWidth,
+                  x1: safeInnerX1,
+                  x2: safeInnerX2,
+                  distances,
+                  taskHeight,
+                  taskHalfHeight,
+                  isProgressChangeable: (t) => isProgressChangeable(t) && !waitCommitTasks,
+                  isDateChangeable: (t) => isDateChangeable(t) && !waitCommitTasks,
+                  isRelationChangeable: (t) => isRelationChangeable(t) && !waitCommitTasks,
+                  authorizedRelations,
+                  ganttRelationEvent,
+                  canDelete: !task.isDisabled && !waitCommitTasks,
+                  onDoubleClick,
+                  onClick,
+                  onEventStart: onTaskBarDragStart,
+                  onTooltipTask,
+                  onRelationStart: onTaskBarRelationStart,
+                  isSelected: Boolean(selectedIdsMirror[taskId]),
+                  isCritical,
+                  rtl,
+                  onDeleteTask,
+                  renderCustomLabel,
+                  viewMode,
+                  showProgress,
+                  progressColor
+                }
+              ),
+              comparisonBarElement
+            ]
+          },
+          key2
+        )
+      );
       const addedDependenciesAtLevel = addedDependencies[comparisonLevel] || {};
       if (!addedDependencies[comparisonLevel]) {
         addedDependencies[comparisonLevel] = addedDependenciesAtLevel;
@@ -13860,11 +13860,12 @@ const countTaskCoordinates = (task, taskToRowIndexMap, startDate, viewMode, rtl,
     );
     cx1 = isNaN(cx1) || !isFinite(cx1) ? x1 : cx1;
     cx2 = isNaN(cx2) || !isFinite(cx2) ? x2 : cx2;
+    const comparisonWidth = Math.max(Math.abs(cx2 - cx1), 3);
+    const comparisonX = Math.min(cx1, cx2);
     comparisonDates = {
-      x: cx1,
+      x: comparisonX,
       y: y + taskHeight,
-      width: Math.max(cx2 - cx1, 1),
-      // Ensure minimum width of 1px for visibility
+      width: comparisonWidth,
       height: barComparisonTaskHeight
     };
   }

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

@@ -13132,73 +13132,19 @@
         const safeProgressWidth = isNaN(progressWidth) || !isFinite(progressWidth) ? 0 : Math.max(progressWidth, 0);
         const safeInnerX1 = isNaN(innerX1) || !isFinite(innerX1) ? 0 : innerX1;
         const safeInnerX2 = isNaN(innerX2) || !isFinite(innerX2) ? safeInnerX1 + safeWidth : innerX2;
-        tasksRes.push(
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "svg",
-            {
-              id: task.id,
-              className: `${styles$4.TaskItemWrapper} TaskItemWrapper`,
-              x: Math.max(safeContainerX + (additionalLeftSpace || 0), 0),
-              y: safeLevelY,
-              width: Math.max(safeContainerWidth, 0),
-              height: fullRowHeight,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                TaskItem,
-                {
-                  movingAction: taskBarMovingAction(task),
-                  allowMoveTaskBar,
-                  hasChildren: checkHasChildren(task, childTasksMap),
-                  progressWidth: safeProgressWidth,
-                  progressX: rtl ? safeInnerX2 : safeInnerX1,
-                  onSelectTaskOnMouseDown: selectTaskOnMouseDown,
-                  task,
-                  taskYOffset,
-                  width: safeWidth,
-                  x1: safeInnerX1,
-                  x2: safeInnerX2,
-                  distances,
-                  taskHeight,
-                  taskHalfHeight,
-                  isProgressChangeable: (t) => isProgressChangeable(t) && !waitCommitTasks,
-                  isDateChangeable: (t) => isDateChangeable(t) && !waitCommitTasks,
-                  isRelationChangeable: (t) => isRelationChangeable(t) && !waitCommitTasks,
-                  authorizedRelations,
-                  ganttRelationEvent,
-                  canDelete: !task.isDisabled && !waitCommitTasks,
-                  onDoubleClick,
-                  onClick,
-                  onEventStart: onTaskBarDragStart,
-                  onTooltipTask,
-                  onRelationStart: onTaskBarRelationStart,
-                  isSelected: Boolean(selectedIdsMirror[taskId]),
-                  isCritical,
-                  rtl,
-                  onDeleteTask,
-                  renderCustomLabel,
-                  viewMode,
-                  showProgress,
-                  progressColor
-                }
-              )
-            },
-            key2
-          )
-        );
+        let comparisonBarElement = null;
         if (task.comparisonDates && comparisonDates) {
           const safeComparisonX = isNaN(comparisonDates.x) || !isFinite(comparisonDates.x) ? 0 : comparisonDates.x;
-          const safeComparisonY = isNaN(comparisonDates.y) || !isFinite(comparisonDates.y) ? safeLevelY : comparisonDates.y;
-          const safeComparisonWidth = isNaN(comparisonDates.width) || !isFinite(comparisonDates.width) ? 10 : Math.max(comparisonDates.width, 1);
-          const safeComparisonHeight = isNaN(comparisonDates.height) || !isFinite(comparisonDates.height) ? 4 : Math.max(comparisonDates.height, 1);
-          tasksRes.push(
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
+          const safeComparisonWidth = isNaN(comparisonDates.width) || !isFinite(comparisonDates.width) ? 10 : Math.max(comparisonDates.width, 3);
+          const safeComparisonHeight = isNaN(comparisonDates.height) || !isFinite(comparisonDates.height) ? 6 : Math.max(comparisonDates.height, 3);
+          const comparisonRight = safeComparisonX + safeComparisonWidth;
+          const isVisible = comparisonRight >= 0 && safeComparisonX <= 1e4;
+          if (isVisible) {
+            const relativeComparisonX = safeComparisonX - safeContainerX;
+            comparisonBarElement = /* @__PURE__ */ jsxRuntime.jsx(
+              "g",
               {
-                id: task.id + "_comparison",
-                className: "TaskItemWrapperComparison",
-                x: Math.max(safeComparisonX + (additionalLeftSpace || 0), 0),
-                y: safeComparisonY,
-                width: safeComparisonWidth,
-                height: safeComparisonHeight * 2,
+                transform: `translate(${relativeComparisonX}, ${taskHeight + 2})`,
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   BarComparison,
                   {
@@ -13210,16 +13156,70 @@
                     height: safeComparisonHeight,
                     width: safeComparisonWidth,
                     borderHeight: distances.barComparisonTaskBorderHeight,
-                    yOffset: distances.barComparisonTaskYOffset,
+                    yOffset: 0,
                     task,
                     onTooltipTask
                   }
                 )
-              },
-              key2 + "_comparison"
-            )
-          );
+              }
+            );
+          }
         }
+        tasksRes.push(
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              id: task.id,
+              className: `${styles$4.TaskItemWrapper} TaskItemWrapper`,
+              x: Math.max(safeContainerX + (additionalLeftSpace || 0), 0),
+              y: safeLevelY,
+              width: Math.max(safeContainerWidth, 0),
+              height: fullRowHeight,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TaskItem,
+                  {
+                    movingAction: taskBarMovingAction(task),
+                    allowMoveTaskBar,
+                    hasChildren: checkHasChildren(task, childTasksMap),
+                    progressWidth: safeProgressWidth,
+                    progressX: rtl ? safeInnerX2 : safeInnerX1,
+                    onSelectTaskOnMouseDown: selectTaskOnMouseDown,
+                    task,
+                    taskYOffset,
+                    width: safeWidth,
+                    x1: safeInnerX1,
+                    x2: safeInnerX2,
+                    distances,
+                    taskHeight,
+                    taskHalfHeight,
+                    isProgressChangeable: (t) => isProgressChangeable(t) && !waitCommitTasks,
+                    isDateChangeable: (t) => isDateChangeable(t) && !waitCommitTasks,
+                    isRelationChangeable: (t) => isRelationChangeable(t) && !waitCommitTasks,
+                    authorizedRelations,
+                    ganttRelationEvent,
+                    canDelete: !task.isDisabled && !waitCommitTasks,
+                    onDoubleClick,
+                    onClick,
+                    onEventStart: onTaskBarDragStart,
+                    onTooltipTask,
+                    onRelationStart: onTaskBarRelationStart,
+                    isSelected: Boolean(selectedIdsMirror[taskId]),
+                    isCritical,
+                    rtl,
+                    onDeleteTask,
+                    renderCustomLabel,
+                    viewMode,
+                    showProgress,
+                    progressColor
+                  }
+                ),
+                comparisonBarElement
+              ]
+            },
+            key2
+          )
+        );
         const addedDependenciesAtLevel = addedDependencies[comparisonLevel] || {};
         if (!addedDependencies[comparisonLevel]) {
           addedDependencies[comparisonLevel] = addedDependenciesAtLevel;
@@ -13877,11 +13877,12 @@
       );
       cx1 = isNaN(cx1) || !isFinite(cx1) ? x1 : cx1;
       cx2 = isNaN(cx2) || !isFinite(cx2) ? x2 : cx2;
+      const comparisonWidth = Math.max(Math.abs(cx2 - cx1), 3);
+      const comparisonX = Math.min(cx1, cx2);
       comparisonDates = {
-        x: cx1,
+        x: comparisonX,
         y: y + taskHeight,
-        width: Math.max(cx2 - cx1, 1),
-        // Ensure minimum width of 1px for visibility
+        width: comparisonWidth,
         height: barComparisonTaskHeight
       };
     }

package/package.json

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