sense-react-timeline-editor 1.1.8 → 1.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/components/cursor/cursor.d.ts +23 -5
  2. package/dist/components/edit_area/edit_row.d.ts +1 -1
  3. package/dist/components/time_area/time_area.d.ts +3 -1
  4. package/dist/components/timeline.d.ts +1 -1
  5. package/dist/engine/events.d.ts +8 -0
  6. package/dist/index.esm.js +154 -126
  7. package/dist/index.js +153 -125
  8. package/package.json +1 -1
package/dist/components/cursor/cursor.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React, { FC } from 'react';
1
+ import React from 'react';
2
2
  import { ScrollSync } from 'react-virtualized';
3
3
  import { CommonProp } from '../../interface/common_prop';
4
4
  import './cursor.less';
@@ -12,11 +12,29 @@ export declare type CursorProps = CommonProp & {
12
12
  left?: number;
13
13
  time?: number;
14
14
  }) => boolean;
15
- /** 时间轴区域dom ref */
15
+ /** 时间轴区域 dom ref */
16
16
  areaRef: React.MutableRefObject<HTMLDivElement>;
17
- /** 设置scroll left */
17
+ /** 设置 scroll left */
18
18
  deltaScrollLeft: (delta: number) => void;
19
- /** 滚动同步ref（TODO: 该数据用于临时解决scrollLeft拖住时不同步问题） */
19
+ /** 滚动同步 ref（TODO: 该数据用于临时解决 scrollLeft 拖住时不同步问题） */
20
20
  scrollSync: React.MutableRefObject<ScrollSync>;
21
21
  };
22
- export declare const Cursor: FC<CursorProps>;
22
+ export interface CursorApi {
23
+ updateLeft: (left: number) => void;
24
+ }
25
+ export declare const Cursor: React.ForwardRefExoticComponent<CommonProp & {
26
+ theme?: string;
27
+ /** 距离左侧滚动距离 */
28
+ scrollLeft: number;
29
+ /** 设置光标位置 */
30
+ setCursor: (param: {
31
+ left?: number;
32
+ time?: number;
33
+ }) => boolean;
34
+ /** 时间轴区域 dom ref */
35
+ areaRef: React.MutableRefObject<HTMLDivElement>;
36
+ /** 设置 scroll left */
37
+ deltaScrollLeft: (delta: number) => void;
38
+ /** 滚动同步 ref（TODO: 该数据用于临时解决 scrollLeft 拖住时不同步问题） */
39
+ scrollSync: React.MutableRefObject<ScrollSync>;
40
+ } & React.RefAttributes<CursorApi>>;
package/dist/components/edit_area/edit_row.d.ts CHANGED
@@ -29,6 +29,6 @@ export declare type EditRowProps = CommonProp & {
29
29
  left?: number;
30
30
  time?: number;
31
31
  }) => void;
32
- uploadBgMusic?: (file: File[]) => void;
32
+ uploadBgMusic?: (file: File[], row?: TimelineRow) => void;
33
33
  };
34
34
  export declare const EditRow: FC<EditRowProps>;
package/dist/components/time_area/time_area.d.ts CHANGED
@@ -1,7 +1,8 @@
1
- import { FC } from 'react';
1
+ import React, { FC } from 'react';
2
2
  import { OnScrollParams } from 'react-virtualized';
3
3
  import { CommonProp } from '../../interface/common_prop';
4
4
  import './time_area.less';
5
+ import { CursorApi } from '../cursor/cursor';
5
6
  /** 动画时间轴组件参数 */
6
7
  export declare type TimeAreaProps = CommonProp & {
7
8
  /** 左侧滚动距离 */
@@ -13,6 +14,7 @@ export declare type TimeAreaProps = CommonProp & {
13
14
  left?: number;
14
15
  time?: number;
15
16
  }) => void;
17
+ cursorRef: React.RefObject<CursorApi>;
16
18
  };
17
19
  /** 动画时间轴组件 */
18
20
  export declare const TimeArea: FC<TimeAreaProps>;
package/dist/components/timeline.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { TimelineEditor, TimelineState } from '../interface/timeline';
3
3
  import './timeline.less';
4
- export declare const Timeline: React.ForwardRefExoticComponent<TimelineEditor & React.RefAttributes<TimelineState>>;
4
+ export declare const Timeline: React.MemoExoticComponent<React.ForwardRefExoticComponent<TimelineEditor & React.RefAttributes<TimelineState>>>;
package/dist/engine/events.d.ts CHANGED
@@ -99,4 +99,12 @@ export interface EventTypes {
99
99
  "effect-leave": {
100
100
  id: string;
101
101
  };
102
+ /**
103
+ * 上传背景音乐事件
104
+ * @type {{ file: File }}
105
+ * @memberof EventTypes
106
+ */
107
+ "upload-bg-music": {
108
+ file: File;
109
+ };
102
110
  }
package/dist/index.esm.js CHANGED
@@ -4,7 +4,7 @@ import { useThrottleEffect, useThrottleFn } from 'ahooks';
4
4
  import { prefixNames } from 'framework-utils';
5
5
  import interact from 'interactjs';
6
6
  import { useSelectionContainer } from '@air/react-drag-to-select';
7
- import { Upload, message } from 'antd/es';
7
+ import { message } from 'antd/es';
8
8
  import { Howl } from 'howler';
9
9
  import { groupBy, throttle } from 'lodash-es';
10
10
  import useSize from 'ahooks/es/useSize';
@@ -404,7 +404,8 @@ var Events = /*#__PURE__*/_createClass(function Events() {
404
404
  ended: [],
405
405
  mousedown: [],
406
406
  "effect-play": [],
407
- "effect-leave": []
407
+ "effect-leave": [],
408
+ "upload-bg-music": []
408
409
  }, handlers);
409
410
  });
410
411
 
@@ -1973,26 +1974,38 @@ function styleInject(css, ref) {
1973
1974
  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";
1974
1975
  styleInject(css_248z);
1975
1976
 
1976
- var Cursor = function Cursor(_ref) {
1977
+ var Cursor = /*#__PURE__*/React.forwardRef(function (props, ref) {
1977
1978
  var _document$querySelect;
1978
- var theme = _ref.theme,
1979
- disableDrag = _ref.disableDrag,
1980
- cursorTime = _ref.cursorTime,
1981
- setCursor = _ref.setCursor,
1982
- startLeft = _ref.startLeft,
1983
- timelineWidth = _ref.timelineWidth,
1984
- scaleWidth = _ref.scaleWidth,
1985
- scale = _ref.scale,
1986
- scrollLeft = _ref.scrollLeft,
1987
- scrollSync = _ref.scrollSync,
1988
- areaRef = _ref.areaRef,
1989
- maxScaleCount = _ref.maxScaleCount,
1990
- deltaScrollLeft = _ref.deltaScrollLeft,
1991
- onCursorDragStart = _ref.onCursorDragStart,
1992
- onCursorDrag = _ref.onCursorDrag,
1993
- onCursorDragEnd = _ref.onCursorDragEnd;
1979
+ var theme = props.theme,
1980
+ disableDrag = props.disableDrag,
1981
+ cursorTime = props.cursorTime,
1982
+ setCursor = props.setCursor,
1983
+ startLeft = props.startLeft,
1984
+ timelineWidth = props.timelineWidth,
1985
+ scaleWidth = props.scaleWidth,
1986
+ scale = props.scale,
1987
+ scrollLeft = props.scrollLeft,
1988
+ scrollSync = props.scrollSync,
1989
+ areaRef = props.areaRef,
1990
+ maxScaleCount = props.maxScaleCount,
1991
+ deltaScrollLeft = props.deltaScrollLeft,
1992
+ onCursorDragStart = props.onCursorDragStart,
1993
+ onCursorDrag = props.onCursorDrag,
1994
+ onCursorDragEnd = props.onCursorDragEnd;
1995
+ console.log('Cursor cursorTime', cursorTime);
1994
1996
  var rowRnd = useRef();
1995
1997
  var draggingLeft = useRef();
1998
+ useImperativeHandle(ref, function () {
1999
+ return {
2000
+ updateLeft: function updateLeft(cursorTime) {
2001
+ rowRnd.current.updateLeft(parserTimeToPixel(cursorTime, {
2002
+ startLeft: startLeft,
2003
+ scaleWidth: scaleWidth,
2004
+ scale: scale
2005
+ }) - scrollLeft);
2006
+ }
2007
+ };
2008
+ });
1996
2009
  useThrottleEffect(function () {
1997
2010
  if (typeof draggingLeft.current === 'undefined') {
1998
2011
  // 非dragging时，根据穿参更新cursor刻度（防抖）
@@ -2005,7 +2018,7 @@ var Cursor = function Cursor(_ref) {
2005
2018
  }, [cursorTime, startLeft, scaleWidth, scale, scrollLeft], {
2006
2019
  wait: 10
2007
2020
  });
2008
- var clientHeight = ((_document$querySelect = document.querySelector("#time-editor-container")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
2021
+ var clientHeight = ((_document$querySelect = document.querySelector('#time-editor-container')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
2009
2022
  return /*#__PURE__*/React.createElement(RowDnd, {
2010
2023
  top: theme === 'light' ? 26 : 0,
2011
2024
  start: startLeft,
@@ -2040,8 +2053,8 @@ var Cursor = function Cursor(_ref) {
2040
2053
  onCursorDragEnd && onCursorDragEnd(time);
2041
2054
  draggingLeft.current = undefined;
2042
2055
  },
2043
- onDrag: function onDrag(_ref2) {
2044
- var left = _ref2.left;
2056
+ onDrag: function onDrag(_ref) {
2057
+ var left = _ref.left;
2045
2058
  var scroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
2046
2059
  var scrollLeft = scrollSync.current.state.scrollLeft;
2047
2060
  if (!scroll || scrollLeft === 0) {
@@ -2080,12 +2093,12 @@ var Cursor = function Cursor(_ref) {
2080
2093
  })), /*#__PURE__*/React.createElement("div", {
2081
2094
  className: prefix('cursor-area')
2082
2095
  })));
2083
- };
2096
+ });
2084
2097
 
2085
2098
  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";
2086
2099
  styleInject(css_248z$1);
2087
2100
 
2088
- 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";
2101
+ 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 transform: rotate(180deg);\n}\n.timeline-editor-action .timeline-editor-action-right-stretch {\n right: -3px;\n}\n";
2089
2102
  styleInject(css_248z$2);
2090
2103
 
2091
2104
  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 +2616,7 @@ var EditActionO = function EditActionO(_ref) {
2603
2616
  sourceRowItem.actions = sourceRowItem.actions.filter(function (item) {
2604
2617
  return item.id !== id;
2605
2618
  });
2619
+ actionItem.order = targetRowItem.order;
2606
2620
  // 添加到目标row
2607
2621
  targetRowItem.actions.push(actionItem);
2608
2622
  console.log('Target row actions after:', targetRowItem.actions.length);
@@ -2913,12 +2927,12 @@ var EditRow = function EditRow(props) {
2913
2927
  var classNames = ['edit-row'];
2914
2928
  if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('selected');
2915
2929
  var clientWidth = document.documentElement.clientWidth;
2916
- var timeStart = parserPixelToTime(scrollLeft, {
2930
+ var timeStart = parserPixelToTime(scrollLeft - 400, {
2917
2931
  startLeft: startLeft,
2918
2932
  scale: scale,
2919
2933
  scaleWidth: scaleWidth
2920
2934
  });
2921
- var timeEnd = parserPixelToTime(scrollLeft + clientWidth + 200, {
2935
+ var timeEnd = parserPixelToTime(scrollLeft + clientWidth + 400, {
2922
2936
  startLeft: startLeft,
2923
2937
  scale: scale,
2924
2938
  scaleWidth: scaleWidth
@@ -2947,8 +2961,8 @@ var EditRow = function EditRow(props) {
2947
2961
  }, [visibleCount, visibleActions.length]);
2948
2962
  useEffect(function () {
2949
2963
  setVisibleCount(20);
2950
- }, [scrollLeft, rowData === null || rowData === void 0 ? void 0 : rowData.id]);
2951
- var handleTime = function handleTime(e) {
2964
+ }, [rowData === null || rowData === void 0 ? void 0 : rowData.id]);
2965
+ var handleTime = useCallback(function (e) {
2952
2966
  if (!areaRef.current) return;
2953
2967
  var rect = areaRef.current.getBoundingClientRect();
2954
2968
  var position = e.clientX - rect.x;
@@ -2959,7 +2973,7 @@ var EditRow = function EditRow(props) {
2959
2973
  scaleWidth: scaleWidth
2960
2974
  });
2961
2975
  return time;
2962
- };
2976
+ }, [areaRef, scrollLeft, startLeft, scale, scaleWidth]);
2963
2977
  return /*#__PURE__*/React.createElement("div", {
2964
2978
  className: "".concat(prefix.apply(void 0, classNames), " ").concat(((rowData === null || rowData === void 0 ? void 0 : rowData.classNames) || []).join(' ')),
2965
2979
  style: style,
@@ -2976,7 +2990,7 @@ var EditRow = function EditRow(props) {
2976
2990
  var files = e.dataTransfer.files;
2977
2991
  // @ts-expect-error 因为 files 是 FileList 类型，不能直接修改 uid 属性
2978
2992
  files[0].uid = new Date().getTime().toString();
2979
- uploadBgMusic === null || uploadBgMusic === void 0 ? void 0 : uploadBgMusic(Array.from(files));
2993
+ uploadBgMusic === null || uploadBgMusic === void 0 ? void 0 : uploadBgMusic(Array.from(files), rowData);
2980
2994
  }
2981
2995
  },
2982
2996
  onClick: function onClick(e) {
@@ -3399,9 +3413,9 @@ var useRowDrag = function useRowDrag(options) {
3399
3413
  if (up === 0) {
3400
3414
  top = 0;
3401
3415
  } else if (up === 1) {
3402
- top = -20;
3416
+ top = 35;
3403
3417
  } else if (up === -1) {
3404
- top = 20;
3418
+ top = -35;
3405
3419
  }
3406
3420
  // 如果没有初始位置数据，说明不是有效的多选拖拽
3407
3421
  if (!setEditorData || initialPositions.size === 0) {
@@ -3644,7 +3658,6 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
3644
3658
  onUpdateEditorData = props.onUpdateEditorData,
3645
3659
  onMutiSelectChange = props.onMutiSelectChange,
3646
3660
  _props$canUpload = props.canUpload,
3647
- canUpload = _props$canUpload === void 0 ? false : _props$canUpload,
3648
3661
  customRequest = props.customRequest,
3649
3662
  setEditorData = props.setEditorData,
3650
3663
  setCursor = props.setCursor,
@@ -3670,7 +3683,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
3670
3683
  return /*#__PURE__*/function () {
3671
3684
  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(info) {
3672
3685
  var _info$file$response, _info$file;
3673
- var hasDefault, totalDuration, _newAction, uid, duration, newAction;
3686
+ var maxSize, hasDefault, totalDuration, _newAction, uid, duration, newAction;
3674
3687
  return _regenerator().w(function (_context) {
3675
3688
  while (1) switch (_context.n) {
3676
3689
  case 0:
@@ -3681,16 +3694,23 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
3681
3694
  }
3682
3695
  return _context.a(2);
3683
3696
  case 1:
3684
- if (!(info.file.type !== 'audio/mp3' && info.file.type !== 'audio/wav' && info.file.type !== 'audio/mpeg')) {
3697
+ maxSize = 100 * 1024 * 1024;
3698
+ if (!(info.file.size > maxSize)) {
3685
3699
  _context.n = 2;
3686
3700
  break;
3687
3701
  }
3688
3702
  return _context.a(2, false);
3689
3703
  case 2:
3690
- if (!(info.file.status === 'error')) {
3704
+ if (!(info.file.type !== 'audio/mp3' && info.file.type !== 'audio/wav' && info.file.type !== 'audio/mpeg')) {
3691
3705
  _context.n = 3;
3692
3706
  break;
3693
3707
  }
3708
+ return _context.a(2, false);
3709
+ case 3:
3710
+ if (!(info.file.status === 'error')) {
3711
+ _context.n = 4;
3712
+ break;
3713
+ }
3694
3714
  onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [{
3695
3715
  id: info.file.uid,
3696
3716
  isUploading: false,
@@ -3702,9 +3722,9 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
3702
3722
  uid: info.file.uid
3703
3723
  }]);
3704
3724
  return _context.a(2);
3705
- case 3:
3725
+ case 4:
3706
3726
  if (info.file.response) {
3707
- _context.n = 4;
3727
+ _context.n = 5;
3708
3728
  break;
3709
3729
  }
3710
3730
  hasDefault = row.actions.some(function (action) {
@@ -3731,11 +3751,11 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
3731
3751
  };
3732
3752
  onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [_newAction]);
3733
3753
  return _context.a(2);
3734
- case 4:
3754
+ case 5:
3735
3755
  uid = info.file.uid;
3736
- _context.n = 5;
3756
+ _context.n = 6;
3737
3757
  return getAudioDuration(info.file.response.url);
3738
- case 5:
3758
+ case 6:
3739
3759
  duration = _context.v;
3740
3760
  newAction = {
3741
3761
  id: ((_info$file$response = info.file.response) === null || _info$file$response === void 0 ? void 0 : _info$file$response.id) || uid,
@@ -3750,7 +3770,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
3750
3770
  uid: (_info$file = info.file) === null || _info$file === void 0 ? void 0 : _info$file.uid
3751
3771
  };
3752
3772
  onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [newAction]);
3753
- case 6:
3773
+ case 7:
3754
3774
  return _context.a(2);
3755
3775
  }
3756
3776
  }, _callee);
@@ -3835,23 +3855,6 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
3835
3855
  window.removeEventListener('row-drag-end', handleDragEnd);
3836
3856
  };
3837
3857
  }, []);
3838
- // 处理拖拽上传事件
3839
- var handleDrop = function handleDrop(e) {
3840
- e.preventDefault();
3841
- e.stopPropagation();
3842
- // 计算鼠标所在位置的时间
3843
- if (!editAreaRef.current) return;
3844
- var rect = editAreaRef.current.getBoundingClientRect();
3845
- var position = e.clientX - rect.x;
3846
- var left = position + scrollLeft;
3847
- var time = parserPixelToTime(left, {
3848
- startLeft: startLeft,
3849
- scale: scale,
3850
- scaleWidth: scaleWidth
3851
- });
3852
- setCurrentMouseTime(time);
3853
- console.log('拖拽上传位置的时间:', time);
3854
- };
3855
3858
  // ref 数据
3856
3859
  useImperativeHandle(ref, function () {
3857
3860
  return {
@@ -3909,34 +3912,34 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
3909
3912
  window.removeEventListener('ctrl-click-action', handleCtrlClickAction);
3910
3913
  };
3911
3914
  }, [onCtrlClick, editorData, handleSelectionChange]);
3915
+ var uploadBgMusic = useCallback(function (file, row) {
3916
+ var canUpload = onBeforeUpload === null || onBeforeUpload === void 0 ? void 0 : onBeforeUpload(file[0]);
3917
+ if (!canUpload) return;
3918
+ var onSuccess = handleUploadChange(row);
3919
+ onSuccess({
3920
+ file: file[0],
3921
+ isUploading: true
3922
+ });
3923
+ customRequest === null || customRequest === void 0 ? void 0 : customRequest({
3924
+ file: file[0],
3925
+ onSuccess: onSuccess,
3926
+ method: 'POST',
3927
+ action: 'bgm',
3928
+ onError: function onError(err) {
3929
+ onSuccess({
3930
+ file: file[0],
3931
+ isUploading: false
3932
+ });
3933
+ console.error('Upload error:', err);
3934
+ }
3935
+ });
3936
+ }, [onBeforeUpload, handleUploadChange, customRequest]);
3912
3937
  /** 获取每个cell渲染内容 */
3913
3938
  var cellRenderer = function cellRenderer(_ref2) {
3914
3939
  var rowIndex = _ref2.rowIndex,
3915
3940
  key = _ref2.key,
3916
3941
  style = _ref2.style;
3917
3942
  var row = editorData[rowIndex]; // 行数据
3918
- var uploadBgMusic = function uploadBgMusic(file) {
3919
- var canUpload = onBeforeUpload === null || onBeforeUpload === void 0 ? void 0 : onBeforeUpload(file[0]);
3920
- if (!canUpload) return;
3921
- var onSuccess = handleUploadChange(row);
3922
- onSuccess({
3923
- file: file[0],
3924
- isUploading: true
3925
- });
3926
- customRequest === null || customRequest === void 0 ? void 0 : customRequest({
3927
- file: file[0],
3928
- onSuccess: onSuccess,
3929
- method: 'POST',
3930
- action: 'bgm',
3931
- onError: function onError(err) {
3932
- onSuccess({
3933
- file: file[0],
3934
- isUploading: false
3935
- });
3936
- console.error('Upload error:', err);
3937
- }
3938
- });
3939
- };
3940
3943
  var editRow = /*#__PURE__*/React.createElement(EditRow, _objectSpread2(_objectSpread2({}, props), {}, {
3941
3944
  uploadBgMusic: uploadBgMusic,
3942
3945
  style: _objectSpread2(_objectSpread2({}, style), {}, {
@@ -4008,30 +4011,30 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
4008
4011
  return;
4009
4012
  }
4010
4013
  }));
4011
- if (!!row && (canUpload || (row === null || row === void 0 ? void 0 : row.canUpload))) {
4012
- var _row$actions, _row$actions$, _row$actions2;
4013
- var isDefaultMusic = ((_row$actions = row.actions) === null || _row$actions === void 0 ? void 0 : (_row$actions$ = _row$actions[0]) === null || _row$actions$ === void 0 ? void 0 : _row$actions$.id) === 'upload-bg-music';
4014
- var tChildren = isDefaultMusic ? editRow : null;
4015
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Upload, {
4016
- ref: uploadRef,
4017
- key: key + 'upload',
4018
- style: _objectSpread2({
4019
- width: '100%',
4020
- display: 'block',
4021
- position: 'relative'
4022
- }, style),
4023
- beforeUpload: onBeforeUpload,
4024
- onChange: handleUploadChange(row),
4025
- showUploadList: false,
4026
- openFileDialogOnClick: ((_row$actions2 = row.actions) === null || _row$actions2 === void 0 ? void 0 : _row$actions2.filter(function (item) {
4027
- return item.effectId === 'effect2';
4028
- }).length) > 0,
4029
- customRequest: customRequest,
4030
- onDrop: handleDrop,
4031
- type: "drag",
4032
- accept: "audio/mp3,audio/wav,audio/mpeg"
4033
- }, tChildren), tChildren ? null : editRow);
4034
- }
4014
+ // if (!!row && (canUpload || row?.canUpload)) {
4015
+ // const isDefaultMusic = row.actions?.[0]?.id === 'upload-bg-music';
4016
+ // const tChildren = isDefaultMusic ? editRow : null;
4017
+ // return (
4018
+ // <>
4019
+ // <Upload
4020
+ // ref={uploadRef}
4021
+ // key={key + 'upload'}
4022
+ // style={{ width: '100%', display: 'block', position: 'relative', ...style }}
4023
+ // beforeUpload={onBeforeUpload}
4024
+ // onChange={handleUploadChange(row)}
4025
+ // showUploadList={false}
4026
+ // openFileDialogOnClick={row.actions?.filter((item) => item.effectId === 'effect2').length > 0}
4027
+ // customRequest={customRequest}
4028
+ // onDrop={handleDrop}
4029
+ // type="drag"
4030
+ // accept="audio/mp3,audio/wav,audio/mpeg"
4031
+ // >
4032
+ // {tChildren}
4033
+ // </Upload>
4034
+ // {tChildren ? null : editRow}
4035
+ // </>
4036
+ // );
4037
+ // }
4035
4038
  return editRow;
4036
4039
  };
4037
4040
  useLayoutEffect(function () {
@@ -4044,6 +4047,20 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
4044
4047
  useEffect(function () {
4045
4048
  gridRef.current.recomputeGridSize();
4046
4049
  }, [editorData]);
4050
+ useEffect(function () {
4051
+ var _engineRef$current2;
4052
+ var row = editorData[0]; // 行数据
4053
+ if (!row || row.type !== 'bg') {
4054
+ return;
4055
+ }
4056
+ (_engineRef$current2 = engineRef.current) === null || _engineRef$current2 === void 0 ? void 0 : _engineRef$current2.on('upload-bg-music', function (e) {
4057
+ uploadBgMusic([e.file], row);
4058
+ });
4059
+ return function () {
4060
+ var _engineRef$current3;
4061
+ (_engineRef$current3 = engineRef.current) === null || _engineRef$current3 === void 0 ? void 0 : _engineRef$current3.off('upload-bg-music');
4062
+ };
4063
+ }, [engineRef, uploadBgMusic, editorData]);
4047
4064
  var _totalHeight = editorData.reduce(function (prev, cur) {
4048
4065
  return prev + (cur.rowHeight || _rowHeight);
4049
4066
  }, 0) + ((className || '').indexOf('1') > -1 ? 12 : 32);
@@ -4087,7 +4104,6 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
4087
4104
  }
4088
4105
  }
4089
4106
  heightRef.current = height;
4090
- console.log('Math.max(scaleCount * scaleWidth + startLeft, width)', Math.max(scaleCount * scaleWidth + startLeft, width), ', width', width);
4091
4107
  return /*#__PURE__*/React.createElement(Grid, {
4092
4108
  columnCount: 1,
4093
4109
  rowCount: heights.length,
@@ -4175,11 +4191,13 @@ var TimeArea = function TimeArea(_ref) {
4175
4191
  scrollLeft = _ref.scrollLeft,
4176
4192
  onClickTimeArea = _ref.onClickTimeArea,
4177
4193
  getScaleRender = _ref.getScaleRender,
4178
- timelineWidth = _ref.timelineWidth;
4194
+ timelineWidth = _ref.timelineWidth,
4195
+ cursorRef = _ref.cursorRef;
4179
4196
  var gridRef = useRef();
4180
4197
  /** 是否显示细分刻度 */
4181
4198
  var showUnit = scaleSplitCount > 0;
4182
- /** 获取每个cell渲染内容 */
4199
+ var clientWidth = document.documentElement.clientWidth;
4200
+ /** 获取每个 cell 渲染内容 */
4183
4201
  var cellRenderer = function cellRenderer(_ref2) {
4184
4202
  var columnIndex = _ref2.columnIndex,
4185
4203
  key = _ref2.key,
@@ -4188,6 +4206,12 @@ var TimeArea = function TimeArea(_ref) {
4188
4206
  var classNames = ['time-unit'];
4189
4207
  if (isShowScale) classNames.push('time-unit-big');
4190
4208
  var item = (showUnit ? columnIndex / scaleSplitCount : columnIndex) * scale;
4209
+ var cellPixel = startLeft + columnIndex * (showUnit ? scaleWidth / scaleSplitCount : scaleWidth);
4210
+ var cellWidth = showUnit ? scaleWidth / scaleSplitCount : scaleWidth;
4211
+ var isVisible = cellPixel + cellWidth >= scrollLeft - 50 && cellPixel <= scrollLeft + clientWidth + 50;
4212
+ if (!isVisible) {
4213
+ return null;
4214
+ }
4191
4215
  return /*#__PURE__*/React.createElement("div", {
4192
4216
  key: key,
4193
4217
  style: style,
@@ -4252,7 +4276,7 @@ var TimeArea = function TimeArea(_ref) {
4252
4276
  scaleWidth: scaleWidth
4253
4277
  });
4254
4278
  var result = onClickTimeArea && onClickTimeArea(time, e);
4255
- if (result === false) return; // 返回false时阻止设置时间
4279
+ if (result === false) return; // 返回 false 时阻止设置时间
4256
4280
  setCursor({
4257
4281
  time: time
4258
4282
  });
@@ -4446,7 +4470,7 @@ var DragLineController = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (pro
4446
4470
  }));
4447
4471
  DragLineController.displayName = "DragLineController";
4448
4472
 
4449
- var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4473
+ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
4450
4474
  var checkedProps = checkProps(props);
4451
4475
  var style = props.style,
4452
4476
  className = props.className,
@@ -4475,6 +4499,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4475
4499
  var areaRef = useRef();
4476
4500
  var scrollSync = useRef();
4477
4501
  var containerRef = useRef();
4502
+ var cursorRef = useRef(null);
4478
4503
  console.log(' Timeline mounted = ', areaRef);
4479
4504
  // 编辑器数据
4480
4505
  var _useState = useState(data),
@@ -4527,11 +4552,11 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4527
4552
  scrollTop: scrollTop
4528
4553
  });
4529
4554
  }, [scrollTop]);
4530
- /** 动态设置scale count */
4531
- var handleSetScaleCount = function handleSetScaleCount(value) {
4555
+ /** 动态设置 scale count */
4556
+ var handleSetScaleCount = useCallback(function (value) {
4532
4557
  var data = Math.min(maxScaleCount, Math.max(minScaleCount, value));
4533
4558
  setScaleCount(data);
4534
- };
4559
+ }, [maxScaleCount, minScaleCount]);
4535
4560
  /** 处理主动数据变化 */
4536
4561
  var handleEditorDataChange = function handleEditorDataChange(updatedData) {
4537
4562
  var result = onChange === null || onChange === void 0 ? void 0 : onChange(updatedData);
@@ -4542,7 +4567,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4542
4567
  }
4543
4568
  };
4544
4569
  /** 处理光标 */
4545
- var handleSetCursor = function handleSetCursor(param) {
4570
+ var handleSetCursor = useCallback(function (param) {
4546
4571
  var left = param.left,
4547
4572
  time = param.time,
4548
4573
  _param$updateTime = param.updateTime,
@@ -4567,16 +4592,16 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4567
4592
  }
4568
4593
  result && setCursorTime(time);
4569
4594
  return result;
4570
- };
4571
- /** 设置scrollLeft */
4572
- var handleDeltaScrollLeft = function handleDeltaScrollLeft(delta) {
4595
+ }, [startLeft, scale, scaleWidth, autoReRender]);
4596
+ /** 设置 scrollLeft */
4597
+ var handleDeltaScrollLeft = useCallback(function (delta) {
4573
4598
  // 当超过最大距离时，禁止自动滚动
4574
4599
  var data = scrollSync.current.state.scrollLeft + delta;
4575
4600
  if (data > scaleCount * (scaleWidth - 1) + startLeft - width) return;
4576
4601
  scrollSync.current && scrollSync.current.setState({
4577
4602
  scrollLeft: Math.max(scrollSync.current.state.scrollLeft + delta, 0)
4578
4603
  });
4579
- };
4604
+ }, [scaleCount, scaleWidth, startLeft, width]);
4580
4605
  var handleInitDragLine = useCallback(function (data) {
4581
4606
  var _checkedProps$onActio, _checkedProps$onActio2, _dragLineControllerRe;
4582
4607
  (_checkedProps$onActio = checkedProps.onActionMoveStart) === null || _checkedProps$onActio === void 0 ? void 0 : _checkedProps$onActio.call(checkedProps, data);
@@ -4595,6 +4620,10 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4595
4620
  (_checkedProps$onActio6 = checkedProps.onActionResizeEnd) === null || _checkedProps$onActio6 === void 0 ? void 0 : _checkedProps$onActio6.call(checkedProps, data);
4596
4621
  (_dragLineControllerRe3 = dragLineControllerRef.current) === null || _dragLineControllerRe3 === void 0 ? void 0 : _dragLineControllerRe3.disposeDragLine();
4597
4622
  }, [checkedProps]);
4623
+ /** 处理滚动回调 */
4624
+ var onScroll = useCallback(function (params) {
4625
+ onScrollVertical && onScrollVertical(params);
4626
+ }, [onScrollVertical]);
4598
4627
  // 处理运行器相关数据
4599
4628
  useEffect(function () {
4600
4629
  var handleTime = function handleTime(_ref) {
@@ -4667,7 +4696,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4667
4696
  }
4668
4697
  };
4669
4698
  });
4670
- var onClickTimeline = function onClickTimeline(e) {
4699
+ var onClickTimeline = useCallback(function (e) {
4671
4700
  var _e$target;
4672
4701
  if (!domRef.current) return;
4673
4702
  var rect = domRef.current.getBoundingClientRect();
@@ -4684,7 +4713,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4684
4713
  handleSetCursor({
4685
4714
  time: time
4686
4715
  });
4687
- };
4716
+ }, [startLeft, scale, scaleWidth, hideCursor, handleSetCursor]);
4688
4717
  // 监听timeline区域宽度变化
4689
4718
  useEffect(function () {
4690
4719
  if (areaRef.current) {
@@ -4731,7 +4760,8 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4731
4760
  scaleCount: scaleCount,
4732
4761
  setScaleCount: handleSetScaleCount,
4733
4762
  onScroll: _onScroll,
4734
- scrollLeft: scrollLeft
4763
+ scrollLeft: scrollLeft,
4764
+ cursorRef: cursorRef
4735
4765
  })), areaCount === 1 ? (/*#__PURE__*/React.createElement(EditArea, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
4736
4766
  timelineWidth: width,
4737
4767
  ref: function ref(_ref3) {
@@ -4819,12 +4849,10 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4819
4849
  onActionResizing: handleUpdateDragLine,
4820
4850
  onActionMoveEnd: handleDisposeDragLine,
4821
4851
  onActionResizeEnd: handleDisposeDragLine,
4822
- onScroll: function onScroll(params) {
4823
- _onScroll(params);
4824
- onScrollVertical && onScrollVertical(params);
4825
- }
4852
+ onScroll: _onScroll
4826
4853
  }));
4827
4854
  }))) : null, !hideCursor && (/*#__PURE__*/React.createElement(Cursor, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
4855
+ ref: cursorRef,
4828
4856
  timelineWidth: width,
4829
4857
  disableDrag: isPlaying,
4830
4858
  scrollLeft: scrollLeft,
@@ -4849,6 +4877,6 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4849
4877
  getAssistDragLineActionIds: checkedProps.getAssistDragLineActionIds
4850
4878
  }));
4851
4879
  }));
4852
- });
4880
+ }));
4853
4881
 
4854
4882
  export { Timeline, TimelineEngine };
package/dist/index.js CHANGED
@@ -414,7 +414,8 @@ var Events = /*#__PURE__*/_createClass(function Events() {
414
414
  ended: [],
415
415
  mousedown: [],
416
416
  "effect-play": [],
417
- "effect-leave": []
417
+ "effect-leave": [],
418
+ "upload-bg-music": []
418
419
  }, handlers);
419
420
  });
420
421
 
@@ -1983,26 +1984,38 @@ function styleInject(css, ref) {
1983
1984
  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";
1984
1985
  styleInject(css_248z);
1985
1986
 
1986
- var Cursor = function Cursor(_ref) {
1987
+ var Cursor = /*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
1987
1988
  var _document$querySelect;
1988
- var theme = _ref.theme,
1989
- disableDrag = _ref.disableDrag,
1990
- cursorTime = _ref.cursorTime,
1991
- setCursor = _ref.setCursor,
1992
- startLeft = _ref.startLeft,
1993
- timelineWidth = _ref.timelineWidth,
1994
- scaleWidth = _ref.scaleWidth,
1995
- scale = _ref.scale,
1996
- scrollLeft = _ref.scrollLeft,
1997
- scrollSync = _ref.scrollSync,
1998
- areaRef = _ref.areaRef,
1999
- maxScaleCount = _ref.maxScaleCount,
2000
- deltaScrollLeft = _ref.deltaScrollLeft,
2001
- onCursorDragStart = _ref.onCursorDragStart,
2002
- onCursorDrag = _ref.onCursorDrag,
2003
- onCursorDragEnd = _ref.onCursorDragEnd;
1989
+ var theme = props.theme,
1990
+ disableDrag = props.disableDrag,
1991
+ cursorTime = props.cursorTime,
1992
+ setCursor = props.setCursor,
1993
+ startLeft = props.startLeft,
1994
+ timelineWidth = props.timelineWidth,
1995
+ scaleWidth = props.scaleWidth,
1996
+ scale = props.scale,
1997
+ scrollLeft = props.scrollLeft,
1998
+ scrollSync = props.scrollSync,
1999
+ areaRef = props.areaRef,
2000
+ maxScaleCount = props.maxScaleCount,
2001
+ deltaScrollLeft = props.deltaScrollLeft,
2002
+ onCursorDragStart = props.onCursorDragStart,
2003
+ onCursorDrag = props.onCursorDrag,
2004
+ onCursorDragEnd = props.onCursorDragEnd;
2005
+ console.log('Cursor cursorTime', cursorTime);
2004
2006
  var rowRnd = React.useRef();
2005
2007
  var draggingLeft = React.useRef();
2008
+ React.useImperativeHandle(ref, function () {
2009
+ return {
2010
+ updateLeft: function updateLeft(cursorTime) {
2011
+ rowRnd.current.updateLeft(parserTimeToPixel(cursorTime, {
2012
+ startLeft: startLeft,
2013
+ scaleWidth: scaleWidth,
2014
+ scale: scale
2015
+ }) - scrollLeft);
2016
+ }
2017
+ };
2018
+ });
2006
2019
  ahooks.useThrottleEffect(function () {
2007
2020
  if (typeof draggingLeft.current === 'undefined') {
2008
2021
  // 非dragging时，根据穿参更新cursor刻度（防抖）
@@ -2015,7 +2028,7 @@ var Cursor = function Cursor(_ref) {
2015
2028
  }, [cursorTime, startLeft, scaleWidth, scale, scrollLeft], {
2016
2029
  wait: 10
2017
2030
  });
2018
- var clientHeight = ((_document$querySelect = document.querySelector("#time-editor-container")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
2031
+ var clientHeight = ((_document$querySelect = document.querySelector('#time-editor-container')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
2019
2032
  return /*#__PURE__*/React__default['default'].createElement(RowDnd, {
2020
2033
  top: theme === 'light' ? 26 : 0,
2021
2034
  start: startLeft,
@@ -2050,8 +2063,8 @@ var Cursor = function Cursor(_ref) {
2050
2063
  onCursorDragEnd && onCursorDragEnd(time);
2051
2064
  draggingLeft.current = undefined;
2052
2065
  },
2053
- onDrag: function onDrag(_ref2) {
2054
- var left = _ref2.left;
2066
+ onDrag: function onDrag(_ref) {
2067
+ var left = _ref.left;
2055
2068
  var scroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
2056
2069
  var scrollLeft = scrollSync.current.state.scrollLeft;
2057
2070
  if (!scroll || scrollLeft === 0) {
@@ -2090,12 +2103,12 @@ var Cursor = function Cursor(_ref) {
2090
2103
  })), /*#__PURE__*/React__default['default'].createElement("div", {
2091
2104
  className: prefix('cursor-area')
2092
2105
  })));
2093
- };
2106
+ });
2094
2107
 
2095
2108
  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";
2096
2109
  styleInject(css_248z$1);
2097
2110
 
2098
- 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";
2111
+ 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 transform: rotate(180deg);\n}\n.timeline-editor-action .timeline-editor-action-right-stretch {\n right: -3px;\n}\n";
2099
2112
  styleInject(css_248z$2);
2100
2113
 
2101
2114
  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 +2626,7 @@ var EditActionO = function EditActionO(_ref) {
2613
2626
  sourceRowItem.actions = sourceRowItem.actions.filter(function (item) {
2614
2627
  return item.id !== id;
2615
2628
  });
2629
+ actionItem.order = targetRowItem.order;
2616
2630
  // 添加到目标row
2617
2631
  targetRowItem.actions.push(actionItem);
2618
2632
  console.log('Target row actions after:', targetRowItem.actions.length);
@@ -2923,12 +2937,12 @@ var EditRow = function EditRow(props) {
2923
2937
  var classNames = ['edit-row'];
2924
2938
  if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('selected');
2925
2939
  var clientWidth = document.documentElement.clientWidth;
2926
- var timeStart = parserPixelToTime(scrollLeft, {
2940
+ var timeStart = parserPixelToTime(scrollLeft - 400, {
2927
2941
  startLeft: startLeft,
2928
2942
  scale: scale,
2929
2943
  scaleWidth: scaleWidth
2930
2944
  });
2931
- var timeEnd = parserPixelToTime(scrollLeft + clientWidth + 200, {
2945
+ var timeEnd = parserPixelToTime(scrollLeft + clientWidth + 400, {
2932
2946
  startLeft: startLeft,
2933
2947
  scale: scale,
2934
2948
  scaleWidth: scaleWidth
@@ -2957,8 +2971,8 @@ var EditRow = function EditRow(props) {
2957
2971
  }, [visibleCount, visibleActions.length]);
2958
2972
  React.useEffect(function () {
2959
2973
  setVisibleCount(20);
2960
- }, [scrollLeft, rowData === null || rowData === void 0 ? void 0 : rowData.id]);
2961
- var handleTime = function handleTime(e) {
2974
+ }, [rowData === null || rowData === void 0 ? void 0 : rowData.id]);
2975
+ var handleTime = React.useCallback(function (e) {
2962
2976
  if (!areaRef.current) return;
2963
2977
  var rect = areaRef.current.getBoundingClientRect();
2964
2978
  var position = e.clientX - rect.x;
@@ -2969,7 +2983,7 @@ var EditRow = function EditRow(props) {
2969
2983
  scaleWidth: scaleWidth
2970
2984
  });
2971
2985
  return time;
2972
- };
2986
+ }, [areaRef, scrollLeft, startLeft, scale, scaleWidth]);
2973
2987
  return /*#__PURE__*/React__default['default'].createElement("div", {
2974
2988
  className: "".concat(prefix.apply(void 0, classNames), " ").concat(((rowData === null || rowData === void 0 ? void 0 : rowData.classNames) || []).join(' ')),
2975
2989
  style: style,
@@ -2986,7 +3000,7 @@ var EditRow = function EditRow(props) {
2986
3000
  var files = e.dataTransfer.files;
2987
3001
  // @ts-expect-error 因为 files 是 FileList 类型，不能直接修改 uid 属性
2988
3002
  files[0].uid = new Date().getTime().toString();
2989
- uploadBgMusic === null || uploadBgMusic === void 0 ? void 0 : uploadBgMusic(Array.from(files));
3003
+ uploadBgMusic === null || uploadBgMusic === void 0 ? void 0 : uploadBgMusic(Array.from(files), rowData);
2990
3004
  }
2991
3005
  },
2992
3006
  onClick: function onClick(e) {
@@ -3409,9 +3423,9 @@ var useRowDrag = function useRowDrag(options) {
3409
3423
  if (up === 0) {
3410
3424
  top = 0;
3411
3425
  } else if (up === 1) {
3412
- top = -20;
3426
+ top = 35;
3413
3427
  } else if (up === -1) {
3414
- top = 20;
3428
+ top = -35;
3415
3429
  }
3416
3430
  // 如果没有初始位置数据，说明不是有效的多选拖拽
3417
3431
  if (!setEditorData || initialPositions.size === 0) {
@@ -3654,7 +3668,6 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
3654
3668
  onUpdateEditorData = props.onUpdateEditorData,
3655
3669
  onMutiSelectChange = props.onMutiSelectChange,
3656
3670
  _props$canUpload = props.canUpload,
3657
- canUpload = _props$canUpload === void 0 ? false : _props$canUpload,
3658
3671
  customRequest = props.customRequest,
3659
3672
  setEditorData = props.setEditorData,
3660
3673
  setCursor = props.setCursor,
@@ -3680,7 +3693,7 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
3680
3693
  return /*#__PURE__*/function () {
3681
3694
  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(info) {
3682
3695
  var _info$file$response, _info$file;
3683
- var hasDefault, totalDuration, _newAction, uid, duration, newAction;
3696
+ var maxSize, hasDefault, totalDuration, _newAction, uid, duration, newAction;
3684
3697
  return _regenerator().w(function (_context) {
3685
3698
  while (1) switch (_context.n) {
3686
3699
  case 0:
@@ -3691,16 +3704,23 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
3691
3704
  }
3692
3705
  return _context.a(2);
3693
3706
  case 1:
3694
- if (!(info.file.type !== 'audio/mp3' && info.file.type !== 'audio/wav' && info.file.type !== 'audio/mpeg')) {
3707
+ maxSize = 100 * 1024 * 1024;
3708
+ if (!(info.file.size > maxSize)) {
3695
3709
  _context.n = 2;
3696
3710
  break;
3697
3711
  }
3698
3712
  return _context.a(2, false);
3699
3713
  case 2:
3700
- if (!(info.file.status === 'error')) {
3714
+ if (!(info.file.type !== 'audio/mp3' && info.file.type !== 'audio/wav' && info.file.type !== 'audio/mpeg')) {
3701
3715
  _context.n = 3;
3702
3716
  break;
3703
3717
  }
3718
+ return _context.a(2, false);
3719
+ case 3:
3720
+ if (!(info.file.status === 'error')) {
3721
+ _context.n = 4;
3722
+ break;
3723
+ }
3704
3724
  onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [{
3705
3725
  id: info.file.uid,
3706
3726
  isUploading: false,
@@ -3712,9 +3732,9 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
3712
3732
  uid: info.file.uid
3713
3733
  }]);
3714
3734
  return _context.a(2);
3715
- case 3:
3735
+ case 4:
3716
3736
  if (info.file.response) {
3717
- _context.n = 4;
3737
+ _context.n = 5;
3718
3738
  break;
3719
3739
  }
3720
3740
  hasDefault = row.actions.some(function (action) {
@@ -3741,11 +3761,11 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
3741
3761
  };
3742
3762
  onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [_newAction]);
3743
3763
  return _context.a(2);
3744
- case 4:
3764
+ case 5:
3745
3765
  uid = info.file.uid;
3746
- _context.n = 5;
3766
+ _context.n = 6;
3747
3767
  return getAudioDuration(info.file.response.url);
3748
- case 5:
3768
+ case 6:
3749
3769
  duration = _context.v;
3750
3770
  newAction = {
3751
3771
  id: ((_info$file$response = info.file.response) === null || _info$file$response === void 0 ? void 0 : _info$file$response.id) || uid,
@@ -3760,7 +3780,7 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
3760
3780
  uid: (_info$file = info.file) === null || _info$file === void 0 ? void 0 : _info$file.uid
3761
3781
  };
3762
3782
  onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [newAction]);
3763
- case 6:
3783
+ case 7:
3764
3784
  return _context.a(2);
3765
3785
  }
3766
3786
  }, _callee);
@@ -3845,23 +3865,6 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
3845
3865
  window.removeEventListener('row-drag-end', handleDragEnd);
3846
3866
  };
3847
3867
  }, []);
3848
- // 处理拖拽上传事件
3849
- var handleDrop = function handleDrop(e) {
3850
- e.preventDefault();
3851
- e.stopPropagation();
3852
- // 计算鼠标所在位置的时间
3853
- if (!editAreaRef.current) return;
3854
- var rect = editAreaRef.current.getBoundingClientRect();
3855
- var position = e.clientX - rect.x;
3856
- var left = position + scrollLeft;
3857
- var time = parserPixelToTime(left, {
3858
- startLeft: startLeft,
3859
- scale: scale,
3860
- scaleWidth: scaleWidth
3861
- });
3862
- setCurrentMouseTime(time);
3863
- console.log('拖拽上传位置的时间:', time);
3864
- };
3865
3868
  // ref 数据
3866
3869
  React.useImperativeHandle(ref, function () {
3867
3870
  return {
@@ -3919,34 +3922,34 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
3919
3922
  window.removeEventListener('ctrl-click-action', handleCtrlClickAction);
3920
3923
  };
3921
3924
  }, [onCtrlClick, editorData, handleSelectionChange]);
3925
+ var uploadBgMusic = React.useCallback(function (file, row) {
3926
+ var canUpload = onBeforeUpload === null || onBeforeUpload === void 0 ? void 0 : onBeforeUpload(file[0]);
3927
+ if (!canUpload) return;
3928
+ var onSuccess = handleUploadChange(row);
3929
+ onSuccess({
3930
+ file: file[0],
3931
+ isUploading: true
3932
+ });
3933
+ customRequest === null || customRequest === void 0 ? void 0 : customRequest({
3934
+ file: file[0],
3935
+ onSuccess: onSuccess,
3936
+ method: 'POST',
3937
+ action: 'bgm',
3938
+ onError: function onError(err) {
3939
+ onSuccess({
3940
+ file: file[0],
3941
+ isUploading: false
3942
+ });
3943
+ console.error('Upload error:', err);
3944
+ }
3945
+ });
3946
+ }, [onBeforeUpload, handleUploadChange, customRequest]);
3922
3947
  /** 获取每个cell渲染内容 */
3923
3948
  var cellRenderer = function cellRenderer(_ref2) {
3924
3949
  var rowIndex = _ref2.rowIndex,
3925
3950
  key = _ref2.key,
3926
3951
  style = _ref2.style;
3927
3952
  var row = editorData[rowIndex]; // 行数据
3928
- var uploadBgMusic = function uploadBgMusic(file) {
3929
- var canUpload = onBeforeUpload === null || onBeforeUpload === void 0 ? void 0 : onBeforeUpload(file[0]);
3930
- if (!canUpload) return;
3931
- var onSuccess = handleUploadChange(row);
3932
- onSuccess({
3933
- file: file[0],
3934
- isUploading: true
3935
- });
3936
- customRequest === null || customRequest === void 0 ? void 0 : customRequest({
3937
- file: file[0],
3938
- onSuccess: onSuccess,
3939
- method: 'POST',
3940
- action: 'bgm',
3941
- onError: function onError(err) {
3942
- onSuccess({
3943
- file: file[0],
3944
- isUploading: false
3945
- });
3946
- console.error('Upload error:', err);
3947
- }
3948
- });
3949
- };
3950
3953
  var editRow = /*#__PURE__*/React__default['default'].createElement(EditRow, _objectSpread2(_objectSpread2({}, props), {}, {
3951
3954
  uploadBgMusic: uploadBgMusic,
3952
3955
  style: _objectSpread2(_objectSpread2({}, style), {}, {
@@ -4018,30 +4021,30 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
4018
4021
  return;
4019
4022
  }
4020
4023
  }));
4021
- if (!!row && (canUpload || (row === null || row === void 0 ? void 0 : row.canUpload))) {
4022
- var _row$actions, _row$actions$, _row$actions2;
4023
- var isDefaultMusic = ((_row$actions = row.actions) === null || _row$actions === void 0 ? void 0 : (_row$actions$ = _row$actions[0]) === null || _row$actions$ === void 0 ? void 0 : _row$actions$.id) === 'upload-bg-music';
4024
- var tChildren = isDefaultMusic ? editRow : null;
4025
- return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(es.Upload, {
4026
- ref: uploadRef,
4027
- key: key + 'upload',
4028
- style: _objectSpread2({
4029
- width: '100%',
4030
- display: 'block',
4031
- position: 'relative'
4032
- }, style),
4033
- beforeUpload: onBeforeUpload,
4034
- onChange: handleUploadChange(row),
4035
- showUploadList: false,
4036
- openFileDialogOnClick: ((_row$actions2 = row.actions) === null || _row$actions2 === void 0 ? void 0 : _row$actions2.filter(function (item) {
4037
- return item.effectId === 'effect2';
4038
- }).length) > 0,
4039
- customRequest: customRequest,
4040
- onDrop: handleDrop,
4041
- type: "drag",
4042
- accept: "audio/mp3,audio/wav,audio/mpeg"
4043
- }, tChildren), tChildren ? null : editRow);
4044
- }
4024
+ // if (!!row && (canUpload || row?.canUpload)) {
4025
+ // const isDefaultMusic = row.actions?.[0]?.id === 'upload-bg-music';
4026
+ // const tChildren = isDefaultMusic ? editRow : null;
4027
+ // return (
4028
+ // <>
4029
+ // <Upload
4030
+ // ref={uploadRef}
4031
+ // key={key + 'upload'}
4032
+ // style={{ width: '100%', display: 'block', position: 'relative', ...style }}
4033
+ // beforeUpload={onBeforeUpload}
4034
+ // onChange={handleUploadChange(row)}
4035
+ // showUploadList={false}
4036
+ // openFileDialogOnClick={row.actions?.filter((item) => item.effectId === 'effect2').length > 0}
4037
+ // customRequest={customRequest}
4038
+ // onDrop={handleDrop}
4039
+ // type="drag"
4040
+ // accept="audio/mp3,audio/wav,audio/mpeg"
4041
+ // >
4042
+ // {tChildren}
4043
+ // </Upload>
4044
+ // {tChildren ? null : editRow}
4045
+ // </>
4046
+ // );
4047
+ // }
4045
4048
  return editRow;
4046
4049
  };
4047
4050
  React.useLayoutEffect(function () {
@@ -4054,6 +4057,20 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
4054
4057
  React.useEffect(function () {
4055
4058
  gridRef.current.recomputeGridSize();
4056
4059
  }, [editorData]);
4060
+ React.useEffect(function () {
4061
+ var _engineRef$current2;
4062
+ var row = editorData[0]; // 行数据
4063
+ if (!row || row.type !== 'bg') {
4064
+ return;
4065
+ }
4066
+ (_engineRef$current2 = engineRef.current) === null || _engineRef$current2 === void 0 ? void 0 : _engineRef$current2.on('upload-bg-music', function (e) {
4067
+ uploadBgMusic([e.file], row);
4068
+ });
4069
+ return function () {
4070
+ var _engineRef$current3;
4071
+ (_engineRef$current3 = engineRef.current) === null || _engineRef$current3 === void 0 ? void 0 : _engineRef$current3.off('upload-bg-music');
4072
+ };
4073
+ }, [engineRef, uploadBgMusic, editorData]);
4057
4074
  var _totalHeight = editorData.reduce(function (prev, cur) {
4058
4075
  return prev + (cur.rowHeight || _rowHeight);
4059
4076
  }, 0) + ((className || '').indexOf('1') > -1 ? 12 : 32);
@@ -4097,7 +4114,6 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
4097
4114
  }
4098
4115
  }
4099
4116
  heightRef.current = height;
4100
- console.log('Math.max(scaleCount * scaleWidth + startLeft, width)', Math.max(scaleCount * scaleWidth + startLeft, width), ', width', width);
4101
4117
  return /*#__PURE__*/React__default['default'].createElement(reactVirtualized.Grid, {
4102
4118
  columnCount: 1,
4103
4119
  rowCount: heights.length,
@@ -4185,11 +4201,13 @@ var TimeArea = function TimeArea(_ref) {
4185
4201
  scrollLeft = _ref.scrollLeft,
4186
4202
  onClickTimeArea = _ref.onClickTimeArea,
4187
4203
  getScaleRender = _ref.getScaleRender,
4188
- timelineWidth = _ref.timelineWidth;
4204
+ timelineWidth = _ref.timelineWidth,
4205
+ cursorRef = _ref.cursorRef;
4189
4206
  var gridRef = React.useRef();
4190
4207
  /** 是否显示细分刻度 */
4191
4208
  var showUnit = scaleSplitCount > 0;
4192
- /** 获取每个cell渲染内容 */
4209
+ var clientWidth = document.documentElement.clientWidth;
4210
+ /** 获取每个 cell 渲染内容 */
4193
4211
  var cellRenderer = function cellRenderer(_ref2) {
4194
4212
  var columnIndex = _ref2.columnIndex,
4195
4213
  key = _ref2.key,
@@ -4198,6 +4216,12 @@ var TimeArea = function TimeArea(_ref) {
4198
4216
  var classNames = ['time-unit'];
4199
4217
  if (isShowScale) classNames.push('time-unit-big');
4200
4218
  var item = (showUnit ? columnIndex / scaleSplitCount : columnIndex) * scale;
4219
+ var cellPixel = startLeft + columnIndex * (showUnit ? scaleWidth / scaleSplitCount : scaleWidth);
4220
+ var cellWidth = showUnit ? scaleWidth / scaleSplitCount : scaleWidth;
4221
+ var isVisible = cellPixel + cellWidth >= scrollLeft - 50 && cellPixel <= scrollLeft + clientWidth + 50;
4222
+ if (!isVisible) {
4223
+ return null;
4224
+ }
4201
4225
  return /*#__PURE__*/React__default['default'].createElement("div", {
4202
4226
  key: key,
4203
4227
  style: style,
@@ -4262,7 +4286,7 @@ var TimeArea = function TimeArea(_ref) {
4262
4286
  scaleWidth: scaleWidth
4263
4287
  });
4264
4288
  var result = onClickTimeArea && onClickTimeArea(time, e);
4265
- if (result === false) return; // 返回false时阻止设置时间
4289
+ if (result === false) return; // 返回 false 时阻止设置时间
4266
4290
  setCursor({
4267
4291
  time: time
4268
4292
  });
@@ -4456,7 +4480,7 @@ var DragLineController = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(f
4456
4480
  }));
4457
4481
  DragLineController.displayName = "DragLineController";
4458
4482
 
4459
- var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
4483
+ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
4460
4484
  var checkedProps = checkProps(props);
4461
4485
  var style = props.style,
4462
4486
  className = props.className,
@@ -4485,6 +4509,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
4485
4509
  var areaRef = React.useRef();
4486
4510
  var scrollSync = React.useRef();
4487
4511
  var containerRef = React.useRef();
4512
+ var cursorRef = React.useRef(null);
4488
4513
  console.log(' Timeline mounted = ', areaRef);
4489
4514
  // 编辑器数据
4490
4515
  var _useState = React.useState(data),
@@ -4537,11 +4562,11 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
4537
4562
  scrollTop: scrollTop
4538
4563
  });
4539
4564
  }, [scrollTop]);
4540
- /** 动态设置scale count */
4541
- var handleSetScaleCount = function handleSetScaleCount(value) {
4565
+ /** 动态设置 scale count */
4566
+ var handleSetScaleCount = React.useCallback(function (value) {
4542
4567
  var data = Math.min(maxScaleCount, Math.max(minScaleCount, value));
4543
4568
  setScaleCount(data);
4544
- };
4569
+ }, [maxScaleCount, minScaleCount]);
4545
4570
  /** 处理主动数据变化 */
4546
4571
  var handleEditorDataChange = function handleEditorDataChange(updatedData) {
4547
4572
  var result = onChange === null || onChange === void 0 ? void 0 : onChange(updatedData);
@@ -4552,7 +4577,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
4552
4577
  }
4553
4578
  };
4554
4579
  /** 处理光标 */
4555
- var handleSetCursor = function handleSetCursor(param) {
4580
+ var handleSetCursor = React.useCallback(function (param) {
4556
4581
  var left = param.left,
4557
4582
  time = param.time,
4558
4583
  _param$updateTime = param.updateTime,
@@ -4577,16 +4602,16 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
4577
4602
  }
4578
4603
  result && setCursorTime(time);
4579
4604
  return result;
4580
- };
4581
- /** 设置scrollLeft */
4582
- var handleDeltaScrollLeft = function handleDeltaScrollLeft(delta) {
4605
+ }, [startLeft, scale, scaleWidth, autoReRender]);
4606
+ /** 设置 scrollLeft */
4607
+ var handleDeltaScrollLeft = React.useCallback(function (delta) {
4583
4608
  // 当超过最大距离时，禁止自动滚动
4584
4609
  var data = scrollSync.current.state.scrollLeft + delta;
4585
4610
  if (data > scaleCount * (scaleWidth - 1) + startLeft - width) return;
4586
4611
  scrollSync.current && scrollSync.current.setState({
4587
4612
  scrollLeft: Math.max(scrollSync.current.state.scrollLeft + delta, 0)
4588
4613
  });
4589
- };
4614
+ }, [scaleCount, scaleWidth, startLeft, width]);
4590
4615
  var handleInitDragLine = React.useCallback(function (data) {
4591
4616
  var _checkedProps$onActio, _checkedProps$onActio2, _dragLineControllerRe;
4592
4617
  (_checkedProps$onActio = checkedProps.onActionMoveStart) === null || _checkedProps$onActio === void 0 ? void 0 : _checkedProps$onActio.call(checkedProps, data);
@@ -4605,6 +4630,10 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
4605
4630
  (_checkedProps$onActio6 = checkedProps.onActionResizeEnd) === null || _checkedProps$onActio6 === void 0 ? void 0 : _checkedProps$onActio6.call(checkedProps, data);
4606
4631
  (_dragLineControllerRe3 = dragLineControllerRef.current) === null || _dragLineControllerRe3 === void 0 ? void 0 : _dragLineControllerRe3.disposeDragLine();
4607
4632
  }, [checkedProps]);
4633
+ /** 处理滚动回调 */
4634
+ var onScroll = React.useCallback(function (params) {
4635
+ onScrollVertical && onScrollVertical(params);
4636
+ }, [onScrollVertical]);
4608
4637
  // 处理运行器相关数据
4609
4638
  React.useEffect(function () {
4610
4639
  var handleTime = function handleTime(_ref) {
@@ -4677,7 +4706,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
4677
4706
  }
4678
4707
  };
4679
4708
  });
4680
- var onClickTimeline = function onClickTimeline(e) {
4709
+ var onClickTimeline = React.useCallback(function (e) {
4681
4710
  var _e$target;
4682
4711
  if (!domRef.current) return;
4683
4712
  var rect = domRef.current.getBoundingClientRect();
@@ -4694,7 +4723,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
4694
4723
  handleSetCursor({
4695
4724
  time: time
4696
4725
  });
4697
- };
4726
+ }, [startLeft, scale, scaleWidth, hideCursor, handleSetCursor]);
4698
4727
  // 监听timeline区域宽度变化
4699
4728
  React.useEffect(function () {
4700
4729
  if (areaRef.current) {
@@ -4741,7 +4770,8 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
4741
4770
  scaleCount: scaleCount,
4742
4771
  setScaleCount: handleSetScaleCount,
4743
4772
  onScroll: _onScroll,
4744
- scrollLeft: scrollLeft
4773
+ scrollLeft: scrollLeft,
4774
+ cursorRef: cursorRef
4745
4775
  })), areaCount === 1 ? (/*#__PURE__*/React__default['default'].createElement(EditArea, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
4746
4776
  timelineWidth: width,
4747
4777
  ref: function ref(_ref3) {
@@ -4829,12 +4859,10 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
4829
4859
  onActionResizing: handleUpdateDragLine,
4830
4860
  onActionMoveEnd: handleDisposeDragLine,
4831
4861
  onActionResizeEnd: handleDisposeDragLine,
4832
- onScroll: function onScroll(params) {
4833
- _onScroll(params);
4834
- onScrollVertical && onScrollVertical(params);
4835
- }
4862
+ onScroll: _onScroll
4836
4863
  }));
4837
4864
  }))) : null, !hideCursor && (/*#__PURE__*/React__default['default'].createElement(Cursor, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
4865
+ ref: cursorRef,
4838
4866
  timelineWidth: width,
4839
4867
  disableDrag: isPlaying,
4840
4868
  scrollLeft: scrollLeft,
@@ -4859,7 +4887,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
4859
4887
  getAssistDragLineActionIds: checkedProps.getAssistDragLineActionIds
4860
4888
  }));
4861
4889
  }));
4862
- });
4890
+ }));
4863
4891
 
4864
4892
  exports.Timeline = Timeline;
4865
4893
  exports.TimelineEngine = TimelineEngine;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sense-react-timeline-editor",
3
- "version": "1.1.8",
3
+ "version": "1.1.10",
4
4
  "author": "xzdarcy",
5
5
  "license": "MIT",
6
6
  "keywords": [