gantt-task-react-v 1.3.0 → 1.3.2

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

@@ -17486,6 +17486,308 @@ const useHorizontalScrollbars = () => {
     scrollToRightStep
   ];
 };
+const usePerformanceMonitor = (enabled = true) => {
+  const metricsRef = useRef([]);
+  const benchmarksRef = useRef(/* @__PURE__ */ new Map());
+  const frameTimesRef = useRef([]);
+  const lastFrameTimeRef = useRef(performance.now());
+  const updateFPS = useCallback(() => {
+    if (!enabled)
+      return;
+    const now = performance.now();
+    const deltaTime = now - lastFrameTimeRef.current;
+    lastFrameTimeRef.current = now;
+    frameTimesRef.current.push(deltaTime);
+    if (frameTimesRef.current.length > 60) {
+      frameTimesRef.current.shift();
+    }
+  }, [enabled]);
+  const getFPS = useCallback(() => {
+    if (frameTimesRef.current.length === 0)
+      return 0;
+    const avgFrameTime = frameTimesRef.current.reduce((sum, time) => sum + time, 0) / frameTimesRef.current.length;
+    return Math.round(1e3 / avgFrameTime);
+  }, []);
+  const startMeasurement = useCallback(
+    (name, metadata) => {
+      if (!enabled)
+        return;
+      performance.mark(`${name}-start`);
+      benchmarksRef.current.set(name, {
+        name,
+        startTime: performance.now(),
+        metadata
+      });
+    },
+    [enabled]
+  );
+  const endMeasurement = useCallback(
+    (name) => {
+      if (!enabled)
+        return 0;
+      const benchmark = benchmarksRef.current.get(name);
+      if (!benchmark) {
+        console.warn(`No benchmark found for ${name}`);
+        return 0;
+      }
+      const endTime = performance.now();
+      const duration = endTime - benchmark.startTime;
+      performance.mark(`${name}-end`);
+      performance.measure(name, `${name}-start`, `${name}-end`);
+      benchmark.endTime = endTime;
+      benchmark.duration = duration;
+      return duration;
+    },
+    [enabled]
+  );
+  const measureFunction = useCallback(
+    (name, fn, metadata) => {
+      return (...args) => {
+        if (!enabled)
+          return fn(...args);
+        startMeasurement(name, metadata);
+        try {
+          const result = fn(...args);
+          return result;
+        } finally {
+          endMeasurement(name);
+        }
+      };
+    },
+    [enabled, startMeasurement, endMeasurement]
+  );
+  const measureAsyncFunction = useCallback(
+    (name, fn, metadata) => {
+      return async (...args) => {
+        if (!enabled)
+          return fn(...args);
+        startMeasurement(name, metadata);
+        try {
+          const result = await fn(...args);
+          return result;
+        } finally {
+          endMeasurement(name);
+        }
+      };
+    },
+    [enabled, startMeasurement, endMeasurement]
+  );
+  const getPerformanceReport = useCallback(() => {
+    const entries = performance.getEntriesByType(
+      "measure"
+    );
+    const report = {};
+    entries.forEach((entry) => {
+      if (!report[entry.name]) {
+        report[entry.name] = {
+          count: 0,
+          totalTime: 0,
+          avgTime: 0,
+          maxTime: 0,
+          minTime: Infinity
+        };
+      }
+      const stat = report[entry.name];
+      stat.count++;
+      stat.totalTime += entry.duration;
+      stat.maxTime = Math.max(stat.maxTime, entry.duration);
+      stat.minTime = Math.min(stat.minTime, entry.duration);
+      stat.avgTime = stat.totalTime / stat.count;
+    });
+    return {
+      measurements: report,
+      fps: getFPS(),
+      currentMetrics: metricsRef.current[metricsRef.current.length - 1],
+      allMetrics: [...metricsRef.current]
+    };
+  }, [getFPS]);
+  const addMetrics = useCallback(
+    (metrics) => {
+      if (!enabled)
+        return;
+      const fullMetrics = {
+        ...metrics,
+        timestamp: Date.now()
+      };
+      metricsRef.current.push(fullMetrics);
+      if (metricsRef.current.length > 100) {
+        metricsRef.current.shift();
+      }
+    },
+    [enabled]
+  );
+  const clearMeasurements = useCallback(() => {
+    performance.clearMarks();
+    performance.clearMeasures();
+    benchmarksRef.current.clear();
+    metricsRef.current.length = 0;
+    frameTimesRef.current.length = 0;
+  }, []);
+  const getMemoryUsage = useCallback(() => {
+    if ("memory" in performance) {
+      const memory = performance.memory;
+      return memory ? memory.usedJSHeapSize : 0;
+    }
+    return 0;
+  }, []);
+  return {
+    startMeasurement,
+    endMeasurement,
+    measureFunction,
+    measureAsyncFunction,
+    getPerformanceReport,
+    addMetrics,
+    clearMeasurements,
+    updateFPS,
+    getFPS,
+    getMemoryUsage,
+    enabled
+  };
+};
+const useAdaptivePerformance = (thresholds) => {
+  const { getFPS, getPerformanceReport } = usePerformanceMonitor();
+  const performanceLevelRef = useRef("high");
+  const updatePerformanceLevel = useCallback(() => {
+    var _a;
+    const fps = getFPS();
+    const report = getPerformanceReport();
+    const renderTime = ((_a = report.measurements["render"]) == null ? void 0 : _a.avgTime) || 0;
+    if (fps < thresholds.fpsThreshold * 0.5 || renderTime > thresholds.renderTimeThreshold * 2) {
+      performanceLevelRef.current = "low";
+    } else if (fps < thresholds.fpsThreshold || renderTime > thresholds.renderTimeThreshold) {
+      performanceLevelRef.current = "medium";
+    } else {
+      performanceLevelRef.current = "high";
+    }
+    return performanceLevelRef.current;
+  }, [getFPS, getPerformanceReport, thresholds]);
+  const getQualitySettings = useCallback(() => {
+    const level = performanceLevelRef.current;
+    switch (level) {
+      case "low":
+        return {
+          enableAnimations: false,
+          renderQuality: "low",
+          maxVisibleTasks: 100,
+          updateFrequency: 500
+          // ms
+        };
+      case "medium":
+        return {
+          enableAnimations: true,
+          renderQuality: "medium",
+          maxVisibleTasks: 500,
+          updateFrequency: 100
+        };
+      case "high":
+      default:
+        return {
+          enableAnimations: true,
+          renderQuality: "high",
+          maxVisibleTasks: 1e3,
+          updateFrequency: 16
+          // 60fps
+        };
+    }
+  }, []);
+  return {
+    performanceLevel: performanceLevelRef.current,
+    updatePerformanceLevel,
+    getQualitySettings
+  };
+};
+const useIncrementalCoordinates = (visibleTasks, visibleTasksMirror, taskToRowIndexMap, startDate, viewMode, rtl, fullRowHeight, taskHeight, taskYOffset, distances, svgWidth, renderedRowIndexes, renderedColumnIndexes) => {
+  const cacheRef = useRef({
+    coordinates: /* @__PURE__ */ new Map(),
+    lastUpdateParams: null
+  });
+  return useMemo(() => {
+    const cache = cacheRef.current;
+    const currentParams = {
+      startDate,
+      viewMode,
+      rtl,
+      fullRowHeight,
+      taskHeight,
+      taskYOffset,
+      svgWidth,
+      distances
+    };
+    const needsFullRecalc = !cache.lastUpdateParams || cache.lastUpdateParams.startDate.getTime() !== startDate.getTime() || cache.lastUpdateParams.viewMode !== viewMode || cache.lastUpdateParams.rtl !== rtl || cache.lastUpdateParams.fullRowHeight !== fullRowHeight || cache.lastUpdateParams.taskHeight !== taskHeight || cache.lastUpdateParams.taskYOffset !== taskYOffset || cache.lastUpdateParams.svgWidth !== svgWidth || JSON.stringify(cache.lastUpdateParams.distances) !== JSON.stringify(distances);
+    if (needsFullRecalc) {
+      cache.coordinates.clear();
+    }
+    const tasksToCalculate = /* @__PURE__ */ new Set();
+    if (renderedRowIndexes && renderedColumnIndexes) {
+      const [startRow, endRow] = renderedRowIndexes;
+      const rowBuffer = Math.max(5, Math.ceil((endRow - startRow) * 0.5));
+      const bufferedStartRow = Math.max(0, startRow - rowBuffer);
+      const bufferedEndRow = endRow + rowBuffer;
+      visibleTasks.forEach((task, index2) => {
+        if (task.type === "empty" || !visibleTasksMirror[task.id])
+          return;
+        if (index2 >= bufferedStartRow && index2 <= bufferedEndRow) {
+          tasksToCalculate.add(task.id);
+        }
+      });
+    } else {
+      visibleTasks.forEach((task) => {
+        if (task.type !== "empty" && visibleTasksMirror[task.id]) {
+          tasksToCalculate.add(task.id);
+        }
+      });
+    }
+    if (!needsFullRecalc) {
+      for (const [taskId] of cache.coordinates) {
+        if (!tasksToCalculate.has(taskId)) {
+          cache.coordinates.delete(taskId);
+        }
+      }
+    }
+    const res = /* @__PURE__ */ new Map();
+    visibleTasks.forEach((task) => {
+      if (task.type === "empty" || !tasksToCalculate.has(task.id))
+        return;
+      const { id, comparisonLevel = 1 } = task;
+      const cacheKey = `${id}_${comparisonLevel}`;
+      let taskCoordinates = cache.coordinates.get(cacheKey);
+      if (!taskCoordinates || needsFullRecalc) {
+        taskCoordinates = countTaskCoordinates(
+          task,
+          taskToRowIndexMap,
+          startDate,
+          viewMode,
+          rtl,
+          fullRowHeight,
+          taskHeight,
+          taskYOffset,
+          distances,
+          svgWidth
+        );
+        cache.coordinates.set(cacheKey, taskCoordinates);
+      }
+      const resByLevel = res.get(comparisonLevel) || /* @__PURE__ */ new Map();
+      resByLevel.set(id, taskCoordinates);
+      res.set(comparisonLevel, resByLevel);
+    });
+    cache.lastUpdateParams = currentParams;
+    return res;
+  }, [
+    visibleTasks,
+    visibleTasksMirror,
+    taskToRowIndexMap,
+    startDate,
+    viewMode,
+    rtl,
+    fullRowHeight,
+    taskHeight,
+    taskYOffset,
+    distances,
+    svgWidth,
+    renderedRowIndexes,
+    renderedColumnIndexes
+  ]);
+};
 const fillMinAndMaxChildsMap = (resOnLevel, task, childTasksOnLevel) => {
   const childs = childTasksOnLevel.get(task.id);
   if (!childs || childs.length === 0) {
@@ -19105,6 +19407,11 @@ const Gantt = (props) => {
     () => getChildsAndRoots(sortedTasks, null),
     [sortedTasks]
   );
+  const adaptiveSettings = useAdaptivePerformance({
+    fpsThreshold: 30,
+    renderTimeThreshold: 16
+    // 60fps = 16ms per frame
+  });
   const minAndMaxChildsMap = useMemo(
     () => getMinAndMaxChildsMap(rootTasksMap, childTasksMap),
     [rootTasksMap, childTasksMap]
@@ -19278,7 +19585,7 @@ const Gantt = (props) => {
       svgWidth
     ]
   );
-  const mapTaskToCoordinates = useMemo(
+  const originalMapTaskToCoordinates = useMemo(
     () => getMapTaskToCoordinates(
       sortedTasks,
       visibleTasksMirror,
@@ -19306,6 +19613,24 @@ const Gantt = (props) => {
       visibleTasksMirror
     ]
   );
+  const optimizedMapTaskToCoordinates = useIncrementalCoordinates(
+    visibleTasks,
+    visibleTasksMirror,
+    taskToRowIndexMap,
+    startDate,
+    viewMode,
+    rtl,
+    fullRowHeight,
+    taskHeight,
+    taskYOffset,
+    distances,
+    svgWidth,
+    null,
+    // renderedRowIndexes - can be integrated later with virtualization
+    null
+    // renderedColumnIndexes - can be integrated later with virtualization
+  );
+  const mapTaskToCoordinates = adaptiveSettings.performanceLevel === "high" ? optimizedMapTaskToCoordinates : originalMapTaskToCoordinates;
   const scrollToTask = useCallback(
     (task) => {
       const { x1 } = getTaskCoordinates(task, mapTaskToCoordinates);

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

@@ -17503,6 +17503,308 @@
       scrollToRightStep
     ];
   };
+  const usePerformanceMonitor = (enabled = true) => {
+    const metricsRef = React.useRef([]);
+    const benchmarksRef = React.useRef(/* @__PURE__ */ new Map());
+    const frameTimesRef = React.useRef([]);
+    const lastFrameTimeRef = React.useRef(performance.now());
+    const updateFPS = React.useCallback(() => {
+      if (!enabled)
+        return;
+      const now = performance.now();
+      const deltaTime = now - lastFrameTimeRef.current;
+      lastFrameTimeRef.current = now;
+      frameTimesRef.current.push(deltaTime);
+      if (frameTimesRef.current.length > 60) {
+        frameTimesRef.current.shift();
+      }
+    }, [enabled]);
+    const getFPS = React.useCallback(() => {
+      if (frameTimesRef.current.length === 0)
+        return 0;
+      const avgFrameTime = frameTimesRef.current.reduce((sum, time) => sum + time, 0) / frameTimesRef.current.length;
+      return Math.round(1e3 / avgFrameTime);
+    }, []);
+    const startMeasurement = React.useCallback(
+      (name, metadata) => {
+        if (!enabled)
+          return;
+        performance.mark(`${name}-start`);
+        benchmarksRef.current.set(name, {
+          name,
+          startTime: performance.now(),
+          metadata
+        });
+      },
+      [enabled]
+    );
+    const endMeasurement = React.useCallback(
+      (name) => {
+        if (!enabled)
+          return 0;
+        const benchmark = benchmarksRef.current.get(name);
+        if (!benchmark) {
+          console.warn(`No benchmark found for ${name}`);
+          return 0;
+        }
+        const endTime = performance.now();
+        const duration = endTime - benchmark.startTime;
+        performance.mark(`${name}-end`);
+        performance.measure(name, `${name}-start`, `${name}-end`);
+        benchmark.endTime = endTime;
+        benchmark.duration = duration;
+        return duration;
+      },
+      [enabled]
+    );
+    const measureFunction = React.useCallback(
+      (name, fn, metadata) => {
+        return (...args) => {
+          if (!enabled)
+            return fn(...args);
+          startMeasurement(name, metadata);
+          try {
+            const result = fn(...args);
+            return result;
+          } finally {
+            endMeasurement(name);
+          }
+        };
+      },
+      [enabled, startMeasurement, endMeasurement]
+    );
+    const measureAsyncFunction = React.useCallback(
+      (name, fn, metadata) => {
+        return async (...args) => {
+          if (!enabled)
+            return fn(...args);
+          startMeasurement(name, metadata);
+          try {
+            const result = await fn(...args);
+            return result;
+          } finally {
+            endMeasurement(name);
+          }
+        };
+      },
+      [enabled, startMeasurement, endMeasurement]
+    );
+    const getPerformanceReport = React.useCallback(() => {
+      const entries = performance.getEntriesByType(
+        "measure"
+      );
+      const report = {};
+      entries.forEach((entry) => {
+        if (!report[entry.name]) {
+          report[entry.name] = {
+            count: 0,
+            totalTime: 0,
+            avgTime: 0,
+            maxTime: 0,
+            minTime: Infinity
+          };
+        }
+        const stat = report[entry.name];
+        stat.count++;
+        stat.totalTime += entry.duration;
+        stat.maxTime = Math.max(stat.maxTime, entry.duration);
+        stat.minTime = Math.min(stat.minTime, entry.duration);
+        stat.avgTime = stat.totalTime / stat.count;
+      });
+      return {
+        measurements: report,
+        fps: getFPS(),
+        currentMetrics: metricsRef.current[metricsRef.current.length - 1],
+        allMetrics: [...metricsRef.current]
+      };
+    }, [getFPS]);
+    const addMetrics = React.useCallback(
+      (metrics) => {
+        if (!enabled)
+          return;
+        const fullMetrics = {
+          ...metrics,
+          timestamp: Date.now()
+        };
+        metricsRef.current.push(fullMetrics);
+        if (metricsRef.current.length > 100) {
+          metricsRef.current.shift();
+        }
+      },
+      [enabled]
+    );
+    const clearMeasurements = React.useCallback(() => {
+      performance.clearMarks();
+      performance.clearMeasures();
+      benchmarksRef.current.clear();
+      metricsRef.current.length = 0;
+      frameTimesRef.current.length = 0;
+    }, []);
+    const getMemoryUsage = React.useCallback(() => {
+      if ("memory" in performance) {
+        const memory = performance.memory;
+        return memory ? memory.usedJSHeapSize : 0;
+      }
+      return 0;
+    }, []);
+    return {
+      startMeasurement,
+      endMeasurement,
+      measureFunction,
+      measureAsyncFunction,
+      getPerformanceReport,
+      addMetrics,
+      clearMeasurements,
+      updateFPS,
+      getFPS,
+      getMemoryUsage,
+      enabled
+    };
+  };
+  const useAdaptivePerformance = (thresholds) => {
+    const { getFPS, getPerformanceReport } = usePerformanceMonitor();
+    const performanceLevelRef = React.useRef("high");
+    const updatePerformanceLevel = React.useCallback(() => {
+      var _a;
+      const fps = getFPS();
+      const report = getPerformanceReport();
+      const renderTime = ((_a = report.measurements["render"]) == null ? void 0 : _a.avgTime) || 0;
+      if (fps < thresholds.fpsThreshold * 0.5 || renderTime > thresholds.renderTimeThreshold * 2) {
+        performanceLevelRef.current = "low";
+      } else if (fps < thresholds.fpsThreshold || renderTime > thresholds.renderTimeThreshold) {
+        performanceLevelRef.current = "medium";
+      } else {
+        performanceLevelRef.current = "high";
+      }
+      return performanceLevelRef.current;
+    }, [getFPS, getPerformanceReport, thresholds]);
+    const getQualitySettings = React.useCallback(() => {
+      const level = performanceLevelRef.current;
+      switch (level) {
+        case "low":
+          return {
+            enableAnimations: false,
+            renderQuality: "low",
+            maxVisibleTasks: 100,
+            updateFrequency: 500
+            // ms
+          };
+        case "medium":
+          return {
+            enableAnimations: true,
+            renderQuality: "medium",
+            maxVisibleTasks: 500,
+            updateFrequency: 100
+          };
+        case "high":
+        default:
+          return {
+            enableAnimations: true,
+            renderQuality: "high",
+            maxVisibleTasks: 1e3,
+            updateFrequency: 16
+            // 60fps
+          };
+      }
+    }, []);
+    return {
+      performanceLevel: performanceLevelRef.current,
+      updatePerformanceLevel,
+      getQualitySettings
+    };
+  };
+  const useIncrementalCoordinates = (visibleTasks, visibleTasksMirror, taskToRowIndexMap, startDate, viewMode, rtl, fullRowHeight, taskHeight, taskYOffset, distances, svgWidth, renderedRowIndexes, renderedColumnIndexes) => {
+    const cacheRef = React.useRef({
+      coordinates: /* @__PURE__ */ new Map(),
+      lastUpdateParams: null
+    });
+    return React.useMemo(() => {
+      const cache = cacheRef.current;
+      const currentParams = {
+        startDate,
+        viewMode,
+        rtl,
+        fullRowHeight,
+        taskHeight,
+        taskYOffset,
+        svgWidth,
+        distances
+      };
+      const needsFullRecalc = !cache.lastUpdateParams || cache.lastUpdateParams.startDate.getTime() !== startDate.getTime() || cache.lastUpdateParams.viewMode !== viewMode || cache.lastUpdateParams.rtl !== rtl || cache.lastUpdateParams.fullRowHeight !== fullRowHeight || cache.lastUpdateParams.taskHeight !== taskHeight || cache.lastUpdateParams.taskYOffset !== taskYOffset || cache.lastUpdateParams.svgWidth !== svgWidth || JSON.stringify(cache.lastUpdateParams.distances) !== JSON.stringify(distances);
+      if (needsFullRecalc) {
+        cache.coordinates.clear();
+      }
+      const tasksToCalculate = /* @__PURE__ */ new Set();
+      if (renderedRowIndexes && renderedColumnIndexes) {
+        const [startRow, endRow] = renderedRowIndexes;
+        const rowBuffer = Math.max(5, Math.ceil((endRow - startRow) * 0.5));
+        const bufferedStartRow = Math.max(0, startRow - rowBuffer);
+        const bufferedEndRow = endRow + rowBuffer;
+        visibleTasks.forEach((task, index2) => {
+          if (task.type === "empty" || !visibleTasksMirror[task.id])
+            return;
+          if (index2 >= bufferedStartRow && index2 <= bufferedEndRow) {
+            tasksToCalculate.add(task.id);
+          }
+        });
+      } else {
+        visibleTasks.forEach((task) => {
+          if (task.type !== "empty" && visibleTasksMirror[task.id]) {
+            tasksToCalculate.add(task.id);
+          }
+        });
+      }
+      if (!needsFullRecalc) {
+        for (const [taskId] of cache.coordinates) {
+          if (!tasksToCalculate.has(taskId)) {
+            cache.coordinates.delete(taskId);
+          }
+        }
+      }
+      const res = /* @__PURE__ */ new Map();
+      visibleTasks.forEach((task) => {
+        if (task.type === "empty" || !tasksToCalculate.has(task.id))
+          return;
+        const { id, comparisonLevel = 1 } = task;
+        const cacheKey = `${id}_${comparisonLevel}`;
+        let taskCoordinates = cache.coordinates.get(cacheKey);
+        if (!taskCoordinates || needsFullRecalc) {
+          taskCoordinates = countTaskCoordinates(
+            task,
+            taskToRowIndexMap,
+            startDate,
+            viewMode,
+            rtl,
+            fullRowHeight,
+            taskHeight,
+            taskYOffset,
+            distances,
+            svgWidth
+          );
+          cache.coordinates.set(cacheKey, taskCoordinates);
+        }
+        const resByLevel = res.get(comparisonLevel) || /* @__PURE__ */ new Map();
+        resByLevel.set(id, taskCoordinates);
+        res.set(comparisonLevel, resByLevel);
+      });
+      cache.lastUpdateParams = currentParams;
+      return res;
+    }, [
+      visibleTasks,
+      visibleTasksMirror,
+      taskToRowIndexMap,
+      startDate,
+      viewMode,
+      rtl,
+      fullRowHeight,
+      taskHeight,
+      taskYOffset,
+      distances,
+      svgWidth,
+      renderedRowIndexes,
+      renderedColumnIndexes
+    ]);
+  };
   const fillMinAndMaxChildsMap = (resOnLevel, task, childTasksOnLevel) => {
     const childs = childTasksOnLevel.get(task.id);
     if (!childs || childs.length === 0) {
@@ -19122,6 +19424,11 @@
       () => getChildsAndRoots(sortedTasks, null),
       [sortedTasks]
     );
+    const adaptiveSettings = useAdaptivePerformance({
+      fpsThreshold: 30,
+      renderTimeThreshold: 16
+      // 60fps = 16ms per frame
+    });
     const minAndMaxChildsMap = React.useMemo(
       () => getMinAndMaxChildsMap(rootTasksMap, childTasksMap),
       [rootTasksMap, childTasksMap]
@@ -19295,7 +19602,7 @@
         svgWidth
       ]
     );
-    const mapTaskToCoordinates = React.useMemo(
+    const originalMapTaskToCoordinates = React.useMemo(
       () => getMapTaskToCoordinates(
         sortedTasks,
         visibleTasksMirror,
@@ -19323,6 +19630,24 @@
         visibleTasksMirror
       ]
     );
+    const optimizedMapTaskToCoordinates = useIncrementalCoordinates(
+      visibleTasks,
+      visibleTasksMirror,
+      taskToRowIndexMap,
+      startDate,
+      viewMode,
+      rtl,
+      fullRowHeight,
+      taskHeight,
+      taskYOffset,
+      distances,
+      svgWidth,
+      null,
+      // renderedRowIndexes - can be integrated later with virtualization
+      null
+      // renderedColumnIndexes - can be integrated later with virtualization
+    );
+    const mapTaskToCoordinates = adaptiveSettings.performanceLevel === "high" ? optimizedMapTaskToCoordinates : originalMapTaskToCoordinates;
     const scrollToTask = React.useCallback(
       (task) => {
         const { x1 } = getTaskCoordinates(task, mapTaskToCoordinates);

package/dist/helpers/use-incremental-coordinates.d.ts

@@ -0,0 +1,17 @@
+import { Distances, MapTaskToCoordinates, TaskCoordinates, RenderTask, TaskToRowIndexMap, ViewMode } from "../types";
+import type { OptimizedListParams } from "./use-optimized-list";
+/**
+ * Optimized hook for calculating task coordinates incrementally
+ * Only recalculates coordinates for visible tasks and caches results
+ */
+export declare const useIncrementalCoordinates: (visibleTasks: readonly RenderTask[], visibleTasksMirror: Readonly<Record<string, true>>, taskToRowIndexMap: TaskToRowIndexMap, startDate: Date, viewMode: ViewMode, rtl: boolean, fullRowHeight: number, taskHeight: number, taskYOffset: number, distances: Distances, svgWidth: number, renderedRowIndexes: OptimizedListParams | null, renderedColumnIndexes: OptimizedListParams | null) => MapTaskToCoordinates;
+/**
+ * Hook for getting coordinates of tasks in a specific range only
+ * Useful for virtual scrolling scenarios
+ */
+export declare const useRangedCoordinates: (tasks: readonly RenderTask[], taskToRowIndexMap: TaskToRowIndexMap, startDate: Date, viewMode: ViewMode, rtl: boolean, fullRowHeight: number, taskHeight: number, taskYOffset: number, distances: Distances, svgWidth: number, startIndex: number, endIndex: number, comparisonLevel?: number) => Map<string, TaskCoordinates>;
+/**
+ * Hook for smart coordinate invalidation
+ * Tracks which tasks need coordinate recalculation based on their dependencies
+ */
+export declare const useCoordinateInvalidation: (tasks: readonly RenderTask[], changedTaskIds: Set<string>) => Set<string>;

package/dist/helpers/use-memory-management.d.ts

@@ -0,0 +1,122 @@
+import { TaskCoordinates } from "../types";
+/**
+ * Generic object pool for reusing objects to reduce garbage collection
+ */
+declare class ObjectPool<T> {
+    private pool;
+    private createFn;
+    private resetFn?;
+    private maxSize;
+    constructor(createFn: () => T, resetFn?: (obj: T) => void, maxSize?: number);
+    acquire(): T;
+    release(obj: T): void;
+    clear(): void;
+    get size(): number;
+}
+/**
+ * Task coordinates object pool for reducing memory allocations
+ */
+export declare const useTaskCoordinatesPool: (maxSize?: number) => {
+    acquire: () => TaskCoordinates;
+    release: (coords: TaskCoordinates) => void;
+    clear: () => void;
+    pool: ObjectPool<TaskCoordinates>;
+};
+/**
+ * Array pool for reusing arrays to reduce allocations
+ */
+export declare const useArrayPool: <T>(maxSize?: number) => {
+    acquire: () => T[];
+    release: (arr: T[]) => void;
+    clear: () => void;
+    pool: ObjectPool<T[]>;
+};
+/**
+ * Map pool for reusing Map objects
+ */
+export declare const useMapPool: <K, V>(maxSize?: number) => {
+    acquire: () => Map<K, V>;
+    release: (map: Map<K, V>) => void;
+    clear: () => void;
+    pool: ObjectPool<Map<K, V>>;
+};
+/**
+ * Set pool for reusing Set objects
+ */
+export declare const useSetPool: <T>(maxSize?: number) => {
+    acquire: () => Set<T>;
+    release: (set: Set<T>) => void;
+    clear: () => void;
+    pool: ObjectPool<Set<T>>;
+};
+/**
+ * Memory manager that coordinates multiple object pools
+ */
+export declare const useMemoryManager: () => {
+    coordinatesPool: {
+        acquire: () => TaskCoordinates;
+        release: (coords: TaskCoordinates) => void;
+        clear: () => void;
+        pool: ObjectPool<TaskCoordinates>;
+    };
+    arrayPool: {
+        acquire: () => unknown[];
+        release: (arr: unknown[]) => void;
+        clear: () => void;
+        pool: ObjectPool<unknown[]>;
+    };
+    mapPool: {
+        acquire: () => Map<unknown, unknown>;
+        release: (map: Map<unknown, unknown>) => void;
+        clear: () => void;
+        pool: ObjectPool<Map<unknown, unknown>>;
+    };
+    setPool: {
+        acquire: () => Set<unknown>;
+        release: (set: Set<unknown>) => void;
+        clear: () => void;
+        pool: ObjectPool<Set<unknown>>;
+    };
+    memoryStats: {
+        coordinatesPoolSize: number;
+        arrayPoolSize: number;
+        mapPoolSize: number;
+        setPoolSize: number;
+    };
+    clearAllPools: () => void;
+    forceGarbageCollection: () => void;
+};
+/**
+ * Memory-efficient batch processor that reuses objects
+ */
+export declare const useBatchProcessor: <T, R>(batchSize?: number) => {
+    processBatch: (items: T[], processor: (batch: T[]) => Promise<R[]> | R[], onProgress?: (processed: number, total: number) => void) => Promise<R[]>;
+};
+/**
+ * Weak reference manager for preventing memory leaks
+ */
+export declare const useWeakReferenceManager: () => {
+    addWeakRef: (obj: object) => WeakRef<object>;
+    cleanupDeadRefs: () => number;
+    getAliveRefCount: () => number;
+    totalRefs: number;
+};
+/**
+ * Memory monitoring hook for tracking memory usage
+ */
+export declare const useMemoryMonitor: (intervalMs?: number) => {
+    memoryInfo: {
+        usedJSHeapSize: number;
+        totalJSHeapSize: number;
+        jsHeapSizeLimit: number;
+    };
+    updateMemoryInfo: () => void;
+    startMonitoring: () => () => void;
+    getMemoryPressure: () => number;
+};
+declare global {
+    interface Window {
+        gc?: () => void;
+    }
+}
+export {};

package/dist/helpers/use-optimized-data-structures.d.ts

@@ -0,0 +1,24 @@
+import { RenderTask, TaskMapByLevel, ChildByLevelMap, RootMapByLevel } from "../types";
+export interface OptimizedDataStructures {
+    tasksByLevel: Map<number, RenderTask[]>;
+    tasksMap: TaskMapByLevel;
+    childTasksMap: ChildByLevelMap;
+    rootTasksMap: RootMapByLevel;
+    taskIndicesByLevel: Map<number, Map<string, number>>;
+    visibleTasksAtLevel: Map<number, RenderTask[]>;
+    taskParentMap: Map<string, string | null>;
+    taskDepthMap: Map<string, number>;
+}
+/**
+ * Pre-computes optimized data structures for faster lookups
+ * Reduces O(n) operations to O(1) for common queries
+ */
+export declare const useOptimizedDataStructures: (tasks: readonly RenderTask[]) => OptimizedDataStructures;
+/**
+ * Hook for getting tasks at specific level with O(1) access
+ */
+export declare const useTasksAtLevel: (optimizedData: OptimizedDataStructures, level: number) => RenderTask[];
+/**
+ * Hook for getting visible tasks in a specific range for virtualization
+ */
+export declare const useVisibleTasksInRange: (optimizedData: OptimizedDataStructures, level: number, startIndex: number, endIndex: number) => RenderTask[];

package/dist/helpers/use-optimized-svg-rendering.d.ts

@@ -0,0 +1,117 @@
+import React from "react";
+import { RenderTask, TaskCoordinates } from "../types";
+export interface SVGBatch {
+    tasks: RenderTask[];
+    dependencies: string[];
+    selectedTasks: string[];
+    holidays: string[];
+}
+export interface SVGRenderContext {
+    additionalLeftSpace: number;
+    fullRowHeight: number;
+    taskHeight: number;
+    svgWidth: number;
+    svgHeight: number;
+}
+/**
+ * Hook for batched SVG rendering to reduce DOM operations
+ */
+export declare const useBatchedSVGRenderer: () => {
+    clearBatch: () => void;
+    addTaskToBatch: (task: RenderTask) => void;
+    addDependencyToBatch: (dependency: string) => void;
+    addSelectedTaskToBatch: (selectedTask: string) => void;
+    addHolidayToBatch: (holiday: string) => void;
+    getBatchData: () => {
+        tasks: RenderTask[];
+        dependencies: string[];
+        selectedTasks: string[];
+        holidays: string[];
+    };
+    currentBatch: SVGBatch;
+};
+/**
+ * Hook for SVG element pooling to reuse DOM elements
+ */
+export declare const useSVGElementPool: () => {
+    acquireRect: () => SVGRectElement;
+    releaseRect: (rect: SVGRectElement) => void;
+    acquirePath: () => SVGPathElement;
+    releasePath: (path: SVGPathElement) => void;
+    acquireText: () => SVGTextElement;
+    releaseText: (text: SVGTextElement) => void;
+    acquireGroup: () => SVGGElement;
+    releaseGroup: (group: SVGGElement) => void;
+    clearPools: () => void;
+};
+/**
+ * Hook for virtual SVG rendering - only renders visible elements
+ */
+export declare const useVirtualSVGRenderer: (allTasks: RenderTask[], getTaskCoordinates: (task: RenderTask) => TaskCoordinates, viewportBounds: {
+    minX: number;
+    maxX: number;
+    minY: number;
+    maxY: number;
+}) => {
+    visibleTasks: RenderTask[];
+    getVisibleTasksInRange: (startIndex: number, endIndex: number) => RenderTask[];
+    totalVisibleCount: number;
+};
+/**
+ * Hook for optimized SVG coordinate transformations
+ */
+export declare const useSVGCoordinateTransforms: () => {
+    getTransform: (x: number, y: number) => string;
+    getScaleTransform: (scaleX: number, scaleY: number) => string;
+    clearTransformCache: () => void;
+};
+/**
+ * Hook for Level-of-Detail (LOD) rendering
+ * Reduces rendering complexity based on zoom level
+ */
+export declare const useLODRenderer: (zoomLevel: number, taskCount: number) => {
+    showLabels: boolean;
+    showProgress: boolean;
+    showDependencies: boolean;
+    taskDetail: "minimal";
+    maxVisibleTasks: number;
+} | {
+    showLabels: boolean;
+    showProgress: boolean;
+    showDependencies: boolean;
+    taskDetail: "reduced";
+    maxVisibleTasks: number;
+} | {
+    showLabels: boolean;
+    showProgress: boolean;
+    showDependencies: boolean;
+    taskDetail: "full";
+    maxVisibleTasks: number;
+};
+/**
+ * Hook for efficient SVG path generation
+ */
+export declare const useSVGPathGenerator: () => {
+    generateTaskPath: (x: number, y: number, width: number, height: number, cornerRadius?: number) => string;
+    generateProgressPath: (x: number, y: number, width: number, height: number, progressPercent: number) => string;
+    generateArrowPath: (fromX: number, fromY: number, toX: number, toY: number, arrowSize?: number) => string;
+    clearPathCache: () => void;
+};
+/**
+ * Hook for SVG performance optimization
+ */
+export declare const useSVGPerformanceOptimizer: () => {
+    optimizeRenderList: (elements: React.ReactElement[]) => React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+    batchSVGUpdates: (updates: Array<() => void>) => void;
+    shouldSkipRender: (bounds: {
+        x: number;
+        y: number;
+        width?: number;
+        height?: number;
+    }, viewportBounds: {
+        minX: number;
+        maxX: number;
+        minY: number;
+        maxY: number;
+    }) => boolean;
+};

package/dist/helpers/use-performance-monitor.d.ts

@@ -0,0 +1,106 @@
+export interface PerformanceMetrics {
+    renderTime: number;
+    coordinateCalculationTime: number;
+    dependencyCalculationTime: number;
+    sortingTime: number;
+    totalTasks: number;
+    visibleTasks: number;
+    fps: number;
+    memoryUsage: number;
+    timestamp: number;
+}
+export interface PerformanceBenchmark {
+    name: string;
+    startTime: number;
+    endTime?: number;
+    duration?: number;
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Performance monitor for tracking Gantt chart performance metrics
+ */
+export declare const usePerformanceMonitor: (enabled?: boolean) => {
+    startMeasurement: (name: string, metadata?: Record<string, unknown>) => void;
+    endMeasurement: (name: string) => number;
+    measureFunction: <T extends unknown[], R>(name: string, fn: (...args: T) => R, metadata?: Record<string, unknown>) => (...args: T) => R;
+    measureAsyncFunction: <T_1 extends unknown[], R_1>(name: string, fn: (...args: T_1) => Promise<R_1>, metadata?: Record<string, unknown>) => (...args: T_1) => Promise<R_1>;
+    getPerformanceReport: () => {
+        measurements: Record<string, {
+            count: number;
+            totalTime: number;
+            avgTime: number;
+            maxTime: number;
+            minTime: number;
+        }>;
+        fps: number;
+        currentMetrics: PerformanceMetrics;
+        allMetrics: PerformanceMetrics[];
+    };
+    addMetrics: (metrics: Omit<PerformanceMetrics, "timestamp">) => void;
+    clearMeasurements: () => void;
+    updateFPS: () => void;
+    getFPS: () => number;
+    getMemoryUsage: () => number;
+    enabled: boolean;
+};
+/**
+ * Hook for measuring render performance
+ */
+export declare const useRenderPerformance: (componentName: string) => {
+    measureRender: (fn: () => void) => () => void;
+    renderCount: number;
+    lastRenderTime: number;
+};
+/**
+ * Hook for performance budgeting
+ */
+export declare const usePerformanceBudget: (budgets: Record<string, number>) => {
+    checkBudgets: () => {
+        operation: string;
+        actual: number;
+        budget: number;
+        timestamp: number;
+    }[];
+    getBudgetStatus: () => Record<string, {
+        budget: number;
+        actual: number;
+        status: "ok" | "warning" | "violation";
+    }>;
+    violations: {
+        operation: string;
+        actual: number;
+        budget: number;
+        timestamp: number;
+    }[];
+};
+/**
+ * Hook for performance-aware rendering
+ * Automatically reduces quality when performance is poor
+ */
+export declare const useAdaptivePerformance: (thresholds: {
+    fpsThreshold: number;
+    renderTimeThreshold: number;
+}) => {
+    performanceLevel: "medium" | "high" | "low";
+    updatePerformanceLevel: () => "medium" | "high" | "low";
+    getQualitySettings: () => {
+        enableAnimations: boolean;
+        renderQuality: string;
+        maxVisibleTasks: number;
+        updateFrequency: number;
+    };
+};
+/**
+ * Hook for throttling expensive operations based on performance
+ */
+export declare const usePerformanceThrottling: () => {
+    throttle: <T extends unknown[], R>(key: string, fn: (...args: T) => R, baseDelay?: number) => (...args: T) => R | undefined;
+};
+/**
+ * Development-only performance debugging utilities
+ */
+export declare const usePerformanceDebugger: () => {
+    logPerformanceReport: () => void;
+    exportPerformanceData: () => void;
+    clearMeasurements: () => void;
+};

package/dist/helpers/use-progressive-loading.d.ts

@@ -0,0 +1,63 @@
+import { RenderTask } from "../types";
+import type { OptimizedListParams } from "./use-optimized-list";
+export interface ProgressiveLoadingConfig {
+    /** Number of tasks to load per chunk */
+    chunkSize: number;
+    /** Buffer size for preloading (in chunks) */
+    preloadBuffer: number;
+    /** Function to load a chunk of tasks */
+    loadTaskChunk: (startIndex: number, endIndex: number) => Promise<RenderTask[]>;
+    /** Total number of tasks available */
+    totalTaskCount: number;
+    /** Enable progressive loading */
+    enabled: boolean;
+}
+export interface ProgressiveLoadingState {
+    /** Currently loaded tasks */
+    loadedTasks: readonly RenderTask[];
+    /** Loading state */
+    isLoading: boolean;
+    /** Error state */
+    error: Error | null;
+    /** Loaded chunk ranges */
+    loadedRanges: Set<string>;
+    /** Currently loading chunks */
+    loadingChunks: Set<string>;
+}
+/**
+ * Hook for progressive loading of large task datasets
+ * Loads tasks in chunks based on viewport visibility
+ */
+export declare const useProgressiveLoading: (initialTasks: readonly RenderTask[], config: Partial<ProgressiveLoadingConfig>, renderedIndexes: OptimizedListParams | null) => ProgressiveLoadingState & {
+    /** Force load a specific range */
+    loadRange: (startIndex: number, endIndex: number) => Promise<void>;
+    /** Preload next chunks based on scroll direction */
+    preloadNext: (direction: "up" | "down") => Promise<void>;
+    /** Clear loaded data and reset */
+    reset: () => void;
+};
+/**
+ * Hook for chunked task processing
+ * Processes large task arrays in smaller chunks to avoid blocking the main thread
+ */
+export declare const useChunkedProcessing: <T, R>(data: T[], processor: (chunk: T[]) => R[], chunkSize?: number) => {
+    processedData: R[];
+    isProcessing: boolean;
+    progress: number;
+};
+/**
+ * Enhanced progressive loading with smart caching
+ */
+export declare const useSmartProgressiveLoading: (config: Partial<ProgressiveLoadingConfig> & {
+    /** Cache expiry time in milliseconds */
+    cacheExpiry?: number;
+    /** Maximum cache size (number of chunks) */
+    maxCacheSize?: number;
+}, renderedIndexes: OptimizedListParams | null) => ProgressiveLoadingState & {
+    /** Force load a specific range */
+    loadRange: (startIndex: number, endIndex: number) => Promise<void>;
+    /** Preload next chunks based on scroll direction */
+    preloadNext: (direction: "up" | "down") => Promise<void>;
+    /** Clear loaded data and reset */
+    reset: () => void;
+};

package/dist/helpers/use-spatial-dependency-map.d.ts

@@ -0,0 +1,49 @@
+import { DependencyMap, DependentMap, DependencyMargins, ExpandedDependency, ExpandedDependent, MapTaskToCoordinates, TaskMapByLevel, RenderTask, TaskCoordinates } from "../types";
+import type { OptimizedListParams } from "./use-optimized-list";
+interface SpatialBounds {
+    minX: number;
+    maxX: number;
+    minY: number;
+    maxY: number;
+}
+interface SpatialNode {
+    taskId: string;
+    bounds: SpatialBounds;
+    dependencies: ExpandedDependency[];
+    dependents: ExpandedDependent[];
+}
+/**
+ * Spatial hash map for efficient spatial queries
+ * Divides space into grid cells for O(1) spatial lookups
+ */
+declare class SpatialHashMap {
+    private cellSize;
+    private grid;
+    private taskNodes;
+    constructor(cellSize?: number);
+    private getBoundsFromCoordinates;
+    insert(taskId: string, coordinates: TaskCoordinates, dependencies?: ExpandedDependency[], dependents?: ExpandedDependent[]): void;
+    query(bounds: SpatialBounds): SpatialNode[];
+    private boundsIntersect;
+    getNode(taskId: string): SpatialNode | undefined;
+    clear(): void;
+    remove(taskId: string): void;
+}
+/**
+ * Hook for optimized dependency calculations using spatial indexing
+ */
+export declare const useSpatialDependencyMap: (tasks: readonly RenderTask[], visibleTasksMirror: Readonly<Record<string, true>>, tasksMap: TaskMapByLevel, mapTaskToCoordinates: MapTaskToCoordinates, fullRowHeight: number, isShowCriticalPath: boolean, renderedRowIndexes: OptimizedListParams | null, renderedColumnIndexes: OptimizedListParams | null) => [DependencyMap, DependentMap, DependencyMargins, SpatialHashMap];
+/**
+ * Hook for querying dependencies in a specific spatial region
+ */
+export declare const useSpatialDependencyQuery: (spatialMap: SpatialHashMap, queryBounds: SpatialBounds) => SpatialNode[];
+/**
+ * Hook for optimized dependency updates
+ * Only recalculates dependencies for tasks that actually changed
+ */
+export declare const useIncrementalDependencyUpdate: (spatialMap: SpatialHashMap, changedTaskIds: Set<string>, allTasks: readonly RenderTask[]) => (newTaskCoordinates: Map<string, TaskCoordinates>) => void;
+/**
+ * Utility function to create viewport bounds from rendered indexes
+ */
+export declare const createViewportBounds: (renderedRowIndexes: OptimizedListParams | null, renderedColumnIndexes: OptimizedListParams | null, fullRowHeight: number, columnWidth: number) => SpatialBounds | null;
+export {};

package/dist/helpers/use-web-worker.d.ts

@@ -0,0 +1,50 @@
+import { RenderTask, ViewMode, Distances, TaskCoordinates } from "../types";
+export interface WorkerMessage {
+    id: string;
+    type: "calculate-coordinates" | "process-dependencies" | "sort-tasks" | "filter-tasks";
+    data: unknown;
+}
+export interface WorkerResponse {
+    id: string;
+    type: string;
+    result?: unknown;
+    error?: string;
+}
+export interface CoordinateCalculationData {
+    tasks: RenderTask[];
+    startDate: number;
+    viewMode: ViewMode;
+    rtl: boolean;
+    fullRowHeight: number;
+    taskHeight: number;
+    taskYOffset: number;
+    distances: Distances;
+    svgWidth: number;
+}
+/**
+ * Hook for managing Web Worker communications for heavy calculations
+ */
+export declare const useGanttWebWorker: () => {
+    isWorkerAvailable: boolean;
+    sendMessage: (message: Omit<WorkerMessage, "id">, timeoutMs?: number) => Promise<unknown>;
+};
+/**
+ * Hook for calculating task coordinates using Web Worker
+ */
+export declare const useWorkerCoordinateCalculation: (tasks: readonly RenderTask[], startDate: Date, viewMode: ViewMode, rtl: boolean, fullRowHeight: number, taskHeight: number, taskYOffset: number, distances: Distances, svgWidth: number) => {
+    coordinates: Map<string, TaskCoordinates>;
+    isCalculating: boolean;
+    recalculate: () => Promise<Map<string, TaskCoordinates>>;
+};
+/**
+ * Hook for sorting tasks using Web Worker
+ */
+export declare const useWorkerTaskSorting: () => {
+    sortTasks: (tasks: RenderTask[]) => Promise<RenderTask[]>;
+};
+/**
+ * Hook for filtering tasks using Web Worker
+ */
+export declare const useWorkerTaskFiltering: () => {
+    filterTasks: (tasks: RenderTask[], filterFn: string) => Promise<RenderTask[]>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react-v",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",
@@ -43,8 +43,9 @@
     "@floating-ui/dom": "1.6.3",
     "@floating-ui/react": "0.26.11",
     "date-fns": "3.6.0",
-    "i18next": "^24.0.5",
-    "react-i18next": "^15.1.3"
+    "i18next": "^25.5.2",
+    "react-i18next": "^15.7.3",
+    "react-window": "^2.1.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
@@ -61,11 +62,11 @@
     "@storybook/addon-onboarding": "8.2.10",
     "@storybook/blocks": "8.2.10",
     "@storybook/cli": "8.2.10",
+    "@storybook/core-server": "8.2.10",
+    "@storybook/jest": "0.2.3",
     "@storybook/react": "8.2.10",
     "@storybook/react-vite": "8.2.10",
     "@storybook/test": "8.2.10",
-    "@storybook/core-server": "8.2.10",
-    "@storybook/jest": "0.2.3",
     "@storybook/test-runner": "0.23.0",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.4.2",
@@ -75,6 +76,7 @@
     "@types/node": "^20.12.4",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",
+    "@types/react-window": "^1.8.8",
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",
     "@vitejs/plugin-react": "4.2.1",