gantt-task-react-v 1.0.39 → 1.0.40

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

@@ -13184,8 +13184,7 @@ const TaskGanttInner = (props) => {
     verticalGanttContainerRef,
     verticalScrollbarRef
   } = props;
-  const contentRef = React__default.useRef(null);
-  const moveStateVertRef = useRef(null);
+  const ganttBodyRef = React__default.useRef(null);
   const moveStateHorRef = useRef(null);
   const moveStateScrollRef = useRef(null);
   const containerStyle = useMemo(
@@ -13217,50 +13216,49 @@ const TaskGanttInner = (props) => {
     ]
   );
   useEffect(() => {
-    if (!contentRef.current) {
+    if (!ganttBodyRef.current) {
       return () => {
       };
     }
-    const contentContainer = contentRef.current;
+    const ganttBodyContainer = ganttBodyRef.current;
     const onScrollStart = (event) => {
-      event.preventDefault();
-      moveStateVertRef.current = {
-        clientX: event.clientX,
-        clientY: event.clientY,
-        scrollLeft: verticalGanttContainerRef.current.scrollLeft,
-        scrollTop: horizontalContainerRef.current.scrollTop
-      };
+      var _a, _b, _c, _d;
+      const mouseEvent = event;
+      mouseEvent.preventDefault();
       moveStateHorRef.current = {
-        clientX: event.clientX,
-        clientY: event.clientY,
-        scrollLeft: horizontalContainerRef.current.scrollLeft,
-        scrollTop: horizontalContainerRef.current.scrollTop
+        clientX: mouseEvent.clientX,
+        clientY: mouseEvent.clientY,
+        scrollLeft: ((_a = verticalGanttContainerRef.current) == null ? void 0 : _a.scrollLeft) || 0,
+        scrollTop: ((_b = horizontalContainerRef.current) == null ? void 0 : _b.scrollTop) || 0
       };
       moveStateScrollRef.current = {
-        clientX: event.clientX,
-        clientY: event.clientY,
-        scrollLeft: verticalScrollbarRef.current.scrollLeft,
-        scrollTop: verticalScrollbarRef.current.scrollTop
+        clientX: mouseEvent.clientX,
+        clientY: mouseEvent.clientY,
+        scrollLeft: ((_c = verticalScrollbarRef.current) == null ? void 0 : _c.scrollLeft) || 0,
+        scrollTop: ((_d = verticalScrollbarRef.current) == null ? void 0 : _d.scrollTop) || 0
       };
-      contentContainer.classList.add(styles$2.calendarDragging);
+      ganttBodyContainer.classList.add(styles$2.calendarDragging);
     };
     const onScrollMove = (event) => {
-      if (!moveStateVertRef.current) {
+      if (!moveStateHorRef.current) {
         return;
       }
-      event.preventDefault();
-      const { clientX, scrollLeft } = moveStateVertRef.current;
-      const scrollVertContainer = verticalGanttContainerRef.current;
-      scrollVertContainer.scrollLeft = scrollLeft + clientX - event.clientX;
+      const mouseEvent = event;
+      mouseEvent.preventDefault();
       const {
         clientX: clientXH,
         scrollLeft: scrollLeftH,
         scrollTop: scrollTopH,
         clientY: clientYH
       } = moveStateHorRef.current;
+      const vertContainer = verticalGanttContainerRef.current;
+      if (vertContainer) {
+        vertContainer.scrollLeft = scrollLeftH + clientXH - mouseEvent.clientX;
+      }
       const horContainer = horizontalContainerRef.current;
-      horContainer.scrollLeft = scrollLeftH + clientXH - event.clientX;
-      horContainer.scrollTop = scrollTopH + clientYH - event.clientY;
+      if (horContainer) {
+        horContainer.scrollTop = scrollTopH + clientYH - mouseEvent.clientY;
+      }
       const {
         clientX: clientXS,
         scrollLeft: scrollLeftS,
@@ -13268,25 +13266,27 @@ const TaskGanttInner = (props) => {
         clientY: clientYS
       } = moveStateScrollRef.current;
       const scrollContainer = verticalScrollbarRef.current;
-      scrollContainer.scrollLeft = scrollLeftS + clientXS - event.clientX;
-      scrollContainer.scrollTop = scrollTopS + clientYS - event.clientY;
+      if (scrollContainer) {
+        scrollContainer.scrollLeft = scrollLeftS + clientXS - mouseEvent.clientX;
+        scrollContainer.scrollTop = scrollTopS + clientYS - mouseEvent.clientY;
+      }
     };
     const onScrollEnd = (event) => {
-      event.preventDefault();
-      moveStateVertRef.current = null;
+      const mouseEvent = event;
+      mouseEvent.preventDefault();
       moveStateHorRef.current = null;
       moveStateScrollRef.current = null;
-      contentContainer.classList.remove(styles$2.calendarDragging);
+      ganttBodyContainer.classList.remove(styles$2.calendarDragging);
     };
-    contentContainer.addEventListener("mousemove", onScrollMove);
-    contentContainer.addEventListener("mousedown", onScrollStart);
-    contentContainer.addEventListener("mouseup", onScrollEnd);
-    contentContainer.addEventListener("mouseout", onScrollEnd);
+    ganttBodyContainer.addEventListener("mousemove", onScrollMove);
+    ganttBodyContainer.addEventListener("mousedown", onScrollStart);
+    ganttBodyContainer.addEventListener("mouseup", onScrollEnd);
+    ganttBodyContainer.addEventListener("mouseout", onScrollEnd);
     return () => {
-      contentContainer.removeEventListener("mousemove", onScrollMove);
-      contentContainer.removeEventListener("mousedown", onScrollStart);
-      contentContainer.removeEventListener("mouseup", onScrollEnd);
-      contentContainer.removeEventListener("mouseout", onScrollEnd);
+      ganttBodyContainer.removeEventListener("mousemove", onScrollMove);
+      ganttBodyContainer.removeEventListener("mousedown", onScrollStart);
+      ganttBodyContainer.removeEventListener("mouseup", onScrollEnd);
+      ganttBodyContainer.removeEventListener("mouseout", onScrollEnd);
     };
   }, [verticalScrollbarRef, horizontalContainerRef, verticalGanttContainerRef]);
   return /* @__PURE__ */ jsxs(
@@ -13313,7 +13313,7 @@ const TaskGanttInner = (props) => {
             ref: horizontalContainerRef,
             className: styles$2.horizontalContainer,
             style: containerStyle,
-            children: /* @__PURE__ */ jsx("div", { style: gridStyle, children: /* @__PURE__ */ jsxs(
+            children: /* @__PURE__ */ jsx("div", { style: gridStyle, ref: ganttBodyRef, children: /* @__PURE__ */ jsxs(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -13323,15 +13323,6 @@ const TaskGanttInner = (props) => {
                 ref: ganttSVGRef,
                 children: [
                   /* @__PURE__ */ jsx(GanttToday, { ...ganttTodayProps }),
-                  /* @__PURE__ */ jsx(
-                    "rect",
-                    {
-                      ref: contentRef,
-                      width: "100%",
-                      height: "100%",
-                      fill: "transparent"
-                    }
-                  ),
                   /* @__PURE__ */ jsx(TaskGanttContent, { ...barProps })
                 ]
               }

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

@@ -13201,8 +13201,7 @@
       verticalGanttContainerRef,
       verticalScrollbarRef
     } = props;
-    const contentRef = React.useRef(null);
-    const moveStateVertRef = React.useRef(null);
+    const ganttBodyRef = React.useRef(null);
     const moveStateHorRef = React.useRef(null);
     const moveStateScrollRef = React.useRef(null);
     const containerStyle = React.useMemo(
@@ -13234,50 +13233,49 @@
       ]
     );
     React.useEffect(() => {
-      if (!contentRef.current) {
+      if (!ganttBodyRef.current) {
         return () => {
         };
       }
-      const contentContainer = contentRef.current;
+      const ganttBodyContainer = ganttBodyRef.current;
       const onScrollStart = (event) => {
-        event.preventDefault();
-        moveStateVertRef.current = {
-          clientX: event.clientX,
-          clientY: event.clientY,
-          scrollLeft: verticalGanttContainerRef.current.scrollLeft,
-          scrollTop: horizontalContainerRef.current.scrollTop
-        };
+        var _a, _b, _c, _d;
+        const mouseEvent = event;
+        mouseEvent.preventDefault();
         moveStateHorRef.current = {
-          clientX: event.clientX,
-          clientY: event.clientY,
-          scrollLeft: horizontalContainerRef.current.scrollLeft,
-          scrollTop: horizontalContainerRef.current.scrollTop
+          clientX: mouseEvent.clientX,
+          clientY: mouseEvent.clientY,
+          scrollLeft: ((_a = verticalGanttContainerRef.current) == null ? void 0 : _a.scrollLeft) || 0,
+          scrollTop: ((_b = horizontalContainerRef.current) == null ? void 0 : _b.scrollTop) || 0
         };
         moveStateScrollRef.current = {
-          clientX: event.clientX,
-          clientY: event.clientY,
-          scrollLeft: verticalScrollbarRef.current.scrollLeft,
-          scrollTop: verticalScrollbarRef.current.scrollTop
+          clientX: mouseEvent.clientX,
+          clientY: mouseEvent.clientY,
+          scrollLeft: ((_c = verticalScrollbarRef.current) == null ? void 0 : _c.scrollLeft) || 0,
+          scrollTop: ((_d = verticalScrollbarRef.current) == null ? void 0 : _d.scrollTop) || 0
         };
-        contentContainer.classList.add(styles$2.calendarDragging);
+        ganttBodyContainer.classList.add(styles$2.calendarDragging);
       };
       const onScrollMove = (event) => {
-        if (!moveStateVertRef.current) {
+        if (!moveStateHorRef.current) {
           return;
         }
-        event.preventDefault();
-        const { clientX, scrollLeft } = moveStateVertRef.current;
-        const scrollVertContainer = verticalGanttContainerRef.current;
-        scrollVertContainer.scrollLeft = scrollLeft + clientX - event.clientX;
+        const mouseEvent = event;
+        mouseEvent.preventDefault();
         const {
           clientX: clientXH,
           scrollLeft: scrollLeftH,
           scrollTop: scrollTopH,
           clientY: clientYH
         } = moveStateHorRef.current;
+        const vertContainer = verticalGanttContainerRef.current;
+        if (vertContainer) {
+          vertContainer.scrollLeft = scrollLeftH + clientXH - mouseEvent.clientX;
+        }
         const horContainer = horizontalContainerRef.current;
-        horContainer.scrollLeft = scrollLeftH + clientXH - event.clientX;
-        horContainer.scrollTop = scrollTopH + clientYH - event.clientY;
+        if (horContainer) {
+          horContainer.scrollTop = scrollTopH + clientYH - mouseEvent.clientY;
+        }
         const {
           clientX: clientXS,
           scrollLeft: scrollLeftS,
@@ -13285,25 +13283,27 @@
           clientY: clientYS
         } = moveStateScrollRef.current;
         const scrollContainer = verticalScrollbarRef.current;
-        scrollContainer.scrollLeft = scrollLeftS + clientXS - event.clientX;
-        scrollContainer.scrollTop = scrollTopS + clientYS - event.clientY;
+        if (scrollContainer) {
+          scrollContainer.scrollLeft = scrollLeftS + clientXS - mouseEvent.clientX;
+          scrollContainer.scrollTop = scrollTopS + clientYS - mouseEvent.clientY;
+        }
       };
       const onScrollEnd = (event) => {
-        event.preventDefault();
-        moveStateVertRef.current = null;
+        const mouseEvent = event;
+        mouseEvent.preventDefault();
         moveStateHorRef.current = null;
         moveStateScrollRef.current = null;
-        contentContainer.classList.remove(styles$2.calendarDragging);
+        ganttBodyContainer.classList.remove(styles$2.calendarDragging);
       };
-      contentContainer.addEventListener("mousemove", onScrollMove);
-      contentContainer.addEventListener("mousedown", onScrollStart);
-      contentContainer.addEventListener("mouseup", onScrollEnd);
-      contentContainer.addEventListener("mouseout", onScrollEnd);
+      ganttBodyContainer.addEventListener("mousemove", onScrollMove);
+      ganttBodyContainer.addEventListener("mousedown", onScrollStart);
+      ganttBodyContainer.addEventListener("mouseup", onScrollEnd);
+      ganttBodyContainer.addEventListener("mouseout", onScrollEnd);
       return () => {
-        contentContainer.removeEventListener("mousemove", onScrollMove);
-        contentContainer.removeEventListener("mousedown", onScrollStart);
-        contentContainer.removeEventListener("mouseup", onScrollEnd);
-        contentContainer.removeEventListener("mouseout", onScrollEnd);
+        ganttBodyContainer.removeEventListener("mousemove", onScrollMove);
+        ganttBodyContainer.removeEventListener("mousedown", onScrollStart);
+        ganttBodyContainer.removeEventListener("mouseup", onScrollEnd);
+        ganttBodyContainer.removeEventListener("mouseout", onScrollEnd);
       };
     }, [verticalScrollbarRef, horizontalContainerRef, verticalGanttContainerRef]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -13330,7 +13330,7 @@
               ref: horizontalContainerRef,
               className: styles$2.horizontalContainer,
               style: containerStyle,
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: gridStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: gridStyle, ref: ganttBodyRef, children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "svg",
                 {
                   xmlns: "http://www.w3.org/2000/svg",
@@ -13340,15 +13340,6 @@
                   ref: ganttSVGRef,
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(GanttToday, { ...ganttTodayProps }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "rect",
-                      {
-                        ref: contentRef,
-                        width: "100%",
-                        height: "100%",
-                        fill: "transparent"
-                      }
-                    ),
                     /* @__PURE__ */ jsxRuntime.jsx(TaskGanttContent, { ...barProps })
                   ]
                 }

package/package.json

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