import { IGroup, ICanvas } from '@antv/g-base'; import { TrendCfg } from './trend'; import { ControllerCfg } from './controllerBtn'; import { ShapeStyle, IAbstractGraph as IGraph } from '@antv/g6-core'; /** * 一些默认的样式配置 */ export declare const BACKGROUND_STYLE: { fill: string; opacity: number; }; export declare const FOREGROUND_STYLE: { fill: string; opacity: number; cursor: string; }; export declare const DEFAULT_HANDLER_WIDTH = 2; export declare const HANDLER_STYLE: { width: number; height: number; }; export declare const TEXT_STYLE: { textBaseline: string; fill: string; opacity: number; }; export declare const TICK_LABEL_STYLE: { textAlign: string; textBaseline: string; fill: string; opacity: number; }; export declare const TICK_LINE_STYLE: { lineWidth: number; stroke: string; }; export type SliderOption = Partial<{ readonly width?: number; readonly height?: number; readonly backgroundStyle?: ShapeStyle; readonly foregroundStyle?: ShapeStyle; readonly handlerStyle?: { width?: number; height?: number; style?: ShapeStyle; }; readonly textStyle?: ShapeStyle; readonly start: number; readonly end: number; readonly minText: string; readonly maxText: string; }>; export type TickCfg = { readonly ticks?: { date: string; value: string; }[]; readonly tickLabelFormatter?: (d: any) => string | undefined; readonly tickLabelStyle?: ShapeStyle; readonly tickLineStyle?: ShapeStyle; }; interface TrendTimeBarConfig extends SliderOption { readonly graph: IGraph; readonly canvas: ICanvas; readonly group: IGroup; readonly x: number; readonly y: number; readonly width: number; readonly height: number; readonly padding: number; readonly type: 'trend' | 'simple'; readonly trendCfg?: TrendCfg; readonly backgroundStyle?: ShapeStyle; readonly foregroundStyle?: ShapeStyle; readonly tick?: TickCfg; readonly controllerCfg: ControllerCfg; } export default class TrendTimeBar { private group; private graph; private canvas; x: number; y: number; width: number; height: number; private padding; private trendCfg; private timeBarType; private controllerCfg; private backgroundStyle; private foregroundStyle; private handlerStyle; private textStyle; private foregroundShape; private minHandlerShape; private minTextShape; private maxHandlerShape; private maxTextShape; private textList; private start; private end; private minText; private maxText; private currentHandler; private prevX; /** 刻度位置预处理 */ private tickPosList; private ticks; /** 是否处于播放状态 */ private isPlay; private currentSpeed; private currentMode; /** 动画 id */ private playHandler; private controllerBtnGroup; private trendComponent; private fontFamily; private tickLabelFormatter; private tickLabelStyle; private tickLineStyle; constructor(cfg: TrendTimeBarConfig); /** * 更新配置 * @param cfg */ update(cfg: Partial): void; setText(minText: string, maxText: string): void; /** * 初始化组件结构 * @private */ private renderSlider; /** * 绑定事件: * - 点击 * - 滑动 * - 拖拽 * - 滚动 * @private */ private bindEvents; private onMouseDown; private onMouseMove; private onMouseUp; /** 输入当前圆点位置,输出离哪个 tick 的位置最近 */ private adjustTickIndex; /** * 调整 offsetRange,因为一些范围的限制 * @param offsetRange */ private adjustOffsetRange; /** * 更新起始、结束的控制块位置、文本、范围值(原始值) * @param offsetRange */ private updateStartEnd; /** * 根据移动的比例来更新 ui,更新范围(0-1 范围的比例值) * @private */ private updateUI; /** * 调整 text 的位置,自动躲避 * 根据位置,调整返回新的位置 * @param range */ private dodgeText; private startPlay; private changePlayStatus; destory(): void; } export {};