gantt-lib 0.87.0 → 0.88.1

package/dist/index.d.mts

@@ -617,6 +617,8 @@ interface TaskRowProps {
     isWeekend?: (date: Date) => boolean;
     /** Disable task drag and resize (overrides task.locked) */
     disableTaskDrag?: boolean;
+    /** Active chart view mode */
+    viewMode?: 'day' | 'week' | 'month';
 }
 /**
  * TaskRow component - renders a single task row with a task bar
@@ -949,6 +951,8 @@ interface UseTaskDragOptions {
     businessDays?: boolean;
     /** Function that returns true for weekends (for businessDays mode) */
     weekendPredicate?: (date: Date) => boolean;
+    /** Active chart view mode */
+    viewMode?: 'day' | 'week' | 'month';
 }
 /**
  * Return value from useTaskDrag hook
@@ -965,6 +969,8 @@ interface UseTaskDragReturn {
     /** Props to spread on the drag handle element */
     dragHandleProps: {
         onMouseDown: (e: React.MouseEvent) => void;
+        onMouseMove: (e: React.MouseEvent) => void;
+        onMouseLeave: () => void;
         style: React.CSSProperties;
     };
 }

package/dist/index.d.ts

@@ -617,6 +617,8 @@ interface TaskRowProps {
     isWeekend?: (date: Date) => boolean;
     /** Disable task drag and resize (overrides task.locked) */
     disableTaskDrag?: boolean;
+    /** Active chart view mode */
+    viewMode?: 'day' | 'week' | 'month';
 }
 /**
  * TaskRow component - renders a single task row with a task bar
@@ -949,6 +951,8 @@ interface UseTaskDragOptions {
     businessDays?: boolean;
     /** Function that returns true for weekends (for businessDays mode) */
     weekendPredicate?: (date: Date) => boolean;
+    /** Active chart view mode */
+    viewMode?: 'day' | 'week' | 'month';
 }
 /**
  * Return value from useTaskDrag hook
@@ -965,6 +969,8 @@ interface UseTaskDragReturn {
     /** Props to spread on the drag handle element */
     dragHandleProps: {
         onMouseDown: (e: React.MouseEvent) => void;
+        onMouseMove: (e: React.MouseEvent) => void;
+        onMouseLeave: () => void;
         style: React.CSSProperties;
     };
 }

package/dist/index.js

@@ -2291,6 +2291,46 @@ function clampDateRangeForIncomingFS(task, range, allTasks, mode, businessDays,
 // src/hooks/useTaskDrag.ts
 var globalActiveDrag = null;
 var globalRafId = null;
+var globalLockedCursor = null;
+var GLOBAL_CURSOR_STYLE_ID = "gantt-global-drag-cursor-style";
+function ensureGlobalCursorStyle() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(GLOBAL_CURSOR_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = GLOBAL_CURSOR_STYLE_ID;
+  style.textContent = `
+    html.gantt-global-cursor-grabbing,
+    html.gantt-global-cursor-grabbing *,
+    html.gantt-global-cursor-grabbing *::before,
+    html.gantt-global-cursor-grabbing *::after {
+      cursor: grabbing !important;
+    }
+
+    html.gantt-global-cursor-resize,
+    html.gantt-global-cursor-resize *,
+    html.gantt-global-cursor-resize *::before,
+    html.gantt-global-cursor-resize *::after {
+      cursor: ew-resize !important;
+    }
+  `;
+  document.head.appendChild(style);
+}
+function applyGlobalCursor(cursor) {
+  if (typeof document === "undefined") return;
+  ensureGlobalCursorStyle();
+  globalLockedCursor = cursor;
+  document.documentElement.classList.remove("gantt-global-cursor-grabbing", "gantt-global-cursor-resize");
+  document.documentElement.classList.add(cursor === "grabbing" ? "gantt-global-cursor-grabbing" : "gantt-global-cursor-resize");
+  document.body.style.cursor = cursor;
+  document.documentElement.style.cursor = cursor;
+}
+function clearGlobalCursor() {
+  if (typeof document === "undefined") return;
+  globalLockedCursor = null;
+  document.documentElement.classList.remove("gantt-global-cursor-grabbing", "gantt-global-cursor-resize");
+  document.body.style.cursor = "";
+  document.documentElement.style.cursor = "";
+}
 function getDayOffsetFromMonthStart(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)
@@ -2301,6 +2341,7 @@ function completeDrag() {
     cancelAnimationFrame(globalRafId);
     globalRafId = null;
   }
+  clearGlobalCursor();
   if (globalActiveDrag) {
     globalActiveDrag.onCascadeProgress?.(/* @__PURE__ */ new Map(), []);
     const { onComplete, currentLeft, currentWidth, mode } = globalActiveDrag;
@@ -2313,6 +2354,7 @@ function cancelDrag() {
     cancelAnimationFrame(globalRafId);
     globalRafId = null;
   }
+  clearGlobalCursor();
   if (globalActiveDrag) {
     const { onCancel } = globalActiveDrag;
     globalActiveDrag = null;
@@ -2522,7 +2564,8 @@ var useTaskDrag = (options) => {
     locked = false,
     disableTaskDrag = false,
     businessDays = true,
-    weekendPredicate
+    weekendPredicate,
+    viewMode = "day"
   } = options;
   const rawHookTask = allTasks.find((t) => t.id === taskId);
   const hookTask = rawHookTask ? normalizeTaskDatesForType(rawHookTask) : void 0;
@@ -2533,6 +2576,7 @@ var useTaskDrag = (options) => {
   const [dragMode, setDragMode] = (0, import_react2.useState)(null);
   const [currentLeft, setCurrentLeft] = (0, import_react2.useState)(0);
   const [currentWidth, setCurrentWidth] = (0, import_react2.useState)(0);
+  const [hoverCursor, setHoverCursor] = (0, import_react2.useState)("grab");
   const getInitialPosition = (0, import_react2.useCallback)(() => {
     const getUTCDayDifference2 = (date1, date2) => {
       const ms1 = Date.UTC(
@@ -2711,28 +2755,33 @@ var useTaskDrag = (options) => {
       }
     };
   }, []);
-  const handleMouseDown = (0, import_react2.useCallback)((e) => {
+  const startDrag = (0, import_react2.useCallback)((e) => {
     if (effectiveLocked) return;
     const target = e.currentTarget;
-    const edgeZone = detectEdgeZone(e.clientX, target, edgeZoneWidth);
+    const currentTask = allTasks.find((t) => t.id === taskId);
+    const isSingleDayTask = !!currentTask && !isMilestoneTask(currentTask) && !isTaskParent(taskId, allTasks) && currentWidth <= dayWidth && viewMode === "day";
     let mode = null;
-    switch (edgeZone) {
-      case "left":
-        mode = "resize-left";
-        break;
-      case "right":
-        mode = "resize-right";
-        break;
-      case "move":
-        mode = "move";
-        break;
+    if (isSingleDayTask) {
+      mode = "move";
+    } else {
+      const edgeZone = detectEdgeZone(e.clientX, target, edgeZoneWidth);
+      switch (edgeZone) {
+        case "left":
+          mode = "resize-left";
+          break;
+        case "right":
+          mode = "resize-right";
+          break;
+        case "move":
+          mode = "move";
+          break;
+      }
     }
     if (mode === "resize-left" || mode === "resize-right") {
-      const currentTask2 = allTasks.find((t) => t.id === taskId);
-      if (currentTask2 && isTaskParent(taskId, allTasks)) {
+      if (currentTask && isTaskParent(taskId, allTasks)) {
         mode = "move";
       }
-      if (currentTask2 && isMilestoneTask(currentTask2)) {
+      if (currentTask && isMilestoneTask(currentTask)) {
         mode = "move";
       }
     }
@@ -2744,6 +2793,7 @@ var useTaskDrag = (options) => {
     isOwnerRef.current = true;
     setIsDragging(true);
     setDragMode(mode);
+    applyGlobalCursor(mode === "move" ? "grabbing" : "ew-resize");
     if (onDragStateChange) {
       onDragStateChange({
         isDragging: true,
@@ -2753,10 +2803,10 @@ var useTaskDrag = (options) => {
       });
     }
     ensureGlobalListeners();
-    const currentTask = allTasks.find((t) => t.id === taskId);
+    const dragTask = allTasks.find((t) => t.id === taskId);
     let hierarchyChain = [];
-    if (currentTask) {
-      const taskParentId = currentTask.parentId;
+    if (dragTask) {
+      const taskParentId = dragTask.parentId;
       if (taskParentId) {
         const parentTask = allTasks.find((t) => t.id === taskParentId);
         if (parentTask) {
@@ -2793,15 +2843,44 @@ var useTaskDrag = (options) => {
       businessDays,
       weekendPredicate
     };
-  }, [edgeZoneWidth, currentLeft, currentWidth, dayWidth, monthStart, taskId, onDragStateChange, handleProgress, handleComplete, handleCancel, allTasks, disableConstraints, onCascadeProgress, onCascade, effectiveLocked]);
+  }, [edgeZoneWidth, currentLeft, currentWidth, dayWidth, monthStart, taskId, onDragStateChange, handleProgress, handleComplete, handleCancel, allTasks, disableConstraints, onCascadeProgress, onCascade, effectiveLocked, viewMode]);
+  const handleMouseDown = (0, import_react2.useCallback)((e) => {
+    startDrag(e);
+  }, [startDrag]);
+  const handleMouseMove = (0, import_react2.useCallback)((e) => {
+    if (disableTaskDrag) {
+      setHoverCursor("grab");
+      return;
+    }
+    if (locked) {
+      setHoverCursor("not-allowed");
+      return;
+    }
+    if (isDragging) {
+      setHoverCursor("grabbing");
+      return;
+    }
+    const target = e.currentTarget;
+    const currentTask = allTasks.find((t) => t.id === taskId);
+    const isSingleDayTask = !!currentTask && !isMilestoneTask(currentTask) && !isTaskParent(taskId, allTasks) && currentWidth <= dayWidth && viewMode === "day";
+    if (isSingleDayTask || currentTask && (isTaskParent(taskId, allTasks) || isMilestoneTask(currentTask))) {
+      setHoverCursor("grab");
+      return;
+    }
+    const edgeZone = detectEdgeZone(e.clientX, target, edgeZoneWidth);
+    setHoverCursor(edgeZone === "move" ? "grab" : "ew-resize");
+  }, [disableTaskDrag, locked, isDragging, allTasks, taskId, currentWidth, dayWidth, viewMode, edgeZoneWidth]);
+  const handleMouseLeave = (0, import_react2.useCallback)(() => {
+    setHoverCursor(disableTaskDrag ? "grab" : locked ? "not-allowed" : isDragging ? "grabbing" : "grab");
+  }, [disableTaskDrag, locked, isDragging]);
   const getCursorStyle = (0, import_react2.useCallback)(() => {
     if (disableTaskDrag) return "grab";
     if (locked) return "not-allowed";
     if (isDragging) {
-      return "grabbing";
+      return dragMode === "move" ? "grabbing" : "ew-resize";
     }
-    return "grab";
-  }, [disableTaskDrag, locked, isDragging]);
+    return hoverCursor;
+  }, [disableTaskDrag, locked, isDragging, dragMode, hoverCursor]);
   return {
     isDragging,
     dragMode,
@@ -2809,6 +2888,8 @@ var useTaskDrag = (options) => {
     currentWidth,
     dragHandleProps: {
       onMouseDown: handleMouseDown,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
       style: {
         cursor: getCursorStyle(),
         userSelect: "none"
@@ -2820,10 +2901,10 @@ var useTaskDrag = (options) => {
 // src/components/TaskRow/TaskRow.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 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.allTasks === nextProps.allTasks && prevProps.disableConstraints === nextProps.disableConstraints && prevProps.task.locked === nextProps.task.locked && prevProps.task.divider === nextProps.task.divider && prevProps.highlightExpiredTasks === nextProps.highlightExpiredTasks && prevProps.showBaseline === nextProps.showBaseline && prevProps.isFilterMatch === nextProps.isFilterMatch && prevProps.businessDays === nextProps.businessDays && prevProps.customDays === nextProps.customDays && prevProps.isWeekend === nextProps.isWeekend && prevProps.disableTaskDrag === nextProps.disableTaskDrag;
+  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.allTasks === nextProps.allTasks && prevProps.disableConstraints === nextProps.disableConstraints && prevProps.task.locked === nextProps.task.locked && prevProps.task.divider === nextProps.task.divider && prevProps.highlightExpiredTasks === nextProps.highlightExpiredTasks && prevProps.showBaseline === nextProps.showBaseline && prevProps.isFilterMatch === nextProps.isFilterMatch && prevProps.businessDays === nextProps.businessDays && prevProps.customDays === nextProps.customDays && prevProps.isWeekend === nextProps.isWeekend && prevProps.disableTaskDrag === nextProps.disableTaskDrag && prevProps.viewMode === nextProps.viewMode;
 };
 var TaskRow = import_react3.default.memo(
-  ({ task, monthStart, dayWidth, rowHeight, onTasksChange, onDragStateChange, rowIndex, allTasks, enableAutoSchedule, disableConstraints, overridePosition, onCascadeProgress, onCascade, divider, highlightExpiredTasks, showBaseline = false, isFilterMatch = false, businessDays, customDays, isWeekend: isWeekend3, disableTaskDrag = false }) => {
+  ({ task, monthStart, dayWidth, rowHeight, onTasksChange, onDragStateChange, rowIndex, allTasks, enableAutoSchedule, disableConstraints, overridePosition, onCascadeProgress, onCascade, divider, highlightExpiredTasks, showBaseline = false, isFilterMatch = false, businessDays, customDays, isWeekend: isWeekend3, disableTaskDrag = false, viewMode = "day" }) => {
     const defaultParentBarColor = "#782FC4";
     const { divider: taskDivider } = task;
     const normalizedTask = (0, import_react3.useMemo)(() => normalizeTaskDatesForType(task), [task]);
@@ -2936,7 +3017,8 @@ var TaskRow = import_react3.default.memo(
       onCascadeProgress,
       onCascade,
       businessDays,
-      weekendPredicate
+      weekendPredicate,
+      viewMode
     });
     const displayLeft = overridePosition?.left ?? (isDragging ? currentLeft : left);
     const displayWidth = overridePosition?.width ?? (isDragging ? currentWidth : width);
@@ -3012,6 +3094,8 @@ var TaskRow = import_react3.default.memo(
                   userSelect: dragHandleProps.style.userSelect
                 },
                 onMouseDown: dragHandleProps.onMouseDown,
+                onMouseMove: dragHandleProps.onMouseMove,
+                onMouseLeave: dragHandleProps.onMouseLeave,
                 children: [
                   !milestone && progressWidth > 0 && progressWidth < 100 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "div",
@@ -7663,6 +7747,43 @@ var layoutResourceTimelineItems = (resources, options) => {
 
 // src/hooks/useResourceItemDrag.ts
 var import_react13 = require("react");
+var RESOURCE_CURSOR_STYLE_ID = "gantt-resource-global-drag-cursor-style";
+function ensureResourceGlobalCursorStyle() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(RESOURCE_CURSOR_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = RESOURCE_CURSOR_STYLE_ID;
+  style.textContent = `
+    html.gantt-resource-global-cursor-grabbing,
+    html.gantt-resource-global-cursor-grabbing *,
+    html.gantt-resource-global-cursor-grabbing *::before,
+    html.gantt-resource-global-cursor-grabbing *::after {
+      cursor: grabbing !important;
+    }
+
+    html.gantt-resource-global-cursor-resize,
+    html.gantt-resource-global-cursor-resize *,
+    html.gantt-resource-global-cursor-resize *::before,
+    html.gantt-resource-global-cursor-resize *::after {
+      cursor: ew-resize !important;
+    }
+  `;
+  document.head.appendChild(style);
+}
+function applyResourceGlobalCursor(cursor) {
+  if (typeof document === "undefined") return;
+  ensureResourceGlobalCursorStyle();
+  document.documentElement.classList.remove("gantt-resource-global-cursor-grabbing", "gantt-resource-global-cursor-resize");
+  document.documentElement.classList.add(cursor === "grabbing" ? "gantt-resource-global-cursor-grabbing" : "gantt-resource-global-cursor-resize");
+  document.body.style.cursor = cursor;
+  document.documentElement.style.cursor = cursor;
+}
+function clearResourceGlobalCursor() {
+  if (typeof document === "undefined") return;
+  document.documentElement.classList.remove("gantt-resource-global-cursor-grabbing", "gantt-resource-global-cursor-resize");
+  document.body.style.cursor = "";
+  document.documentElement.style.cursor = "";
+}
 var snapToDay = (pixels, dayWidth) => {
   return Math.round(pixels / dayWidth) * dayWidth;
 };
@@ -7728,6 +7849,7 @@ var resolveTargetResource = (rows, clientY, gridTop) => {
 var useResourceItemDrag = ({
   dayWidth,
   monthStart,
+  viewMode = "day",
   rows,
   gridElementRef,
   readonly,
@@ -7755,6 +7877,7 @@ var useResourceItemDrag = ({
   }, []);
   const cancelDrag2 = (0, import_react13.useCallback)(() => {
     clearRaf();
+    clearResourceGlobalCursor();
     activeDragRef.current = null;
     setPreview(null);
   }, [clearRaf]);
@@ -7803,6 +7926,7 @@ var useResourceItemDrag = ({
         return;
       }
       clearRaf();
+      clearResourceGlobalCursor();
       activeDragRef.current = null;
       setPreview(null);
       const gridTop = gridElementRef?.current?.getBoundingClientRect().top ?? 0;
@@ -7835,8 +7959,10 @@ var useResourceItemDrag = ({
       return;
     }
     const target = event.target;
-    const mode = target.closest(".gantt-resourceTimeline-resizeHandleStart") ? "resize-start" : target.closest(".gantt-resourceTimeline-resizeHandleEnd") ? "resize-end" : "move";
+    const isSingleDayItem = viewMode === "day" && layoutItem.width <= dayWidth;
+    const mode = isSingleDayItem ? "move" : target.closest(".gantt-resourceTimeline-resizeHandleStart") ? "resize-start" : target.closest(".gantt-resourceTimeline-resizeHandleEnd") ? "resize-end" : "move";
     event.preventDefault();
+    applyResourceGlobalCursor(mode === "move" ? "grabbing" : "ew-resize");
     activeDragRef.current = {
       item: layoutItem.item,
       itemId: layoutItem.itemId,
@@ -7865,7 +7991,7 @@ var useResourceItemDrag = ({
       startDate: layoutItem.startDate,
       endDate: layoutItem.endDate
     });
-  }, [businessDays, dayWidth, monthStart, readonly, weekendPredicate]);
+  }, [businessDays, dayWidth, monthStart, readonly, weekendPredicate, viewMode]);
   return {
     preview,
     startDrag,
@@ -8626,6 +8752,7 @@ function ResourceTimelineChart({
   const { preview, startDrag } = useResourceItemDrag({
     dayWidth,
     monthStart,
+    viewMode,
     rows: displayLayout.rows,
     gridElementRef: gridRef,
     readonly,
@@ -8941,10 +9068,12 @@ function ResourceTimelineChart({
                       (resourceItems) => resourceItems.map((layoutItem) => {
                         const customClassName = getItemClassName?.(layoutItem.item);
                         const isDraggingItem = preview?.itemId === layoutItem.itemId;
+                        const isSingleDayMoveOnlyItem = viewMode === "day" && layoutItem.width <= dayWidth;
                         const hasItemMenu = Boolean(onResourceItemMenuClick);
                         const isActiveItem = activeResourceItemId === layoutItem.itemId;
                         const className = [
                           "gantt-resourceTimeline-item",
+                          isSingleDayMoveOnlyItem && "gantt-resourceTimeline-itemMoveOnly",
                           hasItemMenu && "gantt-resourceTimeline-itemHasMenu",
                           isActiveItem && "gantt-resourceTimeline-itemActive",
                           isDraggingItem && "gantt-resourceTimeline-itemDragging",
@@ -10168,7 +10297,8 @@ function TaskGanttChartInner(props, ref) {
                             businessDays,
                             customDays,
                             isWeekend: isWeekend3,
-                            disableTaskDrag
+                            disableTaskDrag,
+                            viewMode
                           },
                           task.id
                         ))