gantt-lib 0.121.0 → 0.121.2

package/dist/index.mjs

@@ -10701,12 +10701,38 @@ function areRangeBoundsEqual(left, right) {
   if (!left || !right) return false;
   return left.fromDateIndex === right.fromDateIndex && left.toDateIndex === right.toDateIndex && left.fromSubrowIndex === right.fromSubrowIndex && left.toSubrowIndex === right.toSubrowIndex;
 }
+function getRenderedDateWindow(dateRange, renderedDateIndices) {
+  if (dateRange.length === 0 || renderedDateIndices.length === 0) {
+    return {
+      startIndex: 0,
+      days: []
+    };
+  }
+  let startIndex = dateRange.length - 1;
+  let endIndex = 0;
+  for (const dateIndex of renderedDateIndices) {
+    if (dateIndex < 0 || dateIndex >= dateRange.length) continue;
+    startIndex = Math.min(startIndex, dateIndex);
+    endIndex = Math.max(endIndex, dateIndex);
+  }
+  if (startIndex > endIndex) {
+    return {
+      startIndex: 0,
+      days: []
+    };
+  }
+  return {
+    startIndex,
+    days: dateRange.slice(startIndex, endIndex + 1)
+  };
+}
 function PlanFactRowInner({
   task,
   rowIndex,
   dateRange,
   dateKeys,
   renderedDateIndices,
+  totalWidth,
   rowHeight,
   subrowHeight,
   dayWidth,
@@ -10749,8 +10775,8 @@ function PlanFactRowInner({
       ),
       style: {
         top: `${rowIndex * rowHeight}px`,
+        width: `${totalWidth}px`,
         height: `${rowHeight}px`,
-        gridTemplateColumns: `repeat(${dateRange.length}, ${dayWidth}px)`,
         ["--gantt-pf-today-left"]: todayDateIndex !== void 0 && todayDateIndex >= 0 ? `${todayDateIndex * dayWidth}px` : void 0
       },
       onClick: () => onTaskSelect?.(task.id),
@@ -10799,8 +10825,9 @@ function PlanFactRowInner({
                 isParent && "gantt-pf-cell-readonly"
               ),
               style: {
-                gridColumn: dateIndex + 1,
-                gridRow: kind === "plan" ? 1 : 2,
+                left: `${dateIndex * dayWidth}px`,
+                top: kind === "plan" ? 0 : `${subrowHeight}px`,
+                width: `${dayWidth}px`,
                 height: `${subrowHeight}px`
               },
               tabIndex: isParent ? -1 : 0,
@@ -10937,7 +10964,7 @@ function PlanFactRowInner({
 function arePlanFactRowsEqual(previous, next) {
   const previousRangeTouchesRow = doesRangeTouchRow(previous.renderedRangeBounds, previous.rowIndex);
   const nextRangeTouchesRow = doesRangeTouchRow(next.renderedRangeBounds, next.rowIndex);
-  return previous.task === next.task && previous.rowIndex === next.rowIndex && previous.dateRange === next.dateRange && previous.dateKeys === next.dateKeys && previous.renderedDateIndices === next.renderedDateIndices && previous.rowHeight === next.rowHeight && previous.subrowHeight === next.subrowHeight && previous.dayWidth === next.dayWidth && previous.plannedRange === next.plannedRange && previous.todayDateIndex === next.todayDateIndex && previous.isParent === next.isParent && previous.isHighlighted === next.isHighlighted && previous.selectedTaskId === previous.task.id === (next.selectedTaskId === next.task.id) && getCellSignatureForTask(previous.activeCell, previous.task.id) === getCellSignatureForTask(next.activeCell, next.task.id) && getEditingCellSignatureForTask(previous.editingCell, previous.task.id) === getEditingCellSignatureForTask(next.editingCell, next.task.id) && getRangeAnchorSignatureForTask(previous.selectedRange, previous.task.id) === getRangeAnchorSignatureForTask(next.selectedRange, next.task.id) && previousRangeTouchesRow === nextRangeTouchesRow && (!nextRangeTouchesRow || areRangeBoundsEqual(previous.renderedRangeBounds, next.renderedRangeBounds));
+  return previous.task === next.task && previous.rowIndex === next.rowIndex && previous.dateRange === next.dateRange && previous.dateKeys === next.dateKeys && previous.renderedDateIndices === next.renderedDateIndices && previous.totalWidth === next.totalWidth && previous.rowHeight === next.rowHeight && previous.subrowHeight === next.subrowHeight && previous.dayWidth === next.dayWidth && previous.plannedRange === next.plannedRange && previous.todayDateIndex === next.todayDateIndex && previous.isParent === next.isParent && previous.isHighlighted === next.isHighlighted && previous.selectedTaskId === previous.task.id === (next.selectedTaskId === next.task.id) && getCellSignatureForTask(previous.activeCell, previous.task.id) === getCellSignatureForTask(next.activeCell, next.task.id) && getEditingCellSignatureForTask(previous.editingCell, previous.task.id) === getEditingCellSignatureForTask(next.editingCell, next.task.id) && getRangeAnchorSignatureForTask(previous.selectedRange, previous.task.id) === getRangeAnchorSignatureForTask(next.selectedRange, next.task.id) && previousRangeTouchesRow === nextRangeTouchesRow && (!nextRangeTouchesRow || areRangeBoundsEqual(previous.renderedRangeBounds, next.renderedRangeBounds));
 }
 var PlanFactRow = React15.memo(PlanFactRowInner, arePlanFactRowsEqual);
 function PlanFactMatrix({
@@ -10989,6 +11016,10 @@ function PlanFactMatrix({
     return ids;
   }, [allTasks]);
   const dateKeys = useMemo12(() => dateRange.map(formatDateKey), [dateRange]);
+  const renderedDateWindow = useMemo12(
+    () => getRenderedDateWindow(dateRange, renderedDateIndices),
+    [dateRange, renderedDateIndices]
+  );
   const dateRangeStartMs = dateRange[0] ? getDateOnlyMs(dateRange[0]) : 0;
   const taskIndexById = useMemo12(() => {
     const indexById = /* @__PURE__ */ new Map();
@@ -11431,16 +11462,26 @@ function PlanFactMatrix({
       children: [
         /* @__PURE__ */ jsxs14("div", { className: "gantt-pf-header", style: { width: `${totalWidth}px`, height: `${headerHeight}px` }, children: [
           /* @__PURE__ */ jsx18(
-            TimeScaleHeader_default,
+            "div",
             {
-              days: dateRange,
-              dayWidth,
-              headerHeight: headerHeight - 1,
-              viewMode: "day",
-              isCustomWeekend
+              className: "gantt-pf-dateWindow",
+              style: {
+                left: `${renderedDateWindow.startIndex * dayWidth}px`,
+                width: `${renderedDateWindow.days.length * dayWidth}px`
+              },
+              children: /* @__PURE__ */ jsx18(
+                TimeScaleHeader_default,
+                {
+                  days: renderedDateWindow.days,
+                  dayWidth,
+                  headerHeight: headerHeight - 1,
+                  viewMode: "day",
+                  isCustomWeekend
+                }
+              )
             }
           ),
-          todayDateIndex !== void 0 && todayDateIndex >= 0 && /* @__PURE__ */ jsx18(
+          todayDateIndex !== void 0 && todayDateIndex >= renderedDateWindow.startIndex && todayDateIndex < renderedDateWindow.startIndex + renderedDateWindow.days.length && /* @__PURE__ */ jsx18(
             "span",
             {
               className: "gantt-pf-headerTodayLine",
@@ -11475,14 +11516,24 @@ function PlanFactMatrix({
             },
             children: [
               /* @__PURE__ */ jsx18(
-                GridBackground_default,
+                "div",
                 {
-                  dateRange,
-                  dayWidth,
-                  totalHeight: tasks.length * rowHeight,
-                  viewMode: "day",
-                  isCustomWeekend,
-                  showGridLines: false
+                  className: "gantt-pf-dateWindow gantt-pf-dateWindow-body",
+                  style: {
+                    left: `${renderedDateWindow.startIndex * dayWidth}px`,
+                    width: `${renderedDateWindow.days.length * dayWidth}px`
+                  },
+                  children: /* @__PURE__ */ jsx18(
+                    GridBackground_default,
+                    {
+                      dateRange: renderedDateWindow.days,
+                      dayWidth,
+                      totalHeight: tasks.length * rowHeight,
+                      viewMode: "day",
+                      isCustomWeekend,
+                      showGridLines: false
+                    }
+                  )
                 }
               ),
               renderedRowIndices.map((rowIndex) => {
@@ -11498,6 +11549,7 @@ function PlanFactMatrix({
                     dateRange,
                     dateKeys,
                     renderedDateIndices,
+                    totalWidth,
                     rowHeight,
                     subrowHeight,
                     dayWidth,
@@ -11965,6 +12017,8 @@ var SCROLL_TO_ROW_CONTEXT_ROWS = 2;
 var TASK_ROW_OVERSCAN = 8;
 var PLAN_FACT_COLUMN_OVERSCAN = 24;
 var PLAN_FACT_COLUMN_WINDOW_STEP = 14;
+var DEFAULT_INITIAL_VIEWPORT_HEIGHT = 768;
+var DEFAULT_PLAN_FACT_COLUMN_WINDOW = PLAN_FACT_COLUMN_OVERSCAN + PLAN_FACT_COLUMN_WINDOW_STEP;
 function getInitialScrollViewportHeight(containerHeight, headerHeight) {
   if (containerHeight === void 0) {
     return 0;
@@ -11972,18 +12026,15 @@ function getInitialScrollViewportHeight(containerHeight, headerHeight) {
   if (typeof containerHeight === "number") {
     return Math.max(0, containerHeight - headerHeight);
   }
-  if (typeof window === "undefined") {
-    return 0;
-  }
   const dynamicViewportMatch = containerHeight.match(/^([\d.]+)dvh$/);
   if (dynamicViewportMatch) {
     const ratio = Number(dynamicViewportMatch[1]);
-    return Number.isFinite(ratio) ? Math.max(0, window.innerHeight * (ratio / 100) - headerHeight) : 0;
+    return Number.isFinite(ratio) ? Math.max(0, DEFAULT_INITIAL_VIEWPORT_HEIGHT * (ratio / 100) - headerHeight) : 0;
   }
   const viewportMatch = containerHeight.match(/^([\d.]+)vh$/);
   if (viewportMatch) {
     const ratio = Number(viewportMatch[1]);
-    return Number.isFinite(ratio) ? Math.max(0, window.innerHeight * (ratio / 100) - headerHeight) : 0;
+    return Number.isFinite(ratio) ? Math.max(0, DEFAULT_INITIAL_VIEWPORT_HEIGHT * (ratio / 100) - headerHeight) : 0;
   }
   const pixelMatch = containerHeight.match(/^([\d.]+)px$/);
   if (pixelMatch) {
@@ -12180,7 +12231,7 @@ function TaskGanttChartInner(props, ref) {
     viewportHeight: getInitialScrollViewportHeight(containerHeight, headerHeight + 1)
   }));
   const [forceFullRenderForPrint, setForceFullRenderForPrint] = useState11(false);
-  const [planFactDateWindow, setPlanFactDateWindow] = useState11(null);
+  const [planFactDateWindow, setPlanFactDateWindow] = useState11({ start: 0, end: 0 });
   const [selectedChip, setSelectedChip] = useState11(null);
   const [activeTimelineTooltip, setActiveTimelineTooltip] = useState11(null);
   const [internalCollapsedParentIds, setInternalCollapsedParentIds] = useState11(/* @__PURE__ */ new Set());
@@ -12331,7 +12382,7 @@ function TaskGanttChartInner(props, ref) {
       );
       setPlanFactDateWindow((previous) => {
         if (!isPlanFactMode || dateRange.length === 0 || nextViewportWidth <= 0) {
-          return previous === null ? previous : null;
+          return previous;
         }
         const firstVisibleColumn = Math.max(0, Math.floor(nextChartScrollLeft / dayWidth));
         const visibleColumnCount = Math.max(1, Math.ceil(nextViewportWidth / dayWidth));
@@ -12621,12 +12672,13 @@ function TaskGanttChartInner(props, ref) {
     if (forceFullRenderForPrint) {
       return void 0;
     }
-    if (!isPlanFactMode || dateRange.length === 0 || !planFactDateWindow) {
+    if (!isPlanFactMode || dateRange.length === 0) {
       return void 0;
     }
+    const window2 = planFactDateWindow;
     return Array.from(
-      { length: planFactDateWindow.end - planFactDateWindow.start + 1 },
-      (_, index) => planFactDateWindow.start + index
+      { length: window2.end - window2.start + 1 },
+      (_, index) => window2.start + index
     );
   }, [dateRange.length, forceFullRenderForPrint, isPlanFactMode, planFactDateWindow]);
   const renderedChartTasks = useMemo13(