fix: 修复 axis rerender 不更新布局和 labelOffset 报错

antvis · Nov 29, 2021 · 9640da8 · 9640da8
1 parent c1d477f
commit 9640da8
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 15 deletions.
diff --git a/packages/f2/src/components/axis/types.ts b/packages/f2/src/components/axis/types.ts
@@ -28,9 +28,10 @@ export interface Style<Type = void> {
   label?: StyleText<Type>;
 }
 
-export interface StyleProps<Type = void> extends Omit<Style, 'label' | 'grid'> {
+export interface StyleProps<Type = void> extends Omit<Style, 'label' | 'grid' | 'labelOffset'> {
   label?: StyleText<Type> | LabelCallback<Type>;
   grid?: LineAttrs | GridCallBack;
+  labelOffset?: number | string;
 }
 
 interface Point {

diff --git a/packages/f2/src/components/axis/withAxis.tsx b/packages/f2/src/components/axis/withAxis.tsx
@@ -1,4 +1,4 @@
-import { deepMix, isFunction, mix, each, clone } from '@antv/util';
+import { deepMix, isFunction, mix, each, clone, isPlainObject } from '@antv/util';
 import { jsx } from '../../jsx';
 import equal from '../../base/equal';
 import Component from '../../base/component';
@@ -12,7 +12,6 @@ type BBox = {
 export default (View) => {
   return class Axis extends Component<AxisProps> {
     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;
     }
 
@@ -133,6 +122,11 @@ export default (View) => {
           return;
         }
 
+        if (!isFunction(style[key]) && !isPlainObject(style[key])) {
+          this.style[key] = px2hd(value);
+          return null;
+        }
+
         this.style[key] = px2hd(
           deepMix(clone(value), isFunction(style[key]) ? undefined : style[key])
         );

diff --git 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',
             }}
           />
           <Line x="index" y="value" color="#2FC25B" />