sense-react-timeline-editor 1.1.10 → 1.1.12

package/dist/components/row_rnd/interactable.d.ts

@@ -1,11 +1,12 @@
 import { DraggableOptions } from "@interactjs/actions/drag/plugin";
 import { ResizableOptions } from "@interactjs/actions/resize/plugin";
 import { Interactable } from "@interactjs/types";
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 export declare const InteractComp: FC<{
     interactRef?: React.MutableRefObject<Interactable>;
     draggable: boolean;
     draggableOptions: DraggableOptions;
     resizable: boolean;
     resizableOptions: ResizableOptions;
+    children: ReactNode;
 }>;

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState, useLayoutEffect, useCallback, useMemo, memo, forwardRef } from 'react';
+import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState, useLayoutEffect, useCallback, useTransition, useMemo, memo, forwardRef } from 'react';
 import { AutoSizer, Grid, ScrollSync } from 'react-virtualized';
 import { useThrottleEffect, useThrottleFn } from 'ahooks';
 import { prefixNames } from 'framework-utils';
@@ -2002,7 +2002,7 @@ var Cursor = /*#__PURE__*/React.forwardRef(function (props, ref) {
           startLeft: startLeft,
           scaleWidth: scaleWidth,
           scale: scale
-        }) - scrollLeft);
+        }));
       }
     };
   });
@@ -2013,12 +2013,12 @@ var Cursor = /*#__PURE__*/React.forwardRef(function (props, ref) {
         startLeft: startLeft,
         scaleWidth: scaleWidth,
         scale: scale
-      }) - scrollLeft);
+      }));
     }
-  }, [cursorTime, startLeft, scaleWidth, scale, scrollLeft], {
+  }, [cursorTime, startLeft, scaleWidth, scale], {
     wait: 10
   });
-  var clientHeight = ((_document$querySelect = document.querySelector('#time-editor-container')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
+  var clientHeight = ((_document$querySelect = document.querySelector('#time-editor-container')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.scrollHeight) || 0;
   return /*#__PURE__*/React.createElement(RowDnd, {
     top: theme === 'light' ? 26 : 0,
     start: startLeft,
@@ -2924,6 +2924,10 @@ var EditRow = function EditRow(props) {
     _useState2 = _slicedToArray(_useState, 2),
     visibleCount = _useState2[0],
     setVisibleCount = _useState2[1];
+  var _useTransition = useTransition(),
+    _useTransition2 = _slicedToArray(_useTransition, 2),
+    isPending = _useTransition2[0],
+    startTransition = _useTransition2[1];
   var classNames = ['edit-row'];
   if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('selected');
   var clientWidth = document.documentElement.clientWidth;
@@ -2949,14 +2953,11 @@ var EditRow = function EditRow(props) {
   }, [visibleActions, visibleCount]);
   useEffect(function () {
     if (visibleCount < visibleActions.length) {
-      var timer = requestAnimationFrame(function () {
+      startTransition(function () {
         setVisibleCount(function (prev) {
           return Math.min(prev + 20, visibleActions.length);
         });
       });
-      return function () {
-        return cancelAnimationFrame(timer);
-      };
     }
   }, [visibleCount, visibleActions.length]);
   useEffect(function () {
@@ -4065,7 +4066,8 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return prev + (cur.rowHeight || _rowHeight);
   }, 0) + ((className || '').indexOf('1') > -1 ? 12 : 32);
   if (minHeight) {
-    _totalHeight = "calc(100% - ".concat(minHeight + 16, "px)");
+    var calcHeight = "calc(100% - ".concat(minHeight + 16, "px)");
+    _totalHeight = "max(".concat(_totalHeight, "px, ").concat(calcHeight, ")");
   }
   return /*#__PURE__*/React.createElement("div", {
     ref: editAreaRef,
@@ -4196,6 +4198,7 @@ var TimeArea = function TimeArea(_ref) {
   var gridRef = useRef();
   /** 是否显示细分刻度 */
   var showUnit = scaleSplitCount > 0;
+  console.log('TimeArea scrollLeft = ', scrollLeft);
   var clientWidth = document.documentElement.clientWidth;
   /** 获取每个 cell 渲染内容 */
   var cellRenderer = function cellRenderer(_ref2) {
@@ -4268,8 +4271,10 @@ 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);
-        if (left > maxScaleCount * scaleWidth + startLeft - scrollLeft) return;
+        var left = Math.max(position, startLeft);
+        // const left = Math.max(position + scrollLeft, startLeft);
+        if (left > maxScaleCount * scaleWidth + startLeft) return;
+        // if (left > maxScaleCount * scaleWidth + startLeft - scrollLeft) return;
         var time = parserPixelToTime(left, {
           startLeft: startLeft,
           scale: scale,
@@ -4689,6 +4694,15 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
           scrollLeft: Math.max(val, 0)
         });
       },
+      setScrollLeftFromTime: function setScrollLeftFromTime(val) {
+        var containerEl = document.querySelector('.timeline-editor');
+        if (!containerEl) return;
+        var left = startLeft + scaleWidth / scale * val;
+        containerEl.scrollLeft = Math.max(left, 0);
+        scrollSync.current && scrollSync.current.setState({
+          scrollLeft: Math.max(left, 0)
+        });
+      },
       setScrollTop: function setScrollTop(val) {
         scrollSync.current && scrollSync.current.setState({
           scrollTop: Math.max(val, 0)
@@ -4711,7 +4725,8 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
     if (action || hideCursor) return;
     console.log('onClickTimeline = ', time);
     handleSetCursor({
-      time: time
+      time: time,
+      updateTime: true
     });
   }, [startLeft, scale, scaleWidth, hideCursor, handleSetCursor]);
   // 监听timeline区域宽度变化
@@ -4730,17 +4745,37 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
   useEffect(function () {
     var containerEl = document.querySelector('.timeline-editor');
     var handleScroll = throttle(function (e) {
-      console.log('scroll', e);
+      var scrollLeft = e.target.scrollLeft || 0;
       scrollSync.current && scrollSync.current.setState({
-        scrollLeft: e.target.scrollLeft || 0
+        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]);
   return /*#__PURE__*/React.createElement("div", {
     ref: domRef,
     style: style,
@@ -4839,7 +4874,7 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
         setCursor: handleSetCursor,
         deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
         allowCreateTrack: allowCreateTrack,
-        minHeight: index === 0 ? undefined : _totalHeight,
+        minHeight: index === 0 ? 122 : _totalHeight,
         containerRef: containerRef,
         onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
         engineRef: engineRef,

package/dist/index.js

@@ -2012,7 +2012,7 @@ var Cursor = /*#__PURE__*/React__default['default'].forwardRef(function (props,
           startLeft: startLeft,
           scaleWidth: scaleWidth,
           scale: scale
-        }) - scrollLeft);
+        }));
       }
     };
   });
@@ -2023,12 +2023,12 @@ var Cursor = /*#__PURE__*/React__default['default'].forwardRef(function (props,
         startLeft: startLeft,
         scaleWidth: scaleWidth,
         scale: scale
-      }) - scrollLeft);
+      }));
     }
-  }, [cursorTime, startLeft, scaleWidth, scale, scrollLeft], {
+  }, [cursorTime, startLeft, scaleWidth, scale], {
     wait: 10
   });
-  var clientHeight = ((_document$querySelect = document.querySelector('#time-editor-container')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
+  var clientHeight = ((_document$querySelect = document.querySelector('#time-editor-container')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.scrollHeight) || 0;
   return /*#__PURE__*/React__default['default'].createElement(RowDnd, {
     top: theme === 'light' ? 26 : 0,
     start: startLeft,
@@ -2934,6 +2934,10 @@ var EditRow = function EditRow(props) {
     _useState2 = _slicedToArray(_useState, 2),
     visibleCount = _useState2[0],
     setVisibleCount = _useState2[1];
+  var _useTransition = React.useTransition(),
+    _useTransition2 = _slicedToArray(_useTransition, 2),
+    isPending = _useTransition2[0],
+    startTransition = _useTransition2[1];
   var classNames = ['edit-row'];
   if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('selected');
   var clientWidth = document.documentElement.clientWidth;
@@ -2959,14 +2963,11 @@ var EditRow = function EditRow(props) {
   }, [visibleActions, visibleCount]);
   React.useEffect(function () {
     if (visibleCount < visibleActions.length) {
-      var timer = requestAnimationFrame(function () {
+      startTransition(function () {
         setVisibleCount(function (prev) {
           return Math.min(prev + 20, visibleActions.length);
         });
       });
-      return function () {
-        return cancelAnimationFrame(timer);
-      };
     }
   }, [visibleCount, visibleActions.length]);
   React.useEffect(function () {
@@ -4075,7 +4076,8 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
     return prev + (cur.rowHeight || _rowHeight);
   }, 0) + ((className || '').indexOf('1') > -1 ? 12 : 32);
   if (minHeight) {
-    _totalHeight = "calc(100% - ".concat(minHeight + 16, "px)");
+    var calcHeight = "calc(100% - ".concat(minHeight + 16, "px)");
+    _totalHeight = "max(".concat(_totalHeight, "px, ").concat(calcHeight, ")");
   }
   return /*#__PURE__*/React__default['default'].createElement("div", {
     ref: editAreaRef,
@@ -4206,6 +4208,7 @@ var TimeArea = function TimeArea(_ref) {
   var gridRef = React.useRef();
   /** 是否显示细分刻度 */
   var showUnit = scaleSplitCount > 0;
+  console.log('TimeArea scrollLeft = ', scrollLeft);
   var clientWidth = document.documentElement.clientWidth;
   /** 获取每个 cell 渲染内容 */
   var cellRenderer = function cellRenderer(_ref2) {
@@ -4278,8 +4281,10 @@ 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);
-        if (left > maxScaleCount * scaleWidth + startLeft - scrollLeft) return;
+        var left = Math.max(position, startLeft);
+        // const left = Math.max(position + scrollLeft, startLeft);
+        if (left > maxScaleCount * scaleWidth + startLeft) return;
+        // if (left > maxScaleCount * scaleWidth + startLeft - scrollLeft) return;
         var time = parserPixelToTime(left, {
           startLeft: startLeft,
           scale: scale,
@@ -4699,6 +4704,15 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
           scrollLeft: Math.max(val, 0)
         });
       },
+      setScrollLeftFromTime: function setScrollLeftFromTime(val) {
+        var containerEl = document.querySelector('.timeline-editor');
+        if (!containerEl) return;
+        var left = startLeft + scaleWidth / scale * val;
+        containerEl.scrollLeft = Math.max(left, 0);
+        scrollSync.current && scrollSync.current.setState({
+          scrollLeft: Math.max(left, 0)
+        });
+      },
       setScrollTop: function setScrollTop(val) {
         scrollSync.current && scrollSync.current.setState({
           scrollTop: Math.max(val, 0)
@@ -4721,7 +4735,8 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
     if (action || hideCursor) return;
     console.log('onClickTimeline = ', time);
     handleSetCursor({
-      time: time
+      time: time,
+      updateTime: true
     });
   }, [startLeft, scale, scaleWidth, hideCursor, handleSetCursor]);
   // 监听timeline区域宽度变化
@@ -4740,17 +4755,37 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
   React.useEffect(function () {
     var containerEl = document.querySelector('.timeline-editor');
     var handleScroll = lodashEs.throttle(function (e) {
-      console.log('scroll', e);
+      var scrollLeft = e.target.scrollLeft || 0;
       scrollSync.current && scrollSync.current.setState({
-        scrollLeft: e.target.scrollLeft || 0
+        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]);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     ref: domRef,
     style: style,
@@ -4849,7 +4884,7 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
         setCursor: handleSetCursor,
         deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
         allowCreateTrack: allowCreateTrack,
-        minHeight: index === 0 ? undefined : _totalHeight,
+        minHeight: index === 0 ? 122 : _totalHeight,
         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.10",
+  "version": "1.1.12",
   "author": "xzdarcy",
   "license": "MIT",
   "keywords": [
@@ -54,8 +54,8 @@
   "devDependencies": {
     "@types/howler": "^2.2.4",
     "@types/lodash": "^4.14.177",
-    "@types/react": "^17.0.17",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
     "@umijs/test": "^3.0.5",
     "dumi": "^1.0.17",
     "father-build": "^1.17.2",
@@ -64,8 +64,8 @@
     "lodash": "^4.17.21",
     "lottie-web": "^5.8.1",
     "prettier": "^2.2.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "standard-version": "^9.5.0",
     "typescript": "^4.8.4",
     "yorkie": "^2.0.0"