Skip to content

Commit 526344d

Browse files
committed
feat: ✨ allow custom engine
1 parent a6611a7 commit 526344d

File tree

4 files changed

+37
-4
lines changed

4 files changed

+37
-4
lines changed

.dumi/theme/builtins/API.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ const DataLink = {
88
TimelineRow: '/data#timelinerow',
99
TimelineAction: '/data#timelineaction',
1010
TimelineEffect: '/data#timelineeffect',
11+
ITimelineEngine: '/engine/api',
1112
};
1213

1314
const keys = Object.keys(DataLink);
14-
const reg = new RegExp(/TimelineState|TimelineAction|TimelineRow|TimelineEffect/);
15+
const reg = new RegExp(/TimelineState|TimelineAction|TimelineRow|TimelineEffect|ITimelineEngine/);
1516

1617
const LOCALE_TEXTS = {
1718
'zh-CN': {

src/components/timeline.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
22
import { ScrollSync } from 'react-virtualized';
3-
import { TimelineEngine } from '../engine/engine';
3+
import { ITimelineEngine, TimelineEngine } from '../engine/engine';
44
import { MIN_SCALE_COUNT, PREFIX, START_CURSOR_TIME } from '../interface/const';
55
import { TimelineEditor, TimelineRow, TimelineState } from '../interface/timeline';
66
import { checkProps } from '../utils/check_props';
@@ -26,11 +26,12 @@ export const Timeline = React.forwardRef<TimelineState, TimelineEditor>((props,
2626
minScaleCount,
2727
maxScaleCount,
2828
onChange,
29+
engine,
2930
autoReRender = true,
3031
onScroll: onScrollVertical,
3132
} = checkedProps;
3233

33-
const engineRef = useRef<TimelineEngine>(new TimelineEngine());
34+
const engineRef = useRef<ITimelineEngine>(engine || new TimelineEngine());
3435
const domRef = useRef<HTMLDivElement>();
3536
const areaRef = useRef<HTMLDivElement>();
3637
const scrollSync = useRef<ScrollSync>();

src/engine/engine.ts

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,40 @@ const PLAYING = 'playing';
77
const PAUSED = 'paused';
88
type PlayState = 'playing' | 'paused';
99

10+
export interface ITimelineEngine extends Emitter<EventTypes> {
11+
readonly isPlaying: boolean;
12+
readonly isPaused: boolean;
13+
effects: Record<string, TimelineEffect>;
14+
data: TimelineRow[];
15+
/** 设置播放速率 */
16+
setPlayRate(rate: number): boolean;
17+
/** 获取播放速率 */
18+
getPlayRate(): number;
19+
/** 重新渲染当前时间 */
20+
reRender(): void;
21+
/** 设置播放时间 */
22+
setTime(time: number, isTick?: boolean): boolean;
23+
/** 获取播放时间 */
24+
getTime(): number;
25+
/** 播放 */
26+
play(param: {
27+
/** 默认从头运行到尾, 优先级大于autoEnd */
28+
toTime?: number;
29+
/** 是否播放完后自动结束 */
30+
autoEnd?: boolean;
31+
}): boolean;
32+
/** 暂停 */
33+
pause(): void;
34+
}
35+
1036
/**
1137
* 时间轴播放器
1238
* 可脱离编辑器单独运行
1339
* @export
1440
* @class TimelineEngine
1541
* @extends {Emitter<EventTypes>}
1642
*/
17-
export class TimelineEngine extends Emitter<EventTypes> {
43+
export class TimelineEngine extends Emitter<EventTypes> implements ITimelineEngine {
1844
constructor() {
1945
super(new Events());
2046
}

src/interface/timeline.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { ReactNode } from 'react';
22
import { OnScrollParams } from 'react-virtualized';
3+
import { ITimelineEngine } from '..';
34
import { Emitter } from '../engine/emitter';
45
import { EventTypes } from '../engine/events';
56
import { TimelineAction, TimelineRow } from './action';
@@ -71,6 +72,10 @@ export interface EditData {
7172
* @default false
7273
*/
7374
disableDrag?: boolean;
75+
/**
76+
* @description timeline运行器,不传则使用内置运行器
77+
*/
78+
engine?: ITimelineEngine;
7479
/**
7580
* @description 自定义action区域渲染
7681
*/

0 commit comments

Comments
 (0)