Skip to content

Commit a83a915

Browse files
lessmostlessmost
authored
fix: update scrollbar and data label when changeData (#1202)
* fix: update scrollbar and data label when changeData * fix: cleanup remove console log
1 parent cb9d927 commit a83a915

File tree

7 files changed

+94
-4
lines changed

7 files changed

+94
-4
lines changed

‎__tests__/bugs/issue-1137-spec.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Bar } from '../../src';
2+
import { createDiv } from '../utils/dom';
3+
import { wait } from '../utils/common';
4+
5+
const getData = (cnt: number) => {
6+
return new Array(cnt)
7+
.fill({
8+
name: '',
9+
value: 0,
10+
})
11+
.map((val, idx) => ({
12+
name: `name_${idx}`,
13+
value: Math.floor(Math.random() * 100),
14+
}));
15+
};
16+
17+
describe('#1137', () => {
18+
const plot = new Bar(createDiv(), {
19+
localRefresh: false,
20+
data: getData(50),
21+
xField: 'value',
22+
yField: 'name',
23+
label: {
24+
visible: true,
25+
type: 'bar-auto',
26+
},
27+
animation: true,
28+
interactions: [
29+
{
30+
type: 'scrollbar',
31+
cfg: {
32+
type: 'vertical',
33+
},
34+
},
35+
],
36+
});
37+
plot.render();
38+
setTimeout(() => {
39+
plot.changeData(getData(100));
40+
}, 1000);
41+
42+
it('test', async () => {
43+
await wait(1500);
44+
const view = plot.getView();
45+
const label = plot.getLayer().getLabels()[0];
46+
const geometry = view.geometries[0];
47+
48+
// 滚动条是否生效了
49+
expect(geometry.elements).toHaveLength(16);
50+
51+
// 数据标签
52+
label.getLabels().forEach((item) => {
53+
expect(item.attr('stroke')).toBeUndefined();
54+
});
55+
});
56+
});

‎src/base/constants.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export enum VIEW_LAYER_LIFE_CYCLE {
2+
BEFORE_INIT = 'beforeinit',
3+
AFTER_INIT = 'afterinit',
4+
BEFORE_RENDER = 'beforerender',
5+
AFTER_RENDER = 'afterrender',
6+
BEFORE_CHANGE_DATA = 'beforechangedata',
7+
AFTER_CHANGE_DATA = 'afterchangedata',
8+
}

‎src/base/view-layer.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import Layer, { LayerConfig } from './layer';
4646
import { isTextUsable } from '../util/common';
4747
import { LooseMap } from '../interface/types';
4848
import BBox, { DIRECTION } from '../util/bbox';
49+
import { VIEW_LAYER_LIFE_CYCLE } from './constants';
4950

5051
export interface ViewConfig {
5152
renderer?: string;
@@ -212,6 +213,7 @@ export default abstract class ViewLayer<T extends ViewLayerConfig = ViewLayerCon
212213
}
213214

214215
public beforeInit() {
216+
this.emit(VIEW_LAYER_LIFE_CYCLE.BEFORE_INIT);
215217
super.beforeInit();
216218
}
217219

@@ -279,6 +281,7 @@ export default abstract class ViewLayer<T extends ViewLayerConfig = ViewLayerCon
279281
if (this.options.padding !== 'auto') {
280282
this.parseEvents();
281283
}
284+
this.emit(VIEW_LAYER_LIFE_CYCLE.AFTER_INIT);
282285
}
283286

284287
public afterRender() {
@@ -302,11 +305,13 @@ export default abstract class ViewLayer<T extends ViewLayerConfig = ViewLayerCon
302305

303306
/** 完整生命周期渲染 */
304307
public render(): void {
308+
this.emit(VIEW_LAYER_LIFE_CYCLE.BEFORE_RENDER);
305309
super.render();
306310
const { data } = this.options;
307311
if (!isEmpty(data)) {
308312
this.view.render();
309313
}
314+
this.emit(VIEW_LAYER_LIFE_CYCLE.AFTER_RENDER);
310315
}
311316

312317
/** 画布重绘 */
@@ -369,6 +374,7 @@ export default abstract class ViewLayer<T extends ViewLayerConfig = ViewLayerCon
369374
}
370375

371376
public changeData(data: DataItem[]): void {
377+
this.emit(VIEW_LAYER_LIFE_CYCLE.BEFORE_CHANGE_DATA);
372378
const isEmptyBefore = isEmpty(this.options.data);
373379
this.options.data = this.processData(data);
374380

@@ -380,6 +386,8 @@ export default abstract class ViewLayer<T extends ViewLayerConfig = ViewLayerCon
380386
} else {
381387
this.view.changeData(this.options.data);
382388
}
389+
390+
this.emit(VIEW_LAYER_LIFE_CYCLE.AFTER_CHANGE_DATA);
383391
}
384392

385393
// plot 不断销毁重建，需要一个api获取最新的plot

‎src/components/label/base.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,8 @@ export default abstract class LabelComponent<L extends Label = Label> extends Ba
6464

6565
const callback = () => {
6666
this.clear();
67+
this.labelsCfgMap = {};
68+
this.lastLabelsCfgMap = {};
6769
this.render();
6870
};
6971
view.on(VIEW_LIFE_CIRCLE.AFTER_PAINT, callback);
@@ -103,6 +105,7 @@ export default abstract class LabelComponent<L extends Label = Label> extends Ba
103105
// 图形发生更新
104106
const updateAnimateCfg = get(animateCfg, 'update');
105107
if (updateAnimateCfg) {
108+
shape.stopAnimate();
106109
shape.attr(oldAttrs);
107110
doAnimate(shape, updateAnimateCfg, {
108111
toAttrs: {
@@ -115,6 +118,7 @@ export default abstract class LabelComponent<L extends Label = Label> extends Ba
115118
// 新生成的 shape
116119
const appearAnimateCfg = get(animateCfg, 'appear');
117120
if (appearAnimateCfg) {
121+
shape.stopAnimate();
118122
doAnimate(shape, appearAnimateCfg, {
119123
toAttrs: {
120124
...shape.attr(),
@@ -135,6 +139,7 @@ export default abstract class LabelComponent<L extends Label = Label> extends Ba
135139
id,
136140
name: 'label',
137141
});
142+
tempShape.stopAnimate();
138143
doAnimate(tempShape, leaveAnimateCfg, {
139144
toAttrs: null,
140145
coordinate: this.coord,

‎src/interaction/scrollbar.ts‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import ViewLayer from '../base/view-layer';
66
import { IScrollbarInteractionConfig } from '../interface/config';
77
import BaseInteraction from './base';
88
import { getDataByScaleRange } from './helper/data-range';
9+
import { VIEW_LIFE_CIRCLE } from '@antv/g2/lib/constant';
10+
import { VIEW_LAYER_LIFE_CYCLE } from '../base/constants';
911

1012
const DEFAULT_PADDING: number = 4;
1113
const DEFAULT_SIZE: number = 8;
@@ -79,10 +81,11 @@ export default class ScrollbarInteraction extends BaseInteraction {
7981
}) as (evt: object) => void;
8082

8183
public render(): void {
84+
const layer = this.getViewLayer();
8285
const view = this.view;
8386
this.ratio = 0;
8487
this.thumbOffset = 0;
85-
view.on('afterrender', () => {
88+
const callback = () => {
8689
const padding = this.view.padding;
8790
// if we're not in `auto padding` process
8891
if (padding === 'auto' || isEqual(padding, [0, 0, 0, 1])) {
@@ -94,7 +97,17 @@ export default class ScrollbarInteraction extends BaseInteraction {
9497
} else {
9598
this.renderScrollbar();
9699
}
97-
});
100+
};
101+
const changeDataCallback = () => {
102+
// reset
103+
this.trackLen = 0;
104+
};
105+
view.on(VIEW_LIFE_CIRCLE.AFTER_PAINT, callback);
106+
this.addDisposable(() => view.off(VIEW_LIFE_CIRCLE.AFTER_PAINT, callback));
107+
view.on(VIEW_LIFE_CIRCLE.AFTER_RENDER, callback);
108+
this.addDisposable(() => view.off(VIEW_LIFE_CIRCLE.AFTER_RENDER, callback));
109+
layer.on(VIEW_LAYER_LIFE_CYCLE.BEFORE_CHANGE_DATA, changeDataCallback);
110+
this.addDisposable(() => layer.off(VIEW_LAYER_LIFE_CYCLE.BEFORE_CHANGE_DATA, changeDataCallback));
98111
}
99112

100113
protected start() {

‎src/plots/bar/component/label-auto.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export default class BarAutoLabel extends BarLabel<IBarAutoLabel> {
7878
const element: Element = label.get('element');
7979
const { shape } = element;
8080
const fillWhite = isContrastColorWhite(shape.attr('fill'));
81-
const shapeBBox = BBox.fromBBoxObject(shape.getBBox());
81+
const shapeBBox = this.getElementShapeBBox(element);
8282
const labelBBox = BBox.fromBBoxObject(label.getBBox());
8383

8484
// 如果 Column 本身就不可见，直接隐藏对应的 label

‎src/plots/column/component/label-auto.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export default class ColumnAutoLabel extends ColumnLabel<IColumnAutoLabel> {
7474
const element: Element = label.get('element');
7575
const { shape } = element;
7676
const fillWhite = isContrastColorWhite(shape.attr('fill'));
77-
const shapeBBox = BBox.fromBBoxObject(shape.getBBox());
77+
const shapeBBox = this.getElementShapeBBox(element);
7878
const labelBBox = BBox.fromBBoxObject(label.getBBox());
7979

8080
// 如果 Column 本身就不可见，直接隐藏对应的 label

0 commit comments

Comments
 (0)