173 lines
4.3 KiB
TypeScript
173 lines
4.3 KiB
TypeScript
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<TrendTimeBarConfig>): 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 {};
|