sense-react-timeline-editor 1.1.4 → 1.1.6

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState, useLayoutEffect, useCallback } from 'react';
+import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState, useLayoutEffect, useCallback, memo, forwardRef, useMemo } from 'react';
 import { AutoSizer, Grid, ScrollSync } from 'react-virtualized';
 import { useThrottleEffect, useThrottleFn } from 'ahooks';
 import { prefixNames } from 'framework-utils';
@@ -7,6 +7,7 @@ import { useSelectionContainer } from '@air/react-drag-to-select';
 import { Upload, message } from 'antd/es';
 import { Howl } from 'howler';
 import { groupBy } from 'lodash-es';
+import useSize from 'ahooks/es/useSize';
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -2081,38 +2082,12 @@ var Cursor = function Cursor(_ref) {
   })));
 };
 
-var css_248z$1 = ".timeline-editor-drag-line-container {\n  position: absolute;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.timeline-editor-drag-line {\n  width: 0;\n  position: absolute;\n  top: 0;\n  height: 99%;\n  border-left: 1px dashed rgba(82, 151, 255, 0.6);\n}\n";
+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 DragLines = function DragLines(_ref) {
-  var isMoving = _ref.isMoving,
-    _ref$movePositions = _ref.movePositions,
-    movePositions = _ref$movePositions === void 0 ? [] : _ref$movePositions,
-    _ref$assistPositions = _ref.assistPositions,
-    assistPositions = _ref$assistPositions === void 0 ? [] : _ref$assistPositions,
-    scrollLeft = _ref.scrollLeft;
-  return /*#__PURE__*/React.createElement("div", {
-    className: prefix('drag-line-container')
-  }, isMoving && movePositions.filter(function (item) {
-    return assistPositions.includes(item);
-  }).map(function (linePos, index) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: index,
-      className: prefix('drag-line'),
-      style: {
-        left: linePos - scrollLeft
-      }
-    });
-  }));
-};
-
-var css_248z$2 = ".timeline-editor .ant-upload-wrapper .ant-upload-drag {\n  border: none !important;\n  background: none !important;\n}\n.timeline-editor:hover .timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar {\n  height: 4px;\n}\n.timeline-editor-edit-area {\n  flex: 1 1 auto;\n  margin-top: 10px;\n  overflow: hidden;\n  position: relative;\n}\n.timeline-editor-edit-area.no-flex {\n  flex: 0 0 auto;\n}\n.timeline-editor-edit-area.overflow-hidden {\n  overflow: hidden;\n}\n.timeline-editor-edit-area.overflow-hidden .ReactVirtualized__Grid {\n  overflow: hidden !important;\n  height: initial !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid {\n  outline: none !important;\n  overflow: overlay !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar-track {\n  background-color: transparent !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar-thumb {\n  background: #666;\n  border-radius: 16px;\n}\n.timeline-editor-selection-box {\n  position: fixed;\n  border: 2px solid #1890ff;\n  background-color: rgba(24, 144, 255, 0.1);\n  pointer-events: none;\n  z-index: 9999;\n  box-shadow: 0 0 8px rgba(24, 144, 255, 0.3);\n  left: -100px;\n}\n";
+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";
 styleInject(css_248z$2);
 
-var css_248z$3 = ".timeline-editor-action {\n  position: absolute;\n  left: 0;\n  top: 0;\n  background-color: #c6cbd2;\n  display: flex;\n  align-items: center;\n}\n.timeline-editor-action[data-action-drag=\"true\"] {\n  box-shadow: 0px 8px 8px rgba(77, 54, 41, 0.08);\n  border-radius: 34px;\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 _excluded = ["left", "width", "top"];
@@ -2811,7 +2786,7 @@ var EditActionO = function EditActionO(_ref) {
     height: rowHeight,
     grid: gridSnap && gridSize || DEFAULT_MOVE_GRID,
     adsorptionDistance: gridSnap ? Math.max((gridSize || DEFAULT_MOVE_GRID) / 2, DEFAULT_ADSORPTION_DISTANCE) : DEFAULT_ADSORPTION_DISTANCE,
-    adsorptionPositions: dragLineData.assistPositions,
+    // adsorptionPositions={dragLineData?.assistPositions}
     bounds: {
       left: leftLimit,
       right: rightLimit,
@@ -2909,8 +2884,8 @@ var EditActionO = function EditActionO(_ref) {
 };
 var EditAction = /*#__PURE__*/React.memo(EditActionO);
 
-var css_248z$4 = ".timeline-editor-edit-row {\n  background-repeat: no-repeat, repeat;\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n}\n.timeline-editor-edit-row.preview-row {\n  background-color: rgba(100, 150, 255, 0.15);\n  border: 1px dashed rgba(100, 150, 255, 0.5);\n  opacity: 0.8;\n  transition: all 0.2s ease;\n}\n.timeline-editor-edit-row.selected {\n  background-color: rgba(24, 144, 255, 0.08);\n  box-shadow: inset 0 0 0 2px rgba(24, 144, 255, 0.4);\n  position: relative;\n  z-index: 10;\n}\n.timeline-editor-edit-row.selected::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background-color: #1890ff;\n}\n.timeline-editor-edit-row.dragging {\n  opacity: 0.6;\n  cursor: move;\n}\n";
-styleInject(css_248z$4);
+var css_248z$3 = ".timeline-editor-edit-row {\n  background-repeat: no-repeat, repeat;\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n}\n.timeline-editor-edit-row.preview-row {\n  background-color: rgba(100, 150, 255, 0.15);\n  border: 1px dashed rgba(100, 150, 255, 0.5);\n  opacity: 0.8;\n  transition: all 0.2s ease;\n}\n.timeline-editor-edit-row.selected {\n  background-color: rgba(24, 144, 255, 0.08);\n  box-shadow: inset 0 0 0 2px rgba(24, 144, 255, 0.4);\n  position: relative;\n  z-index: 10;\n}\n.timeline-editor-edit-row.selected::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background-color: #1890ff;\n}\n.timeline-editor-edit-row.dragging {\n  opacity: 0.6;\n  cursor: move;\n}\n";
+styleInject(css_248z$3);
 
 var EditRow = function EditRow(props) {
   var rowData = props.rowData,
@@ -2965,8 +2940,7 @@ var EditRow = function EditRow(props) {
       }
     },
     onClick: function onClick(e) {
-      var _e$target;
-      var action = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.closest('.timeline-editor-action');
+      // const action = (e.target as HTMLElement)?.closest('.timeline-editor-action');
       var time = handleTime(e);
       if (rowData && onClickRow) {
         onClickRow(e, {
@@ -2974,12 +2948,10 @@ var EditRow = function EditRow(props) {
           time: time
         });
       }
-      if (hideCursor) return;
-      if (setCursor && !action) {
-        setCursor({
-          time: time
-        });
-      }
+      // if (hideCursor) return;
+      // if (setCursor && !action) {
+      //   setCursor({ time });
+      // }
     },
     onDoubleClick: function onDoubleClick(e) {
       if (rowData && onDoubleClickRow) {
@@ -3014,112 +2986,6 @@ var EditRow = function EditRow(props) {
   }));
 };
 
-function useDragLine() {
-  var _useState = useState({
-      isMoving: false,
-      movePositions: [],
-      assistPositions: []
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    dragLineData = _useState2[0],
-    setDragLineData = _useState2[1];
-  /** 获取辅助线 */
-  var defaultGetAssistPosition = function defaultGetAssistPosition(data) {
-    var editorData = data.editorData,
-      assistActionIds = data.assistActionIds,
-      action = data.action,
-      row = data.row,
-      scale = data.scale,
-      scaleWidth = data.scaleWidth,
-      startLeft = data.startLeft,
-      cursorLeft = data.cursorLeft,
-      hideCursor = data.hideCursor;
-    var otherActions = [];
-    if (assistActionIds) {
-      editorData.forEach(function (rowItem) {
-        rowItem.actions.forEach(function (actionItem) {
-          if (assistActionIds.includes(actionItem.id)) otherActions.push(actionItem);
-        });
-      });
-    } else {
-      editorData.forEach(function (rowItem) {
-        if (rowItem.id !== row.id) {
-          otherActions.push.apply(otherActions, _toConsumableArray(rowItem.actions));
-        } else {
-          rowItem.actions.forEach(function (actionItem) {
-            if (actionItem.id !== action.id) otherActions.push(actionItem);
-          });
-        }
-      });
-    }
-    var positions = parserActionsToPositions(otherActions, {
-      startLeft: startLeft,
-      scale: scale,
-      scaleWidth: scaleWidth
-    });
-    if (!hideCursor) positions.push(cursorLeft);
-    return positions;
-  };
-  /** 获取当前移动标记 */
-  var defaultGetMovePosition = function defaultGetMovePosition(data) {
-    var start = data.start,
-      end = data.end,
-      dir = data.dir,
-      scale = data.scale,
-      scaleWidth = data.scaleWidth,
-      startLeft = data.startLeft;
-    var _parserTimeToTransfor = parserTimeToTransform({
-        start: start,
-        end: end
-      }, {
-        startLeft: startLeft,
-        scaleWidth: scaleWidth,
-        scale: scale
-      }),
-      left = _parserTimeToTransfor.left,
-      width = _parserTimeToTransfor.width;
-    if (!dir) return [left, left + width];
-    return dir === "right" ? [left + width] : [left];
-  };
-  /** 初始化draglines */
-  var initDragLine = function initDragLine(data) {
-    var movePositions = data.movePositions,
-      assistPositions = data.assistPositions;
-    setDragLineData({
-      isMoving: true,
-      movePositions: movePositions || [],
-      assistPositions: assistPositions || []
-    });
-  };
-  /** 更新dragline */
-  var updateDragLine = function updateDragLine(data) {
-    var movePositions = data.movePositions,
-      assistPositions = data.assistPositions;
-    setDragLineData(function (pre) {
-      return _objectSpread2(_objectSpread2({}, pre), {}, {
-        movePositions: movePositions || pre.movePositions,
-        assistPositions: assistPositions || pre.assistPositions
-      });
-    });
-  };
-  /** 释放draglines */
-  var disposeDragLine = function disposeDragLine() {
-    setDragLineData({
-      isMoving: false,
-      movePositions: [],
-      assistPositions: []
-    });
-  };
-  return {
-    initDragLine: initDragLine,
-    updateDragLine: updateDragLine,
-    disposeDragLine: disposeDragLine,
-    dragLineData: dragLineData,
-    defaultGetAssistPosition: defaultGetAssistPosition,
-    defaultGetMovePosition: defaultGetMovePosition
-  };
-}
-
 var useRowSelection = function useRowSelection(options) {
   var editorData = options.editorData,
     rowHeight = options.rowHeight,
@@ -3764,7 +3630,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 totalDuration, _newAction, uid, duration, newAction;
+        var hasDefault, totalDuration, _newAction, uid, duration, newAction;
         return _regenerator().w(function (_context) {
           while (1) switch (_context.n) {
             case 0:
@@ -3775,11 +3641,30 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
               }
               return _context.a(2);
             case 1:
-              if (info.file.response) {
+              if (!(info.file.status === 'error')) {
                 _context.n = 2;
                 break;
               }
-              totalDuration = row.actions.reduce(function (max, current) {
+              onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [{
+                id: info.file.uid,
+                isUploading: false,
+                start: 0,
+                end: 0,
+                effectId: 'custom_video_effect',
+                isError: true,
+                segment_type: 'bgm',
+                uid: info.file.uid
+              }]);
+              return _context.a(2);
+            case 2:
+              if (info.file.response) {
+                _context.n = 3;
+                break;
+              }
+              hasDefault = row.actions.some(function (action) {
+                return action.id === 'upload-bg-music';
+              });
+              totalDuration = hasDefault ? 0 : row.actions.reduce(function (max, current) {
                 var _max$end;
                 var currentEnd = current.end || 0;
                 var maxEnd = (_max$end = max === null || max === void 0 ? void 0 : max.end) !== null && _max$end !== void 0 ? _max$end : 0;
@@ -3800,11 +3685,11 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
               };
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [_newAction]);
               return _context.a(2);
-            case 2:
+            case 3:
               uid = info.file.uid;
-              _context.n = 3;
+              _context.n = 4;
               return getAudioDuration(info.file.response.url);
-            case 3:
+            case 4:
               duration = _context.v;
               newAction = {
                 id: ((_info$file$response = info.file.response) === null || _info$file$response === void 0 ? void 0 : _info$file$response.id) || uid,
@@ -3819,7 +3704,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 4:
+            case 5:
               return _context.a(2);
           }
         }, _callee);
@@ -3829,13 +3714,6 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
       };
     }();
   };
-  var _useDragLine = useDragLine(),
-    dragLineData = _useDragLine.dragLineData,
-    initDragLine = _useDragLine.initDragLine,
-    updateDragLine = _useDragLine.updateDragLine,
-    disposeDragLine = _useDragLine.disposeDragLine,
-    defaultGetAssistPosition = _useDragLine.defaultGetAssistPosition,
-    defaultGetMovePosition = _useDragLine.defaultGetMovePosition;
   var editAreaRef = useRef();
   var gridRef = useRef();
   var _useState = useState(0),
@@ -3937,44 +3815,10 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
     };
   });
   var handleInitDragLine = function handleInitDragLine(data) {
-    if (dragLine) {
-      var assistActionIds = getAssistDragLineActionIds && getAssistDragLineActionIds({
-        action: data.action,
-        row: data.row,
-        editorData: editorData
-      });
-      var cursorLeft = parserTimeToPixel(cursorTime, {
-        scaleWidth: scaleWidth,
-        scale: scale,
-        startLeft: startLeft
-      });
-      var assistPositions = defaultGetAssistPosition({
-        editorData: editorData,
-        assistActionIds: assistActionIds,
-        action: data.action,
-        row: data.row,
-        scale: scale,
-        scaleWidth: scaleWidth,
-        startLeft: startLeft,
-        hideCursor: hideCursor,
-        cursorLeft: cursorLeft
-      });
-      initDragLine({
-        assistPositions: assistPositions
-      });
-    }
+    _onActionMoveStart === null || _onActionMoveStart === void 0 ? void 0 : _onActionMoveStart(data);
   };
   var handleUpdateDragLine = function handleUpdateDragLine(data) {
-    if (dragLine) {
-      var movePositions = defaultGetMovePosition(_objectSpread2(_objectSpread2({}, data), {}, {
-        startLeft: startLeft,
-        scaleWidth: scaleWidth,
-        scale: scale
-      }));
-      updateDragLine({
-        movePositions: movePositions
-      });
-    }
+    _onActionMoving === null || _onActionMoving === void 0 ? void 0 : _onActionMoving(data);
   };
   useEffect(function () {
     if (!(engineRef === null || engineRef === void 0 ? void 0 : engineRef.current)) return;
@@ -4058,7 +3902,6 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
       key: key,
       rowHeight: (row === null || row === void 0 ? void 0 : row.rowHeight) || _rowHeight,
       rowData: row,
-      dragLineData: dragLineData,
       allowCreateTrack: allowCreateTrack,
       setDropPreview: setDropPreview,
       containerRef: containerRef,
@@ -4100,11 +3943,9 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return _onActionResizing && _onActionResizing(data);
       },
       onActionResizeEnd: function onActionResizeEnd(data) {
-        disposeDragLine();
         return _onActionResizeEnd && _onActionResizeEnd(data);
       },
       onActionMoveEnd: function onActionMoveEnd(data) {
-        disposeDragLine();
         // 传递拖拽结束参数给多选拖拽处理
         onDragEnd({
           actionId: data.action.id,
@@ -4216,9 +4057,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
         _onScroll(param);
       }
     });
-  }), /*#__PURE__*/React.createElement(DragSelection, null), dragLine && /*#__PURE__*/React.createElement(DragLines, _objectSpread2({
-    scrollLeft: scrollLeft
-  }, dragLineData)), dragIndicator && function () {
+  }), /*#__PURE__*/React.createElement(DragSelection, null), dragIndicator && function () {
     // 计算拖拽位置指示器的位置
     var top = 0;
     var targetIndex = dragIndicator.targetIndex;
@@ -4268,11 +4107,11 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 var EditArea = /*#__PURE__*/React.memo(EditAreaO);
 
-var css_248z$5 = ".timeline-editor {\n  height: 600px;\n  width: 600px;\n  min-height: 32px;\n  position: relative;\n  font-size: 12px;\n  font-family: \"PingFang SC\";\n  background-color: #191b1d;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.timeline-editor.light {\n  background-color: #fff;\n}\n";
-styleInject(css_248z$5);
+var css_248z$4 = ".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$4);
 
-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);
+var css_248z$5 = ".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$5);
 
 /** 动画时间轴组件 */
 var TimeArea = function TimeArea(_ref) {
@@ -4374,6 +4213,190 @@ var TimeArea = function TimeArea(_ref) {
   }));
 };
 
+var css_248z$6 = ".timeline-editor-drag-line-container {\n  position: absolute;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.timeline-editor-drag-line {\n  width: 0;\n  position: absolute;\n  top: 0;\n  height: 99%;\n  border-left: 0.5px solid #009C2C;\n}\n";
+styleInject(css_248z$6);
+
+/** 拖拽辅助线 */
+var DragLines = /*#__PURE__*/memo(function (_ref) {
+  var isMoving = _ref.isMoving,
+    _ref$movePositions = _ref.movePositions,
+    movePositions = _ref$movePositions === void 0 ? [] : _ref$movePositions,
+    _ref$assistPositions = _ref.assistPositions,
+    assistPositions = _ref$assistPositions === void 0 ? [] : _ref$assistPositions,
+    scrollLeft = _ref.scrollLeft;
+  var _ref2 = useSize(document.querySelector('#time-editor-container')) || {},
+    _ref2$height = _ref2.height,
+    height = _ref2$height === void 0 ? 0 : _ref2$height;
+  var tolerance = 5; // 容差范围，单位像素
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefix('drag-line-container'),
+    style: {
+      height: height || '100%'
+    }
+  }, isMoving && movePositions.map(function (movePos) {
+    // 查找在容差范围内的辅助线位置
+    var matchedAssistPos = assistPositions.find(function (assistPos) {
+      return Math.abs(movePos - assistPos) <= tolerance;
+    });
+    if (matchedAssistPos) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: matchedAssistPos,
+        className: prefix('drag-line'),
+        style: {
+          left: matchedAssistPos - scrollLeft
+        }
+      });
+    }
+    return null;
+  }));
+});
+
+var defaultGetAssistPosition = function defaultGetAssistPosition(data) {
+  var editorData = data.editorData,
+    assistActionIds = data.assistActionIds,
+    action = data.action,
+    row = data.row,
+    scale = data.scale,
+    scaleWidth = data.scaleWidth,
+    startLeft = data.startLeft,
+    cursorLeft = data.cursorLeft,
+    hideCursor = data.hideCursor;
+  var otherActions = [];
+  if (assistActionIds) {
+    editorData.forEach(function (rowItem) {
+      rowItem.actions.forEach(function (actionItem) {
+        if (assistActionIds.includes(actionItem.id)) otherActions.push(actionItem);
+      });
+    });
+  } else {
+    editorData.forEach(function (rowItem) {
+      if (rowItem.id !== row.id) {
+        otherActions.push.apply(otherActions, _toConsumableArray(rowItem.actions));
+      } else {
+        rowItem.actions.forEach(function (actionItem) {
+          if (actionItem.id !== action.id) otherActions.push(actionItem);
+        });
+      }
+    });
+  }
+  var positions = parserActionsToPositions(otherActions, {
+    startLeft: startLeft,
+    scale: scale,
+    scaleWidth: scaleWidth
+  });
+  if (!hideCursor) positions.push(cursorLeft);
+  return positions;
+};
+var defaultGetMovePosition = function defaultGetMovePosition(data) {
+  var start = data.start,
+    end = data.end,
+    dir = data.dir,
+    scale = data.scale,
+    scaleWidth = data.scaleWidth,
+    startLeft = data.startLeft;
+  var _parserTimeToTransfor = parserTimeToTransform({
+      start: start,
+      end: end
+    }, {
+      startLeft: startLeft,
+      scaleWidth: scaleWidth,
+      scale: scale
+    }),
+    left = _parserTimeToTransfor.left,
+    width = _parserTimeToTransfor.width;
+  if (!dir) return [left, left + width];
+  return dir === "right" ? [left + width] : [left];
+};
+var DragLineController = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (props, ref) {
+  var dragLine = props.dragLine,
+    editorData = props.editorData,
+    cursorTime = props.cursorTime,
+    scale = props.scale,
+    scaleWidth = props.scaleWidth,
+    startLeft = props.startLeft,
+    hideCursor = props.hideCursor,
+    scrollLeft = props.scrollLeft,
+    getAssistDragLineActionIds = props.getAssistDragLineActionIds;
+  var _useState = useState({
+      isMoving: false,
+      movePositions: [],
+      assistPositions: []
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragLineData = _useState2[0],
+    setDragLineData = _useState2[1];
+  console.log('dragLineData = ', dragLineData);
+  var initDragLine = useCallback(function (data) {
+    if (dragLine) {
+      var assistActionIds = getAssistDragLineActionIds && getAssistDragLineActionIds({
+        action: data.action,
+        row: data.row,
+        editorData: editorData
+      });
+      var cursorLeft = parserTimeToPixel(cursorTime, {
+        scaleWidth: scaleWidth,
+        scale: scale,
+        startLeft: startLeft
+      });
+      var assistPositions = defaultGetAssistPosition({
+        editorData: editorData,
+        assistActionIds: assistActionIds,
+        action: data.action,
+        row: data.row,
+        scale: scale,
+        scaleWidth: scaleWidth,
+        startLeft: startLeft,
+        hideCursor: hideCursor,
+        cursorLeft: cursorLeft
+      });
+      setDragLineData({
+        isMoving: true,
+        movePositions: [],
+        assistPositions: assistPositions
+      });
+    }
+  }, [dragLine, editorData, cursorTime, scale, scaleWidth, startLeft, hideCursor, getAssistDragLineActionIds]);
+  var updateDragLine = useCallback(function (data) {
+    if (dragLine) {
+      var movePositions = defaultGetMovePosition(_objectSpread2(_objectSpread2({}, data), {}, {
+        startLeft: startLeft,
+        scaleWidth: scaleWidth,
+        scale: scale
+      }));
+      setDragLineData(function (prev) {
+        return _objectSpread2(_objectSpread2({}, prev), {}, {
+          movePositions: movePositions
+        });
+      });
+    }
+  }, [dragLine, startLeft, scaleWidth, scale]);
+  var disposeDragLine = useCallback(function () {
+    setDragLineData({
+      isMoving: false,
+      movePositions: [],
+      assistPositions: []
+    });
+  }, []);
+  useImperativeHandle(ref, function () {
+    return {
+      initDragLine: initDragLine,
+      updateDragLine: updateDragLine,
+      disposeDragLine: disposeDragLine
+    };
+  }, [initDragLine, updateDragLine, disposeDragLine]);
+  var dragLinesProps = useMemo(function () {
+    return {
+      isMoving: dragLineData.isMoving,
+      movePositions: dragLineData.movePositions,
+      assistPositions: dragLineData.assistPositions,
+      scrollLeft: scrollLeft
+    };
+  }, [dragLineData.isMoving, dragLineData.movePositions, dragLineData.assistPositions, scrollLeft]);
+  if (!dragLine) return null;
+  return /*#__PURE__*/React.createElement(DragLines, _objectSpread2({}, dragLinesProps));
+}));
+DragLineController.displayName = "DragLineController";
+
 var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var checkedProps = checkProps(props);
   var style = props.style,
@@ -4385,6 +4408,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
     autoScroll = checkedProps.autoScroll,
     hideCursor = checkedProps.hideCursor,
     disableDrag = checkedProps.disableDrag,
+    dragLine = checkedProps.dragLine,
     scale = checkedProps.scale,
     scaleWidth = checkedProps.scaleWidth,
     startLeft = checkedProps.startLeft,
@@ -4428,6 +4452,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _useState0 = _slicedToArray(_useState9, 2),
     width = _useState0[0],
     setWidth = _useState0[1];
+  var dragLineControllerRef = useRef(null);
   var groupedData = groupBy(editorData, 'type');
   var areaCount = Object.keys(groupedData).length;
   var keys = Object.keys(groupedData);
@@ -4503,6 +4528,24 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
       scrollLeft: Math.max(scrollSync.current.state.scrollLeft + delta, 0)
     });
   };
+  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);
+    (_checkedProps$onActio2 = checkedProps.onActionResizeStart) === null || _checkedProps$onActio2 === void 0 ? void 0 : _checkedProps$onActio2.call(checkedProps, data);
+    (_dragLineControllerRe = dragLineControllerRef.current) === null || _dragLineControllerRe === void 0 ? void 0 : _dragLineControllerRe.initDragLine(data);
+  }, [checkedProps]);
+  var handleUpdateDragLine = useCallback(function (data) {
+    var _checkedProps$onActio3, _checkedProps$onActio4, _dragLineControllerRe2;
+    (_checkedProps$onActio3 = checkedProps.onActionMoving) === null || _checkedProps$onActio3 === void 0 ? void 0 : _checkedProps$onActio3.call(checkedProps, data);
+    (_checkedProps$onActio4 = checkedProps.onActionResizing) === null || _checkedProps$onActio4 === void 0 ? void 0 : _checkedProps$onActio4.call(checkedProps, data);
+    (_dragLineControllerRe2 = dragLineControllerRef.current) === null || _dragLineControllerRe2 === void 0 ? void 0 : _dragLineControllerRe2.updateDragLine(data);
+  }, [checkedProps]);
+  var handleDisposeDragLine = useCallback(function (data) {
+    var _checkedProps$onActio5, _checkedProps$onActio6, _dragLineControllerRe3;
+    (_checkedProps$onActio5 = checkedProps.onActionMoveEnd) === null || _checkedProps$onActio5 === void 0 ? void 0 : _checkedProps$onActio5.call(checkedProps, data);
+    (_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]);
   // 处理运行器相关数据
   useEffect(function () {
     var handleTime = function handleTime(_ref) {
@@ -4575,6 +4618,24 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     };
   });
+  var onClickTimeline = function onClickTimeline(e) {
+    var _e$target;
+    if (!domRef.current) return;
+    var rect = domRef.current.getBoundingClientRect();
+    var position = e.clientX - rect.x;
+    var left = position + scrollSync.current.state.scrollLeft;
+    var time = parserPixelToTime(left, {
+      startLeft: startLeft,
+      scale: scale,
+      scaleWidth: scaleWidth
+    });
+    var action = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.closest('.timeline-editor-action');
+    if (action || hideCursor) return;
+    console.log('onClickTimeline = ', time);
+    handleSetCursor({
+      time: time
+    });
+  };
   // 监听timeline区域宽度变化
   useEffect(function () {
     if (areaRef.current) {
@@ -4626,6 +4687,12 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
       deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
       allowCreateTrack: allowCreateTrack,
       onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
+      onActionMoveStart: handleInitDragLine,
+      onActionResizeStart: handleInitDragLine,
+      onActionMoving: handleUpdateDragLine,
+      onActionResizing: handleUpdateDragLine,
+      onActionMoveEnd: handleDisposeDragLine,
+      onActionResizeEnd: handleDisposeDragLine,
       onScroll: function onScroll(params) {
         _onScroll(params);
         onScrollVertical && onScrollVertical(params);
@@ -4635,7 +4702,8 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
       ref: containerRef,
       style: {
         height: '100%'
-      }
+      },
+      onClick: onClickTimeline
     }, Object.keys(groupedData).map(function (key, index) {
       var handleGroupDataChange = function handleGroupDataChange(updatedData) {
         var mergedData = editorData.filter(function (item) {
@@ -4682,6 +4750,12 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
         containerRef: containerRef,
         onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
         engineRef: engineRef,
+        onActionMoveStart: handleInitDragLine,
+        onActionResizeStart: handleInitDragLine,
+        onActionMoving: handleUpdateDragLine,
+        onActionResizing: handleUpdateDragLine,
+        onActionMoveEnd: handleDisposeDragLine,
+        onActionResizeEnd: handleDisposeDragLine,
         onScroll: function onScroll(params) {
           _onScroll(params);
           onScrollVertical && onScrollVertical(params);
@@ -4699,7 +4773,18 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
       areaRef: areaRef,
       scrollSync: scrollSync,
       deltaScrollLeft: autoScroll && handleDeltaScrollLeft
-    }))));
+    }))), /*#__PURE__*/React.createElement(DragLineController, {
+      ref: dragLineControllerRef,
+      dragLine: dragLine,
+      editorData: editorData,
+      cursorTime: cursorTime,
+      scale: scale,
+      scaleWidth: scaleWidth,
+      startLeft: startLeft,
+      hideCursor: hideCursor,
+      scrollLeft: scrollLeft,
+      getAssistDragLineActionIds: checkedProps.getAssistDragLineActionIds
+    }));
   }));
 });