gantt-task-react-v 1.4.4 → 1.4.5

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

@@ -11727,9 +11727,9 @@ const generateTrianglePoints = (x, y, width, isLeftDirected) => {
     ${x - width},${y - width} 
     ${x - width},${y + width}`;
 };
-const arrow_clickable = "_arrow_clickable_w0fo0_1";
-const mainPath = "_mainPath_w0fo0_11";
-const clickZone = "_clickZone_w0fo0_57";
+const arrow_clickable = "_arrow_clickable_1xrbf_1";
+const mainPath = "_mainPath_1xrbf_11";
+const clickZone = "_clickZone_1xrbf_57";
 const styles$a = {
   arrow_clickable,
   mainPath,
@@ -11826,8 +11826,8 @@ const ArrowInner = (props) => {
       onDoubleClick,
       children: [
         onArrowDoubleClick && /* @__PURE__ */ jsx("path", { d: path, className: styles$a.clickZone }),
-        /* @__PURE__ */ jsx("path", { className: styles$a.mainPath, d: path }),
-        /* @__PURE__ */ jsx("polygon", { className: "polygon", points: trianglePoints })
+        /* @__PURE__ */ jsx("path", { className: `${styles$a.mainPath} arrowMainPath`, d: path }),
+        /* @__PURE__ */ jsx("polygon", { className: "polygon arrowPolygon", points: trianglePoints })
       ]
     }
   ) });
@@ -13203,6 +13203,13 @@ const TaskGanttContentInner = (props) => {
     getDate,
     startColumnIndex
   ]);
+  const [hoveredTaskId, setHoveredTaskId] = useState(null);
+  const handleTaskHover = useCallback((taskId) => {
+    setHoveredTaskId(taskId);
+  }, []);
+  const handleTaskLeave = useCallback(() => {
+    setHoveredTaskId(null);
+  }, []);
   const [renderedTasks, renderedArrows, renderedSelectedTasks] = useMemo(() => {
     if (!renderedRowIndexes) {
       return [null, null, null];
@@ -13305,6 +13312,8 @@ const TaskGanttContentInner = (props) => {
             y: safeLevelY,
             width: Math.max(safeContainerWidth, 0),
             height: fullRowHeight,
+            onMouseEnter: () => handleTaskHover(task.id),
+            onMouseLeave: handleTaskLeave,
             children: /* @__PURE__ */ jsx(
               TaskItem,
               {
@@ -13433,6 +13442,8 @@ const TaskGanttContentInner = (props) => {
                   y: containerY,
                   width: safeArrowContainerWidth,
                   height: containerHeight,
+                  "data-from-id": source.id,
+                  "data-to-id": taskId,
                   children: /* @__PURE__ */ jsx(
                     Arrow,
                     {
@@ -13517,6 +13528,8 @@ const TaskGanttContentInner = (props) => {
                   y: containerY,
                   width: safeArrowContainerWidth,
                   height: containerHeight,
+                  "data-from-id": taskId,
+                  "data-to-id": dependent.id,
                   children: /* @__PURE__ */ jsx(
                     Arrow,
                     {
@@ -13614,6 +13627,8 @@ const TaskGanttContentInner = (props) => {
                   y: containerY,
                   width: safeCW,
                   height: containerHeight,
+                  "data-from-id": source.id,
+                  "data-to-id": taskId,
                   children: /* @__PURE__ */ jsx(
                     Arrow,
                     {
@@ -13691,9 +13706,35 @@ const TaskGanttContentInner = (props) => {
     visibleTasksMirror,
     onArrowDoubleClick,
     showProgress,
-    progressColor
+    progressColor,
+    handleTaskHover,
+    handleTaskLeave
   ]);
+  const arrowHighlightStyle = useMemo(() => {
+    if (!hoveredTaskId)
+      return null;
+    const safeId = CSS.escape(hoveredTaskId);
+    return /* @__PURE__ */ jsx("style", { children: `
+        g.arrows svg { opacity: 0.08 !important; transition: opacity 0.15s; }
+        g.arrows svg[data-from-id="${safeId}"],
+        g.arrows svg[data-to-id="${safeId}"] {
+          opacity: 1 !important;
+        }
+        g.arrows svg[data-from-id="${safeId}"] .arrowMainPath,
+        g.arrows svg[data-to-id="${safeId}"] .arrowMainPath {
+          opacity: 1 !important;
+          stroke-width: 2px !important;
+          stroke: var(--gantt-arrow-hover-color, #1976D2) !important;
+        }
+        g.arrows svg[data-from-id="${safeId}"] .arrowPolygon,
+        g.arrows svg[data-to-id="${safeId}"] .arrowPolygon {
+          fill: var(--gantt-arrow-hover-color, #1976D2) !important;
+          opacity: 1 !important;
+        }
+      ` });
+  }, [hoveredTaskId]);
   return /* @__PURE__ */ jsxs("g", { className: "content", children: [
+    arrowHighlightStyle,
     renderedSelectedTasks,
     /* @__PURE__ */ jsx("g", { children: renderedHolidays }),
     /* @__PURE__ */ jsx(

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

@@ -11744,9 +11744,9 @@
     ${x - width},${y - width} 
     ${x - width},${y + width}`;
   };
-  const arrow_clickable = "_arrow_clickable_w0fo0_1";
-  const mainPath = "_mainPath_w0fo0_11";
-  const clickZone = "_clickZone_w0fo0_57";
+  const arrow_clickable = "_arrow_clickable_1xrbf_1";
+  const mainPath = "_mainPath_1xrbf_11";
+  const clickZone = "_clickZone_1xrbf_57";
   const styles$a = {
     arrow_clickable,
     mainPath,
@@ -11843,8 +11843,8 @@
         onDoubleClick,
         children: [
           onArrowDoubleClick && /* @__PURE__ */ jsxRuntime.jsx("path", { d: path, className: styles$a.clickZone }),
-          /* @__PURE__ */ jsxRuntime.jsx("path", { className: styles$a.mainPath, d: path }),
-          /* @__PURE__ */ jsxRuntime.jsx("polygon", { className: "polygon", points: trianglePoints })
+          /* @__PURE__ */ jsxRuntime.jsx("path", { className: `${styles$a.mainPath} arrowMainPath`, d: path }),
+          /* @__PURE__ */ jsxRuntime.jsx("polygon", { className: "polygon arrowPolygon", points: trianglePoints })
         ]
       }
     ) });
@@ -13220,6 +13220,13 @@
       getDate,
       startColumnIndex
     ]);
+    const [hoveredTaskId, setHoveredTaskId] = React.useState(null);
+    const handleTaskHover = React.useCallback((taskId) => {
+      setHoveredTaskId(taskId);
+    }, []);
+    const handleTaskLeave = React.useCallback(() => {
+      setHoveredTaskId(null);
+    }, []);
     const [renderedTasks, renderedArrows, renderedSelectedTasks] = React.useMemo(() => {
       if (!renderedRowIndexes) {
         return [null, null, null];
@@ -13322,6 +13329,8 @@
               y: safeLevelY,
               width: Math.max(safeContainerWidth, 0),
               height: fullRowHeight,
+              onMouseEnter: () => handleTaskHover(task.id),
+              onMouseLeave: handleTaskLeave,
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 TaskItem,
                 {
@@ -13450,6 +13459,8 @@
                     y: containerY,
                     width: safeArrowContainerWidth,
                     height: containerHeight,
+                    "data-from-id": source.id,
+                    "data-to-id": taskId,
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       Arrow,
                       {
@@ -13534,6 +13545,8 @@
                     y: containerY,
                     width: safeArrowContainerWidth,
                     height: containerHeight,
+                    "data-from-id": taskId,
+                    "data-to-id": dependent.id,
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       Arrow,
                       {
@@ -13631,6 +13644,8 @@
                     y: containerY,
                     width: safeCW,
                     height: containerHeight,
+                    "data-from-id": source.id,
+                    "data-to-id": taskId,
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       Arrow,
                       {
@@ -13708,9 +13723,35 @@
       visibleTasksMirror,
       onArrowDoubleClick,
       showProgress,
-      progressColor
+      progressColor,
+      handleTaskHover,
+      handleTaskLeave
     ]);
+    const arrowHighlightStyle = React.useMemo(() => {
+      if (!hoveredTaskId)
+        return null;
+      const safeId = CSS.escape(hoveredTaskId);
+      return /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        g.arrows svg { opacity: 0.08 !important; transition: opacity 0.15s; }
+        g.arrows svg[data-from-id="${safeId}"],
+        g.arrows svg[data-to-id="${safeId}"] {
+          opacity: 1 !important;
+        }
+        g.arrows svg[data-from-id="${safeId}"] .arrowMainPath,
+        g.arrows svg[data-to-id="${safeId}"] .arrowMainPath {
+          opacity: 1 !important;
+          stroke-width: 2px !important;
+          stroke: var(--gantt-arrow-hover-color, #1976D2) !important;
+        }
+        g.arrows svg[data-from-id="${safeId}"] .arrowPolygon,
+        g.arrows svg[data-to-id="${safeId}"] .arrowPolygon {
+          fill: var(--gantt-arrow-hover-color, #1976D2) !important;
+          opacity: 1 !important;
+        }
+      ` });
+    }, [hoveredTaskId]);
     return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "content", children: [
+      arrowHighlightStyle,
       renderedSelectedTasks,
       /* @__PURE__ */ jsxRuntime.jsx("g", { children: renderedHolidays }),
       /* @__PURE__ */ jsxRuntime.jsx(

package/dist/style.css

@@ -439,12 +439,12 @@
 ._calendarDragging_15t8b_85 {
   cursor: ew-resize;
 }
-._arrow_clickable_w0fo0_1 {
+._arrow_clickable_1xrbf_1 {
   cursor: pointer;
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._arrow_clickable_w0fo0_1:hover ._mainPath_w0fo0_11 {
+._arrow_clickable_1xrbf_1:hover ._mainPath_1xrbf_11 {
   filter: var(--gantt-hover-filter);
   stroke: var(--gantt-arrow-hover-color, red);
   stroke-width: 2px;
@@ -452,22 +452,22 @@
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._arrow_clickable_w0fo0_1:hover polygon {
+._arrow_clickable_1xrbf_1:hover polygon {
   fill: var(--gantt-arrow-hover-color, red);
 }
 
-._mainPath_w0fo0_11 {
+._mainPath_1xrbf_11 {
   fill: none;
   stroke-width: 1.2px;
   stroke-linecap: round;
   stroke-linejoin: round;
-  opacity: 0.55;
+  opacity: 0.35;
   transition:
     stroke-width 0.15s ease,
     opacity 0.15s ease;
 }
 
-._clickZone_w0fo0_57 {
+._clickZone_1xrbf_57 {
   fill: none;
   stroke: transparent;
   stroke-width: 12px;

package/package.json

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