gantt-task-react-v 1.4.1 → 1.4.3

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_3bsl2_1";
-const mainPath = "_mainPath_3bsl2_11";
-const clickZone = "_clickZone_3bsl2_43";
+const arrow_clickable = "_arrow_clickable_m4fqb_1";
+const mainPath = "_mainPath_m4fqb_11";
+const clickZone = "_clickZone_m4fqb_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(() => {
@@ -11821,19 +11833,76 @@ const ArrowInner = (props) => {
   ) });
 };
 const Arrow = memo(ArrowInner);
-const drownPathAndTriangle = (indexForm, fromX1, fromX2, fromY, isTaskFromLeftSide, indexTo, toX1, toX2, toY, isTaskToLeftSide, fullRowHeight, taskHeight, arrowIndent) => {
+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 = 8;
+const MAX_EXTRA_INDENT = 20;
+const CONNECTION_SPREAD_RATIO = 0.35;
+const MAX_CORRIDOR_SPREAD = 20;
+const drownPathAndTriangle = (indexForm, fromX1, fromX2, fromY, isTaskFromLeftSide, indexTo, toX1, toX2, toY, isTaskToLeftSide, fullRowHeight, taskHeight, arrowIndent, fromConnectionIndex, fromTotalConnections, toConnectionIndex, toTotalConnections) => {
   const isDownDirected = indexTo > indexForm;
-  const horizontalDockingY = isDownDirected ? (indexForm + 1) * fullRowHeight : indexForm * fullRowHeight;
-  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 trianglePoints = isTaskToLeftSide ? generateTrianglePoints(toX1, taskToEndPositionY, 5, false) : generateTrianglePoints(toX2, taskToEndPositionY, 5, true);
+  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 startX = isTaskFromLeftSide ? fromX1 : fromX2;
+  const startY = fromY + taskHeight / 2 + fromVertOffset;
+  const endX = isTaskToLeftSide ? toX1 : toX2;
+  const endY = toY + taskHeight / 2 + toVertOffset;
+  const rawWaypoints = [
+    [startX, startY],
+    [taskFromEndPositionX, startY],
+    [taskFromEndPositionX, horizontalDockingY],
+    [taskToEndPositionX, horizontalDockingY],
+    [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, endY, 5, false) : generateTrianglePoints(toX2, endY, 5, true);
   return [path, trianglePoints];
 };
 const relationLine = "_relationLine_wh2qy_1";
@@ -13132,6 +13201,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) {
@@ -13341,7 +13435,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
                     }
                   )
                 },
@@ -13415,7 +13519,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
                     }
                   )
                 },
@@ -13502,7 +13616,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_3bsl2_1";
-  const mainPath = "_mainPath_3bsl2_11";
-  const clickZone = "_clickZone_3bsl2_43";
+  const arrow_clickable = "_arrow_clickable_m4fqb_1";
+  const mainPath = "_mainPath_m4fqb_11";
+  const clickZone = "_clickZone_m4fqb_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(() => {
@@ -11838,19 +11850,76 @@
     ) });
   };
   const Arrow = React.memo(ArrowInner);
-  const drownPathAndTriangle = (indexForm, fromX1, fromX2, fromY, isTaskFromLeftSide, indexTo, toX1, toX2, toY, isTaskToLeftSide, fullRowHeight, taskHeight, arrowIndent) => {
+  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 = 8;
+  const MAX_EXTRA_INDENT = 20;
+  const CONNECTION_SPREAD_RATIO = 0.35;
+  const MAX_CORRIDOR_SPREAD = 20;
+  const drownPathAndTriangle = (indexForm, fromX1, fromX2, fromY, isTaskFromLeftSide, indexTo, toX1, toX2, toY, isTaskToLeftSide, fullRowHeight, taskHeight, arrowIndent, fromConnectionIndex, fromTotalConnections, toConnectionIndex, toTotalConnections) => {
     const isDownDirected = indexTo > indexForm;
-    const horizontalDockingY = isDownDirected ? (indexForm + 1) * fullRowHeight : indexForm * fullRowHeight;
-    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 trianglePoints = isTaskToLeftSide ? generateTrianglePoints(toX1, taskToEndPositionY, 5, false) : generateTrianglePoints(toX2, taskToEndPositionY, 5, true);
+    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 startX = isTaskFromLeftSide ? fromX1 : fromX2;
+    const startY = fromY + taskHeight / 2 + fromVertOffset;
+    const endX = isTaskToLeftSide ? toX1 : toX2;
+    const endY = toY + taskHeight / 2 + toVertOffset;
+    const rawWaypoints = [
+      [startX, startY],
+      [taskFromEndPositionX, startY],
+      [taskFromEndPositionX, horizontalDockingY],
+      [taskToEndPositionX, horizontalDockingY],
+      [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, endY, 5, false) : generateTrianglePoints(toX2, endY, 5, true);
     return [path, trianglePoints];
   };
   const relationLine = "_relationLine_wh2qy_1";
@@ -13149,6 +13218,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) {
@@ -13358,7 +13452,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
                       }
                     )
                   },
@@ -13432,7 +13536,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
                       }
                     )
                   },
@@ -13519,7 +13633,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,31 +439,38 @@
 ._calendarDragging_15t8b_85 {
   cursor: ew-resize;
 }
-._arrow_clickable_3bsl2_1 {
+._arrow_clickable_m4fqb_1 {
   cursor: pointer;
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._arrow_clickable_3bsl2_1:hover ._mainPath_3bsl2_11 {
+._arrow_clickable_m4fqb_1:hover ._mainPath_m4fqb_11 {
   filter: var(--gantt-hover-filter);
   stroke: var(--gantt-arrow-hover-color, red);
-  stroke-width: 3px;
+  stroke-width: 2.5px;
+  opacity: 1;
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._arrow_clickable_3bsl2_1:hover polygon {
+._arrow_clickable_m4fqb_1:hover polygon {
   fill: var(--gantt-arrow-hover-color, red);
 }
 
-._mainPath_3bsl2_11 {
+._mainPath_m4fqb_11 {
   fill: none;
-  stroke-width: 2px;
+  stroke-width: 1.4px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0.7;
+  transition:
+    stroke-width 0.15s ease,
+    opacity 0.15s ease;
 }
 
-._clickZone_3bsl2_43 {
+._clickZone_m4fqb_57 {
   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.3",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",