From d49e72c7f276923c3b569387003676f5144dd820 Mon Sep 17 00:00:00 2001 From: MiniPear Date: Thu, 27 Apr 2023 12:29:03 +0800 Subject: [PATCH] fix(chart): autoFit do not set width and height of chart options --- .../integration/api-chart-auto-fit.spec.ts | 4 +- .../snapshots/api/chart-auto-fit/step0.png | Bin 11332 -> 11811 bytes __tests__/plots/api/chart-auto-fit.ts | 7 +- __tests__/unit/api/chart.spec.ts | 18 +++++ src/api/chart.ts | 64 ++++++++---------- src/utils/size.ts | 31 --------- 6 files changed, 56 insertions(+), 68 deletions(-) diff --git a/__tests__/integration/api-chart-auto-fit.spec.ts b/__tests__/integration/api-chart-auto-fit.spec.ts index 66d9f45b99..1cb417af25 100644 --- a/__tests__/integration/api-chart-auto-fit.spec.ts +++ b/__tests__/integration/api-chart-auto-fit.spec.ts @@ -9,6 +9,7 @@ describe('chart.options.autoFit', () => { const canvas = createNodeGCanvas(800, 500); let chart; let button; + let fitted; it('chart({ autoFit: true }) should fit parent container', async () => { const { finished, ...rest } = render({ @@ -17,6 +18,7 @@ describe('chart.options.autoFit', () => { }); chart = rest.chart; button = rest.button; + fitted = rest.fitted; await finished; await sleep(20); await expect(canvas).toMatchCanvasSnapshot(dir, 'step0'); @@ -24,7 +26,7 @@ describe('chart.options.autoFit', () => { it('chart.forceFit() should fit parent container', async () => { button.dispatchEvent(new CustomEvent('click')); - await new Promise((resolve) => chart.on('afterchangesize', resolve)); + await fitted; await sleep(20); await expect(canvas).toMatchCanvasSnapshot(dir, 'step1'); }); diff --git a/__tests__/integration/snapshots/api/chart-auto-fit/step0.png b/__tests__/integration/snapshots/api/chart-auto-fit/step0.png index 8b3cf47d4b7fb77d963abd45498a87e473857d86..64734e82c4c8ec7c5e51af6564721ab8cc70ab3f 100644 GIT binary patch literal 11811 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 BClvqy literal 11332 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 diff --git a/__tests__/plots/api/chart-auto-fit.ts b/__tests__/plots/api/chart-auto-fit.ts index 2101fa7c1d..ff6c583354 100644 --- a/__tests__/plots/api/chart-auto-fit.ts +++ b/__tests__/plots/api/chart-auto-fit.ts @@ -38,11 +38,14 @@ export function chartAutoFit(context) { const finished = chart.render(); + let resolve; + const fitted = new Promise((r) => (resolve = r)); + button.onclick = () => { wrapperDiv.style.width = '400px'; wrapperDiv.style.height = '500px'; - chart.forceFit(); + chart.forceFit().then(resolve); }; - return { chart, button, finished }; + return { chart, button, finished, fitted }; } diff --git a/__tests__/unit/api/chart.spec.ts b/__tests__/unit/api/chart.spec.ts index 792c9626e7..755773fa01 100644 --- a/__tests__/unit/api/chart.spec.ts +++ b/__tests__/unit/api/chart.spec.ts @@ -605,4 +605,22 @@ describe('Chart', () => { expect(interval.data()).toEqual([data[1]]); expect(line.data()).toEqual([data[1]]); }); + + it('new Chart({ autoFit: true }) should not set width and height of chart options.', async () => { + const chart = new Chart({ theme: 'classic', autoFit: true }); + chart + .interval() + .data([ + { genre: 'Sports', sold: 275 }, + { genre: 'Strategy', sold: 115 }, + { genre: 'Action', sold: 120 }, + { genre: 'Shooter', sold: 350 }, + { genre: 'Other', sold: 150 }, + ]) + .encode('x', 'genre') + .encode('y', 'sold'); + await chart.render(); + expect(chart.width()).toBeUndefined(); + expect(chart.height()).toBeUndefined(); + }); }); diff --git a/src/api/chart.ts b/src/api/chart.ts index 3090da812c..3b343b94c2 100644 --- a/src/api/chart.ts +++ b/src/api/chart.ts @@ -1,11 +1,11 @@ import { RendererPlugin, Canvas as GCanvas } from '@antv/g'; import { Renderer as CanvasRenderer } from '@antv/g-canvas'; import { Plugin as DragAndDropPlugin } from '@antv/g-plugin-dragndrop'; -import { debounce, deepMix, omit } from '@antv/util'; +import { debounce, deepMix, omit, size } from '@antv/util'; import EventEmitter from '@antv/event-emitter'; import { G2Context, render, destroy } from '../runtime'; import { ViewComposition } from '../spec'; -import { getChartSize } from '../utils/size'; +import { getContainerSize } from '../utils/size'; import { ChartEvent } from '../utils/event'; import { G2ViewTree } from '../runtime/types/options'; import { Node } from './node'; @@ -95,6 +95,13 @@ function Canvas( }); } +function sizeOf(options, container) { + const { autoFit } = options; + if (autoFit) return getContainerSize(container); + const { width = 640, height = 480 } = options; + return { width, height }; +} + export function optionsOf(node: Node): Record { const root = normalizeRoot(node); const discovered: Node[] = [root]; @@ -183,22 +190,8 @@ export class Chart extends View { render(): Promise { if (!this._context.canvas) { // Init width and height. - const { - width = 640, - height = 480, - renderer, - plugins, - autoFit, - } = this.options(); - const { width: adjustedWidth, height: adjustedHeight } = getChartSize( - this._container, - autoFit, - width, - height, - ); - this.width(adjustedWidth); - this.height(adjustedHeight); - + const { renderer, plugins } = this.options(); + const { width, height } = sizeOf(this.options(), this._container); // Create canvas if it does not exist. this._context.canvas = Canvas( this._container, @@ -211,12 +204,19 @@ export class Chart extends View { return new Promise((resolve, reject) => { try { - render(this.options(), this._context, () => resolve(this), reject); + const { width, height } = sizeOf(this.options(), this._container); + render( + { ...this.options(), width, height }, + this._context, + () => resolve(this), + reject, + ); } catch (e) { reject(e); } }); } + /** * @overload * @returns {G2ViewTree} @@ -291,26 +291,22 @@ export class Chart extends View { } forceFit() { - const { width, height, autoFit } = this.options(); - const { width: adjustedWidth, height: adjustedHeight } = getChartSize( - this._container, - autoFit, - width, - height, - ); - if (adjustedHeight && adjustedWidth) { - this.changeSize(adjustedWidth, adjustedHeight); - } + // @ts-ignore + this.options.autoFit = true; + return this.render(); } - changeSize(adjustedWidth: number, adjustedHeight: number): Promise { - const { width, height, on } = this.options(); - if (width === adjustedWidth && height === adjustedHeight) { + changeSize(width: number, height: number): Promise { + const { width: actualWidth, height: actualHeight } = sizeOf( + this.options(), + this._container, + ); + if (width === actualWidth && height === actualHeight) { return Promise.resolve(this); } this.emit(ChartEvent.BEFORE_CHANGE_SIZE); - this.width(adjustedWidth); - this.height(adjustedHeight); + this.width(width); + this.height(height); const finished = this.render(); finished.then(() => { this.emit(ChartEvent.AFTER_CHANGE_SIZE); diff --git a/src/utils/size.ts b/src/utils/size.ts index 1cbb7c6320..27dd8b1c0e 100644 --- a/src/utils/size.ts +++ b/src/utils/size.ts @@ -31,37 +31,6 @@ export function getContainerSize(container: HTMLElement): Size { }; } -/** - * - * @description Calculate the chart size. - * @param container DOM container element. - * @param autoFit Should auto fit. - * @param width Chart width which is set by user. - * @param height Chart height which is set by user. - * @returns chart width and height. - */ -export function getChartSize( - container: HTMLElement, - autoFit: boolean, - width: number, - height: number, -): Size { - if (!autoFit) { - return { - width, - height, - }; - } - - // Get size from wrapper container. - const size = getContainerSize(container); - - return { - width: size.width, - height: size.height, - }; -} - /** * @description Calculate the real canvas size by view options. */