gantt-lib 0.136.0 → 0.136.1

package/dist/index.d.mts

@@ -635,6 +635,8 @@ interface TaskChartSharedProps<TTask extends Task = Task> {
     showTaskDateLabels?: boolean;
     /** Render task names to the right of task bars in Gantt mode (default: true). */
     showTaskNames?: boolean;
+    /** Render composite child mini-bars inside the parent bar (default: true). */
+    showCompositeSegments?: boolean;
     /** Optional vertical timeline markers such as deadlines and checkpoints. */
     timelineMarkers?: TimelineMarker[];
     /** Additional custom columns to render in the TaskList after built-in columns */
@@ -847,6 +849,8 @@ interface TaskRowProps {
     showTaskDateLabels?: boolean;
     /** Render the task name to the right of the task bar (default: true). */
     showTaskNames?: boolean;
+    /** Render composite child mini-bars inside the parent bar (default: true). */
+    showCompositeSegments?: boolean;
     /** Open or close the composite detail rows. */
     onCompositeToggle?: (source: 'release' | 'click' | 'keyboard') => void;
     compactDetail?: boolean;

package/dist/index.d.ts

@@ -635,6 +635,8 @@ interface TaskChartSharedProps<TTask extends Task = Task> {
     showTaskDateLabels?: boolean;
     /** Render task names to the right of task bars in Gantt mode (default: true). */
     showTaskNames?: boolean;
+    /** Render composite child mini-bars inside the parent bar (default: true). */
+    showCompositeSegments?: boolean;
     /** Optional vertical timeline markers such as deadlines and checkpoints. */
     timelineMarkers?: TimelineMarker[];
     /** Additional custom columns to render in the TaskList after built-in columns */
@@ -847,6 +849,8 @@ interface TaskRowProps {
     showTaskDateLabels?: boolean;
     /** Render the task name to the right of the task bar (default: true). */
     showTaskNames?: boolean;
+    /** Render composite child mini-bars inside the parent bar (default: true). */
+    showCompositeSegments?: boolean;
     /** Open or close the composite detail rows. */
     onCompositeToggle?: (source: 'release' | 'click' | 'keyboard') => void;
     compactDetail?: boolean;

package/dist/index.js

@@ -4414,16 +4414,17 @@ var useTaskDrag = (options) => {
 
 // src/components/TaskRow/TaskRow.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var COMPOSITE_SEGMENT_CUT_MIN_PX = 10;
 var formatCompositePreviewDate = (date) => {
   const month = new Intl.DateTimeFormat("ru-RU", { month: "short", timeZone: "UTC" }).format(date).replace(/\.$/, "");
   const yearSuffix = date.getUTCFullYear() === (/* @__PURE__ */ new Date()).getFullYear() ? "" : ` ${String(date.getUTCFullYear()).slice(-2)}`;
   return `${date.getUTCDate()} ${month}${yearSuffix}`;
 };
 var arePropsEqual = (prevProps, nextProps) => {
-  return prevProps.task.id === nextProps.task.id && prevProps.task.name === nextProps.task.name && prevProps.task.startDate === nextProps.task.startDate && prevProps.task.endDate === nextProps.task.endDate && prevProps.task.baselineStartDate === nextProps.task.baselineStartDate && prevProps.task.baselineEndDate === nextProps.task.baselineEndDate && prevProps.task.type === nextProps.task.type && prevProps.task.color === nextProps.task.color && prevProps.task.progress === nextProps.task.progress && prevProps.task.accepted === nextProps.task.accepted && prevProps.monthStart.getTime() === nextProps.monthStart.getTime() && prevProps.dayWidth === nextProps.dayWidth && prevProps.rowHeight === nextProps.rowHeight && prevProps.overridePosition?.left === nextProps.overridePosition?.left && prevProps.overridePosition?.width === nextProps.overridePosition?.width && prevProps.previewPositionStore === nextProps.previewPositionStore && prevProps.allTasks === nextProps.allTasks && prevProps.disableConstraints === nextProps.disableConstraints && prevProps.deferCascadePreview === nextProps.deferCascadePreview && prevProps.task.locked === nextProps.task.locked && prevProps.task.synced === nextProps.task.synced && prevProps.task.divider === nextProps.task.divider && prevProps.highlightExpiredTasks === nextProps.highlightExpiredTasks && prevProps.isCritical === nextProps.isCritical && prevProps.showBaseline === nextProps.showBaseline && prevProps.onCompositeToggle === nextProps.onCompositeToggle && prevProps.compactDetail === nextProps.compactDetail && prevProps.compositeParentColor === nextProps.compositeParentColor && prevProps.compositeExpanded === nextProps.compositeExpanded && prevProps.isFilterMatch === nextProps.isFilterMatch && prevProps.businessDays === nextProps.businessDays && prevProps.customDays === nextProps.customDays && prevProps.isWeekend === nextProps.isWeekend && prevProps.disableTaskDrag === nextProps.disableTaskDrag && prevProps.disableDependencyEditing === nextProps.disableDependencyEditing && prevProps.isDependencyDragActive === nextProps.isDependencyDragActive && prevProps.viewMode === nextProps.viewMode && prevProps.showTaskDateLabels === nextProps.showTaskDateLabels && prevProps.showTaskNames === nextProps.showTaskNames;
+  return prevProps.task.id === nextProps.task.id && prevProps.task.name === nextProps.task.name && prevProps.task.startDate === nextProps.task.startDate && prevProps.task.endDate === nextProps.task.endDate && prevProps.task.baselineStartDate === nextProps.task.baselineStartDate && prevProps.task.baselineEndDate === nextProps.task.baselineEndDate && prevProps.task.type === nextProps.task.type && prevProps.task.color === nextProps.task.color && prevProps.task.progress === nextProps.task.progress && prevProps.task.accepted === nextProps.task.accepted && prevProps.monthStart.getTime() === nextProps.monthStart.getTime() && prevProps.dayWidth === nextProps.dayWidth && prevProps.rowHeight === nextProps.rowHeight && prevProps.overridePosition?.left === nextProps.overridePosition?.left && prevProps.overridePosition?.width === nextProps.overridePosition?.width && prevProps.previewPositionStore === nextProps.previewPositionStore && prevProps.allTasks === nextProps.allTasks && prevProps.disableConstraints === nextProps.disableConstraints && prevProps.deferCascadePreview === nextProps.deferCascadePreview && prevProps.task.locked === nextProps.task.locked && prevProps.task.synced === nextProps.task.synced && prevProps.task.divider === nextProps.task.divider && prevProps.highlightExpiredTasks === nextProps.highlightExpiredTasks && prevProps.isCritical === nextProps.isCritical && prevProps.showBaseline === nextProps.showBaseline && prevProps.onCompositeToggle === nextProps.onCompositeToggle && prevProps.compactDetail === nextProps.compactDetail && prevProps.compositeParentColor === nextProps.compositeParentColor && prevProps.compositeExpanded === nextProps.compositeExpanded && prevProps.isFilterMatch === nextProps.isFilterMatch && prevProps.businessDays === nextProps.businessDays && prevProps.customDays === nextProps.customDays && prevProps.isWeekend === nextProps.isWeekend && prevProps.disableTaskDrag === nextProps.disableTaskDrag && prevProps.disableDependencyEditing === nextProps.disableDependencyEditing && prevProps.isDependencyDragActive === nextProps.isDependencyDragActive && prevProps.viewMode === nextProps.viewMode && prevProps.showTaskDateLabels === nextProps.showTaskDateLabels && prevProps.showTaskNames === nextProps.showTaskNames && prevProps.showCompositeSegments === nextProps.showCompositeSegments;
 };
 var TaskRow = import_react3.default.memo(
-  ({ task, monthStart, dayWidth, rowHeight, onTasksChange, onScheduleIntent, onDragStateChange, rowIndex, allTasks, enableAutoSchedule, disableConstraints, deferCascadePreview = false, overridePosition, previewPositionStore, onCascadeProgress, onCascade, divider, highlightExpiredTasks, isCritical = false, showBaseline = false, isFilterMatch = false, businessDays, customDays, isWeekend: isWeekend3, disableTaskDrag = false, disableDependencyEditing = false, onDependencyPortPointerDown, isDependencyDragActive = false, viewMode = "day", showTaskDateLabels = true, showTaskNames = true, onCompositeToggle, compactDetail = false, compositeParentColor, compositeExpanded = false }) => {
+  ({ task, monthStart, dayWidth, rowHeight, onTasksChange, onScheduleIntent, onDragStateChange, rowIndex, allTasks, enableAutoSchedule, disableConstraints, deferCascadePreview = false, overridePosition, previewPositionStore, onCascadeProgress, onCascade, divider, highlightExpiredTasks, isCritical = false, showBaseline = false, isFilterMatch = false, businessDays, customDays, isWeekend: isWeekend3, disableTaskDrag = false, disableDependencyEditing = false, onDependencyPortPointerDown, isDependencyDragActive = false, viewMode = "day", showTaskDateLabels = true, showTaskNames = true, showCompositeSegments: showCompositeSegmentsProp = true, onCompositeToggle, compactDetail = false, compositeParentColor, compositeExpanded = false }) => {
     const defaultParentBarColor = "#782FC4";
     const [showCompositePreview, setShowCompositePreview] = (0, import_react3.useState)(false);
     const [compositePreviewPosition, setCompositePreviewPosition] = (0, import_react3.useState)(null);
@@ -4605,22 +4606,32 @@ var TaskRow = import_react3.default.memo(
     const compositeSegments = (0, import_react3.useMemo)(() => {
       if (!task.composite || width <= 0) return [];
       const laneEnds = [];
-      return compositeChildren.map((child) => {
+      const segments2 = compositeChildren.map((child) => {
         const segment = calculateTaskBar(parseUTCDate(child.startDate), parseUTCDate(child.endDate), monthStart, dayWidth);
-        let lane = laneEnds.findIndex((end) => end <= segment.left);
-        if (lane < 0) lane = laneEnds.length;
+        let lane = Math.max(0, laneEnds.length - 1);
+        if (laneEnds.length > 0 && segment.left < laneEnds[lane]) {
+          lane = laneEnds.length;
+        }
         laneEnds[lane] = segment.left + segment.width;
         return {
           id: child.id,
           name: child.name,
           left: (segment.left - left) / width * 100,
           width: segment.width / width * 100,
-          lane
+          lane,
+          pxLeft: segment.left - left,
+          cut: false
         };
       });
+      const lastCutByLane = [];
+      for (const segment of [...segments2].sort((a, b) => a.pxLeft - b.pxLeft)) {
+        segment.cut = segment.pxLeft >= 1 && segment.pxLeft - (lastCutByLane[segment.lane] ?? 0) >= COMPOSITE_SEGMENT_CUT_MIN_PX;
+        if (segment.cut) lastCutByLane[segment.lane] = segment.pxLeft;
+      }
+      return segments2;
     }, [task.composite, compositeChildren, monthStart, dayWidth, left, width, displayLeft]);
     const compositeLaneCount = Math.max(1, ...compositeSegments.map((segment) => segment.lane + 1));
-    const showCompositeSegments = task.composite && compositeSegments.length > 0 && visualWidth / compositeSegments.length >= 22;
+    const shouldRenderCompositeSegments = showCompositeSegmentsProp && task.composite && compositeSegments.length > 0 && visualWidth / compositeSegments.length >= 22;
     const shouldRenderBaseline = showBaseline && baselineGeometry !== null;
     const hasPreviewPosition = isDragging || effectiveOverridePosition !== void 0;
     const currentStartDate = hasPreviewPosition ? pixelsToDate(displayLeft, monthStart, dayWidth) : taskStartDate;
@@ -4749,19 +4760,33 @@ var TaskRow = import_react3.default.memo(
                     }
                   ),
                   !milestone && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gantt-tr-resizeHandle gantt-tr-resizeHandleLeft" }),
-                  showCompositeSegments && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gantt-tr-compositeSegments", "aria-hidden": "true", children: compositeSegments.map((segment) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                    "span",
-                    {
-                      className: "gantt-tr-compositeSegment",
-                      style: {
-                        left: `${segment.left}%`,
-                        width: `${segment.width}%`,
-                        top: `${segment.lane / compositeLaneCount * 100}%`,
-                        height: `${100 / compositeLaneCount}%`
-                      }
-                    },
-                    segment.id
-                  )) }),
+                  shouldRenderCompositeSegments && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "gantt-tr-compositeSegments", "aria-hidden": "true", children: [
+                    compositeSegments.map((segment) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "span",
+                      {
+                        className: "gantt-tr-compositeSegment",
+                        style: {
+                          left: `${segment.left}%`,
+                          width: `${segment.width}%`,
+                          top: `${segment.lane / compositeLaneCount * 100}%`,
+                          height: `${100 / compositeLaneCount}%`
+                        }
+                      },
+                      segment.id
+                    )),
+                    compositeSegments.map((segment) => segment.cut ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "span",
+                      {
+                        className: "gantt-tr-compositeSegmentCut",
+                        style: {
+                          left: `${segment.left}%`,
+                          top: `${segment.lane / compositeLaneCount * 100}%`,
+                          height: `${100 / compositeLaneCount}%`
+                        }
+                      },
+                      `${segment.id}-cut`
+                    ) : null)
+                  ] }),
                   task.composite && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gantt-tr-compositeHoverChevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: `gantt-tr-compositeChevron${compositeExpanded ? " gantt-tr-compositeChevron-open" : ""}`, viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m7 4 6 6-6 6", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
                   showDurationInside && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gantt-tr-taskDuration", children: isVisualParent ? getChildCountLabel(childCount) : `${durationDays} \u0434` }),
                   progressWidth > 0 && showProgressInside && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "gantt-tr-progressText", children: [
@@ -14469,6 +14494,7 @@ function TaskGanttChartInner(props, ref) {
     skeletonStartJitterDays = 0,
     showTaskDateLabels = true,
     showTaskNames = true,
+    showCompositeSegments = true,
     timelineMarkers,
     additionalColumns,
     hiddenTaskListColumns,
@@ -14690,8 +14716,8 @@ function TaskGanttChartInner(props, ref) {
   const resolvedRowContentLines = isPlanFactMode ? Math.max(2, Math.floor(rowContentLines)) : Math.max(1, Math.floor(rowContentLines));
   const shouldFillParentRowsInTaskList = fillParentRowsInTaskList ?? isPlanFactMode;
   const effectiveRowHeight = (0, import_react19.useMemo)(
-    () => Math.max(rowHeight, 10 + resolvedRowContentLines * 18),
-    [resolvedRowContentLines, rowHeight]
+    () => rowContentLines === 0 && !isPlanFactMode ? rowHeight : Math.max(rowHeight, 10 + resolvedRowContentLines * 18),
+    [isPlanFactMode, resolvedRowContentLines, rowContentLines, rowHeight]
   );
   const normalizedTasks = (0, import_react19.useMemo)(() => {
     const ordered = normalizeHierarchyTasks(tasks);
@@ -16035,6 +16061,7 @@ function TaskGanttChartInner(props, ref) {
                                     viewMode,
                                     showTaskDateLabels,
                                     showTaskNames,
+                                    showCompositeSegments,
                                     onCompositeToggle: task.composite ? (source) => handleCompositeBarToggle(task.id, source) : void 0,
                                     compositeExpanded: task.composite ? !collapsedParentIds.has(task.id) : void 0
                                   }