gantt-task-react-v 1.4.3 → 1.4.4

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_w0fo0_1";
+const mainPath = "_mainPath_w0fo0_11";
+const clickZone = "_clickZone_w0fo0_57";
 const styles$a = {
   arrow_clickable,
   mainPath,
@@ -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],

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_w0fo0_1";
+  const mainPath = "_mainPath_w0fo0_11";
+  const clickZone = "_clickZone_w0fo0_57";
   const styles$a = {
     arrow_clickable,
     mainPath,
@@ -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],

package/dist/style.css

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