gantt-task-react-v 1.2.14 → 1.3.0

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,

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

@@ -4701,11 +4701,14 @@
     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];
@@ -4714,31 +4717,49 @@
     const [indexes, setIndexes] = React.useState(
       () => getStartAndEnd(containerRef.current, property, cellSize)
     );
+    const rafRef = React.useRef(null);
+    const pendingRef = React.useRef(false);
+    const update = React.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]);
     React.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";
@@ -10928,7 +10949,7 @@
   };
   const GanttTodayInner = ({
     additionalLeftSpace,
-    distances,
+    distances: { columnWidth },
     ganttFullHeight,
     isUnknownDates,
     rtl,
@@ -10942,7 +10963,6 @@
     todayLabel = "Today",
     dataDateLabel = "Data Date"
   }) => {
-    const { columnWidth, rowHeight, barFill } = distances;
     const todayElement = React.useMemo(() => {
       if (isUnknownDates || !showTodayLine) {
         return null;
@@ -11049,20 +11069,13 @@
         }
       };
       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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "rect",
           {
-            x: additionalLeftSpace + rightEdgeX,
+            x: additionalLeftSpace + x,
             y: 0,
             width: 2,
             height: ganttFullHeight,
@@ -11071,22 +11084,19 @@
           }
         ),
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
           "text",
           {
-            x: additionalLeftSpace + rightEdgeX + 8,
+            x: additionalLeftSpace + x + 8,
             y: 10,
             fill: color,
             fontSize: 12,
@@ -11105,9 +11115,7 @@
       showDataDateLine,
       dataDate,
       dataDateColor,
-      dataDateLabel,
-      rowHeight,
-      barFill
+      dataDateLabel
     ]);
     return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "today", children: [
       dataDateElement,

package/package.json

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