gantt-task-react-v 1.4.2 → 1.4.4

package/dist/components/other/arrow.d.ts

@@ -17,6 +17,10 @@ type ArrowProps = {
     isCritical: boolean;
     rtl: boolean;
     onArrowDoubleClick?: (taskFrom: Task, taskTo: Task) => void;
+    fromConnectionIndex?: number;
+    fromTotalConnections?: number;
+    toConnectionIndex?: number;
+    toTotalConnections?: number;
 };
 export declare const Arrow: React.NamedExoticComponent<ArrowProps>;
 export {};

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_50mfa_1";
-const mainPath = "_mainPath_50mfa_11";
-const clickZone = "_clickZone_50mfa_49";
+const arrow_clickable = "_arrow_clickable_w0fo0_1";
+const mainPath = "_mainPath_w0fo0_11";
+const clickZone = "_clickZone_w0fo0_57";
 const styles$a = {
   arrow_clickable,
   mainPath,
@@ -11752,7 +11752,11 @@ const ArrowInner = (props) => {
     taskHeight,
     isCritical,
     rtl,
-    onArrowDoubleClick = void 0
+    onArrowDoubleClick = void 0,
+    fromConnectionIndex = 0,
+    fromTotalConnections = 1,
+    toConnectionIndex = 0,
+    toTotalConnections = 1
   } = props;
   const indexFrom = useMemo(
     () => Math.floor(fromY / fullRowHeight),
@@ -11781,7 +11785,11 @@ const ArrowInner = (props) => {
       targetTo === "startOfTask" !== rtl,
       fullRowHeight,
       taskHeight,
-      arrowIndent
+      arrowIndent,
+      fromConnectionIndex,
+      fromTotalConnections,
+      toConnectionIndex,
+      toTotalConnections
     ),
     [
       indexFrom,
@@ -11797,7 +11805,11 @@ const ArrowInner = (props) => {
       rtl,
       fullRowHeight,
       taskHeight,
-      arrowIndent
+      arrowIndent,
+      fromConnectionIndex,
+      fromTotalConnections,
+      toConnectionIndex,
+      toTotalConnections
     ]
   );
   const color = useMemo(() => {
@@ -11851,31 +11863,62 @@ const roundedPath = (points, radius) => {
   d += ` L ${last[0]} ${last[1]}`;
   return d;
 };
-const ARROW_CORNER_RADIUS = 6;
-const drownPathAndTriangle = (indexForm, fromX1, fromX2, fromY, isTaskFromLeftSide, indexTo, toX1, toX2, toY, isTaskToLeftSide, fullRowHeight, taskHeight, arrowIndent) => {
+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 spreadSeed = Math.abs(
-    Math.round(fromX1 + fromX2) * 7 + Math.round(toX1 + toX2) * 13
-  );
-  const maxSpread = Math.min(fullRowHeight * 0.15, 8);
-  const spreadOffset = (spreadSeed % 11 / 10 - 0.5) * maxSpread * 2;
-  const horizontalDockingY = isDownDirected ? (indexForm + 1) * fullRowHeight + spreadOffset : indexForm * fullRowHeight + spreadOffset;
-  const taskFromEndPositionX = isTaskFromLeftSide ? fromX1 - arrowIndent : fromX2 + arrowIndent;
-  const taskToEndPositionX = isTaskToLeftSide ? toX1 - arrowIndent : toX2 + arrowIndent;
-  const taskToEndPositionY = toY + taskHeight / 2;
+  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;
+  const startY = fromY + taskHeight / 2 + fromVertOffset;
   const endX = isTaskToLeftSide ? toX1 : toX2;
-  const waypoints = [
+  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],
     [taskFromEndPositionX, horizontalDockingY],
     [taskToEndPositionX, horizontalDockingY],
-    [taskToEndPositionX, taskToEndPositionY],
-    [endX, taskToEndPositionY]
+    [taskToEndPositionX, endY],
+    [endX, endY]
   ];
+  const waypoints = [rawWaypoints[0]];
+  for (let i = 1; i < rawWaypoints.length; i++) {
+    const prev = waypoints[waypoints.length - 1];
+    const curr = rawWaypoints[i];
+    if (Math.abs(curr[0] - prev[0]) > 0.5 || Math.abs(curr[1] - prev[1]) > 0.5) {
+      waypoints.push(curr);
+    }
+  }
   const path = roundedPath(waypoints, ARROW_CORNER_RADIUS);
-  const trianglePoints = isTaskToLeftSide ? generateTrianglePoints(toX1, taskToEndPositionY, 5, false) : generateTrianglePoints(toX2, taskToEndPositionY, 5, true);
+  const trianglePoints = isTaskToLeftSide ? generateTrianglePoints(toX1, endY, 5, false) : generateTrianglePoints(toX2, endY, 5, true);
   return [path, trianglePoints];
 };
 const relationLine = "_relationLine_wh2qy_1";
@@ -13174,6 +13217,31 @@ const TaskGanttContentInner = (props) => {
         taskById.set(task.id, task);
       }
     });
+    const connectionTotals = /* @__PURE__ */ new Map();
+    for (const [, dependenciesByLevel] of dependencyMap) {
+      for (const [taskId, dependencies] of dependenciesByLevel) {
+        for (const dep of dependencies) {
+          if (!visibleTasksMirror[dep.source.id])
+            continue;
+          const sourceKey = `${dep.source.id}|${dep.sourceTarget}|out`;
+          connectionTotals.set(
+            sourceKey,
+            (connectionTotals.get(sourceKey) || 0) + 1
+          );
+          const targetKey = `${taskId}|${dep.ownTarget}|in`;
+          connectionTotals.set(
+            targetKey,
+            (connectionTotals.get(targetKey) || 0) + 1
+          );
+        }
+      }
+    }
+    const connectionIndices = /* @__PURE__ */ new Map();
+    const getConnectionIndex = (key2) => {
+      const idx = connectionIndices.get(key2) || 0;
+      connectionIndices.set(key2, idx + 1);
+      return idx;
+    };
     const addedSelectedTasks = {};
     const addedDependencies = {};
     for (let index2 = start; index2 <= end; ++index2) {
@@ -13383,7 +13451,17 @@ const TaskGanttContentInner = (props) => {
                       taskHeight,
                       isCritical: isCritical2,
                       rtl,
-                      onArrowDoubleClick
+                      onArrowDoubleClick,
+                      fromConnectionIndex: getConnectionIndex(
+                        `${source.id}|${sourceTarget}|out`
+                      ),
+                      fromTotalConnections: connectionTotals.get(
+                        `${source.id}|${sourceTarget}|out`
+                      ) || 1,
+                      toConnectionIndex: getConnectionIndex(
+                        `${taskId}|${ownTarget}|in`
+                      ),
+                      toTotalConnections: connectionTotals.get(`${taskId}|${ownTarget}|in`) || 1
                     }
                   )
                 },
@@ -13457,7 +13535,17 @@ const TaskGanttContentInner = (props) => {
                       taskHeight,
                       isCritical: isCritical2,
                       rtl,
-                      onArrowDoubleClick
+                      onArrowDoubleClick,
+                      fromConnectionIndex: getConnectionIndex(
+                        `${taskId}|${ownTarget}|out`
+                      ),
+                      fromTotalConnections: connectionTotals.get(`${taskId}|${ownTarget}|out`) || 1,
+                      toConnectionIndex: getConnectionIndex(
+                        `${dependent.id}|${dependentTarget}|in`
+                      ),
+                      toTotalConnections: connectionTotals.get(
+                        `${dependent.id}|${dependentTarget}|in`
+                      ) || 1
                     }
                   )
                 },
@@ -13544,7 +13632,17 @@ const TaskGanttContentInner = (props) => {
                       taskHeight,
                       isCritical,
                       rtl,
-                      onArrowDoubleClick
+                      onArrowDoubleClick,
+                      fromConnectionIndex: getConnectionIndex(
+                        `${source.id}|${sourceTarget}|out`
+                      ),
+                      fromTotalConnections: connectionTotals.get(
+                        `${source.id}|${sourceTarget}|out`
+                      ) || 1,
+                      toConnectionIndex: getConnectionIndex(
+                        `${taskId}|${ownTarget}|in`
+                      ),
+                      toTotalConnections: connectionTotals.get(`${taskId}|${ownTarget}|in`) || 1
                     }
                   )
                 },

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

@@ -11744,9 +11744,9 @@
     ${x - width},${y - width} 
     ${x - width},${y + width}`;
   };
-  const arrow_clickable = "_arrow_clickable_50mfa_1";
-  const mainPath = "_mainPath_50mfa_11";
-  const clickZone = "_clickZone_50mfa_49";
+  const arrow_clickable = "_arrow_clickable_w0fo0_1";
+  const mainPath = "_mainPath_w0fo0_11";
+  const clickZone = "_clickZone_w0fo0_57";
   const styles$a = {
     arrow_clickable,
     mainPath,
@@ -11769,7 +11769,11 @@
       taskHeight,
       isCritical,
       rtl,
-      onArrowDoubleClick = void 0
+      onArrowDoubleClick = void 0,
+      fromConnectionIndex = 0,
+      fromTotalConnections = 1,
+      toConnectionIndex = 0,
+      toTotalConnections = 1
     } = props;
     const indexFrom = React.useMemo(
       () => Math.floor(fromY / fullRowHeight),
@@ -11798,7 +11802,11 @@
         targetTo === "startOfTask" !== rtl,
         fullRowHeight,
         taskHeight,
-        arrowIndent
+        arrowIndent,
+        fromConnectionIndex,
+        fromTotalConnections,
+        toConnectionIndex,
+        toTotalConnections
       ),
       [
         indexFrom,
@@ -11814,7 +11822,11 @@
         rtl,
         fullRowHeight,
         taskHeight,
-        arrowIndent
+        arrowIndent,
+        fromConnectionIndex,
+        fromTotalConnections,
+        toConnectionIndex,
+        toTotalConnections
       ]
     );
     const color = React.useMemo(() => {
@@ -11868,31 +11880,62 @@
     d += ` L ${last[0]} ${last[1]}`;
     return d;
   };
-  const ARROW_CORNER_RADIUS = 6;
-  const drownPathAndTriangle = (indexForm, fromX1, fromX2, fromY, isTaskFromLeftSide, indexTo, toX1, toX2, toY, isTaskToLeftSide, fullRowHeight, taskHeight, arrowIndent) => {
+  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 spreadSeed = Math.abs(
-      Math.round(fromX1 + fromX2) * 7 + Math.round(toX1 + toX2) * 13
-    );
-    const maxSpread = Math.min(fullRowHeight * 0.15, 8);
-    const spreadOffset = (spreadSeed % 11 / 10 - 0.5) * maxSpread * 2;
-    const horizontalDockingY = isDownDirected ? (indexForm + 1) * fullRowHeight + spreadOffset : indexForm * fullRowHeight + spreadOffset;
-    const taskFromEndPositionX = isTaskFromLeftSide ? fromX1 - arrowIndent : fromX2 + arrowIndent;
-    const taskToEndPositionX = isTaskToLeftSide ? toX1 - arrowIndent : toX2 + arrowIndent;
-    const taskToEndPositionY = toY + taskHeight / 2;
+    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;
+    const startY = fromY + taskHeight / 2 + fromVertOffset;
     const endX = isTaskToLeftSide ? toX1 : toX2;
-    const waypoints = [
+    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],
       [taskFromEndPositionX, horizontalDockingY],
       [taskToEndPositionX, horizontalDockingY],
-      [taskToEndPositionX, taskToEndPositionY],
-      [endX, taskToEndPositionY]
+      [taskToEndPositionX, endY],
+      [endX, endY]
     ];
+    const waypoints = [rawWaypoints[0]];
+    for (let i = 1; i < rawWaypoints.length; i++) {
+      const prev = waypoints[waypoints.length - 1];
+      const curr = rawWaypoints[i];
+      if (Math.abs(curr[0] - prev[0]) > 0.5 || Math.abs(curr[1] - prev[1]) > 0.5) {
+        waypoints.push(curr);
+      }
+    }
     const path = roundedPath(waypoints, ARROW_CORNER_RADIUS);
-    const trianglePoints = isTaskToLeftSide ? generateTrianglePoints(toX1, taskToEndPositionY, 5, false) : generateTrianglePoints(toX2, taskToEndPositionY, 5, true);
+    const trianglePoints = isTaskToLeftSide ? generateTrianglePoints(toX1, endY, 5, false) : generateTrianglePoints(toX2, endY, 5, true);
     return [path, trianglePoints];
   };
   const relationLine = "_relationLine_wh2qy_1";
@@ -13191,6 +13234,31 @@
           taskById.set(task.id, task);
         }
       });
+      const connectionTotals = /* @__PURE__ */ new Map();
+      for (const [, dependenciesByLevel] of dependencyMap) {
+        for (const [taskId, dependencies] of dependenciesByLevel) {
+          for (const dep of dependencies) {
+            if (!visibleTasksMirror[dep.source.id])
+              continue;
+            const sourceKey = `${dep.source.id}|${dep.sourceTarget}|out`;
+            connectionTotals.set(
+              sourceKey,
+              (connectionTotals.get(sourceKey) || 0) + 1
+            );
+            const targetKey = `${taskId}|${dep.ownTarget}|in`;
+            connectionTotals.set(
+              targetKey,
+              (connectionTotals.get(targetKey) || 0) + 1
+            );
+          }
+        }
+      }
+      const connectionIndices = /* @__PURE__ */ new Map();
+      const getConnectionIndex = (key2) => {
+        const idx = connectionIndices.get(key2) || 0;
+        connectionIndices.set(key2, idx + 1);
+        return idx;
+      };
       const addedSelectedTasks = {};
       const addedDependencies = {};
       for (let index2 = start; index2 <= end; ++index2) {
@@ -13400,7 +13468,17 @@
                         taskHeight,
                         isCritical: isCritical2,
                         rtl,
-                        onArrowDoubleClick
+                        onArrowDoubleClick,
+                        fromConnectionIndex: getConnectionIndex(
+                          `${source.id}|${sourceTarget}|out`
+                        ),
+                        fromTotalConnections: connectionTotals.get(
+                          `${source.id}|${sourceTarget}|out`
+                        ) || 1,
+                        toConnectionIndex: getConnectionIndex(
+                          `${taskId}|${ownTarget}|in`
+                        ),
+                        toTotalConnections: connectionTotals.get(`${taskId}|${ownTarget}|in`) || 1
                       }
                     )
                   },
@@ -13474,7 +13552,17 @@
                         taskHeight,
                         isCritical: isCritical2,
                         rtl,
-                        onArrowDoubleClick
+                        onArrowDoubleClick,
+                        fromConnectionIndex: getConnectionIndex(
+                          `${taskId}|${ownTarget}|out`
+                        ),
+                        fromTotalConnections: connectionTotals.get(`${taskId}|${ownTarget}|out`) || 1,
+                        toConnectionIndex: getConnectionIndex(
+                          `${dependent.id}|${dependentTarget}|in`
+                        ),
+                        toTotalConnections: connectionTotals.get(
+                          `${dependent.id}|${dependentTarget}|in`
+                        ) || 1
                       }
                     )
                   },
@@ -13561,7 +13649,17 @@
                         taskHeight,
                         isCritical,
                         rtl,
-                        onArrowDoubleClick
+                        onArrowDoubleClick,
+                        fromConnectionIndex: getConnectionIndex(
+                          `${source.id}|${sourceTarget}|out`
+                        ),
+                        fromTotalConnections: connectionTotals.get(
+                          `${source.id}|${sourceTarget}|out`
+                        ) || 1,
+                        toConnectionIndex: getConnectionIndex(
+                          `${taskId}|${ownTarget}|in`
+                        ),
+                        toTotalConnections: connectionTotals.get(`${taskId}|${ownTarget}|in`) || 1
                       }
                     )
                   },

package/dist/style.css

@@ -439,34 +439,38 @@
 ._calendarDragging_15t8b_85 {
   cursor: ew-resize;
 }
-._arrow_clickable_50mfa_1 {
+._arrow_clickable_w0fo0_1 {
   cursor: pointer;
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._arrow_clickable_50mfa_1:hover ._mainPath_50mfa_11 {
+._arrow_clickable_w0fo0_1:hover ._mainPath_w0fo0_11 {
   filter: var(--gantt-hover-filter);
   stroke: var(--gantt-arrow-hover-color, red);
-  stroke-width: 3px;
+  stroke-width: 2px;
+  opacity: 1;
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._arrow_clickable_50mfa_1:hover polygon {
+._arrow_clickable_w0fo0_1:hover polygon {
   fill: var(--gantt-arrow-hover-color, red);
 }
 
-._mainPath_50mfa_11 {
+._mainPath_w0fo0_11 {
   fill: none;
-  stroke-width: 1.5px;
+  stroke-width: 1.2px;
   stroke-linecap: round;
   stroke-linejoin: round;
-  opacity: 0.85;
+  opacity: 0.55;
+  transition:
+    stroke-width 0.15s ease,
+    opacity 0.15s ease;
 }
 
-._clickZone_50mfa_49 {
+._clickZone_w0fo0_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.2",
+  "version": "1.4.4",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",