sense-react-timeline-editor 1.1.9 → 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 (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 +73 -69
  4. package/dist/index.js +72 -68
  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
 
@@ -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,
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
 
@@ -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,
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.10",
4
4
  "author": "xzdarcy",
5
5
  "license": "MIT",
6
6
  "keywords": [