gantt-lib 0.141.3 → 0.142.1

package/dist/index.js

@@ -5413,53 +5413,6 @@ var TaskRow = import_react3.default.memo(
       }
       return { left: segment.left, width: segment.width + activityDrag.dayDelta * dayWidth };
     };
-    const activityLinks = (0, import_react3.useMemo)(() => {
-      const gaps = [];
-      const elbows = [];
-      if (!showActivityLinks || !renderActivities || !activityLayout) return { gaps, elbows };
-      const activities = task.activities ?? [];
-      const segmentById = new Map(activityLayout.segments.map((segment) => [segment.id, segment]));
-      const visibleIds = new Set(visibleActivitySegments.map((segment) => segment.id));
-      const laneTopY = (lane) => activityTopOffset + lane * ACTIVITY_LANE_STEP + (ACTIVITY_LANE_STEP - ACTIVITY_LANE_BAR_HEIGHT) / 2;
-      const liveRect = (segment) => {
-        const geometry = liveActivityGeometry(segment);
-        const chainDelta = activityOverrides?.get(segment.id) ?? 0;
-        const left2 = geometry.left + (chainDelta !== 0 ? chainDelta * dayWidth : 0);
-        return { left: left2, right: left2 + geometry.width };
-      };
-      for (let index = 0; index < activities.length - 1; index += 1) {
-        const predecessor = segmentById.get(activities[index].id);
-        const successor = segmentById.get(activities[index + 1].id);
-        if (!predecessor || !successor) continue;
-        if (!visibleIds.has(predecessor.id) || !visibleIds.has(successor.id)) continue;
-        const lag = activities[index + 1].lag ?? 0;
-        const predRect = liveRect(predecessor);
-        const succRect = liveRect(successor);
-        if (predecessor.lane === successor.lane && succRect.left >= predRect.right) {
-          const width2 = succRect.left - predRect.right;
-          if (width2 >= 1) {
-            gaps.push({ key: `${predecessor.id}->${successor.id}`, left: predRect.right, width: width2, lane: predecessor.lane, lag });
-          }
-          continue;
-        }
-        const predecessorLaneTop = laneTopY(predecessor.lane);
-        const successorLaneTop = laneTopY(successor.lane);
-        const sameLane = predecessor.lane === successor.lane;
-        const reverseOrder = !sameLane && successorLaneTop < predecessorLaneTop;
-        const fromY = reverseOrder ? predecessorLaneTop + 6 : predecessorLaneTop + ACTIVITY_LANE_BAR_HEIGHT - 6;
-        const toY = reverseOrder ? successorLaneTop + ACTIVITY_LANE_BAR_HEIGHT - 6 : successorLaneTop + (sameLane ? ACTIVITY_LANE_STEP : 0) + 6;
-        const fromX = predRect.right;
-        const toX = succRect.left;
-        elbows.push({
-          key: `${predecessor.id}->${successor.id}`,
-          d: calculateDependencyPath({ x: fromX, y: fromY }, { x: toX, y: toY }, false),
-          lagX: toX - 14,
-          lagY: reverseOrder ? fromY - 4 : fromY + 12,
-          lag
-        });
-      }
-      return { gaps, elbows };
-    }, [showActivityLinks, renderActivities, activityLayout, visibleActivitySegments, activityTopOffset, activityOverrides, activityDrag, dayWidth, task.activities]);
     const activityTipData = (0, import_react3.useMemo)(() => {
       if (!activityTipId || !task.activities) return null;
       const activity = task.activities.find((item) => item.id === activityTipId);
@@ -5531,121 +5484,72 @@ var TaskRow = import_react3.default.memo(
                 }
               }
             ),
-            renderActivities && activityLayout && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gantt-tr-activityLanes", children: [
-              activityLinks.elbows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { className: "gantt-tr-activityLinksSvg", width: "100%", height: "100%", "aria-hidden": "true", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("marker", { id: "arrowhead", markerWidth: "8", markerHeight: "6", markerUnits: "userSpaceOnUse", refX: "7", refY: "3", orient: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polygon", { points: "0 0, 8 3, 0 6", fill: "var(--gantt-dependency-line-color, #666666)" }) }) }),
-                activityLinks.elbows.map((link) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { className: "gantt-dependency-path", d: link.d, markerEnd: "url(#arrowhead)" }),
-                  showActivityLag && link.lag !== 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                    "text",
-                    {
-                      className: "gantt-dependency-lag-label",
-                      x: link.lagX,
-                      y: link.lagY,
-                      textAnchor: "middle",
-                      fontSize: "10",
-                      fill: "var(--gantt-dependency-line-color, #666666)",
-                      children: link.lag > 0 ? `+${link.lag}` : `${link.lag}`
+            renderActivities && activityLayout && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gantt-tr-activityLanes", children: visibleActivitySegments.map((segment) => {
+              const live = liveActivityGeometry(segment);
+              const chainDelta = activityOverrides?.get(segment.id) ?? 0;
+              const activityProgress = segment.progress === void 0 ? 0 : Math.min(100, Math.max(0, Math.round(segment.progress)));
+              const liveLeft = live.left + (chainDelta !== 0 ? chainDelta * dayWidth : 0);
+              const isDraggingActivity = activityDrag?.id === segment.id;
+              const isBlockingActivity = blockedActivityIds?.has(segment.id) ?? false;
+              const isAtLimit = isDraggingActivity && activityBlockedBy !== null;
+              const isActiveActivity = activationVisualEnabled && activeActivityKey === activityOwnerKey(task.id, segment.id);
+              const isSameWorkType = activeWork !== null && (segment.id === activeWork.id || activeWork.name !== null && segment.name === activeWork.name);
+              const isDimmed = dimOthers && activeWork !== null && !isSameWorkType;
+              const isChainHighlighted = highlightChain && activeWork !== null && isSameWorkType;
+              return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "div",
+                {
+                  "data-activity-id": segment.id,
+                  className: `gantt-tr-activityBar${isDraggingActivity ? " gantt-tr-activityBar-dragging" : ""}${isBlockingActivity ? " gantt-tr-activityBar-blocking" : ""}${isAtLimit ? " gantt-tr-activityBar-atLimit" : ""}${isActiveActivity ? " gantt-tr-activityBar-active" : ""}${isDimmed ? " gantt-tr-activityBar-dimmed" : ""}${isChainHighlighted ? " gantt-tr-activityBar-chain" : ""}${activityDragEnabled ? "" : " gantt-tr-activityBar-locked"}`,
+                  style: {
+                    left: `${liveLeft}px`,
+                    width: `${live.width}px`,
+                    top: `${activityTopOffset + segment.lane * ACTIVITY_LANE_STEP + (ACTIVITY_LANE_STEP - ACTIVITY_LANE_BAR_HEIGHT) / 2}px`,
+                    height: `${ACTIVITY_LANE_BAR_HEIGHT}px`,
+                    backgroundColor: segment.color || "var(--gantt-task-bar-default-color)"
+                  },
+                  onMouseDown: (event) => {
+                    if (!activityDragEnabled) return;
+                    const activationKey = activityOwnerKey(task.id, segment.id);
+                    const isActive = activityActivationStore?.getActiveKey() === activationKey;
+                    if (activationVisualEnabled && !isActive) {
+                      activityActivationStore?.setActiveKey(activationKey);
                     }
-                  )
-                ] }, link.key))
-              ] }),
-              visibleActivitySegments.map((segment) => {
-                const live = liveActivityGeometry(segment);
-                const chainDelta = activityOverrides?.get(segment.id) ?? 0;
-                const activityProgress = segment.progress === void 0 ? 0 : Math.min(100, Math.max(0, Math.round(segment.progress)));
-                const liveLeft = live.left + (chainDelta !== 0 ? chainDelta * dayWidth : 0);
-                const isDraggingActivity = activityDrag?.id === segment.id;
-                const isBlockingActivity = blockedActivityIds?.has(segment.id) ?? false;
-                const isAtLimit = isDraggingActivity && activityBlockedBy !== null;
-                const isActiveActivity = activationVisualEnabled && activeActivityKey === activityOwnerKey(task.id, segment.id);
-                const isSameWorkType = activeWork !== null && (segment.id === activeWork.id || activeWork.name !== null && segment.name === activeWork.name);
-                const isDimmed = dimOthers && activeWork !== null && !isSameWorkType;
-                const isChainHighlighted = highlightChain && activeWork !== null && isSameWorkType;
-                return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                  "div",
-                  {
-                    "data-activity-id": segment.id,
-                    className: `gantt-tr-activityBar${isDraggingActivity ? " gantt-tr-activityBar-dragging" : ""}${isBlockingActivity ? " gantt-tr-activityBar-blocking" : ""}${isAtLimit ? " gantt-tr-activityBar-atLimit" : ""}${isActiveActivity ? " gantt-tr-activityBar-active" : ""}${isDimmed ? " gantt-tr-activityBar-dimmed" : ""}${isChainHighlighted ? " gantt-tr-activityBar-chain" : ""}${activityDragEnabled ? "" : " gantt-tr-activityBar-locked"}`,
-                    style: {
-                      left: `${liveLeft}px`,
-                      width: `${live.width}px`,
-                      top: `${activityTopOffset + segment.lane * ACTIVITY_LANE_STEP + (ACTIVITY_LANE_STEP - ACTIVITY_LANE_BAR_HEIGHT) / 2}px`,
-                      height: `${ACTIVITY_LANE_BAR_HEIGHT}px`,
-                      backgroundColor: segment.color || "var(--gantt-task-bar-default-color)"
-                    },
-                    onMouseDown: (event) => {
-                      if (!activityDragEnabled) return;
-                      const activationKey = activityOwnerKey(task.id, segment.id);
-                      const isActive = activityActivationStore?.getActiveKey() === activationKey;
-                      if (activationVisualEnabled && !isActive) {
-                        activityActivationStore?.setActiveKey(activationKey);
-                      }
-                      if (activityClickToDrag && !isActive) return;
-                      const target = event.target;
-                      const mode = target.closest(".gantt-tr-resizeHandleLeft") ? "resize-left" : target.closest(".gantt-tr-resizeHandleRight") ? "resize-right" : "move";
-                      handleActivityPointerDown(segment, mode)(event);
-                    },
-                    onMouseEnter: (event) => {
-                      if (activityDrag || activityDragOwner?.get()) return;
-                      setActivityTipPosition(anchorActivityTip(event.currentTarget.getBoundingClientRect()));
-                      setActivityTipId(segment.id);
-                    },
-                    onMouseLeave: () => {
-                      if (!activityDrag) {
-                        setActivityTipId((current) => current === segment.id ? null : current);
-                        activityTipAnchor.current = null;
-                        setActivityTipPosition(null);
-                      }
-                    },
-                    children: [
-                      activityProgress > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                        "span",
-                        {
-                          className: "gantt-tr-activityProgress",
-                          style: { width: `${activityProgress}%` }
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gantt-tr-activityName", style: { color: activityTextColor(segment.color) }, children: segment.name }),
-                      activityDragEnabled && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gantt-tr-resizeHandle gantt-tr-resizeHandleLeft" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gantt-tr-resizeHandle gantt-tr-resizeHandleRight" })
-                      ] })
-                    ]
+                    if (activityClickToDrag && !isActive) return;
+                    const target = event.target;
+                    const mode = target.closest(".gantt-tr-resizeHandleLeft") ? "resize-left" : target.closest(".gantt-tr-resizeHandleRight") ? "resize-right" : "move";
+                    handleActivityPointerDown(segment, mode)(event);
                   },
-                  segment.id
-                );
-              }),
-              activityLinks.gaps.map((gap) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react3.default.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "span",
-                  {
-                    className: "gantt-tr-activityLink",
-                    "aria-hidden": "true",
-                    style: {
-                      left: `${gap.left}px`,
-                      width: `${gap.width}px`,
-                      top: `${activityTopOffset + gap.lane * ACTIVITY_LANE_STEP + ACTIVITY_LANE_STEP / 2}px`
+                  onMouseEnter: (event) => {
+                    if (activityDrag || activityDragOwner?.get()) return;
+                    setActivityTipPosition(anchorActivityTip(event.currentTarget.getBoundingClientRect()));
+                    setActivityTipId(segment.id);
+                  },
+                  onMouseLeave: () => {
+                    if (!activityDrag) {
+                      setActivityTipId((current) => current === segment.id ? null : current);
+                      activityTipAnchor.current = null;
+                      setActivityTipPosition(null);
                     }
-                  }
-                ),
-                showActivityLag && gap.lag > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                  "span",
-                  {
-                    className: "gantt-tr-activityLag",
-                    title: `\u0417\u0430\u0437\u043E\u0440 ${gap.lag} \u0434`,
-                    style: {
-                      left: `${gap.left + gap.width - 14}px`,
-                      top: `${activityTopOffset + gap.lane * ACTIVITY_LANE_STEP + ACTIVITY_LANE_STEP / 2}px`
-                    },
-                    children: [
-                      "+",
-                      gap.lag
-                    ]
-                  }
-                )
-              ] }, gap.key))
-            ] }),
+                  },
+                  children: [
+                    activityProgress > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "span",
+                      {
+                        className: "gantt-tr-activityProgress",
+                        style: { width: `${activityProgress}%` }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gantt-tr-activityName", style: { color: activityTextColor(segment.color) }, children: segment.name }),
+                    activityDragEnabled && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gantt-tr-resizeHandle gantt-tr-resizeHandleLeft" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gantt-tr-resizeHandle gantt-tr-resizeHandleRight" })
+                    ] })
+                  ]
+                },
+                segment.id
+              );
+            }) }),
             !renderActivities && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
               "div",
               {
@@ -6365,8 +6269,8 @@ var DependencyLines = import_react7.default.memo(({
           fromY = predecessor.rowTop + predecessor.rowHeight / 2;
           toY = successor.rowTop + successor.rowHeight / 2;
         } else if (activityEndpoints) {
-          fromY = reverseOrder ? predecessor.rowTop : predecessor.rowTop + predecessor.rowHeight;
-          toY = reverseOrder ? successor.rowTop + successor.rowHeight : successor.rowTop;
+          fromY = reverseOrder ? predecessor.rowTop + 6 : predecessor.rowTop + predecessor.rowHeight - 6;
+          toY = reverseOrder ? successor.rowTop + successor.rowHeight - 6 : successor.rowTop + 6;
         } else if (reverseOrder) {
           fromY = predecessor.rowTop + 10;
           toY = successor.rowTop + successor.rowHeight - 6;
@@ -6404,7 +6308,8 @@ var DependencyLines = import_react7.default.memo(({
           fromY,
           reverseOrder,
           isVirtual,
-          isCritical
+          isCritical,
+          isCoupling: activityEndpoints && predecessor.rowTop === successor.rowTop && edge.type === "FS" && edge.lag === 0 && Math.abs(fromX - finalToX) < 0.01 && !isVirtual
         });
       }
     }
@@ -6521,7 +6426,7 @@ var DependencyLines = import_react7.default.memo(({
             }
           )
         ] }),
-        visibleLines.map(({ id, predecessorId, successorId, linkType, path, hasCycle, lag, fromX, toX, fromY, reverseOrder, isVirtual, isCritical }) => {
+        visibleLines.map(({ id, predecessorId, successorId, linkType, path, hasCycle, lag, fromX, toX, fromY, reverseOrder, isVirtual, isCritical, isCoupling }) => {
           const isHovered = hoveredLineId === id;
           const isSelected = selectedDep != null && id === `${selectedDep.predecessorId}-${selectedDep.successorId}-${selectedDep.linkType}`;
           let pathClassName = "gantt-dependency-path";
@@ -6537,7 +6442,7 @@ var DependencyLines = import_react7.default.memo(({
           else markerEnd = `url(#${markerId("arrowhead")})`;
           const lagColor = isSelected ? "#ef4444" : hasCycle ? "var(--gantt-dependency-cycle-color, #ef4444)" : isCritical ? "var(--gantt-critical-path-color, #dc2626)" : "var(--gantt-dependency-line-color, #666666)";
           return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react7.default.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "g",
               {
                 className: `gantt-dependency-line${isHovered ? " gantt-dependency-line-hovered" : ""}`,
@@ -6555,23 +6460,14 @@ var DependencyLines = import_react7.default.memo(({
                 },
                 role: "button",
                 "aria-label": `\u0421\u0432\u044F\u0437\u044C ${linkType}`,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                    "path",
-                    {
-                      d: path,
-                      className: "gantt-dependency-hit-area"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                    "path",
-                    {
-                      d: path,
-                      className: pathClassName,
-                      markerEnd
-                    }
-                  )
-                ]
+                children: isCoupling ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("title", { children: "\u041F\u043E\u0441\u043B\u0435 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F \xB7 \u0431\u0435\u0437 \u043B\u0430\u0433\u0430" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: toX, cy: fromY, r: 12, className: "gantt-dependency-coupling-hit-area" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: toX, cy: fromY, r: 4, className: `${pathClassName} gantt-dependency-coupling` })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: path, className: "gantt-dependency-hit-area" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: path, className: pathClassName, markerEnd })
+                ] })
               }
             ),
             showLag && lag !== 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -15540,6 +15436,17 @@ function TaskGanttChartInner(props, ref) {
     onTaskDateChangeModeChange: externalOnTaskDateChangeModeChange,
     printDependencyLabels = false
   } = props;
+  const resolvedActivityDependencies = (0, import_react20.useMemo)(() => {
+    if (activityDependencies !== void 0) return activityDependencies;
+    return tasks.flatMap((task) => (task.activities ?? []).slice(1).map((successor, index) => ({
+      predecessorTaskId: task.id,
+      predecessorActivityId: task.activities[index].id,
+      successorTaskId: task.id,
+      successorActivityId: successor.id,
+      type: "FS",
+      lag: successor.lag ?? 0
+    })));
+  }, [tasks, activityDependencies]);
   const dayWidth = !isTableMatrixMode ? props.dayWidth ?? 40 : 40;
   const criticalPathMode = !isTableMatrixMode && !isPlanFactMode ? props.criticalPathMode : void 0;
   const onSubtreeScaleResult = !isTableMatrixMode && !isPlanFactMode ? props.onSubtreeScaleResult : void 0;
@@ -17016,7 +16923,7 @@ function TaskGanttChartInner(props, ref) {
                                 onHoverEnd: () => setActiveTimelineTooltip(null)
                               }
                             ),
-                            showActivityLinks && activityDependencies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActivityDependencyLines, { tasks: visibleTasks, renderedTaskIds: renderedTaskIdsRef.current, dependencies: activityDependencies, highlight: activityDependencyHighlight, monthStart, dayWidth, rowHeight: effectiveRowHeight, gridWidth: renderGridWidth, totalHeight: totalGridHeight, rowIndexByTaskId: visibleTaskIndexMap, rowTops: compositeRowLayout.tops, rowHeights: compositeRowLayout.heights, showLag: showActivityLag, previewStore: activityPreviewStore, horizontalWindow }),
+                            showActivityLinks && resolvedActivityDependencies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActivityDependencyLines, { tasks: visibleTasks, renderedTaskIds: renderedTaskIdsRef.current, dependencies: resolvedActivityDependencies, highlight: activityDependencyHighlight, monthStart, dayWidth, rowHeight: effectiveRowHeight, gridWidth: renderGridWidth, totalHeight: totalGridHeight, rowIndexByTaskId: visibleTaskIndexMap, rowTops: compositeRowLayout.tops, rowHeights: compositeRowLayout.heights, showLag: showActivityLag, previewStore: activityPreviewStore, horizontalWindow }),
                             /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                               DependencyLines_default,
                               {
@@ -17159,7 +17066,7 @@ function TaskGanttChartInner(props, ref) {
                                     activityActivationStore,
                                     activityClickToDrag,
                                     activityActivationMode,
-                                    showActivityLinks: showActivityLinks && activityDependencies === void 0,
+                                    showActivityLinks: false,
                                     showActivityLag,
                                     activityTooltip,
                                     horizontalWindow,