sense-react-timeline-editor 1.1.21 → 1.1.23

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;
@@ -4642,14 +4694,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);
@@ -4694,6 +4766,8 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
   useEffect(function () {
     var handleClickOutside = function handleClickOutside(e) {
       var target = e.target;
+      var actionEl = target.closest('.timeline-editor-time-area');
+      if (actionEl) return;
       engineRef.current.trigger('mousedown', {
         target: target,
         evt: e
@@ -4733,17 +4807,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) {
@@ -4875,7 +4951,8 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
       id: "time-editor-container",
       ref: containerRef,
       style: {
-        height: '100%'
+        height: '100%',
+        background: '#fff'
       },
       onClick: onClickTimeline
     }, Object.keys(groupedData).map(function (key, index) {

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;
@@ -4652,14 +4704,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);
@@ -4704,6 +4776,8 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
   React.useEffect(function () {
     var handleClickOutside = function handleClickOutside(e) {
       var target = e.target;
+      var actionEl = target.closest('.timeline-editor-time-area');
+      if (actionEl) return;
       engineRef.current.trigger('mousedown', {
         target: target,
         evt: e
@@ -4743,17 +4817,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) {
@@ -4885,7 +4961,8 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
       id: "time-editor-container",
       ref: containerRef,
       style: {
-        height: '100%'
+        height: '100%',
+        background: '#fff'
       },
       onClick: onClickTimeline
     }, Object.keys(groupedData).map(function (key, index) {

package/package.json

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