sense-react-timeline-editor 1.1.28 → 1.1.30

package/dist/index.esm.js

@@ -1,12 +1,12 @@
 import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState, useLayoutEffect, useCallback, useMemo, memo, forwardRef } from 'react';
 import { AutoSizer, Grid, ScrollSync } from 'react-virtualized';
-import { useThrottleEffect } from 'ahooks';
+import { useThrottleEffect, useThrottleFn } from 'ahooks';
 import { prefixNames } from 'framework-utils';
 import interact from 'interactjs';
 import { useSelectionContainer } from '@air/react-drag-to-select';
 import { message } from 'antd/es';
 import { Howl } from 'howler';
-import { groupBy } from 'lodash-es';
+import { groupBy, throttle } from 'lodash-es';
 import useSize from 'ahooks/es/useSize';
 
 function _arrayLikeToArray(r, a) {
@@ -4237,7 +4237,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
         var index = _ref5.index;
         return heights[index] || _rowHeight || 0;
       },
-      overscanRowCount: 10,
+      overscanRowCount: 100,
       overscanColumnCount: 0,
       onScroll: function onScroll(param) {
         _onScroll(param);
@@ -4322,7 +4322,7 @@ var TimeArea = function TimeArea(_ref) {
   var gridRef = useRef();
   /** 是否显示细分刻度 */
   var showUnit = scaleSplitCount > 0;
-  var visibleWidth = timelineWidth;
+  var visibleWidth = document.documentElement.clientWidth;
   /** 获取每个 cell 渲染内容 */
   var cellRenderer = function cellRenderer(_ref2) {
     var columnIndex = _ref2.columnIndex,
@@ -4362,6 +4362,7 @@ var TimeArea = function TimeArea(_ref) {
   var estColumnWidth = getColumnWidth({
     index: 1
   });
+  console.log('estColumnWidth', estColumnWidth, ', scrollLeft = ', scrollLeft);
   return /*#__PURE__*/React.createElement("div", {
     className: prefix('time-area')
   }, /*#__PURE__*/React.createElement(AutoSizer, null, function (_ref3) {
@@ -4394,7 +4395,7 @@ var TimeArea = function TimeArea(_ref) {
         if (hideCursor) return;
         var rect = e.currentTarget.getBoundingClientRect();
         var position = e.clientX - rect.x;
-        var left = Math.max(position + scrollLeft, startLeft);
+        var left = Math.max(position, startLeft);
         if (left > maxScaleCount * scaleWidth + startLeft) return;
         var time = parserPixelToTime(left, {
           startLeft: startLeft,
@@ -4729,9 +4730,8 @@ 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: nextScrollLeft
+      scrollLeft: Math.max(scrollSync.current.state.scrollLeft + delta, 0)
     });
   }, [getMaxScrollLeft]);
   useLayoutEffect(function () {
@@ -4739,6 +4739,10 @@ 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
@@ -4795,6 +4799,12 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
         target: target,
         evt: e
       });
+      if (target.closest('#time-editor-container')) {
+        // @ts-expect-error 类型断言
+        var event = e;
+        throttledOnClickTimeline(event);
+        return;
+      }
     };
     document.addEventListener('mousedown', handleClickOutside);
     return function () {
@@ -4836,8 +4846,11 @@ 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
         });
@@ -4850,11 +4863,12 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
     };
   });
   var onClickTimeline = useCallback(function (e) {
-    var _scrollSync$current$s2, _scrollSync$current2, _e$target;
+    var _ref2, _timelineEditorEl$scr, _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 = (_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 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 left = position + scrollLeft;
     var time = parserPixelToTime(left, {
       startLeft: startLeft,
@@ -4869,6 +4883,10 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
       updateTime: true
     });
   }, [startLeft, scale, scaleWidth, hideCursor, handleSetCursor]);
+  var _useThrottleFn = useThrottleFn(onClickTimeline, {
+      wait: 50
+    }),
+    throttledOnClickTimeline = _useThrottleFn.run;
   // 监听timeline区域宽度变化
   useEffect(function () {
     if (areaRef.current) {
@@ -4882,6 +4900,42 @@ 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,
@@ -4889,11 +4943,10 @@ 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 (_ref2) {
-    var scrollTop = _ref2.scrollTop,
-      _ref2$scrollLeft = _ref2.scrollLeft,
-      scrollLeft = _ref2$scrollLeft === void 0 ? 0 : _ref2$scrollLeft,
-      _onScroll = _ref2.onScroll;
+  }, function (_ref3) {
+    var scrollTop = _ref3.scrollTop,
+      _onScroll = _ref3.onScroll;
+    var scrollLeft = (containerEl === null || containerEl === void 0 ? void 0 : containerEl.scrollLeft) || 0;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TimeArea, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
       timelineWidth: width,
       disableDrag: disableDrag || isPlaying,
@@ -4907,8 +4960,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(_ref3) {
-        return areaRef.current = _ref3 === null || _ref3 === void 0 ? void 0 : _ref3.domRef.current;
+      ref: function ref(_ref4) {
+        return areaRef.current = _ref4 === null || _ref4 === void 0 ? void 0 : _ref4.domRef.current;
       },
       disableDrag: disableDrag || isPlaying,
       editorData: editorData,
@@ -4940,7 +4993,7 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
         height: '100%',
         background: '#fff'
       },
-      onClick: onClickTimeline
+      onClick: throttledOnClickTimeline
     }, Object.keys(groupedData).map(function (key, index) {
       var handleGroupDataChange = function handleGroupDataChange(updatedData) {
         var mergedData = editorData.filter(function (item) {
@@ -4969,8 +5022,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(_ref4) {
-          return areaRef.current = _ref4 === null || _ref4 === void 0 ? void 0 : _ref4.domRef.current;
+        ref: function ref(_ref5) {
+          return areaRef.current = _ref5 === null || _ref5 === void 0 ? void 0 : _ref5.domRef.current;
         },
         disableDrag: disableDrag || isPlaying,
         editorData: groupedData[key],

package/dist/index.js

@@ -4247,7 +4247,7 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
         var index = _ref5.index;
         return heights[index] || _rowHeight || 0;
       },
-      overscanRowCount: 10,
+      overscanRowCount: 100,
       overscanColumnCount: 0,
       onScroll: function onScroll(param) {
         _onScroll(param);
@@ -4332,7 +4332,7 @@ var TimeArea = function TimeArea(_ref) {
   var gridRef = React.useRef();
   /** 是否显示细分刻度 */
   var showUnit = scaleSplitCount > 0;
-  var visibleWidth = timelineWidth;
+  var visibleWidth = document.documentElement.clientWidth;
   /** 获取每个 cell 渲染内容 */
   var cellRenderer = function cellRenderer(_ref2) {
     var columnIndex = _ref2.columnIndex,
@@ -4372,6 +4372,7 @@ var TimeArea = function TimeArea(_ref) {
   var estColumnWidth = getColumnWidth({
     index: 1
   });
+  console.log('estColumnWidth', estColumnWidth, ', scrollLeft = ', scrollLeft);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: prefix('time-area')
   }, /*#__PURE__*/React__default['default'].createElement(reactVirtualized.AutoSizer, null, function (_ref3) {
@@ -4404,7 +4405,7 @@ var TimeArea = function TimeArea(_ref) {
         if (hideCursor) return;
         var rect = e.currentTarget.getBoundingClientRect();
         var position = e.clientX - rect.x;
-        var left = Math.max(position + scrollLeft, startLeft);
+        var left = Math.max(position, startLeft);
         if (left > maxScaleCount * scaleWidth + startLeft) return;
         var time = parserPixelToTime(left, {
           startLeft: startLeft,
@@ -4739,9 +4740,8 @@ 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: nextScrollLeft
+      scrollLeft: Math.max(scrollSync.current.state.scrollLeft + delta, 0)
     });
   }, [getMaxScrollLeft]);
   React.useLayoutEffect(function () {
@@ -4749,6 +4749,10 @@ 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
@@ -4805,6 +4809,12 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
         target: target,
         evt: e
       });
+      if (target.closest('#time-editor-container')) {
+        // @ts-expect-error 类型断言
+        var event = e;
+        throttledOnClickTimeline(event);
+        return;
+      }
     };
     document.addEventListener('mousedown', handleClickOutside);
     return function () {
@@ -4846,8 +4856,11 @@ 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
         });
@@ -4860,11 +4873,12 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
     };
   });
   var onClickTimeline = React.useCallback(function (e) {
-    var _scrollSync$current$s2, _scrollSync$current2, _e$target;
+    var _ref2, _timelineEditorEl$scr, _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 = (_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 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 left = position + scrollLeft;
     var time = parserPixelToTime(left, {
       startLeft: startLeft,
@@ -4879,6 +4893,10 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
       updateTime: true
     });
   }, [startLeft, scale, scaleWidth, hideCursor, handleSetCursor]);
+  var _useThrottleFn = ahooks.useThrottleFn(onClickTimeline, {
+      wait: 50
+    }),
+    throttledOnClickTimeline = _useThrottleFn.run;
   // 监听timeline区域宽度变化
   React.useEffect(function () {
     if (areaRef.current) {
@@ -4892,6 +4910,42 @@ 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,
@@ -4899,11 +4953,10 @@ 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 (_ref2) {
-    var scrollTop = _ref2.scrollTop,
-      _ref2$scrollLeft = _ref2.scrollLeft,
-      scrollLeft = _ref2$scrollLeft === void 0 ? 0 : _ref2$scrollLeft,
-      _onScroll = _ref2.onScroll;
+  }, function (_ref3) {
+    var scrollTop = _ref3.scrollTop,
+      _onScroll = _ref3.onScroll;
+    var scrollLeft = (containerEl === null || containerEl === void 0 ? void 0 : containerEl.scrollLeft) || 0;
     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,
@@ -4917,8 +4970,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(_ref3) {
-        return areaRef.current = _ref3 === null || _ref3 === void 0 ? void 0 : _ref3.domRef.current;
+      ref: function ref(_ref4) {
+        return areaRef.current = _ref4 === null || _ref4 === void 0 ? void 0 : _ref4.domRef.current;
       },
       disableDrag: disableDrag || isPlaying,
       editorData: editorData,
@@ -4950,7 +5003,7 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
         height: '100%',
         background: '#fff'
       },
-      onClick: onClickTimeline
+      onClick: throttledOnClickTimeline
     }, Object.keys(groupedData).map(function (key, index) {
       var handleGroupDataChange = function handleGroupDataChange(updatedData) {
         var mergedData = editorData.filter(function (item) {
@@ -4979,8 +5032,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(_ref4) {
-          return areaRef.current = _ref4 === null || _ref4 === void 0 ? void 0 : _ref4.domRef.current;
+        ref: function ref(_ref5) {
+          return areaRef.current = _ref5 === null || _ref5 === void 0 ? void 0 : _ref5.domRef.current;
         },
         disableDrag: disableDrag || isPlaying,
         editorData: groupedData[key],

package/package.json

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