fix(heatmap): 修复热力图 style shadowBlur 不生效 & color 使用回调会导致白屏 (#3532)

* fix(heatmap): 修复热力图 style shadowBlur 不生效 & color 使用回调会导致白屏 * fix: 修改下 cr 内容
antvis · Jul 21, 2021 · 664cf1a · 664cf1a
1 parent 23323b7
commit 664cf1a
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 7 deletions.
diff --git a/src/geometry/base.ts b/src/geometry/base.ts
@@ -1551,7 +1551,7 @@ export default class Geometry<S extends ShapePoint = ShapePoint> extends Base {
   }
 
   // 创建图形属性相关的配置项
-  private createAttrOption(attrName: string, field: AttributeOption | string | number, cfg?) {
+  protected createAttrOption(attrName: string, field: AttributeOption | string | number, cfg?) {
     if (isNil(field) || isObject(field)) {
       if (isObject(field) && isEqual(Object.keys(field), ['values'])) {
         // shape({ values: [ 'funnel' ] })

diff --git a/src/geometry/heatmap.ts b/src/geometry/heatmap.ts
@@ -2,7 +2,7 @@ import ColorUtil from '@antv/color-util';
 import { get, isNumber } from '@antv/util';
 import { FIELD_ORIGIN } from '../constant';
 import { Color, IShape } from '../dependents';
-import { Data, Datum, MappingDatum, ShapeInfo } from '../interface';
+import { Data, Datum, MappingDatum, ShapeInfo, AttributeOption, ColorAttrCallback } from '../interface';
 import Geometry from './base';
 
 /**
@@ -20,7 +20,7 @@ export default class Heatmap extends Geometry {
     const range = this.prepareRange(mappingData);
     const radius = this.prepareSize();
 
-    let blur = get(this.styleOption, ['style', 'shadowBlur']);
+    let blur = get(this.styleOption, ['cfg', 'shadowBlur']);
     if (!isNumber(blur)) {
       blur = radius / 2;
     }
@@ -31,6 +31,13 @@ export default class Heatmap extends Geometry {
     return null;
   }
 
+  /** 热力图暂时不支持 callback 回调（文档需要说明下） */
+  public color(field: AttributeOption | string, cfg?: string | string[] | ColorAttrCallback): Geometry {
+    this.createAttrOption('color', field, typeof cfg !== 'function' ? cfg : '');
+
+    return this;
+  }
+
   /**
    * clear
    */

diff --git a/src/util/helper.ts b/src/util/helper.ts
@@ -48,9 +48,11 @@ export function padEnd(source: string | any[], targetLength: number, padValue: a
  * @param keys
  */
 export function omit<T = any>(obj: T, keys: string[]): T {
-  keys.forEach((key: string) => {
-    delete obj[key];
-  });
+  if (typeof obj === 'object') {
+    keys.forEach((key: string) => {
+      delete obj[key];
+    });
+  }
 
   return obj;
 }

diff --git a/tests/unit/geometry/heatmap-spec.ts b/tests/unit/geometry/heatmap-spec.ts
@@ -36,12 +36,12 @@ describe('Heatmap', () => {
       },
       coordinate: coord,
     });
+    heatmap.position('g*l').color('tmp', '#F51D27-#FA541C-#FF8C12-#FFC838-#FAFFA8-#80FF73-#12CCCC-#1890FF-#6E32C').style({ shadowBlur: 30 });
 
     expect(heatmap.type).toBe('heatmap');
   });
 
   it('paint', () => {
-    heatmap.position('g*l').color('tmp', '#F51D27-#FA541C-#FF8C12-#FFC838-#FAFFA8-#80FF73-#12CCCC-#1890FF-#6E32C2');
     heatmap.init({
       theme: Theme,
     });
@@ -51,6 +51,19 @@ describe('Heatmap', () => {
     expect(heatmap.container.getFirst().get('type')).toBe('image');
   });
 
+  it('style', () => {
+    const grayScaleBlurredCanvas = heatmap.getGrayScaleBlurredCanvas();
+    const ctx = grayScaleBlurredCanvas.getContext('2d');
+
+    expect(ctx.shadowBlur).toBe(30);
+  });
+
+  it('color callback', () => {
+    heatmap.position('g*l').color('tmp', () => '');
+
+    expect(heatmap).toBeDefined();
+  });
+
   it('clear', () => {
     heatmap.clear();