gantt-task-react-v 1.4.1 → 1.4.2

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_3bsl2_1";
-const mainPath = "_mainPath_3bsl2_11";
-const clickZone = "_clickZone_3bsl2_43";
+const arrow_clickable = "_arrow_clickable_50mfa_1";
+const mainPath = "_mainPath_50mfa_11";
+const clickZone = "_clickZone_50mfa_49";
 const styles$a = {
   arrow_clickable,
   mainPath,
@@ -11821,18 +11821,60 @@ const ArrowInner = (props) => {
   ) });
 };
 const Arrow = memo(ArrowInner);
+const roundedPath = (points, radius) => {
+  if (points.length < 2)
+    return "";
+  let d = `M ${points[0][0]} ${points[0][1]}`;
+  for (let i = 1; i < points.length - 1; i++) {
+    const prev = points[i - 1];
+    const curr = points[i];
+    const next = points[i + 1];
+    const dx1 = prev[0] - curr[0];
+    const dy1 = prev[1] - curr[1];
+    const len1 = Math.abs(dx1) + Math.abs(dy1);
+    const dx2 = next[0] - curr[0];
+    const dy2 = next[1] - curr[1];
+    const len2 = Math.abs(dx2) + Math.abs(dy2);
+    const r = Math.min(radius, len1 / 2, len2 / 2);
+    if (r <= 0 || len1 === 0 || len2 === 0) {
+      d += ` L ${curr[0]} ${curr[1]}`;
+      continue;
+    }
+    const ux1 = dx1 === 0 ? 0 : dx1 / Math.abs(dx1);
+    const uy1 = dy1 === 0 ? 0 : dy1 / Math.abs(dy1);
+    const ux2 = dx2 === 0 ? 0 : dx2 / Math.abs(dx2);
+    const uy2 = dy2 === 0 ? 0 : dy2 / Math.abs(dy2);
+    d += ` L ${curr[0] + ux1 * r} ${curr[1] + uy1 * r}`;
+    d += ` Q ${curr[0]} ${curr[1]} ${curr[0] + ux2 * r} ${curr[1] + uy2 * r}`;
+  }
+  const last = points[points.length - 1];
+  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 isDownDirected = indexTo > indexForm;
-  const horizontalDockingY = isDownDirected ? (indexForm + 1) * fullRowHeight : indexForm * fullRowHeight;
+  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 path = `M ${isTaskFromLeftSide ? fromX1 : fromX2} ${fromY + taskHeight / 2}
-  H ${taskFromEndPositionX}
-  V ${horizontalDockingY}
-  H ${taskToEndPositionX}
-  V ${taskToEndPositionY}
-  H ${isTaskToLeftSide ? toX1 : toX2}`;
+  const startX = isTaskFromLeftSide ? fromX1 : fromX2;
+  const startY = fromY + taskHeight / 2;
+  const endX = isTaskToLeftSide ? toX1 : toX2;
+  const waypoints = [
+    [startX, startY],
+    [taskFromEndPositionX, startY],
+    [taskFromEndPositionX, horizontalDockingY],
+    [taskToEndPositionX, horizontalDockingY],
+    [taskToEndPositionX, taskToEndPositionY],
+    [endX, taskToEndPositionY]
+  ];
+  const path = roundedPath(waypoints, ARROW_CORNER_RADIUS);
   const trianglePoints = isTaskToLeftSide ? generateTrianglePoints(toX1, taskToEndPositionY, 5, false) : generateTrianglePoints(toX2, taskToEndPositionY, 5, true);
   return [path, trianglePoints];
 };

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

@@ -11744,9 +11744,9 @@
     ${x - width},${y - width} 
     ${x - width},${y + width}`;
   };
-  const arrow_clickable = "_arrow_clickable_3bsl2_1";
-  const mainPath = "_mainPath_3bsl2_11";
-  const clickZone = "_clickZone_3bsl2_43";
+  const arrow_clickable = "_arrow_clickable_50mfa_1";
+  const mainPath = "_mainPath_50mfa_11";
+  const clickZone = "_clickZone_50mfa_49";
   const styles$a = {
     arrow_clickable,
     mainPath,
@@ -11838,18 +11838,60 @@
     ) });
   };
   const Arrow = React.memo(ArrowInner);
+  const roundedPath = (points, radius) => {
+    if (points.length < 2)
+      return "";
+    let d = `M ${points[0][0]} ${points[0][1]}`;
+    for (let i = 1; i < points.length - 1; i++) {
+      const prev = points[i - 1];
+      const curr = points[i];
+      const next = points[i + 1];
+      const dx1 = prev[0] - curr[0];
+      const dy1 = prev[1] - curr[1];
+      const len1 = Math.abs(dx1) + Math.abs(dy1);
+      const dx2 = next[0] - curr[0];
+      const dy2 = next[1] - curr[1];
+      const len2 = Math.abs(dx2) + Math.abs(dy2);
+      const r = Math.min(radius, len1 / 2, len2 / 2);
+      if (r <= 0 || len1 === 0 || len2 === 0) {
+        d += ` L ${curr[0]} ${curr[1]}`;
+        continue;
+      }
+      const ux1 = dx1 === 0 ? 0 : dx1 / Math.abs(dx1);
+      const uy1 = dy1 === 0 ? 0 : dy1 / Math.abs(dy1);
+      const ux2 = dx2 === 0 ? 0 : dx2 / Math.abs(dx2);
+      const uy2 = dy2 === 0 ? 0 : dy2 / Math.abs(dy2);
+      d += ` L ${curr[0] + ux1 * r} ${curr[1] + uy1 * r}`;
+      d += ` Q ${curr[0]} ${curr[1]} ${curr[0] + ux2 * r} ${curr[1] + uy2 * r}`;
+    }
+    const last = points[points.length - 1];
+    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 isDownDirected = indexTo > indexForm;
-    const horizontalDockingY = isDownDirected ? (indexForm + 1) * fullRowHeight : indexForm * fullRowHeight;
+    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 path = `M ${isTaskFromLeftSide ? fromX1 : fromX2} ${fromY + taskHeight / 2}
-  H ${taskFromEndPositionX}
-  V ${horizontalDockingY}
-  H ${taskToEndPositionX}
-  V ${taskToEndPositionY}
-  H ${isTaskToLeftSide ? toX1 : toX2}`;
+    const startX = isTaskFromLeftSide ? fromX1 : fromX2;
+    const startY = fromY + taskHeight / 2;
+    const endX = isTaskToLeftSide ? toX1 : toX2;
+    const waypoints = [
+      [startX, startY],
+      [taskFromEndPositionX, startY],
+      [taskFromEndPositionX, horizontalDockingY],
+      [taskToEndPositionX, horizontalDockingY],
+      [taskToEndPositionX, taskToEndPositionY],
+      [endX, taskToEndPositionY]
+    ];
+    const path = roundedPath(waypoints, ARROW_CORNER_RADIUS);
     const trianglePoints = isTaskToLeftSide ? generateTrianglePoints(toX1, taskToEndPositionY, 5, false) : generateTrianglePoints(toX2, taskToEndPositionY, 5, true);
     return [path, trianglePoints];
   };

package/dist/style.css

@@ -439,31 +439,34 @@
 ._calendarDragging_15t8b_85 {
   cursor: ew-resize;
 }
-._arrow_clickable_3bsl2_1 {
+._arrow_clickable_50mfa_1 {
   cursor: pointer;
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._arrow_clickable_3bsl2_1:hover ._mainPath_3bsl2_11 {
+._arrow_clickable_50mfa_1:hover ._mainPath_50mfa_11 {
   filter: var(--gantt-hover-filter);
   stroke: var(--gantt-arrow-hover-color, red);
   stroke-width: 3px;
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._arrow_clickable_3bsl2_1:hover polygon {
+._arrow_clickable_50mfa_1:hover polygon {
   fill: var(--gantt-arrow-hover-color, red);
 }
 
-._mainPath_3bsl2_11 {
+._mainPath_50mfa_11 {
   fill: none;
-  stroke-width: 2px;
+  stroke-width: 1.5px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0.85;
 }
 
-._clickZone_3bsl2_43 {
+._clickZone_50mfa_49 {
   fill: none;
   stroke: transparent;
-  stroke-width: 8px;
+  stroke-width: 10px;
 }
 ._relationLine_wh2qy_1 {
   /*noinspection CssUnresolvedCustomProperty*/

package/package.json

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