gantt-lib 0.62.0 → 0.63.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -5433,7 +5433,8 @@ var TaskListRow = import_react10.default.memo(
5433
5433
  id: crypto.randomUUID(),
5434
5434
  name: "\u041D\u043E\u0432\u0430\u044F \u0437\u0430\u0434\u0430\u0447\u0430",
5435
5435
  startDate: todayISO,
5436
- endDate: endISO
5436
+ endDate: endISO,
5437
+ parentId: task.parentId
5437
5438
  };
5438
5439
  onInsertAfter(task.id, newTask);
5439
5440
  },
@@ -6001,10 +6002,17 @@ TaskListRow.displayName = "TaskListRow";
6001
6002
  // src/components/TaskList/NewTaskRow.tsx
6002
6003
  var import_react11 = require("react");
6003
6004
  var import_jsx_runtime13 = require("react/jsx-runtime");
6004
- var NewTaskRow = ({ rowHeight, onConfirm, onCancel }) => {
6005
+ var NewTaskRow = ({
6006
+ rowHeight,
6007
+ onConfirm,
6008
+ onCancel,
6009
+ nestingDepth = 0
6010
+ }) => {
6005
6011
  const [nameValue, setNameValue] = (0, import_react11.useState)("");
6006
6012
  const inputRef = (0, import_react11.useRef)(null);
6007
6013
  const confirmedRef = (0, import_react11.useRef)(false);
6014
+ const inputInnerPadding = 4;
6015
+ const levelOffset = nestingDepth > 0 ? nestingDepth * 20 + 8 : 0;
6008
6016
  (0, import_react11.useEffect)(() => {
6009
6017
  if (inputRef.current) {
6010
6018
  inputRef.current.focus();
@@ -6043,7 +6051,12 @@ var NewTaskRow = ({ rowHeight, onConfirm, onCancel }) => {
6043
6051
  onKeyDown: handleKeyDown,
6044
6052
  onBlur: handleBlur,
6045
6053
  placeholder: "\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435",
6046
- className: "gantt-tl-name-input"
6054
+ className: "gantt-tl-name-input",
6055
+ style: {
6056
+ left: `${Math.max(0, levelOffset - inputInnerPadding)}px`,
6057
+ width: levelOffset > 0 ? `calc(100% - ${Math.max(0, levelOffset - inputInnerPadding)}px)` : "100%",
6058
+ paddingLeft: `${inputInnerPadding}px`
6059
+ }
6047
6060
  }
6048
6061
  ) }),
6049
6062
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "gantt-tl-cell" }),
@@ -6467,6 +6480,7 @@ var TaskList = ({
6467
6480
  onTasksChange?.([{ ...task, dependencies: updatedDeps }]);
6468
6481
  }, [tasks, onTasksChange]);
6469
6482
  const [isCreating, setIsCreating] = (0, import_react12.useState)(false);
6483
+ const [pendingInsert, setPendingInsert] = (0, import_react12.useState)(null);
6470
6484
  const [draggingIndex, setDraggingIndex] = (0, import_react12.useState)(null);
6471
6485
  const [dragOverIndex, setDragOverIndex] = (0, import_react12.useState)(null);
6472
6486
  const dragOriginIndexRef = (0, import_react12.useRef)(null);
@@ -6625,6 +6639,81 @@ var TaskList = ({
6625
6639
  setIsCreating(false);
6626
6640
  }, [onAdd]);
6627
6641
  const handleCancelNewTask = (0, import_react12.useCallback)(() => setIsCreating(false), []);
6642
+ const findInsertAfterTaskId = (0, import_react12.useCallback)((anchorTaskId) => {
6643
+ const anchorIndex = orderedTasks.findIndex((task) => task.id === anchorTaskId);
6644
+ if (anchorIndex === -1) {
6645
+ return anchorTaskId;
6646
+ }
6647
+ const taskById = new Map(orderedTasks.map((task) => [task.id, task]));
6648
+ let insertAfterTaskId = anchorTaskId;
6649
+ for (let index = anchorIndex + 1; index < orderedTasks.length; index += 1) {
6650
+ let currentParentId = orderedTasks[index]?.parentId;
6651
+ let isDescendant = false;
6652
+ while (currentParentId) {
6653
+ if (currentParentId === anchorTaskId) {
6654
+ isDescendant = true;
6655
+ break;
6656
+ }
6657
+ currentParentId = taskById.get(currentParentId)?.parentId;
6658
+ }
6659
+ if (!isDescendant) {
6660
+ break;
6661
+ }
6662
+ insertAfterTaskId = orderedTasks[index].id;
6663
+ }
6664
+ return insertAfterTaskId;
6665
+ }, [orderedTasks]);
6666
+ const pendingInsertDisplayTaskId = (0, import_react12.useMemo)(() => {
6667
+ if (!pendingInsert) {
6668
+ return null;
6669
+ }
6670
+ const taskById = new Map(visibleTasks.map((task) => [task.id, task]));
6671
+ if (!taskById.has(pendingInsert.anchorTaskId)) {
6672
+ return null;
6673
+ }
6674
+ let displayTaskId = pendingInsert.anchorTaskId;
6675
+ for (const task of visibleTasks) {
6676
+ let currentParentId = task.parentId;
6677
+ while (currentParentId) {
6678
+ if (currentParentId === pendingInsert.anchorTaskId) {
6679
+ displayTaskId = task.id;
6680
+ break;
6681
+ }
6682
+ currentParentId = taskById.get(currentParentId)?.parentId;
6683
+ }
6684
+ }
6685
+ return displayTaskId;
6686
+ }, [pendingInsert, visibleTasks]);
6687
+ const handleStartInsertAfter = (0, import_react12.useCallback)((taskId, newTask) => {
6688
+ const anchorTask = orderedTasks.find((task) => task.id === taskId);
6689
+ if (!anchorTask) {
6690
+ return;
6691
+ }
6692
+ setIsCreating(false);
6693
+ setPendingInsert({
6694
+ anchorTaskId: taskId,
6695
+ insertAfterTaskId: findInsertAfterTaskId(taskId),
6696
+ parentId: anchorTask.parentId,
6697
+ startDate: newTask.startDate,
6698
+ endDate: newTask.endDate,
6699
+ nestingDepth: nestingDepthMap.get(taskId) ?? 0
6700
+ });
6701
+ }, [findInsertAfterTaskId, nestingDepthMap, orderedTasks]);
6702
+ const handleConfirmInsertedTask = (0, import_react12.useCallback)((name) => {
6703
+ if (!pendingInsert) {
6704
+ return;
6705
+ }
6706
+ const newTask = {
6707
+ id: crypto.randomUUID(),
6708
+ name,
6709
+ startDate: pendingInsert.startDate,
6710
+ endDate: pendingInsert.endDate,
6711
+ parentId: pendingInsert.parentId
6712
+ };
6713
+ onInsertAfter?.(pendingInsert.insertAfterTaskId, newTask);
6714
+ setPendingInsert(null);
6715
+ }, [onInsertAfter, pendingInsert]);
6716
+ const handleCancelInsertedTask = (0, import_react12.useCallback)(() => setPendingInsert(null), []);
6628
6717
  function getTaskDepth(task, tasks2) {
6629
6718
  if (!task) return 0;
6630
6719
  let depth = 0;
@@ -6764,73 +6853,87 @@ var TaskList = ({
6764
6853
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gantt-tl-body", style: { height: `${totalHeight}px` }, children: visibleTasks.map((task, index) => {
6765
6854
  const previousVisibleTask = index > 0 ? visibleTasks[index - 1] : void 0;
6766
6855
  const canDemoteTask = index === 0 || !task.parentId || previousVisibleTask?.id !== task.parentId;
6767
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
6768
- TaskListRow,
6769
- {
6770
- task,
6771
- rowIndex: index,
6772
- taskNumber: originalTaskNumberMap[task.id] || "",
6773
- taskNumberMap: originalTaskNumberMap,
6774
- rowHeight,
6775
- onTasksChange,
6776
- selectedTaskId,
6777
- onRowClick: handleRowClick,
6778
- disableTaskNameEditing,
6779
- disableDependencyEditing,
6780
- allTasks: tasks,
6781
- activeLinkType,
6782
- onSetActiveLinkType: setActiveLinkType,
6783
- selectingPredecessorFor,
6784
- dependencyPickMode,
6785
- onSetDependencyPickMode: setDependencyPickMode,
6786
- onSetSelectingPredecessorFor: setSelectingPredecessorFor,
6787
- onAddDependency: handleAddDependency,
6788
- onRemoveDependency: handleRemoveDependency,
6789
- selectedChip,
6790
- onChipSelect: handleChipSelect,
6791
- onScrollToTask,
6792
- onDelete,
6793
- onAdd,
6794
- onInsertAfter,
6795
- editingTaskId: propEditingTaskId,
6796
- isDragging: draggingIndex === index,
6797
- isDragOver: dragOverIndex === index,
6798
- onDragStart: handleDragStart,
6799
- onDragOver: handleDragOver,
6800
- onDrop: handleDrop,
6801
- onDragEnd: handleDragEnd,
6802
- collapsedParentIds,
6803
- onToggleCollapse: handleToggleCollapse,
6804
- onPromoteTask,
6805
- onDemoteTask: onDemoteTask ? handleDemoteWrapper : void 0,
6806
- onDuplicateTask: onReorder ? handleDuplicateTask : void 0,
6807
- canDemoteTask,
6808
- isLastChild: lastChildIds.has(task.id),
6809
- nestingDepth: nestingDepthMap.get(task.id) ?? 0,
6810
- ancestorContinues: ancestorContinuesMap.get(task.id) ?? [],
6811
- customDays,
6812
- isWeekend: isWeekend3,
6813
- businessDays,
6814
- isFilterMatch: filterMode === "highlight" ? highlightedTaskIds.has(task.id) : false,
6815
- isFilterHideMode: filterMode === "hide" && isFilterActive,
6816
- resolvedColumns
6817
- },
6818
- task.id
6819
- );
6856
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react12.default.Fragment, { children: [
6857
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
6858
+ TaskListRow,
6859
+ {
6860
+ task,
6861
+ rowIndex: index,
6862
+ taskNumber: originalTaskNumberMap[task.id] || "",
6863
+ taskNumberMap: originalTaskNumberMap,
6864
+ rowHeight,
6865
+ onTasksChange,
6866
+ selectedTaskId,
6867
+ onRowClick: handleRowClick,
6868
+ disableTaskNameEditing,
6869
+ disableDependencyEditing,
6870
+ allTasks: tasks,
6871
+ activeLinkType,
6872
+ onSetActiveLinkType: setActiveLinkType,
6873
+ selectingPredecessorFor,
6874
+ dependencyPickMode,
6875
+ onSetDependencyPickMode: setDependencyPickMode,
6876
+ onSetSelectingPredecessorFor: setSelectingPredecessorFor,
6877
+ onAddDependency: handleAddDependency,
6878
+ onRemoveDependency: handleRemoveDependency,
6879
+ selectedChip,
6880
+ onChipSelect: handleChipSelect,
6881
+ onScrollToTask,
6882
+ onDelete,
6883
+ onAdd,
6884
+ onInsertAfter: handleStartInsertAfter,
6885
+ editingTaskId: propEditingTaskId,
6886
+ isDragging: draggingIndex === index,
6887
+ isDragOver: dragOverIndex === index,
6888
+ onDragStart: handleDragStart,
6889
+ onDragOver: handleDragOver,
6890
+ onDrop: handleDrop,
6891
+ onDragEnd: handleDragEnd,
6892
+ collapsedParentIds,
6893
+ onToggleCollapse: handleToggleCollapse,
6894
+ onPromoteTask,
6895
+ onDemoteTask: onDemoteTask ? handleDemoteWrapper : void 0,
6896
+ onDuplicateTask: onReorder ? handleDuplicateTask : void 0,
6897
+ canDemoteTask,
6898
+ isLastChild: lastChildIds.has(task.id),
6899
+ nestingDepth: nestingDepthMap.get(task.id) ?? 0,
6900
+ ancestorContinues: ancestorContinuesMap.get(task.id) ?? [],
6901
+ customDays,
6902
+ isWeekend: isWeekend3,
6903
+ businessDays,
6904
+ isFilterMatch: filterMode === "highlight" ? highlightedTaskIds.has(task.id) : false,
6905
+ isFilterHideMode: filterMode === "hide" && isFilterActive,
6906
+ resolvedColumns
6907
+ }
6908
+ ),
6909
+ pendingInsertDisplayTaskId === task.id && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
6910
+ NewTaskRow,
6911
+ {
6912
+ rowHeight,
6913
+ onConfirm: handleConfirmInsertedTask,
6914
+ onCancel: handleCancelInsertedTask,
6915
+ nestingDepth: pendingInsert?.nestingDepth ?? 0
6916
+ }
6917
+ )
6918
+ ] }, task.id);
6820
6919
  }) }),
6821
- isCreating && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
6920
+ isCreating && !pendingInsert && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
6822
6921
  NewTaskRow,
6823
6922
  {
6824
6923
  rowHeight,
6825
6924
  onConfirm: handleConfirmNewTask,
6826
- onCancel: handleCancelNewTask
6925
+ onCancel: handleCancelNewTask,
6926
+ nestingDepth: 0
6827
6927
  }
6828
6928
  ),
6829
- enableAddTask && onAdd && !isCreating && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
6929
+ enableAddTask && onAdd && !isCreating && !pendingInsert && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
6830
6930
  "button",
6831
6931
  {
6832
6932
  className: `gantt-tl-add-btn${dragOverIndex === visibleTasks.length ? " gantt-tl-add-btn-drag-over" : ""}`,
6833
- onClick: () => setIsCreating(true),
6933
+ onClick: () => {
6934
+ setPendingInsert(null);
6935
+ setIsCreating(true);
6936
+ },
6834
6937
  onDragEnter: (e) => {
6835
6938
  e.preventDefault();
6836
6939
  setDragOverIndex(visibleTasks.length);
@@ -7107,7 +7210,6 @@ function GanttChartInner(props, ref) {
7107
7210
  toDelete.forEach((id) => onDelete?.(id));
7108
7211
  }, [tasks, onTasksChange, onDelete]);
7109
7212
  const handleInsertAfter = (0, import_react13.useCallback)((taskId, newTask) => {
7110
- setEditingTaskId(newTask.id);
7111
7213
  onInsertAfter?.(taskId, newTask);
7112
7214
  }, [onInsertAfter]);
7113
7215
  const handleReorder = (0, import_react13.useCallback)((reorderedTasks, movedTaskId, inferredParentId) => {