fix(word-cloud): word cloud should exec data-set transform when resize (#1607)

Author: hustcc

examples/word-cloud/basic/demo/basic.ts

@@ -7,7 +7,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world-population.jso
       data,
       width: 600,
       height: 500,
-      autoFit: false,
       wordField: 'x',
       weightField: 'value',
       color: '#6262ff',

examples/word-cloud/basic/demo/image-mask.ts

@@ -14,7 +14,6 @@ imageMask.onload = () => {
         // 宽高设置最好根据 imageMask 做调整
         width: 600,
         height: 400,
-        autoFit: false,
         wordField: 'name',
         weightField: 'value',
         imageMask,

src/core/plot.ts

@@ -122,21 +122,10 @@ export abstract class Plot<O extends PickOptions> extends EE {
   public render() {
     // 暴力处理，先清空再渲染，需要 G2 层自行做好更新渲染
     this.chart.clear();
-
-    const adaptor = this.getSchemaAdaptor();
-
-    const { padding } = this.options;
-    // 更新 padding
-    this.chart.padding = padding;
-
-    // 转化成 G2 API
-    adaptor({
-      chart: this.chart,
-      options: this.options,
-    });
-
+    // 执行 adaptor
+    this.execAdaptor();
+    // 渲染
     this.chart.render();
-
     // 绑定
     this.bindSizeSensor();
   }
@@ -219,16 +208,42 @@ export abstract class Plot<O extends PickOptions> extends EE {
     this.off();
   }
 
+  /**
+   * 执行 adaptor 操作
+   */
+  protected execAdaptor() {
+    const adaptor = this.getSchemaAdaptor();
+
+    const { padding } = this.options;
+    // 更新 padding
+    this.chart.padding = padding;
+
+    // 转化成 G2 API
+    adaptor({
+      chart: this.chart,
+      options: this.options,
+    });
+  }
+
+  /**
+   * 当图表容器大小变化的时候，执行的函数
+   */
+  protected triggerResize() {
+    this.chart.forceFit();
+  }
+
   /**
    * 绑定 dom 容器大小变化的事件
    */
   private bindSizeSensor() {
-    this.unbindSizeSensor();
+    if (this.unbind) {
+      return;
+    }
 
     const { autoFit = true } = this.options;
     if (autoFit) {
       this.unbind = bind(this.container, () => {
-        this.chart.forceFit();
+        this.triggerResize();
       });
     }
   }

src/plots/word-cloud/index.ts

@@ -41,4 +41,14 @@ export class WordCloud extends Plot<WordCloudOptions> {
   protected getSchemaAdaptor(): Adaptor<WordCloudOptions> {
     return adaptor;
   }
+
+  /**
+   * 覆写父类的方法，因为词云图使用 data-set 进行布局，原理上有些不一样
+   */
+  protected triggerResize() {
+    // 重新做一遍 data-set 的处理逻辑，这个适和其他图形不一样的地阿芳
+    this.execAdaptor();
+    // 执行父类的方法
+    super.triggerResize();
+  }
 }