gantt-lib 0.75.1 → 0.76.0

package/dist/index.mjs

@@ -7305,12 +7305,86 @@ var compareParsedItems = (a, b) => {
   }
   return a.item.id.localeCompare(b.item.id);
 };
+var getOverlapRange = (left, right) => {
+  const startDay = Math.max(getUTCDayNumber(left.startDate), getUTCDayNumber(right.startDate));
+  const endDay = Math.min(getUTCDayNumber(left.endDate), getUTCDayNumber(right.endDate));
+  if (startDay > endDay) {
+    return null;
+  }
+  return {
+    startDate: new Date(startDay * 864e5),
+    endDate: new Date(endDay * 864e5),
+    itemIds: [left.item.id, right.item.id]
+  };
+};
+var mergeConflictRanges = (ranges) => {
+  const sortedRanges = [...ranges].sort(
+    (left, right) => getUTCDayNumber(left.startDate) - getUTCDayNumber(right.startDate) || getUTCDayNumber(left.endDate) - getUTCDayNumber(right.endDate)
+  );
+  const merged = [];
+  for (const range of sortedRanges) {
+    const previous = merged[merged.length - 1];
+    const rangeStartDay = getUTCDayNumber(range.startDate);
+    const rangeEndDay = getUTCDayNumber(range.endDate);
+    if (!previous || rangeStartDay > getUTCDayNumber(previous.endDate) + 1) {
+      merged.push({
+        startDate: range.startDate,
+        endDate: range.endDate,
+        itemIds: [...range.itemIds]
+      });
+      continue;
+    }
+    if (rangeEndDay > getUTCDayNumber(previous.endDate)) {
+      previous.endDate = range.endDate;
+    }
+    previous.itemIds = Array.from(/* @__PURE__ */ new Set([...previous.itemIds, ...range.itemIds])).sort();
+  }
+  return merged;
+};
+var calculateConflictInfo = (parsedItems) => {
+  const conflictRangesByItemId = /* @__PURE__ */ new Map();
+  const conflictsWithByItemId = /* @__PURE__ */ new Map();
+  for (let i = 0; i < parsedItems.length; i++) {
+    for (let j = i + 1; j < parsedItems.length; j++) {
+      const left = parsedItems[i];
+      const right = parsedItems[j];
+      if (getUTCDayNumber(right.startDate) > getUTCDayNumber(left.endDate)) {
+        break;
+      }
+      const overlap = getOverlapRange(left, right);
+      if (!overlap) {
+        continue;
+      }
+      const leftRanges = conflictRangesByItemId.get(left.item.id) ?? [];
+      const rightRanges = conflictRangesByItemId.get(right.item.id) ?? [];
+      leftRanges.push(overlap);
+      rightRanges.push(overlap);
+      conflictRangesByItemId.set(left.item.id, leftRanges);
+      conflictRangesByItemId.set(right.item.id, rightRanges);
+      const leftConflicts = conflictsWithByItemId.get(left.item.id) ?? /* @__PURE__ */ new Set();
+      const rightConflicts = conflictsWithByItemId.get(right.item.id) ?? /* @__PURE__ */ new Set();
+      leftConflicts.add(right.item.id);
+      rightConflicts.add(left.item.id);
+      conflictsWithByItemId.set(left.item.id, leftConflicts);
+      conflictsWithByItemId.set(right.item.id, rightConflicts);
+    }
+  }
+  const result = /* @__PURE__ */ new Map();
+  for (const parsedItem of parsedItems) {
+    result.set(parsedItem.item.id, {
+      conflictRanges: mergeConflictRanges(conflictRangesByItemId.get(parsedItem.item.id) ?? []),
+      conflictsWith: Array.from(conflictsWithByItemId.get(parsedItem.item.id) ?? []).sort()
+    });
+  }
+  return result;
+};
 var layoutResourceTimelineItems = (resources, options) => {
   const rows = [];
   const items = [];
   const diagnostics = [];
   let currentTop = 0;
-  for (const resource of resources) {
+  const rowGap = options.rowGap ?? 0;
+  resources.forEach((resource, resourceIndex) => {
     const parsedItems = [];
     for (const item of resource.items) {
       try {
@@ -7329,6 +7403,7 @@ var layoutResourceTimelineItems = (resources, options) => {
       }
     }
     parsedItems.sort(compareParsedItems);
+    const conflictInfoByItemId = calculateConflictInfo(parsedItems);
     const laneEndDays = [];
     const laidOutItems = [];
     for (const parsed of parsedItems) {
@@ -7342,6 +7417,7 @@ var layoutResourceTimelineItems = (resources, options) => {
         laneEndDays[laneIndex] = endDay;
       }
       const { left, width } = calculateTaskBar(parsed.startDate, parsed.endDate, options.monthStart, options.dayWidth);
+      const conflictInfo = conflictInfoByItemId.get(parsed.item.id);
       laidOutItems.push({
         item: parsed.item,
         itemId: parsed.item.id,
@@ -7354,15 +7430,19 @@ var layoutResourceTimelineItems = (resources, options) => {
         top: currentTop + laneIndex * options.laneHeight,
         height: options.laneHeight,
         startDate: parsed.startDate,
-        endDate: parsed.endDate
+        endDate: parsed.endDate,
+        conflictRanges: conflictInfo?.conflictRanges ?? [],
+        conflictsWith: conflictInfo?.conflictsWith ?? []
       });
     }
     const laneCount = Math.max(1, laneEndDays.length);
     const resourceRowHeight = laneCount * options.laneHeight;
+    const conflictCount = laidOutItems.filter((item) => item.conflictsWith.length > 0).length;
     const row = {
       resource,
       resourceId: resource.id,
       laneCount,
+      conflictCount,
       resourceRowTop: currentTop,
       resourceRowHeight
     };
@@ -7371,8 +7451,8 @@ var layoutResourceTimelineItems = (resources, options) => {
       ...item,
       resourceRowHeight
     })));
-    currentTop += resourceRowHeight;
-  }
+    currentTop += resourceRowHeight + rowGap;
+  });
   return {
     rows,
     items,
@@ -7389,6 +7469,56 @@ var snapToDay = (pixels, dayWidth) => {
 var addUTCDays = (date, days) => {
   return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + days));
 };
+var getDayOffset2 = (date, monthStart) => {
+  return Math.round(
+    (Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()) - Date.UTC(monthStart.getUTCFullYear(), monthStart.getUTCMonth(), monthStart.getUTCDate())) / (24 * 60 * 60 * 1e3)
+  );
+};
+var resolveResourceMoveRange = (activeDrag, nextLeft, nextWidth) => {
+  const dayOffset = Math.round(nextLeft / activeDrag.dayWidth);
+  const durationDays = Math.round(nextWidth / activeDrag.dayWidth);
+  const rawStartDate = addUTCDays(activeDrag.monthStart, dayOffset);
+  const rawEndDate = addUTCDays(rawStartDate, durationDays - 1);
+  if (!activeDrag.businessDays || !activeDrag.weekendPredicate) {
+    return {
+      startDate: rawStartDate,
+      endDate: rawEndDate,
+      left: nextLeft,
+      width: nextWidth
+    };
+  }
+  const range = (() => {
+    if (activeDrag.mode === "resize-start") {
+      const snapDirection2 = rawStartDate.getTime() >= activeDrag.startDate.getTime() ? 1 : -1;
+      const duration = getBusinessDaysCount(rawStartDate, activeDrag.endDate, activeDrag.weekendPredicate);
+      return buildTaskRangeFromEnd(activeDrag.endDate, duration, true, activeDrag.weekendPredicate, snapDirection2);
+    }
+    if (activeDrag.mode === "resize-end") {
+      const snapDirection2 = rawEndDate.getTime() >= activeDrag.endDate.getTime() ? 1 : -1;
+      const duration = getBusinessDaysCount(activeDrag.startDate, rawEndDate, activeDrag.weekendPredicate);
+      return buildTaskRangeFromStart(activeDrag.startDate, duration, true, activeDrag.weekendPredicate, snapDirection2);
+    }
+    const dayDelta = Math.round((nextLeft - activeDrag.initialLeft) / activeDrag.dayWidth);
+    const proposedStartDate = addUTCDays(activeDrag.startDate, dayDelta);
+    const snapDirection = proposedStartDate.getTime() >= activeDrag.startDate.getTime() ? 1 : -1;
+    return moveTaskRange(
+      activeDrag.startDate,
+      activeDrag.endDate,
+      proposedStartDate,
+      true,
+      activeDrag.weekendPredicate,
+      snapDirection
+    );
+  })();
+  const startOffset = getDayOffset2(range.start, activeDrag.monthStart);
+  const endOffset = getDayOffset2(range.end, activeDrag.monthStart);
+  return {
+    startDate: range.start,
+    endDate: range.end,
+    left: Math.round(startOffset * activeDrag.dayWidth),
+    width: Math.round((endOffset - startOffset + 1) * activeDrag.dayWidth)
+  };
+};
 var resolveTargetResource = (rows, clientY, gridTop) => {
   const localY = clientY - gridTop;
   return rows.find(
@@ -7397,10 +7527,13 @@ var resolveTargetResource = (rows, clientY, gridTop) => {
 };
 var useResourceItemDrag = ({
   dayWidth,
+  monthStart,
   rows,
   gridElementRef,
   readonly,
   disableResourceReassignment,
+  businessDays = false,
+  weekendPredicate,
   onResourceItemMove
 }) => {
   const activeDragRef = useRef7(null);
@@ -7437,14 +7570,30 @@ var useResourceItemDrag = ({
         if (!latestDrag) {
           return;
         }
-        const nextLeft = latestDrag.initialLeft + snapToDay(event.clientX - latestDrag.startX, latestDrag.dayWidth);
-        const nextTop = disableResourceReassignment ? latestDrag.initialTop : latestDrag.initialTop + (event.clientY - latestDrag.startY);
-        latestDrag.currentLeft = nextLeft;
+        const snappedDelta = snapToDay(event.clientX - latestDrag.startX, latestDrag.dayWidth);
+        const rightEdge = latestDrag.initialLeft + latestDrag.initialWidth;
+        const nextGeometry = (() => {
+          if (latestDrag.mode === "resize-start") {
+            const left = Math.min(latestDrag.initialLeft + snappedDelta, rightEdge - latestDrag.dayWidth);
+            return { left, width: rightEdge - left };
+          }
+          if (latestDrag.mode === "resize-end") {
+            return { left: latestDrag.initialLeft, width: Math.max(latestDrag.dayWidth, latestDrag.initialWidth + snappedDelta) };
+          }
+          return { left: latestDrag.initialLeft + snappedDelta, width: latestDrag.initialWidth };
+        })();
+        const nextRange = resolveResourceMoveRange(latestDrag, nextGeometry.left, nextGeometry.width);
+        const nextTop = disableResourceReassignment || latestDrag.mode !== "move" ? latestDrag.initialTop : latestDrag.initialTop + (event.clientY - latestDrag.startY);
+        latestDrag.currentLeft = nextRange.left;
+        latestDrag.currentWidth = nextRange.width;
         latestDrag.currentTop = nextTop;
         setPreview({
           itemId: latestDrag.itemId,
-          left: nextLeft,
-          top: nextTop
+          left: nextRange.left,
+          top: nextTop,
+          width: nextRange.width,
+          startDate: nextRange.startDate,
+          endDate: nextRange.endDate
         });
       });
     };
@@ -7457,18 +7606,20 @@ var useResourceItemDrag = ({
       activeDragRef.current = null;
       setPreview(null);
       const gridTop = gridElementRef?.current?.getBoundingClientRect().top ?? 0;
-      const targetResource = disableResourceReassignment ? rowsRef.current.find((row) => row.resourceId === activeDrag.fromResourceId)?.resource ?? null : resolveTargetResource(rowsRef.current, event.clientY, gridTop);
+      const targetResource = disableResourceReassignment || activeDrag.mode !== "move" ? rowsRef.current.find((row) => row.resourceId === activeDrag.fromResourceId)?.resource ?? null : resolveTargetResource(rowsRef.current, event.clientY, gridTop);
       if (!targetResource) {
         return;
       }
-      const dayDelta = Math.round((activeDrag.currentLeft - activeDrag.initialLeft) / activeDrag.dayWidth);
+      const nextRange = resolveResourceMoveRange(activeDrag, activeDrag.currentLeft, activeDrag.currentWidth);
       onResourceItemMoveRef.current?.({
         item: activeDrag.item,
         itemId: activeDrag.itemId,
+        taskId: activeDrag.item.taskId,
         fromResourceId: activeDrag.fromResourceId,
         toResourceId: targetResource.id,
-        startDate: addUTCDays(activeDrag.startDate, dayDelta),
-        endDate: addUTCDays(activeDrag.endDate, dayDelta)
+        startDate: nextRange.startDate,
+        endDate: nextRange.endDate,
+        changeType: activeDrag.mode
       });
     };
     window.addEventListener("mousemove", handleMouseMove);
@@ -7483,27 +7634,38 @@ var useResourceItemDrag = ({
     if (readonly || layoutItem.item.locked || event.button !== 0) {
       return;
     }
+    const target = event.target;
+    const mode = target.closest(".gantt-resourceTimeline-resizeHandleStart") ? "resize-start" : target.closest(".gantt-resourceTimeline-resizeHandleEnd") ? "resize-end" : "move";
     event.preventDefault();
     activeDragRef.current = {
       item: layoutItem.item,
       itemId: layoutItem.itemId,
+      mode,
       fromResourceId: layoutItem.resourceId,
       startX: event.clientX,
       startY: event.clientY,
       initialLeft: layoutItem.left,
       initialTop: layoutItem.top,
+      initialWidth: layoutItem.width,
       currentLeft: layoutItem.left,
       currentTop: layoutItem.top,
+      currentWidth: layoutItem.width,
       dayWidth,
       startDate: layoutItem.startDate,
-      endDate: layoutItem.endDate
+      endDate: layoutItem.endDate,
+      monthStart,
+      businessDays,
+      weekendPredicate
     };
     setPreview({
       itemId: layoutItem.itemId,
       left: layoutItem.left,
-      top: layoutItem.top
+      top: layoutItem.top,
+      width: layoutItem.width,
+      startDate: layoutItem.startDate,
+      endDate: layoutItem.endDate
     });
-  }, [dayWidth, readonly]);
+  }, [businessDays, dayWidth, monthStart, readonly, weekendPredicate]);
   return {
     preview,
     startDrag,
@@ -7517,6 +7679,7 @@ var DEFAULT_DAY_WIDTH = 40;
 var DEFAULT_HEADER_HEIGHT = 40;
 var DEFAULT_LANE_HEIGHT = 40;
 var DEFAULT_ROW_HEADER_WIDTH = 240;
+var DEFAULT_RESOURCE_ROW_GAP = 8;
 var ITEM_OUTER_VERTICAL_INSET = 2;
 var ITEM_INNER_VERTICAL_INSET = 1;
 var ITEM_HORIZONTAL_INSET = 1;
@@ -7576,12 +7739,58 @@ var getVisualItemGeometry = (geometry, laneIndex, laneCount) => {
     height: Math.max(0, geometry.height - topInset - bottomInset)
   };
 };
+var getWeekendOverlaySegments = (startDate, endDate, dayWidth, weekendPredicate) => {
+  const segments2 = [];
+  const current = new Date(Date.UTC(startDate.getUTCFullYear(), startDate.getUTCMonth(), startDate.getUTCDate()));
+  let activeStartOffset = null;
+  let offset = 0;
+  while (current.getTime() <= endDate.getTime()) {
+    const isWeekendDay = weekendPredicate(current);
+    if (isWeekendDay && activeStartOffset === null) {
+      activeStartOffset = offset;
+    }
+    if (!isWeekendDay && activeStartOffset !== null) {
+      segments2.push({
+        left: Math.round(activeStartOffset * dayWidth),
+        width: Math.round((offset - activeStartOffset) * dayWidth)
+      });
+      activeStartOffset = null;
+    }
+    current.setUTCDate(current.getUTCDate() + 1);
+    offset += 1;
+  }
+  if (activeStartOffset !== null) {
+    segments2.push({
+      left: Math.round(activeStartOffset * dayWidth),
+      width: Math.round((offset - activeStartOffset) * dayWidth)
+    });
+  }
+  return segments2;
+};
+var getRangeOverlaySegments = (itemStartDate, ranges, dayWidth) => {
+  return ranges.map((range) => {
+    const startOffset = Math.max(0, Math.round(
+      (Date.UTC(range.startDate.getUTCFullYear(), range.startDate.getUTCMonth(), range.startDate.getUTCDate()) - Date.UTC(itemStartDate.getUTCFullYear(), itemStartDate.getUTCMonth(), itemStartDate.getUTCDate())) / (24 * 60 * 60 * 1e3)
+    ));
+    const endOffset = Math.max(startOffset, Math.round(
+      (Date.UTC(range.endDate.getUTCFullYear(), range.endDate.getUTCMonth(), range.endDate.getUTCDate()) - Date.UTC(itemStartDate.getUTCFullYear(), itemStartDate.getUTCMonth(), itemStartDate.getUTCDate())) / (24 * 60 * 60 * 1e3)
+    ));
+    return {
+      left: Math.round(startOffset * dayWidth),
+      width: Math.round((endOffset - startOffset + 1) * dayWidth)
+    };
+  });
+};
+var getDurationValue = (startDate, endDate, businessDays, weekendPredicate) => businessDays ? getBusinessDaysCount(startDate, endDate, weekendPredicate) : Math.max(1, Math.round((endDate.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1e3)) + 1);
 function ResourceTimelineChart({
   resources,
   dayWidth = DEFAULT_DAY_WIDTH,
   rowHeaderWidth = DEFAULT_ROW_HEADER_WIDTH,
   laneHeight = DEFAULT_LANE_HEIGHT,
   headerHeight = DEFAULT_HEADER_HEIGHT,
+  customDays,
+  isWeekend: isWeekend3,
+  businessDays = true,
   readonly,
   disableResourceReassignment,
   renderItem,
@@ -7599,9 +7808,18 @@ function ResourceTimelineChart({
     const firstDay = dateRange[0] ?? /* @__PURE__ */ new Date();
     return new Date(Date.UTC(firstDay.getUTCFullYear(), firstDay.getUTCMonth(), 1));
   }, [dateRange]);
+  const weekendPredicate = useMemo9(
+    () => createCustomDayPredicate({ customDays, isWeekend: isWeekend3 }),
+    [customDays, isWeekend3]
+  );
   const gridWidth = useMemo9(() => Math.round(dateRange.length * dayWidth), [dateRange.length, dayWidth]);
   const layout = useMemo9(
-    () => layoutResourceTimelineItems(resources, { monthStart, dayWidth, laneHeight }),
+    () => layoutResourceTimelineItems(resources, {
+      monthStart,
+      dayWidth,
+      laneHeight,
+      rowGap: DEFAULT_RESOURCE_ROW_GAP
+    }),
     [resources, monthStart, dayWidth, laneHeight]
   );
   const todayInRange = useMemo9(() => {
@@ -7620,10 +7838,13 @@ function ResourceTimelineChart({
   }, [layout.items]);
   const { preview, startDrag } = useResourceItemDrag({
     dayWidth,
+    monthStart,
     rows: layout.rows,
     gridElementRef: gridRef,
     readonly,
     disableResourceReassignment,
+    businessDays,
+    weekendPredicate,
     onResourceItemMove
   });
   const handlePanStart = useCallback7((event) => {
@@ -7702,13 +7923,26 @@ function ResourceTimelineChart({
                   style: { height: `${headerHeight}px` }
                 }
               ),
-              layout.rows.map((row) => /* @__PURE__ */ jsx15(
+              layout.rows.map((row) => /* @__PURE__ */ jsxs12(
                 "div",
                 {
                   className: "gantt-resourceTimeline-resourceHeader",
                   "data-resource-row-id": row.resourceId,
-                  style: { height: `${row.resourceRowHeight}px` },
-                  children: /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-resourceName", children: row.resource.name })
+                  style: {
+                    height: `${row.resourceRowHeight + DEFAULT_RESOURCE_ROW_GAP}px`,
+                    paddingBottom: `${DEFAULT_RESOURCE_ROW_GAP}px`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-resourceName", children: row.resource.name }),
+                    row.conflictCount > 0 && /* @__PURE__ */ jsx15(
+                      "span",
+                      {
+                        className: "gantt-resourceTimeline-conflictBadge",
+                        "aria-label": `${row.conflictCount} \u043A\u043E\u043D\u0444\u043B\u0438\u043A\u0442\u043E\u0432`,
+                        children: row.conflictCount
+                      }
+                    )
+                  ]
                 },
                 row.resourceId
               ))
@@ -7721,7 +7955,15 @@ function ResourceTimelineChart({
             className: "gantt-resourceTimeline-chartSurface",
             style: { minWidth: `${gridWidth}px` },
             children: [
-              /* @__PURE__ */ jsx15("div", { className: "gantt-resourceTimeline-stickyHeader", style: { width: `${gridWidth}px` }, children: /* @__PURE__ */ jsx15(TimeScaleHeader_default, { days: dateRange, dayWidth, headerHeight }) }),
+              /* @__PURE__ */ jsx15("div", { className: "gantt-resourceTimeline-stickyHeader", style: { width: `${gridWidth}px` }, children: /* @__PURE__ */ jsx15(
+                TimeScaleHeader_default,
+                {
+                  days: dateRange,
+                  dayWidth,
+                  headerHeight,
+                  isCustomWeekend: weekendPredicate
+                }
+              ) }),
               /* @__PURE__ */ jsxs12(
                 "div",
                 {
@@ -7729,7 +7971,15 @@ function ResourceTimelineChart({
                   className: "gantt-resourceTimeline-grid",
                   style: { width: `${gridWidth}px`, height: `${layout.totalHeight}px` },
                   children: [
-                    /* @__PURE__ */ jsx15(GridBackground_default, { dateRange, dayWidth, totalHeight: layout.totalHeight }),
+                    /* @__PURE__ */ jsx15(
+                      GridBackground_default,
+                      {
+                        dateRange,
+                        dayWidth,
+                        totalHeight: layout.totalHeight,
+                        isCustomWeekend: weekendPredicate
+                      }
+                    ),
                     todayInRange && /* @__PURE__ */ jsx15(TodayIndicator_default, { monthStart, dayWidth }),
                     layout.rows.map((row) => /* @__PURE__ */ jsx15(
                       "div",
@@ -7738,7 +7988,7 @@ function ResourceTimelineChart({
                         "data-resource-row-id": row.resourceId,
                         style: {
                           top: `${row.resourceRowTop}px`,
-                          height: `${row.resourceRowHeight}px`
+                          height: `${row.resourceRowHeight + DEFAULT_RESOURCE_ROW_GAP}px`
                         }
                       },
                       row.resourceId
@@ -7746,17 +7996,18 @@ function ResourceTimelineChart({
                     Array.from(itemsByResourceId.values()).flatMap(
                       (resourceItems) => resourceItems.map((layoutItem) => {
                         const customClassName = getItemClassName?.(layoutItem.item);
+                        const isDraggingItem = preview?.itemId === layoutItem.itemId;
                         const className = [
                           "gantt-resourceTimeline-item",
-                          preview?.itemId === layoutItem.itemId && "gantt-resourceTimeline-itemDragging",
+                          isDraggingItem && "gantt-resourceTimeline-itemDragging",
                           (readonly || layoutItem.item.locked) && "gantt-resourceTimeline-itemDisabled",
                           customClassName
                         ].filter(Boolean).join(" ");
                         const laneCount = Math.max(1, Math.round(layoutItem.resourceRowHeight / layoutItem.height));
-                        const previewStyle = preview?.itemId === layoutItem.itemId ? getVisualItemGeometry({
+                        const previewStyle = isDraggingItem ? getVisualItemGeometry({
                           left: preview.left,
                           top: preview.top,
-                          width: layoutItem.width,
+                          width: preview.width,
                           height: layoutItem.height
                         }, layoutItem.laneIndex, laneCount) : void 0;
                         const itemGeometry = getVisualItemGeometry({
@@ -7765,7 +8016,27 @@ function ResourceTimelineChart({
                           width: layoutItem.width,
                           height: layoutItem.height
                         }, layoutItem.laneIndex, laneCount);
-                        return /* @__PURE__ */ jsx15(
+                        const overlayStartDate = isDraggingItem ? preview.startDate : layoutItem.startDate;
+                        const overlayEndDate = isDraggingItem ? preview.endDate : layoutItem.endDate;
+                        const weekendOverlaySegments = businessDays ? getWeekendOverlaySegments(overlayStartDate, overlayEndDate, dayWidth, weekendPredicate) : [];
+                        const conflictOverlaySegments = getRangeOverlaySegments(
+                          overlayStartDate,
+                          isDraggingItem ? [] : layoutItem.conflictRanges,
+                          dayWidth
+                        );
+                        const durationValue = getDurationValue(
+                          overlayStartDate,
+                          overlayEndDate,
+                          businessDays,
+                          weekendPredicate
+                        );
+                        const renderContext = {
+                          startDate: overlayStartDate,
+                          endDate: overlayEndDate,
+                          durationDays: durationValue,
+                          isDragging: isDraggingItem
+                        };
+                        return /* @__PURE__ */ jsxs12(
                           "div",
                           {
                             className,
@@ -7774,16 +8045,54 @@ function ResourceTimelineChart({
                             style: {
                               left: `${itemGeometry.left}px`,
                               top: `${itemGeometry.top}px`,
-                              ...previewStyle,
                               width: `${itemGeometry.width}px`,
                               height: `${itemGeometry.height}px`,
+                              ...previewStyle,
                               backgroundColor: layoutItem.item.color ?? "var(--gantt-task-bar-default-color, #3b82f6)"
                             },
-                            children: /* @__PURE__ */ jsx15("div", { className: "gantt-resourceTimeline-itemInner", children: renderItem ? renderItem(layoutItem.item) : /* @__PURE__ */ jsxs12(Fragment3, { children: [
-                              /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-itemTitle", children: layoutItem.item.title }),
-                              layoutItem.item.subtitle && /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-itemSubtitle", children: layoutItem.item.subtitle }),
-                              /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-itemDates", children: formatDateRangeLabel(layoutItem.startDate, layoutItem.endDate) })
-                            ] }) })
+                            children: [
+                              !readonly && !layoutItem.item.locked && /* @__PURE__ */ jsxs12(Fragment3, { children: [
+                                /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-resizeHandle gantt-resourceTimeline-resizeHandleStart" }),
+                                /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-resizeHandle gantt-resourceTimeline-resizeHandleEnd" })
+                              ] }),
+                              weekendOverlaySegments.map((segment, index) => /* @__PURE__ */ jsx15(
+                                "span",
+                                {
+                                  className: "gantt-resourceTimeline-weekendOverlay",
+                                  "data-resource-weekend-overlay": "true",
+                                  style: {
+                                    left: `${segment.left}px`,
+                                    width: `${segment.width}px`
+                                  }
+                                },
+                                `weekend-overlay-${index}`
+                              )),
+                              conflictOverlaySegments.map((segment, index) => /* @__PURE__ */ jsx15(
+                                "span",
+                                {
+                                  className: "gantt-resourceTimeline-conflictOverlay",
+                                  "data-resource-conflict-overlay": "true",
+                                  style: {
+                                    left: `${segment.left}px`,
+                                    width: `${segment.width}px`
+                                  }
+                                },
+                                `conflict-overlay-${index}`
+                              )),
+                              /* @__PURE__ */ jsx15("div", { className: "gantt-resourceTimeline-itemInner", children: renderItem ? renderItem(layoutItem.item, renderContext) : /* @__PURE__ */ jsxs12(Fragment3, { children: [
+                                /* @__PURE__ */ jsx15(
+                                  "span",
+                                  {
+                                    className: "gantt-resourceTimeline-itemDurationChip",
+                                    "aria-label": `${durationValue} \u0434`,
+                                    children: durationValue
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-itemTitle", children: layoutItem.item.title }),
+                                layoutItem.item.subtitle && /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-itemSubtitle", children: layoutItem.item.subtitle }),
+                                /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-itemDates", children: formatDateRangeLabel(layoutItem.startDate, layoutItem.endDate) })
+                              ] }) })
+                            ]
                           },
                           layoutItem.itemId
                         );