sense-react-timeline-editor 1.1.25 → 1.1.27

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

@@ -12,6 +12,7 @@ export interface UseRowSelectionOptions {
 export declare const useRowSelection: (options: UseRowSelectionOptions) => {
     DragSelection: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     selectedActionIds: string[];
+    justFinishedSelectionRef: import("react").MutableRefObject<boolean>;
     clearSelection: () => void;
     onClickOutside: (target: HTMLElement) => void;
     onCtrlClick: (actionId: string, event: MouseEvent) => void;

package/dist/index.esm.js

@@ -2961,7 +2961,6 @@ var css_248z$3 = ".timeline-editor-edit-row {\n  background-repeat: no-repeat, r
 styleInject(css_248z$3);
 
 var EditRow = function EditRow(props) {
-  var _areaRef$current;
   var rowData = props.rowData,
     _props$style = props.style,
     style = _props$style === void 0 ? {} : _props$style,
@@ -2983,8 +2982,8 @@ var EditRow = function EditRow(props) {
   var classNames = ['edit-row'];
   if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('selected');
   if (rowData === null || rowData === void 0 ? void 0 : rowData.isPreview) classNames.push('preview-row');
-  var viewportWidth = ((_areaRef$current = areaRef.current) === null || _areaRef$current === void 0 ? void 0 : _areaRef$current.clientWidth) || window.innerWidth || document.documentElement.clientWidth;
-  var overscanPx = Math.max(2000, viewportWidth * 2);
+  var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+  var overscanPx = Math.max(400, viewportWidth * 0.7);
   var timeStart = parserPixelToTime(scrollLeft - overscanPx, {
     startLeft: startLeft,
     scale: scale,
@@ -3095,6 +3094,8 @@ var useRowSelection = function useRowSelection(options) {
     _useState2 = _slicedToArray(_useState, 2),
     selectedActionIds = _useState2[0],
     setSelectedActionIds = _useState2[1];
+  var justFinishedSelectionRef = useRef(false);
+  var selectionResetTimerRef = useRef(null);
   // 计算框选区域与 action 的交集
   var getIntersectedActions = useCallback(function (box) {
     var _containerRef$current, _containerRef$current2;
@@ -3160,6 +3161,14 @@ var useRowSelection = function useRowSelection(options) {
         }
       },
       onSelectionEnd: function onSelectionEnd() {
+        justFinishedSelectionRef.current = true;
+        if (selectionResetTimerRef.current) {
+          clearTimeout(selectionResetTimerRef.current);
+        }
+        selectionResetTimerRef.current = setTimeout(function () {
+          justFinishedSelectionRef.current = false;
+          selectionResetTimerRef.current = null;
+        }, 0);
         // 清除框选框
         setTimeout(function () {
           var selectionBoxes = document.querySelectorAll('.timeline-editor-selection-box');
@@ -3230,11 +3239,15 @@ var useRowSelection = function useRowSelection(options) {
     document.addEventListener('keydown', handleKeyDown);
     return function () {
       document.removeEventListener('keydown', handleKeyDown);
+      if (selectionResetTimerRef.current) {
+        clearTimeout(selectionResetTimerRef.current);
+      }
     };
   }, [handleKeyDown]);
   return {
     DragSelection: DragSelection,
     selectedActionIds: Array.from(selectedActionIds),
+    justFinishedSelectionRef: justFinishedSelectionRef,
     clearSelection: clearSelection,
     onClickOutside: handleClickOutside,
     onCtrlClick: handleCtrlClick,
@@ -3904,6 +3917,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }),
     DragSelection = _useRowSelection.DragSelection,
     selectedActionIds = _useRowSelection.selectedActionIds,
+    justFinishedSelectionRef = _useRowSelection.justFinishedSelectionRef,
     onClickOutside = _useRowSelection.onClickOutside,
     onCtrlClick = _useRowSelection.onCtrlClick,
     setSelectedActionIds = _useRowSelection.setSelectedActionIds;
@@ -4172,6 +4186,11 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement("div", {
     ref: editAreaRef,
     className: prefix('edit-area') + " ".concat((className || '').replace('timeline-editor', '') || ''),
+    onClickCapture: function onClickCapture(e) {
+      if (!justFinishedSelectionRef.current) return;
+      e.preventDefault();
+      e.stopPropagation();
+    },
     style: {
       height: isMulti ? _totalHeight : 'unset',
       maxHeight: isMulti ? _totalHeight : 'unset',
@@ -4303,7 +4322,7 @@ var TimeArea = function TimeArea(_ref) {
   var gridRef = useRef();
   /** 是否显示细分刻度 */
   var showUnit = scaleSplitCount > 0;
-  var visibleWidth = timelineWidth || document.documentElement.clientWidth;
+  var visibleWidth = document.documentElement.clientWidth;
   /** 获取每个 cell 渲染内容 */
   var cellRenderer = function cellRenderer(_ref2) {
     var columnIndex = _ref2.columnIndex,

package/dist/index.js

@@ -2971,7 +2971,6 @@ var css_248z$3 = ".timeline-editor-edit-row {\n  background-repeat: no-repeat, r
 styleInject(css_248z$3);
 
 var EditRow = function EditRow(props) {
-  var _areaRef$current;
   var rowData = props.rowData,
     _props$style = props.style,
     style = _props$style === void 0 ? {} : _props$style,
@@ -2993,8 +2992,8 @@ var EditRow = function EditRow(props) {
   var classNames = ['edit-row'];
   if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('selected');
   if (rowData === null || rowData === void 0 ? void 0 : rowData.isPreview) classNames.push('preview-row');
-  var viewportWidth = ((_areaRef$current = areaRef.current) === null || _areaRef$current === void 0 ? void 0 : _areaRef$current.clientWidth) || window.innerWidth || document.documentElement.clientWidth;
-  var overscanPx = Math.max(2000, viewportWidth * 2);
+  var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+  var overscanPx = Math.max(400, viewportWidth * 0.7);
   var timeStart = parserPixelToTime(scrollLeft - overscanPx, {
     startLeft: startLeft,
     scale: scale,
@@ -3105,6 +3104,8 @@ var useRowSelection = function useRowSelection(options) {
     _useState2 = _slicedToArray(_useState, 2),
     selectedActionIds = _useState2[0],
     setSelectedActionIds = _useState2[1];
+  var justFinishedSelectionRef = React.useRef(false);
+  var selectionResetTimerRef = React.useRef(null);
   // 计算框选区域与 action 的交集
   var getIntersectedActions = React.useCallback(function (box) {
     var _containerRef$current, _containerRef$current2;
@@ -3170,6 +3171,14 @@ var useRowSelection = function useRowSelection(options) {
         }
       },
       onSelectionEnd: function onSelectionEnd() {
+        justFinishedSelectionRef.current = true;
+        if (selectionResetTimerRef.current) {
+          clearTimeout(selectionResetTimerRef.current);
+        }
+        selectionResetTimerRef.current = setTimeout(function () {
+          justFinishedSelectionRef.current = false;
+          selectionResetTimerRef.current = null;
+        }, 0);
         // 清除框选框
         setTimeout(function () {
           var selectionBoxes = document.querySelectorAll('.timeline-editor-selection-box');
@@ -3240,11 +3249,15 @@ var useRowSelection = function useRowSelection(options) {
     document.addEventListener('keydown', handleKeyDown);
     return function () {
       document.removeEventListener('keydown', handleKeyDown);
+      if (selectionResetTimerRef.current) {
+        clearTimeout(selectionResetTimerRef.current);
+      }
     };
   }, [handleKeyDown]);
   return {
     DragSelection: DragSelection,
     selectedActionIds: Array.from(selectedActionIds),
+    justFinishedSelectionRef: justFinishedSelectionRef,
     clearSelection: clearSelection,
     onClickOutside: handleClickOutside,
     onCtrlClick: handleCtrlClick,
@@ -3914,6 +3927,7 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
     }),
     DragSelection = _useRowSelection.DragSelection,
     selectedActionIds = _useRowSelection.selectedActionIds,
+    justFinishedSelectionRef = _useRowSelection.justFinishedSelectionRef,
     onClickOutside = _useRowSelection.onClickOutside,
     onCtrlClick = _useRowSelection.onCtrlClick,
     setSelectedActionIds = _useRowSelection.setSelectedActionIds;
@@ -4182,6 +4196,11 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
   return /*#__PURE__*/React__default['default'].createElement("div", {
     ref: editAreaRef,
     className: prefix('edit-area') + " ".concat((className || '').replace('timeline-editor', '') || ''),
+    onClickCapture: function onClickCapture(e) {
+      if (!justFinishedSelectionRef.current) return;
+      e.preventDefault();
+      e.stopPropagation();
+    },
     style: {
       height: isMulti ? _totalHeight : 'unset',
       maxHeight: isMulti ? _totalHeight : 'unset',
@@ -4313,7 +4332,7 @@ var TimeArea = function TimeArea(_ref) {
   var gridRef = React.useRef();
   /** 是否显示细分刻度 */
   var showUnit = scaleSplitCount > 0;
-  var visibleWidth = timelineWidth || document.documentElement.clientWidth;
+  var visibleWidth = document.documentElement.clientWidth;
   /** 获取每个 cell 渲染内容 */
   var cellRenderer = function cellRenderer(_ref2) {
     var columnIndex = _ref2.columnIndex,

package/package.json

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