sense-react-timeline-editor 1.0.3 → 1.0.6

package/dist/index.esm.js

@@ -2,6 +2,8 @@ import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState,
 import { AutoSizer, Grid, ScrollSync } from 'react-virtualized';
 import { prefixNames } from 'framework-utils';
 import interact from 'interactjs';
+import { Upload, message } from 'antd/es';
+import { Howl } from 'howler';
 import { groupBy } from 'lodash-es';
 
 function _arrayLikeToArray(r, a) {
@@ -19,6 +21,31 @@ function _assertThisInitialized(e) {
   if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   return e;
 }
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+  try {
+    var i = n[a](c),
+      u = i.value;
+  } catch (n) {
+    return void e(n);
+  }
+  i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+  return function () {
+    var t = this,
+      e = arguments;
+    return new Promise(function (r, o) {
+      var a = n.apply(t, e);
+      function _next(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+      }
+      function _throw(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+      }
+      _next(void 0);
+    });
+  };
+}
 function _callSuper(t, o, e) {
   return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
 }
@@ -131,6 +158,114 @@ function _possibleConstructorReturn(t, e) {
   if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
   return _assertThisInitialized(t);
 }
+function _regenerator() {
+  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+  var e,
+    t,
+    r = "function" == typeof Symbol ? Symbol : {},
+    n = r.iterator || "@@iterator",
+    o = r.toStringTag || "@@toStringTag";
+  function i(r, n, o, i) {
+    var c = n && n.prototype instanceof Generator ? n : Generator,
+      u = Object.create(c.prototype);
+    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
+      var i,
+        c,
+        u,
+        f = 0,
+        p = o || [],
+        y = !1,
+        G = {
+          p: 0,
+          n: 0,
+          v: e,
+          a: d,
+          f: d.bind(e, 4),
+          d: function (t, r) {
+            return i = t, c = 0, u = e, G.n = r, a;
+          }
+        };
+      function d(r, n) {
+        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
+          var o,
+            i = p[t],
+            d = G.p,
+            l = i[2];
+          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
+        }
+        if (o || r > 1) return a;
+        throw y = !0, n;
+      }
+      return function (o, p, l) {
+        if (f > 1) throw TypeError("Generator is already running");
+        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
+          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
+          try {
+            if (f = 2, i) {
+              if (c || (o = "next"), t = i[o]) {
+                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
+                if (!t.done) return t;
+                u = t.value, c < 2 && (c = 0);
+              } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
+              i = e;
+            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
+          } catch (t) {
+            i = e, c = 1, u = t;
+          } finally {
+            f = 1;
+          }
+        }
+        return {
+          value: t,
+          done: y
+        };
+      };
+    }(r, o, i), !0), u;
+  }
+  var a = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  t = Object.getPrototypeOf;
+  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
+      return this;
+    }), t),
+    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
+  function f(e) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
+    return this;
+  }), _regeneratorDefine(u, "toString", function () {
+    return "[object Generator]";
+  }), (_regenerator = function () {
+    return {
+      w: i,
+      m: f
+    };
+  })();
+}
+function _regeneratorDefine(e, r, n, t) {
+  var i = Object.defineProperty;
+  try {
+    i({}, "", {});
+  } catch (e) {
+    i = 0;
+  }
+  _regeneratorDefine = function (e, r, n, t) {
+    function o(r, n) {
+      _regeneratorDefine(e, r, function (e) {
+        return this._invoke(r, n, e);
+      });
+    }
+    r ? i ? i(e, r, {
+      value: n,
+      enumerable: !t,
+      configurable: !t,
+      writable: !t
+    }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
+  }, _regeneratorDefine(e, r, n, t);
+}
 function _setPrototypeOf(t, e) {
   return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
     return t.__proto__ = e, t;
@@ -1102,54 +1237,140 @@ function prefix() {
   return prefixNames.apply(void 0, ["".concat(PREFIX, "-")].concat(classNames));
 }
 
-var DEFAULT_SPEED = 1;
-var MAX_SPEED = 3;
-var CRITICAL_SIZE = 10;
-function useAutoScroll(target) {
+var DEFAULT_SPEED = 2;
+var MAX_SPEED = 8;
+var CRITICAL_SIZE = 5;
+var EDGE_THRESHOLD = 20; // 距离边缘多少像素开始触发滚动
+function useAutoScroll(target, verticalScrollTarget) {
   var leftBoundRef = useRef(Number.MIN_SAFE_INTEGER);
   var rightBoundRef = useRef(Number.MAX_SAFE_INTEGER);
+  var topBoundRef = useRef(Number.MIN_SAFE_INTEGER);
+  var bottomBoundRef = useRef(Number.MAX_SAFE_INTEGER);
   var speed = useRef(DEFAULT_SPEED);
   var frame = useRef();
   var initAutoScroll = function initAutoScroll() {
     if (target === null || target === void 0 ? void 0 : target.current) {
       var _target$current$getBo = target.current.getBoundingClientRect(),
         left = _target$current$getBo.left,
-        width = _target$current$getBo.width;
+        width = _target$current$getBo.width,
+        top = _target$current$getBo.top,
+        height = _target$current$getBo.height;
       leftBoundRef.current = left;
       rightBoundRef.current = left + width;
+      // Use verticalScrollTarget for Y-axis bounds if provided
+      if (verticalScrollTarget === null || verticalScrollTarget === void 0 ? void 0 : verticalScrollTarget.current) {
+        var verticalRect = verticalScrollTarget.current.getBoundingClientRect();
+        topBoundRef.current = verticalRect.top;
+        bottomBoundRef.current = verticalRect.top + verticalRect.height;
+      } else {
+        topBoundRef.current = top;
+        bottomBoundRef.current = top + height;
+      }
     }
   };
-  var dealDragAutoScroll = function dealDragAutoScroll(e, deltaScroll) {
-    // 超出
-    if (e.clientX >= rightBoundRef.current || e.clientX <= leftBoundRef.current) {
+  var dealDragAutoScroll = function dealDragAutoScroll(e, deltaScroll, deltaScrollTop) {
+    // X轴滚动 - 在边缘附近就开始触发
+    var distanceToRightEdge = rightBoundRef.current - e.clientX;
+    var distanceToLeftEdge = e.clientX - leftBoundRef.current;
+    if (distanceToRightEdge < EDGE_THRESHOLD && distanceToRightEdge > 0) {
+      // 接近右边缘
       cancelAnimationFrame(frame.current);
-      var over = Math.abs(e.clientX >= rightBoundRef.current ? e.clientX - rightBoundRef.current : e.clientX - leftBoundRef.current);
-      speed.current = Math.min(Number((over / CRITICAL_SIZE).toFixed(0)) * DEFAULT_SPEED, MAX_SPEED);
-      var dir = e.clientX >= rightBoundRef.current ? 1 : -1;
-      var delta = dir * speed.current;
+      var proximity = EDGE_THRESHOLD - distanceToRightEdge;
+      speed.current = Math.min(Math.max(1, Number((proximity / CRITICAL_SIZE).toFixed(0)) * DEFAULT_SPEED), MAX_SPEED);
+      var delta = speed.current;
       var _loop = function loop() {
         deltaScroll && deltaScroll(delta);
         frame.current = requestAnimationFrame(_loop);
       };
       frame.current = requestAnimationFrame(_loop);
       return false;
+    } else if (distanceToLeftEdge < EDGE_THRESHOLD && distanceToLeftEdge > 0) {
+      // 接近左边缘
+      cancelAnimationFrame(frame.current);
+      var _proximity = EDGE_THRESHOLD - distanceToLeftEdge;
+      speed.current = Math.min(Math.max(1, Number((_proximity / CRITICAL_SIZE).toFixed(0)) * DEFAULT_SPEED), MAX_SPEED);
+      var _delta = -speed.current;
+      var _loop2 = function loop() {
+        deltaScroll && deltaScroll(_delta);
+        frame.current = requestAnimationFrame(_loop2);
+      };
+      frame.current = requestAnimationFrame(_loop2);
+      return false;
+    }
+    // Y轴滚动 - 根据拖拽方向判断
+    else if (deltaScrollTop) {
+      var distanceToBottomEdge = bottomBoundRef.current - e.clientY;
+      var distanceToTopEdge = e.clientY - topBoundRef.current;
+      // console.log('Y-axis check:', {
+      //   clientY: e.clientY,
+      //   dy: e.dy,
+      //   topBound: topBoundRef.current,
+      //   bottomBound: bottomBoundRef.current,
+      //   distanceToTop: distanceToTopEdge,
+      //   distanceToBottom: distanceToBottomEdge,
+      // });
+      // 向下拖拽且接近底部边缘
+      if (e.dy > 0 && distanceToBottomEdge < EDGE_THRESHOLD && distanceToBottomEdge > 0) {
+        // console.log('Triggering BOTTOM scroll (dragging DOWN), delta will be POSITIVE');
+        cancelAnimationFrame(frame.current);
+        var _proximity2 = EDGE_THRESHOLD - distanceToBottomEdge;
+        speed.current = Math.min(Math.max(1, Number((_proximity2 / CRITICAL_SIZE).toFixed(0)) * DEFAULT_SPEED), MAX_SPEED);
+        var _delta2 = speed.current;
+        var _loop3 = function loop() {
+          deltaScrollTop && deltaScrollTop(_delta2);
+          frame.current = requestAnimationFrame(_loop3);
+        };
+        frame.current = requestAnimationFrame(_loop3);
+        return false;
+      }
+      // 向上拖拽且接近顶部边缘
+      else if (e.dy < 0 && distanceToTopEdge < EDGE_THRESHOLD && distanceToTopEdge > 0) {
+        // console.log('Triggering TOP scroll (dragging UP), delta will be NEGATIVE');
+        cancelAnimationFrame(frame.current);
+        var _proximity3 = EDGE_THRESHOLD - distanceToTopEdge;
+        speed.current = Math.min(Math.max(1, Number((_proximity3 / CRITICAL_SIZE).toFixed(0)) * DEFAULT_SPEED), MAX_SPEED);
+        var _delta3 = -speed.current;
+        var _loop4 = function loop() {
+          deltaScrollTop && deltaScrollTop(_delta3);
+          frame.current = requestAnimationFrame(_loop4);
+        };
+        frame.current = requestAnimationFrame(_loop4);
+        return false;
+      } else {
+        cancelAnimationFrame(frame.current);
+      }
     } else {
       cancelAnimationFrame(frame.current);
     }
     return true;
   };
   var dealResizeAutoScroll = function dealResizeAutoScroll(e, dir, deltaScroll) {
-    if (e.clientX >= rightBoundRef.current || e.clientX < leftBoundRef.current) {
+    // X轴滚动 - 在边缘附近就开始触发
+    var distanceToRightEdge = rightBoundRef.current - e.clientX;
+    var distanceToLeftEdge = e.clientX - leftBoundRef.current;
+    if (distanceToRightEdge < EDGE_THRESHOLD && distanceToRightEdge > 0) {
+      // 接近右边缘
       cancelAnimationFrame(frame.current);
-      var over = Math.abs(e.clientX >= rightBoundRef.current ? e.clientX - rightBoundRef.current : e.clientX - leftBoundRef.current);
-      speed.current = Math.min(Number((over / CRITICAL_SIZE).toFixed(0)) * DEFAULT_SPEED, MAX_SPEED);
-      var direction = e.clientX >= rightBoundRef.current ? 1 : -1;
-      var delta = direction * speed.current;
-      var _loop2 = function loop() {
+      var proximity = EDGE_THRESHOLD - distanceToRightEdge;
+      speed.current = Math.min(Math.max(1, Number((proximity / CRITICAL_SIZE).toFixed(0)) * DEFAULT_SPEED), MAX_SPEED);
+      var delta = speed.current;
+      var _loop5 = function loop() {
         deltaScroll && deltaScroll(delta);
-        frame.current = requestAnimationFrame(_loop2);
+        frame.current = requestAnimationFrame(_loop5);
       };
-      frame.current = requestAnimationFrame(_loop2);
+      frame.current = requestAnimationFrame(_loop5);
+      return false;
+    } else if (distanceToLeftEdge < EDGE_THRESHOLD && distanceToLeftEdge > 0) {
+      // 接近左边缘
+      cancelAnimationFrame(frame.current);
+      var _proximity4 = EDGE_THRESHOLD - distanceToLeftEdge;
+      speed.current = Math.min(Math.max(1, Number((_proximity4 / CRITICAL_SIZE).toFixed(0)) * DEFAULT_SPEED), MAX_SPEED);
+      var _delta4 = -speed.current;
+      var _loop6 = function loop() {
+        deltaScroll && deltaScroll(_delta4);
+        frame.current = requestAnimationFrame(_loop6);
+      };
+      frame.current = requestAnimationFrame(_loop6);
       return false;
     } else {
       cancelAnimationFrame(frame.current);
@@ -1252,12 +1473,14 @@ var RowDnd = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onDragEnd = _ref.onDragEnd,
     onDrag = _ref.onDrag,
     parentRef = _ref.parentRef,
-    deltaScrollLeft = _ref.deltaScrollLeft;
+    deltaScrollLeft = _ref.deltaScrollLeft,
+    deltaScrollTop = _ref.deltaScrollTop,
+    verticalScrollRef = _ref.verticalScrollRef;
   var interactable = useRef();
   var deltaX = useRef(0);
   var deltaY = useRef(0);
   var isAdsorption = useRef(false);
-  var _useAutoScroll = useAutoScroll(parentRef),
+  var _useAutoScroll = useAutoScroll(parentRef, verticalScrollRef),
     initAutoScroll = _useAutoScroll.initAutoScroll,
     dealDragAutoScroll = _useAutoScroll.dealDragAutoScroll,
     dealResizeAutoScroll = _useAutoScroll.dealResizeAutoScroll,
@@ -1458,14 +1681,33 @@ var RowDnd = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           preHeight: preHeight,
           scrollDelta: delta
         });
-      });
+      }, deltaScrollTop ? function (delta) {
+        deltaScrollTop(delta);
+        // Y轴自动滚动时，需要累加到 deltaY.current 以保持元素与鼠标的相对位置
+        var _target$dataset6 = target.dataset,
+          left = _target$dataset6.left,
+          width = _target$dataset6.width,
+          top = _target$dataset6.top,
+          height = _target$dataset6.height;
+        var preLeft = parseFloat(left || '0');
+        var preWidth = parseFloat(width || '0');
+        var preTop = parseFloat(top || '0');
+        var preHeight = parseFloat(height || '0');
+        deltaY.current += delta;
+        move({
+          preLeft: preLeft,
+          preWidth: preWidth,
+          preTop: preTop,
+          preHeight: preHeight
+        });
+      } : undefined);
       if (!result) return;
     }
-    var _target$dataset6 = target.dataset,
-      left = _target$dataset6.left,
-      width = _target$dataset6.width,
-      top = _target$dataset6.top,
-      height = _target$dataset6.height;
+    var _target$dataset7 = target.dataset,
+      left = _target$dataset7.left,
+      width = _target$dataset7.width,
+      top = _target$dataset7.top,
+      height = _target$dataset7.height;
     var preLeft = parseFloat(left || '0');
     var preWidth = parseFloat(width || '0');
     var preTop = parseFloat(top || '0');
@@ -1485,11 +1727,11 @@ var RowDnd = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isAdsorption.current = false;
     stopAutoScroll();
     var target = e.target;
-    var _target$dataset7 = target.dataset,
-      left = _target$dataset7.left,
-      width = _target$dataset7.width,
-      top = _target$dataset7.top,
-      height = _target$dataset7.height;
+    var _target$dataset8 = target.dataset,
+      left = _target$dataset8.left,
+      width = _target$dataset8.width,
+      top = _target$dataset8.top,
+      height = _target$dataset8.height;
     onDragEnd && onDragEnd({
       left: parseFloat(left),
       width: parseFloat(width),
@@ -1598,9 +1840,9 @@ var RowDnd = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     if (deltaScrollLeft && (parentRef === null || parentRef === void 0 ? void 0 : parentRef.current)) {
       var result = dealResizeAutoScroll(e, dir, function (delta) {
         deltaScrollLeft(delta);
-        var _target$dataset8 = target.dataset,
-          left = _target$dataset8.left,
-          width = _target$dataset8.width;
+        var _target$dataset9 = target.dataset,
+          left = _target$dataset9.left,
+          width = _target$dataset9.width;
         var preLeft = parseFloat(left || '0');
         var preWidth = parseFloat(width || '0');
         deltaX.current += delta;
@@ -1612,9 +1854,9 @@ var RowDnd = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       });
       if (!result) return;
     }
-    var _target$dataset9 = target.dataset,
-      left = _target$dataset9.left,
-      width = _target$dataset9.width;
+    var _target$dataset0 = target.dataset,
+      left = _target$dataset0.left,
+      width = _target$dataset0.width;
     var preLeft = parseFloat(left || '0');
     var preWidth = parseFloat(width || '0');
     deltaX.current += dir === 'left' ? e.deltaRect.left : e.deltaRect.right;
@@ -1630,9 +1872,9 @@ var RowDnd = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isAdsorption.current = false;
     stopAutoScroll();
     var target = e.target;
-    var _target$dataset0 = target.dataset,
-      left = _target$dataset0.left,
-      width = _target$dataset0.width;
+    var _target$dataset1 = target.dataset,
+      left = _target$dataset1.left,
+      width = _target$dataset1.width;
     var dir = ((_e$edges3 = e.edges) === null || _e$edges3 === void 0 ? void 0 : _e$edges3.right) ? 'right' : 'left';
     onResizeEnd && onResizeEnd(dir, {
       left: parseFloat(left),
@@ -1735,7 +1977,7 @@ var Cursor = function Cursor(_ref) {
     }
   }, [cursorTime, startLeft, scaleWidth, scale, scrollLeft]);
   return /*#__PURE__*/React.createElement(RowDnd, {
-    top: theme === 'light' ? 40 : 0,
+    top: theme === 'light' ? 16 : 0,
     start: startLeft,
     ref: rowRnd,
     parentRef: areaRef,
@@ -1835,12 +2077,14 @@ var DragLines = function DragLines(_ref) {
   }));
 };
 
-var css_248z$2 = ".timeline-editor:hover .timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar {\n  height: 4px;\n}\n.timeline-editor-edit-area {\n  flex: 1 1 auto;\n  margin-top: 10px;\n  overflow: hidden;\n  position: relative;\n}\n.timeline-editor-edit-area.no-flex {\n  flex: 0 0 auto;\n}\n.timeline-editor-edit-area.overflow-hidden {\n  overflow: hidden;\n}\n.timeline-editor-edit-area.overflow-hidden .ReactVirtualized__Grid {\n  overflow: hidden !important;\n  height: initial !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid {\n  outline: none !important;\n  overflow: overlay !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar-track {\n  background-color: transparent !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar-thumb {\n  background: #666;\n  border-radius: 16px;\n}\n";
+var css_248z$2 = ".timeline-editor .ant-upload-wrapper .ant-upload-drag {\n  border: none !important;\n  background: none !important;\n}\n.timeline-editor:hover .timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar {\n  height: 4px;\n}\n.timeline-editor-edit-area {\n  flex: 1 1 auto;\n  margin-top: 10px;\n  overflow: hidden;\n  position: relative;\n}\n.timeline-editor-edit-area.no-flex {\n  flex: 0 0 auto;\n}\n.timeline-editor-edit-area.overflow-hidden {\n  overflow: hidden;\n}\n.timeline-editor-edit-area.overflow-hidden .ReactVirtualized__Grid {\n  overflow: hidden !important;\n  height: initial !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid {\n  outline: none !important;\n  overflow: overlay !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar-track {\n  background-color: transparent !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar-thumb {\n  background: #666;\n  border-radius: 16px;\n}\n";
 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}\n.timeline-editor-action .timeline-editor-action-left-stretch,\n.timeline-editor-action .timeline-editor-action-right-stretch {\n  position: absolute;\n  top: 0;\n  width: 10px;\n  border-radius: 4px;\n  height: 100%;\n  overflow: hidden;\n}\n.timeline-editor-action .timeline-editor-action-left-stretch::after,\n.timeline-editor-action .timeline-editor-action-right-stretch::after {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  margin: auto;\n  border-radius: 4px;\n  border-top: 28px solid transparent;\n  border-bottom: 28px solid transparent;\n}\n.timeline-editor-action .timeline-editor-action-left-stretch {\n  left: 0;\n}\n.timeline-editor-action .timeline-editor-action-left-stretch::after {\n  left: 0;\n  content: \"\";\n  border-left: 7px solid rgba(244, 4, 4, 0.202);\n  border-right: 7px solid transparent;\n}\n.timeline-editor-action .timeline-editor-action-right-stretch {\n  right: 0;\n}\n.timeline-editor-action .timeline-editor-action-right-stretch::after {\n  right: 0;\n  content: \"\";\n  border-right: 7px solid rgba(244, 4, 4, 0.202);\n  border-left: 7px solid transparent;\n}\n";
+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";
 styleInject(css_248z$3);
 
+var stretchIcon = "data:image/svg+xml,%3Csvg%20width%3D%227%22%20height%3D%2216%22%20viewBox%3D%220%200%207%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7%2015C7%2015.5523%206.55228%2016%206%2016L1%2016C0.447715%2016%201.06779e-08%2015.5523%202.38498e-08%2015L3.57746e-07%201C3.70918e-07%200.447715%200.447716%20-1.5627e-07%201%20-1.43099e-07L6%209.29825e-07C6.55229%209.42996e-07%207%200.447716%207%201L7%2015Z%22%20fill%3D%22%23226EFF%22%2F%3E%3Cpath%20d%3D%22M2%204L2%2012%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%2012.25L5.5%208L4%203.75%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M4%2012.25L5.5%208L4%203.75L4%2012.25Z%22%20stroke%3D%22white%22%20stroke-width%3D%220.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
+
 var EditAction = function EditAction(_ref) {
   var editorData = _ref.editorData,
     row = _ref.row,
@@ -1871,9 +2115,18 @@ var EditAction = function EditAction(_ref) {
     getActionRender = _ref.getActionRender,
     handleTime = _ref.handleTime,
     areaRef = _ref.areaRef,
-    deltaScrollLeft = _ref.deltaScrollLeft;
+    deltaScrollLeft = _ref.deltaScrollLeft,
+    _ref$allowCreateTrack = _ref.allowCreateTrack,
+    allowCreateTrack = _ref$allowCreateTrack === void 0 ? true : _ref$allowCreateTrack,
+    setDropPreview = _ref.setDropPreview,
+    containerRef = _ref.containerRef;
   var rowRnd = useRef();
   var isDragWhenClick = useRef(false);
+  var originalPosition = useRef({
+    start: 0,
+    end: 0
+  });
+  var isMounted = useRef(true); // 组件挂载状态
   var id = action.id,
     maxEnd = action.maxEnd,
     minStart = action.minStart,
@@ -1885,6 +2138,17 @@ var EditAction = function EditAction(_ref) {
     _action$movable = action.movable,
     movable = _action$movable === void 0 ? true : _action$movable,
     effectId = action.effectId;
+  var handleDeltaScrollTop = function handleDeltaScrollTop(delta) {
+    if (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) {
+      containerRef.current.scrollTop += delta * 2;
+    }
+  };
+  // 组件卸载时清理
+  useEffect(function () {
+    return function () {
+      isMounted.current = false;
+    };
+  }, []);
   // 获取最大/最小 像素范围
   var leftLimit = parserTimeToPixel(minStart || 0, {
     startLeft: startLeft,
@@ -1945,6 +2209,11 @@ var EditAction = function EditAction(_ref) {
   };
   //#region [rgba(100,120,156,0.08)] 回调
   var handleDragStart = function handleDragStart() {
+    // 保存原始位置
+    originalPosition.current = {
+      start: action.start,
+      end: action.end
+    };
     onActionMoveStart && onActionMoveStart({
       action: action,
       row: row
@@ -1955,6 +2224,34 @@ var EditAction = function EditAction(_ref) {
       width = _ref2.width,
       top = _ref2.top;
     isDragWhenClick.current = true;
+    // 检查是否需要显示预览指示器
+    if (allowCreateTrack && setDropPreview && top !== undefined) {
+      var _currentRowIndex = editorData.findIndex(function (item) {
+        return item.id === row.id;
+      });
+      var rowHeightValue = rowHeight || 32;
+      // 添加阈值，避免边界处频繁切换
+      var threshold = 0.2; // 降低阈值，使预览指示器更灵敏
+      var preciseOffset = top / rowHeightValue;
+      var preciseIndex = _currentRowIndex + preciseOffset;
+      // 判断是否需要显示预览指示器
+      if (preciseIndex < -threshold) {
+        // 拖拽到顶部之前
+        setDropPreview({
+          position: 'before',
+          rowIndex: 0
+        });
+      } else if (preciseIndex >= editorData.length - 1 + threshold) {
+        // 拖拽到底部之后
+        setDropPreview({
+          position: 'after',
+          rowIndex: editorData.length - 1
+        });
+      } else {
+        // 在现有轨道范围内，不显示预览
+        setDropPreview(null);
+      }
+    }
     if (onActionMoving) {
       var _parserTransformToTim = parserTransformToTime({
           left: left,
@@ -1974,11 +2271,13 @@ var EditAction = function EditAction(_ref) {
       });
       if (result === false) return false;
     }
-    setTransform({
-      left: left,
-      width: width,
-      top: top || 0
-    });
+    if (isMounted.current) {
+      setTransform({
+        left: left,
+        width: width,
+        top: top || 0
+      });
+    }
     handleScaleCount(left, width);
   };
   var handleDragEnd = function handleDragEnd(_ref3) {
@@ -1986,6 +2285,10 @@ var EditAction = function EditAction(_ref) {
       width = _ref3.width,
       top = _ref3.top,
       height = _ref3.height;
+    // 清理预览指示器
+    if (setDropPreview) {
+      setDropPreview(null);
+    }
     // 计算时间
     var _parserTransformToTim2 = parserTransformToTime({
         left: left,
@@ -2001,20 +2304,72 @@ var EditAction = function EditAction(_ref) {
     var targetRowIndex = editorData.findIndex(function (item) {
       return item.id === row.id;
     });
+    var needCreateNewRow = false;
+    var newRowPosition = 'after';
     if (top !== undefined && height !== undefined) {
       // 通过Y轴位置计算目标row的索引
-      var currentRowIndex = editorData.findIndex(function (item) {
+      var _currentRowIndex2 = editorData.findIndex(function (item) {
         return item.id === row.id;
       });
       var rowHeightValue = rowHeight || 32; // 使用默认行高或传入的行高
-      var rowOffset = Math.round(top / rowHeightValue);
-      targetRowIndex = Math.max(0, Math.min(currentRowIndex + rowOffset, editorData.length - 1));
+      // 使用与预览指示器相同的阈值逻辑
+      var threshold = 0.2;
+      var preciseOffset = top / rowHeightValue;
+      var preciseIndex = _currentRowIndex2 + preciseOffset;
+      // 检查是否需要创建新轨道
+      if (allowCreateTrack) {
+        if (preciseIndex < -threshold) {
+          // 拖拽到第一个轨道之前，需要在前面创建新轨道
+          needCreateNewRow = true;
+          newRowPosition = 'before';
+          targetRowIndex = 0;
+        } else if (preciseIndex >= editorData.length - 1 + threshold) {
+          // 拖拽到最后一个轨道之后，需要在后面创建新轨道
+          needCreateNewRow = true;
+          newRowPosition = 'after';
+          targetRowIndex = editorData.length;
+        } else {
+          // 在现有轨道范围内，使用四舍五入找到最近的轨道
+          var rowOffset = Math.round(preciseOffset);
+          targetRowIndex = Math.max(0, Math.min(_currentRowIndex2 + rowOffset, editorData.length - 1));
+        }
+      } else {
+        // 不允许创建新轨道时，限制在现有轨道范围内
+        var _rowOffset = Math.round(preciseOffset);
+        targetRowIndex = Math.max(0, Math.min(_currentRowIndex2 + _rowOffset, editorData.length - 1));
+      }
     }
     // 设置数据
     var sourceRowItem = editorData.find(function (item) {
       return item.id === row.id;
     });
-    var targetRowItem = editorData[targetRowIndex];
+    var targetRowItem;
+    // 如果需要创建新轨道
+    if (needCreateNewRow) {
+      var newRowId = "row_".concat(Date.now(), "_").concat(Math.random().toString(36).substr(2, 9));
+      targetRowItem = {
+        id: newRowId,
+        actions: [],
+        rowHeight: rowHeight,
+        type: row.type,
+        classNames: row.classNames,
+        canUpload: row.canUpload // 继承源轨道的canUpload属性
+      };
+      console.log('Creating new row:', newRowId, 'with type:', row.type);
+      // 将新轨道插入到正确的位置
+      if (newRowPosition === 'before') {
+        editorData.unshift(targetRowItem);
+        targetRowIndex = 0;
+        console.log('New row inserted at beginning, index:', targetRowIndex);
+      } else {
+        editorData.push(targetRowItem);
+        targetRowIndex = editorData.length - 1;
+        console.log('New row inserted at end, index:', targetRowIndex);
+      }
+    } else {
+      targetRowItem = editorData[targetRowIndex];
+      console.log('Using existing row:', targetRowItem.id, 'at index:', targetRowIndex);
+    }
     var actionItem = sourceRowItem.actions.find(function (item) {
       return item.id === id;
     });
@@ -2080,7 +2435,15 @@ var EditAction = function EditAction(_ref) {
             var candidateStart = candidateEnd - duration;
             var distance = Math.abs(candidateStart - start);
             console.log('Candidate before first action:', candidateStart, '-', candidateEnd, 'distance:', distance);
-            if (distance < minDistance) {
+            if (candidateStart < 0) {
+              return {
+                start: start,
+                end: end,
+                found: false
+              };
+            }
+            // 检查候选位置的 start 是否小于 0
+            if (candidateStart >= 0 && distance < minDistance) {
               minDistance = distance;
               bestPosition = {
                 start: candidateStart,
@@ -2154,8 +2517,17 @@ var EditAction = function EditAction(_ref) {
     // 执行碰撞检测和调整
     var adjustmentResult = checkAndAdjustCollision();
     if (!adjustmentResult.found) {
-      // 如果找不到合适位置,取消移动
-      console.warn('Cannot find suitable position, cancelling move');
+      // 如果找不到合适位置,回到原始位置
+      console.warn('Cannot find suitable position, reverting to original position');
+      // 恢复原始位置的transform
+      var originalTransform = parserTimeToTransform(originalPosition.current, {
+        startLeft: startLeft,
+        scale: scale,
+        scaleWidth: scaleWidth
+      });
+      setTransform(_objectSpread2(_objectSpread2({}, originalTransform), {}, {
+        top: 0
+      }));
       return;
     }
     // 使用调整后的时间
@@ -2167,12 +2539,29 @@ var EditAction = function EditAction(_ref) {
     actionItem.end = end;
     // 如果拖拽到了不同的row,需要移动action
     if (targetRowItem.id !== row.id) {
+      console.log('Moving action to different row');
+      console.log('Source row:', row.id, 'Target row:', targetRowItem.id);
+      console.log('Is new row:', needCreateNewRow);
+      console.log('Target row actions before:', targetRowItem.actions.length);
       // 从原row中移除
       sourceRowItem.actions = sourceRowItem.actions.filter(function (item) {
         return item.id !== id;
       });
       // 添加到目标row
       targetRowItem.actions.push(actionItem);
+      console.log('Target row actions after:', targetRowItem.actions.length);
+      console.log('Action added:', actionItem.id);
+      // 如果源轨道没有action了，删除源轨道
+      if (sourceRowItem.actions.length === 0) {
+        console.log('Source row is empty, removing it:', sourceRowItem.id);
+        var sourceRowIndex = editorData.findIndex(function (item) {
+          return item.id === sourceRowItem.id;
+        });
+        if (sourceRowIndex !== -1) {
+          editorData.splice(sourceRowIndex, 1);
+          console.log('Source row removed at index:', sourceRowIndex);
+        }
+      }
     }
     setEditorData(_toConsumableArray(editorData));
     // 更新transform以反映新位置
@@ -2192,7 +2581,8 @@ var EditAction = function EditAction(_ref) {
       action: actionItem,
       row: targetRowItem,
       start: start,
-      end: end
+      end: end,
+      isNewRow: needCreateNewRow
     });
   };
   var handleResizeStart = function handleResizeStart(dir) {
@@ -2281,9 +2671,13 @@ var EditAction = function EditAction(_ref) {
   if (row.actions.includes(action)) {
     nowRow.actions[row.actions.indexOf(action)] = nowAction;
   }
+  var currentRowIndex = editorData.findIndex(function (item) {
+    return item.id === row.id;
+  });
   return /*#__PURE__*/React.createElement(RowDnd, {
     ref: rowRnd,
     parentRef: areaRef,
+    verticalScrollRef: containerRef,
     start: startLeft,
     left: transform.left,
     width: transform.width,
@@ -2295,12 +2689,8 @@ var EditAction = function EditAction(_ref) {
     bounds: {
       left: leftLimit,
       right: rightLimit,
-      top: -editorData.findIndex(function (item) {
-        return item.id === row.id;
-      }) * rowHeight,
-      bottom: (editorData.length - editorData.findIndex(function (item) {
-        return item.id === row.id;
-      })) * rowHeight
+      top: -(currentRowIndex + 1) * rowHeight,
+      bottom: (editorData.length - currentRowIndex + 1) * rowHeight
     },
     edges: {
       left: !disableDrag && flexible && ".".concat(prefix('action-left-stretch')),
@@ -2314,7 +2704,8 @@ var EditAction = function EditAction(_ref) {
     onResizeStart: handleResizeStart,
     onResize: handleResizing,
     onResizeEnd: handleResizeEnd,
-    deltaScrollLeft: deltaScrollLeft
+    deltaScrollLeft: deltaScrollLeft,
+    deltaScrollTop: handleDeltaScrollTop
   }, /*#__PURE__*/React.createElement("div", {
     onMouseDown: function onMouseDown() {
       isDragWhenClick.current = false;
@@ -2364,12 +2755,18 @@ var EditAction = function EditAction(_ref) {
     }
   }, getActionRender && getActionRender(nowAction, nowRow), flexible && /*#__PURE__*/React.createElement("div", {
     className: prefix('action-left-stretch')
-  }), flexible && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("img", {
+    src: stretchIcon,
+    alt: ""
+  })), flexible && /*#__PURE__*/React.createElement("div", {
     className: prefix('action-right-stretch')
-  })));
+  }, /*#__PURE__*/React.createElement("img", {
+    src: stretchIcon,
+    alt: ""
+  }))));
 };
 
-var css_248z$4 = ".timeline-editor-edit-row {\n  background-repeat: no-repeat, repeat;\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n}\n";
+var css_248z$4 = ".timeline-editor-edit-row {\n  background-repeat: no-repeat, repeat;\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n}\n.timeline-editor-edit-row.preview-row {\n  background-color: rgba(100, 150, 255, 0.15);\n  border: 1px dashed rgba(100, 150, 255, 0.5);\n  opacity: 0.8;\n  transition: all 0.2s ease;\n}\n";
 styleInject(css_248z$4);
 
 var EditRow = function EditRow(props) {
@@ -2383,7 +2780,9 @@ var EditRow = function EditRow(props) {
     scrollLeft = props.scrollLeft,
     startLeft = props.startLeft,
     scale = props.scale,
-    scaleWidth = props.scaleWidth;
+    scaleWidth = props.scaleWidth,
+    allowCreateTrack = props.allowCreateTrack,
+    containerRef = props.containerRef;
   var classNames = ['edit-row'];
   if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('edit-row-selected');
   var handleTime = function handleTime(e) {
@@ -2434,7 +2833,10 @@ var EditRow = function EditRow(props) {
     }, props), {}, {
       handleTime: handleTime,
       row: rowData,
-      action: action
+      action: action,
+      allowCreateTrack: allowCreateTrack,
+      setDropPreview: props.setDropPreview,
+      containerRef: containerRef
     }));
   }));
 };
@@ -2545,6 +2947,22 @@ function useDragLine() {
   };
 }
 
+// 获取音频时长
+var getAudioDuration = function getAudioDuration(url) {
+  return new Promise(function (resolve) {
+    var sound = new Howl({
+      src: [url]
+    });
+    sound.on('load', function () {
+      resolve(sound.duration());
+      sound.unload();
+    });
+    sound.on('loaderror', function () {
+      resolve(2); // 加载失败时返回默认时长2秒
+      sound.unload();
+    });
+  });
+};
 var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
     _props$isMulti = props.isMulti,
@@ -2567,7 +2985,61 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _onActionMoving = props.onActionMoving,
     _onActionResizeEnd = props.onActionResizeEnd,
     _onActionResizeStart = props.onActionResizeStart,
-    _onActionResizing = props.onActionResizing;
+    _onActionResizing = props.onActionResizing,
+    onUpdateEditorData = props.onUpdateEditorData,
+    _props$canUpload = props.canUpload,
+    canUpload = _props$canUpload === void 0 ? false : _props$canUpload,
+    customRequest = props.customRequest,
+    setEditorData = props.setEditorData,
+    _props$allowCreateTra = props.allowCreateTrack,
+    allowCreateTrack = _props$allowCreateTra === void 0 ? true : _props$allowCreateTra,
+    containerRef = props.containerRef;
+  // 支持mp3\wav格式上传
+  var onBeforeUpload = function onBeforeUpload(file) {
+    if (file.type !== 'audio/mp3' && file.type !== 'audio/wav') {
+      message.error('只能上传mp3wav格式的音频');
+      return false;
+    }
+    return true;
+  };
+  var handleUploadChange = function handleUploadChange(row) {
+    return /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(info) {
+        var uid, duration, newAction;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              console.log('Upload info:', info);
+              if (!(!info.file || !info.file.response)) {
+                _context.n = 1;
+                break;
+              }
+              return _context.a(2);
+            case 1:
+              uid = info.file.uid;
+              _context.n = 2;
+              return getAudioDuration(info.file.response.url);
+            case 2:
+              duration = _context.v;
+              newAction = {
+                id: uid,
+                effectId: 'custom_video_effect',
+                flexible: true,
+                url: info.file.response.url,
+                start: currentMouseTime,
+                end: currentMouseTime + duration
+              };
+              onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [newAction]);
+            case 3:
+              return _context.a(2);
+          }
+        }, _callee);
+      }));
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+  };
   var _useDragLine = useDragLine(),
     dragLineData = _useDragLine.dragLineData,
     initDragLine = _useDragLine.initDragLine,
@@ -2577,7 +3049,33 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
     defaultGetMovePosition = _useDragLine.defaultGetMovePosition;
   var editAreaRef = useRef();
   var gridRef = useRef();
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentMouseTime = _useState2[0],
+    setCurrentMouseTime = _useState2[1];
   var heightRef = useRef(-1);
+  var uploadRef = useRef();
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dropPreview = _useState4[0],
+    setDropPreview = _useState4[1];
+  // 处理拖拽上传事件
+  var handleDrop = function handleDrop(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    // 计算鼠标所在位置的时间
+    if (!editAreaRef.current) return;
+    var rect = editAreaRef.current.getBoundingClientRect();
+    var position = e.clientX - rect.x;
+    var left = position + scrollLeft;
+    var time = parserPixelToTime(left, {
+      startLeft: startLeft,
+      scale: scale,
+      scaleWidth: scaleWidth
+    });
+    setCurrentMouseTime(time);
+    console.log('拖拽上传位置的时间:', time);
+  };
   // ref 数据
   useImperativeHandle(ref, function () {
     return {
@@ -2627,12 +3125,12 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   };
   /** 获取每个cell渲染内容 */
-  var cellRenderer = function cellRenderer(_ref) {
-    var rowIndex = _ref.rowIndex,
-      key = _ref.key,
-      style = _ref.style;
+  var cellRenderer = function cellRenderer(_ref2) {
+    var rowIndex = _ref2.rowIndex,
+      key = _ref2.key,
+      style = _ref2.style;
     var row = editorData[rowIndex]; // 行数据
-    return /*#__PURE__*/React.createElement(EditRow, _objectSpread2(_objectSpread2({}, props), {}, {
+    var editRow = /*#__PURE__*/React.createElement(EditRow, _objectSpread2(_objectSpread2({}, props), {}, {
       style: _objectSpread2(_objectSpread2({}, style), {}, {
         backgroundPositionX: "0, ".concat(startLeft, "px"),
         backgroundSize: "".concat(startLeft, "px, ").concat(scaleWidth, "px")
@@ -2642,6 +3140,9 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
       rowHeight: (row === null || row === void 0 ? void 0 : row.rowHeight) || _rowHeight,
       rowData: row,
       dragLineData: dragLineData,
+      allowCreateTrack: allowCreateTrack,
+      setDropPreview: setDropPreview,
+      containerRef: containerRef,
       onActionMoveStart: function onActionMoveStart(data) {
         handleInitDragLine(data);
         return _onActionMoveStart && _onActionMoveStart(data);
@@ -2667,6 +3168,26 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return _onActionMoveEnd && _onActionMoveEnd(data);
       }
     }));
+    if (canUpload || (row === null || row === void 0 ? void 0 : row.canUpload)) {
+      return /*#__PURE__*/React.createElement(Upload, {
+        ref: uploadRef,
+        key: key,
+        style: _objectSpread2(_objectSpread2({
+          width: '100%',
+          display: 'block'
+        }, style), {}, {
+          top: 0
+        }),
+        beforeUpload: onBeforeUpload,
+        onChange: handleUploadChange(row),
+        showUploadList: false,
+        openFileDialogOnClick: false,
+        customRequest: customRequest,
+        onDrop: handleDrop,
+        type: "drag"
+      }, editRow);
+    }
+    return editRow;
   };
   useLayoutEffect(function () {
     var _gridRef$current;
@@ -2680,7 +3201,7 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [editorData]);
   var _totalHeight = editorData.reduce(function (prev, cur) {
     return prev + (cur.rowHeight || _rowHeight);
-  }, 0) + 32;
+  }, 0) + ((className || '').indexOf('1') > -1 ? 12 : 32);
   return /*#__PURE__*/React.createElement("div", {
     ref: editAreaRef,
     className: prefix('edit-area') + " ".concat((className || '').replace('timeline-editor', '') || ''),
@@ -2692,9 +3213,9 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
     style: {
       height: isMulti ? _totalHeight : 'unset'
     }
-  }, function (_ref2) {
-    var width = _ref2.width,
-      height = _ref2.height;
+  }, function (_ref3) {
+    var width = _ref3.width,
+      height = _ref3.height;
     // 获取全部高度
     var totalHeight = 0;
     // 高度列表
@@ -2723,26 +3244,50 @@ var EditArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
       columnWidth: Math.max(scaleCount * scaleWidth + startLeft, width),
       width: width,
       height: height,
-      rowHeight: function rowHeight(_ref3) {
-        var index = _ref3.index;
+      rowHeight: function rowHeight(_ref4) {
+        var index = _ref4.index;
         return heights[index] || _rowHeight;
       },
       overscanRowCount: 10,
       overscanColumnCount: 0,
       onScroll: function onScroll(param) {
-        console.log(param, 'onScroll');
         _onScroll(param);
       }
     });
   }), dragLine && /*#__PURE__*/React.createElement(DragLines, _objectSpread2({
     scrollLeft: scrollLeft
-  }, dragLineData)));
+  }, dragLineData)), dropPreview && function () {
+    // 计算预览指示器的位置
+    var top = 0;
+    for (var i = 0; i < editorData.length; i++) {
+      if (dropPreview.position === 'before' && i === dropPreview.rowIndex) {
+        break;
+      }
+      top += editorData[i].rowHeight || _rowHeight;
+      if (dropPreview.position === 'after' && i === dropPreview.rowIndex) {
+        break;
+      }
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: top - scrollTop,
+        height: '2px',
+        backgroundColor: 'transparent',
+        borderTop: '2px dashed #1890ff',
+        zIndex: 1000,
+        pointerEvents: 'none'
+      }
+    });
+  }());
 });
 
 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);
 
-var css_248z$6 = ".timeline-editor-time-area {\n  position: relative;\n  height: 32px;\n  flex: 0 0 auto;\n}\n.timeline-editor-time-area .ReactVirtualized__Grid {\n  outline: none;\n}\n.timeline-editor-time-area .ReactVirtualized__Grid::-webkit-scrollbar {\n  display: none;\n}\n.timeline-editor-time-area-interact {\n  position: absolute;\n  cursor: pointer;\n  left: 0;\n  top: 0;\n}\n.timeline-editor-time-unit {\n  border-right: 1px solid rgba(255, 255, 255, 0.2);\n  position: relative;\n  box-sizing: content-box;\n  height: 4px !important;\n  bottom: 0 !important;\n  top: auto !important;\n}\n.timeline-editor-time-unit-big {\n  height: 8px !important;\n}\n.timeline-editor-time-unit-scale {\n  color: rgba(255, 255, 255, 0.6);\n  position: absolute;\n  right: 0;\n  top: 0;\n  transform: translate(50%, -100%);\n}\n.light.timeline-editor .timeline-editor-time-unit {\n  border-color: #666;\n}\n.light.timeline-editor .timeline-editor-time-unit-scale {\n  color: #111;\n}\n";
+var css_248z$6 = ".timeline-editor-time-area {\n  position: relative;\n  height: 32px;\n  flex: 0 0 auto;\n}\n.timeline-editor-time-area .ReactVirtualized__Grid {\n  outline: none;\n}\n.timeline-editor-time-area .ReactVirtualized__Grid::-webkit-scrollbar {\n  display: none;\n}\n.timeline-editor-time-area-interact {\n  position: absolute;\n  cursor: pointer;\n  left: 0;\n  top: 0;\n}\n.timeline-editor-time-unit {\n  border-right: 1px solid rgba(255, 255, 255, 0.2);\n  position: relative;\n  box-sizing: content-box;\n  height: 4px !important;\n  bottom: 0 !important;\n  top: auto !important;\n}\n.timeline-editor-time-unit-big {\n  height: 8px !important;\n}\n.timeline-editor-time-unit-scale {\n  color: rgba(255, 255, 255, 0.6);\n  position: absolute;\n  right: 0;\n  top: 0;\n  transform: translate(50%, -100%);\n}\n.light.timeline-editor .timeline-editor-time-unit {\n  border-color: #111;\n}\n.light.timeline-editor .timeline-editor-time-unit-scale {\n  color: #666;\n}\n";
 styleInject(css_248z$6);
 
 /** 动画时间轴组件 */
@@ -2859,11 +3404,14 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
     engine = checkedProps.engine,
     _checkedProps$autoReR = checkedProps.autoReRender,
     autoReRender = _checkedProps$autoReR === void 0 ? true : _checkedProps$autoReR,
-    onScrollVertical = checkedProps.onScroll;
+    onScrollVertical = checkedProps.onScroll,
+    _checkedProps$allowCr = checkedProps.allowCreateTrack,
+    allowCreateTrack = _checkedProps$allowCr === void 0 ? true : _checkedProps$allowCr;
   var engineRef = useRef(engine || new TimelineEngine());
   var domRef = useRef();
   var areaRef = useRef();
   var scrollSync = useRef();
+  var containerRef = useRef();
   // 编辑器数据
   var _useState = useState(data),
     _useState2 = _slicedToArray(_useState, 2),
@@ -3070,11 +3618,18 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
       scrollLeft: scrollLeft,
       setEditorData: handleEditorDataChange,
       deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
+      allowCreateTrack: allowCreateTrack,
       onScroll: function onScroll(params) {
         _onScroll(params);
         onScrollVertical && onScrollVertical(params);
       }
-    }))) : null, areaCount > 1 ? Object.keys(groupedData).map(function (key, index) {
+    }))) : null, areaCount > 1 ? /*#__PURE__*/React.createElement("div", {
+      id: 'time-editor-container',
+      ref: containerRef,
+      style: {
+        overflow: 'auto'
+      }
+    }, Object.keys(groupedData).map(function (key, index) {
       var handleGroupDataChange = function handleGroupDataChange(updatedData) {
         var mergedData = editorData.filter(function (item) {
           return String(item.type) !== key;
@@ -3093,9 +3648,9 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
       };
       return /*#__PURE__*/React.createElement(EditArea, _objectSpread2(_objectSpread2({
         key: key,
-        isMulti: areaCount > 1,
-        className: index !== 0 ? "no-flex ".concat(key, " ").concat(index) : "overflow-hidden ".concat(key, " ").concat(index)
+        isMulti: areaCount > 1
       }, checkedProps), {}, {
+        className: index !== 0 ? "no-flex ".concat(key, " ").concat(index) : "overflow-hidden ".concat(key, " ").concat(index),
         timelineWidth: width,
         ref: function ref(_ref4) {
           return areaRef.current = _ref4 === null || _ref4 === void 0 ? void 0 : _ref4.domRef.current;
@@ -3109,12 +3664,14 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
         scrollLeft: scrollLeft,
         setEditorData: handleGroupDataChange,
         deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
+        allowCreateTrack: allowCreateTrack,
+        containerRef: containerRef,
         onScroll: function onScroll(params) {
           _onScroll(params);
           onScrollVertical && onScrollVertical(params);
         }
       }));
-    }) : null, !hideCursor && (/*#__PURE__*/React.createElement(Cursor, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
+    })) : null, !hideCursor && (/*#__PURE__*/React.createElement(Cursor, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
       timelineWidth: width,
       disableDrag: isPlaying,
       scrollLeft: scrollLeft,