sense-react-timeline-editor 1.1.7 → 1.1.9

package/dist/components/cursor/cursor.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { ScrollSync } from 'react-virtualized';
 import { CommonProp } from '../../interface/common_prop';
 import './cursor.less';
@@ -12,11 +12,29 @@ export declare type CursorProps = CommonProp & {
         left?: number;
         time?: number;
     }) => boolean;
-    /** 时间轴区域dom ref */
+    /** 时间轴区域 dom ref */
     areaRef: React.MutableRefObject<HTMLDivElement>;
-    /** 设置scroll left */
+    /** 设置 scroll left */
     deltaScrollLeft: (delta: number) => void;
-    /** 滚动同步ref（TODO: 该数据用于临时解决scrollLeft拖住时不同步问题） */
+    /** 滚动同步 ref（TODO: 该数据用于临时解决 scrollLeft 拖住时不同步问题） */
     scrollSync: React.MutableRefObject<ScrollSync>;
 };
-export declare const Cursor: FC<CursorProps>;
+export interface CursorApi {
+    updateLeft: (left: number) => void;
+}
+export declare const Cursor: React.ForwardRefExoticComponent<CommonProp & {
+    theme?: string;
+    /** 距离左侧滚动距离 */
+    scrollLeft: number;
+    /** 设置光标位置 */
+    setCursor: (param: {
+        left?: number;
+        time?: number;
+    }) => boolean;
+    /** 时间轴区域 dom ref */
+    areaRef: React.MutableRefObject<HTMLDivElement>;
+    /** 设置 scroll left */
+    deltaScrollLeft: (delta: number) => void;
+    /** 滚动同步 ref（TODO: 该数据用于临时解决 scrollLeft 拖住时不同步问题） */
+    scrollSync: React.MutableRefObject<ScrollSync>;
+} & React.RefAttributes<CursorApi>>;

package/dist/components/time_area/time_area.d.ts

@@ -1,7 +1,8 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { OnScrollParams } from 'react-virtualized';
 import { CommonProp } from '../../interface/common_prop';
 import './time_area.less';
+import { CursorApi } from '../cursor/cursor';
 /** 动画时间轴组件参数 */
 export declare type TimeAreaProps = CommonProp & {
     /** 左侧滚动距离 */
@@ -13,6 +14,7 @@ export declare type TimeAreaProps = CommonProp & {
         left?: number;
         time?: number;
     }) => void;
+    cursorRef: React.RefObject<CursorApi>;
 };
 /** 动画时间轴组件 */
 export declare const TimeArea: FC<TimeAreaProps>;

package/dist/components/timeline.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TimelineEditor, TimelineState } from '../interface/timeline';
 import './timeline.less';
-export declare const Timeline: React.ForwardRefExoticComponent<TimelineEditor & React.RefAttributes<TimelineState>>;
+export declare const Timeline: React.MemoExoticComponent<React.ForwardRefExoticComponent<TimelineEditor & React.RefAttributes<TimelineState>>>;

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState, useLayoutEffect, useCallback, memo, forwardRef, useMemo } from 'react';
+import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState, useLayoutEffect, useCallback, useMemo, memo, forwardRef } from 'react';
 import { AutoSizer, Grid, ScrollSync } from 'react-virtualized';
 import { useThrottleEffect, useThrottleFn } from 'ahooks';
 import { prefixNames } from 'framework-utils';
@@ -1973,26 +1973,38 @@ function styleInject(css, ref) {
 var css_248z = ".timeline-editor-cursor {\n  cursor: ew-resize;\n  position: absolute;\n  top: 32px;\n  height: calc(100% - 32px);\n  box-sizing: border-box;\n  border-left: 1px solid #5297ff;\n  border-right: 1px solid #5297ff;\n  transform: translateX(-25%) scaleX(0.5);\n  transition: transform 0.2s ease-in-out;\n}\n.timeline-editor-cursor-top {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, 0) scaleX(2);\n  margin: auto;\n}\n.timeline-editor-cursor-area {\n  width: 16px;\n  height: 100%;\n  cursor: ew-resize;\n  position: absolute;\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.timeline-editor.light .timeline-editor-cursor-top {\n  transform: unset;\n  position: relative;\n  left: 0;\n}\n.timeline-editor.light .timeline-editor-cursor {\n  transform: unset;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  align-items: center;\n  border: none;\n  transform: translate(-50%, 0);\n}\n.timeline-editor.light .timeline-editor-cursor-area {\n  position: relative;\n  border: none;\n  width: 10px;\n  background-color: transparent;\n  transform: unset;\n  left: 0;\n  transform: translateX(-5px);\n  border-right: 1px solid #111;\n}\n";
 styleInject(css_248z);
 
-var Cursor = function Cursor(_ref) {
+var Cursor = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _document$querySelect;
-  var theme = _ref.theme,
-    disableDrag = _ref.disableDrag,
-    cursorTime = _ref.cursorTime,
-    setCursor = _ref.setCursor,
-    startLeft = _ref.startLeft,
-    timelineWidth = _ref.timelineWidth,
-    scaleWidth = _ref.scaleWidth,
-    scale = _ref.scale,
-    scrollLeft = _ref.scrollLeft,
-    scrollSync = _ref.scrollSync,
-    areaRef = _ref.areaRef,
-    maxScaleCount = _ref.maxScaleCount,
-    deltaScrollLeft = _ref.deltaScrollLeft,
-    onCursorDragStart = _ref.onCursorDragStart,
-    onCursorDrag = _ref.onCursorDrag,
-    onCursorDragEnd = _ref.onCursorDragEnd;
+  var theme = props.theme,
+    disableDrag = props.disableDrag,
+    cursorTime = props.cursorTime,
+    setCursor = props.setCursor,
+    startLeft = props.startLeft,
+    timelineWidth = props.timelineWidth,
+    scaleWidth = props.scaleWidth,
+    scale = props.scale,
+    scrollLeft = props.scrollLeft,
+    scrollSync = props.scrollSync,
+    areaRef = props.areaRef,
+    maxScaleCount = props.maxScaleCount,
+    deltaScrollLeft = props.deltaScrollLeft,
+    onCursorDragStart = props.onCursorDragStart,
+    onCursorDrag = props.onCursorDrag,
+    onCursorDragEnd = props.onCursorDragEnd;
+  console.log('Cursor cursorTime', cursorTime);
   var rowRnd = useRef();
   var draggingLeft = useRef();
+  useImperativeHandle(ref, function () {
+    return {
+      updateLeft: function updateLeft(cursorTime) {
+        rowRnd.current.updateLeft(parserTimeToPixel(cursorTime, {
+          startLeft: startLeft,
+          scaleWidth: scaleWidth,
+          scale: scale
+        }) - scrollLeft);
+      }
+    };
+  });
   useThrottleEffect(function () {
     if (typeof draggingLeft.current === 'undefined') {
       // 非dragging时，根据穿参更新cursor刻度（防抖）
@@ -2005,7 +2017,7 @@ var Cursor = function Cursor(_ref) {
   }, [cursorTime, startLeft, scaleWidth, scale, scrollLeft], {
     wait: 10
   });
-  var clientHeight = ((_document$querySelect = document.querySelector("#time-editor-container")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
+  var clientHeight = ((_document$querySelect = document.querySelector('#time-editor-container')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
   return /*#__PURE__*/React.createElement(RowDnd, {
     top: theme === 'light' ? 26 : 0,
     start: startLeft,
@@ -2040,8 +2052,8 @@ var Cursor = function Cursor(_ref) {
       onCursorDragEnd && onCursorDragEnd(time);
       draggingLeft.current = undefined;
     },
-    onDrag: function onDrag(_ref2) {
-      var left = _ref2.left;
+    onDrag: function onDrag(_ref) {
+      var left = _ref.left;
       var scroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var scrollLeft = scrollSync.current.state.scrollLeft;
       if (!scroll || scrollLeft === 0) {
@@ -2080,12 +2092,12 @@ var Cursor = function Cursor(_ref) {
   })), /*#__PURE__*/React.createElement("div", {
     className: prefix('cursor-area')
   })));
-};
+});
 
 var css_248z$1 = ".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$1);
 
-var css_248z$2 = ".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[data-action-drag=\"true\"] {\n  box-shadow: 0px 8px 8px rgba(77, 54, 41, 0.08);\n  border-radius: 34px;\n  cursor: pointer;\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";
+var css_248z$2 = ".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[data-action-drag=\"true\"] {\n  box-shadow: 0px 8px 8px rgba(77, 54, 41, 0.08);\n  border-radius: 34px;\n  cursor: pointer;\n  z-index: 100;\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";
 styleInject(css_248z$2);
 
 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";
@@ -2603,6 +2615,7 @@ var EditActionO = function EditActionO(_ref) {
       sourceRowItem.actions = sourceRowItem.actions.filter(function (item) {
         return item.id !== id;
       });
+      actionItem.order = targetRowItem.order;
       // 添加到目标row
       targetRowItem.actions.push(actionItem);
       console.log('Target row actions after:', targetRowItem.actions.length);
@@ -2906,21 +2919,49 @@ var EditRow = function EditRow(props) {
     setCursor = props.setCursor,
     hideCursor = props.hideCursor,
     uploadBgMusic = props.uploadBgMusic;
+  var _useState = useState(20),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleCount = _useState2[0],
+    setVisibleCount = _useState2[1];
   var classNames = ['edit-row'];
   if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('selected');
   var clientWidth = document.documentElement.clientWidth;
-  var timeStart = parserPixelToTime(scrollLeft, {
+  var timeStart = parserPixelToTime(scrollLeft - 400, {
     startLeft: startLeft,
     scale: scale,
     scaleWidth: scaleWidth
   });
-  var timeEnd = parserPixelToTime(scrollLeft + clientWidth + 200, {
+  var timeEnd = parserPixelToTime(scrollLeft + clientWidth + 400, {
     startLeft: startLeft,
     scale: scale,
     scaleWidth: scaleWidth
   });
-  console.log('time = ', timeStart, ', timeEnd = ', timeEnd);
-  var handleTime = function handleTime(e) {
+  var visibleActions = useMemo(function () {
+    return ((rowData === null || rowData === void 0 ? void 0 : rowData.actions) || []).filter(function (action) {
+      return action.end >= timeStart && action.start <= timeEnd;
+    }).sort(function (a, b) {
+      return a.start - b.start;
+    });
+  }, [rowData === null || rowData === void 0 ? void 0 : rowData.actions, timeStart, timeEnd]);
+  var renderActions = useMemo(function () {
+    return visibleActions.slice(0, visibleCount);
+  }, [visibleActions, visibleCount]);
+  useEffect(function () {
+    if (visibleCount < visibleActions.length) {
+      var timer = requestAnimationFrame(function () {
+        setVisibleCount(function (prev) {
+          return Math.min(prev + 20, visibleActions.length);
+        });
+      });
+      return function () {
+        return cancelAnimationFrame(timer);
+      };
+    }
+  }, [visibleCount, visibleActions.length]);
+  useEffect(function () {
+    setVisibleCount(20);
+  }, [rowData === null || rowData === void 0 ? void 0 : rowData.id]);
+  var handleTime = useCallback(function (e) {
     if (!areaRef.current) return;
     var rect = areaRef.current.getBoundingClientRect();
     var position = e.clientX - rect.x;
@@ -2931,7 +2972,7 @@ var EditRow = function EditRow(props) {
       scaleWidth: scaleWidth
     });
     return time;
-  };
+  }, [areaRef, scrollLeft, startLeft, scale, scaleWidth]);
   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,
@@ -2983,9 +3024,7 @@ var EditRow = function EditRow(props) {
         });
       }
     }
-  }, ((rowData === null || rowData === void 0 ? void 0 : rowData.actions) || []).filter(function (action) {
-    return action.end >= timeStart && action.start <= timeEnd;
-  }).map(function (action) {
+  }, renderActions.map(function (action) {
     return /*#__PURE__*/React.createElement(EditAction, _objectSpread2(_objectSpread2({
       key: action.id
     }, props), {}, {
@@ -3373,9 +3412,9 @@ var useRowDrag = function useRowDrag(options) {
     if (up === 0) {
       top = 0;
     } else if (up === 1) {
-      top = -20;
+      top = 35;
     } else if (up === -1) {
-      top = 20;
+      top = -35;
     }
     // 如果没有初始位置数据，说明不是有效的多选拖拽
     if (!setEditorData || initialPositions.size === 0) {
@@ -3644,7 +3683,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return /*#__PURE__*/function () {
       var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(info) {
         var _info$file$response, _info$file;
-        var hasDefault, totalDuration, _newAction, uid, duration, newAction;
+        var maxSize, hasDefault, totalDuration, _newAction, uid, duration, newAction;
         return _regenerator().w(function (_context) {
           while (1) switch (_context.n) {
             case 0:
@@ -3655,16 +3694,23 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
               }
               return _context.a(2);
             case 1:
-              if (!(info.file.type !== 'audio/mp3' && info.file.type !== 'audio/wav' && info.file.type !== 'audio/mpeg')) {
+              maxSize = 100 * 1024 * 1024;
+              if (!(info.file.size > maxSize)) {
                 _context.n = 2;
                 break;
               }
               return _context.a(2, false);
             case 2:
-              if (!(info.file.status === 'error')) {
+              if (!(info.file.type !== 'audio/mp3' && info.file.type !== 'audio/wav' && info.file.type !== 'audio/mpeg')) {
                 _context.n = 3;
                 break;
               }
+              return _context.a(2, false);
+            case 3:
+              if (!(info.file.status === 'error')) {
+                _context.n = 4;
+                break;
+              }
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [{
                 id: info.file.uid,
                 isUploading: false,
@@ -3676,9 +3722,9 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
                 uid: info.file.uid
               }]);
               return _context.a(2);
-            case 3:
+            case 4:
               if (info.file.response) {
-                _context.n = 4;
+                _context.n = 5;
                 break;
               }
               hasDefault = row.actions.some(function (action) {
@@ -3705,11 +3751,11 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
               };
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [_newAction]);
               return _context.a(2);
-            case 4:
+            case 5:
               uid = info.file.uid;
-              _context.n = 5;
+              _context.n = 6;
               return getAudioDuration(info.file.response.url);
-            case 5:
+            case 6:
               duration = _context.v;
               newAction = {
                 id: ((_info$file$response = info.file.response) === null || _info$file$response === void 0 ? void 0 : _info$file$response.id) || uid,
@@ -3724,7 +3770,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
                 uid: (_info$file = info.file) === null || _info$file === void 0 ? void 0 : _info$file.uid
               };
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [newAction]);
-            case 6:
+            case 7:
               return _context.a(2);
           }
         }, _callee);
@@ -4061,7 +4107,6 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }
     heightRef.current = height;
-    console.log('Math.max(scaleCount * scaleWidth + startLeft, width)', Math.max(scaleCount * scaleWidth + startLeft, width), ', width', width);
     return /*#__PURE__*/React.createElement(Grid, {
       columnCount: 1,
       rowCount: heights.length,
@@ -4149,7 +4194,8 @@ var TimeArea = function TimeArea(_ref) {
     scrollLeft = _ref.scrollLeft,
     onClickTimeArea = _ref.onClickTimeArea,
     getScaleRender = _ref.getScaleRender,
-    timelineWidth = _ref.timelineWidth;
+    timelineWidth = _ref.timelineWidth,
+    cursorRef = _ref.cursorRef;
   var gridRef = useRef();
   /** 是否显示细分刻度 */
   var showUnit = scaleSplitCount > 0;
@@ -4226,7 +4272,7 @@ var TimeArea = function TimeArea(_ref) {
           scaleWidth: scaleWidth
         });
         var result = onClickTimeArea && onClickTimeArea(time, e);
-        if (result === false) return; // 返回false时阻止设置时间
+        if (result === false) return; // 返回 false 时阻止设置时间
         setCursor({
           time: time
         });
@@ -4420,7 +4466,7 @@ var DragLineController = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (pro
 }));
 DragLineController.displayName = "DragLineController";
 
-var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
   var checkedProps = checkProps(props);
   var style = props.style,
     className = props.className,
@@ -4449,6 +4495,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var areaRef = useRef();
   var scrollSync = useRef();
   var containerRef = useRef();
+  var cursorRef = useRef(null);
   console.log(' Timeline mounted = ', areaRef);
   // 编辑器数据
   var _useState = useState(data),
@@ -4501,11 +4548,11 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
       scrollTop: scrollTop
     });
   }, [scrollTop]);
-  /** 动态设置scale count */
-  var handleSetScaleCount = function handleSetScaleCount(value) {
+  /** 动态设置 scale count */
+  var handleSetScaleCount = useCallback(function (value) {
     var data = Math.min(maxScaleCount, Math.max(minScaleCount, value));
     setScaleCount(data);
-  };
+  }, [maxScaleCount, minScaleCount]);
   /** 处理主动数据变化 */
   var handleEditorDataChange = function handleEditorDataChange(updatedData) {
     var result = onChange === null || onChange === void 0 ? void 0 : onChange(updatedData);
@@ -4516,7 +4563,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   };
   /** 处理光标 */
-  var handleSetCursor = function handleSetCursor(param) {
+  var handleSetCursor = useCallback(function (param) {
     var left = param.left,
       time = param.time,
       _param$updateTime = param.updateTime,
@@ -4541,16 +4588,16 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     result && setCursorTime(time);
     return result;
-  };
-  /** 设置scrollLeft */
-  var handleDeltaScrollLeft = function handleDeltaScrollLeft(delta) {
+  }, [startLeft, scale, scaleWidth, autoReRender]);
+  /** 设置 scrollLeft */
+  var handleDeltaScrollLeft = useCallback(function (delta) {
     // 当超过最大距离时，禁止自动滚动
     var data = scrollSync.current.state.scrollLeft + delta;
     if (data > scaleCount * (scaleWidth - 1) + startLeft - width) return;
     scrollSync.current && scrollSync.current.setState({
       scrollLeft: Math.max(scrollSync.current.state.scrollLeft + delta, 0)
     });
-  };
+  }, [scaleCount, scaleWidth, startLeft, width]);
   var handleInitDragLine = useCallback(function (data) {
     var _checkedProps$onActio, _checkedProps$onActio2, _dragLineControllerRe;
     (_checkedProps$onActio = checkedProps.onActionMoveStart) === null || _checkedProps$onActio === void 0 ? void 0 : _checkedProps$onActio.call(checkedProps, data);
@@ -4569,6 +4616,10 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
     (_checkedProps$onActio6 = checkedProps.onActionResizeEnd) === null || _checkedProps$onActio6 === void 0 ? void 0 : _checkedProps$onActio6.call(checkedProps, data);
     (_dragLineControllerRe3 = dragLineControllerRef.current) === null || _dragLineControllerRe3 === void 0 ? void 0 : _dragLineControllerRe3.disposeDragLine();
   }, [checkedProps]);
+  /** 处理滚动回调 */
+  var onScroll = useCallback(function (params) {
+    onScrollVertical && onScrollVertical(params);
+  }, [onScrollVertical]);
   // 处理运行器相关数据
   useEffect(function () {
     var handleTime = function handleTime(_ref) {
@@ -4641,7 +4692,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     };
   });
-  var onClickTimeline = function onClickTimeline(e) {
+  var onClickTimeline = useCallback(function (e) {
     var _e$target;
     if (!domRef.current) return;
     var rect = domRef.current.getBoundingClientRect();
@@ -4658,7 +4709,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
     handleSetCursor({
       time: time
     });
-  };
+  }, [startLeft, scale, scaleWidth, hideCursor, handleSetCursor]);
   // 监听timeline区域宽度变化
   useEffect(function () {
     if (areaRef.current) {
@@ -4705,7 +4756,8 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
       scaleCount: scaleCount,
       setScaleCount: handleSetScaleCount,
       onScroll: _onScroll,
-      scrollLeft: scrollLeft
+      scrollLeft: scrollLeft,
+      cursorRef: cursorRef
     })), areaCount === 1 ? (/*#__PURE__*/React.createElement(EditArea, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
       timelineWidth: width,
       ref: function ref(_ref3) {
@@ -4793,12 +4845,10 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
         onActionResizing: handleUpdateDragLine,
         onActionMoveEnd: handleDisposeDragLine,
         onActionResizeEnd: handleDisposeDragLine,
-        onScroll: function onScroll(params) {
-          _onScroll(params);
-          onScrollVertical && onScrollVertical(params);
-        }
+        onScroll: _onScroll
       }));
     }))) : null, !hideCursor && (/*#__PURE__*/React.createElement(Cursor, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
+      ref: cursorRef,
       timelineWidth: width,
       disableDrag: isPlaying,
       scrollLeft: scrollLeft,
@@ -4823,6 +4873,6 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
       getAssistDragLineActionIds: checkedProps.getAssistDragLineActionIds
     }));
   }));
-});
+}));
 
 export { Timeline, TimelineEngine };

package/dist/index.js

@@ -1983,26 +1983,38 @@ function styleInject(css, ref) {
 var css_248z = ".timeline-editor-cursor {\n  cursor: ew-resize;\n  position: absolute;\n  top: 32px;\n  height: calc(100% - 32px);\n  box-sizing: border-box;\n  border-left: 1px solid #5297ff;\n  border-right: 1px solid #5297ff;\n  transform: translateX(-25%) scaleX(0.5);\n  transition: transform 0.2s ease-in-out;\n}\n.timeline-editor-cursor-top {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, 0) scaleX(2);\n  margin: auto;\n}\n.timeline-editor-cursor-area {\n  width: 16px;\n  height: 100%;\n  cursor: ew-resize;\n  position: absolute;\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.timeline-editor.light .timeline-editor-cursor-top {\n  transform: unset;\n  position: relative;\n  left: 0;\n}\n.timeline-editor.light .timeline-editor-cursor {\n  transform: unset;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  align-items: center;\n  border: none;\n  transform: translate(-50%, 0);\n}\n.timeline-editor.light .timeline-editor-cursor-area {\n  position: relative;\n  border: none;\n  width: 10px;\n  background-color: transparent;\n  transform: unset;\n  left: 0;\n  transform: translateX(-5px);\n  border-right: 1px solid #111;\n}\n";
 styleInject(css_248z);
 
-var Cursor = function Cursor(_ref) {
+var Cursor = /*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
   var _document$querySelect;
-  var theme = _ref.theme,
-    disableDrag = _ref.disableDrag,
-    cursorTime = _ref.cursorTime,
-    setCursor = _ref.setCursor,
-    startLeft = _ref.startLeft,
-    timelineWidth = _ref.timelineWidth,
-    scaleWidth = _ref.scaleWidth,
-    scale = _ref.scale,
-    scrollLeft = _ref.scrollLeft,
-    scrollSync = _ref.scrollSync,
-    areaRef = _ref.areaRef,
-    maxScaleCount = _ref.maxScaleCount,
-    deltaScrollLeft = _ref.deltaScrollLeft,
-    onCursorDragStart = _ref.onCursorDragStart,
-    onCursorDrag = _ref.onCursorDrag,
-    onCursorDragEnd = _ref.onCursorDragEnd;
+  var theme = props.theme,
+    disableDrag = props.disableDrag,
+    cursorTime = props.cursorTime,
+    setCursor = props.setCursor,
+    startLeft = props.startLeft,
+    timelineWidth = props.timelineWidth,
+    scaleWidth = props.scaleWidth,
+    scale = props.scale,
+    scrollLeft = props.scrollLeft,
+    scrollSync = props.scrollSync,
+    areaRef = props.areaRef,
+    maxScaleCount = props.maxScaleCount,
+    deltaScrollLeft = props.deltaScrollLeft,
+    onCursorDragStart = props.onCursorDragStart,
+    onCursorDrag = props.onCursorDrag,
+    onCursorDragEnd = props.onCursorDragEnd;
+  console.log('Cursor cursorTime', cursorTime);
   var rowRnd = React.useRef();
   var draggingLeft = React.useRef();
+  React.useImperativeHandle(ref, function () {
+    return {
+      updateLeft: function updateLeft(cursorTime) {
+        rowRnd.current.updateLeft(parserTimeToPixel(cursorTime, {
+          startLeft: startLeft,
+          scaleWidth: scaleWidth,
+          scale: scale
+        }) - scrollLeft);
+      }
+    };
+  });
   ahooks.useThrottleEffect(function () {
     if (typeof draggingLeft.current === 'undefined') {
       // 非dragging时，根据穿参更新cursor刻度（防抖）
@@ -2015,7 +2027,7 @@ var Cursor = function Cursor(_ref) {
   }, [cursorTime, startLeft, scaleWidth, scale, scrollLeft], {
     wait: 10
   });
-  var clientHeight = ((_document$querySelect = document.querySelector("#time-editor-container")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
+  var clientHeight = ((_document$querySelect = document.querySelector('#time-editor-container')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
   return /*#__PURE__*/React__default['default'].createElement(RowDnd, {
     top: theme === 'light' ? 26 : 0,
     start: startLeft,
@@ -2050,8 +2062,8 @@ var Cursor = function Cursor(_ref) {
       onCursorDragEnd && onCursorDragEnd(time);
       draggingLeft.current = undefined;
     },
-    onDrag: function onDrag(_ref2) {
-      var left = _ref2.left;
+    onDrag: function onDrag(_ref) {
+      var left = _ref.left;
       var scroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var scrollLeft = scrollSync.current.state.scrollLeft;
       if (!scroll || scrollLeft === 0) {
@@ -2090,12 +2102,12 @@ var Cursor = function Cursor(_ref) {
   })), /*#__PURE__*/React__default['default'].createElement("div", {
     className: prefix('cursor-area')
   })));
-};
+});
 
 var css_248z$1 = ".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$1);
 
-var css_248z$2 = ".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[data-action-drag=\"true\"] {\n  box-shadow: 0px 8px 8px rgba(77, 54, 41, 0.08);\n  border-radius: 34px;\n  cursor: pointer;\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";
+var css_248z$2 = ".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[data-action-drag=\"true\"] {\n  box-shadow: 0px 8px 8px rgba(77, 54, 41, 0.08);\n  border-radius: 34px;\n  cursor: pointer;\n  z-index: 100;\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";
 styleInject(css_248z$2);
 
 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";
@@ -2613,6 +2625,7 @@ var EditActionO = function EditActionO(_ref) {
       sourceRowItem.actions = sourceRowItem.actions.filter(function (item) {
         return item.id !== id;
       });
+      actionItem.order = targetRowItem.order;
       // 添加到目标row
       targetRowItem.actions.push(actionItem);
       console.log('Target row actions after:', targetRowItem.actions.length);
@@ -2916,21 +2929,49 @@ var EditRow = function EditRow(props) {
     setCursor = props.setCursor,
     hideCursor = props.hideCursor,
     uploadBgMusic = props.uploadBgMusic;
+  var _useState = React.useState(20),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleCount = _useState2[0],
+    setVisibleCount = _useState2[1];
   var classNames = ['edit-row'];
   if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('selected');
   var clientWidth = document.documentElement.clientWidth;
-  var timeStart = parserPixelToTime(scrollLeft, {
+  var timeStart = parserPixelToTime(scrollLeft - 400, {
     startLeft: startLeft,
     scale: scale,
     scaleWidth: scaleWidth
   });
-  var timeEnd = parserPixelToTime(scrollLeft + clientWidth + 200, {
+  var timeEnd = parserPixelToTime(scrollLeft + clientWidth + 400, {
     startLeft: startLeft,
     scale: scale,
     scaleWidth: scaleWidth
   });
-  console.log('time = ', timeStart, ', timeEnd = ', timeEnd);
-  var handleTime = function handleTime(e) {
+  var visibleActions = React.useMemo(function () {
+    return ((rowData === null || rowData === void 0 ? void 0 : rowData.actions) || []).filter(function (action) {
+      return action.end >= timeStart && action.start <= timeEnd;
+    }).sort(function (a, b) {
+      return a.start - b.start;
+    });
+  }, [rowData === null || rowData === void 0 ? void 0 : rowData.actions, timeStart, timeEnd]);
+  var renderActions = React.useMemo(function () {
+    return visibleActions.slice(0, visibleCount);
+  }, [visibleActions, visibleCount]);
+  React.useEffect(function () {
+    if (visibleCount < visibleActions.length) {
+      var timer = requestAnimationFrame(function () {
+        setVisibleCount(function (prev) {
+          return Math.min(prev + 20, visibleActions.length);
+        });
+      });
+      return function () {
+        return cancelAnimationFrame(timer);
+      };
+    }
+  }, [visibleCount, visibleActions.length]);
+  React.useEffect(function () {
+    setVisibleCount(20);
+  }, [rowData === null || rowData === void 0 ? void 0 : rowData.id]);
+  var handleTime = React.useCallback(function (e) {
     if (!areaRef.current) return;
     var rect = areaRef.current.getBoundingClientRect();
     var position = e.clientX - rect.x;
@@ -2941,7 +2982,7 @@ var EditRow = function EditRow(props) {
       scaleWidth: scaleWidth
     });
     return time;
-  };
+  }, [areaRef, scrollLeft, startLeft, scale, scaleWidth]);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "".concat(prefix.apply(void 0, classNames), " ").concat(((rowData === null || rowData === void 0 ? void 0 : rowData.classNames) || []).join(' ')),
     style: style,
@@ -2993,9 +3034,7 @@ var EditRow = function EditRow(props) {
         });
       }
     }
-  }, ((rowData === null || rowData === void 0 ? void 0 : rowData.actions) || []).filter(function (action) {
-    return action.end >= timeStart && action.start <= timeEnd;
-  }).map(function (action) {
+  }, renderActions.map(function (action) {
     return /*#__PURE__*/React__default['default'].createElement(EditAction, _objectSpread2(_objectSpread2({
       key: action.id
     }, props), {}, {
@@ -3383,9 +3422,9 @@ var useRowDrag = function useRowDrag(options) {
     if (up === 0) {
       top = 0;
     } else if (up === 1) {
-      top = -20;
+      top = 35;
     } else if (up === -1) {
-      top = 20;
+      top = -35;
     }
     // 如果没有初始位置数据，说明不是有效的多选拖拽
     if (!setEditorData || initialPositions.size === 0) {
@@ -3654,7 +3693,7 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
     return /*#__PURE__*/function () {
       var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(info) {
         var _info$file$response, _info$file;
-        var hasDefault, totalDuration, _newAction, uid, duration, newAction;
+        var maxSize, hasDefault, totalDuration, _newAction, uid, duration, newAction;
         return _regenerator().w(function (_context) {
           while (1) switch (_context.n) {
             case 0:
@@ -3665,16 +3704,23 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
               }
               return _context.a(2);
             case 1:
-              if (!(info.file.type !== 'audio/mp3' && info.file.type !== 'audio/wav' && info.file.type !== 'audio/mpeg')) {
+              maxSize = 100 * 1024 * 1024;
+              if (!(info.file.size > maxSize)) {
                 _context.n = 2;
                 break;
               }
               return _context.a(2, false);
             case 2:
-              if (!(info.file.status === 'error')) {
+              if (!(info.file.type !== 'audio/mp3' && info.file.type !== 'audio/wav' && info.file.type !== 'audio/mpeg')) {
                 _context.n = 3;
                 break;
               }
+              return _context.a(2, false);
+            case 3:
+              if (!(info.file.status === 'error')) {
+                _context.n = 4;
+                break;
+              }
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [{
                 id: info.file.uid,
                 isUploading: false,
@@ -3686,9 +3732,9 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
                 uid: info.file.uid
               }]);
               return _context.a(2);
-            case 3:
+            case 4:
               if (info.file.response) {
-                _context.n = 4;
+                _context.n = 5;
                 break;
               }
               hasDefault = row.actions.some(function (action) {
@@ -3715,11 +3761,11 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
               };
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [_newAction]);
               return _context.a(2);
-            case 4:
+            case 5:
               uid = info.file.uid;
-              _context.n = 5;
+              _context.n = 6;
               return getAudioDuration(info.file.response.url);
-            case 5:
+            case 6:
               duration = _context.v;
               newAction = {
                 id: ((_info$file$response = info.file.response) === null || _info$file$response === void 0 ? void 0 : _info$file$response.id) || uid,
@@ -3734,7 +3780,7 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
                 uid: (_info$file = info.file) === null || _info$file === void 0 ? void 0 : _info$file.uid
               };
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [newAction]);
-            case 6:
+            case 7:
               return _context.a(2);
           }
         }, _callee);
@@ -4071,7 +4117,6 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
       }
     }
     heightRef.current = height;
-    console.log('Math.max(scaleCount * scaleWidth + startLeft, width)', Math.max(scaleCount * scaleWidth + startLeft, width), ', width', width);
     return /*#__PURE__*/React__default['default'].createElement(reactVirtualized.Grid, {
       columnCount: 1,
       rowCount: heights.length,
@@ -4159,7 +4204,8 @@ var TimeArea = function TimeArea(_ref) {
     scrollLeft = _ref.scrollLeft,
     onClickTimeArea = _ref.onClickTimeArea,
     getScaleRender = _ref.getScaleRender,
-    timelineWidth = _ref.timelineWidth;
+    timelineWidth = _ref.timelineWidth,
+    cursorRef = _ref.cursorRef;
   var gridRef = React.useRef();
   /** 是否显示细分刻度 */
   var showUnit = scaleSplitCount > 0;
@@ -4236,7 +4282,7 @@ var TimeArea = function TimeArea(_ref) {
           scaleWidth: scaleWidth
         });
         var result = onClickTimeArea && onClickTimeArea(time, e);
-        if (result === false) return; // 返回false时阻止设置时间
+        if (result === false) return; // 返回 false 时阻止设置时间
         setCursor({
           time: time
         });
@@ -4430,7 +4476,7 @@ var DragLineController = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(f
 }));
 DragLineController.displayName = "DragLineController";
 
-var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
+var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
   var checkedProps = checkProps(props);
   var style = props.style,
     className = props.className,
@@ -4459,6 +4505,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
   var areaRef = React.useRef();
   var scrollSync = React.useRef();
   var containerRef = React.useRef();
+  var cursorRef = React.useRef(null);
   console.log(' Timeline mounted = ', areaRef);
   // 编辑器数据
   var _useState = React.useState(data),
@@ -4511,11 +4558,11 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
       scrollTop: scrollTop
     });
   }, [scrollTop]);
-  /** 动态设置scale count */
-  var handleSetScaleCount = function handleSetScaleCount(value) {
+  /** 动态设置 scale count */
+  var handleSetScaleCount = React.useCallback(function (value) {
     var data = Math.min(maxScaleCount, Math.max(minScaleCount, value));
     setScaleCount(data);
-  };
+  }, [maxScaleCount, minScaleCount]);
   /** 处理主动数据变化 */
   var handleEditorDataChange = function handleEditorDataChange(updatedData) {
     var result = onChange === null || onChange === void 0 ? void 0 : onChange(updatedData);
@@ -4526,7 +4573,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
     }
   };
   /** 处理光标 */
-  var handleSetCursor = function handleSetCursor(param) {
+  var handleSetCursor = React.useCallback(function (param) {
     var left = param.left,
       time = param.time,
       _param$updateTime = param.updateTime,
@@ -4551,16 +4598,16 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
     }
     result && setCursorTime(time);
     return result;
-  };
-  /** 设置scrollLeft */
-  var handleDeltaScrollLeft = function handleDeltaScrollLeft(delta) {
+  }, [startLeft, scale, scaleWidth, autoReRender]);
+  /** 设置 scrollLeft */
+  var handleDeltaScrollLeft = React.useCallback(function (delta) {
     // 当超过最大距离时，禁止自动滚动
     var data = scrollSync.current.state.scrollLeft + delta;
     if (data > scaleCount * (scaleWidth - 1) + startLeft - width) return;
     scrollSync.current && scrollSync.current.setState({
       scrollLeft: Math.max(scrollSync.current.state.scrollLeft + delta, 0)
     });
-  };
+  }, [scaleCount, scaleWidth, startLeft, width]);
   var handleInitDragLine = React.useCallback(function (data) {
     var _checkedProps$onActio, _checkedProps$onActio2, _dragLineControllerRe;
     (_checkedProps$onActio = checkedProps.onActionMoveStart) === null || _checkedProps$onActio === void 0 ? void 0 : _checkedProps$onActio.call(checkedProps, data);
@@ -4579,6 +4626,10 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
     (_checkedProps$onActio6 = checkedProps.onActionResizeEnd) === null || _checkedProps$onActio6 === void 0 ? void 0 : _checkedProps$onActio6.call(checkedProps, data);
     (_dragLineControllerRe3 = dragLineControllerRef.current) === null || _dragLineControllerRe3 === void 0 ? void 0 : _dragLineControllerRe3.disposeDragLine();
   }, [checkedProps]);
+  /** 处理滚动回调 */
+  var onScroll = React.useCallback(function (params) {
+    onScrollVertical && onScrollVertical(params);
+  }, [onScrollVertical]);
   // 处理运行器相关数据
   React.useEffect(function () {
     var handleTime = function handleTime(_ref) {
@@ -4651,7 +4702,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
       }
     };
   });
-  var onClickTimeline = function onClickTimeline(e) {
+  var onClickTimeline = React.useCallback(function (e) {
     var _e$target;
     if (!domRef.current) return;
     var rect = domRef.current.getBoundingClientRect();
@@ -4668,7 +4719,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
     handleSetCursor({
       time: time
     });
-  };
+  }, [startLeft, scale, scaleWidth, hideCursor, handleSetCursor]);
   // 监听timeline区域宽度变化
   React.useEffect(function () {
     if (areaRef.current) {
@@ -4715,7 +4766,8 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
       scaleCount: scaleCount,
       setScaleCount: handleSetScaleCount,
       onScroll: _onScroll,
-      scrollLeft: scrollLeft
+      scrollLeft: scrollLeft,
+      cursorRef: cursorRef
     })), areaCount === 1 ? (/*#__PURE__*/React__default['default'].createElement(EditArea, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
       timelineWidth: width,
       ref: function ref(_ref3) {
@@ -4803,12 +4855,10 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
         onActionResizing: handleUpdateDragLine,
         onActionMoveEnd: handleDisposeDragLine,
         onActionResizeEnd: handleDisposeDragLine,
-        onScroll: function onScroll(params) {
-          _onScroll(params);
-          onScrollVertical && onScrollVertical(params);
-        }
+        onScroll: _onScroll
       }));
     }))) : null, !hideCursor && (/*#__PURE__*/React__default['default'].createElement(Cursor, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
+      ref: cursorRef,
       timelineWidth: width,
       disableDrag: isPlaying,
       scrollLeft: scrollLeft,
@@ -4833,7 +4883,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
       getAssistDragLineActionIds: checkedProps.getAssistDragLineActionIds
     }));
   }));
-});
+}));
 
 exports.Timeline = Timeline;
 exports.TimelineEngine = TimelineEngine;

package/package.json

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