gantt-task-react-v 1.4.0 → 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];
 };
@@ -13126,6 +13168,12 @@ const TaskGanttContentInner = (props) => {
     const tasksRes = [];
     const arrowsRes = [];
     const selectedTasksRes = [];
+    const taskById = /* @__PURE__ */ new Map();
+    mapGlobalRowIndexToTask.forEach((task) => {
+      if (task.type !== "empty") {
+        taskById.set(task.id, task);
+      }
+    });
     const addedSelectedTasks = {};
     const addedDependencies = {};
     for (let index2 = start; index2 <= end; ++index2) {
@@ -13420,6 +13468,93 @@ const TaskGanttContentInner = (props) => {
         );
       }
     }
+    const renderedTop = start * fullRowHeight;
+    const renderedBottom = (end + 1) * fullRowHeight;
+    for (const [comparisonLevel, dependenciesByLevel] of dependencyMap) {
+      let addedDependenciesAtLevel = addedDependencies[comparisonLevel];
+      if (!addedDependenciesAtLevel) {
+        addedDependenciesAtLevel = {};
+        addedDependencies[comparisonLevel] = addedDependenciesAtLevel;
+      }
+      const criticalPathOnLevel = criticalPaths ? criticalPaths.get(comparisonLevel) : void 0;
+      for (const [taskId, dependencies] of dependenciesByLevel) {
+        let addedDependenciesAtTask = addedDependenciesAtLevel[taskId];
+        if (!addedDependenciesAtTask) {
+          addedDependenciesAtTask = {};
+          addedDependenciesAtLevel[taskId] = addedDependenciesAtTask;
+        }
+        const targetTask = taskById.get(taskId);
+        if (!targetTask)
+          continue;
+        const criticalPathForTask = criticalPathOnLevel ? criticalPathOnLevel.dependencies.get(taskId) : void 0;
+        dependencies.filter(({ source }) => {
+          if (addedDependenciesAtTask[source.id])
+            return false;
+          if (!visibleTasksMirror[source.id])
+            return false;
+          return true;
+        }).forEach(
+          ({
+            containerHeight,
+            containerY,
+            innerFromY,
+            innerToY,
+            ownTarget,
+            source,
+            sourceTarget
+          }) => {
+            if (containerY + containerHeight < renderedTop || containerY > renderedBottom) {
+              return;
+            }
+            addedDependenciesAtTask[source.id] = true;
+            const isCritical = criticalPathForTask ? criticalPathForTask.has(source.id) : false;
+            const { x1: fromX1, x2: fromX2 } = getTaskCoordinates2(source);
+            const { x1: targetX1, x2: targetX2 } = getTaskCoordinates2(targetTask);
+            const safeFromX1 = isNaN(fromX1) || !isFinite(fromX1) ? 0 : fromX1;
+            const safeFromX2 = isNaN(fromX2) || !isFinite(fromX2) ? safeFromX1 + 10 : fromX2;
+            const safeTargetX1 = isNaN(targetX1) || !isFinite(targetX1) ? 0 : targetX1;
+            const safeTargetX2 = isNaN(targetX2) || !isFinite(targetX2) ? safeTargetX1 + 10 : targetX2;
+            const cX = Math.min(safeFromX1, safeTargetX1) - DELTA_RELATION_WIDTH;
+            const cW = Math.max(safeFromX2, safeTargetX2) - cX + DELTA_RELATION_WIDTH;
+            const safeCX = isNaN(cX) || !isFinite(cX) ? 0 : cX;
+            const safeCW = isNaN(cW) || !isFinite(cW) ? 100 : Math.max(cW, 0);
+            arrowsRes.push(
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  x: Math.max(safeCX + (additionalLeftSpace || 0), 0),
+                  y: containerY,
+                  width: safeCW,
+                  height: containerHeight,
+                  children: /* @__PURE__ */ jsx(
+                    Arrow,
+                    {
+                      distances,
+                      taskFrom: source,
+                      targetFrom: sourceTarget,
+                      fromX1: safeFromX1 - safeCX,
+                      fromX2: safeFromX2 - safeCX,
+                      fromY: innerFromY,
+                      taskTo: targetTask,
+                      targetTo: ownTarget,
+                      toX1: safeTargetX1 - safeCX,
+                      toX2: safeTargetX2 - safeCX,
+                      toY: innerToY,
+                      fullRowHeight,
+                      taskHeight,
+                      isCritical,
+                      rtl,
+                      onArrowDoubleClick
+                    }
+                  )
+                },
+                `Arrow from ${source.id} to ${taskId} on ${comparisonLevel}`
+              )
+            );
+          }
+        );
+      }
+    }
     return [tasksRes, arrowsRes, selectedTasksRes];
   }, [
     viewMode,

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];
   };
@@ -13143,6 +13185,12 @@
       const tasksRes = [];
       const arrowsRes = [];
       const selectedTasksRes = [];
+      const taskById = /* @__PURE__ */ new Map();
+      mapGlobalRowIndexToTask.forEach((task) => {
+        if (task.type !== "empty") {
+          taskById.set(task.id, task);
+        }
+      });
       const addedSelectedTasks = {};
       const addedDependencies = {};
       for (let index2 = start; index2 <= end; ++index2) {
@@ -13437,6 +13485,93 @@
           );
         }
       }
+      const renderedTop = start * fullRowHeight;
+      const renderedBottom = (end + 1) * fullRowHeight;
+      for (const [comparisonLevel, dependenciesByLevel] of dependencyMap) {
+        let addedDependenciesAtLevel = addedDependencies[comparisonLevel];
+        if (!addedDependenciesAtLevel) {
+          addedDependenciesAtLevel = {};
+          addedDependencies[comparisonLevel] = addedDependenciesAtLevel;
+        }
+        const criticalPathOnLevel = criticalPaths ? criticalPaths.get(comparisonLevel) : void 0;
+        for (const [taskId, dependencies] of dependenciesByLevel) {
+          let addedDependenciesAtTask = addedDependenciesAtLevel[taskId];
+          if (!addedDependenciesAtTask) {
+            addedDependenciesAtTask = {};
+            addedDependenciesAtLevel[taskId] = addedDependenciesAtTask;
+          }
+          const targetTask = taskById.get(taskId);
+          if (!targetTask)
+            continue;
+          const criticalPathForTask = criticalPathOnLevel ? criticalPathOnLevel.dependencies.get(taskId) : void 0;
+          dependencies.filter(({ source }) => {
+            if (addedDependenciesAtTask[source.id])
+              return false;
+            if (!visibleTasksMirror[source.id])
+              return false;
+            return true;
+          }).forEach(
+            ({
+              containerHeight,
+              containerY,
+              innerFromY,
+              innerToY,
+              ownTarget,
+              source,
+              sourceTarget
+            }) => {
+              if (containerY + containerHeight < renderedTop || containerY > renderedBottom) {
+                return;
+              }
+              addedDependenciesAtTask[source.id] = true;
+              const isCritical = criticalPathForTask ? criticalPathForTask.has(source.id) : false;
+              const { x1: fromX1, x2: fromX2 } = getTaskCoordinates2(source);
+              const { x1: targetX1, x2: targetX2 } = getTaskCoordinates2(targetTask);
+              const safeFromX1 = isNaN(fromX1) || !isFinite(fromX1) ? 0 : fromX1;
+              const safeFromX2 = isNaN(fromX2) || !isFinite(fromX2) ? safeFromX1 + 10 : fromX2;
+              const safeTargetX1 = isNaN(targetX1) || !isFinite(targetX1) ? 0 : targetX1;
+              const safeTargetX2 = isNaN(targetX2) || !isFinite(targetX2) ? safeTargetX1 + 10 : targetX2;
+              const cX = Math.min(safeFromX1, safeTargetX1) - DELTA_RELATION_WIDTH;
+              const cW = Math.max(safeFromX2, safeTargetX2) - cX + DELTA_RELATION_WIDTH;
+              const safeCX = isNaN(cX) || !isFinite(cX) ? 0 : cX;
+              const safeCW = isNaN(cW) || !isFinite(cW) ? 100 : Math.max(cW, 0);
+              arrowsRes.push(
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    x: Math.max(safeCX + (additionalLeftSpace || 0), 0),
+                    y: containerY,
+                    width: safeCW,
+                    height: containerHeight,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      Arrow,
+                      {
+                        distances,
+                        taskFrom: source,
+                        targetFrom: sourceTarget,
+                        fromX1: safeFromX1 - safeCX,
+                        fromX2: safeFromX2 - safeCX,
+                        fromY: innerFromY,
+                        taskTo: targetTask,
+                        targetTo: ownTarget,
+                        toX1: safeTargetX1 - safeCX,
+                        toX2: safeTargetX2 - safeCX,
+                        toY: innerToY,
+                        fullRowHeight,
+                        taskHeight,
+                        isCritical,
+                        rtl,
+                        onArrowDoubleClick
+                      }
+                    )
+                  },
+                  `Arrow from ${source.id} to ${taskId} on ${comparisonLevel}`
+                )
+              );
+            }
+          );
+        }
+      }
       return [tasksRes, arrowsRes, selectedTasksRes];
     }, [
       viewMode,

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.0",
+  "version": "1.4.2",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",