sense-react-timeline-editor 1.0.13 → 1.0.15

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

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { TimelineAction, TimelineRow } from '../../interface/action';
 import { CommonProp } from '../../interface/common_prop';
 import { DragLineData } from './drag_lines';
@@ -23,4 +23,4 @@ export declare type EditActionProps = CommonProp & {
     containerRef?: React.MutableRefObject<HTMLDivElement>;
     selectedActionIds?: string[];
 };
-export declare const EditAction: FC<EditActionProps>;
+export declare const EditAction: React.NamedExoticComponent<EditActionProps>;

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState, useLayoutEffect, useCallback } from 'react';
 import { AutoSizer, Grid, ScrollSync } from 'react-virtualized';
-import { useThrottleEffect, useDebounceFn } from 'ahooks';
+import { useThrottleEffect, useThrottleFn } from 'ahooks';
 import { prefixNames } from 'framework-utils';
 import interact from 'interactjs';
 import { useSelectionContainer } from '@air/react-drag-to-select';
@@ -2114,7 +2114,7 @@ styleInject(css_248z$3);
 var stretchIcon = "data:image/svg+xml,%3Csvg%20width%3D%227%22%20height%3D%2216%22%20viewBox%3D%220%200%207%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7%2015C7%2015.5523%206.55228%2016%206%2016L1%2016C0.447715%2016%201.06779e-08%2015.5523%202.38498e-08%2015L3.57746e-07%201C3.70918e-07%200.447715%200.447716%20-1.5627e-07%201%20-1.43099e-07L6%209.29825e-07C6.55229%209.42996e-07%207%200.447716%207%201L7%2015Z%22%20fill%3D%22%23226EFF%22%2F%3E%3Cpath%20d%3D%22M2%204L2%2012%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%2012.25L5.5%208L4%203.75%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M4%2012.25L5.5%208L4%203.75L4%2012.25Z%22%20stroke%3D%22white%22%20stroke-width%3D%220.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
 
 var _excluded = ["left", "width", "top"];
-var EditAction = function EditAction(_ref) {
+var EditActionO = function EditActionO(_ref) {
   var editorData = _ref.editorData,
     row = _ref.row,
     action = _ref.action,
@@ -2150,7 +2150,6 @@ var EditAction = function EditAction(_ref) {
     setDropPreview = _ref.setDropPreview,
     containerRef = _ref.containerRef,
     selectedActionIds = _ref.selectedActionIds;
-  console.log('action: selectedActionIds = ', selectedActionIds);
   var rowRnd = useRef();
   var isDragWhenClick = useRef(false);
   var originalPosition = useRef({
@@ -2654,10 +2653,10 @@ var EditAction = function EditAction(_ref) {
     });
   }, [action, allowCreateTrack, editorData, id, onActionMoveEnd, parserTimeToTransform, parserTransformToTime, row, scale, scaleWidth, setDropPreview, setEditorData, startLeft, selectedActionIds]);
   // 防抖版本的 handleDragEnd
-  var _useDebounceFn = useDebounceFn(handleDragEndBase, {
+  var _useThrottleFn = useThrottleFn(handleDragEndBase, {
       wait: 300
     }),
-    handleDragEnd = _useDebounceFn.run;
+    handleDragEnd = _useThrottleFn.run;
   var handleResizeStart = function handleResizeStart(dir) {
     onActionResizeStart && onActionResizeStart({
       action: action,
@@ -2882,6 +2881,7 @@ var EditAction = function EditAction(_ref) {
     alt: ""
   }))));
 };
+var EditAction = /*#__PURE__*/React.memo(EditActionO);
 
 var css_248z$4 = ".timeline-editor-edit-row {\n  background-repeat: no-repeat, repeat;\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n}\n.timeline-editor-edit-row.preview-row {\n  background-color: rgba(100, 150, 255, 0.15);\n  border: 1px dashed rgba(100, 150, 255, 0.5);\n  opacity: 0.8;\n  transition: all 0.2s ease;\n}\n.timeline-editor-edit-row.selected {\n  background-color: rgba(24, 144, 255, 0.08);\n  box-shadow: inset 0 0 0 2px rgba(24, 144, 255, 0.4);\n  position: relative;\n  z-index: 10;\n}\n.timeline-editor-edit-row.selected::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background-color: #1890ff;\n}\n.timeline-editor-edit-row.dragging {\n  opacity: 0.6;\n  cursor: move;\n}\n";
 styleInject(css_248z$4);
@@ -3377,8 +3377,8 @@ var useRowDrag = function useRowDrag(options) {
       var initialPos = state.initialElementPositions.get(elActionId);
       if (!initialPos) return;
       // 计算新位置 = 初始位置 + 总偏移量
-      var newX = initialPos.x + state.offsetX;
-      var newY = initialPos.y + state.offsetY;
+      var newX = state.offsetX;
+      var newY = state.offsetY;
       // 更新元素位置
       el.style.transform = "translate(".concat(newX, "px, ").concat(newY, "px)");
       // 存储当前位置数据
@@ -3735,7 +3735,8 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
                 url: info.file.response.url,
                 start: currentMouseTime,
                 end: currentMouseTime + duration,
-                isUpload: true
+                isUpload: true,
+                segment_type: 'bgm'
               };
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [newAction]);
             case 3:
@@ -4344,7 +4345,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   /** 处理主动数据变化 */
   var handleEditorDataChange = function handleEditorDataChange(updatedData) {
-    var result = onChange(updatedData);
+    var result = onChange === null || onChange === void 0 ? void 0 : onChange(updatedData);
     if (result !== false) {
       setEditorData(updatedData);
       engineRef.current.data = updatedData;
@@ -4529,7 +4530,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
           var indexB = keys.indexOf(String(b.type));
           return indexA - indexB;
         });
-        var result = onChange(sortedMergedData);
+        var result = onChange === null || onChange === void 0 ? void 0 : onChange(sortedMergedData);
         if (result !== false) {
           setEditorData(sortedMergedData);
           engineRef.current.data = sortedMergedData;

package/dist/index.js

@@ -2123,7 +2123,7 @@ styleInject(css_248z$3);
 var stretchIcon = "data:image/svg+xml,%3Csvg%20width%3D%227%22%20height%3D%2216%22%20viewBox%3D%220%200%207%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7%2015C7%2015.5523%206.55228%2016%206%2016L1%2016C0.447715%2016%201.06779e-08%2015.5523%202.38498e-08%2015L3.57746e-07%201C3.70918e-07%200.447715%200.447716%20-1.5627e-07%201%20-1.43099e-07L6%209.29825e-07C6.55229%209.42996e-07%207%200.447716%207%201L7%2015Z%22%20fill%3D%22%23226EFF%22%2F%3E%3Cpath%20d%3D%22M2%204L2%2012%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%2012.25L5.5%208L4%203.75%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M4%2012.25L5.5%208L4%203.75L4%2012.25Z%22%20stroke%3D%22white%22%20stroke-width%3D%220.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
 
 var _excluded = ["left", "width", "top"];
-var EditAction = function EditAction(_ref) {
+var EditActionO = function EditActionO(_ref) {
   var editorData = _ref.editorData,
     row = _ref.row,
     action = _ref.action,
@@ -2159,7 +2159,6 @@ var EditAction = function EditAction(_ref) {
     setDropPreview = _ref.setDropPreview,
     containerRef = _ref.containerRef,
     selectedActionIds = _ref.selectedActionIds;
-  console.log('action: selectedActionIds = ', selectedActionIds);
   var rowRnd = React.useRef();
   var isDragWhenClick = React.useRef(false);
   var originalPosition = React.useRef({
@@ -2663,10 +2662,10 @@ var EditAction = function EditAction(_ref) {
     });
   }, [action, allowCreateTrack, editorData, id, onActionMoveEnd, parserTimeToTransform, parserTransformToTime, row, scale, scaleWidth, setDropPreview, setEditorData, startLeft, selectedActionIds]);
   // 防抖版本的 handleDragEnd
-  var _useDebounceFn = ahooks.useDebounceFn(handleDragEndBase, {
+  var _useThrottleFn = ahooks.useThrottleFn(handleDragEndBase, {
       wait: 300
     }),
-    handleDragEnd = _useDebounceFn.run;
+    handleDragEnd = _useThrottleFn.run;
   var handleResizeStart = function handleResizeStart(dir) {
     onActionResizeStart && onActionResizeStart({
       action: action,
@@ -2891,6 +2890,7 @@ var EditAction = function EditAction(_ref) {
     alt: ""
   }))));
 };
+var EditAction = /*#__PURE__*/React__default['default'].memo(EditActionO);
 
 var css_248z$4 = ".timeline-editor-edit-row {\n  background-repeat: no-repeat, repeat;\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n}\n.timeline-editor-edit-row.preview-row {\n  background-color: rgba(100, 150, 255, 0.15);\n  border: 1px dashed rgba(100, 150, 255, 0.5);\n  opacity: 0.8;\n  transition: all 0.2s ease;\n}\n.timeline-editor-edit-row.selected {\n  background-color: rgba(24, 144, 255, 0.08);\n  box-shadow: inset 0 0 0 2px rgba(24, 144, 255, 0.4);\n  position: relative;\n  z-index: 10;\n}\n.timeline-editor-edit-row.selected::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background-color: #1890ff;\n}\n.timeline-editor-edit-row.dragging {\n  opacity: 0.6;\n  cursor: move;\n}\n";
 styleInject(css_248z$4);
@@ -3386,8 +3386,8 @@ var useRowDrag = function useRowDrag(options) {
       var initialPos = state.initialElementPositions.get(elActionId);
       if (!initialPos) return;
       // 计算新位置 = 初始位置 + 总偏移量
-      var newX = initialPos.x + state.offsetX;
-      var newY = initialPos.y + state.offsetY;
+      var newX = state.offsetX;
+      var newY = state.offsetY;
       // 更新元素位置
       el.style.transform = "translate(".concat(newX, "px, ").concat(newY, "px)");
       // 存储当前位置数据
@@ -3744,7 +3744,8 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
                 url: info.file.response.url,
                 start: currentMouseTime,
                 end: currentMouseTime + duration,
-                isUpload: true
+                isUpload: true,
+                segment_type: 'bgm'
               };
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [newAction]);
             case 3:
@@ -4353,7 +4354,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
   };
   /** 处理主动数据变化 */
   var handleEditorDataChange = function handleEditorDataChange(updatedData) {
-    var result = onChange(updatedData);
+    var result = onChange === null || onChange === void 0 ? void 0 : onChange(updatedData);
     if (result !== false) {
       setEditorData(updatedData);
       engineRef.current.data = updatedData;
@@ -4538,7 +4539,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
           var indexB = keys.indexOf(String(b.type));
           return indexA - indexB;
         });
-        var result = onChange(sortedMergedData);
+        var result = onChange === null || onChange === void 0 ? void 0 : onChange(sortedMergedData);
         if (result !== false) {
           setEditorData(sortedMergedData);
           engineRef.current.data = sortedMergedData;

package/dist/interface/action.d.ts

@@ -30,6 +30,8 @@ export interface TimelineAction {
     is_disabled?: boolean;
     /** 动作是否为上传 */
     isUpload?: boolean;
+    /** 动作的类型 */
+    segment_type?: string;
 }
 /**
  * 动作行基本参数

package/package.json

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