diff --git a/src/chart/controller/annotation.ts b/src/chart/controller/annotation.ts index 2539329bb7..bb99e42378 100644 --- a/src/chart/controller/annotation.ts +++ b/src/chart/controller/annotation.ts @@ -230,7 +230,7 @@ export default class Annotation extends Controller { } }) } else { - this.view.once(VIEW_LIFE_CIRCLE.AFTER_RENDER, () => { + this.view.getRootView().once(VIEW_LIFE_CIRCLE.AFTER_RENDER, () => { doWhat(); }); } diff --git a/src/geometry/element/index.ts b/src/geometry/element/index.ts index 3420c5d703..7b2365c32f 100644 --- a/src/geometry/element/index.ts +++ b/src/geometry/element/index.ts @@ -369,10 +369,11 @@ export default class Element extends Base { ...cfg, callback: () => { isFunction(cfg.callback) && cfg.callback(); - this.geometry.emit(GEOMETRY_LIFE_CIRCLE.AFTER_DRAW_ANIMATE); + this.geometry?.emit(GEOMETRY_LIFE_CIRCLE.AFTER_DRAW_ANIMATE); }, } } + return cfg; } return null; @@ -403,7 +404,7 @@ export default class Element extends Base { const animateCfg = this.getAnimateCfg(animateType); if (animateCfg) { // 开始执行动画的生命周期 - this.geometry.emit(GEOMETRY_LIFE_CIRCLE.BEFORE_DRAW_ANIMATE); + this.geometry?.emit(GEOMETRY_LIFE_CIRCLE.BEFORE_DRAW_ANIMATE); doAnimate(this.shape, animateCfg, { coordinate: shapeFactory.coordinate, @@ -475,6 +476,7 @@ export default class Element extends Base { if (this.animate) { if (animateCfg) { + this.geometry?.emit(GEOMETRY_LIFE_CIRCLE.BEFORE_DRAW_ANIMATE); // 需要进行动画 doAnimate(sourceShape, animateCfg, { coordinate: this.shapeFactory.coordinate, diff --git a/tests/bugs/sub-view-region-filter-spec.ts b/tests/bugs/sub-view-region-filter-spec.ts index 6dbcb6b9b8..9df14107f8 100644 --- a/tests/bugs/sub-view-region-filter-spec.ts +++ b/tests/bugs/sub-view-region-filter-spec.ts @@ -32,6 +32,8 @@ describe('#0000', () => { padding: [20, 40, 0, 30], }); + view.animate(false); + // Step 2: 载入数据源 view.data(data); view.scale({ diff --git a/tests/unit/component/annotation-spec.ts b/tests/unit/component/annotation-spec.ts index 290d8f7ff4..0ec128e8c3 100644 --- a/tests/unit/component/annotation-spec.ts +++ b/tests/unit/component/annotation-spec.ts @@ -2,6 +2,7 @@ import 'jest-extended'; import { Chart } from '../../../src/'; import { COMPONENT_TYPE } from '../../../src/constant'; import { createDiv, removeDom } from '../../util/dom'; +import { delay } from '../../util/delay'; const IMAGE = 'https://img.alicdn.com/tfs/TB1M.wKkND1gK0jSZFyXXciOVXa-120-120.png'; @@ -297,7 +298,7 @@ describe('annotation', () => { expect(dataRegion.getElementById('-annotation-text-bg')).toBeDefined(); }); - it('regionFilter', () => { + it('regionFilter', async () => { chart.line().position('city*sale'); chart.annotation().regionFilter({ start: { city: '广州', sale: 30 }, @@ -307,6 +308,8 @@ describe('annotation', () => { }); chart.render(); + await delay(700); + const regionFilter = chart.getComponents().filter((co) => co.type === COMPONENT_TYPE.ANNOTATION)[9].component; expect(regionFilter.get('type')).toEqual('regionFilter'); expect(regionFilter.get('shapes')).toHaveLength(1); diff --git a/tests/unit/geometry/base-spec.ts b/tests/unit/geometry/base-spec.ts index f0159096ba..282b0612f7 100644 --- a/tests/unit/geometry/base-spec.ts +++ b/tests/unit/geometry/base-spec.ts @@ -1,12 +1,14 @@ import { flatten } from '@antv/util'; import 'jest-extended'; import { Chart, getEngine } from '../../../src'; +import { GEOMETRY_LIFE_CIRCLE } from '../../../src/constant'; import { getCoordinate } from '../../../src/dependents'; import Geometry from '../../../src/geometry/base'; import * as Shape from '../../../src/geometry/shape/base'; import { LooseObject, ShapeInfo } from '../../../src/interface'; import { getTheme } from '../../../src/theme/'; import { createScaleByField, syncScale } from '../../../src/util/scale'; +import { delay } from '../../util/delay'; import { createCanvas, createDiv, removeDom } from '../../util/dom'; import { createScale, updateScales } from '../../util/scale'; @@ -825,4 +827,66 @@ describe('Geometry', () => { expect(customInfo).toEqual({ hello: 'g2' }); }); + + it('geometry life circle', async () => { + const data = [ + { year: '1991', value: 15468 }, + { year: '1992', value: 16100 }, + { year: '1993', value: 15900 }, + { year: '1998', value: 32040 }, + ]; + + const chart = new Chart({ + container: createDiv(), + width: 500, + height: 400, + }); + + chart.data(data); + const geometry = chart.interval().position('year*valye'); + + const beforFn = jest.fn(); + const afterFn = jest.fn(); + + // 无动画 + geometry.animate(false); + geometry.once(GEOMETRY_LIFE_CIRCLE.BEFORE_DRAW_ANIMATE, () => beforFn(1)); + geometry.once(GEOMETRY_LIFE_CIRCLE.AFTER_DRAW_ANIMATE, () => afterFn(1)); + chart.render(); + + await delay(500); + + expect(beforFn).not.toBeCalled(); + expect(afterFn).not.toBeCalled(); + + // 有动画 + geometry.animate(true); + geometry.once(GEOMETRY_LIFE_CIRCLE.BEFORE_DRAW_ANIMATE, () => beforFn(2)); + geometry.once(GEOMETRY_LIFE_CIRCLE.AFTER_DRAW_ANIMATE, () => afterFn(2)); + chart.changeSize(300, 300); + + await delay(500); + + expect(beforFn).toBeCalledWith(2); + expect(afterFn).toBeCalledWith(2); + + const fn = jest.fn(); + // 设置自定义动画 + geometry.animate({ + update: { + callback: fn, + } + }); + geometry.once(GEOMETRY_LIFE_CIRCLE.BEFORE_DRAW_ANIMATE, () => beforFn(3)); + geometry.once(GEOMETRY_LIFE_CIRCLE.AFTER_DRAW_ANIMATE, () => afterFn(3)); + chart.changeSize(400, 400); + + await delay(500); + + // 自定义的 animate callback 也需要调用 + expect(fn).toBeCalled(); + expect(beforFn).toBeCalledWith(3); + expect(afterFn).toBeCalledWith(3); + expect(fn).toBeCalled(); + }); }); diff --git a/tests/unit/geometry/element/index-spec.ts b/tests/unit/geometry/element/index-spec.ts index 1e7571b14b..e0d0b069af 100644 --- a/tests/unit/geometry/element/index-spec.ts +++ b/tests/unit/geometry/element/index-spec.ts @@ -4,6 +4,7 @@ import Element from '../../../../src/geometry/element'; import * as Shape from '../../../../src/geometry/shape/base'; import '../../../../src/geometry/shape/interval'; import { getTheme } from '../../../../src/theme/'; +import { omit } from '../../../util/omit'; const Rect = getCoordinate('rect'); const G = getEngine('canvas'); @@ -296,7 +297,7 @@ describe('Element', () => { }; // @ts-ignore - expect(element.getAnimateCfg('update')).toEqual({ + expect(omit(element.getAnimateCfg('update'), 'callback')).toEqual({ delay: 1000, }); // @ts-ignore diff --git a/tests/util/omit.ts b/tests/util/omit.ts new file mode 100644 index 0000000000..7dc2aca4ae --- /dev/null +++ b/tests/util/omit.ts @@ -0,0 +1,11 @@ +import { reduce } from '@antv/util'; + +export function omit(obj: any, keys: string[]): object { + // @ts-ignore + return reduce(obj, (r: any, curr: any, key: string) => { + if (!keys.includes(key)) { + r[key] = curr; + } + return r; + }, {}); +}