sense-react-timeline-editor 1.1.38 → 1.1.40

package/dist/components/edit_area/hooks/use_row_drag.d.ts

@@ -15,6 +15,7 @@ export interface UseRowDragOptions {
     allowCreateTrack?: boolean;
     rowHeight?: number;
     onUpdateEditorData?: (editorData: TimelineRow, actions: TimelineAction[]) => void;
+    onPreviewChange?: (plan: MultiDragPlan | null) => void;
 }
 export interface MultiDragState {
     /** 是否正在多选拖拽 */
@@ -53,6 +54,17 @@ declare type StoredActionPosition = {
     left: number;
     width: number;
 };
+declare type MultiDragPlacement = {
+    actionId: string;
+    rowId: string;
+    start: number;
+    end: number;
+    conflicted: boolean;
+};
+export declare type MultiDragPlan = {
+    placements: MultiDragPlacement[];
+    rows: TimelineRow[];
+};
 export declare const useRowDrag: (options: UseRowDragOptions) => {
     onDragStart: ({ action }: {
         action: TimelineAction;

package/dist/index.esm.js

@@ -2188,7 +2188,8 @@ var hasMultiDragConflict = function hasMultiDragConflict(_ref3) {
     selectedActionIds = _ref3.selectedActionIds,
     primaryAction = _ref3.primaryAction,
     timeOffset = _ref3.timeOffset,
-    rowDelta = _ref3.rowDelta;
+    rowDelta = _ref3.rowDelta,
+    allowCreateTrack = _ref3.allowCreateTrack;
   var selectedSet = new Set(selectedActionIds);
   return selectedActionIds.some(function (selectedId) {
     var sourceRowIndex = -1;
@@ -2205,7 +2206,7 @@ var hasMultiDragConflict = function hasMultiDragConflict(_ref3) {
     var initialAction = sourceAction || (selectedId === primaryAction.id ? primaryAction : undefined);
     if (!initialAction || sourceRowIndex < 0) return true;
     var targetRow = editorData[sourceRowIndex + rowDelta];
-    if (!targetRow) return true;
+    if (!targetRow) return !allowCreateTrack;
     var nextStart = initialAction.start + timeOffset;
     var nextEnd = initialAction.end + timeOffset;
     return targetRow.actions.some(function (item) {
@@ -2431,7 +2432,8 @@ var EditActionO = function EditActionO(_ref8) {
       selectedActionIds: selectedActionIds || [],
       primaryAction: action,
       timeOffset: currentRange.start - action.start,
-      rowDelta: Math.round((top || 0) / rowHeight)
+      rowDelta: Math.round((top || 0) / rowHeight),
+      allowCreateTrack: allowCreateTrack
     }) : false;
     if (multiDragConflict) {
       setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview({
@@ -3264,6 +3266,25 @@ var useRowSelection = function useRowSelection(options) {
   };
 };
 
+var buildResetPreviewPlan = function buildResetPreviewPlan(_ref) {
+  var editorData = _ref.editorData,
+    initialPositions = _ref.initialPositions,
+    selectedActionIds = _ref.selectedActionIds;
+  return {
+    rows: editorData,
+    placements: selectedActionIds.map(function (actionId) {
+      var initial = initialPositions.get(actionId);
+      if (!initial) return null;
+      return {
+        actionId: actionId,
+        rowId: initial.rowId,
+        start: initial.start,
+        end: initial.end,
+        conflicted: true
+      };
+    }).filter(Boolean)
+  };
+};
 var resetMultiDragState = function resetMultiDragState() {
   return {
     isMultiDrag: false,
@@ -3286,6 +3307,17 @@ var cloneRows = function cloneRows(rows) {
     });
   });
 };
+var createEmptyRow = function createEmptyRow(_ref2) {
+  var templateRow = _ref2.templateRow,
+    order = _ref2.order;
+  return _objectSpread2(_objectSpread2({}, templateRow), {}, {
+    id: "row_".concat(Date.now(), "_").concat(Math.random().toString(36).slice(2, 9)),
+    actions: [],
+    order: order,
+    selected: false,
+    isPreview: false
+  });
+};
 var removeActionFromRows = function removeActionFromRows(rows, actionId) {
   for (var i = 0; i < rows.length; i++) {
     var actionIndex = rows[i].actions.findIndex(function (item) {
@@ -3306,17 +3338,82 @@ var removeActionFromRows = function removeActionFromRows(rows, actionId) {
     action: undefined
   };
 };
-var buildMultiDragPlacements = function buildMultiDragPlacements(_ref4) {
-  var editorData = _ref4.editorData,
-    initialPositions = _ref4.initialPositions,
-    selectedActionIds = _ref4.selectedActionIds,
-    timeOffset = _ref4.timeOffset,
-    rowDelta = _ref4.rowDelta;
+var buildMultiDragPlacements = function buildMultiDragPlacements(_ref3) {
+  var editorData = _ref3.editorData,
+    initialPositions = _ref3.initialPositions,
+    selectedActionIds = _ref3.selectedActionIds,
+    timeOffset = _ref3.timeOffset,
+    rowDelta = _ref3.rowDelta,
+    allowCreateTrack = _ref3.allowCreateTrack;
   var selectedSet = new Set(selectedActionIds);
-  return selectedActionIds.map(function (actionId) {
+  var selectedInitials = selectedActionIds.map(function (actionId) {
     var initial = initialPositions.get(actionId);
-    if (!initial) return null;
-    var candidateRow = editorData[initial.rowIndex + rowDelta];
+    return initial ? {
+      actionId: actionId,
+      initial: initial
+    } : null;
+  }).filter(Boolean);
+  if (selectedInitials.length === 0) {
+    return {
+      placements: [],
+      rows: editorData
+    };
+  }
+  var targetIndexes = selectedInitials.map(function (_ref4) {
+    var initial = _ref4.initial;
+    return initial.rowIndex + rowDelta;
+  });
+  var minTargetIndex = Math.min.apply(Math, _toConsumableArray(targetIndexes));
+  var maxTargetIndex = Math.max.apply(Math, _toConsumableArray(targetIndexes));
+  var prependCount = minTargetIndex < 0 ? -minTargetIndex : 0;
+  var appendCount = maxTargetIndex >= editorData.length ? maxTargetIndex - editorData.length + 1 : 0;
+  if (!allowCreateTrack && (prependCount > 0 || appendCount > 0)) {
+    return {
+      rows: editorData,
+      placements: selectedInitials.map(function (_ref5) {
+        var actionId = _ref5.actionId,
+          initial = _ref5.initial;
+        return {
+          actionId: actionId,
+          rowId: initial.rowId,
+          start: initial.start,
+          end: initial.end,
+          conflicted: true
+        };
+      })
+    };
+  }
+  var minOrder = Math.min.apply(Math, _toConsumableArray(editorData.map(function (row) {
+    var _row$order;
+    return Number((_row$order = row.order) !== null && _row$order !== void 0 ? _row$order : 0);
+  })));
+  var maxOrder = Math.max.apply(Math, _toConsumableArray(editorData.map(function (row) {
+    var _row$order2;
+    return Number((_row$order2 = row.order) !== null && _row$order2 !== void 0 ? _row$order2 : 0);
+  })));
+  var prependTemplateRow = editorData[0];
+  var appendTemplateRow = editorData[editorData.length - 1];
+  var prependRows = Array.from({
+    length: prependCount
+  }, function (_, index) {
+    return createEmptyRow({
+      templateRow: prependTemplateRow,
+      order: minOrder - prependCount + index
+    });
+  });
+  var appendRows = Array.from({
+    length: appendCount
+  }, function (_, index) {
+    return createEmptyRow({
+      templateRow: appendTemplateRow,
+      order: maxOrder + index + 1
+    });
+  });
+  var expandedRows = [].concat(prependRows, _toConsumableArray(editorData), appendRows);
+  var placements = selectedInitials.map(function (_ref6) {
+    var actionId = _ref6.actionId,
+      initial = _ref6.initial;
+    var candidateRow = expandedRows[initial.rowIndex + rowDelta + prependCount];
     var nextStart = initial.start + timeOffset;
     var nextEnd = initial.end + timeOffset;
     if (!candidateRow) {
@@ -3347,7 +3444,11 @@ var buildMultiDragPlacements = function buildMultiDragPlacements(_ref4) {
       end: nextEnd,
       conflicted: false
     };
-  }).filter(Boolean);
+  });
+  return {
+    placements: placements,
+    rows: expandedRows
+  };
 };
 var useRowDrag = function useRowDrag(options) {
   var selectedActionIds = options.selectedActionIds,
@@ -3360,9 +3461,12 @@ var useRowDrag = function useRowDrag(options) {
     _options$startLeft = options.startLeft,
     startLeft = _options$startLeft === void 0 ? 20 : _options$startLeft,
     setEditorData = options.setEditorData,
+    _options$allowCreateT = options.allowCreateTrack,
+    allowCreateTrack = _options$allowCreateT === void 0 ? true : _options$allowCreateT,
     _options$rowHeight = options.rowHeight,
     rowHeight = _options$rowHeight === void 0 ? 35 : _options$rowHeight,
-    onUpdateEditorData = options.onUpdateEditorData;
+    onUpdateEditorData = options.onUpdateEditorData,
+    onPreviewChange = options.onPreviewChange;
   // 多选拖拽状态
   var multiDragState = React.useRef(resetMultiDragState());
   // 获取选中的 action DOM 元素
@@ -3372,8 +3476,8 @@ var useRowDrag = function useRowDrag(options) {
     return Array.from(actions);
   }, [containerRef]);
   // 拖拽开始
-  var onDragStart = React.useCallback(function (_ref5) {
-    var action = _ref5.action;
+  var onDragStart = React.useCallback(function (_ref7) {
+    var action = _ref7.action;
     if (selectedActionIds.length <= 1) {
       multiDragState.current = resetMultiDragState();
       return;
@@ -3456,10 +3560,14 @@ var useRowDrag = function useRowDrag(options) {
       dy = params.dy;
     var state = multiDragState.current;
     if (!state.isMultiDrag || !state.isDraggingSelection || !state.initialElementPositions) {
+      onPreviewChange === null || onPreviewChange === void 0 ? void 0 : onPreviewChange(null);
       return;
     }
     var selectedEls = getSelectedActionEls();
-    if (selectedEls.length === 0) return;
+    if (selectedEls.length === 0) {
+      onPreviewChange === null || onPreviewChange === void 0 ? void 0 : onPreviewChange(null);
+      return;
+    }
     state.offsetX = (_params$gap = params.gap) !== null && _params$gap !== void 0 ? _params$gap : 0;
     state.offsetY = (state.offsetY || 0) + dy;
     selectedEls.forEach(function (el) {
@@ -3473,7 +3581,42 @@ var useRowDrag = function useRowDrag(options) {
       el.setAttribute('data-x', newX.toString());
       el.setAttribute('data-y', newY.toString());
     });
-  }, [getSelectedActionEls]);
+    if (actionId !== state.primaryActionId) return;
+    var primaryInitial = state.initialPositions.get(actionId);
+    if (!primaryInitial) {
+      onPreviewChange === null || onPreviewChange === void 0 ? void 0 : onPreviewChange(null);
+      return;
+    }
+    var primaryFinalTime = parserTransformToTime({
+      left: params.left,
+      width: params.width
+    }, {
+      startLeft: startLeft,
+      scale: scale,
+      scaleWidth: scaleWidth
+    });
+    var timeOffset = primaryFinalTime.start - primaryInitial.start;
+    var rowDelta = Math.round((params.top || 0) / rowHeight);
+    var plan = buildMultiDragPlacements({
+      editorData: editorData,
+      initialPositions: state.initialPositions,
+      selectedActionIds: selectedActionIds,
+      timeOffset: timeOffset,
+      rowDelta: rowDelta,
+      allowCreateTrack: allowCreateTrack
+    });
+    if (plan.placements.some(function (placement) {
+      return placement.conflicted;
+    })) {
+      onPreviewChange === null || onPreviewChange === void 0 ? void 0 : onPreviewChange(buildResetPreviewPlan({
+        editorData: editorData,
+        initialPositions: state.initialPositions,
+        selectedActionIds: selectedActionIds
+      }));
+      return;
+    }
+    onPreviewChange === null || onPreviewChange === void 0 ? void 0 : onPreviewChange(plan);
+  }, [allowCreateTrack, editorData, getSelectedActionEls, onPreviewChange, rowHeight, scale, scaleWidth, selectedActionIds, startLeft]);
   // 拖拽结束
   var onDragEnd = React.useCallback(function (params) {
     var state = multiDragState.current;
@@ -3483,6 +3626,7 @@ var useRowDrag = function useRowDrag(options) {
       el.removeAttribute('data-y');
       el.style.transform = '';
     });
+    onPreviewChange === null || onPreviewChange === void 0 ? void 0 : onPreviewChange(null);
     if (!state.isMultiDrag || !params || (params === null || params === void 0 ? void 0 : params.actionId) !== state.primaryActionId) {
       multiDragState.current = resetMultiDragState();
       return;
@@ -3518,13 +3662,16 @@ var useRowDrag = function useRowDrag(options) {
       multiDragState.current = resetMultiDragState();
       return;
     }
-    var placements = buildMultiDragPlacements({
-      editorData: editorData,
-      initialPositions: initialPositions,
-      selectedActionIds: selectedActionIds,
-      timeOffset: timeOffset,
-      rowDelta: rowDelta
-    });
+    var _buildMultiDragPlacem = buildMultiDragPlacements({
+        editorData: editorData,
+        initialPositions: initialPositions,
+        selectedActionIds: selectedActionIds,
+        timeOffset: timeOffset,
+        rowDelta: rowDelta,
+        allowCreateTrack: allowCreateTrack
+      }),
+      placements = _buildMultiDragPlacem.placements,
+      plannedRows = _buildMultiDragPlacem.rows;
     var hasConflict = placements.some(function (placement) {
       return placement.conflicted;
     });
@@ -3532,7 +3679,7 @@ var useRowDrag = function useRowDrag(options) {
       multiDragState.current = resetMultiDragState();
       return;
     }
-    var rows = cloneRows(editorData);
+    var rows = cloneRows(plannedRows);
     var updatedActions = [];
     var removedActions = new Map();
     selectedActionIds.forEach(function (selectedId) {
@@ -3575,7 +3722,7 @@ var useRowDrag = function useRowDrag(options) {
       onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(primaryTargetRow, updatedActions);
     }
     multiDragState.current = resetMultiDragState();
-  }, [editorData, getSelectedActionEls, onUpdateEditorData, rowHeight, scale, scaleWidth, selectedActionIds, setEditorData, startLeft]);
+  }, [allowCreateTrack, editorData, getSelectedActionEls, onPreviewChange, onUpdateEditorData, rowHeight, scale, scaleWidth, selectedActionIds, setEditorData, startLeft]);
   // 检查是否是多选拖拽模式
   var isMultiDragging = React.useCallback(function () {
     return multiDragState.current.isMultiDrag;
@@ -3744,11 +3891,13 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var uploadRef = useRef();
   // ---- drag overlay: imperative DOM updates to avoid React re-renders on every mousemove ----
   var insertPreviewDomRef = useRef(null);
+  var multiInsertPreviewDomRef = useRef(null);
   var trackPreviewRowDomRef = useRef(null);
   var trackPreviewLineDomRef = useRef(null);
   var dragIndicatorDomRef = useRef(null);
   // Latest data refs for re-applying positions on scroll
   var insertPreviewDataRef = useRef(null);
+  var multiInsertPreviewDataRef = useRef(null);
   var trackPreviewDataRef = useRef(null);
   var dragIndicatorDataRef = useRef(null);
   // Always-current snapshot of render-time props, read safely inside stable callbacks
@@ -3807,6 +3956,71 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
     div.style.top = "".concat(top - st + 18, "px");
     div.style.height = "".concat(Math.max(rowH - 4, 8), "px");
   }, []);
+  var setMultiInsertPreview = useCallback(function (plan) {
+    multiInsertPreviewDataRef.current = plan;
+    var container = multiInsertPreviewDomRef.current;
+    if (!container) return;
+    if (!plan || plan.placements.length === 0) {
+      container.style.display = 'none';
+      Array.from(container.children).forEach(function (node) {
+        node.style.display = 'none';
+      });
+      return;
+    }
+    var _liveRef$current2 = liveRef.current,
+      st = _liveRef$current2.scrollTop,
+      sl = _liveRef$current2.startLeft,
+      sc = _liveRef$current2.scale,
+      sw = _liveRef$current2.scaleWidth,
+      rh = _liveRef$current2.rowHeight;
+    var rowIndexMap = new Map(plan.rows.map(function (row, index) {
+      return [row.id, index];
+    }));
+    var placements = plan.placements;
+    while (container.children.length < placements.length) {
+      var previewNode = document.createElement('div');
+      previewNode.style.position = 'absolute';
+      previewNode.style.background = 'rgba(160, 160, 160, 0.12)';
+      previewNode.style.border = '1.5px dashed rgba(150, 150, 150, 0.7)';
+      previewNode.style.borderRadius = '8px';
+      previewNode.style.zIndex = '1000';
+      previewNode.style.pointerEvents = 'none';
+      container.appendChild(previewNode);
+    }
+    Array.from(container.children).forEach(function (node, index) {
+      var _plan$rows$targetInde;
+      var previewNode = node;
+      var placement = placements[index];
+      if (!placement) {
+        previewNode.style.display = 'none';
+        return;
+      }
+      var targetIndex = rowIndexMap.get(placement.rowId);
+      if (targetIndex === undefined) {
+        previewNode.style.display = 'none';
+        return;
+      }
+      var top = 0;
+      for (var i = 0; i < targetIndex; i++) {
+        top += (plan.rows[i].rowHeight || rh) + 2;
+      }
+      var rowH = ((_plan$rows$targetInde = plan.rows[targetIndex]) === null || _plan$rows$targetInde === void 0 ? void 0 : _plan$rows$targetInde.rowHeight) || rh;
+      var t = parserTimeToTransform({
+        start: placement.start,
+        end: placement.end
+      }, {
+        startLeft: sl,
+        scale: sc,
+        scaleWidth: sw
+      });
+      previewNode.style.display = 'block';
+      previewNode.style.left = "".concat(t.left, "px");
+      previewNode.style.width = "".concat(t.width, "px");
+      previewNode.style.top = "".concat(top - st + 18, "px");
+      previewNode.style.height = "".concat(Math.max(rowH - 4, 8), "px");
+    });
+    container.style.display = 'block';
+  }, []);
   var setTrackPreview = useCallback(function (preview) {
     trackPreviewDataRef.current = preview;
     var rowDiv = trackPreviewRowDomRef.current;
@@ -3817,10 +4031,10 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
       lineDiv.style.display = 'none';
       return;
     }
-    var _liveRef$current2 = liveRef.current,
-      st = _liveRef$current2.scrollTop,
-      ed = _liveRef$current2.editorData,
-      rh = _liveRef$current2.rowHeight;
+    var _liveRef$current3 = liveRef.current,
+      st = _liveRef$current3.scrollTop,
+      ed = _liveRef$current3.editorData,
+      rh = _liveRef$current3.rowHeight;
     if (preview.kind === 'new-row') {
       rowDiv.style.display = 'none';
       var insertIndex = preview.insertIndex;
@@ -3861,10 +4075,10 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
       div.style.display = 'none';
       return;
     }
-    var _liveRef$current3 = liveRef.current,
-      st = _liveRef$current3.scrollTop,
-      ed = _liveRef$current3.editorData,
-      rh = _liveRef$current3.rowHeight;
+    var _liveRef$current4 = liveRef.current,
+      st = _liveRef$current4.scrollTop,
+      ed = _liveRef$current4.editorData,
+      rh = _liveRef$current4.rowHeight;
     var top = 0;
     for (var i = 0; i < Math.min(indicator.targetIndex, ed.length); i++) top += ed[i].rowHeight || rh;
     div.style.display = 'block';
@@ -3873,9 +4087,10 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
   // Re-apply overlay positions whenever scroll changes during an active drag
   useLayoutEffect(function () {
     if (insertPreviewDataRef.current) setInsertPreview(insertPreviewDataRef.current);
+    if (multiInsertPreviewDataRef.current) setMultiInsertPreview(multiInsertPreviewDataRef.current);
     if (trackPreviewDataRef.current) setTrackPreview(trackPreviewDataRef.current);
     if (dragIndicatorDataRef.current) setDragIndicator(dragIndicatorDataRef.current);
-  }, [scrollTop]);
+  }, [scrollTop, setInsertPreview, setMultiInsertPreview, setTrackPreview, setDragIndicator]);
   // 使用 ref 追踪 handleSelectionChange 的调用深度，避免无限循环
   var selectionChangeDepthRef = useRef(0);
   // 框选功能
@@ -3921,6 +4136,23 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClickOutside = _useRowSelection.onClickOutside,
     onCtrlClick = _useRowSelection.onCtrlClick,
     setSelectedActionIds = _useRowSelection.setSelectedActionIds;
+  useEffect(function () {
+    var selectedIdsFromEditor = editorData.flatMap(function (row) {
+      return row.actions.filter(function (action) {
+        return action.selected;
+      }).map(function (action) {
+        return action.id;
+      });
+    });
+    var normalizedSelectedIds = selectedIdsFromEditor.length > 1 ? selectedIdsFromEditor : [];
+    var hasSameSelection = normalizedSelectedIds.length === selectedActionIds.length && normalizedSelectedIds.every(function (id) {
+      return selectedActionIds.includes(id);
+    });
+    if (hasSameSelection) {
+      return;
+    }
+    setSelectedActionIds(new Set(normalizedSelectedIds));
+  }, [editorData, selectedActionIds, setSelectedActionIds]);
   var _useRowDrag = useRowDrag({
       selectedActionIds: selectedActionIds,
       editorData: editorData,
@@ -3931,7 +4163,8 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setEditorData: setEditorData,
       allowCreateTrack: allowCreateTrack,
       rowHeight: _rowHeight,
-      onUpdateEditorData: onUpdateEditorData
+      onUpdateEditorData: onUpdateEditorData,
+      onPreviewChange: setMultiInsertPreview
     }),
     onDragStart = _useRowDrag.onDragStart,
     onDragMove = _useRowDrag.onDragMove,
@@ -4242,6 +4475,15 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     });
   }), /*#__PURE__*/React.createElement(DragSelection, null), /*#__PURE__*/React.createElement("div", {
+    ref: multiInsertPreviewDomRef,
+    style: {
+      display: 'none',
+      position: 'absolute',
+      inset: 0,
+      zIndex: 1000,
+      pointerEvents: 'none'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
     ref: trackPreviewLineDomRef,
     style: {
       display: 'none',
@@ -4857,10 +5099,9 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
         var containerEl = document.querySelector('.timeline-editor');
         if (!containerEl) return;
         var left = startLeft + scaleWidth / scale * val;
-        var nextScrollLeft = Math.min(Math.max(left, 0), getMaxScrollLeft());
-        containerEl.scrollLeft = nextScrollLeft;
+        containerEl.scrollLeft = Math.max(left, 0);
         scrollSync.current && scrollSync.current.setState({
-          scrollLeft: nextScrollLeft
+          scrollLeft: Math.max(left, 0)
         });
       },
       setScrollTop: function setScrollTop(val) {

package/dist/index.js

@@ -2198,7 +2198,8 @@ var hasMultiDragConflict = function hasMultiDragConflict(_ref3) {
     selectedActionIds = _ref3.selectedActionIds,
     primaryAction = _ref3.primaryAction,
     timeOffset = _ref3.timeOffset,
-    rowDelta = _ref3.rowDelta;
+    rowDelta = _ref3.rowDelta,
+    allowCreateTrack = _ref3.allowCreateTrack;
   var selectedSet = new Set(selectedActionIds);
   return selectedActionIds.some(function (selectedId) {
     var sourceRowIndex = -1;
@@ -2215,7 +2216,7 @@ var hasMultiDragConflict = function hasMultiDragConflict(_ref3) {
     var initialAction = sourceAction || (selectedId === primaryAction.id ? primaryAction : undefined);
     if (!initialAction || sourceRowIndex < 0) return true;
     var targetRow = editorData[sourceRowIndex + rowDelta];
-    if (!targetRow) return true;
+    if (!targetRow) return !allowCreateTrack;
     var nextStart = initialAction.start + timeOffset;
     var nextEnd = initialAction.end + timeOffset;
     return targetRow.actions.some(function (item) {
@@ -2441,7 +2442,8 @@ var EditActionO = function EditActionO(_ref8) {
       selectedActionIds: selectedActionIds || [],
       primaryAction: action,
       timeOffset: currentRange.start - action.start,
-      rowDelta: Math.round((top || 0) / rowHeight)
+      rowDelta: Math.round((top || 0) / rowHeight),
+      allowCreateTrack: allowCreateTrack
     }) : false;
     if (multiDragConflict) {
       setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview({
@@ -3274,6 +3276,25 @@ var useRowSelection = function useRowSelection(options) {
   };
 };
 
+var buildResetPreviewPlan = function buildResetPreviewPlan(_ref) {
+  var editorData = _ref.editorData,
+    initialPositions = _ref.initialPositions,
+    selectedActionIds = _ref.selectedActionIds;
+  return {
+    rows: editorData,
+    placements: selectedActionIds.map(function (actionId) {
+      var initial = initialPositions.get(actionId);
+      if (!initial) return null;
+      return {
+        actionId: actionId,
+        rowId: initial.rowId,
+        start: initial.start,
+        end: initial.end,
+        conflicted: true
+      };
+    }).filter(Boolean)
+  };
+};
 var resetMultiDragState = function resetMultiDragState() {
   return {
     isMultiDrag: false,
@@ -3296,6 +3317,17 @@ var cloneRows = function cloneRows(rows) {
     });
   });
 };
+var createEmptyRow = function createEmptyRow(_ref2) {
+  var templateRow = _ref2.templateRow,
+    order = _ref2.order;
+  return _objectSpread2(_objectSpread2({}, templateRow), {}, {
+    id: "row_".concat(Date.now(), "_").concat(Math.random().toString(36).slice(2, 9)),
+    actions: [],
+    order: order,
+    selected: false,
+    isPreview: false
+  });
+};
 var removeActionFromRows = function removeActionFromRows(rows, actionId) {
   for (var i = 0; i < rows.length; i++) {
     var actionIndex = rows[i].actions.findIndex(function (item) {
@@ -3316,17 +3348,82 @@ var removeActionFromRows = function removeActionFromRows(rows, actionId) {
     action: undefined
   };
 };
-var buildMultiDragPlacements = function buildMultiDragPlacements(_ref4) {
-  var editorData = _ref4.editorData,
-    initialPositions = _ref4.initialPositions,
-    selectedActionIds = _ref4.selectedActionIds,
-    timeOffset = _ref4.timeOffset,
-    rowDelta = _ref4.rowDelta;
+var buildMultiDragPlacements = function buildMultiDragPlacements(_ref3) {
+  var editorData = _ref3.editorData,
+    initialPositions = _ref3.initialPositions,
+    selectedActionIds = _ref3.selectedActionIds,
+    timeOffset = _ref3.timeOffset,
+    rowDelta = _ref3.rowDelta,
+    allowCreateTrack = _ref3.allowCreateTrack;
   var selectedSet = new Set(selectedActionIds);
-  return selectedActionIds.map(function (actionId) {
+  var selectedInitials = selectedActionIds.map(function (actionId) {
     var initial = initialPositions.get(actionId);
-    if (!initial) return null;
-    var candidateRow = editorData[initial.rowIndex + rowDelta];
+    return initial ? {
+      actionId: actionId,
+      initial: initial
+    } : null;
+  }).filter(Boolean);
+  if (selectedInitials.length === 0) {
+    return {
+      placements: [],
+      rows: editorData
+    };
+  }
+  var targetIndexes = selectedInitials.map(function (_ref4) {
+    var initial = _ref4.initial;
+    return initial.rowIndex + rowDelta;
+  });
+  var minTargetIndex = Math.min.apply(Math, _toConsumableArray(targetIndexes));
+  var maxTargetIndex = Math.max.apply(Math, _toConsumableArray(targetIndexes));
+  var prependCount = minTargetIndex < 0 ? -minTargetIndex : 0;
+  var appendCount = maxTargetIndex >= editorData.length ? maxTargetIndex - editorData.length + 1 : 0;
+  if (!allowCreateTrack && (prependCount > 0 || appendCount > 0)) {
+    return {
+      rows: editorData,
+      placements: selectedInitials.map(function (_ref5) {
+        var actionId = _ref5.actionId,
+          initial = _ref5.initial;
+        return {
+          actionId: actionId,
+          rowId: initial.rowId,
+          start: initial.start,
+          end: initial.end,
+          conflicted: true
+        };
+      })
+    };
+  }
+  var minOrder = Math.min.apply(Math, _toConsumableArray(editorData.map(function (row) {
+    var _row$order;
+    return Number((_row$order = row.order) !== null && _row$order !== void 0 ? _row$order : 0);
+  })));
+  var maxOrder = Math.max.apply(Math, _toConsumableArray(editorData.map(function (row) {
+    var _row$order2;
+    return Number((_row$order2 = row.order) !== null && _row$order2 !== void 0 ? _row$order2 : 0);
+  })));
+  var prependTemplateRow = editorData[0];
+  var appendTemplateRow = editorData[editorData.length - 1];
+  var prependRows = Array.from({
+    length: prependCount
+  }, function (_, index) {
+    return createEmptyRow({
+      templateRow: prependTemplateRow,
+      order: minOrder - prependCount + index
+    });
+  });
+  var appendRows = Array.from({
+    length: appendCount
+  }, function (_, index) {
+    return createEmptyRow({
+      templateRow: appendTemplateRow,
+      order: maxOrder + index + 1
+    });
+  });
+  var expandedRows = [].concat(prependRows, _toConsumableArray(editorData), appendRows);
+  var placements = selectedInitials.map(function (_ref6) {
+    var actionId = _ref6.actionId,
+      initial = _ref6.initial;
+    var candidateRow = expandedRows[initial.rowIndex + rowDelta + prependCount];
     var nextStart = initial.start + timeOffset;
     var nextEnd = initial.end + timeOffset;
     if (!candidateRow) {
@@ -3357,7 +3454,11 @@ var buildMultiDragPlacements = function buildMultiDragPlacements(_ref4) {
       end: nextEnd,
       conflicted: false
     };
-  }).filter(Boolean);
+  });
+  return {
+    placements: placements,
+    rows: expandedRows
+  };
 };
 var useRowDrag = function useRowDrag(options) {
   var selectedActionIds = options.selectedActionIds,
@@ -3370,9 +3471,12 @@ var useRowDrag = function useRowDrag(options) {
     _options$startLeft = options.startLeft,
     startLeft = _options$startLeft === void 0 ? 20 : _options$startLeft,
     setEditorData = options.setEditorData,
+    _options$allowCreateT = options.allowCreateTrack,
+    allowCreateTrack = _options$allowCreateT === void 0 ? true : _options$allowCreateT,
     _options$rowHeight = options.rowHeight,
     rowHeight = _options$rowHeight === void 0 ? 35 : _options$rowHeight,
-    onUpdateEditorData = options.onUpdateEditorData;
+    onUpdateEditorData = options.onUpdateEditorData,
+    onPreviewChange = options.onPreviewChange;
   // 多选拖拽状态
   var multiDragState = React__default['default'].useRef(resetMultiDragState());
   // 获取选中的 action DOM 元素
@@ -3382,8 +3486,8 @@ var useRowDrag = function useRowDrag(options) {
     return Array.from(actions);
   }, [containerRef]);
   // 拖拽开始
-  var onDragStart = React__default['default'].useCallback(function (_ref5) {
-    var action = _ref5.action;
+  var onDragStart = React__default['default'].useCallback(function (_ref7) {
+    var action = _ref7.action;
     if (selectedActionIds.length <= 1) {
       multiDragState.current = resetMultiDragState();
       return;
@@ -3466,10 +3570,14 @@ var useRowDrag = function useRowDrag(options) {
       dy = params.dy;
     var state = multiDragState.current;
     if (!state.isMultiDrag || !state.isDraggingSelection || !state.initialElementPositions) {
+      onPreviewChange === null || onPreviewChange === void 0 ? void 0 : onPreviewChange(null);
       return;
     }
     var selectedEls = getSelectedActionEls();
-    if (selectedEls.length === 0) return;
+    if (selectedEls.length === 0) {
+      onPreviewChange === null || onPreviewChange === void 0 ? void 0 : onPreviewChange(null);
+      return;
+    }
     state.offsetX = (_params$gap = params.gap) !== null && _params$gap !== void 0 ? _params$gap : 0;
     state.offsetY = (state.offsetY || 0) + dy;
     selectedEls.forEach(function (el) {
@@ -3483,7 +3591,42 @@ var useRowDrag = function useRowDrag(options) {
       el.setAttribute('data-x', newX.toString());
       el.setAttribute('data-y', newY.toString());
     });
-  }, [getSelectedActionEls]);
+    if (actionId !== state.primaryActionId) return;
+    var primaryInitial = state.initialPositions.get(actionId);
+    if (!primaryInitial) {
+      onPreviewChange === null || onPreviewChange === void 0 ? void 0 : onPreviewChange(null);
+      return;
+    }
+    var primaryFinalTime = parserTransformToTime({
+      left: params.left,
+      width: params.width
+    }, {
+      startLeft: startLeft,
+      scale: scale,
+      scaleWidth: scaleWidth
+    });
+    var timeOffset = primaryFinalTime.start - primaryInitial.start;
+    var rowDelta = Math.round((params.top || 0) / rowHeight);
+    var plan = buildMultiDragPlacements({
+      editorData: editorData,
+      initialPositions: state.initialPositions,
+      selectedActionIds: selectedActionIds,
+      timeOffset: timeOffset,
+      rowDelta: rowDelta,
+      allowCreateTrack: allowCreateTrack
+    });
+    if (plan.placements.some(function (placement) {
+      return placement.conflicted;
+    })) {
+      onPreviewChange === null || onPreviewChange === void 0 ? void 0 : onPreviewChange(buildResetPreviewPlan({
+        editorData: editorData,
+        initialPositions: state.initialPositions,
+        selectedActionIds: selectedActionIds
+      }));
+      return;
+    }
+    onPreviewChange === null || onPreviewChange === void 0 ? void 0 : onPreviewChange(plan);
+  }, [allowCreateTrack, editorData, getSelectedActionEls, onPreviewChange, rowHeight, scale, scaleWidth, selectedActionIds, startLeft]);
   // 拖拽结束
   var onDragEnd = React__default['default'].useCallback(function (params) {
     var state = multiDragState.current;
@@ -3493,6 +3636,7 @@ var useRowDrag = function useRowDrag(options) {
       el.removeAttribute('data-y');
       el.style.transform = '';
     });
+    onPreviewChange === null || onPreviewChange === void 0 ? void 0 : onPreviewChange(null);
     if (!state.isMultiDrag || !params || (params === null || params === void 0 ? void 0 : params.actionId) !== state.primaryActionId) {
       multiDragState.current = resetMultiDragState();
       return;
@@ -3528,13 +3672,16 @@ var useRowDrag = function useRowDrag(options) {
       multiDragState.current = resetMultiDragState();
       return;
     }
-    var placements = buildMultiDragPlacements({
-      editorData: editorData,
-      initialPositions: initialPositions,
-      selectedActionIds: selectedActionIds,
-      timeOffset: timeOffset,
-      rowDelta: rowDelta
-    });
+    var _buildMultiDragPlacem = buildMultiDragPlacements({
+        editorData: editorData,
+        initialPositions: initialPositions,
+        selectedActionIds: selectedActionIds,
+        timeOffset: timeOffset,
+        rowDelta: rowDelta,
+        allowCreateTrack: allowCreateTrack
+      }),
+      placements = _buildMultiDragPlacem.placements,
+      plannedRows = _buildMultiDragPlacem.rows;
     var hasConflict = placements.some(function (placement) {
       return placement.conflicted;
     });
@@ -3542,7 +3689,7 @@ var useRowDrag = function useRowDrag(options) {
       multiDragState.current = resetMultiDragState();
       return;
     }
-    var rows = cloneRows(editorData);
+    var rows = cloneRows(plannedRows);
     var updatedActions = [];
     var removedActions = new Map();
     selectedActionIds.forEach(function (selectedId) {
@@ -3585,7 +3732,7 @@ var useRowDrag = function useRowDrag(options) {
       onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(primaryTargetRow, updatedActions);
     }
     multiDragState.current = resetMultiDragState();
-  }, [editorData, getSelectedActionEls, onUpdateEditorData, rowHeight, scale, scaleWidth, selectedActionIds, setEditorData, startLeft]);
+  }, [allowCreateTrack, editorData, getSelectedActionEls, onPreviewChange, onUpdateEditorData, rowHeight, scale, scaleWidth, selectedActionIds, setEditorData, startLeft]);
   // 检查是否是多选拖拽模式
   var isMultiDragging = React__default['default'].useCallback(function () {
     return multiDragState.current.isMultiDrag;
@@ -3754,11 +3901,13 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
   var uploadRef = React.useRef();
   // ---- drag overlay: imperative DOM updates to avoid React re-renders on every mousemove ----
   var insertPreviewDomRef = React.useRef(null);
+  var multiInsertPreviewDomRef = React.useRef(null);
   var trackPreviewRowDomRef = React.useRef(null);
   var trackPreviewLineDomRef = React.useRef(null);
   var dragIndicatorDomRef = React.useRef(null);
   // Latest data refs for re-applying positions on scroll
   var insertPreviewDataRef = React.useRef(null);
+  var multiInsertPreviewDataRef = React.useRef(null);
   var trackPreviewDataRef = React.useRef(null);
   var dragIndicatorDataRef = React.useRef(null);
   // Always-current snapshot of render-time props, read safely inside stable callbacks
@@ -3817,6 +3966,71 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
     div.style.top = "".concat(top - st + 18, "px");
     div.style.height = "".concat(Math.max(rowH - 4, 8), "px");
   }, []);
+  var setMultiInsertPreview = React.useCallback(function (plan) {
+    multiInsertPreviewDataRef.current = plan;
+    var container = multiInsertPreviewDomRef.current;
+    if (!container) return;
+    if (!plan || plan.placements.length === 0) {
+      container.style.display = 'none';
+      Array.from(container.children).forEach(function (node) {
+        node.style.display = 'none';
+      });
+      return;
+    }
+    var _liveRef$current2 = liveRef.current,
+      st = _liveRef$current2.scrollTop,
+      sl = _liveRef$current2.startLeft,
+      sc = _liveRef$current2.scale,
+      sw = _liveRef$current2.scaleWidth,
+      rh = _liveRef$current2.rowHeight;
+    var rowIndexMap = new Map(plan.rows.map(function (row, index) {
+      return [row.id, index];
+    }));
+    var placements = plan.placements;
+    while (container.children.length < placements.length) {
+      var previewNode = document.createElement('div');
+      previewNode.style.position = 'absolute';
+      previewNode.style.background = 'rgba(160, 160, 160, 0.12)';
+      previewNode.style.border = '1.5px dashed rgba(150, 150, 150, 0.7)';
+      previewNode.style.borderRadius = '8px';
+      previewNode.style.zIndex = '1000';
+      previewNode.style.pointerEvents = 'none';
+      container.appendChild(previewNode);
+    }
+    Array.from(container.children).forEach(function (node, index) {
+      var _plan$rows$targetInde;
+      var previewNode = node;
+      var placement = placements[index];
+      if (!placement) {
+        previewNode.style.display = 'none';
+        return;
+      }
+      var targetIndex = rowIndexMap.get(placement.rowId);
+      if (targetIndex === undefined) {
+        previewNode.style.display = 'none';
+        return;
+      }
+      var top = 0;
+      for (var i = 0; i < targetIndex; i++) {
+        top += (plan.rows[i].rowHeight || rh) + 2;
+      }
+      var rowH = ((_plan$rows$targetInde = plan.rows[targetIndex]) === null || _plan$rows$targetInde === void 0 ? void 0 : _plan$rows$targetInde.rowHeight) || rh;
+      var t = parserTimeToTransform({
+        start: placement.start,
+        end: placement.end
+      }, {
+        startLeft: sl,
+        scale: sc,
+        scaleWidth: sw
+      });
+      previewNode.style.display = 'block';
+      previewNode.style.left = "".concat(t.left, "px");
+      previewNode.style.width = "".concat(t.width, "px");
+      previewNode.style.top = "".concat(top - st + 18, "px");
+      previewNode.style.height = "".concat(Math.max(rowH - 4, 8), "px");
+    });
+    container.style.display = 'block';
+  }, []);
   var setTrackPreview = React.useCallback(function (preview) {
     trackPreviewDataRef.current = preview;
     var rowDiv = trackPreviewRowDomRef.current;
@@ -3827,10 +4041,10 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
       lineDiv.style.display = 'none';
       return;
     }
-    var _liveRef$current2 = liveRef.current,
-      st = _liveRef$current2.scrollTop,
-      ed = _liveRef$current2.editorData,
-      rh = _liveRef$current2.rowHeight;
+    var _liveRef$current3 = liveRef.current,
+      st = _liveRef$current3.scrollTop,
+      ed = _liveRef$current3.editorData,
+      rh = _liveRef$current3.rowHeight;
     if (preview.kind === 'new-row') {
       rowDiv.style.display = 'none';
       var insertIndex = preview.insertIndex;
@@ -3871,10 +4085,10 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
       div.style.display = 'none';
       return;
     }
-    var _liveRef$current3 = liveRef.current,
-      st = _liveRef$current3.scrollTop,
-      ed = _liveRef$current3.editorData,
-      rh = _liveRef$current3.rowHeight;
+    var _liveRef$current4 = liveRef.current,
+      st = _liveRef$current4.scrollTop,
+      ed = _liveRef$current4.editorData,
+      rh = _liveRef$current4.rowHeight;
     var top = 0;
     for (var i = 0; i < Math.min(indicator.targetIndex, ed.length); i++) top += ed[i].rowHeight || rh;
     div.style.display = 'block';
@@ -3883,9 +4097,10 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
   // Re-apply overlay positions whenever scroll changes during an active drag
   React.useLayoutEffect(function () {
     if (insertPreviewDataRef.current) setInsertPreview(insertPreviewDataRef.current);
+    if (multiInsertPreviewDataRef.current) setMultiInsertPreview(multiInsertPreviewDataRef.current);
     if (trackPreviewDataRef.current) setTrackPreview(trackPreviewDataRef.current);
     if (dragIndicatorDataRef.current) setDragIndicator(dragIndicatorDataRef.current);
-  }, [scrollTop]);
+  }, [scrollTop, setInsertPreview, setMultiInsertPreview, setTrackPreview, setDragIndicator]);
   // 使用 ref 追踪 handleSelectionChange 的调用深度，避免无限循环
   var selectionChangeDepthRef = React.useRef(0);
   // 框选功能
@@ -3931,6 +4146,23 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
     onClickOutside = _useRowSelection.onClickOutside,
     onCtrlClick = _useRowSelection.onCtrlClick,
     setSelectedActionIds = _useRowSelection.setSelectedActionIds;
+  React.useEffect(function () {
+    var selectedIdsFromEditor = editorData.flatMap(function (row) {
+      return row.actions.filter(function (action) {
+        return action.selected;
+      }).map(function (action) {
+        return action.id;
+      });
+    });
+    var normalizedSelectedIds = selectedIdsFromEditor.length > 1 ? selectedIdsFromEditor : [];
+    var hasSameSelection = normalizedSelectedIds.length === selectedActionIds.length && normalizedSelectedIds.every(function (id) {
+      return selectedActionIds.includes(id);
+    });
+    if (hasSameSelection) {
+      return;
+    }
+    setSelectedActionIds(new Set(normalizedSelectedIds));
+  }, [editorData, selectedActionIds, setSelectedActionIds]);
   var _useRowDrag = useRowDrag({
       selectedActionIds: selectedActionIds,
       editorData: editorData,
@@ -3941,7 +4173,8 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
       setEditorData: setEditorData,
       allowCreateTrack: allowCreateTrack,
       rowHeight: _rowHeight,
-      onUpdateEditorData: onUpdateEditorData
+      onUpdateEditorData: onUpdateEditorData,
+      onPreviewChange: setMultiInsertPreview
     }),
     onDragStart = _useRowDrag.onDragStart,
     onDragMove = _useRowDrag.onDragMove,
@@ -4252,6 +4485,15 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
       }
     });
   }), /*#__PURE__*/React__default['default'].createElement(DragSelection, null), /*#__PURE__*/React__default['default'].createElement("div", {
+    ref: multiInsertPreviewDomRef,
+    style: {
+      display: 'none',
+      position: 'absolute',
+      inset: 0,
+      zIndex: 1000,
+      pointerEvents: 'none'
+    }
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
     ref: trackPreviewLineDomRef,
     style: {
       display: 'none',
@@ -4867,10 +5109,9 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
         var containerEl = document.querySelector('.timeline-editor');
         if (!containerEl) return;
         var left = startLeft + scaleWidth / scale * val;
-        var nextScrollLeft = Math.min(Math.max(left, 0), getMaxScrollLeft());
-        containerEl.scrollLeft = nextScrollLeft;
+        containerEl.scrollLeft = Math.max(left, 0);
         scrollSync.current && scrollSync.current.setState({
-          scrollLeft: nextScrollLeft
+          scrollLeft: Math.max(left, 0)
         });
       },
       setScrollTop: function setScrollTop(val) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sense-react-timeline-editor",
-  "version": "1.1.38",
+  "version": "1.1.40",
   "author": "xzdarcy",
   "license": "MIT",
   "keywords": [