From 091a4b6a150b201472414b24991bc7e85032c23c Mon Sep 17 00:00:00 2001
From: thinkinggis <lzx199065@gmail.com>
Date: Fri, 14 Feb 2020 15:59:03 +0800
Subject: [PATCH] fix: text update color

---
 packages/layers/src/plugins/DataMappingPlugin.ts | 13 +++++++++++--
 packages/layers/src/point/models/text.ts         | 16 +++++++++++++++-
 stories/Layers/components/Text.tsx               | 16 ++++++++--------
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/packages/layers/src/plugins/DataMappingPlugin.ts b/packages/layers/src/plugins/DataMappingPlugin.ts
index a6252669e4..8035ca9490 100644
--- a/packages/layers/src/plugins/DataMappingPlugin.ts
+++ b/packages/layers/src/plugins/DataMappingPlugin.ts
@@ -64,7 +64,13 @@ export default class DataMappingPlugin implements ILayerPlugin {
         if (filter?.needRemapping) {
           layer.setEncodedData(this.mapping(attributes, filterData));
         } else {
-          layer.setEncodedData(this.mapping(attributesToRemapping, filterData));
+          layer.setEncodedData(
+            this.mapping(
+              attributesToRemapping,
+              filterData,
+              layer.getEncodedData(),
+            ),
+          );
         }
 
         this.logger.debug('remapping finished');
@@ -99,11 +105,14 @@ export default class DataMappingPlugin implements ILayerPlugin {
   private mapping(
     attributes: IStyleAttribute[],
     data: IParseDataItem[],
+    predata?: IEncodeFeature[],
   ): IEncodeFeature[] {
-    return data.map((record: IParseDataItem) => {
+    return data.map((record: IParseDataItem, i) => {
+      const preRecord = predata ? predata[i] : {};
       const encodeRecord: IEncodeFeature = {
         id: record._id,
         coordinates: record.coordinates,
+        ...preRecord,
       };
       attributes
         .filter((attribute) => attribute.scale !== undefined)
diff --git a/packages/layers/src/point/models/text.ts b/packages/layers/src/point/models/text.ts
index 3c238e1cc6..248d996ced 100644
--- a/packages/layers/src/point/models/text.ts
+++ b/packages/layers/src/point/models/text.ts
@@ -86,6 +86,13 @@ export default class TextModel extends BaseModel {
   private extent: [[number, number], [number, number]];
   private textureHeight: number = 0;
   private preTextStyle: Partial<IPointTextLayerStyleOptions> = {};
+  private glyphInfoMap: {
+    [key: string]: {
+      shaping: any;
+      glyphQuads: IGlyphQuad[];
+      centroid: number[];
+    };
+  } = {};
 
   public getUninforms(): IModelUniform {
     const {
@@ -284,7 +291,7 @@ export default class TextModel extends BaseModel {
     } = this.layer.getLayerConfig() as IPointTextLayerStyleOptions;
     const data = this.layer.getEncodedData();
     this.glyphInfo = data.map((feature: IEncodeFeature) => {
-      const { shape = '', coordinates } = feature;
+      const { shape = '', coordinates, id } = feature;
       const shaping = shapeText(
         shape.toString(),
         mapping,
@@ -298,6 +305,13 @@ export default class TextModel extends BaseModel {
       feature.shaping = shaping;
       feature.glyphQuads = glyphQuads;
       feature.centroid = calculteCentroid(coordinates);
+      if (id) {
+        this.glyphInfoMap[id] = {
+          shaping,
+          glyphQuads,
+          centroid: calculteCentroid(coordinates),
+        };
+      }
       return feature;
     });
   }
diff --git a/stories/Layers/components/Text.tsx b/stories/Layers/components/Text.tsx
index 5c10d70160..cf994f63e8 100644
--- a/stories/Layers/components/Text.tsx
+++ b/stories/Layers/components/Text.tsx
@@ -39,15 +39,15 @@ export default class TextLayerDemo extends React.Component {
           y: 'w',
         },
       })
-      // .shape('m', 'text')
-      .shape('circle')
+      .shape('m', 'text')
+      // .shape('circle')
       .size(12)
       .filter('t', (t) => {
         return t > 14;
       })
       .color('red')
       .style({
-        // textAllowOverlap: true,
+        textAllowOverlap: true,
         // fontWeight: 200,
         // textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
         // textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
@@ -90,12 +90,12 @@ export default class TextLayerDemo extends React.Component {
       });
 
     rasterFolder
-      .add(styleOptions, 'strokeWidth', 0, 1000)
+      .add(styleOptions, 'strokeWidth', 0, 10)
       .onChange((strokeWidth: number) => {
-        // pointLayer.filter('t', (t: number) => {
-        //   return t > strokeWidth;
-        // });
-        pointLayer.setData(pointsData.list.slice(0, strokeWidth));
+        pointLayer.filter('t', (t: number) => {
+          return t > strokeWidth;
+        });
+        // pointLayer.setData(pointsData.list.slice(0, strokeWidth));
         scene.render();
       });
     rasterFolder