sense-react-timeline-editor 1.0.17 → 1.0.19

package/dist/components/edit_area/edit_area.d.ts

@@ -16,15 +16,20 @@ export declare type EditAreaProps = CommonProp & {
     onScroll: (params: OnScrollParams) => void;
     /** 设置编辑器数据 */
     setEditorData: (params: TimelineRow[]) => void;
-    /** 设置scroll left */
+    /** 设置 scroll left */
     deltaScrollLeft: (scrollLeft: number) => void;
+    /** 设置光标位置 */
+    setCursor: (param: {
+        left?: number;
+        time?: number;
+    }) => void;
     /** 是否可以上传 */
     canUpload?: boolean;
     /** 自定义上传请求 */
     customRequest?: UploadProps['customRequest'];
     /** 允许拖拽创建新轨道 */
     allowCreateTrack?: boolean;
-    /** time-editor-container的ref引用 */
+    /** time-editor-container 的 ref 引用 */
     containerRef?: React.MutableRefObject<HTMLDivElement>;
     engineRef?: React.MutableRefObject<ITimelineEngine>;
     /** 最小高度 */
@@ -45,15 +50,20 @@ export declare const EditArea: React.MemoExoticComponent<React.ForwardRefExoticC
     onScroll: (params: OnScrollParams) => void;
     /** 设置编辑器数据 */
     setEditorData: (params: TimelineRow[]) => void;
-    /** 设置scroll left */
+    /** 设置 scroll left */
     deltaScrollLeft: (scrollLeft: number) => void;
+    /** 设置光标位置 */
+    setCursor: (param: {
+        left?: number;
+        time?: number;
+    }) => void;
     /** 是否可以上传 */
     canUpload?: boolean;
     /** 自定义上传请求 */
     customRequest?: UploadProps['customRequest'];
     /** 允许拖拽创建新轨道 */
     allowCreateTrack?: boolean;
-    /** time-editor-container的ref引用 */
+    /** time-editor-container 的 ref 引用 */
     containerRef?: React.MutableRefObject<HTMLDivElement>;
     engineRef?: React.MutableRefObject<ITimelineEngine>;
     /** 最小高度 */

package/dist/components/edit_area/edit_row.d.ts

@@ -11,7 +11,7 @@ export declare type EditRowProps = CommonProp & {
     setEditorData: (params: TimelineRow[]) => void;
     /** 距离左侧滚动距离 */
     scrollLeft: number;
-    /** 设置scroll left */
+    /** 设置 scroll left */
     deltaScrollLeft: (scrollLeft: number) => void;
     /** 允许拖拽创建新轨道 */
     allowCreateTrack?: boolean;
@@ -20,9 +20,15 @@ export declare type EditRowProps = CommonProp & {
         position: 'before' | 'after';
         rowIndex: number;
     } | null) => void;
-    /** time-editor-container的ref引用 */
+    /** time-editor-container 的 ref 引用 */
     containerRef?: React.MutableRefObject<HTMLDivElement>;
     /** 选中的 action IDs */
     selectedActionIds?: string[];
+    /** 设置光标位置 */
+    setCursor?: (param: {
+        left?: number;
+        time?: number;
+    }) => void;
+    uploadBgMusic?: (file: File[]) => void;
 };
 export declare const EditRow: FC<EditRowProps>;

package/dist/index.esm.js

@@ -2918,7 +2918,10 @@ var EditRow = function EditRow(props) {
     allowCreateTrack = props.allowCreateTrack,
     containerRef = props.containerRef,
     _props$selectedAction = props.selectedActionIds,
-    selectedActionIds = _props$selectedAction === void 0 ? [] : _props$selectedAction;
+    selectedActionIds = _props$selectedAction === void 0 ? [] : _props$selectedAction,
+    setCursor = props.setCursor,
+    hideCursor = props.hideCursor,
+    uploadBgMusic = props.uploadBgMusic;
   var classNames = ['edit-row'];
   if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('selected');
   var handleTime = function handleTime(e) {
@@ -2938,14 +2941,34 @@ var EditRow = function EditRow(props) {
     style: style,
     "data-row-id": rowData === null || rowData === void 0 ? void 0 : rowData.id,
     "data-y": "0",
+    onDragOver: function onDragOver(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    onDrop: function onDrop(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (rowData.canUpload) {
+        var files = e.dataTransfer.files;
+        uploadBgMusic === null || uploadBgMusic === void 0 ? void 0 : uploadBgMusic(Array.from(files));
+      }
+    },
     onClick: function onClick(e) {
+      var _e$target;
+      var action = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.closest('.timeline-editor-action');
+      var time = handleTime(e);
       if (rowData && onClickRow) {
-        var time = handleTime(e);
         onClickRow(e, {
           row: rowData,
           time: time
         });
       }
+      if (hideCursor) return;
+      if (setCursor && !action) {
+        setCursor({
+          time: time
+        });
+      }
     },
     onDoubleClick: function onDoubleClick(e) {
       if (rowData && onDoubleClickRow) {
@@ -3211,7 +3234,7 @@ var useRowSelection = function useRowSelection(options) {
   var handleClickOutside = useCallback(function (target) {
     if (disabled) return;
     // 如果点击的不是选中的 action 或框选框，清除选择
-    if (!target.closest('.timeline-editor-selection-box') && !target.closest('.timeline-editor-action') && !target.closest('[data-draggable="true"]') && !target.closest('.voice-studio-right-config-panel') && !target.closest('.voice-studio-main-content-panel')) {
+    if (!target.closest('.timeline-editor-selection-box') && !target.closest('.timeline-editor-action') && !target.closest('[data-draggable="true"]') && !target.closest('.voice-studio-right-config-panel') && !target.closest('.voice-studio-main-content-panel') && !target.closest('.ant-modal')) {
       clearSelection();
     }
   }, [disabled, clearSelection]);
@@ -3707,6 +3730,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
     canUpload = _props$canUpload === void 0 ? false : _props$canUpload,
     customRequest = props.customRequest,
     setEditorData = props.setEditorData,
+    setCursor = props.setCursor,
     _props$allowCreateTra = props.allowCreateTrack,
     allowCreateTrack = _props$allowCreateTra === void 0 ? true : _props$allowCreateTra,
     containerRef = props.containerRef,
@@ -3927,9 +3951,13 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
   // 监听 Ctrl+ 点击事件
   useEffect(function () {
     var handleCtrlClickAction = function handleCtrlClickAction(e) {
+      var _editorData$;
       var _e$detail = e.detail,
         actionId = _e$detail.actionId,
         row = _e$detail.row;
+      if (row.type !== ((_editorData$ = editorData[0]) === null || _editorData$ === void 0 ? void 0 : _editorData$.type)) {
+        return;
+      }
       console.log('ctrl-click-action', row, ', editorData = ', editorData);
       setSelectedActionIds(function (ids) {
         var newIds = new Set();
@@ -3958,8 +3986,24 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
       key = _ref2.key,
       style = _ref2.style;
     var row = editorData[rowIndex]; // 行数据
+    var uploadBgMusic = function uploadBgMusic(file) {
+      var canUpload = onBeforeUpload === null || onBeforeUpload === void 0 ? void 0 : onBeforeUpload(file[0]);
+      if (!canUpload) return;
+      var onSuccess = handleUploadChange(row);
+      customRequest === null || customRequest === void 0 ? void 0 : customRequest({
+        file: file[0],
+        onSuccess: onSuccess,
+        method: 'POST',
+        action: 'bgm',
+        onError: function onError(err) {
+          console.error('Upload error:', err);
+        }
+      });
+    };
     var editRow = /*#__PURE__*/React.createElement(EditRow, _objectSpread2(_objectSpread2({}, props), {}, {
+      uploadBgMusic: uploadBgMusic,
       style: _objectSpread2(_objectSpread2({}, style), {}, {
+        zIndex: rowIndex + 10,
         backgroundPositionX: "0, ".concat(startLeft, "px"),
         backgroundSize: "".concat(startLeft, "px, ").concat(scaleWidth, "px")
       }),
@@ -3972,6 +4016,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setDropPreview: setDropPreview,
       containerRef: containerRef,
       selectedActionIds: selectedActionIds,
+      setCursor: setCursor,
       onActionMoveStart: function onActionMoveStart(data) {
         handleInitDragLine(data);
         onDragStart({
@@ -4029,26 +4074,27 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }));
     if (!!row && (canUpload || (row === null || row === void 0 ? void 0 : row.canUpload))) {
-      var _row$actions;
-      return /*#__PURE__*/React.createElement(Upload, {
+      var _row$actions, _row$actions$, _row$actions2;
+      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';
+      var tChildren = isDefaultMusic ? editRow : null;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Upload, {
         ref: uploadRef,
         key: key + 'upload',
-        style: _objectSpread2(_objectSpread2({
+        style: _objectSpread2({
           width: '100%',
-          display: 'block'
-        }, style), {}, {
-          top: 0
-        }),
+          display: 'block',
+          position: 'relative'
+        }, style),
         beforeUpload: onBeforeUpload,
         onChange: handleUploadChange(row),
         showUploadList: false,
-        openFileDialogOnClick: ((_row$actions = row.actions) === null || _row$actions === void 0 ? void 0 : _row$actions.filter(function (item) {
+        openFileDialogOnClick: ((_row$actions2 = row.actions) === null || _row$actions2 === void 0 ? void 0 : _row$actions2.filter(function (item) {
           return item.effectId === 'effect2';
         }).length) > 0,
         customRequest: customRequest,
         onDrop: handleDrop,
         type: "drag"
-      }, editRow);
+      }, tChildren), tChildren ? null : editRow);
     }
     return editRow;
   };
@@ -4529,6 +4575,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
       scrollLeft: scrollLeft,
       engineRef: engineRef,
       setEditorData: handleEditorDataChange,
+      setCursor: handleSetCursor,
       deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
       allowCreateTrack: allowCreateTrack,
       onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
@@ -4581,6 +4628,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
         scrollTop: scrollTop,
         scrollLeft: scrollLeft,
         setEditorData: handleGroupDataChange,
+        setCursor: handleSetCursor,
         deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
         allowCreateTrack: allowCreateTrack,
         minHeight: index === 0 ? undefined : _totalHeight,

package/dist/index.js

@@ -2927,7 +2927,10 @@ var EditRow = function EditRow(props) {
     allowCreateTrack = props.allowCreateTrack,
     containerRef = props.containerRef,
     _props$selectedAction = props.selectedActionIds,
-    selectedActionIds = _props$selectedAction === void 0 ? [] : _props$selectedAction;
+    selectedActionIds = _props$selectedAction === void 0 ? [] : _props$selectedAction,
+    setCursor = props.setCursor,
+    hideCursor = props.hideCursor,
+    uploadBgMusic = props.uploadBgMusic;
   var classNames = ['edit-row'];
   if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('selected');
   var handleTime = function handleTime(e) {
@@ -2947,14 +2950,34 @@ var EditRow = function EditRow(props) {
     style: style,
     "data-row-id": rowData === null || rowData === void 0 ? void 0 : rowData.id,
     "data-y": "0",
+    onDragOver: function onDragOver(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    onDrop: function onDrop(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (rowData.canUpload) {
+        var files = e.dataTransfer.files;
+        uploadBgMusic === null || uploadBgMusic === void 0 ? void 0 : uploadBgMusic(Array.from(files));
+      }
+    },
     onClick: function onClick(e) {
+      var _e$target;
+      var action = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.closest('.timeline-editor-action');
+      var time = handleTime(e);
       if (rowData && onClickRow) {
-        var time = handleTime(e);
         onClickRow(e, {
           row: rowData,
           time: time
         });
       }
+      if (hideCursor) return;
+      if (setCursor && !action) {
+        setCursor({
+          time: time
+        });
+      }
     },
     onDoubleClick: function onDoubleClick(e) {
       if (rowData && onDoubleClickRow) {
@@ -3220,7 +3243,7 @@ var useRowSelection = function useRowSelection(options) {
   var handleClickOutside = React.useCallback(function (target) {
     if (disabled) return;
     // 如果点击的不是选中的 action 或框选框，清除选择
-    if (!target.closest('.timeline-editor-selection-box') && !target.closest('.timeline-editor-action') && !target.closest('[data-draggable="true"]') && !target.closest('.voice-studio-right-config-panel') && !target.closest('.voice-studio-main-content-panel')) {
+    if (!target.closest('.timeline-editor-selection-box') && !target.closest('.timeline-editor-action') && !target.closest('[data-draggable="true"]') && !target.closest('.voice-studio-right-config-panel') && !target.closest('.voice-studio-main-content-panel') && !target.closest('.ant-modal')) {
       clearSelection();
     }
   }, [disabled, clearSelection]);
@@ -3716,6 +3739,7 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
     canUpload = _props$canUpload === void 0 ? false : _props$canUpload,
     customRequest = props.customRequest,
     setEditorData = props.setEditorData,
+    setCursor = props.setCursor,
     _props$allowCreateTra = props.allowCreateTrack,
     allowCreateTrack = _props$allowCreateTra === void 0 ? true : _props$allowCreateTra,
     containerRef = props.containerRef,
@@ -3936,9 +3960,13 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
   // 监听 Ctrl+ 点击事件
   React.useEffect(function () {
     var handleCtrlClickAction = function handleCtrlClickAction(e) {
+      var _editorData$;
       var _e$detail = e.detail,
         actionId = _e$detail.actionId,
         row = _e$detail.row;
+      if (row.type !== ((_editorData$ = editorData[0]) === null || _editorData$ === void 0 ? void 0 : _editorData$.type)) {
+        return;
+      }
       console.log('ctrl-click-action', row, ', editorData = ', editorData);
       setSelectedActionIds(function (ids) {
         var newIds = new Set();
@@ -3967,8 +3995,24 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
       key = _ref2.key,
       style = _ref2.style;
     var row = editorData[rowIndex]; // 行数据
+    var uploadBgMusic = function uploadBgMusic(file) {
+      var canUpload = onBeforeUpload === null || onBeforeUpload === void 0 ? void 0 : onBeforeUpload(file[0]);
+      if (!canUpload) return;
+      var onSuccess = handleUploadChange(row);
+      customRequest === null || customRequest === void 0 ? void 0 : customRequest({
+        file: file[0],
+        onSuccess: onSuccess,
+        method: 'POST',
+        action: 'bgm',
+        onError: function onError(err) {
+          console.error('Upload error:', err);
+        }
+      });
+    };
     var editRow = /*#__PURE__*/React__default['default'].createElement(EditRow, _objectSpread2(_objectSpread2({}, props), {}, {
+      uploadBgMusic: uploadBgMusic,
       style: _objectSpread2(_objectSpread2({}, style), {}, {
+        zIndex: rowIndex + 10,
         backgroundPositionX: "0, ".concat(startLeft, "px"),
         backgroundSize: "".concat(startLeft, "px, ").concat(scaleWidth, "px")
       }),
@@ -3981,6 +4025,7 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
       setDropPreview: setDropPreview,
       containerRef: containerRef,
       selectedActionIds: selectedActionIds,
+      setCursor: setCursor,
       onActionMoveStart: function onActionMoveStart(data) {
         handleInitDragLine(data);
         onDragStart({
@@ -4038,26 +4083,27 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
       }
     }));
     if (!!row && (canUpload || (row === null || row === void 0 ? void 0 : row.canUpload))) {
-      var _row$actions;
-      return /*#__PURE__*/React__default['default'].createElement(es.Upload, {
+      var _row$actions, _row$actions$, _row$actions2;
+      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';
+      var tChildren = isDefaultMusic ? editRow : null;
+      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(es.Upload, {
         ref: uploadRef,
         key: key + 'upload',
-        style: _objectSpread2(_objectSpread2({
+        style: _objectSpread2({
           width: '100%',
-          display: 'block'
-        }, style), {}, {
-          top: 0
-        }),
+          display: 'block',
+          position: 'relative'
+        }, style),
         beforeUpload: onBeforeUpload,
         onChange: handleUploadChange(row),
         showUploadList: false,
-        openFileDialogOnClick: ((_row$actions = row.actions) === null || _row$actions === void 0 ? void 0 : _row$actions.filter(function (item) {
+        openFileDialogOnClick: ((_row$actions2 = row.actions) === null || _row$actions2 === void 0 ? void 0 : _row$actions2.filter(function (item) {
           return item.effectId === 'effect2';
         }).length) > 0,
         customRequest: customRequest,
         onDrop: handleDrop,
         type: "drag"
-      }, editRow);
+      }, tChildren), tChildren ? null : editRow);
     }
     return editRow;
   };
@@ -4538,6 +4584,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
       scrollLeft: scrollLeft,
       engineRef: engineRef,
       setEditorData: handleEditorDataChange,
+      setCursor: handleSetCursor,
       deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
       allowCreateTrack: allowCreateTrack,
       onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
@@ -4590,6 +4637,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
         scrollTop: scrollTop,
         scrollLeft: scrollLeft,
         setEditorData: handleGroupDataChange,
+        setCursor: handleSetCursor,
         deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
         allowCreateTrack: allowCreateTrack,
         minHeight: index === 0 ? undefined : _totalHeight,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sense-react-timeline-editor",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "author": "xzdarcy",
   "license": "MIT",
   "keywords": [