sense-react-timeline-editor 1.1.22 → 1.1.24

package/dist/index.esm.js

@@ -2180,6 +2180,36 @@ var resolveSmartRow = function resolveSmartRow(_ref2) {
     needCreateNewRow: false
   };
 };
+var hasMultiDragConflict = function hasMultiDragConflict(_ref3) {
+  var editorData = _ref3.editorData,
+    selectedActionIds = _ref3.selectedActionIds,
+    primaryAction = _ref3.primaryAction,
+    timeOffset = _ref3.timeOffset,
+    rowDelta = _ref3.rowDelta;
+  var selectedSet = new Set(selectedActionIds);
+  return selectedActionIds.some(function (selectedId) {
+    var sourceRowIndex = -1;
+    var sourceAction;
+    editorData.some(function (candidateRow, rowIndex) {
+      var action = candidateRow.actions.find(function (item) {
+        return item.id === selectedId;
+      });
+      if (!action) return false;
+      sourceRowIndex = rowIndex;
+      sourceAction = action;
+      return true;
+    });
+    var initialAction = sourceAction || (selectedId === primaryAction.id ? primaryAction : undefined);
+    if (!initialAction || sourceRowIndex < 0) return true;
+    var targetRow = editorData[sourceRowIndex + rowDelta];
+    if (!targetRow) return true;
+    var nextStart = initialAction.start + timeOffset;
+    var nextEnd = initialAction.end + timeOffset;
+    return targetRow.actions.some(function (item) {
+      return !selectedSet.has(item.id) && item.start < nextEnd && item.end > nextStart;
+    });
+  });
+};
 var clearRipplePreview = function clearRipplePreview(container) {
   if (!container) return;
   var previewNodes = container.querySelectorAll('[data-ripple-preview="true"]');
@@ -2190,45 +2220,45 @@ var clearRipplePreview = function clearRipplePreview(container) {
     node.removeAttribute('data-ripple-preview');
   });
 };
-var EditActionO = function EditActionO(_ref7) {
-  var editorData = _ref7.editorData,
-    row = _ref7.row,
-    action = _ref7.action,
-    effects = _ref7.effects,
-    rowHeight = _ref7.rowHeight,
-    scale = _ref7.scale,
-    scaleWidth = _ref7.scaleWidth,
-    scaleSplitCount = _ref7.scaleSplitCount,
-    startLeft = _ref7.startLeft,
-    gridSnap = _ref7.gridSnap,
-    disableDrag = _ref7.disableDrag,
-    scaleCount = _ref7.scaleCount,
-    maxScaleCount = _ref7.maxScaleCount,
-    setScaleCount = _ref7.setScaleCount,
-    onActionMoveStart = _ref7.onActionMoveStart,
-    onActionMoving = _ref7.onActionMoving,
-    onActionMoveEnd = _ref7.onActionMoveEnd,
-    onActionResizeStart = _ref7.onActionResizeStart,
-    onActionResizeEnd = _ref7.onActionResizeEnd,
-    onActionResizing = _ref7.onActionResizing,
-    dragLineData = _ref7.dragLineData,
-    setEditorData = _ref7.setEditorData,
-    onClickAction = _ref7.onClickAction,
-    onClickActionOnly = _ref7.onClickActionOnly,
-    onDoubleClickAction = _ref7.onDoubleClickAction,
-    onContextMenuAction = _ref7.onContextMenuAction,
-    getActionRender = _ref7.getActionRender,
-    handleTime = _ref7.handleTime,
-    areaRef = _ref7.areaRef,
-    deltaScrollLeft = _ref7.deltaScrollLeft,
-    _ref7$allowCreateTrac = _ref7.allowCreateTrack,
-    allowCreateTrack = _ref7$allowCreateTrac === void 0 ? true : _ref7$allowCreateTrac,
-    insertPreview = _ref7.insertPreview,
-    setInsertPreview = _ref7.setInsertPreview,
-    trackPreview = _ref7.trackPreview,
-    setTrackPreview = _ref7.setTrackPreview,
-    containerRef = _ref7.containerRef,
-    selectedActionIds = _ref7.selectedActionIds;
+var EditActionO = function EditActionO(_ref8) {
+  var editorData = _ref8.editorData,
+    row = _ref8.row,
+    action = _ref8.action,
+    effects = _ref8.effects,
+    rowHeight = _ref8.rowHeight,
+    scale = _ref8.scale,
+    scaleWidth = _ref8.scaleWidth,
+    scaleSplitCount = _ref8.scaleSplitCount,
+    startLeft = _ref8.startLeft,
+    gridSnap = _ref8.gridSnap,
+    disableDrag = _ref8.disableDrag,
+    scaleCount = _ref8.scaleCount,
+    maxScaleCount = _ref8.maxScaleCount,
+    setScaleCount = _ref8.setScaleCount,
+    onActionMoveStart = _ref8.onActionMoveStart,
+    onActionMoving = _ref8.onActionMoving,
+    onActionMoveEnd = _ref8.onActionMoveEnd,
+    onActionResizeStart = _ref8.onActionResizeStart,
+    onActionResizeEnd = _ref8.onActionResizeEnd,
+    onActionResizing = _ref8.onActionResizing,
+    dragLineData = _ref8.dragLineData,
+    setEditorData = _ref8.setEditorData,
+    onClickAction = _ref8.onClickAction,
+    onClickActionOnly = _ref8.onClickActionOnly,
+    onDoubleClickAction = _ref8.onDoubleClickAction,
+    onContextMenuAction = _ref8.onContextMenuAction,
+    getActionRender = _ref8.getActionRender,
+    handleTime = _ref8.handleTime,
+    areaRef = _ref8.areaRef,
+    deltaScrollLeft = _ref8.deltaScrollLeft,
+    _ref8$allowCreateTrac = _ref8.allowCreateTrack,
+    allowCreateTrack = _ref8$allowCreateTrac === void 0 ? true : _ref8$allowCreateTrac,
+    insertPreview = _ref8.insertPreview,
+    setInsertPreview = _ref8.setInsertPreview,
+    trackPreview = _ref8.trackPreview,
+    setTrackPreview = _ref8.setTrackPreview,
+    containerRef = _ref8.containerRef,
+    selectedActionIds = _ref8.selectedActionIds;
   var rowRnd = useRef();
   var isDragWhenClick = useRef(false);
   var originalPosition = useRef({
@@ -2374,11 +2404,11 @@ var EditActionO = function EditActionO(_ref7) {
       row: row
     });
   };
-  var handleDrag = function handleDrag(_ref8) {
-    var left = _ref8.left,
-      width = _ref8.width,
-      top = _ref8.top,
-      args = _objectWithoutProperties(_ref8, _excluded);
+  var handleDrag = function handleDrag(_ref9) {
+    var left = _ref9.left,
+      width = _ref9.width,
+      top = _ref9.top,
+      args = _objectWithoutProperties(_ref9, _excluded);
     isDragWhenClick.current = true;
     var currentRange = parserTransformToTime({
       left: left,
@@ -2388,59 +2418,81 @@ var EditActionO = function EditActionO(_ref7) {
       scale: scale,
       startLeft: startLeft
     });
-    var placement = resolveTargetRowPlacement({
+    var isSelectionMultiDrag = ((selectedActionIds === null || selectedActionIds === void 0 ? void 0 : selectedActionIds.length) || 0) > 1 && (selectedActionIds === null || selectedActionIds === void 0 ? void 0 : selectedActionIds.includes(action.id));
+    var multiDragConflict = isSelectionMultiDrag ? hasMultiDragConflict({
       editorData: editorData,
-      row: row,
-      top: top,
-      rowHeight: rowHeight,
-      allowCreateTrack: allowCreateTrack
-    });
-    var currentRowIndex = editorData.findIndex(function (item) {
-      return item.id === row.id;
-    });
-    if (placement.needCreateNewRow) {
-      // 鼠标已拖到所有轨道的边界外，直接显示新轨道插入线
-      setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview(null);
-      setTrackPreview === null || setTrackPreview === void 0 ? void 0 : setTrackPreview({
-        kind: 'new-row',
-        insertIndex: placement.targetRowIndex,
-        sourceRow: row
+      selectedActionIds: selectedActionIds || [],
+      primaryAction: action,
+      timeOffset: currentRange.start - action.start,
+      rowDelta: Math.round((top || 0) / rowHeight)
+    }) : false;
+    if (multiDragConflict) {
+      setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview({
+        actionId: action.id,
+        rowId: row.id,
+        start: action.start,
+        end: action.end,
+        shiftByActionId: {}
       });
-    } else {
-      // 用 smart row 找真实可用行（冲突则往下级联）
-      var smart = resolveSmartRow({
+      setTrackPreview === null || setTrackPreview === void 0 ? void 0 : setTrackPreview(null);
+    } else if (isSelectionMultiDrag) {
+      clearRipplePreview(areaRef.current);
+    }
+    if (!multiDragConflict) {
+      var placement = resolveTargetRowPlacement({
         editorData: editorData,
-        initialTargetRowIndex: placement.targetRowIndex,
-        actionId: action.id,
-        start: currentRange.start,
-        end: currentRange.end,
+        row: row,
+        top: top,
+        rowHeight: rowHeight,
         allowCreateTrack: allowCreateTrack
       });
-      if (smart.needCreateNewRow) {
+      var _currentRowIndex = editorData.findIndex(function (item) {
+        return item.id === row.id;
+      });
+      if (placement.needCreateNewRow) {
+        // 鼠标已拖到所有轨道的边界外，直接显示新轨道插入线
         setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview(null);
         setTrackPreview === null || setTrackPreview === void 0 ? void 0 : setTrackPreview({
           kind: 'new-row',
-          insertIndex: smart.targetRowIndex,
+          insertIndex: placement.targetRowIndex,
           sourceRow: row
         });
       } else {
-        var targetRow = editorData[smart.targetRowIndex];
-        var isSameRow = smart.targetRowIndex === currentRowIndex;
-        if (targetRow) {
-          setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview({
-            actionId: action.id,
-            rowId: targetRow.id,
-            start: currentRange.start,
-            end: currentRange.end,
-            shiftByActionId: {}
-          });
-          setTrackPreview === null || setTrackPreview === void 0 ? void 0 : setTrackPreview(isSameRow ? null : {
-            kind: 'row',
-            rowId: targetRow.id
+        // 用 smart row 找真实可用行（冲突则往下级联）
+        var smart = resolveSmartRow({
+          editorData: editorData,
+          initialTargetRowIndex: placement.targetRowIndex,
+          actionId: action.id,
+          start: currentRange.start,
+          end: currentRange.end,
+          allowCreateTrack: allowCreateTrack
+        });
+        if (smart.needCreateNewRow) {
+          setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview(null);
+          setTrackPreview === null || setTrackPreview === void 0 ? void 0 : setTrackPreview({
+            kind: 'new-row',
+            insertIndex: smart.targetRowIndex,
+            sourceRow: row
           });
         } else {
-          setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview(null);
-          setTrackPreview === null || setTrackPreview === void 0 ? void 0 : setTrackPreview(null);
+          var targetRow = editorData[smart.targetRowIndex];
+          var isSameRow = smart.targetRowIndex === _currentRowIndex;
+          if (targetRow) {
+            setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview({
+              actionId: action.id,
+              rowId: targetRow.id,
+              start: currentRange.start,
+              end: currentRange.end,
+              shiftByActionId: {}
+            });
+            setTrackPreview === null || setTrackPreview === void 0 ? void 0 : setTrackPreview(isSameRow ? null : {
+              kind: 'row',
+              rowId: targetRow.id
+            });
+          } else {
+            setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview(null);
+            setTrackPreview === null || setTrackPreview === void 0 ? void 0 : setTrackPreview(null);
+          }
         }
       }
     }
@@ -2476,14 +2528,14 @@ var EditActionO = function EditActionO(_ref7) {
     }
     handleScaleCount(left, width);
   };
-  var handleDragEndBase = useCallback(function (_ref9) {
+  var handleDragEndBase = useCallback(function (_ref0) {
     var _areaRef$current2;
-    var left = _ref9.left,
-      width = _ref9.width,
-      top = _ref9.top,
-      height = _ref9.height,
-      isMultiDrag = _ref9.isMultiDrag,
-      fnCallback = _ref9.fn;
+    var left = _ref0.left,
+      width = _ref0.width,
+      top = _ref0.top,
+      height = _ref0.height,
+      isMultiDrag = _ref0.isMultiDrag,
+      fnCallback = _ref0.fn;
     window.dispatchEvent(new CustomEvent('timeline-action-dragging-change', {
       detail: false
     }));
@@ -2677,9 +2729,9 @@ var EditActionO = function EditActionO(_ref7) {
       dir: dir
     });
   };
-  var handleResizing = function handleResizing(dir, _ref0) {
-    var left = _ref0.left,
-      width = _ref0.width;
+  var handleResizing = function handleResizing(dir, _ref1) {
+    var left = _ref1.left,
+      width = _ref1.width;
     isDragWhenClick.current = true;
     if (onActionResizing) {
       var _parserTransformToTim2 = parserTransformToTime({
@@ -2708,9 +2760,9 @@ var EditActionO = function EditActionO(_ref7) {
     });
     handleScaleCount(left, width);
   };
-  var handleResizeEnd = function handleResizeEnd(dir, _ref1) {
-    var left = _ref1.left,
-      width = _ref1.width;
+  var handleResizeEnd = function handleResizeEnd(dir, _ref10) {
+    var left = _ref10.left,
+      width = _ref10.width;
     // 计算时间
     var _parserTransformToTim3 = parserTransformToTime({
         left: left,
@@ -2765,13 +2817,13 @@ var EditActionO = function EditActionO(_ref7) {
   });
   useEffect(function () {
     var handleActionMoveEnd = function handleActionMoveEnd(e) {
-      var _ref10 = e.detail || {},
-        left = _ref10.left,
-        width = _ref10.width,
-        top = _ref10.top,
-        height = _ref10.height,
-        id = _ref10.id,
-        fn = _ref10.fn;
+      var _ref11 = e.detail || {},
+        left = _ref11.left,
+        width = _ref11.width,
+        top = _ref11.top,
+        height = _ref11.height,
+        id = _ref11.id,
+        fn = _ref11.fn;
       if (id === action.id) {
         handleDragEnd({
           left: left,
@@ -3155,7 +3207,7 @@ var useRowSelection = function useRowSelection(options) {
   var handleClickOutside = useCallback(function (target) {
     if (disabled) return;
     // 如果点击的不是选中的 action 或框选框，清除选择
-    if (!target.closest('.timeline-editor-selection-box') && !target.closest('.timeline-editor-action') && !target.closest('[data-draggable="true"]') && !target.closest('.voice-studio-right-config-panel') && !target.closest('.voice-studio-main-content-panel') && !target.closest('.ant-modal')) {
+    if (!target.closest('.timeline-editor-selection-box') && !target.closest('.timeline-editor-action') && !target.closest('.timeline-editor-cursor') && !target.closest('.timeline-editor-cursor-area') && !target.closest('.timeline-editor-time-area') && !target.closest('[data-draggable="true"]') && !target.closest('.voice-studio-right-config-panel') && !target.closest('.voice-studio-main-content-panel') && !target.closest('.ant-modal')) {
       clearSelection();
     }
   }, [disabled, clearSelection]);
@@ -4151,7 +4203,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
       ref: gridRef,
       cellRenderer: cellRenderer,
       columnWidth: Math.max(scaleCount * scaleWidth + startLeft, width),
-      width: width,
+      width: Math.max(scaleCount * scaleWidth + startLeft, width),
       height: height,
       rowHeight: function rowHeight(_ref5) {
         var index = _ref5.index;
@@ -4311,13 +4363,14 @@ var TimeArea = function TimeArea(_ref) {
         height: height
       },
       onClick: function onClick(e) {
+        var _timelineEditorEl$scr;
         if (hideCursor) return;
+        var timelineEditorEl = document.querySelector('.timeline-editor');
         var rect = e.currentTarget.getBoundingClientRect();
         var position = e.clientX - rect.x;
-        var left = Math.max(position, startLeft);
-        // const left = Math.max(position + scrollLeft, startLeft);
+        var actualScrollLeft = (_timelineEditorEl$scr = timelineEditorEl === null || timelineEditorEl === void 0 ? void 0 : timelineEditorEl.scrollLeft) !== null && _timelineEditorEl$scr !== void 0 ? _timelineEditorEl$scr : scrollLeft;
+        var left = Math.max(position + actualScrollLeft, startLeft);
         if (left > maxScaleCount * scaleWidth + startLeft) return;
-        // if (left > maxScaleCount * scaleWidth + startLeft - scrollLeft) return;
         var time = parserPixelToTime(left, {
           startLeft: startLeft,
           scale: scale,
@@ -4642,14 +4695,34 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
     return result;
   }, [startLeft, scale, scaleWidth, autoReRender]);
   /** 设置 scrollLeft */
+  var getMaxScrollLeft = useCallback(function () {
+    if (!Number.isFinite(width) || width <= 0) return 0;
+    return Math.max(scaleCount * scaleWidth + startLeft - width, 0);
+  }, [scaleCount, scaleWidth, startLeft, width]);
   var handleDeltaScrollLeft = useCallback(function (delta) {
     // 当超过最大距离时，禁止自动滚动
     var data = scrollSync.current.state.scrollLeft + delta;
-    if (data > scaleCount * (scaleWidth - 1) + startLeft - width) return;
+    var maxScrollLeft = getMaxScrollLeft();
+    if (data > maxScrollLeft) return;
     scrollSync.current && scrollSync.current.setState({
       scrollLeft: Math.max(scrollSync.current.state.scrollLeft + delta, 0)
     });
-  }, [scaleCount, scaleWidth, startLeft, width]);
+  }, [getMaxScrollLeft]);
+  useLayoutEffect(function () {
+    var _scrollSync$current$s, _scrollSync$current;
+    var maxScrollLeft = getMaxScrollLeft();
+    var currentScrollLeft = (_scrollSync$current$s = (_scrollSync$current = scrollSync.current) === null || _scrollSync$current === void 0 ? void 0 : _scrollSync$current.state.scrollLeft) !== null && _scrollSync$current$s !== void 0 ? _scrollSync$current$s : 0;
+    var nextScrollLeft = Math.min(Math.max(currentScrollLeft, 0), maxScrollLeft);
+    var timelineEl = document.querySelector('.timeline-editor');
+    if (timelineEl && Math.abs(timelineEl.scrollLeft - nextScrollLeft) > 1) {
+      timelineEl.scrollLeft = nextScrollLeft;
+    }
+    if (scrollSync.current && Math.abs(currentScrollLeft - nextScrollLeft) > 1) {
+      scrollSync.current.setState({
+        scrollLeft: nextScrollLeft
+      });
+    }
+  }, [getMaxScrollLeft, scale, scaleWidth, scaleCount, width]);
   var handleInitDragLine = useCallback(function (data) {
     var _checkedProps$onActio, _checkedProps$onActio2, _dragLineControllerRe;
     (_checkedProps$onActio = checkedProps.onActionMoveStart) === null || _checkedProps$onActio === void 0 ? void 0 : _checkedProps$onActio.call(checkedProps, data);
@@ -4735,17 +4808,19 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
       },
       pause: engineRef.current.pause.bind(engineRef.current),
       setScrollLeft: function setScrollLeft(val) {
+        var nextScrollLeft = Math.min(Math.max(val, 0), getMaxScrollLeft());
         scrollSync.current && scrollSync.current.setState({
-          scrollLeft: Math.max(val, 0)
+          scrollLeft: nextScrollLeft
         });
       },
       setScrollLeftFromTime: function setScrollLeftFromTime(val) {
         var containerEl = document.querySelector('.timeline-editor');
         if (!containerEl) return;
         var left = startLeft + scaleWidth / scale * val;
-        containerEl.scrollLeft = Math.max(left, 0);
+        var nextScrollLeft = Math.min(Math.max(left, 0), getMaxScrollLeft());
+        containerEl.scrollLeft = nextScrollLeft;
         scrollSync.current && scrollSync.current.setState({
-          scrollLeft: Math.max(left, 0)
+          scrollLeft: nextScrollLeft
         });
       },
       setScrollTop: function setScrollTop(val) {
@@ -4756,11 +4831,13 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
     };
   });
   var onClickTimeline = useCallback(function (e) {
-    var _e$target;
+    var _ref2, _timelineEditorEl$scr, _scrollSync$current2, _e$target;
     if (!domRef.current) return;
+    var timelineEditorEl = document.querySelector('.timeline-editor');
     var rect = domRef.current.getBoundingClientRect();
     var position = e.clientX - rect.x;
-    var left = position + scrollSync.current.state.scrollLeft;
+    var scrollLeft = (_ref2 = (_timelineEditorEl$scr = timelineEditorEl === null || timelineEditorEl === void 0 ? void 0 : timelineEditorEl.scrollLeft) !== null && _timelineEditorEl$scr !== void 0 ? _timelineEditorEl$scr : (_scrollSync$current2 = scrollSync.current) === null || _scrollSync$current2 === void 0 ? void 0 : _scrollSync$current2.state.scrollLeft) !== null && _ref2 !== void 0 ? _ref2 : 0;
+    var left = position + scrollLeft;
     var time = parserPixelToTime(left, {
       startLeft: startLeft,
       scale: scale,
@@ -4830,9 +4907,9 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
     className: "".concat(className || '', " ").concat(theme || '', " ").concat(PREFIX, " ").concat(disableDrag ? PREFIX + '-disable' : '')
   }, /*#__PURE__*/React.createElement(ScrollSync, {
     ref: scrollSync
-  }, function (_ref2) {
-    var scrollTop = _ref2.scrollTop,
-      _onScroll = _ref2.onScroll;
+  }, function (_ref3) {
+    var scrollTop = _ref3.scrollTop,
+      _onScroll = _ref3.onScroll;
     var scrollLeft = (containerEl === null || containerEl === void 0 ? void 0 : containerEl.scrollLeft) || 0;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TimeArea, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
       timelineWidth: width,
@@ -4847,8 +4924,8 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
       cursorRef: cursorRef
     })), areaCount === 1 ? (/*#__PURE__*/React.createElement(EditArea, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
       timelineWidth: width,
-      ref: function ref(_ref3) {
-        return areaRef.current = _ref3 === null || _ref3 === void 0 ? void 0 : _ref3.domRef.current;
+      ref: function ref(_ref4) {
+        return areaRef.current = _ref4 === null || _ref4 === void 0 ? void 0 : _ref4.domRef.current;
       },
       disableDrag: disableDrag || isPlaying,
       editorData: editorData,
@@ -4909,8 +4986,8 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
       }, checkedProps), {}, {
         className: index !== 0 ? "no-flex ".concat(key, " ").concat(index, " overflow-hidden") : "overflow-hidden ".concat(key, " ").concat(index),
         timelineWidth: width,
-        ref: function ref(_ref4) {
-          return areaRef.current = _ref4 === null || _ref4 === void 0 ? void 0 : _ref4.domRef.current;
+        ref: function ref(_ref5) {
+          return areaRef.current = _ref5 === null || _ref5 === void 0 ? void 0 : _ref5.domRef.current;
         },
         disableDrag: disableDrag || isPlaying,
         editorData: groupedData[key],

package/dist/index.js

@@ -2190,6 +2190,36 @@ var resolveSmartRow = function resolveSmartRow(_ref2) {
     needCreateNewRow: false
   };
 };
+var hasMultiDragConflict = function hasMultiDragConflict(_ref3) {
+  var editorData = _ref3.editorData,
+    selectedActionIds = _ref3.selectedActionIds,
+    primaryAction = _ref3.primaryAction,
+    timeOffset = _ref3.timeOffset,
+    rowDelta = _ref3.rowDelta;
+  var selectedSet = new Set(selectedActionIds);
+  return selectedActionIds.some(function (selectedId) {
+    var sourceRowIndex = -1;
+    var sourceAction;
+    editorData.some(function (candidateRow, rowIndex) {
+      var action = candidateRow.actions.find(function (item) {
+        return item.id === selectedId;
+      });
+      if (!action) return false;
+      sourceRowIndex = rowIndex;
+      sourceAction = action;
+      return true;
+    });
+    var initialAction = sourceAction || (selectedId === primaryAction.id ? primaryAction : undefined);
+    if (!initialAction || sourceRowIndex < 0) return true;
+    var targetRow = editorData[sourceRowIndex + rowDelta];
+    if (!targetRow) return true;
+    var nextStart = initialAction.start + timeOffset;
+    var nextEnd = initialAction.end + timeOffset;
+    return targetRow.actions.some(function (item) {
+      return !selectedSet.has(item.id) && item.start < nextEnd && item.end > nextStart;
+    });
+  });
+};
 var clearRipplePreview = function clearRipplePreview(container) {
   if (!container) return;
   var previewNodes = container.querySelectorAll('[data-ripple-preview="true"]');
@@ -2200,45 +2230,45 @@ var clearRipplePreview = function clearRipplePreview(container) {
     node.removeAttribute('data-ripple-preview');
   });
 };
-var EditActionO = function EditActionO(_ref7) {
-  var editorData = _ref7.editorData,
-    row = _ref7.row,
-    action = _ref7.action,
-    effects = _ref7.effects,
-    rowHeight = _ref7.rowHeight,
-    scale = _ref7.scale,
-    scaleWidth = _ref7.scaleWidth,
-    scaleSplitCount = _ref7.scaleSplitCount,
-    startLeft = _ref7.startLeft,
-    gridSnap = _ref7.gridSnap,
-    disableDrag = _ref7.disableDrag,
-    scaleCount = _ref7.scaleCount,
-    maxScaleCount = _ref7.maxScaleCount,
-    setScaleCount = _ref7.setScaleCount,
-    onActionMoveStart = _ref7.onActionMoveStart,
-    onActionMoving = _ref7.onActionMoving,
-    onActionMoveEnd = _ref7.onActionMoveEnd,
-    onActionResizeStart = _ref7.onActionResizeStart,
-    onActionResizeEnd = _ref7.onActionResizeEnd,
-    onActionResizing = _ref7.onActionResizing,
-    dragLineData = _ref7.dragLineData,
-    setEditorData = _ref7.setEditorData,
-    onClickAction = _ref7.onClickAction,
-    onClickActionOnly = _ref7.onClickActionOnly,
-    onDoubleClickAction = _ref7.onDoubleClickAction,
-    onContextMenuAction = _ref7.onContextMenuAction,
-    getActionRender = _ref7.getActionRender,
-    handleTime = _ref7.handleTime,
-    areaRef = _ref7.areaRef,
-    deltaScrollLeft = _ref7.deltaScrollLeft,
-    _ref7$allowCreateTrac = _ref7.allowCreateTrack,
-    allowCreateTrack = _ref7$allowCreateTrac === void 0 ? true : _ref7$allowCreateTrac,
-    insertPreview = _ref7.insertPreview,
-    setInsertPreview = _ref7.setInsertPreview,
-    trackPreview = _ref7.trackPreview,
-    setTrackPreview = _ref7.setTrackPreview,
-    containerRef = _ref7.containerRef,
-    selectedActionIds = _ref7.selectedActionIds;
+var EditActionO = function EditActionO(_ref8) {
+  var editorData = _ref8.editorData,
+    row = _ref8.row,
+    action = _ref8.action,
+    effects = _ref8.effects,
+    rowHeight = _ref8.rowHeight,
+    scale = _ref8.scale,
+    scaleWidth = _ref8.scaleWidth,
+    scaleSplitCount = _ref8.scaleSplitCount,
+    startLeft = _ref8.startLeft,
+    gridSnap = _ref8.gridSnap,
+    disableDrag = _ref8.disableDrag,
+    scaleCount = _ref8.scaleCount,
+    maxScaleCount = _ref8.maxScaleCount,
+    setScaleCount = _ref8.setScaleCount,
+    onActionMoveStart = _ref8.onActionMoveStart,
+    onActionMoving = _ref8.onActionMoving,
+    onActionMoveEnd = _ref8.onActionMoveEnd,
+    onActionResizeStart = _ref8.onActionResizeStart,
+    onActionResizeEnd = _ref8.onActionResizeEnd,
+    onActionResizing = _ref8.onActionResizing,
+    dragLineData = _ref8.dragLineData,
+    setEditorData = _ref8.setEditorData,
+    onClickAction = _ref8.onClickAction,
+    onClickActionOnly = _ref8.onClickActionOnly,
+    onDoubleClickAction = _ref8.onDoubleClickAction,
+    onContextMenuAction = _ref8.onContextMenuAction,
+    getActionRender = _ref8.getActionRender,
+    handleTime = _ref8.handleTime,
+    areaRef = _ref8.areaRef,
+    deltaScrollLeft = _ref8.deltaScrollLeft,
+    _ref8$allowCreateTrac = _ref8.allowCreateTrack,
+    allowCreateTrack = _ref8$allowCreateTrac === void 0 ? true : _ref8$allowCreateTrac,
+    insertPreview = _ref8.insertPreview,
+    setInsertPreview = _ref8.setInsertPreview,
+    trackPreview = _ref8.trackPreview,
+    setTrackPreview = _ref8.setTrackPreview,
+    containerRef = _ref8.containerRef,
+    selectedActionIds = _ref8.selectedActionIds;
   var rowRnd = React.useRef();
   var isDragWhenClick = React.useRef(false);
   var originalPosition = React.useRef({
@@ -2384,11 +2414,11 @@ var EditActionO = function EditActionO(_ref7) {
       row: row
     });
   };
-  var handleDrag = function handleDrag(_ref8) {
-    var left = _ref8.left,
-      width = _ref8.width,
-      top = _ref8.top,
-      args = _objectWithoutProperties(_ref8, _excluded);
+  var handleDrag = function handleDrag(_ref9) {
+    var left = _ref9.left,
+      width = _ref9.width,
+      top = _ref9.top,
+      args = _objectWithoutProperties(_ref9, _excluded);
     isDragWhenClick.current = true;
     var currentRange = parserTransformToTime({
       left: left,
@@ -2398,59 +2428,81 @@ var EditActionO = function EditActionO(_ref7) {
       scale: scale,
       startLeft: startLeft
     });
-    var placement = resolveTargetRowPlacement({
+    var isSelectionMultiDrag = ((selectedActionIds === null || selectedActionIds === void 0 ? void 0 : selectedActionIds.length) || 0) > 1 && (selectedActionIds === null || selectedActionIds === void 0 ? void 0 : selectedActionIds.includes(action.id));
+    var multiDragConflict = isSelectionMultiDrag ? hasMultiDragConflict({
       editorData: editorData,
-      row: row,
-      top: top,
-      rowHeight: rowHeight,
-      allowCreateTrack: allowCreateTrack
-    });
-    var currentRowIndex = editorData.findIndex(function (item) {
-      return item.id === row.id;
-    });
-    if (placement.needCreateNewRow) {
-      // 鼠标已拖到所有轨道的边界外，直接显示新轨道插入线
-      setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview(null);
-      setTrackPreview === null || setTrackPreview === void 0 ? void 0 : setTrackPreview({
-        kind: 'new-row',
-        insertIndex: placement.targetRowIndex,
-        sourceRow: row
+      selectedActionIds: selectedActionIds || [],
+      primaryAction: action,
+      timeOffset: currentRange.start - action.start,
+      rowDelta: Math.round((top || 0) / rowHeight)
+    }) : false;
+    if (multiDragConflict) {
+      setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview({
+        actionId: action.id,
+        rowId: row.id,
+        start: action.start,
+        end: action.end,
+        shiftByActionId: {}
       });
-    } else {
-      // 用 smart row 找真实可用行（冲突则往下级联）
-      var smart = resolveSmartRow({
+      setTrackPreview === null || setTrackPreview === void 0 ? void 0 : setTrackPreview(null);
+    } else if (isSelectionMultiDrag) {
+      clearRipplePreview(areaRef.current);
+    }
+    if (!multiDragConflict) {
+      var placement = resolveTargetRowPlacement({
         editorData: editorData,
-        initialTargetRowIndex: placement.targetRowIndex,
-        actionId: action.id,
-        start: currentRange.start,
-        end: currentRange.end,
+        row: row,
+        top: top,
+        rowHeight: rowHeight,
         allowCreateTrack: allowCreateTrack
       });
-      if (smart.needCreateNewRow) {
+      var _currentRowIndex = editorData.findIndex(function (item) {
+        return item.id === row.id;
+      });
+      if (placement.needCreateNewRow) {
+        // 鼠标已拖到所有轨道的边界外，直接显示新轨道插入线
         setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview(null);
         setTrackPreview === null || setTrackPreview === void 0 ? void 0 : setTrackPreview({
           kind: 'new-row',
-          insertIndex: smart.targetRowIndex,
+          insertIndex: placement.targetRowIndex,
           sourceRow: row
         });
       } else {
-        var targetRow = editorData[smart.targetRowIndex];
-        var isSameRow = smart.targetRowIndex === currentRowIndex;
-        if (targetRow) {
-          setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview({
-            actionId: action.id,
-            rowId: targetRow.id,
-            start: currentRange.start,
-            end: currentRange.end,
-            shiftByActionId: {}
-          });
-          setTrackPreview === null || setTrackPreview === void 0 ? void 0 : setTrackPreview(isSameRow ? null : {
-            kind: 'row',
-            rowId: targetRow.id
+        // 用 smart row 找真实可用行（冲突则往下级联）
+        var smart = resolveSmartRow({
+          editorData: editorData,
+          initialTargetRowIndex: placement.targetRowIndex,
+          actionId: action.id,
+          start: currentRange.start,
+          end: currentRange.end,
+          allowCreateTrack: allowCreateTrack
+        });
+        if (smart.needCreateNewRow) {
+          setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview(null);
+          setTrackPreview === null || setTrackPreview === void 0 ? void 0 : setTrackPreview({
+            kind: 'new-row',
+            insertIndex: smart.targetRowIndex,
+            sourceRow: row
           });
         } else {
-          setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview(null);
-          setTrackPreview === null || setTrackPreview === void 0 ? void 0 : setTrackPreview(null);
+          var targetRow = editorData[smart.targetRowIndex];
+          var isSameRow = smart.targetRowIndex === _currentRowIndex;
+          if (targetRow) {
+            setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview({
+              actionId: action.id,
+              rowId: targetRow.id,
+              start: currentRange.start,
+              end: currentRange.end,
+              shiftByActionId: {}
+            });
+            setTrackPreview === null || setTrackPreview === void 0 ? void 0 : setTrackPreview(isSameRow ? null : {
+              kind: 'row',
+              rowId: targetRow.id
+            });
+          } else {
+            setInsertPreview === null || setInsertPreview === void 0 ? void 0 : setInsertPreview(null);
+            setTrackPreview === null || setTrackPreview === void 0 ? void 0 : setTrackPreview(null);
+          }
         }
       }
     }
@@ -2486,14 +2538,14 @@ var EditActionO = function EditActionO(_ref7) {
     }
     handleScaleCount(left, width);
   };
-  var handleDragEndBase = React.useCallback(function (_ref9) {
+  var handleDragEndBase = React.useCallback(function (_ref0) {
     var _areaRef$current2;
-    var left = _ref9.left,
-      width = _ref9.width,
-      top = _ref9.top,
-      height = _ref9.height,
-      isMultiDrag = _ref9.isMultiDrag,
-      fnCallback = _ref9.fn;
+    var left = _ref0.left,
+      width = _ref0.width,
+      top = _ref0.top,
+      height = _ref0.height,
+      isMultiDrag = _ref0.isMultiDrag,
+      fnCallback = _ref0.fn;
     window.dispatchEvent(new CustomEvent('timeline-action-dragging-change', {
       detail: false
     }));
@@ -2687,9 +2739,9 @@ var EditActionO = function EditActionO(_ref7) {
       dir: dir
     });
   };
-  var handleResizing = function handleResizing(dir, _ref0) {
-    var left = _ref0.left,
-      width = _ref0.width;
+  var handleResizing = function handleResizing(dir, _ref1) {
+    var left = _ref1.left,
+      width = _ref1.width;
     isDragWhenClick.current = true;
     if (onActionResizing) {
       var _parserTransformToTim2 = parserTransformToTime({
@@ -2718,9 +2770,9 @@ var EditActionO = function EditActionO(_ref7) {
     });
     handleScaleCount(left, width);
   };
-  var handleResizeEnd = function handleResizeEnd(dir, _ref1) {
-    var left = _ref1.left,
-      width = _ref1.width;
+  var handleResizeEnd = function handleResizeEnd(dir, _ref10) {
+    var left = _ref10.left,
+      width = _ref10.width;
     // 计算时间
     var _parserTransformToTim3 = parserTransformToTime({
         left: left,
@@ -2775,13 +2827,13 @@ var EditActionO = function EditActionO(_ref7) {
   });
   React.useEffect(function () {
     var handleActionMoveEnd = function handleActionMoveEnd(e) {
-      var _ref10 = e.detail || {},
-        left = _ref10.left,
-        width = _ref10.width,
-        top = _ref10.top,
-        height = _ref10.height,
-        id = _ref10.id,
-        fn = _ref10.fn;
+      var _ref11 = e.detail || {},
+        left = _ref11.left,
+        width = _ref11.width,
+        top = _ref11.top,
+        height = _ref11.height,
+        id = _ref11.id,
+        fn = _ref11.fn;
       if (id === action.id) {
         handleDragEnd({
           left: left,
@@ -3165,7 +3217,7 @@ var useRowSelection = function useRowSelection(options) {
   var handleClickOutside = React.useCallback(function (target) {
     if (disabled) return;
     // 如果点击的不是选中的 action 或框选框，清除选择
-    if (!target.closest('.timeline-editor-selection-box') && !target.closest('.timeline-editor-action') && !target.closest('[data-draggable="true"]') && !target.closest('.voice-studio-right-config-panel') && !target.closest('.voice-studio-main-content-panel') && !target.closest('.ant-modal')) {
+    if (!target.closest('.timeline-editor-selection-box') && !target.closest('.timeline-editor-action') && !target.closest('.timeline-editor-cursor') && !target.closest('.timeline-editor-cursor-area') && !target.closest('.timeline-editor-time-area') && !target.closest('[data-draggable="true"]') && !target.closest('.voice-studio-right-config-panel') && !target.closest('.voice-studio-main-content-panel') && !target.closest('.ant-modal')) {
       clearSelection();
     }
   }, [disabled, clearSelection]);
@@ -4161,7 +4213,7 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
       ref: gridRef,
       cellRenderer: cellRenderer,
       columnWidth: Math.max(scaleCount * scaleWidth + startLeft, width),
-      width: width,
+      width: Math.max(scaleCount * scaleWidth + startLeft, width),
       height: height,
       rowHeight: function rowHeight(_ref5) {
         var index = _ref5.index;
@@ -4321,13 +4373,14 @@ var TimeArea = function TimeArea(_ref) {
         height: height
       },
       onClick: function onClick(e) {
+        var _timelineEditorEl$scr;
         if (hideCursor) return;
+        var timelineEditorEl = document.querySelector('.timeline-editor');
         var rect = e.currentTarget.getBoundingClientRect();
         var position = e.clientX - rect.x;
-        var left = Math.max(position, startLeft);
-        // const left = Math.max(position + scrollLeft, startLeft);
+        var actualScrollLeft = (_timelineEditorEl$scr = timelineEditorEl === null || timelineEditorEl === void 0 ? void 0 : timelineEditorEl.scrollLeft) !== null && _timelineEditorEl$scr !== void 0 ? _timelineEditorEl$scr : scrollLeft;
+        var left = Math.max(position + actualScrollLeft, startLeft);
         if (left > maxScaleCount * scaleWidth + startLeft) return;
-        // if (left > maxScaleCount * scaleWidth + startLeft - scrollLeft) return;
         var time = parserPixelToTime(left, {
           startLeft: startLeft,
           scale: scale,
@@ -4652,14 +4705,34 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
     return result;
   }, [startLeft, scale, scaleWidth, autoReRender]);
   /** 设置 scrollLeft */
+  var getMaxScrollLeft = React.useCallback(function () {
+    if (!Number.isFinite(width) || width <= 0) return 0;
+    return Math.max(scaleCount * scaleWidth + startLeft - width, 0);
+  }, [scaleCount, scaleWidth, startLeft, width]);
   var handleDeltaScrollLeft = React.useCallback(function (delta) {
     // 当超过最大距离时，禁止自动滚动
     var data = scrollSync.current.state.scrollLeft + delta;
-    if (data > scaleCount * (scaleWidth - 1) + startLeft - width) return;
+    var maxScrollLeft = getMaxScrollLeft();
+    if (data > maxScrollLeft) return;
     scrollSync.current && scrollSync.current.setState({
       scrollLeft: Math.max(scrollSync.current.state.scrollLeft + delta, 0)
     });
-  }, [scaleCount, scaleWidth, startLeft, width]);
+  }, [getMaxScrollLeft]);
+  React.useLayoutEffect(function () {
+    var _scrollSync$current$s, _scrollSync$current;
+    var maxScrollLeft = getMaxScrollLeft();
+    var currentScrollLeft = (_scrollSync$current$s = (_scrollSync$current = scrollSync.current) === null || _scrollSync$current === void 0 ? void 0 : _scrollSync$current.state.scrollLeft) !== null && _scrollSync$current$s !== void 0 ? _scrollSync$current$s : 0;
+    var nextScrollLeft = Math.min(Math.max(currentScrollLeft, 0), maxScrollLeft);
+    var timelineEl = document.querySelector('.timeline-editor');
+    if (timelineEl && Math.abs(timelineEl.scrollLeft - nextScrollLeft) > 1) {
+      timelineEl.scrollLeft = nextScrollLeft;
+    }
+    if (scrollSync.current && Math.abs(currentScrollLeft - nextScrollLeft) > 1) {
+      scrollSync.current.setState({
+        scrollLeft: nextScrollLeft
+      });
+    }
+  }, [getMaxScrollLeft, scale, scaleWidth, scaleCount, width]);
   var handleInitDragLine = React.useCallback(function (data) {
     var _checkedProps$onActio, _checkedProps$onActio2, _dragLineControllerRe;
     (_checkedProps$onActio = checkedProps.onActionMoveStart) === null || _checkedProps$onActio === void 0 ? void 0 : _checkedProps$onActio.call(checkedProps, data);
@@ -4745,17 +4818,19 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
       },
       pause: engineRef.current.pause.bind(engineRef.current),
       setScrollLeft: function setScrollLeft(val) {
+        var nextScrollLeft = Math.min(Math.max(val, 0), getMaxScrollLeft());
         scrollSync.current && scrollSync.current.setState({
-          scrollLeft: Math.max(val, 0)
+          scrollLeft: nextScrollLeft
         });
       },
       setScrollLeftFromTime: function setScrollLeftFromTime(val) {
         var containerEl = document.querySelector('.timeline-editor');
         if (!containerEl) return;
         var left = startLeft + scaleWidth / scale * val;
-        containerEl.scrollLeft = Math.max(left, 0);
+        var nextScrollLeft = Math.min(Math.max(left, 0), getMaxScrollLeft());
+        containerEl.scrollLeft = nextScrollLeft;
         scrollSync.current && scrollSync.current.setState({
-          scrollLeft: Math.max(left, 0)
+          scrollLeft: nextScrollLeft
         });
       },
       setScrollTop: function setScrollTop(val) {
@@ -4766,11 +4841,13 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
     };
   });
   var onClickTimeline = React.useCallback(function (e) {
-    var _e$target;
+    var _ref2, _timelineEditorEl$scr, _scrollSync$current2, _e$target;
     if (!domRef.current) return;
+    var timelineEditorEl = document.querySelector('.timeline-editor');
     var rect = domRef.current.getBoundingClientRect();
     var position = e.clientX - rect.x;
-    var left = position + scrollSync.current.state.scrollLeft;
+    var scrollLeft = (_ref2 = (_timelineEditorEl$scr = timelineEditorEl === null || timelineEditorEl === void 0 ? void 0 : timelineEditorEl.scrollLeft) !== null && _timelineEditorEl$scr !== void 0 ? _timelineEditorEl$scr : (_scrollSync$current2 = scrollSync.current) === null || _scrollSync$current2 === void 0 ? void 0 : _scrollSync$current2.state.scrollLeft) !== null && _ref2 !== void 0 ? _ref2 : 0;
+    var left = position + scrollLeft;
     var time = parserPixelToTime(left, {
       startLeft: startLeft,
       scale: scale,
@@ -4840,9 +4917,9 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
     className: "".concat(className || '', " ").concat(theme || '', " ").concat(PREFIX, " ").concat(disableDrag ? PREFIX + '-disable' : '')
   }, /*#__PURE__*/React__default['default'].createElement(reactVirtualized.ScrollSync, {
     ref: scrollSync
-  }, function (_ref2) {
-    var scrollTop = _ref2.scrollTop,
-      _onScroll = _ref2.onScroll;
+  }, function (_ref3) {
+    var scrollTop = _ref3.scrollTop,
+      _onScroll = _ref3.onScroll;
     var scrollLeft = (containerEl === null || containerEl === void 0 ? void 0 : containerEl.scrollLeft) || 0;
     return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(TimeArea, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
       timelineWidth: width,
@@ -4857,8 +4934,8 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
       cursorRef: cursorRef
     })), areaCount === 1 ? (/*#__PURE__*/React__default['default'].createElement(EditArea, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
       timelineWidth: width,
-      ref: function ref(_ref3) {
-        return areaRef.current = _ref3 === null || _ref3 === void 0 ? void 0 : _ref3.domRef.current;
+      ref: function ref(_ref4) {
+        return areaRef.current = _ref4 === null || _ref4 === void 0 ? void 0 : _ref4.domRef.current;
       },
       disableDrag: disableDrag || isPlaying,
       editorData: editorData,
@@ -4919,8 +4996,8 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
       }, checkedProps), {}, {
         className: index !== 0 ? "no-flex ".concat(key, " ").concat(index, " overflow-hidden") : "overflow-hidden ".concat(key, " ").concat(index),
         timelineWidth: width,
-        ref: function ref(_ref4) {
-          return areaRef.current = _ref4 === null || _ref4 === void 0 ? void 0 : _ref4.domRef.current;
+        ref: function ref(_ref5) {
+          return areaRef.current = _ref5 === null || _ref5 === void 0 ? void 0 : _ref5.domRef.current;
         },
         disableDrag: disableDrag || isPlaying,
         editorData: groupedData[key],

package/package.json

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