Merge pull request #228 from antvis/fix/qbi-color-size-update

Fix/qbi color size update

packages/react/src/component/LayerAttribute/Color.tsx

@@ -13,7 +13,7 @@ export default React.memo(function Chart(props: ILayerProps) {
     color.field
       ? layer.color(color.field as StyleAttrField, color.values)
       : layer.color(color.values as StyleAttrField);
-  }, [color.field, color.scale, JSON.stringify(color.values)]);
+  }, [color.field, color.scale, JSON.stringify(color.values), JSON.stringify(color.options)]);
 
   return null;
 });

packages/react/src/component/LayerAttribute/Filter.tsx

@@ -13,6 +13,6 @@ export default React.memo(function Chart(props: ILayerProps) {
     if (filter.field) {
       layer.filter(filter.field as string, filter.values as StyleAttrField);
     }
-  }, [filter.field, filter.values, JSON.stringify(filter.values)]);
+  }, [filter.field, filter.values, JSON.stringify(filter.values), JSON.stringify(filter.options)]);
   return null;
 });

packages/react/src/component/LayerAttribute/Layer.tsx

@@ -60,10 +60,6 @@ export default function BaseLayer(type: string, props: ILayerProps) {
     // 重绘layer
     if (layer) {
       mapScene.render();
-      // 如果autoFit为true，执行自适应操作
-      if (options?.autoFit) {
-        layer.fitBounds();
-      }
     }
   });
 

packages/react/src/component/LayerAttribute/Shape.tsx

@@ -13,6 +13,6 @@ export default React.memo(function Chart(props: ILayerProps) {
     shape.field
       ? layer.shape(shape.field, shape.values)
       : layer.shape(shape.values as StyleAttrField);
-  }, [shape.field, JSON.stringify(shape.values)]);
+  }, [shape.field, JSON.stringify(shape.values), JSON.stringify(shape.options)]);
   return null;
 });

packages/react/src/component/LayerAttribute/Size.tsx

@@ -13,6 +13,6 @@ export default React.memo(function Chart(props: ILayerProps) {
     size.field
       ? layer.size(size.field, size.values)
       : layer.size(size.values as StyleAttrField);
-  }, [size.field, JSON.stringify(size.values), size.scale]);
+  }, [size.field, size.scale, JSON.stringify(size.values), JSON.stringify(size.options)]);
   return null;
 });

packages/react/src/component/LayerAttribute/Source.tsx

@@ -17,6 +17,11 @@ export default React.memo(function Chart(props: ISourceProps) {
     } else {
       layer.setData(data, sourceOption);
     }
+    // 临时解决：若开启，每次更新之后自适应缩放；
+    // TODO：是否可以统一到Layer的option里，目前问题是Layer的autoFit一直为true，无法触发更新
+    if (sourceOption.autoFit) {
+      layer.fitBounds();
+    }
   }, [data, JSON.stringify(sourceOption)]);
   return null;
 });

packages/react/src/component/LayerAttribute/index.ts

@@ -22,6 +22,9 @@ export interface IAttributeOptions {
   values: string[] | number[] | string | number | CallBack;
   scale?: string;
   blend: keyof typeof BlendType;
+  options?: {
+    [key: string]: any;
+  };
 }
 
 export interface IScaleAttributeOptions {
@@ -49,6 +52,8 @@ export interface IStyleOptions {
 
 export interface ISourceOptions extends ISourceCFG {
   data: any;
+  // 每次更新数据之后是否自适应缩放
+  autoFit: boolean;
 }
 
 export interface IActiveOptions {

packages/react/src/component/LayerContext.tsx

@@ -1,7 +1,8 @@
 import { ILayer } from '@antv/l7';
 import { createContext, useContext } from 'react';
 
-export const LayerContext = createContext({});
+// tslint:disable-next-line: no-object-literal-type-assertion
+export const LayerContext = createContext<ILayer | undefined>({} as ILayer);
 export function useLayerValue(): ILayer {
   return (useContext(LayerContext) as unknown) as ILayer;
 }