gantt-task-react-v 1.3.6 → 1.4.1

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

@@ -4688,9 +4688,9 @@ const getStartAndEnd = (containerEl, property, cellSize) => {
   const scrollValue = property === "scrollLeft" ? el.scrollLeft : el.scrollTop;
   const maxScrollValue = property === "scrollLeft" ? el.scrollWidth : el.scrollHeight;
   const fullValue = property === "scrollLeft" ? el.clientWidth : el.clientHeight;
-  const firstIndex = Math.max(0, Math.floor(scrollValue / cellSize));
   const visibleCount = Math.max(1, Math.ceil(fullValue / cellSize));
   const overscan = Math.min(100, Math.max(10, Math.ceil(visibleCount * 0.5)));
+  const firstIndex = Math.max(0, Math.floor(scrollValue / cellSize) - overscan);
   const lastIndex = Math.floor((scrollValue + fullValue) / cellSize) + overscan;
   const isStartOfScroll = scrollValue < DELTA;
   const isEndOfScroll = scrollValue + fullValue > maxScrollValue - DELTA;
@@ -5536,6 +5536,37 @@ const TaskListTableHeadersDefaultInner = ({
   canMoveTasks,
   onColumnResizeStart
 }) => {
+  const pinnedStyles = useMemo(() => {
+    const result = {};
+    let leftOffset = 0;
+    if (canMoveTasks) {
+      leftOffset = 24;
+    }
+    for (let i = 0; i < columns.length; i++) {
+      if (columns[i].pinned === "left") {
+        result[i] = {
+          position: "sticky",
+          left: leftOffset,
+          zIndex: 2,
+          backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+        };
+        leftOffset += columns[i].width;
+      }
+    }
+    let rightOffset = 0;
+    for (let i = columns.length - 1; i >= 0; i--) {
+      if (columns[i].pinned === "right") {
+        result[i] = {
+          position: "sticky",
+          right: rightOffset,
+          zIndex: 2,
+          backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+        };
+        rightOffset += columns[i].width;
+      }
+    }
+    return result;
+  }, [columns, canMoveTasks]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -5572,7 +5603,8 @@ const TaskListTableHeadersDefaultInner = ({
                     className: styles$h.ganttTable_HeaderItem,
                     style: {
                       minWidth: width,
-                      maxWidth: width
+                      maxWidth: width,
+                      ...pinnedStyles[index2]
                     },
                     children: [
                       title,
@@ -10135,6 +10167,37 @@ const TaskListTableRowInner = forwardRef(
       }
       return classNames.join(" ");
     }, [isCut2, moveOverPosition, isOverlay2, isDragging]);
+    const pinnedStyles = useMemo(() => {
+      const result = {};
+      let leftOffset = 0;
+      if (moveHandleProps || !isOverlay2 && task.type !== "project" && task.id !== "no-project-asigned") {
+        leftOffset = 24;
+      }
+      for (let i = 0; i < columns.length; i++) {
+        if (columns[i].pinned === "left") {
+          result[i] = {
+            position: "sticky",
+            left: leftOffset,
+            zIndex: 1,
+            backgroundColor: "inherit"
+          };
+          leftOffset += columns[i].width;
+        }
+      }
+      let rightOffset = 0;
+      for (let i = columns.length - 1; i >= 0; i--) {
+        if (columns[i].pinned === "right") {
+          result[i] = {
+            position: "sticky",
+            right: rightOffset,
+            zIndex: 1,
+            backgroundColor: "inherit"
+          };
+          rightOffset += columns[i].width;
+        }
+      }
+      return result;
+    }, [columns, moveHandleProps, isOverlay2, task.type, task.id]);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -10156,7 +10219,8 @@ const TaskListTableRowInner = forwardRef(
                 className: styles$f.taskListCell,
                 style: {
                   minWidth: width,
-                  maxWidth: width
+                  maxWidth: width,
+                  ...pinnedStyles[index2]
                 },
                 children: /* @__PURE__ */ jsx(Component, { data: columnData })
               },
@@ -13062,6 +13126,12 @@ const TaskGanttContentInner = (props) => {
     const tasksRes = [];
     const arrowsRes = [];
     const selectedTasksRes = [];
+    const taskById = /* @__PURE__ */ new Map();
+    mapGlobalRowIndexToTask.forEach((task) => {
+      if (task.type !== "empty") {
+        taskById.set(task.id, task);
+      }
+    });
     const addedSelectedTasks = {};
     const addedDependencies = {};
     for (let index2 = start; index2 <= end; ++index2) {
@@ -13115,19 +13185,73 @@ 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;
-      let comparisonBarElement = null;
+      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
+        )
+      );
       if (task.comparisonDates && comparisonDates) {
         const safeComparisonX = isNaN(comparisonDates.x) || !isFinite(comparisonDates.x) ? 0 : comparisonDates.x;
-        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",
+        const safeComparisonY = isNaN(comparisonDates.y) || !isFinite(comparisonDates.y) ? safeLevelY : comparisonDates.y;
+        const safeComparisonWidth = isNaN(comparisonDates.width) || !isFinite(comparisonDates.width) ? 0 : Math.max(comparisonDates.width, 0);
+        const safeComparisonHeight = isNaN(comparisonDates.height) || !isFinite(comparisonDates.height) ? 0 : Math.max(comparisonDates.height, 0);
+        tasksRes.push(
+          /* @__PURE__ */ jsx(
+            "svg",
             {
-              transform: `translate(${relativeComparisonX}, ${taskHeight + 2})`,
+              id: task.id + "_comparison",
+              className: "TaskItemWrapperComparison",
+              x: Math.max(safeComparisonX + (additionalLeftSpace || 0), 0),
+              y: safeComparisonY,
+              width: safeComparisonWidth,
+              height: safeComparisonHeight * 2,
               children: /* @__PURE__ */ jsx(
                 BarComparison,
                 {
@@ -13139,70 +13263,16 @@ const TaskGanttContentInner = (props) => {
                   height: safeComparisonHeight,
                   width: safeComparisonWidth,
                   borderHeight: distances.barComparisonTaskBorderHeight,
-                  yOffset: 0,
+                  yOffset: distances.barComparisonTaskYOffset,
                   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;
@@ -13356,6 +13426,93 @@ const TaskGanttContentInner = (props) => {
         );
       }
     }
+    const renderedTop = start * fullRowHeight;
+    const renderedBottom = (end + 1) * fullRowHeight;
+    for (const [comparisonLevel, dependenciesByLevel] of dependencyMap) {
+      let addedDependenciesAtLevel = addedDependencies[comparisonLevel];
+      if (!addedDependenciesAtLevel) {
+        addedDependenciesAtLevel = {};
+        addedDependencies[comparisonLevel] = addedDependenciesAtLevel;
+      }
+      const criticalPathOnLevel = criticalPaths ? criticalPaths.get(comparisonLevel) : void 0;
+      for (const [taskId, dependencies] of dependenciesByLevel) {
+        let addedDependenciesAtTask = addedDependenciesAtLevel[taskId];
+        if (!addedDependenciesAtTask) {
+          addedDependenciesAtTask = {};
+          addedDependenciesAtLevel[taskId] = addedDependenciesAtTask;
+        }
+        const targetTask = taskById.get(taskId);
+        if (!targetTask)
+          continue;
+        const criticalPathForTask = criticalPathOnLevel ? criticalPathOnLevel.dependencies.get(taskId) : void 0;
+        dependencies.filter(({ source }) => {
+          if (addedDependenciesAtTask[source.id])
+            return false;
+          if (!visibleTasksMirror[source.id])
+            return false;
+          return true;
+        }).forEach(
+          ({
+            containerHeight,
+            containerY,
+            innerFromY,
+            innerToY,
+            ownTarget,
+            source,
+            sourceTarget
+          }) => {
+            if (containerY + containerHeight < renderedTop || containerY > renderedBottom) {
+              return;
+            }
+            addedDependenciesAtTask[source.id] = true;
+            const isCritical = criticalPathForTask ? criticalPathForTask.has(source.id) : false;
+            const { x1: fromX1, x2: fromX2 } = getTaskCoordinates2(source);
+            const { x1: targetX1, x2: targetX2 } = getTaskCoordinates2(targetTask);
+            const safeFromX1 = isNaN(fromX1) || !isFinite(fromX1) ? 0 : fromX1;
+            const safeFromX2 = isNaN(fromX2) || !isFinite(fromX2) ? safeFromX1 + 10 : fromX2;
+            const safeTargetX1 = isNaN(targetX1) || !isFinite(targetX1) ? 0 : targetX1;
+            const safeTargetX2 = isNaN(targetX2) || !isFinite(targetX2) ? safeTargetX1 + 10 : targetX2;
+            const cX = Math.min(safeFromX1, safeTargetX1) - DELTA_RELATION_WIDTH;
+            const cW = Math.max(safeFromX2, safeTargetX2) - cX + DELTA_RELATION_WIDTH;
+            const safeCX = isNaN(cX) || !isFinite(cX) ? 0 : cX;
+            const safeCW = isNaN(cW) || !isFinite(cW) ? 100 : Math.max(cW, 0);
+            arrowsRes.push(
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  x: Math.max(safeCX + (additionalLeftSpace || 0), 0),
+                  y: containerY,
+                  width: safeCW,
+                  height: containerHeight,
+                  children: /* @__PURE__ */ jsx(
+                    Arrow,
+                    {
+                      distances,
+                      taskFrom: source,
+                      targetFrom: sourceTarget,
+                      fromX1: safeFromX1 - safeCX,
+                      fromX2: safeFromX2 - safeCX,
+                      fromY: innerFromY,
+                      taskTo: targetTask,
+                      targetTo: ownTarget,
+                      toX1: safeTargetX1 - safeCX,
+                      toX2: safeTargetX2 - safeCX,
+                      toY: innerToY,
+                      fullRowHeight,
+                      taskHeight,
+                      isCritical,
+                      rtl,
+                      onArrowDoubleClick
+                    }
+                  )
+                },
+                `Arrow from ${source.id} to ${taskId} on ${comparisonLevel}`
+              )
+            );
+          }
+        );
+      }
+    }
     return [tasksRes, arrowsRes, selectedTasksRes];
   }, [
     viewMode,
@@ -13860,12 +14017,10 @@ 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: comparisonX,
+      x: cx1,
       y: y + taskHeight,
-      width: comparisonWidth,
+      width: Math.max(cx2 - cx1, 0),
       height: barComparisonTaskHeight
     };
   }
@@ -19059,7 +19214,8 @@ const Gantt = (props) => {
     todayLabel = "Today",
     dataDateLabel = "Data Date",
     showProgress = true,
-    progressColor
+    progressColor,
+    scrollToTaskId
   } = props;
   const ganttSVGRef = useRef(null);
   const wrapperRef = useRef(null);
@@ -19367,6 +19523,44 @@ const Gantt = (props) => {
     },
     [mapTaskToCoordinates, setScrollXProgrammatically]
   );
+  const prevScrollToTaskIdRef = useRef(void 0);
+  useEffect(() => {
+    if (!scrollToTaskId || scrollToTaskId === prevScrollToTaskIdRef.current) {
+      return;
+    }
+    prevScrollToTaskIdRef.current = scrollToTaskId;
+    for (const [comparisonLevel, levelMap] of tasksMap) {
+      const task = levelMap.get(scrollToTaskId);
+      if (!task || task.type === "empty") {
+        continue;
+      }
+      const { x1 } = getTaskCoordinates(task, mapTaskToCoordinates);
+      setScrollXProgrammatically(Math.max(0, x1 - 100));
+      const rowIndexMap = taskToRowIndexMap.get(comparisonLevel);
+      if (rowIndexMap) {
+        const rowIndex = rowIndexMap.get(scrollToTaskId);
+        if (typeof rowIndex === "number") {
+          const targetScrollY = rowIndex * fullRowHeight - ganttHeight / 2 + fullRowHeight / 2;
+          setScrollYProgrammatically(
+            Math.max(0, Math.min(targetScrollY, ganttFullHeight - ganttHeight))
+          );
+        }
+      }
+      selectTask(scrollToTaskId);
+      break;
+    }
+  }, [
+    scrollToTaskId,
+    tasksMap,
+    mapTaskToCoordinates,
+    taskToRowIndexMap,
+    fullRowHeight,
+    ganttHeight,
+    ganttFullHeight,
+    setScrollXProgrammatically,
+    setScrollYProgrammatically,
+    selectTask
+  ]);
   const { contextMenu, handleCloseContextMenu, handleOpenContextMenu } = useContextMenu(wrapperRef, scrollToTask);
   const [ganttContextMenu, setGanttContextMenu] = useState({
     task: null,

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

@@ -4705,9 +4705,9 @@
     const scrollValue = property === "scrollLeft" ? el.scrollLeft : el.scrollTop;
     const maxScrollValue = property === "scrollLeft" ? el.scrollWidth : el.scrollHeight;
     const fullValue = property === "scrollLeft" ? el.clientWidth : el.clientHeight;
-    const firstIndex = Math.max(0, Math.floor(scrollValue / cellSize));
     const visibleCount = Math.max(1, Math.ceil(fullValue / cellSize));
     const overscan = Math.min(100, Math.max(10, Math.ceil(visibleCount * 0.5)));
+    const firstIndex = Math.max(0, Math.floor(scrollValue / cellSize) - overscan);
     const lastIndex = Math.floor((scrollValue + fullValue) / cellSize) + overscan;
     const isStartOfScroll = scrollValue < DELTA;
     const isEndOfScroll = scrollValue + fullValue > maxScrollValue - DELTA;
@@ -5553,6 +5553,37 @@
     canMoveTasks,
     onColumnResizeStart
   }) => {
+    const pinnedStyles = React.useMemo(() => {
+      const result = {};
+      let leftOffset = 0;
+      if (canMoveTasks) {
+        leftOffset = 24;
+      }
+      for (let i = 0; i < columns.length; i++) {
+        if (columns[i].pinned === "left") {
+          result[i] = {
+            position: "sticky",
+            left: leftOffset,
+            zIndex: 2,
+            backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+          };
+          leftOffset += columns[i].width;
+        }
+      }
+      let rightOffset = 0;
+      for (let i = columns.length - 1; i >= 0; i--) {
+        if (columns[i].pinned === "right") {
+          result[i] = {
+            position: "sticky",
+            right: rightOffset,
+            zIndex: 2,
+            backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+          };
+          rightOffset += columns[i].width;
+        }
+      }
+      return result;
+    }, [columns, canMoveTasks]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -5589,7 +5620,8 @@
                       className: styles$h.ganttTable_HeaderItem,
                       style: {
                         minWidth: width,
-                        maxWidth: width
+                        maxWidth: width,
+                        ...pinnedStyles[index2]
                       },
                       children: [
                         title,
@@ -10152,6 +10184,37 @@
         }
         return classNames.join(" ");
       }, [isCut2, moveOverPosition, isOverlay2, isDragging]);
+      const pinnedStyles = React.useMemo(() => {
+        const result = {};
+        let leftOffset = 0;
+        if (moveHandleProps || !isOverlay2 && task.type !== "project" && task.id !== "no-project-asigned") {
+          leftOffset = 24;
+        }
+        for (let i = 0; i < columns.length; i++) {
+          if (columns[i].pinned === "left") {
+            result[i] = {
+              position: "sticky",
+              left: leftOffset,
+              zIndex: 1,
+              backgroundColor: "inherit"
+            };
+            leftOffset += columns[i].width;
+          }
+        }
+        let rightOffset = 0;
+        for (let i = columns.length - 1; i >= 0; i--) {
+          if (columns[i].pinned === "right") {
+            result[i] = {
+              position: "sticky",
+              right: rightOffset,
+              zIndex: 1,
+              backgroundColor: "inherit"
+            };
+            rightOffset += columns[i].width;
+          }
+        }
+        return result;
+      }, [columns, moveHandleProps, isOverlay2, task.type, task.id]);
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -10173,7 +10236,8 @@
                   className: styles$f.taskListCell,
                   style: {
                     minWidth: width,
-                    maxWidth: width
+                    maxWidth: width,
+                    ...pinnedStyles[index2]
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsx(Component, { data: columnData })
                 },
@@ -13079,6 +13143,12 @@
       const tasksRes = [];
       const arrowsRes = [];
       const selectedTasksRes = [];
+      const taskById = /* @__PURE__ */ new Map();
+      mapGlobalRowIndexToTask.forEach((task) => {
+        if (task.type !== "empty") {
+          taskById.set(task.id, task);
+        }
+      });
       const addedSelectedTasks = {};
       const addedDependencies = {};
       for (let index2 = start; index2 <= end; ++index2) {
@@ -13132,19 +13202,73 @@
         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;
-        let comparisonBarElement = null;
+        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
+          )
+        );
         if (task.comparisonDates && comparisonDates) {
           const safeComparisonX = isNaN(comparisonDates.x) || !isFinite(comparisonDates.x) ? 0 : comparisonDates.x;
-          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",
+          const safeComparisonY = isNaN(comparisonDates.y) || !isFinite(comparisonDates.y) ? safeLevelY : comparisonDates.y;
+          const safeComparisonWidth = isNaN(comparisonDates.width) || !isFinite(comparisonDates.width) ? 0 : Math.max(comparisonDates.width, 0);
+          const safeComparisonHeight = isNaN(comparisonDates.height) || !isFinite(comparisonDates.height) ? 0 : Math.max(comparisonDates.height, 0);
+          tasksRes.push(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
               {
-                transform: `translate(${relativeComparisonX}, ${taskHeight + 2})`,
+                id: task.id + "_comparison",
+                className: "TaskItemWrapperComparison",
+                x: Math.max(safeComparisonX + (additionalLeftSpace || 0), 0),
+                y: safeComparisonY,
+                width: safeComparisonWidth,
+                height: safeComparisonHeight * 2,
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   BarComparison,
                   {
@@ -13156,70 +13280,16 @@
                     height: safeComparisonHeight,
                     width: safeComparisonWidth,
                     borderHeight: distances.barComparisonTaskBorderHeight,
-                    yOffset: 0,
+                    yOffset: distances.barComparisonTaskYOffset,
                     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;
@@ -13373,6 +13443,93 @@
           );
         }
       }
+      const renderedTop = start * fullRowHeight;
+      const renderedBottom = (end + 1) * fullRowHeight;
+      for (const [comparisonLevel, dependenciesByLevel] of dependencyMap) {
+        let addedDependenciesAtLevel = addedDependencies[comparisonLevel];
+        if (!addedDependenciesAtLevel) {
+          addedDependenciesAtLevel = {};
+          addedDependencies[comparisonLevel] = addedDependenciesAtLevel;
+        }
+        const criticalPathOnLevel = criticalPaths ? criticalPaths.get(comparisonLevel) : void 0;
+        for (const [taskId, dependencies] of dependenciesByLevel) {
+          let addedDependenciesAtTask = addedDependenciesAtLevel[taskId];
+          if (!addedDependenciesAtTask) {
+            addedDependenciesAtTask = {};
+            addedDependenciesAtLevel[taskId] = addedDependenciesAtTask;
+          }
+          const targetTask = taskById.get(taskId);
+          if (!targetTask)
+            continue;
+          const criticalPathForTask = criticalPathOnLevel ? criticalPathOnLevel.dependencies.get(taskId) : void 0;
+          dependencies.filter(({ source }) => {
+            if (addedDependenciesAtTask[source.id])
+              return false;
+            if (!visibleTasksMirror[source.id])
+              return false;
+            return true;
+          }).forEach(
+            ({
+              containerHeight,
+              containerY,
+              innerFromY,
+              innerToY,
+              ownTarget,
+              source,
+              sourceTarget
+            }) => {
+              if (containerY + containerHeight < renderedTop || containerY > renderedBottom) {
+                return;
+              }
+              addedDependenciesAtTask[source.id] = true;
+              const isCritical = criticalPathForTask ? criticalPathForTask.has(source.id) : false;
+              const { x1: fromX1, x2: fromX2 } = getTaskCoordinates2(source);
+              const { x1: targetX1, x2: targetX2 } = getTaskCoordinates2(targetTask);
+              const safeFromX1 = isNaN(fromX1) || !isFinite(fromX1) ? 0 : fromX1;
+              const safeFromX2 = isNaN(fromX2) || !isFinite(fromX2) ? safeFromX1 + 10 : fromX2;
+              const safeTargetX1 = isNaN(targetX1) || !isFinite(targetX1) ? 0 : targetX1;
+              const safeTargetX2 = isNaN(targetX2) || !isFinite(targetX2) ? safeTargetX1 + 10 : targetX2;
+              const cX = Math.min(safeFromX1, safeTargetX1) - DELTA_RELATION_WIDTH;
+              const cW = Math.max(safeFromX2, safeTargetX2) - cX + DELTA_RELATION_WIDTH;
+              const safeCX = isNaN(cX) || !isFinite(cX) ? 0 : cX;
+              const safeCW = isNaN(cW) || !isFinite(cW) ? 100 : Math.max(cW, 0);
+              arrowsRes.push(
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    x: Math.max(safeCX + (additionalLeftSpace || 0), 0),
+                    y: containerY,
+                    width: safeCW,
+                    height: containerHeight,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      Arrow,
+                      {
+                        distances,
+                        taskFrom: source,
+                        targetFrom: sourceTarget,
+                        fromX1: safeFromX1 - safeCX,
+                        fromX2: safeFromX2 - safeCX,
+                        fromY: innerFromY,
+                        taskTo: targetTask,
+                        targetTo: ownTarget,
+                        toX1: safeTargetX1 - safeCX,
+                        toX2: safeTargetX2 - safeCX,
+                        toY: innerToY,
+                        fullRowHeight,
+                        taskHeight,
+                        isCritical,
+                        rtl,
+                        onArrowDoubleClick
+                      }
+                    )
+                  },
+                  `Arrow from ${source.id} to ${taskId} on ${comparisonLevel}`
+                )
+              );
+            }
+          );
+        }
+      }
       return [tasksRes, arrowsRes, selectedTasksRes];
     }, [
       viewMode,
@@ -13877,12 +14034,10 @@
       );
       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: comparisonX,
+        x: cx1,
         y: y + taskHeight,
-        width: comparisonWidth,
+        width: Math.max(cx2 - cx1, 0),
         height: barComparisonTaskHeight
       };
     }
@@ -19076,7 +19231,8 @@
       todayLabel = "Today",
       dataDateLabel = "Data Date",
       showProgress = true,
-      progressColor
+      progressColor,
+      scrollToTaskId
     } = props;
     const ganttSVGRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
@@ -19384,6 +19540,44 @@
       },
       [mapTaskToCoordinates, setScrollXProgrammatically]
     );
+    const prevScrollToTaskIdRef = React.useRef(void 0);
+    React.useEffect(() => {
+      if (!scrollToTaskId || scrollToTaskId === prevScrollToTaskIdRef.current) {
+        return;
+      }
+      prevScrollToTaskIdRef.current = scrollToTaskId;
+      for (const [comparisonLevel, levelMap] of tasksMap) {
+        const task = levelMap.get(scrollToTaskId);
+        if (!task || task.type === "empty") {
+          continue;
+        }
+        const { x1 } = getTaskCoordinates(task, mapTaskToCoordinates);
+        setScrollXProgrammatically(Math.max(0, x1 - 100));
+        const rowIndexMap = taskToRowIndexMap.get(comparisonLevel);
+        if (rowIndexMap) {
+          const rowIndex = rowIndexMap.get(scrollToTaskId);
+          if (typeof rowIndex === "number") {
+            const targetScrollY = rowIndex * fullRowHeight - ganttHeight / 2 + fullRowHeight / 2;
+            setScrollYProgrammatically(
+              Math.max(0, Math.min(targetScrollY, ganttFullHeight - ganttHeight))
+            );
+          }
+        }
+        selectTask(scrollToTaskId);
+        break;
+      }
+    }, [
+      scrollToTaskId,
+      tasksMap,
+      mapTaskToCoordinates,
+      taskToRowIndexMap,
+      fullRowHeight,
+      ganttHeight,
+      ganttFullHeight,
+      setScrollXProgrammatically,
+      setScrollYProgrammatically,
+      selectTask
+    ]);
     const { contextMenu, handleCloseContextMenu, handleOpenContextMenu } = useContextMenu(wrapperRef, scrollToTask);
     const [ganttContextMenu, setGanttContextMenu] = React.useState({
       task: null,

package/dist/types/public-types.d.ts

@@ -368,6 +368,11 @@ export interface GanttProps {
      * Custom color for progress bars. If not provided, theme progress colors are used.
      */
     progressColor?: string;
+    /**
+     * When set (or changed), the gantt will scroll to reveal and select this task.
+     * Set to a task id to scroll both horizontally and vertically to that task.
+     */
+    scrollToTaskId?: TaskId;
 }
 export interface GanttTaskBarActions {
     allowMoveTaskBar?: (action: TaskBarMoveAction, task: RenderTask) => boolean;
@@ -397,6 +402,11 @@ export type Column = {
     width: number;
     title?: ReactNode;
     canResize?: boolean;
+    /**
+     * Pin column to the left or right side of the table.
+     * Pinned columns stay visible while scrolling horizontally.
+     */
+    pinned?: "left" | "right";
 };
 export type OnResizeColumn = (nextColumns: readonly Column[], columnIndex: number, deltaWidth: number) => void;
 export type ChangeAction = {

package/package.json

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