sense-react-timeline-editor 1.1.9 → 1.1.11

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 (5) hide show
  1. package/dist/components/edit_area/edit_row.d.ts +1 -1
  2. package/dist/engine/events.d.ts +8 -0
  3. package/dist/index.esm.js +106 -79
  4. package/dist/index.js +105 -78
  5. package/package.json +1 -1
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/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
 
@@ -2001,7 +2002,7 @@ var Cursor = /*#__PURE__*/React.forwardRef(function (props, ref) {
2001
2002
  startLeft: startLeft,
2002
2003
  scaleWidth: scaleWidth,
2003
2004
  scale: scale
2004
- }) - scrollLeft);
2005
+ }));
2005
2006
  }
2006
2007
  };
2007
2008
  });
@@ -2012,9 +2013,9 @@ var Cursor = /*#__PURE__*/React.forwardRef(function (props, ref) {
2012
2013
  startLeft: startLeft,
2013
2014
  scaleWidth: scaleWidth,
2014
2015
  scale: scale
2015
- }) - scrollLeft);
2016
+ }));
2016
2017
  }
2017
- }, [cursorTime, startLeft, scaleWidth, scale, scrollLeft], {
2018
+ }, [cursorTime, startLeft, scaleWidth, scale], {
2018
2019
  wait: 10
2019
2020
  });
2020
2021
  var clientHeight = ((_document$querySelect = document.querySelector('#time-editor-container')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
@@ -2097,7 +2098,7 @@ var Cursor = /*#__PURE__*/React.forwardRef(function (props, ref) {
2097
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";
2098
2099
  styleInject(css_248z$1);
2099
2100
 
2100
- var css_248z$2 = ".timeline-editor-action {\n position: absolute;\n left: 0;\n top: 0;\n background-color: #c6cbd2;\n display: flex;\n align-items: center;\n}\n.timeline-editor-action[data-action-drag=\"true\"] {\n box-shadow: 0px 8px 8px rgba(77, 54, 41, 0.08);\n border-radius: 34px;\n cursor: pointer;\n z-index: 100;\n}\n.timeline-editor-action .timeline-editor-action-left-stretch,\n.timeline-editor-action .timeline-editor-action-right-stretch {\n position: absolute;\n}\n.timeline-editor-action .timeline-editor-action-left-stretch {\n left: -3px;\n}\n.timeline-editor-action .timeline-editor-action-right-stretch {\n right: -3px;\n transform: rotate(180deg);\n}\n";
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";
2101
2102
  styleInject(css_248z$2);
2102
2103
 
2103
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";
@@ -2989,7 +2990,7 @@ var EditRow = function EditRow(props) {
2989
2990
  var files = e.dataTransfer.files;
2990
2991
  // @ts-expect-error 因为 files 是 FileList 类型，不能直接修改 uid 属性
2991
2992
  files[0].uid = new Date().getTime().toString();
2992
- uploadBgMusic === null || uploadBgMusic === void 0 ? void 0 : uploadBgMusic(Array.from(files));
2993
+ uploadBgMusic === null || uploadBgMusic === void 0 ? void 0 : uploadBgMusic(Array.from(files), rowData);
2993
2994
  }
2994
2995
  },
2995
2996
  onClick: function onClick(e) {
@@ -3657,7 +3658,6 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
3657
3658
  onUpdateEditorData = props.onUpdateEditorData,
3658
3659
  onMutiSelectChange = props.onMutiSelectChange,
3659
3660
  _props$canUpload = props.canUpload,
3660
- canUpload = _props$canUpload === void 0 ? false : _props$canUpload,
3661
3661
  customRequest = props.customRequest,
3662
3662
  setEditorData = props.setEditorData,
3663
3663
  setCursor = props.setCursor,
@@ -3855,23 +3855,6 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
3855
3855
  window.removeEventListener('row-drag-end', handleDragEnd);
3856
3856
  };
3857
3857
  }, []);
3858
- // 处理拖拽上传事件
3859
- var handleDrop = function handleDrop(e) {
3860
- e.preventDefault();
3861
- e.stopPropagation();
3862
- // 计算鼠标所在位置的时间
3863
- if (!editAreaRef.current) return;
3864
- var rect = editAreaRef.current.getBoundingClientRect();
3865
- var position = e.clientX - rect.x;
3866
- var left = position + scrollLeft;
3867
- var time = parserPixelToTime(left, {
3868
- startLeft: startLeft,
3869
- scale: scale,
3870
- scaleWidth: scaleWidth
3871
- });
3872
- setCurrentMouseTime(time);
3873
- console.log('拖拽上传位置的时间:', time);
3874
- };
3875
3858
  // ref 数据
3876
3859
  useImperativeHandle(ref, function () {
3877
3860
  return {
@@ -3929,34 +3912,34 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
3929
3912
  window.removeEventListener('ctrl-click-action', handleCtrlClickAction);
3930
3913
  };
3931
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]);
3932
3937
  /** 获取每个cell渲染内容 */
3933
3938
  var cellRenderer = function cellRenderer(_ref2) {
3934
3939
  var rowIndex = _ref2.rowIndex,
3935
3940
  key = _ref2.key,
3936
3941
  style = _ref2.style;
3937
3942
  var row = editorData[rowIndex]; // 行数据
3938
- var uploadBgMusic = function uploadBgMusic(file) {
3939
- var canUpload = onBeforeUpload === null || onBeforeUpload === void 0 ? void 0 : onBeforeUpload(file[0]);
3940
- if (!canUpload) return;
3941
- var onSuccess = handleUploadChange(row);
3942
- onSuccess({
3943
- file: file[0],
3944
- isUploading: true
3945
- });
3946
- customRequest === null || customRequest === void 0 ? void 0 : customRequest({
3947
- file: file[0],
3948
- onSuccess: onSuccess,
3949
- method: 'POST',
3950
- action: 'bgm',
3951
- onError: function onError(err) {
3952
- onSuccess({
3953
- file: file[0],
3954
- isUploading: false
3955
- });
3956
- console.error('Upload error:', err);
3957
- }
3958
- });
3959
- };
3960
3943
  var editRow = /*#__PURE__*/React.createElement(EditRow, _objectSpread2(_objectSpread2({}, props), {}, {
3961
3944
  uploadBgMusic: uploadBgMusic,
3962
3945
  style: _objectSpread2(_objectSpread2({}, style), {}, {
@@ -4028,30 +4011,30 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
4028
4011
  return;
4029
4012
  }
4030
4013
  }));
4031
- if (!!row && (canUpload || (row === null || row === void 0 ? void 0 : row.canUpload))) {
4032
- var _row$actions, _row$actions$, _row$actions2;
4033
- 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';
4034
- var tChildren = isDefaultMusic ? editRow : null;
4035
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Upload, {
4036
- ref: uploadRef,
4037
- key: key + 'upload',
4038
- style: _objectSpread2({
4039
- width: '100%',
4040
- display: 'block',
4041
- position: 'relative'
4042
- }, style),
4043
- beforeUpload: onBeforeUpload,
4044
- onChange: handleUploadChange(row),
4045
- showUploadList: false,
4046
- openFileDialogOnClick: ((_row$actions2 = row.actions) === null || _row$actions2 === void 0 ? void 0 : _row$actions2.filter(function (item) {
4047
- return item.effectId === 'effect2';
4048
- }).length) > 0,
4049
- customRequest: customRequest,
4050
- onDrop: handleDrop,
4051
- type: "drag",
4052
- accept: "audio/mp3,audio/wav,audio/mpeg"
4053
- }, tChildren), tChildren ? null : editRow);
4054
- }
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
+ // }
4055
4038
  return editRow;
4056
4039
  };
4057
4040
  useLayoutEffect(function () {
@@ -4064,6 +4047,20 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
4064
4047
  useEffect(function () {
4065
4048
  gridRef.current.recomputeGridSize();
4066
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]);
4067
4064
  var _totalHeight = editorData.reduce(function (prev, cur) {
4068
4065
  return prev + (cur.rowHeight || _rowHeight);
4069
4066
  }, 0) + ((className || '').indexOf('1') > -1 ? 12 : 32);
@@ -4199,7 +4196,8 @@ var TimeArea = function TimeArea(_ref) {
4199
4196
  var gridRef = useRef();
4200
4197
  /** 是否显示细分刻度 */
4201
4198
  var showUnit = scaleSplitCount > 0;
4202
- /** 获取每个cell渲染内容 */
4199
+ var clientWidth = document.documentElement.clientWidth;
4200
+ /** 获取每个 cell 渲染内容 */
4203
4201
  var cellRenderer = function cellRenderer(_ref2) {
4204
4202
  var columnIndex = _ref2.columnIndex,
4205
4203
  key = _ref2.key,
@@ -4208,6 +4206,12 @@ var TimeArea = function TimeArea(_ref) {
4208
4206
  var classNames = ['time-unit'];
4209
4207
  if (isShowScale) classNames.push('time-unit-big');
4210
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
+ }
4211
4215
  return /*#__PURE__*/React.createElement("div", {
4212
4216
  key: key,
4213
4217
  style: style,
@@ -4264,8 +4268,10 @@ var TimeArea = function TimeArea(_ref) {
4264
4268
  if (hideCursor) return;
4265
4269
  var rect = e.currentTarget.getBoundingClientRect();
4266
4270
  var position = e.clientX - rect.x;
4267
- var left = Math.max(position + scrollLeft, startLeft);
4268
- if (left > maxScaleCount * scaleWidth + startLeft - scrollLeft) return;
4271
+ var left = Math.max(position, startLeft);
4272
+ // const left = Math.max(position + scrollLeft, startLeft);
4273
+ if (left > maxScaleCount * scaleWidth + startLeft) return;
4274
+ // if (left > maxScaleCount * scaleWidth + startLeft - scrollLeft) return;
4269
4275
  var time = parserPixelToTime(left, {
4270
4276
  startLeft: startLeft,
4271
4277
  scale: scale,
@@ -4707,7 +4713,8 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
4707
4713
  if (action || hideCursor) return;
4708
4714
  console.log('onClickTimeline = ', time);
4709
4715
  handleSetCursor({
4710
- time: time
4716
+ time: time,
4717
+ updateTime: true
4711
4718
  });
4712
4719
  }, [startLeft, scale, scaleWidth, hideCursor, handleSetCursor]);
4713
4720
  // 监听timeline区域宽度变化
@@ -4726,17 +4733,37 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
4726
4733
  useEffect(function () {
4727
4734
  var containerEl = document.querySelector('.timeline-editor');
4728
4735
  var handleScroll = throttle(function (e) {
4729
- console.log('scroll', e);
4736
+ var scrollLeft = e.target.scrollLeft || 0;
4730
4737
  scrollSync.current && scrollSync.current.setState({
4731
- scrollLeft: e.target.scrollLeft || 0
4738
+ scrollLeft: scrollLeft
4732
4739
  });
4740
+ var clientWidth = document.documentElement.clientWidth;
4741
+ var timeStart = parserPixelToTime(scrollLeft, {
4742
+ startLeft: startLeft,
4743
+ scale: scale,
4744
+ scaleWidth: scaleWidth
4745
+ });
4746
+ var timeEnd = parserPixelToTime(scrollLeft + clientWidth, {
4747
+ startLeft: startLeft,
4748
+ scale: scale,
4749
+ scaleWidth: scaleWidth
4750
+ });
4751
+ window.dispatchEvent(new CustomEvent('container-scroll', {
4752
+ detail: {
4753
+ scrollLeft: scrollLeft,
4754
+ scrollWidth: containerEl.scrollWidth,
4755
+ clientWidth: clientWidth,
4756
+ timeStart: timeStart,
4757
+ timeEnd: timeEnd
4758
+ }
4759
+ }));
4733
4760
  }, 100);
4734
4761
  containerEl.addEventListener('scroll', handleScroll);
4735
4762
  return function () {
4736
4763
  containerEl.removeEventListener('scroll', handleScroll);
4737
4764
  handleScroll.cancel();
4738
4765
  };
4739
- }, []);
4766
+ }, [startLeft, scale, scaleWidth]);
4740
4767
  return /*#__PURE__*/React.createElement("div", {
4741
4768
  ref: domRef,
4742
4769
  style: style,
@@ -4835,7 +4862,7 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
4835
4862
  setCursor: handleSetCursor,
4836
4863
  deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
4837
4864
  allowCreateTrack: allowCreateTrack,
4838
- minHeight: index === 0 ? undefined : _totalHeight,
4865
+ minHeight: index === 0 ? 122 : _totalHeight,
4839
4866
  containerRef: containerRef,
4840
4867
  onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
4841
4868
  engineRef: engineRef,
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
 
@@ -2011,7 +2012,7 @@ var Cursor = /*#__PURE__*/React__default['default'].forwardRef(function (props,
2011
2012
  startLeft: startLeft,
2012
2013
  scaleWidth: scaleWidth,
2013
2014
  scale: scale
2014
- }) - scrollLeft);
2015
+ }));
2015
2016
  }
2016
2017
  };
2017
2018
  });
@@ -2022,9 +2023,9 @@ var Cursor = /*#__PURE__*/React__default['default'].forwardRef(function (props,
2022
2023
  startLeft: startLeft,
2023
2024
  scaleWidth: scaleWidth,
2024
2025
  scale: scale
2025
- }) - scrollLeft);
2026
+ }));
2026
2027
  }
2027
- }, [cursorTime, startLeft, scaleWidth, scale, scrollLeft], {
2028
+ }, [cursorTime, startLeft, scaleWidth, scale], {
2028
2029
  wait: 10
2029
2030
  });
2030
2031
  var clientHeight = ((_document$querySelect = document.querySelector('#time-editor-container')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
@@ -2107,7 +2108,7 @@ var Cursor = /*#__PURE__*/React__default['default'].forwardRef(function (props,
2107
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";
2108
2109
  styleInject(css_248z$1);
2109
2110
 
2110
- var css_248z$2 = ".timeline-editor-action {\n position: absolute;\n left: 0;\n top: 0;\n background-color: #c6cbd2;\n display: flex;\n align-items: center;\n}\n.timeline-editor-action[data-action-drag=\"true\"] {\n box-shadow: 0px 8px 8px rgba(77, 54, 41, 0.08);\n border-radius: 34px;\n cursor: pointer;\n z-index: 100;\n}\n.timeline-editor-action .timeline-editor-action-left-stretch,\n.timeline-editor-action .timeline-editor-action-right-stretch {\n position: absolute;\n}\n.timeline-editor-action .timeline-editor-action-left-stretch {\n left: -3px;\n}\n.timeline-editor-action .timeline-editor-action-right-stretch {\n right: -3px;\n transform: rotate(180deg);\n}\n";
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";
2111
2112
  styleInject(css_248z$2);
2112
2113
 
2113
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";
@@ -2999,7 +3000,7 @@ var EditRow = function EditRow(props) {
2999
3000
  var files = e.dataTransfer.files;
3000
3001
  // @ts-expect-error 因为 files 是 FileList 类型，不能直接修改 uid 属性
3001
3002
  files[0].uid = new Date().getTime().toString();
3002
- uploadBgMusic === null || uploadBgMusic === void 0 ? void 0 : uploadBgMusic(Array.from(files));
3003
+ uploadBgMusic === null || uploadBgMusic === void 0 ? void 0 : uploadBgMusic(Array.from(files), rowData);
3003
3004
  }
3004
3005
  },
3005
3006
  onClick: function onClick(e) {
@@ -3667,7 +3668,6 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
3667
3668
  onUpdateEditorData = props.onUpdateEditorData,
3668
3669
  onMutiSelectChange = props.onMutiSelectChange,
3669
3670
  _props$canUpload = props.canUpload,
3670
- canUpload = _props$canUpload === void 0 ? false : _props$canUpload,
3671
3671
  customRequest = props.customRequest,
3672
3672
  setEditorData = props.setEditorData,
3673
3673
  setCursor = props.setCursor,
@@ -3865,23 +3865,6 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
3865
3865
  window.removeEventListener('row-drag-end', handleDragEnd);
3866
3866
  };
3867
3867
  }, []);
3868
- // 处理拖拽上传事件
3869
- var handleDrop = function handleDrop(e) {
3870
- e.preventDefault();
3871
- e.stopPropagation();
3872
- // 计算鼠标所在位置的时间
3873
- if (!editAreaRef.current) return;
3874
- var rect = editAreaRef.current.getBoundingClientRect();
3875
- var position = e.clientX - rect.x;
3876
- var left = position + scrollLeft;
3877
- var time = parserPixelToTime(left, {
3878
- startLeft: startLeft,
3879
- scale: scale,
3880
- scaleWidth: scaleWidth
3881
- });
3882
- setCurrentMouseTime(time);
3883
- console.log('拖拽上传位置的时间:', time);
3884
- };
3885
3868
  // ref 数据
3886
3869
  React.useImperativeHandle(ref, function () {
3887
3870
  return {
@@ -3939,34 +3922,34 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
3939
3922
  window.removeEventListener('ctrl-click-action', handleCtrlClickAction);
3940
3923
  };
3941
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]);
3942
3947
  /** 获取每个cell渲染内容 */
3943
3948
  var cellRenderer = function cellRenderer(_ref2) {
3944
3949
  var rowIndex = _ref2.rowIndex,
3945
3950
  key = _ref2.key,
3946
3951
  style = _ref2.style;
3947
3952
  var row = editorData[rowIndex]; // 行数据
3948
- var uploadBgMusic = function uploadBgMusic(file) {
3949
- var canUpload = onBeforeUpload === null || onBeforeUpload === void 0 ? void 0 : onBeforeUpload(file[0]);
3950
- if (!canUpload) return;
3951
- var onSuccess = handleUploadChange(row);
3952
- onSuccess({
3953
- file: file[0],
3954
- isUploading: true
3955
- });
3956
- customRequest === null || customRequest === void 0 ? void 0 : customRequest({
3957
- file: file[0],
3958
- onSuccess: onSuccess,
3959
- method: 'POST',
3960
- action: 'bgm',
3961
- onError: function onError(err) {
3962
- onSuccess({
3963
- file: file[0],
3964
- isUploading: false
3965
- });
3966
- console.error('Upload error:', err);
3967
- }
3968
- });
3969
- };
3970
3953
  var editRow = /*#__PURE__*/React__default['default'].createElement(EditRow, _objectSpread2(_objectSpread2({}, props), {}, {
3971
3954
  uploadBgMusic: uploadBgMusic,
3972
3955
  style: _objectSpread2(_objectSpread2({}, style), {}, {
@@ -4038,30 +4021,30 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
4038
4021
  return;
4039
4022
  }
4040
4023
  }));
4041
- if (!!row && (canUpload || (row === null || row === void 0 ? void 0 : row.canUpload))) {
4042
- var _row$actions, _row$actions$, _row$actions2;
4043
- 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';
4044
- var tChildren = isDefaultMusic ? editRow : null;
4045
- return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(es.Upload, {
4046
- ref: uploadRef,
4047
- key: key + 'upload',
4048
- style: _objectSpread2({
4049
- width: '100%',
4050
- display: 'block',
4051
- position: 'relative'
4052
- }, style),
4053
- beforeUpload: onBeforeUpload,
4054
- onChange: handleUploadChange(row),
4055
- showUploadList: false,
4056
- openFileDialogOnClick: ((_row$actions2 = row.actions) === null || _row$actions2 === void 0 ? void 0 : _row$actions2.filter(function (item) {
4057
- return item.effectId === 'effect2';
4058
- }).length) > 0,
4059
- customRequest: customRequest,
4060
- onDrop: handleDrop,
4061
- type: "drag",
4062
- accept: "audio/mp3,audio/wav,audio/mpeg"
4063
- }, tChildren), tChildren ? null : editRow);
4064
- }
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
+ // }
4065
4048
  return editRow;
4066
4049
  };
4067
4050
  React.useLayoutEffect(function () {
@@ -4074,6 +4057,20 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
4074
4057
  React.useEffect(function () {
4075
4058
  gridRef.current.recomputeGridSize();
4076
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]);
4077
4074
  var _totalHeight = editorData.reduce(function (prev, cur) {
4078
4075
  return prev + (cur.rowHeight || _rowHeight);
4079
4076
  }, 0) + ((className || '').indexOf('1') > -1 ? 12 : 32);
@@ -4209,7 +4206,8 @@ var TimeArea = function TimeArea(_ref) {
4209
4206
  var gridRef = React.useRef();
4210
4207
  /** 是否显示细分刻度 */
4211
4208
  var showUnit = scaleSplitCount > 0;
4212
- /** 获取每个cell渲染内容 */
4209
+ var clientWidth = document.documentElement.clientWidth;
4210
+ /** 获取每个 cell 渲染内容 */
4213
4211
  var cellRenderer = function cellRenderer(_ref2) {
4214
4212
  var columnIndex = _ref2.columnIndex,
4215
4213
  key = _ref2.key,
@@ -4218,6 +4216,12 @@ var TimeArea = function TimeArea(_ref) {
4218
4216
  var classNames = ['time-unit'];
4219
4217
  if (isShowScale) classNames.push('time-unit-big');
4220
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
+ }
4221
4225
  return /*#__PURE__*/React__default['default'].createElement("div", {
4222
4226
  key: key,
4223
4227
  style: style,
@@ -4274,8 +4278,10 @@ var TimeArea = function TimeArea(_ref) {
4274
4278
  if (hideCursor) return;
4275
4279
  var rect = e.currentTarget.getBoundingClientRect();
4276
4280
  var position = e.clientX - rect.x;
4277
- var left = Math.max(position + scrollLeft, startLeft);
4278
- if (left > maxScaleCount * scaleWidth + startLeft - scrollLeft) return;
4281
+ var left = Math.max(position, startLeft);
4282
+ // const left = Math.max(position + scrollLeft, startLeft);
4283
+ if (left > maxScaleCount * scaleWidth + startLeft) return;
4284
+ // if (left > maxScaleCount * scaleWidth + startLeft - scrollLeft) return;
4279
4285
  var time = parserPixelToTime(left, {
4280
4286
  startLeft: startLeft,
4281
4287
  scale: scale,
@@ -4717,7 +4723,8 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
4717
4723
  if (action || hideCursor) return;
4718
4724
  console.log('onClickTimeline = ', time);
4719
4725
  handleSetCursor({
4720
- time: time
4726
+ time: time,
4727
+ updateTime: true
4721
4728
  });
4722
4729
  }, [startLeft, scale, scaleWidth, hideCursor, handleSetCursor]);
4723
4730
  // 监听timeline区域宽度变化
@@ -4736,17 +4743,37 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
4736
4743
  React.useEffect(function () {
4737
4744
  var containerEl = document.querySelector('.timeline-editor');
4738
4745
  var handleScroll = lodashEs.throttle(function (e) {
4739
- console.log('scroll', e);
4746
+ var scrollLeft = e.target.scrollLeft || 0;
4740
4747
  scrollSync.current && scrollSync.current.setState({
4741
- scrollLeft: e.target.scrollLeft || 0
4748
+ scrollLeft: scrollLeft
4742
4749
  });
4750
+ var clientWidth = document.documentElement.clientWidth;
4751
+ var timeStart = parserPixelToTime(scrollLeft, {
4752
+ startLeft: startLeft,
4753
+ scale: scale,
4754
+ scaleWidth: scaleWidth
4755
+ });
4756
+ var timeEnd = parserPixelToTime(scrollLeft + clientWidth, {
4757
+ startLeft: startLeft,
4758
+ scale: scale,
4759
+ scaleWidth: scaleWidth
4760
+ });
4761
+ window.dispatchEvent(new CustomEvent('container-scroll', {
4762
+ detail: {
4763
+ scrollLeft: scrollLeft,
4764
+ scrollWidth: containerEl.scrollWidth,
4765
+ clientWidth: clientWidth,
4766
+ timeStart: timeStart,
4767
+ timeEnd: timeEnd
4768
+ }
4769
+ }));
4743
4770
  }, 100);
4744
4771
  containerEl.addEventListener('scroll', handleScroll);
4745
4772
  return function () {
4746
4773
  containerEl.removeEventListener('scroll', handleScroll);
4747
4774
  handleScroll.cancel();
4748
4775
  };
4749
- }, []);
4776
+ }, [startLeft, scale, scaleWidth]);
4750
4777
  return /*#__PURE__*/React__default['default'].createElement("div", {
4751
4778
  ref: domRef,
4752
4779
  style: style,
@@ -4845,7 +4872,7 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
4845
4872
  setCursor: handleSetCursor,
4846
4873
  deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
4847
4874
  allowCreateTrack: allowCreateTrack,
4848
- minHeight: index === 0 ? undefined : _totalHeight,
4875
+ minHeight: index === 0 ? 122 : _totalHeight,
4849
4876
  containerRef: containerRef,
4850
4877
  onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
4851
4878
  engineRef: engineRef,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sense-react-timeline-editor",
3
- "version": "1.1.9",
3
+ "version": "1.1.11",
4
4
  "author": "xzdarcy",
5
5
  "license": "MIT",
6
6
  "keywords": [