gantt-task-react-v 1.2.14 → 1.3.2

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

@@ -4684,11 +4684,14 @@ const getStartAndEnd = (containerEl, property, cellSize) => {
   if (!containerEl) {
     return null;
   }
-  const scrollValue = containerEl[property];
-  const maxScrollValue = property === "scrollLeft" ? containerEl.scrollWidth : containerEl.scrollHeight;
-  const fullValue = property === "scrollLeft" ? containerEl.clientWidth : containerEl.clientHeight;
-  const firstIndex = Math.floor(scrollValue / cellSize);
-  const lastIndex = Math.ceil((scrollValue + fullValue) / cellSize) + 10;
+  const el = containerEl;
+  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 lastIndex = Math.floor((scrollValue + fullValue) / cellSize) + overscan;
   const isStartOfScroll = scrollValue < DELTA;
   const isEndOfScroll = scrollValue + fullValue > maxScrollValue - DELTA;
   return [firstIndex, lastIndex, isStartOfScroll, isEndOfScroll, fullValue];
@@ -4697,31 +4700,49 @@ const useOptimizedList = (containerRef, property, cellSize) => {
   const [indexes, setIndexes] = useState(
     () => getStartAndEnd(containerRef.current, property, cellSize)
   );
+  const rafRef = useRef(null);
+  const pendingRef = useRef(false);
+  const update = useMemo(() => {
+    const fn = () => {
+      pendingRef.current = false;
+      const next = getStartAndEnd(containerRef.current, property, cellSize);
+      setIndexes((prev) => {
+        const changed = !prev || !next || next.some((v, i) => prev ? prev[i] !== v : true);
+        return changed ? next : prev;
+      });
+      rafRef.current = null;
+    };
+    return fn;
+  }, [cellSize, containerRef, property]);
   useEffect(() => {
-    let rafId = null;
-    let prevIndexes = indexes;
-    const handler = () => {
-      const nextIndexes = getStartAndEnd(
-        containerRef.current,
-        property,
-        cellSize
-      );
-      const isChanged = prevIndexes ? nextIndexes ? nextIndexes.some(
-        (value, index2) => !prevIndexes || prevIndexes[index2] !== value
-      ) : true : Boolean(nextIndexes);
-      if (isChanged) {
-        prevIndexes = nextIndexes;
-        setIndexes(nextIndexes);
-      }
-      rafId = requestAnimationFrame(handler);
+    const el = containerRef.current;
+    if (!el) {
+      return void 0;
+    }
+    setIndexes(getStartAndEnd(el, property, cellSize));
+    const onScroll = () => {
+      if (pendingRef.current)
+        return;
+      pendingRef.current = true;
+      rafRef.current = requestAnimationFrame(update);
     };
-    rafId = requestAnimationFrame(handler);
+    const resizeObserver = new ResizeObserver(() => {
+      if (pendingRef.current)
+        return;
+      pendingRef.current = true;
+      rafRef.current = requestAnimationFrame(update);
+    });
+    resizeObserver.observe(el);
+    el.addEventListener("scroll", onScroll, { passive: true });
     return () => {
-      if (rafId !== null) {
-        cancelAnimationFrame(rafId);
+      el.removeEventListener("scroll", onScroll);
+      resizeObserver.disconnect();
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
       }
+      pendingRef.current = false;
     };
-  }, [cellSize, containerRef, indexes, property]);
+  }, [cellSize, containerRef, property, update]);
   return indexes;
 };
 const taskListNameWrapper = "_taskListNameWrapper_16z6n_1";
@@ -10911,7 +10932,7 @@ const styles$c = {
 };
 const GanttTodayInner = ({
   additionalLeftSpace,
-  distances,
+  distances: { columnWidth },
   ganttFullHeight,
   isUnknownDates,
   rtl,
@@ -10925,7 +10946,6 @@ const GanttTodayInner = ({
   todayLabel = "Today",
   dataDateLabel = "Data Date"
 }) => {
-  const { columnWidth, rowHeight, barFill } = distances;
   const todayElement = useMemo(() => {
     if (isUnknownDates || !showTodayLine) {
       return null;
@@ -11032,20 +11052,13 @@ const GanttTodayInner = ({
       }
     };
     const tickX = dataIndex * columnWidth * extraMultiplier();
-    const dateBaseX = rtl ? tickX + columnWidth : tickX;
+    const x = rtl ? tickX + columnWidth : tickX;
     const color = dataDateColor || "var(--gantt-calendar-today-color)";
-    const taskHeight = rowHeight * barFill / 100;
-    const rotatedHeight = taskHeight / Math.SQRT2;
-    const centerX = dateBaseX;
-    const centerY = 6;
-    const rectX = centerX - rotatedHeight / 2;
-    const rectY = centerY - rotatedHeight / 2;
-    const rightEdgeX = centerX + taskHeight / 2;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "rect",
         {
-          x: additionalLeftSpace + rightEdgeX,
+          x: additionalLeftSpace + x,
           y: 0,
           width: 2,
           height: ganttFullHeight,
@@ -11054,22 +11067,19 @@ const GanttTodayInner = ({
         }
       ),
       /* @__PURE__ */ jsx(
-        "rect",
+        "circle",
         {
-          x: additionalLeftSpace + rectX,
-          y: rectY,
-          width: rotatedHeight,
-          height: rotatedHeight,
-          fill: color,
-          transform: `rotate(45 ${additionalLeftSpace + centerX} ${centerY})`,
-          rx: 2,
-          ry: 2
+          className: styles$c.ganttTodayCircle,
+          cx: x + 1,
+          cy: 6,
+          r: 6,
+          fill: color
         }
       ),
       /* @__PURE__ */ jsx(
         "text",
         {
-          x: additionalLeftSpace + rightEdgeX + 8,
+          x: additionalLeftSpace + x + 8,
           y: 10,
           fill: color,
           fontSize: 12,
@@ -11088,9 +11098,7 @@ const GanttTodayInner = ({
     showDataDateLine,
     dataDate,
     dataDateColor,
-    dataDateLabel,
-    rowHeight,
-    barFill
+    dataDateLabel
   ]);
   return /* @__PURE__ */ jsxs("g", { className: "today", children: [
     dataDateElement,
@@ -17478,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) {
@@ -19097,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]
@@ -19270,7 +19585,7 @@ const Gantt = (props) => {
       svgWidth
     ]
   );
-  const mapTaskToCoordinates = useMemo(
+  const originalMapTaskToCoordinates = useMemo(
     () => getMapTaskToCoordinates(
       sortedTasks,
       visibleTasksMirror,
@@ -19298,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);