From 0d390db450cdea60f21ef6856e88b8d785f14a92 Mon Sep 17 00:00:00 2001 From: baizn <576375879@qq.com> Date: Thu, 24 Sep 2020 14:36:43 +0800 Subject: [PATCH] fix: resolve eslint problem --- src/plugins/timeBar/controllerBtn.ts | 7 +++++ src/plugins/timeBar/handler.ts | 7 ++++- src/plugins/timeBar/index.ts | 4 --- src/plugins/timeBar/timeBarSlice.ts | 33 ++++++++++++++++---- src/plugins/timeBar/timeBarTooltip.ts | 27 +++++++++------- src/plugins/timeBar/timeButton.ts | 11 ++++--- src/plugins/timeBar/trend.ts | 13 ++++++++ src/plugins/timeBar/trendTimeBar.ts | 45 +++++++++++++++++++++------ 8 files changed, 111 insertions(+), 36 deletions(-) diff --git a/src/plugins/timeBar/controllerBtn.ts b/src/plugins/timeBar/controllerBtn.ts index d645bcab9f..e5ddbeb01b 100644 --- a/src/plugins/timeBar/controllerBtn.ts +++ b/src/plugins/timeBar/controllerBtn.ts @@ -65,9 +65,13 @@ export default class ControllerBtn { private isPlay: boolean; public playButton: Button; + public preStepButton: IShape; + public nextStepButton: IShape; + private checkedIcon: IShape; + private checkedText: IShape; readonly controllerCfg?: ControllerCfg; @@ -75,10 +79,13 @@ export default class ControllerBtn { private group: IGroup; private speedGroup: IGroup; + private toggleGroup: IGroup; private speedText: IShape; + private speedPoint: IShape; + private speedAxisY: number[]; // 当前播放速度 diff --git a/src/plugins/timeBar/handler.ts b/src/plugins/timeBar/handler.ts index 9e08e90067..488396087c 100644 --- a/src/plugins/timeBar/handler.ts +++ b/src/plugins/timeBar/handler.ts @@ -43,21 +43,26 @@ const SIMPLE_DEFAULT_STYLE = { } export default class Handler { - // handle容器 private group: IGroup; + private name: string; private x: number; + private y: number; + private width: number; + private height: number; private style: IStyle; + private handleType: 'trend' | 'simple'; // 组件 private background: IShape; + private handleGroup: IGroup; constructor(cfg: HandlerCfg) { diff --git a/src/plugins/timeBar/index.ts b/src/plugins/timeBar/index.ts index 42d327c3aa..c96b1e1236 100644 --- a/src/plugins/timeBar/index.ts +++ b/src/plugins/timeBar/index.ts @@ -102,10 +102,6 @@ export default class TimeBar extends Base { }; } - constructor(cfgs?: TimeBarConfig) { - super(cfgs) - } - /** * 初始化 TimeBar 的容器 */ diff --git a/src/plugins/timeBar/timeBarSlice.ts b/src/plugins/timeBar/timeBarSlice.ts index 01d3259b01..fafbd08c72 100644 --- a/src/plugins/timeBar/timeBarSlice.ts +++ b/src/plugins/timeBar/timeBarSlice.ts @@ -64,44 +64,65 @@ export interface TimeBarSliceOption { export default class TimeBarSlice { private graph: IGraph; + private canvas: ICanvas; + private group: IGroup; + private sliceGroup: IGroup; + private width: number; + private height: number; + private padding: number; + private data: { date: string; value: string; }[]; + private start: number; + private end: number; // style public x: number; + public y: number; + private selectedTickStyle: ShapeStyle; + private unselectedTickStyle: ShapeStyle; + private tickLabelFormatter: (d: any) => string | boolean; private tickRects: any[]; + private tickWidth: number; + private startTickRectId: number; + private endTickRectId: number; private tooltipBackgroundColor: string; + private tooltipFomatter: (d: any) => string; private dragging: boolean; // play controller private controllerBtnGroup: ControllerBtn; + /** 是否处于播放状态 */ private isPlay: boolean; + // 调整后的播放速度 private currentSpeed: number; + /** 动画 id */ private playHandler: number; + private frameCount: number = 0; constructor(cfgs?: TimeBarSliceConfig) { @@ -217,7 +238,7 @@ export default class TimeBarSlice { y: rectBBox.minY }); - let label = undefined; + let label; if (tickLabelFormatter) { label = tickLabelFormatter(d); if (!isString(label) && label) { // return true @@ -290,7 +311,7 @@ export default class TimeBarSlice { sliceGroup.on('click', e => { const targetRect = e.target; if (targetRect.get('type') !== 'rect' || !targetRect.get('name')) return; - const id = parseInt(targetRect.get('name').split('-')[2]); + const id = parseInt(targetRect.get('name').split('-')[2], 10); if (!isNaN(id)) { const tickRects = this.tickRects @@ -318,7 +339,7 @@ export default class TimeBarSlice { tickRect.rect.attr(unselectedTickStyle); }) const targetRect = e.target; - const id = parseInt(targetRect.get('name').split('-')[2]); + const id = parseInt(targetRect.get('name').split('-')[2], 10); const selectedTickStyle = this.selectedTickStyle tickRects[id].rect.attr(selectedTickStyle); this.startTickRectId = id @@ -333,7 +354,7 @@ export default class TimeBarSlice { if (!this.dragging) return; if (e.target.get('type') !== 'rect') return; - const id = parseInt(e.target.get('name').split('-')[2]); + const id = parseInt(e.target.get('name').split('-')[2], 10); const startTickRectId = this.startTickRectId const tickRects = this.tickRects const selectedTickStyle = this.selectedTickStyle @@ -357,7 +378,7 @@ export default class TimeBarSlice { if (e.target.get('type') !== 'rect') return; const startTickRectId = this.startTickRectId - const id = parseInt(e.target.get('name').split('-')[2]); + const id = parseInt(e.target.get('name').split('-')[2], 10); if (id < startTickRectId) return; const selectedTickStyle = this.selectedTickStyle @@ -383,7 +404,7 @@ export default class TimeBarSlice { pickRect.on('mouseenter', e => { const rect = e.target; if (rect.get('type') !== 'rect') return; - const id = parseInt(rect.get('name').split('-')[2]); + const id = parseInt(rect.get('name').split('-')[2], 10); const clientPoint = canvas.getClientByPoint(tickRects[id].x, tickRects[id].y) tooltip.show({ x: tickRects[id].x, diff --git a/src/plugins/timeBar/timeBarTooltip.ts b/src/plugins/timeBar/timeBarTooltip.ts index b4d02ddec1..5448b9dd95 100644 --- a/src/plugins/timeBar/timeBarTooltip.ts +++ b/src/plugins/timeBar/timeBarTooltip.ts @@ -1,7 +1,5 @@ -import { IGroup, IShape } from '@antv/g-base'; import createDOM from '@antv/dom-util/lib/create-dom' -import { dataToPath, linePathToAreaPath } from './path'; -import { isNumber, isString } from '@antv/util'; +import { isString } from '@antv/util'; import modifyCSS from '@antv/dom-util/lib/modify-css'; export const BACKGROUND_STYLE = { @@ -18,13 +16,6 @@ export const TEXT_STYLE = { fontSize: 12 }; -interface ArrowStyle { - r?: number, - fill?: string, - stroke?: string, - lineWidth?: number -}; - export interface TimeBarTooltipCfg { readonly container: HTMLElement | string; readonly className?: string; @@ -48,20 +39,32 @@ export interface TimeBarTooltipCfg { */ export default class TimeBarTooltip { private container: HTMLElement | string; + private className: string; + // 生成的 shape public backgroundDOM: HTMLElement; + public arrowDOM: HTMLElement; + // 位置大小配置 private x: number; + private y: number; + // style private padding: number[]; + private backgroundColor: string; + private textColor: string; + private parentHeight: number; + private parentWidth: number; + private opacity: number; + private fontSize: number; private text: string; @@ -154,8 +157,8 @@ export default class TimeBarTooltip { modifyCSS(self.backgroundDOM, { marginLeft: `${-backgroundWidth / 2 - right + self.parentWidth + 12}px` }) } } + public hide() { - const self = this; - modifyCSS(self.container as HTMLElement, { top: 0, left: 0, visibility: 'hidden', }); + modifyCSS(this.container as HTMLElement, { top: 0, left: 0, visibility: 'hidden', }); } } diff --git a/src/plugins/timeBar/timeButton.ts b/src/plugins/timeBar/timeButton.ts index 5f905bc9b8..38dad7ff38 100644 --- a/src/plugins/timeBar/timeButton.ts +++ b/src/plugins/timeBar/timeButton.ts @@ -20,18 +20,21 @@ interface ButtonCfg { export default class Button { /** button 配置 */ private config: ButtonCfg; + /** 圆点 */ private circle: IShape; + /** 开始 marker */ private startMarker: IShape; + /** 暂停 marker */ private pauseGroupMarker: IGroup; + private pauseLeftMarker: IShape; + private pauseRightMarker: IShape; constructor(cfg: ButtonCfg) { - // super(); - this.config = deepMix({}, cfg); this.init(); @@ -84,8 +87,8 @@ export default class Button { attrs: { x: this.config.x - (1 / 4 + 1 / 8) * this.config.r, y: this.config.y - height / 2, - width: width, - height: height, + width, + height, fill: '#ccc', }, name: 'playPauseBtn' diff --git a/src/plugins/timeBar/trend.ts b/src/plugins/timeBar/trend.ts index f82c3486d8..a100f7a433 100644 --- a/src/plugins/timeBar/trend.ts +++ b/src/plugins/timeBar/trend.ts @@ -44,19 +44,28 @@ export interface TrendCfg { */ export default class Trend { private group: IGroup; + // 位置大小配置 private x: number; + private y: number; + private width: number; + private height: number; private data: number[]; private smooth: boolean; + private isArea: boolean; + private backgroundStyle: ShapeStyle; + private lineStyle: ShapeStyle; + private areaStyle: ShapeStyle; + private intervalConfig: Interval; constructor(cfg: TrendCfg) { @@ -148,4 +157,8 @@ export default class Trend { // 统一移动到对应的位置 trendGroup.move(x, y); } + + public destory() { + this.group.destroy() + } } diff --git a/src/plugins/timeBar/trendTimeBar.ts b/src/plugins/timeBar/trendTimeBar.ts index 4315ffa041..c470acb2fc 100644 --- a/src/plugins/timeBar/trendTimeBar.ts +++ b/src/plugins/timeBar/trendTimeBar.ts @@ -106,32 +106,49 @@ interface TrendTimeBarConfig extends SliderOption { export default class TrendTimeBar { private group: IGroup; + private graph: IGraph; + private canvas: ICanvas; + // 位置大小配置 public x: number; + public y: number; + public width: number; + public height: number; + private padding: number; private trendCfg: TrendCfg; + private timeBarType: 'trend' | 'simple'; private controllerCfg: ControllerCfg; + // 样式配置 private backgroundStyle: any; + private foregroundStyle: any; + private handlerStyle: any; + private textStyle: any; + /* 前景框，选中的区域 */ private foregroundShape: IShape; + /* 左侧(上侧)的按钮 */ private minHandlerShape: Handler; + /* 左侧文本 */ private minTextShape: IShape; + /* 由侧(下侧)的按钮 */ private maxHandlerShape: Handler; + /* 右侧文本 */ private maxTextShape: IShape; @@ -139,11 +156,15 @@ export default class TrendTimeBar { // 交互相关的数据信息 private start: number; + private end: number; + private minText: string; + private maxText: string; private currentHandler: Handler | IShape; + private prevX: number = 0; /** 刻度位置预处理 */ @@ -164,6 +185,8 @@ export default class TrendTimeBar { private controllerBtnGroup: ControllerBtn; + private trendComponent: Trend; + constructor(cfg: TrendTimeBarConfig) { const { @@ -265,7 +288,7 @@ export default class TrendTimeBar { const { width, height, timeBarType } = this // 趋势图数据 if (timeBarType === 'trend' && size(get(this.trendCfg, 'data'))) { - new Trend({ + const trendComponent = new Trend({ x: this.x, y: this.y, width, @@ -273,6 +296,8 @@ export default class TrendTimeBar { ...this.trendCfg, group: this.group }); + + this.trendComponent = trendComponent } const sliderGroup = this.group.addGroup({ @@ -639,23 +664,21 @@ export default class TrendTimeBar { // 拖动最小滑块时使用当前最大值设置最大值的文本，以便恢复到默认值 this.maxText = this.maxTextShape.attr('text') this.start += offsetRange; - const minTick = this.adjustTickIndex(this.start * this.width) - this.minText = this.ticks[minTick] + this.minText = this.ticks[this.adjustTickIndex(this.start * this.width)] break; case this.maxHandlerShape: // 拖动最大滑块时使用当前最小值设置最小值的文本，以便恢复到默认值 this.minText = this.minTextShape.attr('text') this.end += offsetRange; - const maxTick = this.adjustTickIndex(this.end * this.width) - this.maxText = this.ticks[maxTick] + this.maxText = this.ticks[this.adjustTickIndex(this.end * this.width)] break; case this.foregroundShape: this.start += offsetRange; this.end += offsetRange; - const minRangeTick = this.adjustTickIndex(this.start * this.width) - const maxRangeTick = this.adjustTickIndex(this.end * this.width) - this.minText = this.ticks[minRangeTick] - this.maxText = this.ticks[maxRangeTick] + this.minText = this.ticks[this.adjustTickIndex(this.start * this.width)] + this.maxText = this.ticks[this.adjustTickIndex(this.end * this.width)] + break; + default: break; } } @@ -823,5 +846,9 @@ export default class TrendTimeBar { group.off(`${PRE_STEP_BTN}:click`) group.off(TIMEBAR_CONFIG_CHANGE) group.destroy() + + if (this.trendComponent) { + this.trendComponent.destory() + } } }