gantt-lib 0.4.0 → 0.5.0

package/dist/index.mjs

@@ -1972,6 +1972,14 @@ var TrashIcon = () => /* @__PURE__ */ jsxs9("svg", { xmlns: "http://www.w3.org/2
   /* @__PURE__ */ jsx12("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
 ] });
 var PlusIcon = () => /* @__PURE__ */ jsx12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx12("path", { d: "M12 5v14M5 12h14" }) });
+var DragHandleIcon = () => /* @__PURE__ */ jsxs9("svg", { width: "10", height: "14", viewBox: "0 0 10 14", fill: "currentColor", children: [
+  /* @__PURE__ */ jsx12("circle", { cx: "2", cy: "2", r: "1.5" }),
+  /* @__PURE__ */ jsx12("circle", { cx: "8", cy: "2", r: "1.5" }),
+  /* @__PURE__ */ jsx12("circle", { cx: "2", cy: "7", r: "1.5" }),
+  /* @__PURE__ */ jsx12("circle", { cx: "8", cy: "7", r: "1.5" }),
+  /* @__PURE__ */ jsx12("circle", { cx: "2", cy: "12", r: "1.5" }),
+  /* @__PURE__ */ jsx12("circle", { cx: "8", cy: "12", r: "1.5" })
+] });
 function formatDepDescription(type, lag) {
   const effectiveLag = lag ?? 0;
   if (type === "FS") {
@@ -2085,7 +2093,13 @@ var TaskListRow = React9.memo(
     onDelete,
     onAdd,
     onInsertAfter,
-    editingTaskId
+    editingTaskId,
+    isDragging = false,
+    isDragOver = false,
+    onDragStart,
+    onDragOver,
+    onDrop,
+    onDragEnd
   }) => {
     const [editingName, setEditingName] = useState4(false);
     const [nameValue, setNameValue] = useState4("");
@@ -2094,6 +2108,8 @@ var TaskListRow = React9.memo(
     const confirmedRef = useRef3(false);
     const autoEditedForRef = useRef3(null);
     const editTriggerRef = useRef3("doubleclick");
+    const [deletePending, setDeletePending] = useState4(false);
+    const deleteButtonRef = useRef3(null);
     const isSelected = selectedTaskId === task.id;
     const isPicking = selectingPredecessorFor != null;
     const isSourceRow = isPicking && selectingPredecessorFor === task.id;
@@ -2125,6 +2141,19 @@ var TaskListRow = React9.memo(
         }
       }
     }, [editingName]);
+    useEffect3(() => {
+      const handleMouseDownOutside = (event) => {
+        if (deletePending && deleteButtonRef.current && !deleteButtonRef.current.contains(event.target)) {
+          setDeletePending(false);
+        }
+      };
+      if (deletePending) {
+        document.addEventListener("mousedown", handleMouseDownOutside);
+      }
+      return () => {
+        document.removeEventListener("mousedown", handleMouseDownOutside);
+      };
+    }, [deletePending]);
     useEffect3(() => {
       if (editingTaskId === task.id && !disableTaskNameEditing && autoEditedForRef.current !== editingTaskId) {
         autoEditedForRef.current = editingTaskId;
@@ -2244,19 +2273,44 @@ var TaskListRow = React9.memo(
           "gantt-tl-row",
           isSelected ? "gantt-tl-row-selected" : "",
           isPicking && !isSourceRow ? "gantt-tl-row-picking" : "",
-          isSourceRow ? "gantt-tl-row-picking-self" : ""
+          isSourceRow ? "gantt-tl-row-picking-self" : "",
+          isDragging ? "gantt-tl-row-dragging" : "",
+          isDragOver ? "gantt-tl-row-drag-over" : ""
         ].filter(Boolean).join(" "),
         style: { minHeight: `${rowHeight}px`, position: "relative" },
         onClick: handleRowClickInternal,
         onKeyDown: handleRowKeyDown,
+        onDragOver: (e) => onDragOver?.(rowIndex, e),
+        onDrop: (e) => onDrop?.(rowIndex, e),
+        onMouseLeave: () => {
+          if (deletePending) {
+            setDeletePending(false);
+          }
+        },
         tabIndex: isSelected ? 0 : -1,
         children: [
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsxs9(
             "div",
             {
               className: "gantt-tl-cell gantt-tl-cell-number",
               onClick: handleNumberClick,
-              children: /* @__PURE__ */ jsx12("span", { className: "gantt-tl-num-label", children: rowIndex + 1 })
+              children: [
+                /* @__PURE__ */ jsx12(
+                  "span",
+                  {
+                    className: "gantt-tl-drag-handle",
+                    draggable: true,
+                    onDragStart: (e) => {
+                      e.stopPropagation();
+                      onDragStart?.(rowIndex, e);
+                    },
+                    onDragEnd: (e) => onDragEnd?.(e),
+                    onClick: (e) => e.stopPropagation(),
+                    children: /* @__PURE__ */ jsx12(DragHandleIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx12("span", { className: "gantt-tl-num-label", children: rowIndex + 1 })
+              ]
             }
           ),
           /* @__PURE__ */ jsxs9("div", { className: "gantt-tl-cell gantt-tl-cell-name", children: [
@@ -2319,13 +2373,19 @@ var TaskListRow = React9.memo(
                 "button",
                 {
                   type: "button",
-                  className: "gantt-tl-name-action-btn gantt-tl-action-delete",
+                  ref: deleteButtonRef,
+                  className: `gantt-tl-name-action-btn gantt-tl-action-delete${deletePending ? " gantt-tl-action-delete-confirm" : ""}`,
                   onClick: (e) => {
                     e.stopPropagation();
-                    onDelete(task.id);
+                    if (!deletePending) {
+                      setDeletePending(true);
+                    } else {
+                      setDeletePending(false);
+                      onDelete(task.id);
+                    }
                   },
                   "aria-label": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0437\u0430\u0434\u0430\u0447\u0443",
-                  children: /* @__PURE__ */ jsx12(TrashIcon, {})
+                  children: deletePending ? "\u0423\u0434\u0430\u043B\u0438\u0442\u044C?" : /* @__PURE__ */ jsx12(TrashIcon, {})
                 }
               )
             ] })
@@ -2520,6 +2580,7 @@ var TaskList = ({
   onAdd,
   onDelete,
   onInsertAfter,
+  onReorder,
   editingTaskId: propEditingTaskId
 }) => {
   const totalHeight = useMemo8(
@@ -2621,6 +2682,43 @@ var TaskList = ({
     onTaskChange?.({ ...task, dependencies: updatedDeps });
   }, [tasks, onTaskChange]);
   const [isCreating, setIsCreating] = useState6(false);
+  const [draggingIndex, setDraggingIndex] = useState6(null);
+  const [dragOverIndex, setDragOverIndex] = useState6(null);
+  const dragOriginIndexRef = useRef5(null);
+  const handleDragStart = useCallback5((index, e) => {
+    e.dataTransfer.effectAllowed = "move";
+    setDraggingIndex(index);
+    dragOriginIndexRef.current = index;
+  }, []);
+  const handleDragOver = useCallback5((index, e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    setDragOverIndex(index);
+  }, []);
+  const handleDrop = useCallback5((dropIndex, e) => {
+    e.preventDefault();
+    const originIndex = dragOriginIndexRef.current;
+    if (originIndex === null || originIndex === dropIndex) {
+      setDraggingIndex(null);
+      setDragOverIndex(null);
+      dragOriginIndexRef.current = null;
+      return;
+    }
+    const reordered = [...tasks];
+    const [moved] = reordered.splice(originIndex, 1);
+    const insertIndex = originIndex < dropIndex ? dropIndex - 1 : dropIndex;
+    reordered.splice(insertIndex, 0, moved);
+    onReorder?.(reordered);
+    onTaskSelect?.(moved.id);
+    setDraggingIndex(null);
+    setDragOverIndex(null);
+    dragOriginIndexRef.current = null;
+  }, [tasks, onReorder, onTaskSelect]);
+  const handleDragEnd = useCallback5(() => {
+    setDraggingIndex(null);
+    setDragOverIndex(null);
+    dragOriginIndexRef.current = null;
+  }, []);
   const handleConfirmNewTask = useCallback5((name) => {
     const now = /* @__PURE__ */ new Date();
     const todayISO = new Date(Date.UTC(
@@ -2712,7 +2810,13 @@ var TaskList = ({
             onDelete,
             onAdd,
             onInsertAfter,
-            editingTaskId: propEditingTaskId
+            editingTaskId: propEditingTaskId,
+            isDragging: draggingIndex === index,
+            isDragOver: dragOverIndex === index,
+            onDragStart: handleDragStart,
+            onDragOver: handleDragOver,
+            onDrop: handleDrop,
+            onDragEnd: handleDragEnd
           },
           task.id
         )) }),
@@ -2759,11 +2863,12 @@ var GanttChart = forwardRef(({
   onAdd,
   onDelete,
   onInsertAfter,
-  editingTaskId
+  onReorder
 }, ref) => {
   const scrollContainerRef = useRef6(null);
   const [selectedTaskId, setSelectedTaskId] = useState7(null);
   const [selectedChip, setSelectedChip] = useState7(null);
+  const [editingTaskId, setEditingTaskId] = useState7(null);
   const dateRange = useMemo9(() => getMultiMonthDays(tasks), [tasks]);
   const [validationResult, setValidationResult] = useState7(null);
   const [cascadeOverrides, setCascadeOverrides] = useState7(/* @__PURE__ */ new Map());
@@ -2847,6 +2952,9 @@ var GanttChart = forwardRef(({
     const originalTask = tasks.find((t) => t.id === updatedTask.id);
     if (!originalTask) {
       onChange?.((currentTasks) => currentTasks.map((t) => t.id === updatedTask.id ? updatedTask : t));
+      if (editingTaskId === updatedTask.id) {
+        setEditingTaskId(null);
+      }
       return;
     }
     const origStart = new Date(originalTask.startDate);
@@ -2856,6 +2964,9 @@ var GanttChart = forwardRef(({
     const datesChanged = origStart.getTime() !== newStart.getTime() || origEnd.getTime() !== newEnd.getTime();
     if (!datesChanged) {
       onChange?.((currentTasks) => currentTasks.map((t) => t.id === updatedTask.id ? updatedTask : t));
+      if (editingTaskId === updatedTask.id) {
+        setEditingTaskId(null);
+      }
       return;
     }
     let cascadedTasksForCallback;
@@ -2874,7 +2985,7 @@ var GanttChart = forwardRef(({
       });
       onCascade?.(cascadedTasksForCallback);
     }
-  }, [tasks, onChange, disableConstraints, onCascade]);
+  }, [tasks, onChange, disableConstraints, onCascade, editingTaskId]);
   const handleDelete = useCallback6((taskId) => {
     onChange?.(
       (currentTasks) => currentTasks.filter((t) => t.id !== taskId).map((t) => ({
@@ -2884,6 +2995,14 @@ var GanttChart = forwardRef(({
     );
     onDelete?.(taskId);
   }, [onChange, onDelete]);
+  const handleInsertAfter = useCallback6((taskId, newTask) => {
+    setEditingTaskId(newTask.id);
+    onInsertAfter?.(taskId, newTask);
+  }, [onInsertAfter]);
+  const handleReorder = useCallback6((reorderedTasks) => {
+    onChange?.(reorderedTasks);
+    onReorder?.(reorderedTasks);
+  }, [onChange, onReorder]);
   const dependencyOverrides = useMemo9(() => {
     const map = new Map(cascadeOverrides);
     if (draggedTaskOverride) {
@@ -2976,7 +3095,8 @@ var GanttChart = forwardRef(({
             onSelectedChipChange: setSelectedChip,
             onAdd,
             onDelete: handleDelete,
-            onInsertAfter,
+            onInsertAfter: handleInsertAfter,
+            onReorder: handleReorder,
             editingTaskId
           }
         ),