docs: 📝 add auto scroll when play demo

Author: xzdarcy

docs/engine/engine-basic/index.tsx

@@ -1,24 +1,37 @@
 import { Timeline, TimelineState } from '@xzdarcy/react-timeline-editor';
+import { Switch } from 'antd';
 import { cloneDeep } from 'lodash';
 import React, { useRef, useState } from 'react';
-import TimelinePlayer from './player';
 import { CustomRender0, CustomRender1 } from './custom';
-import { CustomTimelineAction, CusTomTimelineRow, mockData, mockEffect } from './mock';
 import './index.less';
+import { CustomTimelineAction, CusTomTimelineRow, mockData, mockEffect, scale, scaleWidth, startLeft } from './mock';
+import TimelinePlayer from './player';
 
 const defaultEditorData = cloneDeep(mockData);
 
 const TimelineEditor = () => {
   const [data, setData] = useState(defaultEditorData);
   const timelineState = useRef<TimelineState>();
   const playerPanel = useRef<HTMLDivElement>();
+  const autoScrollWhenPlay = useRef<boolean>(true);
 
   return (
     <div className="timeline-editor-engine">
+      <div className="player-config">
+        <Switch
+          checkedChildren="开启运行时自动滚动"
+          unCheckedChildren="禁用运行时自动滚动"
+          defaultChecked={autoScrollWhenPlay.current}
+          onChange={(e) => (autoScrollWhenPlay.current = e)}
+          style={{ marginBottom: 20 }}
+        />
+      </div>
       <div className="player-panel" id="player-ground-1" ref={playerPanel}></div>
-      <TimelinePlayer timelineState={timelineState} />
+      <TimelinePlayer timelineState={timelineState} autoScrollWhenPlay={autoScrollWhenPlay} />
       <Timeline
-        scale={5}
+        scale={scale}
+        scaleWidth={scaleWidth}
+        startLeft={startLeft}
         autoScroll={true}
         ref={timelineState}
         editorData={data}

docs/engine/engine-basic/mock.ts

@@ -1,6 +1,10 @@
-import { TimelineEffect, TimelineRow, TimelineAction } from '@xzdarcy/react-timeline-editor';
-import lottieControl from './lottieControl';
+import { TimelineAction, TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor';
 import audioControl from './audioControl';
+import lottieControl from './lottieControl';
+
+export const scaleWidth = 160;
+export const scale = 5;
+export const startLeft = 20;
 
 export interface CustomTimelineAction extends TimelineAction {
   data: {

docs/engine/engine-basic/player.tsx

@@ -1,15 +1,17 @@
 import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons';
 import { TimelineState } from '@xzdarcy/react-timeline-editor';
 import { Select } from 'antd';
-import React, { FC, useEffect, useLayoutEffect, useState } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import lottieControl from './lottieControl';
+import { scale, scaleWidth, startLeft } from './mock';
 
 const { Option } = Select;
 export const Rates = [0.2, 0.5, 1.0, 1.5, 2.0];
 
 const TimelinePlayer: FC<{
   timelineState: React.MutableRefObject<TimelineState>;
-}> = ({ timelineState }) => {
+  autoScrollWhenPlay: React.MutableRefObject<boolean>;
+}> = ({ timelineState, autoScrollWhenPlay }) => {
   const [isPlaying, setIsPlaying] = useState(false);
   const [time, setTime] = useState(0);
 
@@ -19,7 +21,15 @@ const TimelinePlayer: FC<{
     engine.listener.on('play', () => setIsPlaying(true));
     engine.listener.on('paused', () => setIsPlaying(false));
     engine.listener.on('afterSetTime', ({ time }) => setTime(time));
-    engine.listener.on('setTimeByTick', ({ time }) => setTime(time));
+    engine.listener.on('setTimeByTick', ({ time }) => {
+      setTime(time);
+
+      if (autoScrollWhenPlay.current) {
+        const autoScrollFrom = 500;
+        const left = time * (scaleWidth / scale) + startLeft - autoScrollFrom;
+        timelineState.current.setScrollLeft(left)
+      }
+    });
 
     return () => {
       if (!engine) return;

src/components/timeline.tsx

@@ -64,7 +64,7 @@ export const Timeline = React.forwardRef<TimelineState, TimelineEditor>((props,
   // deprecated
   useEffect(() => {
     scrollSync.current && scrollSync.current.setState({ scrollTop: scrollTop });
-  }, [scrollTop])
+  }, [scrollTop]);
 
   /** 处理主动数据变化 */
   const handleEditorDataChange = (editorData: TimelineRow[]) => {
@@ -129,12 +129,12 @@ export const Timeline = React.forwardRef<TimelineState, TimelineEditor>((props,
     reRender: engineRef.current.reRender.bind(engineRef.current),
     play: (param: Parameters<TimelineState['play']>[0]) => engineRef.current.play({ ...param }),
     pause: engineRef.current.pause.bind(engineRef.current),
-    setScrollLeft: (val) =>{
-      scrollSync.current && scrollSync.current.setState({ scrollLeft: val });
+    setScrollLeft: (val) => {
+      scrollSync.current && scrollSync.current.setState({ scrollLeft: Math.max(val, 0) });
+    },
+    setScrollTop: (val) => {
+      scrollSync.current && scrollSync.current.setState({ scrollTop: Math.max(val, 0) });
     },
-    setScrollTop: (val) =>{
-      scrollSync.current && scrollSync.current.setState({ scrollTop: val });
-    }
   }));
 
   return (