sense-react-timeline-editor 1.1.19 → 1.1.21

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

@@ -84,12 +84,7 @@ export declare const useRowDrag: (options: UseRowDragOptions) => {
         action?: TimelineAction;
         row?: TimelineRow;
     }) => void;
-    getPreviewPosition: (actionId: string) => {
-        left: number;
-        width: number;
-    } | null;
     isMultiDragging: () => boolean;
-    getMultiDragState: () => MultiDragState;
     isMultiDrag: boolean;
 };
 export {};

package/dist/index.esm.js

@@ -66,54 +66,6 @@ function _createClass(e, r, t) {
     writable: !1
   }), e;
 }
-function _createForOfIteratorHelper(r, e) {
-  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (!t) {
-    if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
-      t && (r = t);
-      var n = 0,
-        F = function () {};
-      return {
-        s: F,
-        n: function () {
-          return n >= r.length ? {
-            done: !0
-          } : {
-            done: !1,
-            value: r[n++]
-          };
-        },
-        e: function (r) {
-          throw r;
-        },
-        f: F
-      };
-    }
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-  var o,
-    a = !0,
-    u = !1;
-  return {
-    s: function () {
-      t = t.call(r);
-    },
-    n: function () {
-      var r = t.next();
-      return a = r.done, r;
-    },
-    e: function (r) {
-      u = !0, o = r;
-    },
-    f: function () {
-      try {
-        a || null == t.return || t.return();
-      } finally {
-        if (u) throw o;
-      }
-    }
-  };
-}
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
@@ -2389,6 +2341,9 @@ var EditActionO = function EditActionO(_ref7) {
   //#region [rgba(100,120,156,0.08)] 回调
   var handleDragStart = function handleDragStart() {
     var _areaRef$current;
+    window.dispatchEvent(new CustomEvent('timeline-action-dragging-change', {
+      detail: true
+    }));
     // 保存原始位置
     setDragging(true);
     clearRipplePreview(areaRef.current);
@@ -2529,6 +2484,9 @@ var EditActionO = function EditActionO(_ref7) {
       height = _ref9.height,
       isMultiDrag = _ref9.isMultiDrag,
       fnCallback = _ref9.fn;
+    window.dispatchEvent(new CustomEvent('timeline-action-dragging-change', {
+      detail: false
+    }));
     setDragging(false);
     setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview(null);
     setTrackPreview === null || setTrackPreview === void 0 ? void 0 : setTrackPreview(null);
@@ -2564,6 +2522,35 @@ var EditActionO = function EditActionO(_ref7) {
       }),
       start = _parserTransformToTim.start,
       end = _parserTransformToTim.end;
+    var isSelectionMultiDrag = ((selectedActionIds === null || selectedActionIds === void 0 ? void 0 : selectedActionIds.length) || 0) > 1 && (selectedActionIds === null || selectedActionIds === void 0 ? void 0 : selectedActionIds.includes(action.id));
+    if (isSelectionMultiDrag || isMultiDrag) {
+      var originalTransform = parserTimeToTransform({
+        start: action.start,
+        end: action.end
+      }, {
+        startLeft: startLeft,
+        scale: scale,
+        scaleWidth: scaleWidth
+      });
+      setTransform(_objectSpread2(_objectSpread2({}, originalTransform), {}, {
+        top: 0
+      }));
+      if (onActionMoveEnd) {
+        onActionMoveEnd({
+          action: action,
+          row: row,
+          start: start,
+          end: end,
+          left: left,
+          width: width,
+          top: top,
+          height: height,
+          up: 0,
+          isMultiDrag: true
+        });
+      }
+      return;
+    }
     // Step 1: 根据鼠标垂直位置确定初始目标行
     var placement = resolveTargetRowPlacement({
       editorData: editorData,
@@ -2835,9 +2822,18 @@ var EditActionO = function EditActionO(_ref7) {
   }, /*#__PURE__*/React.createElement("div", {
     "data-action-id": action.id,
     "data-action-drag": dragging,
+    "data-action-name": action.file_name,
     "data-action-disabled": action.is_disabled ? 1 : 0,
     onMouseDown: function onMouseDown() {
       isDragWhenClick.current = false;
+      if (((selectedActionIds === null || selectedActionIds === void 0 ? void 0 : selectedActionIds.length) || 0) > 0 && !(selectedActionIds === null || selectedActionIds === void 0 ? void 0 : selectedActionIds.includes(action.id))) {
+        window.dispatchEvent(new CustomEvent('replace-selection-action', {
+          detail: {
+            actionId: action.id,
+            row: row
+          }
+        }));
+      }
     },
     onClick: function onClick(e) {
       var time;
@@ -3228,41 +3224,48 @@ var removeActionFromRows = function removeActionFromRows(rows, actionId) {
     action: undefined
   };
 };
-var ensureRowAtIndex = function ensureRowAtIndex(_ref) {
-  var _ref2, _rows$order, _rows;
-  var rows = _ref.rows,
-    targetIndex = _ref.targetIndex,
-    templateRow = _ref.templateRow;
-  var clampedIndex = Math.max(0, Math.min(targetIndex, rows.length));
-  if (clampedIndex < rows.length) return rows[clampedIndex];
-  var previousOrder = (_ref2 = (_rows$order = (_rows = rows[rows.length - 1]) === null || _rows === void 0 ? void 0 : _rows.order) !== null && _rows$order !== void 0 ? _rows$order : templateRow.order) !== null && _ref2 !== void 0 ? _ref2 : 0;
-  var newRow = _objectSpread2(_objectSpread2({}, templateRow), {}, {
-    id: "row_".concat(Date.now(), "_").concat(Math.random().toString(36).slice(2, 9)),
-    actions: [],
-    order: Number(previousOrder) + 0.01
-  });
-  rows.push(newRow);
-  return newRow;
-};
-var findFirstAvailableRow = function findFirstAvailableRow(_ref3) {
-  var rows = _ref3.rows,
-    targetIndex = _ref3.targetIndex,
-    actionId = _ref3.actionId,
-    start = _ref3.start,
-    end = _ref3.end,
-    templateRow = _ref3.templateRow;
-  var safeIndex = Math.max(0, targetIndex);
-  for (var i = safeIndex; i < rows.length; i++) {
-    var hasConflict = rows[i].actions.some(function (item) {
-      return item.id !== actionId && item.start < end && item.end > start;
+var buildMultiDragPlacements = function buildMultiDragPlacements(_ref4) {
+  var editorData = _ref4.editorData,
+    initialPositions = _ref4.initialPositions,
+    selectedActionIds = _ref4.selectedActionIds,
+    timeOffset = _ref4.timeOffset,
+    rowDelta = _ref4.rowDelta;
+  var selectedSet = new Set(selectedActionIds);
+  return selectedActionIds.map(function (actionId) {
+    var initial = initialPositions.get(actionId);
+    if (!initial) return null;
+    var candidateRow = editorData[initial.rowIndex + rowDelta];
+    var nextStart = initial.start + timeOffset;
+    var nextEnd = initial.end + timeOffset;
+    if (!candidateRow) {
+      return {
+        actionId: actionId,
+        rowId: initial.rowId,
+        start: initial.start,
+        end: initial.end,
+        conflicted: true
+      };
+    }
+    var hasConflict = candidateRow.actions.some(function (item) {
+      return !selectedSet.has(item.id) && item.start < nextEnd && item.end > nextStart;
     });
-    if (!hasConflict) return rows[i];
-  }
-  return ensureRowAtIndex({
-    rows: rows,
-    targetIndex: rows.length,
-    templateRow: templateRow
-  });
+    if (hasConflict) {
+      return {
+        actionId: actionId,
+        rowId: initial.rowId,
+        start: initial.start,
+        end: initial.end,
+        conflicted: true
+      };
+    }
+    return {
+      actionId: actionId,
+      rowId: candidateRow.id,
+      start: nextStart,
+      end: nextEnd,
+      conflicted: false
+    };
+  }).filter(Boolean);
 };
 var useRowDrag = function useRowDrag(options) {
   var selectedActionIds = options.selectedActionIds,
@@ -3286,11 +3289,15 @@ var useRowDrag = function useRowDrag(options) {
     var actions = containerRef.current.querySelectorAll('.timeline-editor-action-selected');
     return Array.from(actions);
   }, [containerRef]);
-  var previewPositionsRef = React.useRef(new Map());
   // 拖拽开始
-  var onDragStart = React.useCallback(function (_ref4) {
-    var action = _ref4.action;
+  var onDragStart = React.useCallback(function (_ref5) {
+    var action = _ref5.action;
     if (selectedActionIds.length <= 1) {
+      multiDragState.current = resetMultiDragState();
+      return;
+    }
+    if (!selectedActionIds.includes(action.id)) {
+      multiDragState.current = resetMultiDragState();
       return;
     }
     var selectedEls = getSelectedActionEls();
@@ -3387,7 +3394,6 @@ var useRowDrag = function useRowDrag(options) {
   }, [getSelectedActionEls]);
   // 拖拽结束
   var onDragEnd = React.useCallback(function (params) {
-    var _rows$primaryRemoval$;
     var state = multiDragState.current;
     var selectedEls = getSelectedActionEls();
     selectedEls.forEach(function (el) {
@@ -3397,7 +3403,6 @@ var useRowDrag = function useRowDrag(options) {
     });
     if (!state.isMultiDrag || !params || (params === null || params === void 0 ? void 0 : params.actionId) !== state.primaryActionId) {
       multiDragState.current = resetMultiDragState();
-      previewPositionsRef.current = new Map();
       return;
     }
     var left = params.left,
@@ -3410,13 +3415,11 @@ var useRowDrag = function useRowDrag(options) {
       primaryActionId = state.primaryActionId;
     if (!setEditorData || initialPositions.size === 0) {
       multiDragState.current = resetMultiDragState();
-      previewPositionsRef.current = new Map();
       return;
     }
     var primaryInitial = initialPositions.get(primaryActionId);
     if (!primaryInitial) {
       multiDragState.current = resetMultiDragState();
-      previewPositionsRef.current = new Map();
       return;
     }
     var primaryFinalTime = parserTransformToTime({
@@ -3431,119 +3434,75 @@ var useRowDrag = function useRowDrag(options) {
     var rowDelta = Math.round((top || 0) / rowHeight);
     if (Math.abs(timeOffset) < 0.001 && rowDelta === 0) {
       multiDragState.current = resetMultiDragState();
-      previewPositionsRef.current = new Map();
+      return;
+    }
+    var placements = buildMultiDragPlacements({
+      editorData: editorData,
+      initialPositions: initialPositions,
+      selectedActionIds: selectedActionIds,
+      timeOffset: timeOffset,
+      rowDelta: rowDelta
+    });
+    var hasConflict = placements.some(function (placement) {
+      return placement.conflicted;
+    });
+    if (hasConflict) {
+      multiDragState.current = resetMultiDragState();
       return;
     }
     var rows = cloneRows(editorData);
     var updatedActions = [];
-    var primaryRemoval = removeActionFromRows(rows, primaryActionId);
-    var fallbackPrimaryRow = rows.find(function (item) {
-      return item.id === primaryInitial.rowId;
-    }) || editorData[primaryInitial.rowIndex];
-    var primaryTargetRowId = (primaryRow === null || primaryRow === void 0 ? void 0 : primaryRow.id) || primaryInitial.rowId;
-    var primaryTargetRow = rows.find(function (item) {
-      return item.id === primaryTargetRowId;
+    var removedActions = new Map();
+    selectedActionIds.forEach(function (selectedId) {
+      var removal = removeActionFromRows(rows, selectedId);
+      if (removal.action) {
+        removedActions.set(selectedId, removal.action);
+      }
     });
-    if (!primaryTargetRow) {
-      primaryTargetRow = _objectSpread2(_objectSpread2({}, primaryRow || fallbackPrimaryRow), {}, {
-        actions: []
+    placements.forEach(function (placement) {
+      var actionItem = removedActions.get(placement.actionId) || (placement.actionId === primaryActionId ? primaryAction : undefined);
+      if (!actionItem) return;
+      var targetRow = rows.find(function (item) {
+        return item.id === placement.rowId;
       });
-      rows.push(primaryTargetRow);
-    }
-    if (primaryAction) {
-      var normalizedPrimaryAction = _objectSpread2(_objectSpread2({}, primaryAction), {}, {
-        start: primaryFinalTime.start,
-        end: primaryFinalTime.end,
-        order: primaryTargetRow.order
+      if (!targetRow) return;
+      var nextAction = _objectSpread2(_objectSpread2({}, actionItem), {}, {
+        start: placement.start,
+        end: placement.end,
+        order: targetRow.order
       });
-      primaryTargetRow.actions.push(normalizedPrimaryAction);
-      primaryTargetRow.actions.sort(function (a, b) {
+      targetRow.actions.push(nextAction);
+      targetRow.actions.sort(function (a, b) {
         return a.start - b.start;
       });
-      updatedActions.push(normalizedPrimaryAction);
-    }
-    if (primaryRemoval.rowIndex !== -1 && ((_rows$primaryRemoval$ = rows[primaryRemoval.rowIndex]) === null || _rows$primaryRemoval$ === void 0 ? void 0 : _rows$primaryRemoval$.actions.length) === 0) {
-      rows.splice(primaryRemoval.rowIndex, 1);
-    }
-    var selectedSecondaryIds = selectedActionIds.filter(function (id) {
-      return id !== primaryActionId;
+      updatedActions.push(nextAction);
     });
-    var _iterator = _createForOfIteratorHelper(selectedSecondaryIds),
-      _step;
-    try {
-      var _loop = function _loop() {
-          var _rows$removal$rowInde;
-          var selectedId = _step.value;
-          var initial = initialPositions.get(selectedId);
-          if (!initial) return 0; // continue
-          var removal = removeActionFromRows(rows, selectedId);
-          var currentAction = removal.action;
-          if (!currentAction) return 0; // continue
-          var templateRow = rows.find(function (item) {
-            return item.id === initial.rowId;
-          }) || editorData[initial.rowIndex] || primaryTargetRow;
-          var targetStart = currentAction.start + timeOffset;
-          var targetEnd = currentAction.end + timeOffset;
-          var preferredIndex = initial.rowIndex + rowDelta;
-          var targetRow = findFirstAvailableRow({
-            rows: rows,
-            targetIndex: preferredIndex,
-            actionId: selectedId,
-            start: targetStart,
-            end: targetEnd,
-            templateRow: templateRow
-          });
-          var nextAction = _objectSpread2(_objectSpread2({}, currentAction), {}, {
-            start: targetStart,
-            end: targetEnd,
-            order: targetRow.order
-          });
-          targetRow.actions.push(nextAction);
-          targetRow.actions.sort(function (a, b) {
-            return a.start - b.start;
-          });
-          updatedActions.push(nextAction);
-          if (removal.rowIndex !== -1 && ((_rows$removal$rowInde = rows[removal.rowIndex]) === null || _rows$removal$rowInde === void 0 ? void 0 : _rows$removal$rowInde.actions.length) === 0) {
-            rows.splice(removal.rowIndex, 1);
-          }
-        },
-        _ret;
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        _ret = _loop();
-        if (_ret === 0) continue;
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-    rows.sort(function (a, b) {
+    var nextRows = rows.filter(function (row) {
+      return row.actions.length > 0;
+    }).sort(function (a, b) {
       return Number(a.order || 0) - Number(b.order || 0);
     });
-    setEditorData(rows);
-    onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(primaryTargetRow, updatedActions);
+    var primaryPlacement = placements.find(function (item) {
+      return item.actionId === primaryActionId;
+    });
+    var primaryTargetRow = primaryPlacement ? nextRows.find(function (item) {
+      return item.id === primaryPlacement.rowId;
+    }) : primaryRow;
+    setEditorData(nextRows);
+    if (primaryTargetRow) {
+      onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(primaryTargetRow, updatedActions);
+    }
     multiDragState.current = resetMultiDragState();
-    previewPositionsRef.current = new Map();
   }, [editorData, getSelectedActionEls, onUpdateEditorData, rowHeight, scale, scaleWidth, selectedActionIds, setEditorData, startLeft]);
-  // 获取指定 action 的预览位置
-  var getPreviewPosition = React.useCallback(function (actionId) {
-    return previewPositionsRef.current.get(actionId) || null;
-  }, []);
   // 检查是否是多选拖拽模式
   var isMultiDragging = React.useCallback(function () {
     return multiDragState.current.isMultiDrag;
   }, []);
-  // 获取当前拖拽状态
-  var getMultiDragState = React.useCallback(function () {
-    return multiDragState.current;
-  }, []);
   return {
     onDragStart: onDragStart,
     onDragMove: onDragMove,
     onDragEnd: onDragEnd,
-    getPreviewPosition: getPreviewPosition,
     isMultiDragging: isMultiDragging,
-    getMultiDragState: getMultiDragState,
     isMultiDrag: multiDragState.current.isMultiDrag
   };
 };
@@ -3974,6 +3933,22 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
       window.removeEventListener('ctrl-click-action', handleCtrlClickAction);
     };
   }, [onCtrlClick, editorData, handleSelectionChange]);
+  useEffect(function () {
+    var handleReplaceSelectionAction = function handleReplaceSelectionAction(e) {
+      var _editorData$2;
+      var _ref2 = e.detail || {},
+        actionId = _ref2.actionId,
+        row = _ref2.row;
+      if (!actionId || !row) return;
+      if (row.type !== ((_editorData$2 = editorData[0]) === null || _editorData$2 === void 0 ? void 0 : _editorData$2.type)) return;
+      setSelectedActionIds(new Set([actionId]));
+      handleSelectionChange([actionId]);
+    };
+    window.addEventListener('replace-selection-action', handleReplaceSelectionAction);
+    return function () {
+      window.removeEventListener('replace-selection-action', handleReplaceSelectionAction);
+    };
+  }, [editorData, handleSelectionChange, setSelectedActionIds]);
   var uploadBgMusic = useCallback(function (file, row) {
     var canUpload = onBeforeUpload === null || onBeforeUpload === void 0 ? void 0 : onBeforeUpload(file[0]);
     if (!canUpload) return;
@@ -3997,10 +3972,10 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
   }, [onBeforeUpload, handleUploadChange, customRequest]);
   /** 获取每个cell渲染内容 */
-  var cellRenderer = function cellRenderer(_ref2) {
-    var rowIndex = _ref2.rowIndex,
-      key = _ref2.key,
-      style = _ref2.style;
+  var cellRenderer = function cellRenderer(_ref3) {
+    var rowIndex = _ref3.rowIndex,
+      key = _ref3.key,
+      style = _ref3.style;
     var row = editorData[rowIndex]; // 行数据
     var editRow = /*#__PURE__*/React.createElement(EditRow, _objectSpread2(_objectSpread2({}, props), {}, {
       uploadBgMusic: uploadBgMusic,
@@ -4147,9 +4122,9 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
     style: {
       height: isMulti ? _totalHeight : 'unset'
     }
-  }, function (_ref3) {
-    var width = _ref3.width,
-      height = _ref3.height;
+  }, function (_ref4) {
+    var width = _ref4.width,
+      height = _ref4.height;
     // 获取全部高度
     var totalHeight = 0;
     // 高度列表
@@ -4178,8 +4153,8 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
       columnWidth: Math.max(scaleCount * scaleWidth + startLeft, width),
       width: width,
       height: height,
-      rowHeight: function rowHeight(_ref4) {
-        var index = _ref4.index;
+      rowHeight: function rowHeight(_ref5) {
+        var index = _ref5.index;
         return heights[index] || _rowHeight || 0;
       },
       overscanRowCount: 10,
@@ -4349,6 +4324,7 @@ var TimeArea = function TimeArea(_ref) {
           scaleWidth: scaleWidth
         });
         var result = onClickTimeArea && onClickTimeArea(time, e);
+        console.log('TimeArea click = ', time);
         if (result === false) return; // 返回 false 时阻止设置时间
         setCursor({
           time: time
@@ -4471,7 +4447,6 @@ var DragLineController = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (pro
     _useState2 = _slicedToArray(_useState, 2),
     dragLineData = _useState2[0],
     setDragLineData = _useState2[1];
-  console.log('dragLineData = ', dragLineData);
   var initDragLine = useCallback(function (data) {
     if (dragLine) {
       var assistActionIds = getAssistDragLineActionIds && getAssistDragLineActionIds({

package/dist/index.js

@@ -76,54 +76,6 @@ function _createClass(e, r, t) {
     writable: !1
   }), e;
 }
-function _createForOfIteratorHelper(r, e) {
-  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (!t) {
-    if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
-      t && (r = t);
-      var n = 0,
-        F = function () {};
-      return {
-        s: F,
-        n: function () {
-          return n >= r.length ? {
-            done: !0
-          } : {
-            done: !1,
-            value: r[n++]
-          };
-        },
-        e: function (r) {
-          throw r;
-        },
-        f: F
-      };
-    }
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-  var o,
-    a = !0,
-    u = !1;
-  return {
-    s: function () {
-      t = t.call(r);
-    },
-    n: function () {
-      var r = t.next();
-      return a = r.done, r;
-    },
-    e: function (r) {
-      u = !0, o = r;
-    },
-    f: function () {
-      try {
-        a || null == t.return || t.return();
-      } finally {
-        if (u) throw o;
-      }
-    }
-  };
-}
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
@@ -2399,6 +2351,9 @@ var EditActionO = function EditActionO(_ref7) {
   //#region [rgba(100,120,156,0.08)] 回调
   var handleDragStart = function handleDragStart() {
     var _areaRef$current;
+    window.dispatchEvent(new CustomEvent('timeline-action-dragging-change', {
+      detail: true
+    }));
     // 保存原始位置
     setDragging(true);
     clearRipplePreview(areaRef.current);
@@ -2539,6 +2494,9 @@ var EditActionO = function EditActionO(_ref7) {
       height = _ref9.height,
       isMultiDrag = _ref9.isMultiDrag,
       fnCallback = _ref9.fn;
+    window.dispatchEvent(new CustomEvent('timeline-action-dragging-change', {
+      detail: false
+    }));
     setDragging(false);
     setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview(null);
     setTrackPreview === null || setTrackPreview === void 0 ? void 0 : setTrackPreview(null);
@@ -2574,6 +2532,35 @@ var EditActionO = function EditActionO(_ref7) {
       }),
       start = _parserTransformToTim.start,
       end = _parserTransformToTim.end;
+    var isSelectionMultiDrag = ((selectedActionIds === null || selectedActionIds === void 0 ? void 0 : selectedActionIds.length) || 0) > 1 && (selectedActionIds === null || selectedActionIds === void 0 ? void 0 : selectedActionIds.includes(action.id));
+    if (isSelectionMultiDrag || isMultiDrag) {
+      var originalTransform = parserTimeToTransform({
+        start: action.start,
+        end: action.end
+      }, {
+        startLeft: startLeft,
+        scale: scale,
+        scaleWidth: scaleWidth
+      });
+      setTransform(_objectSpread2(_objectSpread2({}, originalTransform), {}, {
+        top: 0
+      }));
+      if (onActionMoveEnd) {
+        onActionMoveEnd({
+          action: action,
+          row: row,
+          start: start,
+          end: end,
+          left: left,
+          width: width,
+          top: top,
+          height: height,
+          up: 0,
+          isMultiDrag: true
+        });
+      }
+      return;
+    }
     // Step 1: 根据鼠标垂直位置确定初始目标行
     var placement = resolveTargetRowPlacement({
       editorData: editorData,
@@ -2845,9 +2832,18 @@ var EditActionO = function EditActionO(_ref7) {
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     "data-action-id": action.id,
     "data-action-drag": dragging,
+    "data-action-name": action.file_name,
     "data-action-disabled": action.is_disabled ? 1 : 0,
     onMouseDown: function onMouseDown() {
       isDragWhenClick.current = false;
+      if (((selectedActionIds === null || selectedActionIds === void 0 ? void 0 : selectedActionIds.length) || 0) > 0 && !(selectedActionIds === null || selectedActionIds === void 0 ? void 0 : selectedActionIds.includes(action.id))) {
+        window.dispatchEvent(new CustomEvent('replace-selection-action', {
+          detail: {
+            actionId: action.id,
+            row: row
+          }
+        }));
+      }
     },
     onClick: function onClick(e) {
       var time;
@@ -3238,41 +3234,48 @@ var removeActionFromRows = function removeActionFromRows(rows, actionId) {
     action: undefined
   };
 };
-var ensureRowAtIndex = function ensureRowAtIndex(_ref) {
-  var _ref2, _rows$order, _rows;
-  var rows = _ref.rows,
-    targetIndex = _ref.targetIndex,
-    templateRow = _ref.templateRow;
-  var clampedIndex = Math.max(0, Math.min(targetIndex, rows.length));
-  if (clampedIndex < rows.length) return rows[clampedIndex];
-  var previousOrder = (_ref2 = (_rows$order = (_rows = rows[rows.length - 1]) === null || _rows === void 0 ? void 0 : _rows.order) !== null && _rows$order !== void 0 ? _rows$order : templateRow.order) !== null && _ref2 !== void 0 ? _ref2 : 0;
-  var newRow = _objectSpread2(_objectSpread2({}, templateRow), {}, {
-    id: "row_".concat(Date.now(), "_").concat(Math.random().toString(36).slice(2, 9)),
-    actions: [],
-    order: Number(previousOrder) + 0.01
-  });
-  rows.push(newRow);
-  return newRow;
-};
-var findFirstAvailableRow = function findFirstAvailableRow(_ref3) {
-  var rows = _ref3.rows,
-    targetIndex = _ref3.targetIndex,
-    actionId = _ref3.actionId,
-    start = _ref3.start,
-    end = _ref3.end,
-    templateRow = _ref3.templateRow;
-  var safeIndex = Math.max(0, targetIndex);
-  for (var i = safeIndex; i < rows.length; i++) {
-    var hasConflict = rows[i].actions.some(function (item) {
-      return item.id !== actionId && item.start < end && item.end > start;
+var buildMultiDragPlacements = function buildMultiDragPlacements(_ref4) {
+  var editorData = _ref4.editorData,
+    initialPositions = _ref4.initialPositions,
+    selectedActionIds = _ref4.selectedActionIds,
+    timeOffset = _ref4.timeOffset,
+    rowDelta = _ref4.rowDelta;
+  var selectedSet = new Set(selectedActionIds);
+  return selectedActionIds.map(function (actionId) {
+    var initial = initialPositions.get(actionId);
+    if (!initial) return null;
+    var candidateRow = editorData[initial.rowIndex + rowDelta];
+    var nextStart = initial.start + timeOffset;
+    var nextEnd = initial.end + timeOffset;
+    if (!candidateRow) {
+      return {
+        actionId: actionId,
+        rowId: initial.rowId,
+        start: initial.start,
+        end: initial.end,
+        conflicted: true
+      };
+    }
+    var hasConflict = candidateRow.actions.some(function (item) {
+      return !selectedSet.has(item.id) && item.start < nextEnd && item.end > nextStart;
     });
-    if (!hasConflict) return rows[i];
-  }
-  return ensureRowAtIndex({
-    rows: rows,
-    targetIndex: rows.length,
-    templateRow: templateRow
-  });
+    if (hasConflict) {
+      return {
+        actionId: actionId,
+        rowId: initial.rowId,
+        start: initial.start,
+        end: initial.end,
+        conflicted: true
+      };
+    }
+    return {
+      actionId: actionId,
+      rowId: candidateRow.id,
+      start: nextStart,
+      end: nextEnd,
+      conflicted: false
+    };
+  }).filter(Boolean);
 };
 var useRowDrag = function useRowDrag(options) {
   var selectedActionIds = options.selectedActionIds,
@@ -3296,11 +3299,15 @@ var useRowDrag = function useRowDrag(options) {
     var actions = containerRef.current.querySelectorAll('.timeline-editor-action-selected');
     return Array.from(actions);
   }, [containerRef]);
-  var previewPositionsRef = React__default['default'].useRef(new Map());
   // 拖拽开始
-  var onDragStart = React__default['default'].useCallback(function (_ref4) {
-    var action = _ref4.action;
+  var onDragStart = React__default['default'].useCallback(function (_ref5) {
+    var action = _ref5.action;
     if (selectedActionIds.length <= 1) {
+      multiDragState.current = resetMultiDragState();
+      return;
+    }
+    if (!selectedActionIds.includes(action.id)) {
+      multiDragState.current = resetMultiDragState();
       return;
     }
     var selectedEls = getSelectedActionEls();
@@ -3397,7 +3404,6 @@ var useRowDrag = function useRowDrag(options) {
   }, [getSelectedActionEls]);
   // 拖拽结束
   var onDragEnd = React__default['default'].useCallback(function (params) {
-    var _rows$primaryRemoval$;
     var state = multiDragState.current;
     var selectedEls = getSelectedActionEls();
     selectedEls.forEach(function (el) {
@@ -3407,7 +3413,6 @@ var useRowDrag = function useRowDrag(options) {
     });
     if (!state.isMultiDrag || !params || (params === null || params === void 0 ? void 0 : params.actionId) !== state.primaryActionId) {
       multiDragState.current = resetMultiDragState();
-      previewPositionsRef.current = new Map();
       return;
     }
     var left = params.left,
@@ -3420,13 +3425,11 @@ var useRowDrag = function useRowDrag(options) {
       primaryActionId = state.primaryActionId;
     if (!setEditorData || initialPositions.size === 0) {
       multiDragState.current = resetMultiDragState();
-      previewPositionsRef.current = new Map();
       return;
     }
     var primaryInitial = initialPositions.get(primaryActionId);
     if (!primaryInitial) {
       multiDragState.current = resetMultiDragState();
-      previewPositionsRef.current = new Map();
       return;
     }
     var primaryFinalTime = parserTransformToTime({
@@ -3441,119 +3444,75 @@ var useRowDrag = function useRowDrag(options) {
     var rowDelta = Math.round((top || 0) / rowHeight);
     if (Math.abs(timeOffset) < 0.001 && rowDelta === 0) {
       multiDragState.current = resetMultiDragState();
-      previewPositionsRef.current = new Map();
+      return;
+    }
+    var placements = buildMultiDragPlacements({
+      editorData: editorData,
+      initialPositions: initialPositions,
+      selectedActionIds: selectedActionIds,
+      timeOffset: timeOffset,
+      rowDelta: rowDelta
+    });
+    var hasConflict = placements.some(function (placement) {
+      return placement.conflicted;
+    });
+    if (hasConflict) {
+      multiDragState.current = resetMultiDragState();
       return;
     }
     var rows = cloneRows(editorData);
     var updatedActions = [];
-    var primaryRemoval = removeActionFromRows(rows, primaryActionId);
-    var fallbackPrimaryRow = rows.find(function (item) {
-      return item.id === primaryInitial.rowId;
-    }) || editorData[primaryInitial.rowIndex];
-    var primaryTargetRowId = (primaryRow === null || primaryRow === void 0 ? void 0 : primaryRow.id) || primaryInitial.rowId;
-    var primaryTargetRow = rows.find(function (item) {
-      return item.id === primaryTargetRowId;
+    var removedActions = new Map();
+    selectedActionIds.forEach(function (selectedId) {
+      var removal = removeActionFromRows(rows, selectedId);
+      if (removal.action) {
+        removedActions.set(selectedId, removal.action);
+      }
     });
-    if (!primaryTargetRow) {
-      primaryTargetRow = _objectSpread2(_objectSpread2({}, primaryRow || fallbackPrimaryRow), {}, {
-        actions: []
+    placements.forEach(function (placement) {
+      var actionItem = removedActions.get(placement.actionId) || (placement.actionId === primaryActionId ? primaryAction : undefined);
+      if (!actionItem) return;
+      var targetRow = rows.find(function (item) {
+        return item.id === placement.rowId;
       });
-      rows.push(primaryTargetRow);
-    }
-    if (primaryAction) {
-      var normalizedPrimaryAction = _objectSpread2(_objectSpread2({}, primaryAction), {}, {
-        start: primaryFinalTime.start,
-        end: primaryFinalTime.end,
-        order: primaryTargetRow.order
+      if (!targetRow) return;
+      var nextAction = _objectSpread2(_objectSpread2({}, actionItem), {}, {
+        start: placement.start,
+        end: placement.end,
+        order: targetRow.order
       });
-      primaryTargetRow.actions.push(normalizedPrimaryAction);
-      primaryTargetRow.actions.sort(function (a, b) {
+      targetRow.actions.push(nextAction);
+      targetRow.actions.sort(function (a, b) {
         return a.start - b.start;
       });
-      updatedActions.push(normalizedPrimaryAction);
-    }
-    if (primaryRemoval.rowIndex !== -1 && ((_rows$primaryRemoval$ = rows[primaryRemoval.rowIndex]) === null || _rows$primaryRemoval$ === void 0 ? void 0 : _rows$primaryRemoval$.actions.length) === 0) {
-      rows.splice(primaryRemoval.rowIndex, 1);
-    }
-    var selectedSecondaryIds = selectedActionIds.filter(function (id) {
-      return id !== primaryActionId;
+      updatedActions.push(nextAction);
     });
-    var _iterator = _createForOfIteratorHelper(selectedSecondaryIds),
-      _step;
-    try {
-      var _loop = function _loop() {
-          var _rows$removal$rowInde;
-          var selectedId = _step.value;
-          var initial = initialPositions.get(selectedId);
-          if (!initial) return 0; // continue
-          var removal = removeActionFromRows(rows, selectedId);
-          var currentAction = removal.action;
-          if (!currentAction) return 0; // continue
-          var templateRow = rows.find(function (item) {
-            return item.id === initial.rowId;
-          }) || editorData[initial.rowIndex] || primaryTargetRow;
-          var targetStart = currentAction.start + timeOffset;
-          var targetEnd = currentAction.end + timeOffset;
-          var preferredIndex = initial.rowIndex + rowDelta;
-          var targetRow = findFirstAvailableRow({
-            rows: rows,
-            targetIndex: preferredIndex,
-            actionId: selectedId,
-            start: targetStart,
-            end: targetEnd,
-            templateRow: templateRow
-          });
-          var nextAction = _objectSpread2(_objectSpread2({}, currentAction), {}, {
-            start: targetStart,
-            end: targetEnd,
-            order: targetRow.order
-          });
-          targetRow.actions.push(nextAction);
-          targetRow.actions.sort(function (a, b) {
-            return a.start - b.start;
-          });
-          updatedActions.push(nextAction);
-          if (removal.rowIndex !== -1 && ((_rows$removal$rowInde = rows[removal.rowIndex]) === null || _rows$removal$rowInde === void 0 ? void 0 : _rows$removal$rowInde.actions.length) === 0) {
-            rows.splice(removal.rowIndex, 1);
-          }
-        },
-        _ret;
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        _ret = _loop();
-        if (_ret === 0) continue;
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-    rows.sort(function (a, b) {
+    var nextRows = rows.filter(function (row) {
+      return row.actions.length > 0;
+    }).sort(function (a, b) {
       return Number(a.order || 0) - Number(b.order || 0);
     });
-    setEditorData(rows);
-    onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(primaryTargetRow, updatedActions);
+    var primaryPlacement = placements.find(function (item) {
+      return item.actionId === primaryActionId;
+    });
+    var primaryTargetRow = primaryPlacement ? nextRows.find(function (item) {
+      return item.id === primaryPlacement.rowId;
+    }) : primaryRow;
+    setEditorData(nextRows);
+    if (primaryTargetRow) {
+      onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(primaryTargetRow, updatedActions);
+    }
     multiDragState.current = resetMultiDragState();
-    previewPositionsRef.current = new Map();
   }, [editorData, getSelectedActionEls, onUpdateEditorData, rowHeight, scale, scaleWidth, selectedActionIds, setEditorData, startLeft]);
-  // 获取指定 action 的预览位置
-  var getPreviewPosition = React__default['default'].useCallback(function (actionId) {
-    return previewPositionsRef.current.get(actionId) || null;
-  }, []);
   // 检查是否是多选拖拽模式
   var isMultiDragging = React__default['default'].useCallback(function () {
     return multiDragState.current.isMultiDrag;
   }, []);
-  // 获取当前拖拽状态
-  var getMultiDragState = React__default['default'].useCallback(function () {
-    return multiDragState.current;
-  }, []);
   return {
     onDragStart: onDragStart,
     onDragMove: onDragMove,
     onDragEnd: onDragEnd,
-    getPreviewPosition: getPreviewPosition,
     isMultiDragging: isMultiDragging,
-    getMultiDragState: getMultiDragState,
     isMultiDrag: multiDragState.current.isMultiDrag
   };
 };
@@ -3984,6 +3943,22 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
       window.removeEventListener('ctrl-click-action', handleCtrlClickAction);
     };
   }, [onCtrlClick, editorData, handleSelectionChange]);
+  React.useEffect(function () {
+    var handleReplaceSelectionAction = function handleReplaceSelectionAction(e) {
+      var _editorData$2;
+      var _ref2 = e.detail || {},
+        actionId = _ref2.actionId,
+        row = _ref2.row;
+      if (!actionId || !row) return;
+      if (row.type !== ((_editorData$2 = editorData[0]) === null || _editorData$2 === void 0 ? void 0 : _editorData$2.type)) return;
+      setSelectedActionIds(new Set([actionId]));
+      handleSelectionChange([actionId]);
+    };
+    window.addEventListener('replace-selection-action', handleReplaceSelectionAction);
+    return function () {
+      window.removeEventListener('replace-selection-action', handleReplaceSelectionAction);
+    };
+  }, [editorData, handleSelectionChange, setSelectedActionIds]);
   var uploadBgMusic = React.useCallback(function (file, row) {
     var canUpload = onBeforeUpload === null || onBeforeUpload === void 0 ? void 0 : onBeforeUpload(file[0]);
     if (!canUpload) return;
@@ -4007,10 +3982,10 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
     });
   }, [onBeforeUpload, handleUploadChange, customRequest]);
   /** 获取每个cell渲染内容 */
-  var cellRenderer = function cellRenderer(_ref2) {
-    var rowIndex = _ref2.rowIndex,
-      key = _ref2.key,
-      style = _ref2.style;
+  var cellRenderer = function cellRenderer(_ref3) {
+    var rowIndex = _ref3.rowIndex,
+      key = _ref3.key,
+      style = _ref3.style;
     var row = editorData[rowIndex]; // 行数据
     var editRow = /*#__PURE__*/React__default['default'].createElement(EditRow, _objectSpread2(_objectSpread2({}, props), {}, {
       uploadBgMusic: uploadBgMusic,
@@ -4157,9 +4132,9 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
     style: {
       height: isMulti ? _totalHeight : 'unset'
     }
-  }, function (_ref3) {
-    var width = _ref3.width,
-      height = _ref3.height;
+  }, function (_ref4) {
+    var width = _ref4.width,
+      height = _ref4.height;
     // 获取全部高度
     var totalHeight = 0;
     // 高度列表
@@ -4188,8 +4163,8 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
       columnWidth: Math.max(scaleCount * scaleWidth + startLeft, width),
       width: width,
       height: height,
-      rowHeight: function rowHeight(_ref4) {
-        var index = _ref4.index;
+      rowHeight: function rowHeight(_ref5) {
+        var index = _ref5.index;
         return heights[index] || _rowHeight || 0;
       },
       overscanRowCount: 10,
@@ -4359,6 +4334,7 @@ var TimeArea = function TimeArea(_ref) {
           scaleWidth: scaleWidth
         });
         var result = onClickTimeArea && onClickTimeArea(time, e);
+        console.log('TimeArea click = ', time);
         if (result === false) return; // 返回 false 时阻止设置时间
         setCursor({
           time: time
@@ -4481,7 +4457,6 @@ var DragLineController = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(f
     _useState2 = _slicedToArray(_useState, 2),
     dragLineData = _useState2[0],
     setDragLineData = _useState2[1];
-  console.log('dragLineData = ', dragLineData);
   var initDragLine = React.useCallback(function (data) {
     if (dragLine) {
       var assistActionIds = getAssistDragLineActionIds && getAssistDragLineActionIds({

package/package.json

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