Merge pull request #215 from antvis/fix-view-layer-update-config

fix: updateConfig还是先按原来init流程

__tests__/unit/title-desc-spec.ts

@@ -75,6 +75,7 @@ describe('Area plot', () => {
         visible: false,
       },
     });
+    plot.render();
     const region2 = { start: view.view.get('start'), end: view.view.get('end') };
     expect(region1).not.toEqual(region2);
     expect(view.title).toBe(null);
@@ -84,6 +85,7 @@ describe('Area plot', () => {
         visible: false,
       },
     });
+    plot.render();
     const region3 = { start: view.view.get('start'), end: view.view.get('end') };
     expect(view.title).toBe(null);
     expect(view.description).toBe(null);

src/base/controller/canvas.ts

@@ -27,6 +27,30 @@ export default class CanvasController {
   private plot: BasePlot; // temp
   private resizeObserver: any;
 
+  /**
+   * when the container size changed, trigger it after 300ms.
+   */
+  private onResize = _.debounce(() => {
+    if (this.plot.destroyed) {
+      return;
+    }
+    const { width, height } = this.getCanvasSize();
+    /** height measure不准导致重复 forceFit */
+    if (this.width === width && this.height === height) {
+      return;
+    }
+
+    // got new width, height, re-render the plot
+    this.width = width;
+    this.height = height;
+
+    this.canvas.changeSize(width, height);
+
+    // this.plot.updateBBox({width,height} as Range );
+    // this.plot.updateConfig({});
+    // this.plot.render();
+  }, 300);
+
   constructor(cfg: CanvasControllerCfg) {
     const { containerDOM, plot } = cfg;
     this.containerDOM = containerDOM;
@@ -132,29 +156,4 @@ export default class CanvasController {
     this.width = width;
     this.height = height;
   }
-
-  /**
-   * when the container size changed, trigger it after 300ms.
-   */
-  private onResize = () =>
-    _.debounce(() => {
-      if (this.plot.destroyed) {
-        return;
-      }
-      const { width, height } = this.getCanvasSize();
-      /** height measure不准导致重复 forceFit */
-      if (this.width === width && this.height === height) {
-        return;
-      }
-
-      // got new width, height, re-render the plot
-      this.width = width;
-      this.height = height;
-
-      this.canvas.changeSize(width, height);
-
-      // this.plot.updateBBox({width,height} as Range );
-      // this.plot.updateConfig({});
-      // this.plot.render();
-    }, 300);
 }

src/base/controller/padding.ts

@@ -49,6 +49,7 @@ export default class PaddingController {
     this.plot.updateConfig({
       padding,
     });
+    this.plot.render();
   }
 
   public processOuterPadding() {

src/base/view-layer.ts

@@ -185,6 +185,8 @@ export default abstract class ViewLayer<T extends ViewLayerConfig = ViewLayerCon
       panelRange: {},
     };
 
+    this.paddingController.clear();
+
     this.drawTitle();
     this.drawDescription();
 
@@ -256,27 +258,12 @@ export default abstract class ViewLayer<T extends ViewLayerConfig = ViewLayerCon
   }
 
   /** 更新配置项 */
-  public updateConfig(cfg): void {
-    this.view.destroy();
+  public updateConfig(cfg: Partial<T>): void {
+    this.doDestroy();
     if (!cfg.padding && this.initialOptions.padding && this.initialOptions.padding === 'auto') {
       cfg.padding = 'auto';
     }
-    const newProps = _.deepMix({}, this.options, cfg);
-    this.options = newProps;
-    this.width = cfg.width ? cfg.width : this.width;
-    this.height = cfg.height ? cfg.height : this.height;
-
-    this.paddingController.clear();
-    const viewRange = this.getViewRange();
-    // TODO: 实现需要更新View的其他属性
-    // 更新padding region height width
-    Object.assign(this.view.cfg, {
-      width: this.width,
-      height: this.height,
-      padding: this.paddingController.getPadding(),
-      ...getRegion(viewRange),
-    });
-    this.render();
+    this.options = _.deepMix({}, this.options, cfg);
   }
 
   public changeData(data: object[]): void {
@@ -489,28 +476,50 @@ export default abstract class ViewLayer<T extends ViewLayerConfig = ViewLayerCon
 
   /** 抽取destroy和updateConfig共有代码为_destroy方法 */
   private doDestroy() {
+    this.doDestroyInteractions();
+    /** 销毁g2.view实例 */
+    this.view.destroy();
+  }
+
+  private doDestroyInteractions() {
     // 移除注册的 interactions
     if (this.interactions) {
       this.interactions.forEach((inst) => {
         inst.destroy();
       });
     }
-    /** 销毁g2.view实例 */
-    this.view.destroy();
+    this.interactions = [];
   }
 
   private getViewRange() {
     // 有 Range 的 Interaction 参与 ViewMargin 计算
-    this.interactions.forEach((interaction) => {
-      const Ctor: InteractionCtor | undefined = BaseInteraction.getInteraction('slider', this.type);
-      const range: BBox | undefined = Ctor && Ctor.getInteractionRange(this.layerBBox, interaction.cfg);
+    const { interactions = [] } = this.options;
+    const layerBBox = this.layerBBox;
+    interactions.forEach((interaction) => {
+      const Ctor: InteractionCtor | undefined = BaseInteraction.getInteraction(interaction.type, this.type);
+      const range: BBox | undefined = Ctor && Ctor.getInteractionRange(layerBBox, interaction.cfg);
+      let position = '';
       if (range) {
+        // 先只考虑 Range 靠边的情况
+        if (range.bottom === layerBBox.bottom && range.top > layerBBox.top) {
+          // margin[2] += range.height;
+          position = 'bottom';
+        } else if (range.right === layerBBox.right && range.left > layerBBox.left) {
+          // margin[1] += range.width;
+          position = 'right';
+        } else if (range.left === layerBBox.left && range.right > layerBBox.right) {
+          // margin[3] += range.width;
+          position = 'left';
+        } else if (range.top === layerBBox.top && range.bottom > layerBBox.bottom) {
+          // margin[0] += range.height;
+          position = 'top';
+        }
         this.paddingController.registerPadding(
           {
             getBBox: () => {
               return range;
             },
-            position: 'bottom',
+            position,
           },
           'outer'
         );