- Go backend (server/)
- Frontend (web/, server/static/)
- Database and deployment files
- Scripts and docs
Co-Authored-By: 狸花猫/Claude-Qwen3.6-Plus 🐾
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 {};
|