sense-react-timeline-editor 1.1.26 → 1.1.28

package/dist/index.esm.js

@@ -6,7 +6,7 @@ import interact from 'interactjs';
 import { useSelectionContainer } from '@air/react-drag-to-select';
 import { message } from 'antd/es';
 import { Howl } from 'howler';
-import { groupBy, throttle } from 'lodash-es';
+import { groupBy } from 'lodash-es';
 import useSize from 'ahooks/es/useSize';
 
 function _arrayLikeToArray(r, a) {
@@ -756,7 +756,7 @@ var TimelineEngine = /*#__PURE__*/function (_Emitter) {
         var actionId = this._activeActionIds[i];
         var action = this._actionMap[actionId];
         // 不在播放区域内
-        if (action.start > time || action.end < time) {
+        if (action.start > time || action.end <= time) {
           var _effect$source6;
           var effect = this._effectMap[action.effectId];
           if (effect && ((_effect$source6 = effect.source) === null || _effect$source6 === void 0 ? void 0 : _effect$source6.leave)) {
@@ -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,
@@ -4323,7 +4322,7 @@ var TimeArea = function TimeArea(_ref) {
   var gridRef = useRef();
   /** 是否显示细分刻度 */
   var showUnit = scaleSplitCount > 0;
-  var visibleWidth = timelineWidth || document.documentElement.clientWidth;
+  var visibleWidth = timelineWidth;
   /** 获取每个 cell 渲染内容 */
   var cellRenderer = function cellRenderer(_ref2) {
     var columnIndex = _ref2.columnIndex,
@@ -4392,13 +4391,10 @@ var TimeArea = function TimeArea(_ref) {
         height: height
       },
       onClick: function onClick(e) {
-        var _timelineEditorEl$scr;
         if (hideCursor) return;
-        var timelineEditorEl = document.querySelector('.timeline-editor');
         var rect = e.currentTarget.getBoundingClientRect();
         var position = e.clientX - rect.x;
-        var actualScrollLeft = (_timelineEditorEl$scr = timelineEditorEl === null || timelineEditorEl === void 0 ? void 0 : timelineEditorEl.scrollLeft) !== null && _timelineEditorEl$scr !== void 0 ? _timelineEditorEl$scr : scrollLeft;
-        var left = Math.max(position + actualScrollLeft, startLeft);
+        var left = Math.max(position + scrollLeft, startLeft);
         if (left > maxScaleCount * scaleWidth + startLeft) return;
         var time = parserPixelToTime(left, {
           startLeft: startLeft,
@@ -4733,8 +4729,9 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
     var data = scrollSync.current.state.scrollLeft + delta;
     var maxScrollLeft = getMaxScrollLeft();
     if (data > maxScrollLeft) return;
+    var nextScrollLeft = Math.max(scrollSync.current.state.scrollLeft + delta, 0);
     scrollSync.current && scrollSync.current.setState({
-      scrollLeft: Math.max(scrollSync.current.state.scrollLeft + delta, 0)
+      scrollLeft: nextScrollLeft
     });
   }, [getMaxScrollLeft]);
   useLayoutEffect(function () {
@@ -4742,10 +4739,6 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
     var maxScrollLeft = getMaxScrollLeft();
     var currentScrollLeft = (_scrollSync$current$s = (_scrollSync$current = scrollSync.current) === null || _scrollSync$current === void 0 ? void 0 : _scrollSync$current.state.scrollLeft) !== null && _scrollSync$current$s !== void 0 ? _scrollSync$current$s : 0;
     var nextScrollLeft = Math.min(Math.max(currentScrollLeft, 0), maxScrollLeft);
-    var timelineEl = document.querySelector('.timeline-editor');
-    if (timelineEl && Math.abs(timelineEl.scrollLeft - nextScrollLeft) > 1) {
-      timelineEl.scrollLeft = nextScrollLeft;
-    }
     if (scrollSync.current && Math.abs(currentScrollLeft - nextScrollLeft) > 1) {
       scrollSync.current.setState({
         scrollLeft: nextScrollLeft
@@ -4843,11 +4836,8 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
         });
       },
       setScrollLeftFromTime: function setScrollLeftFromTime(val) {
-        var containerEl = document.querySelector('.timeline-editor');
-        if (!containerEl) return;
         var left = startLeft + scaleWidth / scale * val;
         var nextScrollLeft = Math.min(Math.max(left, 0), getMaxScrollLeft());
-        containerEl.scrollLeft = nextScrollLeft;
         scrollSync.current && scrollSync.current.setState({
           scrollLeft: nextScrollLeft
         });
@@ -4860,12 +4850,11 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
     };
   });
   var onClickTimeline = useCallback(function (e) {
-    var _ref2, _timelineEditorEl$scr, _scrollSync$current2, _e$target;
+    var _scrollSync$current$s2, _scrollSync$current2, _e$target;
     if (!domRef.current) return;
-    var timelineEditorEl = document.querySelector('.timeline-editor');
     var rect = domRef.current.getBoundingClientRect();
     var position = e.clientX - rect.x;
-    var scrollLeft = (_ref2 = (_timelineEditorEl$scr = timelineEditorEl === null || timelineEditorEl === void 0 ? void 0 : timelineEditorEl.scrollLeft) !== null && _timelineEditorEl$scr !== void 0 ? _timelineEditorEl$scr : (_scrollSync$current2 = scrollSync.current) === null || _scrollSync$current2 === void 0 ? void 0 : _scrollSync$current2.state.scrollLeft) !== null && _ref2 !== void 0 ? _ref2 : 0;
+    var scrollLeft = (_scrollSync$current$s2 = (_scrollSync$current2 = scrollSync.current) === null || _scrollSync$current2 === void 0 ? void 0 : _scrollSync$current2.state.scrollLeft) !== null && _scrollSync$current$s2 !== void 0 ? _scrollSync$current$s2 : 0;
     var left = position + scrollLeft;
     var time = parserPixelToTime(left, {
       startLeft: startLeft,
@@ -4893,42 +4882,6 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
       };
     }
   }, []);
-  var containerEl = document.querySelector('.timeline-editor');
-  useEffect(function () {
-    var containerEl = document.querySelector('.timeline-editor');
-    var handleScroll = throttle(function (e) {
-      console.log('handleScroll', e);
-      var scrollLeft = e.target.scrollLeft || 0;
-      scrollSync.current && scrollSync.current.setState({
-        scrollLeft: scrollLeft
-      });
-      var clientWidth = document.documentElement.clientWidth;
-      var timeStart = parserPixelToTime(scrollLeft, {
-        startLeft: startLeft,
-        scale: scale,
-        scaleWidth: scaleWidth
-      });
-      var timeEnd = parserPixelToTime(scrollLeft + clientWidth, {
-        startLeft: startLeft,
-        scale: scale,
-        scaleWidth: scaleWidth
-      });
-      window.dispatchEvent(new CustomEvent('container-scroll', {
-        detail: {
-          scrollLeft: scrollLeft,
-          scrollWidth: containerEl.scrollWidth,
-          clientWidth: clientWidth,
-          timeStart: timeStart,
-          timeEnd: timeEnd
-        }
-      }));
-    }, 100);
-    containerEl.addEventListener('scroll', handleScroll);
-    return function () {
-      containerEl.removeEventListener('scroll', handleScroll);
-      handleScroll.cancel();
-    };
-  }, [startLeft, scale, scaleWidth]);
   console.log('Timeline cursorTime = ', cursorTime);
   return /*#__PURE__*/React.createElement("div", {
     ref: domRef,
@@ -4936,10 +4889,11 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
     className: "".concat(className || '', " ").concat(theme || '', " ").concat(PREFIX, " ").concat(disableDrag ? PREFIX + '-disable' : '')
   }, /*#__PURE__*/React.createElement(ScrollSync, {
     ref: scrollSync
-  }, function (_ref3) {
-    var scrollTop = _ref3.scrollTop,
-      _onScroll = _ref3.onScroll;
-    var scrollLeft = (containerEl === null || containerEl === void 0 ? void 0 : containerEl.scrollLeft) || 0;
+  }, function (_ref2) {
+    var scrollTop = _ref2.scrollTop,
+      _ref2$scrollLeft = _ref2.scrollLeft,
+      scrollLeft = _ref2$scrollLeft === void 0 ? 0 : _ref2$scrollLeft,
+      _onScroll = _ref2.onScroll;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TimeArea, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
       timelineWidth: width,
       disableDrag: disableDrag || isPlaying,
@@ -4953,8 +4907,8 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
       cursorRef: cursorRef
     })), areaCount === 1 ? (/*#__PURE__*/React.createElement(EditArea, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
       timelineWidth: width,
-      ref: function ref(_ref4) {
-        return areaRef.current = _ref4 === null || _ref4 === void 0 ? void 0 : _ref4.domRef.current;
+      ref: function ref(_ref3) {
+        return areaRef.current = _ref3 === null || _ref3 === void 0 ? void 0 : _ref3.domRef.current;
       },
       disableDrag: disableDrag || isPlaying,
       editorData: editorData,
@@ -5015,8 +4969,8 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
       }, checkedProps), {}, {
         className: index !== 0 ? "no-flex ".concat(key, " ").concat(index, " overflow-hidden") : "overflow-hidden ".concat(key, " ").concat(index),
         timelineWidth: width,
-        ref: function ref(_ref5) {
-          return areaRef.current = _ref5 === null || _ref5 === void 0 ? void 0 : _ref5.domRef.current;
+        ref: function ref(_ref4) {
+          return areaRef.current = _ref4 === null || _ref4 === void 0 ? void 0 : _ref4.domRef.current;
         },
         disableDrag: disableDrag || isPlaying,
         editorData: groupedData[key],

package/dist/index.js

@@ -766,7 +766,7 @@ var TimelineEngine = /*#__PURE__*/function (_Emitter) {
         var actionId = this._activeActionIds[i];
         var action = this._actionMap[actionId];
         // 不在播放区域内
-        if (action.start > time || action.end < time) {
+        if (action.start > time || action.end <= time) {
           var _effect$source6;
           var effect = this._effectMap[action.effectId];
           if (effect && ((_effect$source6 = effect.source) === null || _effect$source6 === void 0 ? void 0 : _effect$source6.leave)) {
@@ -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,
@@ -4333,7 +4332,7 @@ var TimeArea = function TimeArea(_ref) {
   var gridRef = React.useRef();
   /** 是否显示细分刻度 */
   var showUnit = scaleSplitCount > 0;
-  var visibleWidth = timelineWidth || document.documentElement.clientWidth;
+  var visibleWidth = timelineWidth;
   /** 获取每个 cell 渲染内容 */
   var cellRenderer = function cellRenderer(_ref2) {
     var columnIndex = _ref2.columnIndex,
@@ -4402,13 +4401,10 @@ var TimeArea = function TimeArea(_ref) {
         height: height
       },
       onClick: function onClick(e) {
-        var _timelineEditorEl$scr;
         if (hideCursor) return;
-        var timelineEditorEl = document.querySelector('.timeline-editor');
         var rect = e.currentTarget.getBoundingClientRect();
         var position = e.clientX - rect.x;
-        var actualScrollLeft = (_timelineEditorEl$scr = timelineEditorEl === null || timelineEditorEl === void 0 ? void 0 : timelineEditorEl.scrollLeft) !== null && _timelineEditorEl$scr !== void 0 ? _timelineEditorEl$scr : scrollLeft;
-        var left = Math.max(position + actualScrollLeft, startLeft);
+        var left = Math.max(position + scrollLeft, startLeft);
         if (left > maxScaleCount * scaleWidth + startLeft) return;
         var time = parserPixelToTime(left, {
           startLeft: startLeft,
@@ -4743,8 +4739,9 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
     var data = scrollSync.current.state.scrollLeft + delta;
     var maxScrollLeft = getMaxScrollLeft();
     if (data > maxScrollLeft) return;
+    var nextScrollLeft = Math.max(scrollSync.current.state.scrollLeft + delta, 0);
     scrollSync.current && scrollSync.current.setState({
-      scrollLeft: Math.max(scrollSync.current.state.scrollLeft + delta, 0)
+      scrollLeft: nextScrollLeft
     });
   }, [getMaxScrollLeft]);
   React.useLayoutEffect(function () {
@@ -4752,10 +4749,6 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
     var maxScrollLeft = getMaxScrollLeft();
     var currentScrollLeft = (_scrollSync$current$s = (_scrollSync$current = scrollSync.current) === null || _scrollSync$current === void 0 ? void 0 : _scrollSync$current.state.scrollLeft) !== null && _scrollSync$current$s !== void 0 ? _scrollSync$current$s : 0;
     var nextScrollLeft = Math.min(Math.max(currentScrollLeft, 0), maxScrollLeft);
-    var timelineEl = document.querySelector('.timeline-editor');
-    if (timelineEl && Math.abs(timelineEl.scrollLeft - nextScrollLeft) > 1) {
-      timelineEl.scrollLeft = nextScrollLeft;
-    }
     if (scrollSync.current && Math.abs(currentScrollLeft - nextScrollLeft) > 1) {
       scrollSync.current.setState({
         scrollLeft: nextScrollLeft
@@ -4853,11 +4846,8 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
         });
       },
       setScrollLeftFromTime: function setScrollLeftFromTime(val) {
-        var containerEl = document.querySelector('.timeline-editor');
-        if (!containerEl) return;
         var left = startLeft + scaleWidth / scale * val;
         var nextScrollLeft = Math.min(Math.max(left, 0), getMaxScrollLeft());
-        containerEl.scrollLeft = nextScrollLeft;
         scrollSync.current && scrollSync.current.setState({
           scrollLeft: nextScrollLeft
         });
@@ -4870,12 +4860,11 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
     };
   });
   var onClickTimeline = React.useCallback(function (e) {
-    var _ref2, _timelineEditorEl$scr, _scrollSync$current2, _e$target;
+    var _scrollSync$current$s2, _scrollSync$current2, _e$target;
     if (!domRef.current) return;
-    var timelineEditorEl = document.querySelector('.timeline-editor');
     var rect = domRef.current.getBoundingClientRect();
     var position = e.clientX - rect.x;
-    var scrollLeft = (_ref2 = (_timelineEditorEl$scr = timelineEditorEl === null || timelineEditorEl === void 0 ? void 0 : timelineEditorEl.scrollLeft) !== null && _timelineEditorEl$scr !== void 0 ? _timelineEditorEl$scr : (_scrollSync$current2 = scrollSync.current) === null || _scrollSync$current2 === void 0 ? void 0 : _scrollSync$current2.state.scrollLeft) !== null && _ref2 !== void 0 ? _ref2 : 0;
+    var scrollLeft = (_scrollSync$current$s2 = (_scrollSync$current2 = scrollSync.current) === null || _scrollSync$current2 === void 0 ? void 0 : _scrollSync$current2.state.scrollLeft) !== null && _scrollSync$current$s2 !== void 0 ? _scrollSync$current$s2 : 0;
     var left = position + scrollLeft;
     var time = parserPixelToTime(left, {
       startLeft: startLeft,
@@ -4903,42 +4892,6 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
       };
     }
   }, []);
-  var containerEl = document.querySelector('.timeline-editor');
-  React.useEffect(function () {
-    var containerEl = document.querySelector('.timeline-editor');
-    var handleScroll = lodashEs.throttle(function (e) {
-      console.log('handleScroll', e);
-      var scrollLeft = e.target.scrollLeft || 0;
-      scrollSync.current && scrollSync.current.setState({
-        scrollLeft: scrollLeft
-      });
-      var clientWidth = document.documentElement.clientWidth;
-      var timeStart = parserPixelToTime(scrollLeft, {
-        startLeft: startLeft,
-        scale: scale,
-        scaleWidth: scaleWidth
-      });
-      var timeEnd = parserPixelToTime(scrollLeft + clientWidth, {
-        startLeft: startLeft,
-        scale: scale,
-        scaleWidth: scaleWidth
-      });
-      window.dispatchEvent(new CustomEvent('container-scroll', {
-        detail: {
-          scrollLeft: scrollLeft,
-          scrollWidth: containerEl.scrollWidth,
-          clientWidth: clientWidth,
-          timeStart: timeStart,
-          timeEnd: timeEnd
-        }
-      }));
-    }, 100);
-    containerEl.addEventListener('scroll', handleScroll);
-    return function () {
-      containerEl.removeEventListener('scroll', handleScroll);
-      handleScroll.cancel();
-    };
-  }, [startLeft, scale, scaleWidth]);
   console.log('Timeline cursorTime = ', cursorTime);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     ref: domRef,
@@ -4946,10 +4899,11 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
     className: "".concat(className || '', " ").concat(theme || '', " ").concat(PREFIX, " ").concat(disableDrag ? PREFIX + '-disable' : '')
   }, /*#__PURE__*/React__default['default'].createElement(reactVirtualized.ScrollSync, {
     ref: scrollSync
-  }, function (_ref3) {
-    var scrollTop = _ref3.scrollTop,
-      _onScroll = _ref3.onScroll;
-    var scrollLeft = (containerEl === null || containerEl === void 0 ? void 0 : containerEl.scrollLeft) || 0;
+  }, function (_ref2) {
+    var scrollTop = _ref2.scrollTop,
+      _ref2$scrollLeft = _ref2.scrollLeft,
+      scrollLeft = _ref2$scrollLeft === void 0 ? 0 : _ref2$scrollLeft,
+      _onScroll = _ref2.onScroll;
     return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(TimeArea, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
       timelineWidth: width,
       disableDrag: disableDrag || isPlaying,
@@ -4963,8 +4917,8 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
       cursorRef: cursorRef
     })), areaCount === 1 ? (/*#__PURE__*/React__default['default'].createElement(EditArea, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
       timelineWidth: width,
-      ref: function ref(_ref4) {
-        return areaRef.current = _ref4 === null || _ref4 === void 0 ? void 0 : _ref4.domRef.current;
+      ref: function ref(_ref3) {
+        return areaRef.current = _ref3 === null || _ref3 === void 0 ? void 0 : _ref3.domRef.current;
       },
       disableDrag: disableDrag || isPlaying,
       editorData: editorData,
@@ -5025,8 +4979,8 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
       }, checkedProps), {}, {
         className: index !== 0 ? "no-flex ".concat(key, " ").concat(index, " overflow-hidden") : "overflow-hidden ".concat(key, " ").concat(index),
         timelineWidth: width,
-        ref: function ref(_ref5) {
-          return areaRef.current = _ref5 === null || _ref5 === void 0 ? void 0 : _ref5.domRef.current;
+        ref: function ref(_ref4) {
+          return areaRef.current = _ref4 === null || _ref4 === void 0 ? void 0 : _ref4.domRef.current;
         },
         disableDrag: disableDrag || isPlaying,
         editorData: groupedData[key],

package/package.json

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