gantt-task-react-v 1.4.3 → 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_m4fqb_1";
-const mainPath = "_mainPath_m4fqb_11";
-const clickZone = "_clickZone_m4fqb_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 })
       ]
     }
   ) });
@@ -11863,28 +11863,44 @@ const roundedPath = (points, radius) => {
   d += ` L ${last[0]} ${last[1]}`;
   return d;
 };
-const ARROW_CORNER_RADIUS = 8;
-const MAX_EXTRA_INDENT = 20;
-const CONNECTION_SPREAD_RATIO = 0.35;
-const MAX_CORRIDOR_SPREAD = 20;
+const ARROW_CORNER_RADIUS = 5;
+const connectionPosition = (index2, total) => {
+  if (total <= 1)
+    return 0.5;
+  return index2 / (total - 1);
+};
 const drownPathAndTriangle = (indexForm, fromX1, fromX2, fromY, isTaskFromLeftSide, indexTo, toX1, toX2, toY, isTaskToLeftSide, fullRowHeight, taskHeight, arrowIndent, fromConnectionIndex, fromTotalConnections, toConnectionIndex, toTotalConnections) => {
   const isDownDirected = indexTo > indexForm;
-  const fromVertOffset = fromTotalConnections <= 1 ? 0 : (fromConnectionIndex / (fromTotalConnections - 1) - 0.5) * taskHeight * CONNECTION_SPREAD_RATIO;
-  const toVertOffset = toTotalConnections <= 1 ? 0 : (toConnectionIndex / (toTotalConnections - 1) - 0.5) * taskHeight * CONNECTION_SPREAD_RATIO;
-  const fromIndentSpacing = fromTotalConnections <= 1 ? 0 : MAX_EXTRA_INDENT / (fromTotalConnections - 1);
-  const toIndentSpacing = toTotalConnections <= 1 ? 0 : MAX_EXTRA_INDENT / (toTotalConnections - 1);
-  const fromIndent = arrowIndent + fromConnectionIndex * fromIndentSpacing;
-  const toIndent = arrowIndent + toConnectionIndex * toIndentSpacing;
-  const corridorHash = (fromConnectionIndex * 7 + toConnectionIndex * 13) % 11 / 10;
-  const corridorSpread = Math.min(fullRowHeight * 0.35, MAX_CORRIDOR_SPREAD);
-  const corridorOffset = (corridorHash - 0.5) * corridorSpread;
-  const horizontalDockingY = isDownDirected ? (indexForm + 1) * fullRowHeight + corridorOffset : indexForm * fullRowHeight + corridorOffset;
-  const taskFromEndPositionX = isTaskFromLeftSide ? fromX1 - fromIndent : fromX2 + fromIndent;
-  const taskToEndPositionX = isTaskToLeftSide ? toX1 - toIndent : toX2 + toIndent;
+  const isSameRow = indexForm === indexTo;
+  const vertSpreadRange = taskHeight * 0.8;
+  const fromPos = connectionPosition(fromConnectionIndex, fromTotalConnections);
+  const toPos = connectionPosition(toConnectionIndex, toTotalConnections);
+  const fromVertOffset = (fromPos - 0.5) * vertSpreadRange;
+  const toVertOffset = (toPos - 0.5) * vertSpreadRange;
   const startX = isTaskFromLeftSide ? fromX1 : fromX2;
   const startY = fromY + taskHeight / 2 + fromVertOffset;
   const endX = isTaskToLeftSide ? toX1 : toX2;
   const endY = toY + taskHeight / 2 + toVertOffset;
+  const fromIndent = arrowIndent + fromConnectionIndex * 8;
+  const toIndent = arrowIndent + toConnectionIndex * 8;
+  const taskFromEndPositionX = isTaskFromLeftSide ? fromX1 - fromIndent : fromX2 + fromIndent;
+  const taskToEndPositionX = isTaskToLeftSide ? toX1 - toIndent : toX2 + toIndent;
+  const totalArrowsInCorridor = Math.max(
+    fromTotalConnections,
+    toTotalConnections,
+    1
+  );
+  const corridorIndex = (fromConnectionIndex + toConnectionIndex) % Math.max(totalArrowsInCorridor, 1);
+  const corridorPos = connectionPosition(corridorIndex, totalArrowsInCorridor);
+  const corridorRange = fullRowHeight * 0.7;
+  const corridorBase = isDownDirected ? (indexForm + 1) * fullRowHeight - corridorRange * 0.15 : indexForm * fullRowHeight + corridorRange * 0.15;
+  const corridorOffset = (corridorPos - 0.5) * corridorRange;
+  let horizontalDockingY;
+  if (isSameRow) {
+    horizontalDockingY = isTaskFromLeftSide ? fromY + taskHeight + 6 + fromConnectionIndex * 4 : fromY - 6 - fromConnectionIndex * 4;
+  } else {
+    horizontalDockingY = corridorBase + corridorOffset;
+  }
   const rawWaypoints = [
     [startX, startY],
     [taskFromEndPositionX, startY],
@@ -13187,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];
@@ -13289,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,
               {
@@ -13417,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,
                     {
@@ -13501,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,
                     {
@@ -13598,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,
                     {
@@ -13675,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_m4fqb_1";
-  const mainPath = "_mainPath_m4fqb_11";
-  const clickZone = "_clickZone_m4fqb_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 })
         ]
       }
     ) });
@@ -11880,28 +11880,44 @@
     d += ` L ${last[0]} ${last[1]}`;
     return d;
   };
-  const ARROW_CORNER_RADIUS = 8;
-  const MAX_EXTRA_INDENT = 20;
-  const CONNECTION_SPREAD_RATIO = 0.35;
-  const MAX_CORRIDOR_SPREAD = 20;
+  const ARROW_CORNER_RADIUS = 5;
+  const connectionPosition = (index2, total) => {
+    if (total <= 1)
+      return 0.5;
+    return index2 / (total - 1);
+  };
   const drownPathAndTriangle = (indexForm, fromX1, fromX2, fromY, isTaskFromLeftSide, indexTo, toX1, toX2, toY, isTaskToLeftSide, fullRowHeight, taskHeight, arrowIndent, fromConnectionIndex, fromTotalConnections, toConnectionIndex, toTotalConnections) => {
     const isDownDirected = indexTo > indexForm;
-    const fromVertOffset = fromTotalConnections <= 1 ? 0 : (fromConnectionIndex / (fromTotalConnections - 1) - 0.5) * taskHeight * CONNECTION_SPREAD_RATIO;
-    const toVertOffset = toTotalConnections <= 1 ? 0 : (toConnectionIndex / (toTotalConnections - 1) - 0.5) * taskHeight * CONNECTION_SPREAD_RATIO;
-    const fromIndentSpacing = fromTotalConnections <= 1 ? 0 : MAX_EXTRA_INDENT / (fromTotalConnections - 1);
-    const toIndentSpacing = toTotalConnections <= 1 ? 0 : MAX_EXTRA_INDENT / (toTotalConnections - 1);
-    const fromIndent = arrowIndent + fromConnectionIndex * fromIndentSpacing;
-    const toIndent = arrowIndent + toConnectionIndex * toIndentSpacing;
-    const corridorHash = (fromConnectionIndex * 7 + toConnectionIndex * 13) % 11 / 10;
-    const corridorSpread = Math.min(fullRowHeight * 0.35, MAX_CORRIDOR_SPREAD);
-    const corridorOffset = (corridorHash - 0.5) * corridorSpread;
-    const horizontalDockingY = isDownDirected ? (indexForm + 1) * fullRowHeight + corridorOffset : indexForm * fullRowHeight + corridorOffset;
-    const taskFromEndPositionX = isTaskFromLeftSide ? fromX1 - fromIndent : fromX2 + fromIndent;
-    const taskToEndPositionX = isTaskToLeftSide ? toX1 - toIndent : toX2 + toIndent;
+    const isSameRow = indexForm === indexTo;
+    const vertSpreadRange = taskHeight * 0.8;
+    const fromPos = connectionPosition(fromConnectionIndex, fromTotalConnections);
+    const toPos = connectionPosition(toConnectionIndex, toTotalConnections);
+    const fromVertOffset = (fromPos - 0.5) * vertSpreadRange;
+    const toVertOffset = (toPos - 0.5) * vertSpreadRange;
     const startX = isTaskFromLeftSide ? fromX1 : fromX2;
     const startY = fromY + taskHeight / 2 + fromVertOffset;
     const endX = isTaskToLeftSide ? toX1 : toX2;
     const endY = toY + taskHeight / 2 + toVertOffset;
+    const fromIndent = arrowIndent + fromConnectionIndex * 8;
+    const toIndent = arrowIndent + toConnectionIndex * 8;
+    const taskFromEndPositionX = isTaskFromLeftSide ? fromX1 - fromIndent : fromX2 + fromIndent;
+    const taskToEndPositionX = isTaskToLeftSide ? toX1 - toIndent : toX2 + toIndent;
+    const totalArrowsInCorridor = Math.max(
+      fromTotalConnections,
+      toTotalConnections,
+      1
+    );
+    const corridorIndex = (fromConnectionIndex + toConnectionIndex) % Math.max(totalArrowsInCorridor, 1);
+    const corridorPos = connectionPosition(corridorIndex, totalArrowsInCorridor);
+    const corridorRange = fullRowHeight * 0.7;
+    const corridorBase = isDownDirected ? (indexForm + 1) * fullRowHeight - corridorRange * 0.15 : indexForm * fullRowHeight + corridorRange * 0.15;
+    const corridorOffset = (corridorPos - 0.5) * corridorRange;
+    let horizontalDockingY;
+    if (isSameRow) {
+      horizontalDockingY = isTaskFromLeftSide ? fromY + taskHeight + 6 + fromConnectionIndex * 4 : fromY - 6 - fromConnectionIndex * 4;
+    } else {
+      horizontalDockingY = corridorBase + corridorOffset;
+    }
     const rawWaypoints = [
       [startX, startY],
       [taskFromEndPositionX, startY],
@@ -13204,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];
@@ -13306,6 +13329,8 @@
               y: safeLevelY,
               width: Math.max(safeContainerWidth, 0),
               height: fullRowHeight,
+              onMouseEnter: () => handleTaskHover(task.id),
+              onMouseLeave: handleTaskLeave,
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 TaskItem,
                 {
@@ -13434,6 +13459,8 @@
                     y: containerY,
                     width: safeArrowContainerWidth,
                     height: containerHeight,
+                    "data-from-id": source.id,
+                    "data-to-id": taskId,
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       Arrow,
                       {
@@ -13518,6 +13545,8 @@
                     y: containerY,
                     width: safeArrowContainerWidth,
                     height: containerHeight,
+                    "data-from-id": taskId,
+                    "data-to-id": dependent.id,
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       Arrow,
                       {
@@ -13615,6 +13644,8 @@
                     y: containerY,
                     width: safeCW,
                     height: containerHeight,
+                    "data-from-id": source.id,
+                    "data-to-id": taskId,
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       Arrow,
                       {
@@ -13692,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,38 +439,38 @@
 ._calendarDragging_15t8b_85 {
   cursor: ew-resize;
 }
-._arrow_clickable_m4fqb_1 {
+._arrow_clickable_1xrbf_1 {
   cursor: pointer;
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._arrow_clickable_m4fqb_1:hover ._mainPath_m4fqb_11 {
+._arrow_clickable_1xrbf_1:hover ._mainPath_1xrbf_11 {
   filter: var(--gantt-hover-filter);
   stroke: var(--gantt-arrow-hover-color, red);
-  stroke-width: 2.5px;
+  stroke-width: 2px;
   opacity: 1;
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._arrow_clickable_m4fqb_1:hover polygon {
+._arrow_clickable_1xrbf_1:hover polygon {
   fill: var(--gantt-arrow-hover-color, red);
 }
 
-._mainPath_m4fqb_11 {
+._mainPath_1xrbf_11 {
   fill: none;
-  stroke-width: 1.4px;
+  stroke-width: 1.2px;
   stroke-linecap: round;
   stroke-linejoin: round;
-  opacity: 0.7;
+  opacity: 0.35;
   transition:
     stroke-width 0.15s ease,
     opacity 0.15s ease;
 }
 
-._clickZone_m4fqb_57 {
+._clickZone_1xrbf_57 {
   fill: none;
   stroke: transparent;
-  stroke-width: 10px;
+  stroke-width: 12px;
 }
 ._relationLine_wh2qy_1 {
   /*noinspection CssUnresolvedCustomProperty*/

package/package.json

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