sense-react-timeline-editor 1.1.27 → 1.1.29

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 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';
@@ -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)) {
@@ -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) {
@@ -4391,13 +4392,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, startLeft);
         if (left > maxScaleCount * scaleWidth + startLeft) return;
         var time = parserPixelToTime(left, {
           startLeft: startLeft,
@@ -4801,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 () {
@@ -4879,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) {
@@ -4985,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) {

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)) {
@@ -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) {
@@ -4401,13 +4402,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, startLeft);
         if (left > maxScaleCount * scaleWidth + startLeft) return;
         var time = parserPixelToTime(left, {
           startLeft: startLeft,
@@ -4811,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 () {
@@ -4889,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) {
@@ -4995,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) {

package/package.json

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