gantt-lib 0.80.1 → 0.81.0

package/dist/index.js

@@ -7840,7 +7840,8 @@ var ResourceHeader = ({
   conflictCount,
   height,
   paddingBottom,
-  menuCommands
+  menuCommands,
+  onConflictBadgeClick
 }) => {
   const [menuOpen, setMenuOpen] = (0, import_react14.useState)(false);
   const visibleCommands = (0, import_react14.useMemo)(
@@ -7867,11 +7868,16 @@ var ResourceHeader = ({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-resourceName", children: resource.name }),
         conflictCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "span",
+          "button",
           {
+            type: "button",
             className: "gantt-resourceTimeline-conflictBadge",
             "aria-label": formatOverlapCount(conflictCount),
             title: formatOverlapCount(conflictCount),
+            onClick: (event) => {
+              event.stopPropagation();
+              onConflictBadgeClick?.(resourceId);
+            },
             children: conflictCount
           }
         ),
@@ -7981,6 +7987,8 @@ function ResourceTimelineChart({
   renderItem,
   getItemClassName,
   onResourceItemClick,
+  onResourceItemMenuClick,
+  activeResourceItemId,
   onResourceItemMove,
   onAddResource,
   enableAddResource = true,
@@ -7989,7 +7997,10 @@ function ResourceTimelineChart({
   const scrollContainerRef = (0, import_react14.useRef)(null);
   const gridRef = (0, import_react14.useRef)(null);
   const panStateRef = (0, import_react14.useRef)(null);
+  const conflictNavigationIndexRef = (0, import_react14.useRef)(/* @__PURE__ */ new Map());
+  const conflictHighlightTimeoutRef = (0, import_react14.useRef)(null);
   const [isCreatingResource, setIsCreatingResource] = (0, import_react14.useState)(false);
+  const [activeConflictItemId, setActiveConflictItemId] = (0, import_react14.useState)(null);
   const validItems = (0, import_react14.useMemo)(() => collectValidItems(resources), [resources]);
   const dateRange = (0, import_react14.useMemo)(() => getMultiMonthDays(validItems), [validItems]);
   const monthStart = (0, import_react14.useMemo)(() => {
@@ -8024,6 +8035,23 @@ function ResourceTimelineChart({
     }
     return map;
   }, [layout.items]);
+  const conflictItemsByResourceId = (0, import_react14.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of layout.items) {
+      if (item.conflictRanges.length === 0) {
+        continue;
+      }
+      const next = map.get(item.resourceId) ?? [];
+      next.push(item);
+      map.set(item.resourceId, next);
+    }
+    for (const items of map.values()) {
+      items.sort(
+        (left, right) => left.top - right.top || left.left - right.left || left.itemId.localeCompare(right.itemId)
+      );
+    }
+    return map;
+  }, [layout.items]);
   const canAddResource = enableAddResource && Boolean(onAddResource);
   const resourceAddRowHeight = laneHeight + DEFAULT_RESOURCE_ROW_GAP;
   const displayTotalHeight = layout.totalHeight + (canAddResource ? resourceAddRowHeight : 0);
@@ -8036,6 +8064,31 @@ function ResourceTimelineChart({
     setIsCreatingResource(false);
   }, [onAddResource]);
   const handleCancelNewResource = (0, import_react14.useCallback)(() => setIsCreatingResource(false), []);
+  const handleConflictBadgeClick = (0, import_react14.useCallback)((resourceId) => {
+    const conflictItems = conflictItemsByResourceId.get(resourceId) ?? [];
+    if (conflictItems.length === 0) {
+      return;
+    }
+    const currentIndex = conflictNavigationIndexRef.current.get(resourceId) ?? 0;
+    const target = conflictItems[currentIndex % conflictItems.length];
+    conflictNavigationIndexRef.current.set(resourceId, (currentIndex + 1) % conflictItems.length);
+    const container = scrollContainerRef.current;
+    if (container) {
+      container.scrollTo({
+        left: Math.max(0, Math.round(target.left - dayWidth * 2)),
+        top: Math.max(0, Math.round(target.top - laneHeight)),
+        behavior: "smooth"
+      });
+    }
+    setActiveConflictItemId(target.itemId);
+    if (conflictHighlightTimeoutRef.current) {
+      window.clearTimeout(conflictHighlightTimeoutRef.current);
+    }
+    conflictHighlightTimeoutRef.current = window.setTimeout(() => {
+      setActiveConflictItemId((current) => current === target.itemId ? null : current);
+      conflictHighlightTimeoutRef.current = null;
+    }, 1600);
+  }, [conflictItemsByResourceId, dayWidth, laneHeight]);
   const { preview, startDrag } = useResourceItemDrag({
     dayWidth,
     monthStart,
@@ -8104,6 +8157,13 @@ function ResourceTimelineChart({
       window.removeEventListener("mouseup", handlePanEnd);
     };
   }, [allowVerticalPan]);
+  (0, import_react14.useEffect)(() => {
+    return () => {
+      if (conflictHighlightTimeoutRef.current) {
+        window.clearTimeout(conflictHighlightTimeoutRef.current);
+      }
+    };
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "gantt-container gantt-resourceTimeline", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
@@ -8138,7 +8198,8 @@ function ResourceTimelineChart({
                   conflictCount: row.conflictCount,
                   height: row.resourceRowHeight + DEFAULT_RESOURCE_ROW_GAP,
                   paddingBottom: DEFAULT_RESOURCE_ROW_GAP,
-                  menuCommands: resourceMenuCommands
+                  menuCommands: resourceMenuCommands,
+                  onConflictBadgeClick: handleConflictBadgeClick
                 },
                 row.resourceId
               )),
@@ -8223,9 +8284,14 @@ function ResourceTimelineChart({
                       (resourceItems) => resourceItems.map((layoutItem) => {
                         const customClassName = getItemClassName?.(layoutItem.item);
                         const isDraggingItem = preview?.itemId === layoutItem.itemId;
+                        const hasItemMenu = Boolean(onResourceItemMenuClick);
+                        const isActiveItem = activeResourceItemId === layoutItem.itemId;
                         const className = [
                           "gantt-resourceTimeline-item",
+                          hasItemMenu && "gantt-resourceTimeline-itemHasMenu",
+                          isActiveItem && "gantt-resourceTimeline-itemActive",
                           isDraggingItem && "gantt-resourceTimeline-itemDragging",
+                          activeConflictItemId === layoutItem.itemId && "gantt-resourceTimeline-itemConflictActive",
                           (readonly || layoutItem.item.locked) && "gantt-resourceTimeline-itemDisabled",
                           customClassName
                         ].filter(Boolean).join(" ");
@@ -8324,6 +8390,22 @@ function ResourceTimelineChart({
                                 },
                                 `conflict-overlay-${index}`
                               )),
+                              hasItemMenu && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: "gantt-resourceTimeline-itemMenuButton",
+                                  "aria-label": "\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F \u043D\u0430\u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F",
+                                  onMouseDown: (event) => {
+                                    event.stopPropagation();
+                                  },
+                                  onClick: (event) => {
+                                    event.stopPropagation();
+                                    onResourceItemMenuClick?.(layoutItem.item);
+                                  },
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": "true", children: "\u22EE" })
+                                }
+                              ),
                               /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "gantt-resourceTimeline-itemInner", children: renderItem ? renderItem(layoutItem.item, renderContext) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "gantt-resourceTimeline-defaultItemContent", children: [
                                 /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "gantt-resourceTimeline-defaultItemMain", children: [
                                   /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(