import EventHandler, { EVENT_TYPE_MAP, type EventDefinition } from './core/EventHandler'; import Action, { type ActionDefinition } from './core/Action'; import Dataset from './core/Dataset'; import PointScale, { type Point } from './core/PointScale'; import { type Option } from './option'; export declare type TimeValue = string | number; export declare type TimeDataItem = TimeValue | { type: Point['type']; value: TimeValue; }; /** 时间轴 */ export default class Timeline extends EventHandler { /** 组件类型 */ static readonly type: string; protected _type: string; /** 两次消费之间的时间间隔(毫秒) */ static readonly CONSUME_INTERVAL = 16; /** dom 容器 */ protected _$dom: HTMLElement; /** 配置项 */ protected _option: Option; /** 数据集管理 */ protected _dataset: Dataset; /** 比例尺 */ protected _scale: PointScale; /** 交互行为管理 */ protected _action: Action; width: number; height: number; /** 时间轴有效宽度(进度条区域) */ protected _axisWidth: number; /** 超时器缓存 */ private __timers; /** 初始化标识 */ protected _initialized: boolean; /** 播放队列(将需要播放的时间数据索引放入队列中,然后每次只取最后一个播放,同时清空队列) */ private __playQueue; /** 消费队列循环超时器 */ private __loopTimer; /** 播放等待超时器 */ private __pendingTimer; /** 是否播放状态 */ protected _playing: boolean; /** 临时的储存区 */ private __tempStorage; /** 倍速 */ private __speed; constructor($dom: string | HTMLElement, option: Option); /** * 初始化 */ protected _initialize(): void; private __parseTheme; /** * 销毁 */ destroy(): void; /** * 延迟执行函数 */ private __delayCallback; /** * 获取当前数据索引位置 * * @version v0.0.2+ */ getCurrentIndex(): number; /** * 获取数据索引区间,开闭 [,) * * @version v0.0.2+ */ getIndexRange(): [number, number]; /** * 设置数据索引区间,开闭 [,) * * - 如果当前位置的索引不在设置的范围内,则自动跳到最大索引处并暂停播放 * * @version v0.2.7+ */ setIndexRange(indexRange: [number, number]): void; /** * 获取播放速度(倍速) * * @version v0.2.0+ */ getSpeed(): number; /** * 设置播放速度(倍速) * * @version v0.2.0+ */ setSpeed(speed: Option['config']['animation']['speed']): void; /** * 更新轴的刻度值 */ private __updateAxisTickValue; /** * 更新轴的刻度线 */ private __updateAxisTickLine; /** * 显示轴的提示 */ private _showAxisTooltip; /** * 隐藏轴的提示 */ private _hideAxisTooltip; /** * 更新轴的提示 */ private __updateAxisTooltip; /** * 更新轴的指示器按钮 */ private __updateAxisPointerMarker; /** * 更新轴起始范围的指示器按钮 */ private __updateAxisStartRangePointerMarker; /** * 更新轴的范围进度条 */ private __updateAxisProgressRangeBar; /** * 更新轴的进度条 */ private __updateAxisProgressBar; /** * 更新轴 */ private __updateAxis; /** * 切换操作按钮的显示状态 */ private __switchOperationButton; /** * 更新控制按钮 */ private __updateControlButton; /** * 更新 */ protected _update(): void; /** * 更新到指定位置 */ protected _updateTo(status: InstanceType['__playQueue'][number]): void; /** * 更新时间轴到指定位置并暂停 */ update(dataIndex: number): void; /** * 渲染自定义样式 */ private __renderCustomStyles; /** * 渲染 */ private __render; /** * 注册交互行为事件 */ private __registerAction; /** * 绑定交互事件 */ private __bindEvents; private __registerActionForPointer; /** * 动画主循环 * ! 此循环用来控制外部图表组件的更新调度 * 消费播放队列 * 为了避免用户在上一个动画播放到一半的时候,拖动滑块,导致上一周期动画计算未完成的问题 * 这里用一个队列来存储用户的操作,每次执行的时候,只取最后一个周期进行绘制 * 这样每次用户拖动滑块,最多绘制2次动画周期 */ private __loop; /** * 暂停主循环 */ private __stopLoop; /** * 开始播放(播放到最后一个数据时,会自动暂停,不会重新从头开始播放。) * * - 没有 `dataIndex` 参数时,会从下一个索引处开始播放,若当前已处于最大索引处,则从小索引开始播放 * - 传了 `dataIndex` 参数时,先跳到指定时间节点,再开始播放 */ play(dataIndex?: number): void; protected _pause(...args: Parameters): void; /** * 暂停动画 */ pause(): void; /** * 是否播放中 */ isPlaying(): boolean; private _resize; /** * 自适应 */ resize(): void; /** * 分发交互行为事件 */ dispatchAction(action: A, ...args: Parameters): void; /** * 分发事件 */ protected _dispatchEvent(event: E, ...args: Parameters): void; }