gantt-task-react-v 1.3.5 → 1.4.0

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 })
               },
@@ -13168,47 +13232,40 @@ const TaskGanttContentInner = (props) => {
         )
       );
       if (task.comparisonDates && comparisonDates) {
-        console.log(`Comparison bar for task ${task.id}:`, {
-          originalCoords: comparisonDates,
-          taskComparisonDates: task.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) {
-          tasksRes.push(
-            /* @__PURE__ */ jsx(
-              "svg",
-              {
-                id: task.id + "_comparison",
-                className: "TaskItemWrapperComparison",
-                x: Math.max(safeComparisonX + (additionalLeftSpace || 0), 0),
-                y: safeLevelY + taskHeight + 2,
-                width: safeComparisonWidth,
-                height: safeComparisonHeight,
-                children: /* @__PURE__ */ jsx(
-                  BarComparison,
-                  {
-                    inProgress: !task.comparisonDates.end,
-                    isPlan: task.comparisonDates.start.getTime() >= task.start.getTime() && !!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.end.getTime() || task.comparisonDates.start.getTime() <= task.start.getTime() && !!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.start.getTime(),
-                    isWarning: !!task.comparisonDates.end && task.comparisonDates.end.getTime() >= task.end.getTime(),
-                    isCritical: task.comparisonDates.start.getTime() > task.start.getTime(),
-                    barCornerRadius: distances.barCornerRadius,
-                    height: safeComparisonHeight,
-                    width: safeComparisonWidth,
-                    borderHeight: distances.barComparisonTaskBorderHeight,
-                    yOffset: distances.barComparisonTaskYOffset,
-                    task,
-                    onTooltipTask
-                  }
-                )
-              },
-              key2 + "_comparison"
-            )
-          );
-        }
+        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",
+            {
+              id: task.id + "_comparison",
+              className: "TaskItemWrapperComparison",
+              x: Math.max(safeComparisonX + (additionalLeftSpace || 0), 0),
+              y: safeComparisonY,
+              width: safeComparisonWidth,
+              height: safeComparisonHeight * 2,
+              children: /* @__PURE__ */ jsx(
+                BarComparison,
+                {
+                  inProgress: !task.comparisonDates.end,
+                  isPlan: task.comparisonDates.start.getTime() >= task.start.getTime() && !!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.end.getTime() || task.comparisonDates.start.getTime() <= task.start.getTime() && !!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.start.getTime(),
+                  isWarning: !!task.comparisonDates.end && task.comparisonDates.end.getTime() >= task.end.getTime(),
+                  isCritical: task.comparisonDates.start.getTime() > task.start.getTime(),
+                  barCornerRadius: distances.barCornerRadius,
+                  height: safeComparisonHeight,
+                  width: safeComparisonWidth,
+                  borderHeight: distances.barComparisonTaskBorderHeight,
+                  yOffset: distances.barComparisonTaskYOffset,
+                  task,
+                  onTooltipTask
+                }
+              )
+            },
+            key2 + "_comparison"
+          )
+        );
       }
       const addedDependenciesAtLevel = addedDependencies[comparisonLevel] || {};
       if (!addedDependencies[comparisonLevel]) {
@@ -13867,12 +13924,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
     };
   }
@@ -19066,7 +19121,8 @@ const Gantt = (props) => {
     todayLabel = "Today",
     dataDateLabel = "Data Date",
     showProgress = true,
-    progressColor
+    progressColor,
+    scrollToTaskId
   } = props;
   const ganttSVGRef = useRef(null);
   const wrapperRef = useRef(null);
@@ -19374,6 +19430,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 })
                 },
@@ -13185,47 +13249,40 @@
           )
         );
         if (task.comparisonDates && comparisonDates) {
-          console.log(`Comparison bar for task ${task.id}:`, {
-            originalCoords: comparisonDates,
-            taskComparisonDates: task.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) {
-            tasksRes.push(
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  id: task.id + "_comparison",
-                  className: "TaskItemWrapperComparison",
-                  x: Math.max(safeComparisonX + (additionalLeftSpace || 0), 0),
-                  y: safeLevelY + taskHeight + 2,
-                  width: safeComparisonWidth,
-                  height: safeComparisonHeight,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    BarComparison,
-                    {
-                      inProgress: !task.comparisonDates.end,
-                      isPlan: task.comparisonDates.start.getTime() >= task.start.getTime() && !!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.end.getTime() || task.comparisonDates.start.getTime() <= task.start.getTime() && !!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.start.getTime(),
-                      isWarning: !!task.comparisonDates.end && task.comparisonDates.end.getTime() >= task.end.getTime(),
-                      isCritical: task.comparisonDates.start.getTime() > task.start.getTime(),
-                      barCornerRadius: distances.barCornerRadius,
-                      height: safeComparisonHeight,
-                      width: safeComparisonWidth,
-                      borderHeight: distances.barComparisonTaskBorderHeight,
-                      yOffset: distances.barComparisonTaskYOffset,
-                      task,
-                      onTooltipTask
-                    }
-                  )
-                },
-                key2 + "_comparison"
-              )
-            );
-          }
+          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",
+              {
+                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,
+                  {
+                    inProgress: !task.comparisonDates.end,
+                    isPlan: task.comparisonDates.start.getTime() >= task.start.getTime() && !!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.end.getTime() || task.comparisonDates.start.getTime() <= task.start.getTime() && !!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.start.getTime(),
+                    isWarning: !!task.comparisonDates.end && task.comparisonDates.end.getTime() >= task.end.getTime(),
+                    isCritical: task.comparisonDates.start.getTime() > task.start.getTime(),
+                    barCornerRadius: distances.barCornerRadius,
+                    height: safeComparisonHeight,
+                    width: safeComparisonWidth,
+                    borderHeight: distances.barComparisonTaskBorderHeight,
+                    yOffset: distances.barComparisonTaskYOffset,
+                    task,
+                    onTooltipTask
+                  }
+                )
+              },
+              key2 + "_comparison"
+            )
+          );
         }
         const addedDependenciesAtLevel = addedDependencies[comparisonLevel] || {};
         if (!addedDependencies[comparisonLevel]) {
@@ -13884,12 +13941,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
       };
     }
@@ -19083,7 +19138,8 @@
       todayLabel = "Today",
       dataDateLabel = "Data Date",
       showProgress = true,
-      progressColor
+      progressColor,
+      scrollToTaskId
     } = props;
     const ganttSVGRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
@@ -19391,6 +19447,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.5",
+  "version": "1.4.0",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",