From f08bea2bf58a4a1cce11f3043d3507160e7c54d3 Mon Sep 17 00:00:00 2001 From: zengyue ye Date: Wed, 1 Dec 2021 11:49:01 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20axis=20rerender=20?= =?UTF-8?q?=E4=B8=8D=E6=9B=B4=E6=96=B0=E5=B8=83=E5=B1=80=E5=92=8C=20labelO?= =?UTF-8?q?ffset=20=E6=8A=A5=E9=94=99=20(#1293)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复 rerender 坐标轴不更新 * fix: 修复 pan 平移后，图表缩小的问题 --- packages/f2/src/chart/index.ts | 13 +-- packages/f2/src/components/axis/withAxis.tsx | 25 ++---- .../f2/test/components/axis/axis.test.tsx | 1 + .../test/components/interaction/pan.test.tsx | 84 ++++++------------- packages/f2/test/util.ts | 10 ++- 5 files changed, 47 insertions(+), 86 deletions(-) diff --git a/packages/f2/src/chart/index.ts b/packages/f2/src/chart/index.ts index 9f079a0ff..dad183417 100644 --- a/packages/f2/src/chart/index.ts +++ b/packages/f2/src/chart/index.ts @@ -100,7 +100,6 @@ class Chart extends Component implements IChart, InteractionMixin { const { style: nextStyle, data: nextData, - coord: nextCoord, scale: nextScale, interactions: nextInteractions, } = nextProps; @@ -118,11 +117,6 @@ class Chart extends Component implements IChart, InteractionMixin { coordController.updateLayout(this.layout); } - // willReceiveProps 一定会触发render， - // render 时要重置 coord 范围，重置后需要让所有子组件都重新render - // 所以这里不比较是否有差异，每次都新建，让所有子组件重新render - this.coord = coordController.create(nextCoord, this.layout); - if (nextData !== lastData) { scaleController.changeData(nextData); } @@ -133,6 +127,13 @@ class Chart extends Component implements IChart, InteractionMixin { } } + willUpdate() { + const { coordController, props } = this; + // render 时要重置 coord 范围，重置后需要让所有子组件都重新render + // 所以这里不比较是否有差异，每次都新建，让所有子组件重新render + this.coord = coordController.create(props.coord, this.layout); + } + private getStyle(props, context) { const { theme, px2hd, left, top, width, height } = context; const { style } = props; diff --git a/packages/f2/src/components/axis/withAxis.tsx b/packages/f2/src/components/axis/withAxis.tsx index 3cd7a5cd1..116b5944a 100644 --- a/packages/f2/src/components/axis/withAxis.tsx +++ b/packages/f2/src/components/axis/withAxis.tsx @@ -12,7 +12,6 @@ type BBox = { export default (View) => { return class Axis extends Component { style: Style = {}; - maxBBox: BBox; constructor(props: AxisProps) { super(props); @@ -67,7 +66,7 @@ export default (View) => { } // 获取ticks最大的宽高 getMaxBBox(ticks, style: Style): BBox { - const { context, maxBBox } = this; + const { context } = this; const { measureText } = context; const { labelOffset } = style; @@ -80,20 +79,10 @@ export default (View) => { height = Math.max(height, bbox.height); }); - let bbox = { + const bbox = { width: width + labelOffset, height: height + labelOffset, }; - - // 增量更新，以最大的宽高作为限制 - if (maxBBox) { - bbox = { - height: Math.max(0, maxBBox.height - bbox.height), - width: Math.max(0, maxBBox.width - bbox.width), - }; - } - - this.maxBBox = bbox; return bbox; } @@ -132,14 +121,12 @@ export default (View) => { if (style[key] === null) { return; } - const styleValue = isFunction(style[key]) ? undefined : style[key] + const styleValue = isFunction(style[key]) ? undefined : style[key]; if (isString(value) || isNumber(value)) { this.style[key] = px2hd(styleValue) || value; } else { - this.style[key] = px2hd( - deepMix(clone(value), styleValue) - ); + this.style[key] = px2hd(deepMix(clone(value), styleValue)); } }); @@ -182,8 +169,8 @@ export default (View) => { // 主要是计算coord的布局 updateCoord() { - const { props, context } = this; - const { visible, style, chart, coord } = props; + const { props } = this; + const { visible, chart, coord } = props; if (visible === false) { return; } diff --git a/packages/f2/test/components/axis/axis.test.tsx b/packages/f2/test/components/axis/axis.test.tsx index 2944f3527..8a395e45c 100644 --- a/packages/f2/test/components/axis/axis.test.tsx +++ b/packages/f2/test/components/axis/axis.test.tsx @@ -209,6 +209,7 @@ describe('Axis 轴', () => { } return cfg; }, + labelOffset: '8px', }} /> diff --git a/packages/f2/test/components/interaction/pan.test.tsx b/packages/f2/test/components/interaction/pan.test.tsx index b88be8c1c..75ced82d9 100644 --- a/packages/f2/test/components/interaction/pan.test.tsx +++ b/packages/f2/test/components/interaction/pan.test.tsx @@ -1,61 +1,22 @@ -// @ts-nocheck import { jsx } from '../../../src'; -import { Polar, Rect } from '../../../src/coord'; -import { Canvas, Chart, Component } from '../../../src'; -import { Interval, Axis, Legend, Tooltip, Line } from '../../../src/components'; -import { createContext } from '../../util'; - -class Interaction {} - -class CustomInteraction extends Interaction {} - -class InjectTestComponent extends Component { - didMount() { - const interactionContext = this.props.chart.interaction.context; - window.interactionContext = interactionContext; - interactionContext.doZoom(0.5, 0.5, 1.5); - - for (let i = 0; i <= 9; i++) { - setTimeout(() => { - // interactionContext.doZoom(0.5, 0.5, 1.5) - interactionContext.start(); - interactionContext.doMove(-0.001 * i); - }, i * 100); - } - } -} +import { Canvas, Chart } from '../../../src'; +import { Axis, Line } from '../../../src/components'; +import { createContext, delay } from '../../util'; describe('Interaction 交互', () => { - it.only('平移和缩放', async () => { + it('平移和缩放', async () => { const context = createContext('基础柱状图', { - width: '500px', + width: '350px', height: '300px', }); const chartRef = { current: null }; const res = await fetch('https://gw.alipayobjects.com/os/antfincdn/KbnoL5QgL0/index.json'); const data = await res.json(); - const { type, props } = ( - + const { props } = ( + { // } ]} > - {/* */} - + - {/* */} - {/* */} - - - {/* */} + ); - // @ts-ignore - const canvas = new type(props); + const canvas = new Canvas(props); canvas.render(); + + const chart = chartRef.current; + + const interactionContext = chart.interaction.context; + interactionContext.doZoom(0.5, 0.5, 1.5); + + await delay(100); + interactionContext.start(); + interactionContext.doMove(-0.008); + + await delay(100); + expect(chart.coord.top).toBe(15); + expect(chart.coord.left).toBeCloseTo(41.96); + expect(chart.coord.bottom).toBeCloseTo(267.5); }); }); diff --git a/packages/f2/test/util.ts b/packages/f2/test/util.ts index 258c9f056..dea0b703e 100644 --- a/packages/f2/test/util.ts +++ b/packages/f2/test/util.ts @@ -1,3 +1,11 @@ +function delay(time) { + return new Promise((resolve) => { + setTimeout(() => { + resolve(true); + }, time); + }); +} + const createContext = (title = '', { height = '225px', width = '300px' }: any = {}) => { const canvasEl = document.createElement('canvas'); const titleEl = document.createElement('p'); @@ -11,4 +19,4 @@ const createContext = (title = '', { height = '225px', width = '300px' }: any = return context; }; -export { createContext }; +export { createContext, delay };