sense-react-timeline-editor 1.0.9 → 1.0.11

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

@@ -4,6 +4,7 @@ import { TimelineRow } from '../../interface/action';
 import { CommonProp } from '../../interface/common_prop';
 import './edit_area.less';
 import { type UploadProps } from 'antd/es';
+import { ITimelineEngine } from '@/engine/engine';
 export declare type EditAreaProps = CommonProp & {
     className?: string;
     isMulti?: boolean;
@@ -25,12 +26,13 @@ export declare type EditAreaProps = CommonProp & {
     allowCreateTrack?: boolean;
     /** time-editor-container的ref引用 */
     containerRef?: React.MutableRefObject<HTMLDivElement>;
+    engineRef?: React.MutableRefObject<ITimelineEngine>;
 };
 /** edit area ref数据 */
 export interface EditAreaState {
     domRef: React.MutableRefObject<HTMLDivElement>;
 }
-export declare const EditArea: React.ForwardRefExoticComponent<CommonProp & {
+export declare const EditArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonProp & {
     className?: string;
     isMulti?: boolean;
     /** 距离左侧滚动距离 */
@@ -51,4 +53,5 @@ export declare const EditArea: React.ForwardRefExoticComponent<CommonProp & {
     allowCreateTrack?: boolean;
     /** time-editor-container的ref引用 */
     containerRef?: React.MutableRefObject<HTMLDivElement>;
-} & React.RefAttributes<EditAreaState>>;
+    engineRef?: React.MutableRefObject<ITimelineEngine>;
+} & React.RefAttributes<EditAreaState>>>;

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

@@ -14,6 +14,7 @@ export interface UseRowDragOptions {
     setEditorData?: (data: TimelineRow[]) => void;
     allowCreateTrack?: boolean;
     rowHeight?: number;
+    onUpdateEditorData?: (editorData: TimelineRow, actions: TimelineAction[]) => void;
 }
 export interface MultiDragState {
     /** 是否正在多选拖拽 */

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

@@ -13,4 +13,7 @@ export declare const useRowSelection: (options: UseRowSelectionOptions) => {
     DragSelection: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     selectedActionIds: string[];
     clearSelection: () => void;
+    onClickOutside: (target: HTMLElement) => void;
+    onCtrlClick: (actionId: string, event: MouseEvent) => void;
+    setSelectedActionIds: import("react").Dispatch<import("react").SetStateAction<Set<string>>>;
 };

package/dist/components/row_rnd/row_rnd_interface.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { TimelineAction } from "@/interface/action";
 declare type EventData = {
     lastLeft: number;
     left: number;
@@ -11,7 +12,10 @@ declare type EventData = {
 };
 export declare type RndDragStartCallback = () => void;
 export declare type RndDragCallback = (data: EventData, scrollDelta?: number) => boolean | void;
-export declare type RndDragEndCallback = (data: Pick<EventData, 'left' | 'width' | 'top' | 'height'>) => void;
+export declare type RndDragEndCallback = (data: Pick<EventData, 'left' | 'width' | 'top' | 'height'> & {
+    isMultiDrag?: boolean;
+    fn?: (item: TimelineAction) => void;
+}) => void;
 export declare type Direction = "left" | "right";
 export declare type RndResizeStartCallback = (dir: Direction) => void;
 export declare type RndResizeCallback = (dir: Direction, data: EventData) => boolean | void;

package/dist/engine/events.d.ts

@@ -74,4 +74,13 @@ export interface EventTypes {
     ended: {
         engine: TimelineEngine;
     };
+    /**
+     * 鼠标点击事件
+     * @type {{ target: HTMLElement, engine: TimelineEngine }}
+     * @memberof EventTypes
+     */
+    mousedown: {
+        target: HTMLElement;
+        evt: MouseEvent;
+    };
 }

package/dist/index.esm.js

@@ -400,7 +400,8 @@ var Events = /*#__PURE__*/_createClass(function Events() {
     setActiveActionIds: [],
     play: [],
     paused: [],
-    ended: []
+    ended: [],
+    mousedown: []
   }, handlers);
 });
 
@@ -2099,7 +2100,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.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";
+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  left: -100px;\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";
@@ -2142,7 +2143,9 @@ var EditAction = function EditAction(_ref) {
     _ref$allowCreateTrack = _ref.allowCreateTrack,
     allowCreateTrack = _ref$allowCreateTrack === void 0 ? true : _ref$allowCreateTrack,
     setDropPreview = _ref.setDropPreview,
-    containerRef = _ref.containerRef;
+    containerRef = _ref.containerRef,
+    selectedActionIds = _ref.selectedActionIds;
+  console.log('action: selectedActionIds = ', selectedActionIds);
   var rowRnd = useRef();
   var isDragWhenClick = useRef(false);
   var originalPosition = useRef({
@@ -2311,7 +2314,9 @@ var EditAction = function EditAction(_ref) {
     var left = _ref3.left,
       width = _ref3.width,
       top = _ref3.top,
-      height = _ref3.height;
+      height = _ref3.height,
+      isMultiDrag = _ref3.isMultiDrag,
+      fnCallback = _ref3.fn;
     console.log('handleDragEnd: ', left, width, top, height);
     // 清理预览指示器
     if (setDropPreview) {
@@ -2627,6 +2632,7 @@ var EditAction = function EditAction(_ref) {
     if (targetRowItem.id !== row.id) {
       up = top > 0 ? 1 : -1;
     }
+    fnCallback === null || fnCallback === void 0 ? void 0 : fnCallback(actionItem);
     // 执行回调
     if (onActionMoveEnd) onActionMoveEnd({
       action: actionItem,
@@ -2638,9 +2644,10 @@ var EditAction = function EditAction(_ref) {
       width: width,
       top: top,
       height: height,
-      up: up
+      up: up,
+      isMultiDrag: (selectedActionIds === null || selectedActionIds === void 0 ? void 0 : selectedActionIds.length) > 1 || isMultiDrag
     });
-  }, [action, allowCreateTrack, editorData, id, onActionMoveEnd, parserTimeToTransform, parserTransformToTime, row, scale, scaleWidth, setDropPreview, setEditorData, startLeft]);
+  }, [action, allowCreateTrack, editorData, id, onActionMoveEnd, parserTimeToTransform, parserTransformToTime, row, scale, scaleWidth, setDropPreview, setEditorData, startLeft, selectedActionIds]);
   // 防抖版本的 handleDragEnd
   var _useDebounceFn = useDebounceFn(handleDragEndBase, {
       wait: 300
@@ -2746,14 +2753,16 @@ var EditAction = function EditAction(_ref) {
         width = _ref6.width,
         top = _ref6.top,
         height = _ref6.height,
-        id = _ref6.id;
-      console.log('handleActionMoveEnd: ', left, width, top, height, id);
+        id = _ref6.id,
+        fn = _ref6.fn;
+      console.log('handleActionMoveEnd: ', left, width, top, height, id, fn);
       if (id === action.id) {
         handleDragEnd({
           left: left,
           width: width,
           top: top,
-          height: height
+          height: height,
+          fn: fn
         });
       }
     };
@@ -2796,6 +2805,7 @@ var EditAction = function EditAction(_ref) {
     deltaScrollTop: handleDeltaScrollTop
   }, /*#__PURE__*/React.createElement("div", {
     "data-action-id": action.id,
+    "data-action-disabled": action.is_disabled ? 1 : 0,
     onMouseDown: function onMouseDown() {
       isDragWhenClick.current = false;
     },
@@ -2817,6 +2827,19 @@ var EditAction = function EditAction(_ref) {
           time: time
         });
       }
+      // 处理 Ctrl+ 点击选择
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        var event = new CustomEvent('ctrl-click-action', {
+          detail: {
+            actionId: action.id,
+            row: row,
+            originalEvent: e.nativeEvent
+          }
+        });
+        window.dispatchEvent(event);
+      }
     },
     onDoubleClick: function onDoubleClick(e) {
       if (onDoubleClickAction) {
@@ -3070,6 +3093,7 @@ var useRowSelection = function useRowSelection(options) {
       // 检查框选区域是否与 action 相交
       row.actions.forEach(function (action) {
         var _containerRef$current3;
+        if (action.is_disabled) return;
         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();
@@ -3125,7 +3149,7 @@ var useRowSelection = function useRowSelection(options) {
         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'))) {
+        if (((_element$closest = element.closest) === null || _element$closest === void 0 ? void 0 : _element$closest.call(element, '.timeline-editor-action[data-action-disabled="0"]')) || ((_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;
@@ -3147,38 +3171,48 @@ var useRowSelection = function useRowSelection(options) {
     setSelectedActionIds(new Set());
     _onSelectionChange([]);
   }, [_onSelectionChange]);
+  // 处理 Ctrl+ 点击选择
+  var handleCtrlClick = useCallback(function (actionId, event) {
+    if (disabled) return;
+    var newSelectedActionIds = new Set(selectedActionIds);
+    if (newSelectedActionIds.has(actionId)) {
+      // 如果已选中，则取消选中
+      newSelectedActionIds.delete(actionId);
+    } else {
+      // 如果未选中，则添加选中
+      newSelectedActionIds.add(actionId);
+    }
+    setSelectedActionIds(newSelectedActionIds);
+    _onSelectionChange(Array.from(newSelectedActionIds));
+  }, [disabled, selectedActionIds, _onSelectionChange]);
   // 点击空白区域取消选择
-  useEffect(function () {
+  var handleClickOutside = useCallback(function (target) {
     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);
-    };
+    // 如果点击的不是选中的 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')) {
+      clearSelection();
+    }
   }, [disabled, clearSelection]);
   // 监听 Escape 键取消选择
-  useEffect(function () {
+  var handleKeyDown = useCallback(function (e) {
     if (disabled) return;
-    var handleKeyDown = function handleKeyDown(e) {
-      if (e.key === 'Escape' && selectedActionIds.size > 0) {
-        clearSelection();
-      }
-    };
+    if (e.key === 'Escape' && selectedActionIds.size > 0) {
+      clearSelection();
+    }
+  }, [disabled, selectedActionIds.size, clearSelection]);
+  useEffect(function () {
     document.addEventListener('keydown', handleKeyDown);
     return function () {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [disabled, selectedActionIds.size, clearSelection]);
+  }, [handleKeyDown]);
   return {
     DragSelection: DragSelection,
     selectedActionIds: Array.from(selectedActionIds),
-    clearSelection: clearSelection
+    clearSelection: clearSelection,
+    onClickOutside: handleClickOutside,
+    onCtrlClick: handleCtrlClick,
+    setSelectedActionIds: setSelectedActionIds
   };
 };
 
@@ -3192,7 +3226,8 @@ var useRowDrag = function useRowDrag(options) {
     scaleWidth = _options$scaleWidth === void 0 ? 160 : _options$scaleWidth,
     _options$startLeft = options.startLeft,
     startLeft = _options$startLeft === void 0 ? 20 : _options$startLeft,
-    setEditorData = options.setEditorData;
+    setEditorData = options.setEditorData,
+    onUpdateEditorData = options.onUpdateEditorData;
   // 多选拖拽状态
   var multiDragState = React.useRef({
     isMultiDrag: false,
@@ -3500,8 +3535,9 @@ var useRowDrag = function useRowDrag(options) {
       }).start;
       var deltaTime = currentStart - start;
       console.log('Multi-drag ended, deltaTime:', deltaTime);
+      var updatedData = [];
       // 更新所有选中的 actions 的最终位置
-      var updatedData = editorData.map(function (r) {
+      editorData.map(function (r) {
         return _objectSpread2(_objectSpread2({}, r), {}, {
           actions: r.actions.map(function (a) {
             if (selectedActionIds.includes(a.id) && primaryActionId !== a.id) {
@@ -3532,7 +3568,13 @@ var useRowDrag = function useRowDrag(options) {
                     width: _width,
                     top: top,
                     height: height,
-                    id: a.id
+                    id: a.id,
+                    fn: function fn(item) {
+                      updatedData.push(item);
+                      if (updatedData.length === selectedActionIds.length) {
+                        onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(r, updatedData);
+                      }
+                    }
                   }
                 }));
               }, 0);
@@ -3541,6 +3583,9 @@ var useRowDrag = function useRowDrag(options) {
                 end: newEnd
               });
             }
+            if (a.id === primaryActionId) {
+              updatedData.push(a);
+            }
             return a;
           })
         });
@@ -3611,7 +3656,7 @@ var getAudioDuration = function getAudioDuration(url) {
     });
   });
 };
-var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
     _props$isMulti = props.isMulti,
     isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
@@ -3642,7 +3687,8 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setEditorData = props.setEditorData,
     _props$allowCreateTra = props.allowCreateTrack,
     allowCreateTrack = _props$allowCreateTra === void 0 ? true : _props$allowCreateTra,
-    containerRef = props.containerRef;
+    containerRef = props.containerRef,
+    engineRef = props.engineRef;
   // 支持mp3\wav格式上传
   var onBeforeUpload = function onBeforeUpload(file) {
     if (file.type !== 'audio/mp3' && file.type !== 'audio/wav') {
@@ -3677,7 +3723,8 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
                 flexible: true,
                 url: info.file.response.url,
                 start: currentMouseTime,
-                end: currentMouseTime + duration
+                end: currentMouseTime + duration,
+                isUpload: true
               };
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [newAction]);
             case 3:
@@ -3714,30 +3761,34 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
     dragIndicator = _useState6[0],
     setDragIndicator = _useState6[1];
   // 框选功能
+  var handleSelectionChange = useCallback(function (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);
+    onMutiSelectChange === null || onMutiSelectChange === void 0 ? void 0 : onMutiSelectChange(selectedActionIds);
+  }, [editorData, setEditorData, onMutiSelectChange]);
   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);
-        onMutiSelectChange === null || onMutiSelectChange === void 0 ? void 0 : onMutiSelectChange(selectedActionIds);
-      },
+      onSelectionChange: handleSelectionChange,
       disabled: false,
       containerRef: editAreaRef
     }),
     DragSelection = _useRowSelection.DragSelection,
-    selectedActionIds = _useRowSelection.selectedActionIds;
+    selectedActionIds = _useRowSelection.selectedActionIds,
+    onClickOutside = _useRowSelection.onClickOutside,
+    onCtrlClick = _useRowSelection.onCtrlClick,
+    setSelectedActionIds = _useRowSelection.setSelectedActionIds;
   var _useRowDrag = useRowDrag({
       selectedActionIds: selectedActionIds,
       editorData: editorData,
@@ -3747,7 +3798,8 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
       startLeft: startLeft,
       setEditorData: setEditorData,
       allowCreateTrack: allowCreateTrack,
-      rowHeight: _rowHeight
+      rowHeight: _rowHeight,
+      onUpdateEditorData: onUpdateEditorData
     }),
     onDragStart = _useRowDrag.onDragStart,
     onDragMove = _useRowDrag.onDragMove,
@@ -3832,6 +3884,45 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
       });
     }
   };
+  useEffect(function () {
+    if (!(engineRef === null || engineRef === void 0 ? void 0 : engineRef.current)) return;
+    engineRef.current.on('mousedown', function (data) {
+      console.log('mousedown', data);
+      onClickOutside(data.target);
+    });
+    return function () {
+      var _engineRef$current;
+      engineRef === null || engineRef === void 0 ? void 0 : (_engineRef$current = engineRef.current) === null || _engineRef$current === void 0 ? void 0 : _engineRef$current.off('mousedown');
+    };
+  }, [engineRef, onClickOutside]);
+  // 监听 Ctrl+ 点击事件
+  useEffect(function () {
+    var handleCtrlClickAction = function handleCtrlClickAction(e) {
+      var _e$detail = e.detail,
+        actionId = _e$detail.actionId,
+        row = _e$detail.row;
+      console.log('ctrl-click-action', row, ', editorData = ', editorData);
+      setSelectedActionIds(function (ids) {
+        var newIds = new Set();
+        ids.forEach(function (id) {
+          editorData.forEach(function (item) {
+            item.actions.forEach(function (action) {
+              if (item.type === row.type && action.id === id) {
+                newIds.add(id);
+              }
+            });
+          });
+        });
+        newIds.add(actionId);
+        handleSelectionChange(Array.from(newIds));
+        return new Set(newIds);
+      });
+    };
+    window.addEventListener('ctrl-click-action', handleCtrlClickAction);
+    return function () {
+      window.removeEventListener('ctrl-click-action', handleCtrlClickAction);
+    };
+  }, [onCtrlClick, editorData, handleSelectionChange]);
   /** 获取每个cell渲染内容 */
   var cellRenderer = function cellRenderer(_ref2) {
     var rowIndex = _ref2.rowIndex,
@@ -3901,10 +3992,14 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
           height: data.height || 0,
           up: data.up || 0
         });
-        return _onActionMoveEnd && _onActionMoveEnd(data);
+        if (!data.isMultiDrag) {
+          return _onActionMoveEnd && _onActionMoveEnd(data);
+        }
+        return;
       }
     }));
     if (!!row && (canUpload || (row === null || row === void 0 ? void 0 : row.canUpload))) {
+      var _row$actions;
       return /*#__PURE__*/React.createElement(Upload, {
         ref: uploadRef,
         key: key + 'upload',
@@ -3917,7 +4012,9 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
         beforeUpload: onBeforeUpload,
         onChange: handleUploadChange(row),
         showUploadList: false,
-        openFileDialogOnClick: false,
+        openFileDialogOnClick: ((_row$actions = row.actions) === null || _row$actions === void 0 ? void 0 : _row$actions.filter(function (item) {
+          return item.effectId === 'effect2';
+        }).length) > 0,
         customRequest: customRequest,
         onDrop: handleDrop,
         type: "drag"
@@ -3958,7 +4055,7 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var totalHeight = 0;
     // 高度列表
     var heights = editorData.map(function (row) {
-      var itemHeight = row.rowHeight || _rowHeight;
+      var itemHeight = (row.rowHeight || _rowHeight) + 2;
       totalHeight += itemHeight;
       return itemHeight;
     });
@@ -4042,6 +4139,7 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
   }());
 });
+var EditArea = /*#__PURE__*/React.memo(EditAreaO);
 
 var css_248z$5 = ".timeline-editor {\n  height: 600px;\n  width: 600px;\n  min-height: 32px;\n  position: relative;\n  font-size: 12px;\n  font-family: \"PingFang SC\";\n  background-color: #191b1d;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.timeline-editor.light {\n  background-color: #fff;\n}\n";
 styleInject(css_248z$5);
@@ -4171,6 +4269,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var areaRef = useRef();
   var scrollSync = useRef();
   var containerRef = useRef();
+  console.log(' Timeline mounted = ', areaRef);
   // 编辑器数据
   var _useState = useState(data),
     _useState2 = _slicedToArray(_useState, 2),
@@ -4290,6 +4389,19 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
     engineRef.current.on('play', handlePlay);
     engineRef.current.on('paused', handlePaused);
   }, []);
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(e) {
+      var target = e.target;
+      engineRef.current.trigger('mousedown', {
+        target: target,
+        evt: e
+      });
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
   // ref 数据
   useImperativeHandle(ref, function () {
     return {
@@ -4375,6 +4487,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setScaleCount: handleSetScaleCount,
       scrollTop: scrollTop,
       scrollLeft: scrollLeft,
+      engineRef: engineRef,
       setEditorData: handleEditorDataChange,
       deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
       allowCreateTrack: allowCreateTrack,
@@ -4385,10 +4498,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }))) : null, areaCount > 1 ? /*#__PURE__*/React.createElement("div", {
       id: 'time-editor-container',
-      ref: containerRef,
-      style: {
-        overflow: 'auto'
-      }
+      ref: containerRef
     }, Object.keys(groupedData).map(function (key, index) {
       var handleGroupDataChange = function handleGroupDataChange(updatedData) {
         var mergedData = editorData.filter(function (item) {
@@ -4427,6 +4537,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
         allowCreateTrack: allowCreateTrack,
         containerRef: containerRef,
         onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
+        engineRef: engineRef,
         onScroll: function onScroll(params) {
           _onScroll(params);
           onScrollVertical && onScrollVertical(params);

package/dist/index.js

@@ -409,7 +409,8 @@ var Events = /*#__PURE__*/_createClass(function Events() {
     setActiveActionIds: [],
     play: [],
     paused: [],
-    ended: []
+    ended: [],
+    mousedown: []
   }, handlers);
 });
 
@@ -2108,7 +2109,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.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";
+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  left: -100px;\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";
@@ -2151,7 +2152,9 @@ var EditAction = function EditAction(_ref) {
     _ref$allowCreateTrack = _ref.allowCreateTrack,
     allowCreateTrack = _ref$allowCreateTrack === void 0 ? true : _ref$allowCreateTrack,
     setDropPreview = _ref.setDropPreview,
-    containerRef = _ref.containerRef;
+    containerRef = _ref.containerRef,
+    selectedActionIds = _ref.selectedActionIds;
+  console.log('action: selectedActionIds = ', selectedActionIds);
   var rowRnd = React.useRef();
   var isDragWhenClick = React.useRef(false);
   var originalPosition = React.useRef({
@@ -2320,7 +2323,9 @@ var EditAction = function EditAction(_ref) {
     var left = _ref3.left,
       width = _ref3.width,
       top = _ref3.top,
-      height = _ref3.height;
+      height = _ref3.height,
+      isMultiDrag = _ref3.isMultiDrag,
+      fnCallback = _ref3.fn;
     console.log('handleDragEnd: ', left, width, top, height);
     // 清理预览指示器
     if (setDropPreview) {
@@ -2636,6 +2641,7 @@ var EditAction = function EditAction(_ref) {
     if (targetRowItem.id !== row.id) {
       up = top > 0 ? 1 : -1;
     }
+    fnCallback === null || fnCallback === void 0 ? void 0 : fnCallback(actionItem);
     // 执行回调
     if (onActionMoveEnd) onActionMoveEnd({
       action: actionItem,
@@ -2647,9 +2653,10 @@ var EditAction = function EditAction(_ref) {
       width: width,
       top: top,
       height: height,
-      up: up
+      up: up,
+      isMultiDrag: (selectedActionIds === null || selectedActionIds === void 0 ? void 0 : selectedActionIds.length) > 1 || isMultiDrag
     });
-  }, [action, allowCreateTrack, editorData, id, onActionMoveEnd, parserTimeToTransform, parserTransformToTime, row, scale, scaleWidth, setDropPreview, setEditorData, startLeft]);
+  }, [action, allowCreateTrack, editorData, id, onActionMoveEnd, parserTimeToTransform, parserTransformToTime, row, scale, scaleWidth, setDropPreview, setEditorData, startLeft, selectedActionIds]);
   // 防抖版本的 handleDragEnd
   var _useDebounceFn = ahooks.useDebounceFn(handleDragEndBase, {
       wait: 300
@@ -2755,14 +2762,16 @@ var EditAction = function EditAction(_ref) {
         width = _ref6.width,
         top = _ref6.top,
         height = _ref6.height,
-        id = _ref6.id;
-      console.log('handleActionMoveEnd: ', left, width, top, height, id);
+        id = _ref6.id,
+        fn = _ref6.fn;
+      console.log('handleActionMoveEnd: ', left, width, top, height, id, fn);
       if (id === action.id) {
         handleDragEnd({
           left: left,
           width: width,
           top: top,
-          height: height
+          height: height,
+          fn: fn
         });
       }
     };
@@ -2805,6 +2814,7 @@ var EditAction = function EditAction(_ref) {
     deltaScrollTop: handleDeltaScrollTop
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     "data-action-id": action.id,
+    "data-action-disabled": action.is_disabled ? 1 : 0,
     onMouseDown: function onMouseDown() {
       isDragWhenClick.current = false;
     },
@@ -2826,6 +2836,19 @@ var EditAction = function EditAction(_ref) {
           time: time
         });
       }
+      // 处理 Ctrl+ 点击选择
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        var event = new CustomEvent('ctrl-click-action', {
+          detail: {
+            actionId: action.id,
+            row: row,
+            originalEvent: e.nativeEvent
+          }
+        });
+        window.dispatchEvent(event);
+      }
     },
     onDoubleClick: function onDoubleClick(e) {
       if (onDoubleClickAction) {
@@ -3079,6 +3102,7 @@ var useRowSelection = function useRowSelection(options) {
       // 检查框选区域是否与 action 相交
       row.actions.forEach(function (action) {
         var _containerRef$current3;
+        if (action.is_disabled) return;
         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();
@@ -3134,7 +3158,7 @@ var useRowSelection = function useRowSelection(options) {
         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'))) {
+        if (((_element$closest = element.closest) === null || _element$closest === void 0 ? void 0 : _element$closest.call(element, '.timeline-editor-action[data-action-disabled="0"]')) || ((_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;
@@ -3156,38 +3180,48 @@ var useRowSelection = function useRowSelection(options) {
     setSelectedActionIds(new Set());
     _onSelectionChange([]);
   }, [_onSelectionChange]);
+  // 处理 Ctrl+ 点击选择
+  var handleCtrlClick = React.useCallback(function (actionId, event) {
+    if (disabled) return;
+    var newSelectedActionIds = new Set(selectedActionIds);
+    if (newSelectedActionIds.has(actionId)) {
+      // 如果已选中，则取消选中
+      newSelectedActionIds.delete(actionId);
+    } else {
+      // 如果未选中，则添加选中
+      newSelectedActionIds.add(actionId);
+    }
+    setSelectedActionIds(newSelectedActionIds);
+    _onSelectionChange(Array.from(newSelectedActionIds));
+  }, [disabled, selectedActionIds, _onSelectionChange]);
   // 点击空白区域取消选择
-  React.useEffect(function () {
+  var handleClickOutside = React.useCallback(function (target) {
     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);
-    };
+    // 如果点击的不是选中的 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')) {
+      clearSelection();
+    }
   }, [disabled, clearSelection]);
   // 监听 Escape 键取消选择
-  React.useEffect(function () {
+  var handleKeyDown = React.useCallback(function (e) {
     if (disabled) return;
-    var handleKeyDown = function handleKeyDown(e) {
-      if (e.key === 'Escape' && selectedActionIds.size > 0) {
-        clearSelection();
-      }
-    };
+    if (e.key === 'Escape' && selectedActionIds.size > 0) {
+      clearSelection();
+    }
+  }, [disabled, selectedActionIds.size, clearSelection]);
+  React.useEffect(function () {
     document.addEventListener('keydown', handleKeyDown);
     return function () {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [disabled, selectedActionIds.size, clearSelection]);
+  }, [handleKeyDown]);
   return {
     DragSelection: DragSelection,
     selectedActionIds: Array.from(selectedActionIds),
-    clearSelection: clearSelection
+    clearSelection: clearSelection,
+    onClickOutside: handleClickOutside,
+    onCtrlClick: handleCtrlClick,
+    setSelectedActionIds: setSelectedActionIds
   };
 };
 
@@ -3201,7 +3235,8 @@ var useRowDrag = function useRowDrag(options) {
     scaleWidth = _options$scaleWidth === void 0 ? 160 : _options$scaleWidth,
     _options$startLeft = options.startLeft,
     startLeft = _options$startLeft === void 0 ? 20 : _options$startLeft,
-    setEditorData = options.setEditorData;
+    setEditorData = options.setEditorData,
+    onUpdateEditorData = options.onUpdateEditorData;
   // 多选拖拽状态
   var multiDragState = React__default['default'].useRef({
     isMultiDrag: false,
@@ -3509,8 +3544,9 @@ var useRowDrag = function useRowDrag(options) {
       }).start;
       var deltaTime = currentStart - start;
       console.log('Multi-drag ended, deltaTime:', deltaTime);
+      var updatedData = [];
       // 更新所有选中的 actions 的最终位置
-      var updatedData = editorData.map(function (r) {
+      editorData.map(function (r) {
         return _objectSpread2(_objectSpread2({}, r), {}, {
           actions: r.actions.map(function (a) {
             if (selectedActionIds.includes(a.id) && primaryActionId !== a.id) {
@@ -3541,7 +3577,13 @@ var useRowDrag = function useRowDrag(options) {
                     width: _width,
                     top: top,
                     height: height,
-                    id: a.id
+                    id: a.id,
+                    fn: function fn(item) {
+                      updatedData.push(item);
+                      if (updatedData.length === selectedActionIds.length) {
+                        onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(r, updatedData);
+                      }
+                    }
                   }
                 }));
               }, 0);
@@ -3550,6 +3592,9 @@ var useRowDrag = function useRowDrag(options) {
                 end: newEnd
               });
             }
+            if (a.id === primaryActionId) {
+              updatedData.push(a);
+            }
             return a;
           })
         });
@@ -3620,7 +3665,7 @@ var getAudioDuration = function getAudioDuration(url) {
     });
   });
 };
-var EditArea = /*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
+var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
   var className = props.className,
     _props$isMulti = props.isMulti,
     isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
@@ -3651,7 +3696,8 @@ var EditArea = /*#__PURE__*/React__default['default'].forwardRef(function (props
     setEditorData = props.setEditorData,
     _props$allowCreateTra = props.allowCreateTrack,
     allowCreateTrack = _props$allowCreateTra === void 0 ? true : _props$allowCreateTra,
-    containerRef = props.containerRef;
+    containerRef = props.containerRef,
+    engineRef = props.engineRef;
   // 支持mp3\wav格式上传
   var onBeforeUpload = function onBeforeUpload(file) {
     if (file.type !== 'audio/mp3' && file.type !== 'audio/wav') {
@@ -3686,7 +3732,8 @@ var EditArea = /*#__PURE__*/React__default['default'].forwardRef(function (props
                 flexible: true,
                 url: info.file.response.url,
                 start: currentMouseTime,
-                end: currentMouseTime + duration
+                end: currentMouseTime + duration,
+                isUpload: true
               };
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [newAction]);
             case 3:
@@ -3723,30 +3770,34 @@ var EditArea = /*#__PURE__*/React__default['default'].forwardRef(function (props
     dragIndicator = _useState6[0],
     setDragIndicator = _useState6[1];
   // 框选功能
+  var handleSelectionChange = React.useCallback(function (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);
+    onMutiSelectChange === null || onMutiSelectChange === void 0 ? void 0 : onMutiSelectChange(selectedActionIds);
+  }, [editorData, setEditorData, onMutiSelectChange]);
   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);
-        onMutiSelectChange === null || onMutiSelectChange === void 0 ? void 0 : onMutiSelectChange(selectedActionIds);
-      },
+      onSelectionChange: handleSelectionChange,
       disabled: false,
       containerRef: editAreaRef
     }),
     DragSelection = _useRowSelection.DragSelection,
-    selectedActionIds = _useRowSelection.selectedActionIds;
+    selectedActionIds = _useRowSelection.selectedActionIds,
+    onClickOutside = _useRowSelection.onClickOutside,
+    onCtrlClick = _useRowSelection.onCtrlClick,
+    setSelectedActionIds = _useRowSelection.setSelectedActionIds;
   var _useRowDrag = useRowDrag({
       selectedActionIds: selectedActionIds,
       editorData: editorData,
@@ -3756,7 +3807,8 @@ var EditArea = /*#__PURE__*/React__default['default'].forwardRef(function (props
       startLeft: startLeft,
       setEditorData: setEditorData,
       allowCreateTrack: allowCreateTrack,
-      rowHeight: _rowHeight
+      rowHeight: _rowHeight,
+      onUpdateEditorData: onUpdateEditorData
     }),
     onDragStart = _useRowDrag.onDragStart,
     onDragMove = _useRowDrag.onDragMove,
@@ -3841,6 +3893,45 @@ var EditArea = /*#__PURE__*/React__default['default'].forwardRef(function (props
       });
     }
   };
+  React.useEffect(function () {
+    if (!(engineRef === null || engineRef === void 0 ? void 0 : engineRef.current)) return;
+    engineRef.current.on('mousedown', function (data) {
+      console.log('mousedown', data);
+      onClickOutside(data.target);
+    });
+    return function () {
+      var _engineRef$current;
+      engineRef === null || engineRef === void 0 ? void 0 : (_engineRef$current = engineRef.current) === null || _engineRef$current === void 0 ? void 0 : _engineRef$current.off('mousedown');
+    };
+  }, [engineRef, onClickOutside]);
+  // 监听 Ctrl+ 点击事件
+  React.useEffect(function () {
+    var handleCtrlClickAction = function handleCtrlClickAction(e) {
+      var _e$detail = e.detail,
+        actionId = _e$detail.actionId,
+        row = _e$detail.row;
+      console.log('ctrl-click-action', row, ', editorData = ', editorData);
+      setSelectedActionIds(function (ids) {
+        var newIds = new Set();
+        ids.forEach(function (id) {
+          editorData.forEach(function (item) {
+            item.actions.forEach(function (action) {
+              if (item.type === row.type && action.id === id) {
+                newIds.add(id);
+              }
+            });
+          });
+        });
+        newIds.add(actionId);
+        handleSelectionChange(Array.from(newIds));
+        return new Set(newIds);
+      });
+    };
+    window.addEventListener('ctrl-click-action', handleCtrlClickAction);
+    return function () {
+      window.removeEventListener('ctrl-click-action', handleCtrlClickAction);
+    };
+  }, [onCtrlClick, editorData, handleSelectionChange]);
   /** 获取每个cell渲染内容 */
   var cellRenderer = function cellRenderer(_ref2) {
     var rowIndex = _ref2.rowIndex,
@@ -3910,10 +4001,14 @@ var EditArea = /*#__PURE__*/React__default['default'].forwardRef(function (props
           height: data.height || 0,
           up: data.up || 0
         });
-        return _onActionMoveEnd && _onActionMoveEnd(data);
+        if (!data.isMultiDrag) {
+          return _onActionMoveEnd && _onActionMoveEnd(data);
+        }
+        return;
       }
     }));
     if (!!row && (canUpload || (row === null || row === void 0 ? void 0 : row.canUpload))) {
+      var _row$actions;
       return /*#__PURE__*/React__default['default'].createElement(es.Upload, {
         ref: uploadRef,
         key: key + 'upload',
@@ -3926,7 +4021,9 @@ var EditArea = /*#__PURE__*/React__default['default'].forwardRef(function (props
         beforeUpload: onBeforeUpload,
         onChange: handleUploadChange(row),
         showUploadList: false,
-        openFileDialogOnClick: false,
+        openFileDialogOnClick: ((_row$actions = row.actions) === null || _row$actions === void 0 ? void 0 : _row$actions.filter(function (item) {
+          return item.effectId === 'effect2';
+        }).length) > 0,
         customRequest: customRequest,
         onDrop: handleDrop,
         type: "drag"
@@ -3967,7 +4064,7 @@ var EditArea = /*#__PURE__*/React__default['default'].forwardRef(function (props
     var totalHeight = 0;
     // 高度列表
     var heights = editorData.map(function (row) {
-      var itemHeight = row.rowHeight || _rowHeight;
+      var itemHeight = (row.rowHeight || _rowHeight) + 2;
       totalHeight += itemHeight;
       return itemHeight;
     });
@@ -4051,6 +4148,7 @@ var EditArea = /*#__PURE__*/React__default['default'].forwardRef(function (props
     });
   }());
 });
+var EditArea = /*#__PURE__*/React__default['default'].memo(EditAreaO);
 
 var css_248z$5 = ".timeline-editor {\n  height: 600px;\n  width: 600px;\n  min-height: 32px;\n  position: relative;\n  font-size: 12px;\n  font-family: \"PingFang SC\";\n  background-color: #191b1d;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.timeline-editor.light {\n  background-color: #fff;\n}\n";
 styleInject(css_248z$5);
@@ -4180,6 +4278,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
   var areaRef = React.useRef();
   var scrollSync = React.useRef();
   var containerRef = React.useRef();
+  console.log(' Timeline mounted = ', areaRef);
   // 编辑器数据
   var _useState = React.useState(data),
     _useState2 = _slicedToArray(_useState, 2),
@@ -4299,6 +4398,19 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
     engineRef.current.on('play', handlePlay);
     engineRef.current.on('paused', handlePaused);
   }, []);
+  React.useEffect(function () {
+    var handleClickOutside = function handleClickOutside(e) {
+      var target = e.target;
+      engineRef.current.trigger('mousedown', {
+        target: target,
+        evt: e
+      });
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
   // ref 数据
   React.useImperativeHandle(ref, function () {
     return {
@@ -4384,6 +4496,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
       setScaleCount: handleSetScaleCount,
       scrollTop: scrollTop,
       scrollLeft: scrollLeft,
+      engineRef: engineRef,
       setEditorData: handleEditorDataChange,
       deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
       allowCreateTrack: allowCreateTrack,
@@ -4394,10 +4507,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
       }
     }))) : null, areaCount > 1 ? /*#__PURE__*/React__default['default'].createElement("div", {
       id: 'time-editor-container',
-      ref: containerRef,
-      style: {
-        overflow: 'auto'
-      }
+      ref: containerRef
     }, Object.keys(groupedData).map(function (key, index) {
       var handleGroupDataChange = function handleGroupDataChange(updatedData) {
         var mergedData = editorData.filter(function (item) {
@@ -4436,6 +4546,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
         allowCreateTrack: allowCreateTrack,
         containerRef: containerRef,
         onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
+        engineRef: engineRef,
         onScroll: function onScroll(params) {
           _onScroll(params);
           onScrollVertical && onScrollVertical(params);

package/dist/interface/action.d.ts

@@ -26,6 +26,10 @@ export interface TimelineAction {
     maxEnd?: number;
     /** 动作的url */
     url?: string;
+    /** 动作是否被禁用 */
+    is_disabled?: boolean;
+    /** 动作是否为上传 */
+    isUpload?: boolean;
 }
 /**
  * 动作行基本参数

package/dist/interface/timeline.d.ts

@@ -120,6 +120,7 @@ export interface EditData {
         top?: number;
         height?: number;
         up?: number;
+        isMultiDrag?: boolean;
     }) => void;
     /**
      * @description 开始改变大小回调

package/package.json

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