sense-react-timeline-editor 1.0.7 → 1.0.8

package/dist/index.esm.js

@@ -1,7 +1,9 @@
-import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState, useLayoutEffect } from 'react';
+import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState, useLayoutEffect, useCallback } from 'react';
 import { AutoSizer, Grid, ScrollSync } from 'react-virtualized';
 import { prefixNames } from 'framework-utils';
 import interact from 'interactjs';
+import { useDebounceFn } from 'ahooks';
+import { useSelectionContainer } from '@air/react-drag-to-select';
 import { Upload, message } from 'antd/es';
 import { Howl } from 'howler';
 import { groupBy } from 'lodash-es';
@@ -153,6 +155,26 @@ function _objectSpread2(e) {
   }
   return e;
 }
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
 function _possibleConstructorReturn(t, e) {
   if (e && ("object" == typeof e || "function" == typeof e)) return e;
   if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
@@ -2077,7 +2099,7 @@ var DragLines = function DragLines(_ref) {
   }));
 };
 
-var css_248z$2 = ".timeline-editor .ant-upload-wrapper .ant-upload-drag {\n  border: none !important;\n  background: none !important;\n}\n.timeline-editor:hover .timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar {\n  height: 4px;\n}\n.timeline-editor-edit-area {\n  flex: 1 1 auto;\n  margin-top: 10px;\n  overflow: hidden;\n  position: relative;\n}\n.timeline-editor-edit-area.no-flex {\n  flex: 0 0 auto;\n}\n.timeline-editor-edit-area.overflow-hidden {\n  overflow: hidden;\n}\n.timeline-editor-edit-area.overflow-hidden .ReactVirtualized__Grid {\n  overflow: hidden !important;\n  height: initial !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid {\n  outline: none !important;\n  overflow: overlay !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar-track {\n  background-color: transparent !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar-thumb {\n  background: #666;\n  border-radius: 16px;\n}\n";
+var css_248z$2 = ".timeline-editor .ant-upload-wrapper .ant-upload-drag {\n  border: none !important;\n  background: none !important;\n}\n.timeline-editor:hover .timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar {\n  height: 4px;\n}\n.timeline-editor-edit-area {\n  flex: 1 1 auto;\n  margin-top: 10px;\n  overflow: hidden;\n  position: relative;\n}\n.timeline-editor-edit-area.no-flex {\n  flex: 0 0 auto;\n}\n.timeline-editor-edit-area.overflow-hidden {\n  overflow: hidden;\n}\n.timeline-editor-edit-area.overflow-hidden .ReactVirtualized__Grid {\n  overflow: hidden !important;\n  height: initial !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid {\n  outline: none !important;\n  overflow: overlay !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar-track {\n  background-color: transparent !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar-thumb {\n  background: #666;\n  border-radius: 16px;\n}\n.timeline-editor-selection-box {\n  position: fixed;\n  border: 2px solid #1890ff;\n  background-color: rgba(24, 144, 255, 0.1);\n  pointer-events: none;\n  z-index: 9999;\n  box-shadow: 0 0 8px rgba(24, 144, 255, 0.3);\n}\n";
 styleInject(css_248z$2);
 
 var css_248z$3 = ".timeline-editor-action {\n  position: absolute;\n  left: 0;\n  top: 0;\n  background-color: #c6cbd2;\n  display: flex;\n  align-items: center;\n}\n.timeline-editor-action .timeline-editor-action-left-stretch,\n.timeline-editor-action .timeline-editor-action-right-stretch {\n  position: absolute;\n}\n.timeline-editor-action .timeline-editor-action-left-stretch {\n  left: -3px;\n}\n.timeline-editor-action .timeline-editor-action-right-stretch {\n  right: -3px;\n  transform: rotate(180deg);\n}\n";
@@ -2085,6 +2107,7 @@ styleInject(css_248z$3);
 
 var stretchIcon = "data:image/svg+xml,%3Csvg%20width%3D%227%22%20height%3D%2216%22%20viewBox%3D%220%200%207%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7%2015C7%2015.5523%206.55228%2016%206%2016L1%2016C0.447715%2016%201.06779e-08%2015.5523%202.38498e-08%2015L3.57746e-07%201C3.70918e-07%200.447715%200.447716%20-1.5627e-07%201%20-1.43099e-07L6%209.29825e-07C6.55229%209.42996e-07%207%200.447716%207%201L7%2015Z%22%20fill%3D%22%23226EFF%22%2F%3E%3Cpath%20d%3D%22M2%204L2%2012%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%2012.25L5.5%208L4%203.75%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M4%2012.25L5.5%208L4%203.75L4%2012.25Z%22%20stroke%3D%22white%22%20stroke-width%3D%220.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
 
+var _excluded = ["left", "width", "top"];
 var EditAction = function EditAction(_ref) {
   var editorData = _ref.editorData,
     row = _ref.row,
@@ -2222,7 +2245,8 @@ var EditAction = function EditAction(_ref) {
   var handleDrag = function handleDrag(_ref2) {
     var left = _ref2.left,
       width = _ref2.width,
-      top = _ref2.top;
+      top = _ref2.top,
+      args = _objectWithoutProperties(_ref2, _excluded);
     isDragWhenClick.current = true;
     // 检查是否需要显示预览指示器
     if (allowCreateTrack && setDropPreview && top !== undefined) {
@@ -2263,12 +2287,15 @@ var EditAction = function EditAction(_ref) {
         }),
         _start = _parserTransformToTim.start,
         _end = _parserTransformToTim.end;
-      var result = onActionMoving({
+      var result = onActionMoving(_objectSpread2({
         action: action,
         row: row,
         start: _start,
-        end: _end
-      });
+        end: _end,
+        left: left,
+        width: width,
+        top: top
+      }, args));
       if (result === false) return false;
     }
     if (isMounted.current) {
@@ -2280,11 +2307,12 @@ var EditAction = function EditAction(_ref) {
     }
     handleScaleCount(left, width);
   };
-  var handleDragEnd = function handleDragEnd(_ref3) {
+  var handleDragEndBase = useCallback(function (_ref3) {
     var left = _ref3.left,
       width = _ref3.width,
       top = _ref3.top,
       height = _ref3.height;
+    console.log('handleDragEnd: ', left, width, top, height);
     // 清理预览指示器
     if (setDropPreview) {
       setDropPreview(null);
@@ -2300,6 +2328,7 @@ var EditAction = function EditAction(_ref) {
       }),
       start = _parserTransformToTim2.start,
       end = _parserTransformToTim2.end;
+    console.log('handleDragEnd start, end : ', start, end);
     // 检测目标row
     var targetRowIndex = editorData.findIndex(function (item) {
       return item.id === row.id;
@@ -2554,6 +2583,7 @@ var EditAction = function EditAction(_ref) {
     // 更新action的时间
     actionItem.start = start;
     actionItem.end = end;
+    console.log('handleDragEnd actionItem: ', targetRowItem, row);
     // 如果拖拽到了不同的row,需要移动action
     if (targetRowItem.id !== row.id) {
       console.log('Moving action to different row');
@@ -2593,15 +2623,29 @@ var EditAction = function EditAction(_ref) {
     setTransform(_objectSpread2(_objectSpread2({}, newTransform), {}, {
       top: 0
     }));
+    var up = 0; // -1 向上移动，1 向下移动，0 不移动
+    if (targetRowItem.id !== row.id) {
+      up = top > 0 ? 1 : -1;
+    }
     // 执行回调
     if (onActionMoveEnd) onActionMoveEnd({
       action: actionItem,
       row: targetRowItem,
       start: start,
       end: end,
-      isNewRow: needCreateNewRow
+      isNewRow: needCreateNewRow,
+      left: left,
+      width: width,
+      top: top,
+      height: height,
+      up: up
     });
-  };
+  }, [action, allowCreateTrack, editorData, id, onActionMoveEnd, parserTimeToTransform, parserTransformToTime, row, scale, scaleWidth, setDropPreview, setEditorData, startLeft]);
+  // 防抖版本的 handleDragEnd
+  var _useDebounceFn = useDebounceFn(handleDragEndBase, {
+      wait: 300
+    }),
+    handleDragEnd = _useDebounceFn.run;
   var handleResizeStart = function handleResizeStart(dir) {
     onActionResizeStart && onActionResizeStart({
       action: action,
@@ -2661,6 +2705,8 @@ var EditAction = function EditAction(_ref) {
     var action = rowItem.actions.find(function (item) {
       return item.id === id;
     });
+    var originalStart = action.start;
+    var originalEnd = action.end;
     action.start = start;
     action.end = end;
     setEditorData(editorData);
@@ -2670,7 +2716,9 @@ var EditAction = function EditAction(_ref) {
       row: row,
       start: start,
       end: end,
-      dir: dir
+      dir: dir,
+      originalStart: originalStart,
+      originalEnd: originalEnd
     });
   };
   //#endregion
@@ -2691,6 +2739,29 @@ var EditAction = function EditAction(_ref) {
   var currentRowIndex = editorData.findIndex(function (item) {
     return item.id === row.id;
   });
+  useEffect(function () {
+    var handleActionMoveEnd = function handleActionMoveEnd(e) {
+      var _ref6 = e.detail || {},
+        left = _ref6.left,
+        width = _ref6.width,
+        top = _ref6.top,
+        height = _ref6.height,
+        id = _ref6.id;
+      console.log('handleActionMoveEnd: ', left, width, top, height, id);
+      if (id === action.id) {
+        handleDragEnd({
+          left: left,
+          width: width,
+          top: top,
+          height: height
+        });
+      }
+    };
+    window.addEventListener('action-move-end', handleActionMoveEnd);
+    return function () {
+      window.removeEventListener('action-move-end', handleActionMoveEnd);
+    };
+  }, [containerRef, handleDragEnd]);
   return /*#__PURE__*/React.createElement(RowDnd, {
     ref: rowRnd,
     parentRef: areaRef,
@@ -2724,6 +2795,7 @@ var EditAction = function EditAction(_ref) {
     deltaScrollLeft: deltaScrollLeft,
     deltaScrollTop: handleDeltaScrollTop
   }, /*#__PURE__*/React.createElement("div", {
+    "data-action-id": action.id,
     onMouseDown: function onMouseDown() {
       isDragWhenClick.current = false;
     },
@@ -2783,7 +2855,7 @@ var EditAction = function EditAction(_ref) {
   }))));
 };
 
-var css_248z$4 = ".timeline-editor-edit-row {\n  background-repeat: no-repeat, repeat;\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n}\n.timeline-editor-edit-row.preview-row {\n  background-color: rgba(100, 150, 255, 0.15);\n  border: 1px dashed rgba(100, 150, 255, 0.5);\n  opacity: 0.8;\n  transition: all 0.2s ease;\n}\n";
+var css_248z$4 = ".timeline-editor-edit-row {\n  background-repeat: no-repeat, repeat;\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n}\n.timeline-editor-edit-row.preview-row {\n  background-color: rgba(100, 150, 255, 0.15);\n  border: 1px dashed rgba(100, 150, 255, 0.5);\n  opacity: 0.8;\n  transition: all 0.2s ease;\n}\n.timeline-editor-edit-row.selected {\n  background-color: rgba(24, 144, 255, 0.08);\n  box-shadow: inset 0 0 0 2px rgba(24, 144, 255, 0.4);\n  position: relative;\n  z-index: 10;\n}\n.timeline-editor-edit-row.selected::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background-color: #1890ff;\n}\n.timeline-editor-edit-row.dragging {\n  opacity: 0.6;\n  cursor: move;\n}\n";
 styleInject(css_248z$4);
 
 var EditRow = function EditRow(props) {
@@ -2799,9 +2871,11 @@ var EditRow = function EditRow(props) {
     scale = props.scale,
     scaleWidth = props.scaleWidth,
     allowCreateTrack = props.allowCreateTrack,
-    containerRef = props.containerRef;
+    containerRef = props.containerRef,
+    _props$selectedAction = props.selectedActionIds,
+    selectedActionIds = _props$selectedAction === void 0 ? [] : _props$selectedAction;
   var classNames = ['edit-row'];
-  if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('edit-row-selected');
+  if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('selected');
   var handleTime = function handleTime(e) {
     if (!areaRef.current) return;
     var rect = areaRef.current.getBoundingClientRect();
@@ -2817,6 +2891,8 @@ var EditRow = function EditRow(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefix.apply(void 0, classNames), " ").concat(((rowData === null || rowData === void 0 ? void 0 : rowData.classNames) || []).join(' ')),
     style: style,
+    "data-row-id": rowData === null || rowData === void 0 ? void 0 : rowData.id,
+    "data-y": "0",
     onClick: function onClick(e) {
       if (rowData && onClickRow) {
         var time = handleTime(e);
@@ -2853,7 +2929,8 @@ var EditRow = function EditRow(props) {
       action: action,
       allowCreateTrack: allowCreateTrack,
       setDropPreview: props.setDropPreview,
-      containerRef: containerRef
+      containerRef: containerRef,
+      selectedActionIds: selectedActionIds
     }));
   }));
 };
@@ -2964,16 +3041,570 @@ function useDragLine() {
   };
 }
 
+var useRowSelection = function useRowSelection(options) {
+  var editorData = options.editorData,
+    rowHeight = options.rowHeight,
+    scrollTop = options.scrollTop,
+    scrollLeft = options.scrollLeft,
+    _onSelectionChange = options.onSelectionChange,
+    _options$disabled = options.disabled,
+    disabled = _options$disabled === void 0 ? false : _options$disabled,
+    containerRef = options.containerRef;
+  var _useState = useState(new Set()),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedActionIds = _useState2[0],
+    setSelectedActionIds = _useState2[1];
+  // 计算框选区域与 action 的交集
+  var getIntersectedActions = useCallback(function (box) {
+    var _containerRef$current, _containerRef$current2;
+    var intersectedActionIds = [];
+    // 直接从 container 获取滚动值
+    var currentScrollLeft = ((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.scrollLeft) || 0;
+    var currentScrollTop = ((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.scrollTop) || 0;
+    // box 坐标是相对于可视区域的，需要减去滚动偏移量才能得到相对于 container 的坐标
+    var boxTop = box.top - currentScrollTop;
+    var boxBottom = boxTop + box.height;
+    var boxLeft = box.left - currentScrollLeft;
+    var boxRight = boxLeft + box.width;
+    editorData.forEach(function (row) {
+      // 检查框选区域是否与 action 相交
+      row.actions.forEach(function (action) {
+        var _containerRef$current3;
+        var actionEl = (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.querySelector(".timeline-editor-action[data-action-id=\"".concat(action.id, "\"]"));
+        if (actionEl) {
+          var actionRect = actionEl.getBoundingClientRect();
+          var actionLeft = actionRect.left;
+          var actionTop = actionRect.top;
+          var actionWidth = actionRect.width;
+          var actionHeight = actionRect.height;
+          var actionRight = actionLeft + actionWidth;
+          var actionBottom = actionTop + actionHeight;
+          // 检查框选区域是否与 action 相交
+          var isActionIntersecting = boxLeft < actionRight && boxRight > actionLeft && boxTop < actionBottom && boxBottom > actionTop;
+          if (isActionIntersecting) {
+            intersectedActionIds.push(action.id);
+          }
+        }
+      });
+    });
+    return {
+      actionIds: intersectedActionIds
+    };
+  }, [editorData, rowHeight, scrollTop, scrollLeft, containerRef]);
+  // 使用 @air/react-drag-to-select 的框选功能
+  var _useSelectionContaine = useSelectionContainer({
+      onSelectionChange: function onSelectionChange(box) {
+        if (disabled) return;
+        // 边界检查：确保框选区域有效
+        if (!box || box.width < 5 || box.height < 5) {
+          return;
+        }
+        var _getIntersectedAction = getIntersectedActions(box),
+          actionIds = _getIntersectedAction.actionIds;
+        var newSelectedActionIds = new Set(actionIds);
+        // 只在选中状态变化时更新
+        if (newSelectedActionIds.size !== selectedActionIds.size || !_toConsumableArray(newSelectedActionIds).every(function (id) {
+          return selectedActionIds.has(id);
+        })) {
+          setSelectedActionIds(newSelectedActionIds);
+          _onSelectionChange(actionIds);
+        }
+      },
+      onSelectionStart: function onSelectionStart() {
+        if (!disabled) {
+          // 清除之前的选择
+          setSelectedActionIds(new Set());
+          _onSelectionChange([]);
+        }
+      },
+      onSelectionEnd: function onSelectionEnd() {
+        // 框选结束时的处理（可用于性能优化）
+      },
+      shouldStartSelecting: function shouldStartSelecting(target) {
+        var _element$closest, _element$closest2, _element$closest3, _element$closest4;
+        if (disabled) return false;
+        // 不在 action 元素上启动框选
+        var element = target;
+        if (((_element$closest = element.closest) === null || _element$closest === void 0 ? void 0 : _element$closest.call(element, '.timeline-editor-action')) || ((_element$closest2 = element.closest) === null || _element$closest2 === void 0 ? void 0 : _element$closest2.call(element, '.timeline-editor-edit-action')) || ((_element$closest3 = element.closest) === null || _element$closest3 === void 0 ? void 0 : _element$closest3.call(element, '[data-draggable="true"]')) || ((_element$closest4 = element.closest) === null || _element$closest4 === void 0 ? void 0 : _element$closest4.call(element, '.timeline-editor-edit-row.dragging'))) {
+          return false;
+        }
+        return true;
+      },
+      selectionProps: {
+        className: 'timeline-editor-selection-box',
+        style: {
+          border: '2px solid #1890ff',
+          backgroundColor: 'rgba(24, 144, 255, 0.1)',
+          zIndex: 9999
+        }
+      },
+      isEnabled: !disabled,
+      eventsElement: containerRef === null || containerRef === void 0 ? void 0 : containerRef.current
+    }),
+    DragSelection = _useSelectionContaine.DragSelection;
+  // 清除选择
+  var clearSelection = useCallback(function () {
+    setSelectedActionIds(new Set());
+    _onSelectionChange([]);
+  }, [_onSelectionChange]);
+  // 点击空白区域取消选择
+  useEffect(function () {
+    if (disabled) return;
+    var handleClickOutside = function handleClickOutside(e) {
+      var target = e.target;
+      // 如果点击的不是选中的 action 或框选框，清除选择
+      if (!target.closest('.timeline-editor-selection-box') && !target.closest('.timeline-editor-action') && !target.closest('[data-draggable="true"]')) {
+        clearSelection();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [disabled, clearSelection]);
+  // 监听 Escape 键取消选择
+  useEffect(function () {
+    if (disabled) return;
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key === 'Escape' && selectedActionIds.size > 0) {
+        clearSelection();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [disabled, selectedActionIds.size, clearSelection]);
+  return {
+    DragSelection: DragSelection,
+    selectedActionIds: Array.from(selectedActionIds),
+    clearSelection: clearSelection
+  };
+};
+
+var useRowDrag = function useRowDrag(options) {
+  var selectedActionIds = options.selectedActionIds,
+    editorData = options.editorData,
+    containerRef = options.containerRef,
+    _options$scale = options.scale,
+    scale = _options$scale === void 0 ? 1 : _options$scale,
+    _options$scaleWidth = options.scaleWidth,
+    scaleWidth = _options$scaleWidth === void 0 ? 160 : _options$scaleWidth,
+    _options$startLeft = options.startLeft,
+    startLeft = _options$startLeft === void 0 ? 20 : _options$startLeft,
+    setEditorData = options.setEditorData;
+  // 多选拖拽状态
+  var multiDragState = React.useRef({
+    isMultiDrag: false,
+    primaryActionId: null,
+    initialPositions: new Map(),
+    dragOffset: {
+      dx: 0,
+      dy: 0
+    },
+    startCursor: null,
+    isDraggingSelection: false,
+    start: 0,
+    end: 0
+  });
+  // 获取选中的 action DOM 元素
+  var getSelectedActionEls = React.useCallback(function () {
+    if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) return [];
+    // 查找所有选中的 action 元素（action-selected 是选中状态的类名）
+    var actions = containerRef.current.querySelectorAll('.timeline-editor-action-selected');
+    return Array.from(actions);
+  }, [containerRef]);
+  var actionEls = getSelectedActionEls();
+  // 存储所有选中 action 的当前预览位置
+  var _React$useState = React.useState(new Map()),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    previewPositions = _React$useState2[0],
+    setPreviewPositions = _React$useState2[1];
+  // 拖拽开始
+  var onDragStart = React.useCallback(function (_ref) {
+    var action = _ref.action,
+      row = _ref.row;
+    // 检查是否有多选
+    if (selectedActionIds.length <= 1) {
+      console.log('useRowDrag: 单选拖拽，不进行多选处理');
+      return;
+    }
+    // 获取当前选中的元素
+    var selectedEls = getSelectedActionEls();
+    if (selectedEls.length <= 1) {
+      console.log('useRowDrag: DOM元素不足，跳过');
+      return;
+    }
+    // 记录每个选中元素的初始位置
+    var initialElementPositions = new Map();
+    selectedEls.forEach(function (el) {
+      // 获取 action id
+      var actionId = el.getAttribute('data-action-id');
+      if (!actionId) return;
+      // 获取当前 transform
+      var style = window.getComputedStyle(el);
+      var transform = style.transform;
+      var x = 0,
+        y = 0;
+      if (transform && transform !== 'none') {
+        // 解析 matrix
+        var matrix = transform.match(/matrix\(([^)]+)\)/);
+        if (matrix) {
+          var values = matrix[1].split(', ');
+          x = parseFloat(values[4]) || 0;
+          y = parseFloat(values[5]) || 0;
+        }
+      }
+      // 存储初始位置
+      initialElementPositions.set(actionId, {
+        x: x,
+        y: y
+      });
+      // 初始化 data 属性
+      el.setAttribute('data-x', x.toString());
+      el.setAttribute('data-y', y.toString());
+      console.log('useRowDrag: 初始化元素位置', {
+        actionId: actionId,
+        x: x,
+        y: y
+      });
+    });
+    // 记录初始位置信息（用于计算时间偏移）
+    var initialPositions = new Map();
+    editorData.forEach(function (r) {
+      r.actions.forEach(function (a) {
+        if (selectedActionIds.includes(a.id)) {
+          var transform = parserTimeToTransform({
+            start: a.start,
+            end: a.end
+          }, {
+            startLeft: startLeft,
+            scale: scale,
+            scaleWidth: scaleWidth
+          });
+          initialPositions.set(a.id, {
+            rowId: r.id,
+            start: a.start,
+            end: a.end,
+            left: transform.left,
+            width: transform.width
+          });
+        }
+      });
+    });
+    // 记录初始位置
+    multiDragState.current = {
+      isMultiDrag: true,
+      initialPositions: initialPositions,
+      dragOffset: {
+        dx: 0,
+        dy: 0
+      },
+      isDraggingSelection: true,
+      primaryActionId: action.id,
+      offsetX: 0,
+      offsetY: 0,
+      initialElementPositions: initialElementPositions,
+      start: action.start,
+      end: action.end
+    };
+    console.log('useRowDrag: 开始多选拖拽', {
+      actionId: action.id,
+      selectedCount: selectedActionIds.length,
+      elementCount: selectedEls.length
+    });
+  }, [selectedActionIds, editorData, getSelectedActionEls, scale, scaleWidth, startLeft]);
+  // 拖拽移动
+  var onDragMove = React.useCallback(function (params) {
+    var actionId = params.actionId,
+      dx = params.dx,
+      dy = params.dy;
+    var state = multiDragState.current;
+    if (!state.isMultiDrag || !state.isDraggingSelection || !state.initialElementPositions) {
+      return;
+    }
+    // 获取当前选中的元素
+    var selectedEls = getSelectedActionEls();
+    if (selectedEls.length === 0) return;
+    // 更新偏移量
+    state.offsetX = (state.offsetX || 0) + dx;
+    state.offsetY = (state.offsetY || 0) + dy;
+    // 遍历所有选中的元素，同步移动
+    selectedEls.forEach(function (el) {
+      var elActionId = el.getAttribute('data-action-id');
+      if (!elActionId || elActionId === actionId) return;
+      // 获取元素初始位置
+      var initialPos = state.initialElementPositions.get(elActionId);
+      if (!initialPos) return;
+      // 计算新位置 = 初始位置 + 总偏移量
+      var newX = initialPos.x + state.offsetX;
+      var newY = initialPos.y + state.offsetY;
+      // 更新元素位置
+      el.style.transform = "translate(".concat(newX, "px, ").concat(newY, "px)");
+      // 存储当前位置数据
+      el.setAttribute('data-x', newX.toString());
+      el.setAttribute('data-y', newY.toString());
+    });
+    console.log('useRowDrag: 拖拽移动', {
+      actionId: actionId,
+      dx: dx,
+      dy: dy,
+      offsetX: state.offsetX,
+      offsetY: state.offsetY,
+      elementCount: selectedEls.length
+    });
+  }, [getSelectedActionEls]);
+  // 拖拽结束
+  var onDragEnd = React.useCallback(function (params) {
+    var state = multiDragState.current;
+    var _ref2 = params || {},
+      up = _ref2.up;
+    console.log('useRowDrag: 拖拽结束', params);
+    // 清理 DOM 元素上的 data 属性
+    var selectedEls = getSelectedActionEls();
+    selectedEls.forEach(function (el) {
+      el.removeAttribute('data-x');
+      el.removeAttribute('data-y');
+      // 清除 transform 样式
+      el.style.transform = '';
+    });
+    if (!state.isMultiDrag || !params || (params === null || params === void 0 ? void 0 : params.actionId) !== state.primaryActionId) {
+      // 清理状态
+      multiDragState.current = {
+        isMultiDrag: false,
+        primaryActionId: null,
+        initialPositions: new Map(),
+        dragOffset: {
+          dx: 0,
+          dy: 0
+        },
+        startCursor: null,
+        isDraggingSelection: false,
+        start: 0,
+        end: 0
+      };
+      setPreviewPositions(new Map());
+      return;
+    }
+    var actionId = params.actionId,
+      left = params.left,
+      width = params.width,
+      height = params.height,
+      _params$dx = params.dx,
+      _params$dy = params.dy;
+    var top = params.top;
+    var initialPositions = state.initialPositions,
+      primaryActionId = state.primaryActionId,
+      _state$offsetX = state.offsetX,
+      offsetX = _state$offsetX === void 0 ? 0 : _state$offsetX,
+      _state$offsetY = state.offsetY,
+      offsetY = _state$offsetY === void 0 ? 0 : _state$offsetY;
+    if (up === 0) {
+      top = 0;
+    } else if (up === 1) {
+      top = -20;
+    } else if (up === -1) {
+      top = 20;
+    }
+    // 如果没有初始位置数据，说明不是有效的多选拖拽
+    if (!setEditorData || initialPositions.size === 0) {
+      // 清理状态
+      multiDragState.current = {
+        isMultiDrag: false,
+        primaryActionId: null,
+        initialPositions: new Map(),
+        dragOffset: {
+          dx: 0,
+          dy: 0
+        },
+        startCursor: null,
+        isDraggingSelection: false,
+        start: 0,
+        end: 0
+      };
+      setPreviewPositions(new Map());
+      return;
+    }
+    // 计算主 action 的最终时间
+    var primaryFinalTime = parserTransformToTime({
+      left: left,
+      width: width
+    }, {
+      startLeft: startLeft,
+      scale: scale,
+      scaleWidth: scaleWidth
+    });
+    // 计算主 action 的偏移量（时间）
+    var primaryInitial = initialPositions.get(primaryActionId);
+    if (!primaryInitial) {
+      multiDragState.current = {
+        isMultiDrag: false,
+        primaryActionId: null,
+        initialPositions: new Map(),
+        dragOffset: {
+          dx: 0,
+          dy: 0
+        },
+        startCursor: null,
+        isDraggingSelection: false,
+        start: 0,
+        end: 0
+      };
+      setPreviewPositions(new Map());
+      return;
+    }
+    var timeOffset = primaryFinalTime.start - primaryInitial.start;
+    console.log('useRowDrag: 拖拽结束', {
+      actionId: actionId,
+      primaryInitialStart: primaryInitial.start,
+      primaryFinalStart: primaryFinalTime.start,
+      timeOffset: timeOffset,
+      selectedCount: initialPositions.size,
+      offsetX: offsetX,
+      offsetY: offsetY
+    });
+    // 如果时间偏移太小，不更新数据
+    if (Math.abs(timeOffset) < 0.001) {
+      console.log('useRowDrag: 偏移太小，跳过更新');
+      multiDragState.current = {
+        isMultiDrag: false,
+        primaryActionId: null,
+        initialPositions: new Map(),
+        dragOffset: {
+          dx: 0,
+          dy: 0
+        },
+        startCursor: null,
+        isDraggingSelection: false,
+        start: 0,
+        end: 0
+      };
+      setPreviewPositions(new Map());
+      return;
+    }
+    // ------------------------------------------------------------
+    var _multiDragState$curre = multiDragState.current,
+      start = _multiDragState$curre.start,
+      end = _multiDragState$curre.end,
+      isMultiDrag = _multiDragState$curre.isMultiDrag;
+    // 如果是多选拖拽，处理所有选中的 actions
+    if (isMultiDrag) {
+      // 计算当前 action 的偏移量
+      var currentStart = parserTransformToTime({
+        left: left,
+        width: width
+      }, {
+        scaleWidth: scaleWidth,
+        scale: scale,
+        startLeft: startLeft
+      }).start;
+      var deltaTime = currentStart - start;
+      console.log('Multi-drag ended, deltaTime:', deltaTime);
+      // 更新所有选中的 actions 的最终位置
+      var updatedData = editorData.map(function (r) {
+        return _objectSpread2(_objectSpread2({}, r), {}, {
+          actions: r.actions.map(function (a) {
+            if (selectedActionIds.includes(a.id) && primaryActionId !== a.id) {
+              var newStart = a.start + deltaTime;
+              var newEnd = a.end + deltaTime;
+              // 计算 left, width, top, height
+              var _parserTimeToTransfor = parserTimeToTransform({
+                  start: newStart,
+                  end: newEnd
+                }, {
+                  scaleWidth: scaleWidth,
+                  scale: scale,
+                  startLeft: startLeft
+                }),
+                _left = _parserTimeToTransfor.left,
+                _width = _parserTimeToTransfor.width;
+              setTimeout(function () {
+                console.log('useRowDrag 1222: 拖拽结束', {
+                  left: _left,
+                  width: _width,
+                  top: top,
+                  height: height,
+                  id: a.id
+                });
+                window.dispatchEvent(new CustomEvent('action-move-end', {
+                  detail: {
+                    left: _left,
+                    width: _width,
+                    top: top,
+                    height: height,
+                    id: a.id
+                  }
+                }));
+              }, 0);
+              return _objectSpread2(_objectSpread2({}, a), {}, {
+                start: newStart,
+                end: newEnd
+              });
+            }
+            return a;
+          })
+        });
+      });
+      // setEditorData([...updatedData]);
+      return;
+    }
+    // ------------------------------------------------------------
+    // 清理状态
+    multiDragState.current = {
+      isMultiDrag: false,
+      primaryActionId: null,
+      initialPositions: new Map(),
+      dragOffset: {
+        dx: 0,
+        dy: 0
+      },
+      startCursor: null,
+      isDraggingSelection: false,
+      start: 0,
+      end: 0
+    };
+    setPreviewPositions(new Map());
+    console.log('useRowDrag: 多选拖拽完成', {
+      updatedCount: initialPositions.size
+    });
+  }, [editorData, setEditorData, scale, scaleWidth, startLeft, getSelectedActionEls, selectedActionIds]);
+  // 获取指定 action 的预览位置
+  var getPreviewPosition = React.useCallback(function (actionId) {
+    return previewPositions.get(actionId) || null;
+  }, [previewPositions]);
+  // 检查是否是多选拖拽模式
+  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
+  };
+};
+
 // 获取音频时长
 var getAudioDuration = function getAudioDuration(url) {
   return new Promise(function (resolve) {
     var sound = new Howl({
-      src: [url]
+      src: url
     });
     sound.on('load', function () {
       resolve(sound.duration());
       sound.unload();
     });
+    setTimeout(function () {
+      resolve(2); // 加载失败时返回默认时长2秒
+      sound.unload();
+    }, 6 * 1000); // 60秒超时 60 * 1000
     sound.on('loaderror', function () {
       resolve(2); // 加载失败时返回默认时长2秒
       sound.unload();
@@ -3022,6 +3653,7 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleUploadChange = function handleUploadChange(row) {
     return /*#__PURE__*/function () {
       var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(info) {
+        var _info$file$response;
         var uid, duration, newAction;
         return _regenerator().w(function (_context) {
           while (1) switch (_context.n) {
@@ -3039,7 +3671,7 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
             case 2:
               duration = _context.v;
               newAction = {
-                id: uid,
+                id: ((_info$file$response = info.file.response) === null || _info$file$response === void 0 ? void 0 : _info$file$response.id) || uid,
                 effectId: 'custom_video_effect',
                 flexible: true,
                 url: info.file.response.url,
@@ -3076,6 +3708,63 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     dropPreview = _useState4[0],
     setDropPreview = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dragIndicator = _useState6[0],
+    setDragIndicator = _useState6[1];
+  // 框选功能
+  var _useRowSelection = useRowSelection({
+      editorData: editorData,
+      rowHeight: _rowHeight,
+      scrollTop: scrollTop,
+      scrollLeft: scrollLeft,
+      onSelectionChange: function onSelectionChange(selectedActionIds) {
+        // 更新 editorData 中每个 action 的选中状态
+        var updatedData = editorData.map(function (row) {
+          return _objectSpread2(_objectSpread2({}, row), {}, {
+            actions: row.actions.map(function (action) {
+              return _objectSpread2(_objectSpread2({}, action), {}, {
+                selected: selectedActionIds.includes(action.id)
+              });
+            })
+          });
+        });
+        setEditorData(updatedData);
+      },
+      disabled: false,
+      containerRef: editAreaRef
+    }),
+    DragSelection = _useRowSelection.DragSelection,
+    selectedActionIds = _useRowSelection.selectedActionIds;
+  var _useRowDrag = useRowDrag({
+      selectedActionIds: selectedActionIds,
+      editorData: editorData,
+      containerRef: editAreaRef,
+      scale: scale,
+      scaleWidth: scaleWidth,
+      startLeft: startLeft,
+      setEditorData: setEditorData,
+      allowCreateTrack: allowCreateTrack,
+      rowHeight: _rowHeight
+    }),
+    onDragStart = _useRowDrag.onDragStart,
+    onDragMove = _useRowDrag.onDragMove,
+    onDragEnd = _useRowDrag.onDragEnd;
+  // 监听拖拽位置指示器事件
+  useEffect(function () {
+    var handleDragMove = function handleDragMove(e) {
+      setDragIndicator(e.detail);
+    };
+    var handleDragEnd = function handleDragEnd() {
+      setDragIndicator(null);
+    };
+    window.addEventListener('row-drag-move', handleDragMove);
+    window.addEventListener('row-drag-end', handleDragEnd);
+    return function () {
+      window.removeEventListener('row-drag-move', handleDragMove);
+      window.removeEventListener('row-drag-end', handleDragEnd);
+    };
+  }, []);
   // 处理拖拽上传事件
   var handleDrop = function handleDrop(e) {
     e.preventDefault();
@@ -3160,8 +3849,13 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
       allowCreateTrack: allowCreateTrack,
       setDropPreview: setDropPreview,
       containerRef: containerRef,
+      selectedActionIds: selectedActionIds,
       onActionMoveStart: function onActionMoveStart(data) {
         handleInitDragLine(data);
+        onDragStart({
+          action: data.action,
+          row: data.row
+        });
         return _onActionMoveStart && _onActionMoveStart(data);
       },
       onActionResizeStart: function onActionResizeStart(data) {
@@ -3170,6 +3864,20 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
       },
       onActionMoving: function onActionMoving(data) {
         handleUpdateDragLine(data);
+        // 传递拖拽参数给多选拖拽处理
+        onDragMove({
+          actionId: data.action.id,
+          left: data.left,
+          width: data.width,
+          top: data.top || 0,
+          height: data.height || 0,
+          dx: (data.left || 0) - (data.lastLeft || 0),
+          dy: (data.top || 0) - (data.lastTop || 0),
+          lastLeft: data.lastLeft,
+          lastWidth: data.lastWidth,
+          lastTop: data.lastTop,
+          lastHeight: data.lastHeight
+        });
         return _onActionMoving && _onActionMoving(data);
       },
       onActionResizing: function onActionResizing(data) {
@@ -3182,13 +3890,22 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
       },
       onActionMoveEnd: function onActionMoveEnd(data) {
         disposeDragLine();
+        // 传递拖拽结束参数给多选拖拽处理
+        onDragEnd({
+          actionId: data.action.id,
+          left: data.left || 0,
+          width: data.width || 0,
+          top: data.top || 0,
+          height: data.height || 0,
+          up: data.up || 0
+        });
         return _onActionMoveEnd && _onActionMoveEnd(data);
       }
     }));
-    if (canUpload || (row === null || row === void 0 ? void 0 : row.canUpload)) {
+    if (!!row && (canUpload || (row === null || row === void 0 ? void 0 : row.canUpload))) {
       return /*#__PURE__*/React.createElement(Upload, {
         ref: uploadRef,
-        key: key,
+        key: key + 'upload',
         style: _objectSpread2(_objectSpread2({
           width: '100%',
           display: 'block'
@@ -3224,7 +3941,9 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: prefix('edit-area') + " ".concat((className || '').replace('timeline-editor', '') || ''),
     style: {
       height: isMulti ? _totalHeight : 'unset',
-      maxHeight: isMulti ? _totalHeight : 'unset'
+      maxHeight: isMulti ? _totalHeight : 'unset',
+      width: isMulti ? Math.max(scaleCount * scaleWidth + startLeft, 0) : 'unset',
+      minWidth: isMulti ? '100%' : 'unset'
     }
   }, /*#__PURE__*/React.createElement(AutoSizer, {
     style: {
@@ -3271,9 +3990,30 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
         _onScroll(param);
       }
     });
-  }), dragLine && /*#__PURE__*/React.createElement(DragLines, _objectSpread2({
+  }), /*#__PURE__*/React.createElement(DragSelection, null), dragLine && /*#__PURE__*/React.createElement(DragLines, _objectSpread2({
     scrollLeft: scrollLeft
-  }, dragLineData)), dropPreview && function () {
+  }, dragLineData)), dragIndicator && function () {
+    // 计算拖拽位置指示器的位置
+    var top = 0;
+    var targetIndex = dragIndicator.targetIndex;
+    for (var i = 0; i < Math.min(targetIndex, editorData.length); i++) {
+      top += editorData[i].rowHeight || _rowHeight;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: top - scrollTop + 16,
+        height: '3px',
+        backgroundColor: '#1890ff',
+        boxShadow: '0 0 8px rgba(24, 144, 255, 0.6)',
+        zIndex: 1001,
+        pointerEvents: 'none',
+        transition: 'top 0.05s ease-out'
+      }
+    });
+  }(), dropPreview && function () {
     // 计算预览指示器的位置
     var top = 0;
     for (var i = 0; i < editorData.length; i++) {
@@ -3667,7 +4407,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
         key: key,
         isMulti: areaCount > 1
       }, checkedProps), {}, {
-        className: index !== 0 ? "no-flex ".concat(key, " ").concat(index) : "overflow-hidden ".concat(key, " ").concat(index),
+        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;