sense-react-timeline-editor 1.1.32 → 1.1.34

package/dist/index.esm.js

@@ -3890,20 +3890,35 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (trackPreviewDataRef.current) setTrackPreview(trackPreviewDataRef.current);
     if (dragIndicatorDataRef.current) setDragIndicator(dragIndicatorDataRef.current);
   }, [scrollTop]);
+  // 使用 ref 追踪 handleSelectionChange 的调用深度，避免无限循环
+  var selectionChangeDepthRef = useRef(0);
   // 框选功能
   var handleSelectionChange = useCallback(function (selectedActionIds) {
-    // 更新 editorData 中每个 action 的选中状态
-    var updatedData = editorData.map(function (row) {
-      return _objectSpread2(_objectSpread2({}, row), {}, {
-        actions: row.actions.map(function (action) {
-          return _objectSpread2(_objectSpread2({}, action), {}, {
-            selected: selectedActionIds.includes(action.id)
-          });
-        })
+    // 如果调用深度过深（超过10层），说明可能存在无限循环，直接返回
+    if (selectionChangeDepthRef.current > 10) {
+      console.warn('Selection change depth exceeded, possible infinite loop detected');
+      return;
+    }
+    selectionChangeDepthRef.current++;
+    try {
+      // 更新 editorData 中每个 action 的选中状态
+      var updatedData = editorData.map(function (row) {
+        return _objectSpread2(_objectSpread2({}, row), {}, {
+          actions: row.actions.map(function (action) {
+            return _objectSpread2(_objectSpread2({}, action), {}, {
+              selected: selectedActionIds.includes(action.id)
+            });
+          })
+        });
       });
-    });
-    setEditorData(updatedData);
-    onMutiSelectChange === null || onMutiSelectChange === void 0 ? void 0 : onMutiSelectChange(selectedActionIds);
+      setEditorData(updatedData);
+      onMutiSelectChange === null || onMutiSelectChange === void 0 ? void 0 : onMutiSelectChange(selectedActionIds);
+    } finally {
+      // 延迟重置计数器，确保在 React 完成渲染后执行
+      setTimeout(function () {
+        selectionChangeDepthRef.current--;
+      }, 0);
+    }
   }, [editorData, setEditorData, onMutiSelectChange]);
   var _useRowSelection = useRowSelection({
       editorData: editorData,
@@ -4173,8 +4188,9 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
     };
   }, [engineRef, uploadBgMusic, editorData]);
   var _totalHeight = editorData.reduce(function (prev, cur) {
-    return prev + (cur.rowHeight || _rowHeight);
+    return prev + (cur.rowHeight + 2 || _rowHeight);
   }, 0) + ((className || '').indexOf('1') > -1 ? 12 : 32);
+  // console.log(_totalHeight, ', editorData = ', editorData);
   if (minHeight) {
     var calcHeight = "calc(100% - ".concat(minHeight + 16, "px)");
     _totalHeight = "max(".concat(_totalHeight, "px, ").concat(calcHeight, ")");
@@ -4786,8 +4802,19 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
   useEffect(function () {
     var handleClickOutside = function handleClickOutside(e) {
       var target = e.target;
-      var actionEl = target.closest('.timeline-editor-time-area') || target.closest('.timeline-editor-action');
-      if (actionEl) return;
+      var areaEl = target.closest('.timeline-editor-time-area');
+      if (areaEl) return;
+      var actionEl = target.closest('.timeline-editor-action');
+      if (actionEl) {
+        var _props$onClickActionO;
+        // @ts-expect-error 类型断言
+        (_props$onClickActionO = props.onClickActionOnly) === null || _props$onClickActionO === void 0 ? void 0 : _props$onClickActionO.call(props, e, {
+          action: {
+            id: actionEl.dataset.actionId
+          }
+        });
+        return;
+      }
       engineRef.current.trigger('mousedown', {
         target: target,
         evt: e
@@ -4803,7 +4830,7 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
     return function () {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, []);
+  }, [props.onClickActionOnly]);
   // ref 数据
   useImperativeHandle(ref, function () {
     return {
@@ -4927,6 +4954,9 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
       handleScroll.cancel();
     };
   }, [startLeft, scale, scaleWidth]);
+  var _totalHeight = editorData.reduce(function (prev, cur) {
+    return prev + (cur.rowHeight + 2 || 32);
+  }, 0) + 32 + 24;
   return /*#__PURE__*/React.createElement("div", {
     ref: domRef,
     style: style,
@@ -4980,7 +5010,7 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
       id: "time-editor-container",
       ref: containerRef,
       style: {
-        height: '100%',
+        height: _totalHeight,
         background: '#fff'
       },
       onClick: throttledOnClickTimeline
@@ -5026,7 +5056,7 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
         setCursor: handleSetCursor,
         deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
         allowCreateTrack: allowCreateTrack,
-        minHeight: index === 0 ? 122 : _totalHeight,
+        minHeight: index === 0 ? 122 : undefined,
         containerRef: containerRef,
         onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
         engineRef: engineRef,

package/dist/index.js

@@ -3900,20 +3900,35 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
     if (trackPreviewDataRef.current) setTrackPreview(trackPreviewDataRef.current);
     if (dragIndicatorDataRef.current) setDragIndicator(dragIndicatorDataRef.current);
   }, [scrollTop]);
+  // 使用 ref 追踪 handleSelectionChange 的调用深度，避免无限循环
+  var selectionChangeDepthRef = React.useRef(0);
   // 框选功能
   var handleSelectionChange = React.useCallback(function (selectedActionIds) {
-    // 更新 editorData 中每个 action 的选中状态
-    var updatedData = editorData.map(function (row) {
-      return _objectSpread2(_objectSpread2({}, row), {}, {
-        actions: row.actions.map(function (action) {
-          return _objectSpread2(_objectSpread2({}, action), {}, {
-            selected: selectedActionIds.includes(action.id)
-          });
-        })
+    // 如果调用深度过深（超过10层），说明可能存在无限循环，直接返回
+    if (selectionChangeDepthRef.current > 10) {
+      console.warn('Selection change depth exceeded, possible infinite loop detected');
+      return;
+    }
+    selectionChangeDepthRef.current++;
+    try {
+      // 更新 editorData 中每个 action 的选中状态
+      var updatedData = editorData.map(function (row) {
+        return _objectSpread2(_objectSpread2({}, row), {}, {
+          actions: row.actions.map(function (action) {
+            return _objectSpread2(_objectSpread2({}, action), {}, {
+              selected: selectedActionIds.includes(action.id)
+            });
+          })
+        });
       });
-    });
-    setEditorData(updatedData);
-    onMutiSelectChange === null || onMutiSelectChange === void 0 ? void 0 : onMutiSelectChange(selectedActionIds);
+      setEditorData(updatedData);
+      onMutiSelectChange === null || onMutiSelectChange === void 0 ? void 0 : onMutiSelectChange(selectedActionIds);
+    } finally {
+      // 延迟重置计数器，确保在 React 完成渲染后执行
+      setTimeout(function () {
+        selectionChangeDepthRef.current--;
+      }, 0);
+    }
   }, [editorData, setEditorData, onMutiSelectChange]);
   var _useRowSelection = useRowSelection({
       editorData: editorData,
@@ -4183,8 +4198,9 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
     };
   }, [engineRef, uploadBgMusic, editorData]);
   var _totalHeight = editorData.reduce(function (prev, cur) {
-    return prev + (cur.rowHeight || _rowHeight);
+    return prev + (cur.rowHeight + 2 || _rowHeight);
   }, 0) + ((className || '').indexOf('1') > -1 ? 12 : 32);
+  // console.log(_totalHeight, ', editorData = ', editorData);
   if (minHeight) {
     var calcHeight = "calc(100% - ".concat(minHeight + 16, "px)");
     _totalHeight = "max(".concat(_totalHeight, "px, ").concat(calcHeight, ")");
@@ -4796,8 +4812,19 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
   React.useEffect(function () {
     var handleClickOutside = function handleClickOutside(e) {
       var target = e.target;
-      var actionEl = target.closest('.timeline-editor-time-area') || target.closest('.timeline-editor-action');
-      if (actionEl) return;
+      var areaEl = target.closest('.timeline-editor-time-area');
+      if (areaEl) return;
+      var actionEl = target.closest('.timeline-editor-action');
+      if (actionEl) {
+        var _props$onClickActionO;
+        // @ts-expect-error 类型断言
+        (_props$onClickActionO = props.onClickActionOnly) === null || _props$onClickActionO === void 0 ? void 0 : _props$onClickActionO.call(props, e, {
+          action: {
+            id: actionEl.dataset.actionId
+          }
+        });
+        return;
+      }
       engineRef.current.trigger('mousedown', {
         target: target,
         evt: e
@@ -4813,7 +4840,7 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
     return function () {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, []);
+  }, [props.onClickActionOnly]);
   // ref 数据
   React.useImperativeHandle(ref, function () {
     return {
@@ -4937,6 +4964,9 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
       handleScroll.cancel();
     };
   }, [startLeft, scale, scaleWidth]);
+  var _totalHeight = editorData.reduce(function (prev, cur) {
+    return prev + (cur.rowHeight + 2 || 32);
+  }, 0) + 32 + 24;
   return /*#__PURE__*/React__default['default'].createElement("div", {
     ref: domRef,
     style: style,
@@ -4990,7 +5020,7 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
       id: "time-editor-container",
       ref: containerRef,
       style: {
-        height: '100%',
+        height: _totalHeight,
         background: '#fff'
       },
       onClick: throttledOnClickTimeline
@@ -5036,7 +5066,7 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
         setCursor: handleSetCursor,
         deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
         allowCreateTrack: allowCreateTrack,
-        minHeight: index === 0 ? 122 : _totalHeight,
+        minHeight: index === 0 ? 122 : undefined,
         containerRef: containerRef,
         onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
         engineRef: engineRef,

package/package.json

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