fix: `active` and `select` can coexist (#914)

* fix: `active` and `select` can coexist

* style: dov style

* fix: use `v_PickingResult.a` as status

* style: code style

* chore: remove extra semi-colon

* chore: add `u_EnableSelect` to optimize perf

* style: code style

packages/core/src/shaders/picking.frag.glsl

@@ -1,5 +1,6 @@
 varying vec4 v_PickingResult;
 uniform vec4 u_HighlightColor : [0, 0, 0, 0];
+uniform vec4 u_SelectColor : [0, 0, 0, 0];
 uniform float u_PickingStage : 0.0;
 uniform float u_shaderPick;
 
@@ -10,13 +11,21 @@ uniform float u_activeMix: 0;
 #define PICKING_HIGHLIGHT 2.0
 #define COLOR_SCALE 1. / 255.
 
+#define HIGHLIGHT 1.0
+#define SELECT 2.0
+
 /*
  * Returns highlight color if this item is selected.
  */
 vec4 filterHighlightColor(vec4 color, float weight) {
-  bool selected = bool(v_PickingResult.a);
+  float selected = v_PickingResult.a;
 
-  if (selected) {
+  if (selected == SELECT) {
+    // 点击选中状态
+    vec4 selectColor = u_SelectColor * COLOR_SCALE;
+    return selectColor;
+  } else if (selected == HIGHLIGHT) {
+    // hover 高亮状态
     vec4 highLightColor = u_HighlightColor * COLOR_SCALE;
 
     float highLightAlpha = highLightColor.a;

packages/core/src/shaders/picking.vert.glsl

@@ -2,17 +2,24 @@ attribute vec3 a_PickingColor;
 varying vec4 v_PickingResult;
 
 uniform vec3 u_PickingColor : [0, 0, 0];
+uniform vec3 u_CurrentSelectedId : [0, 0, 0];
 uniform vec4 u_HighlightColor : [0, 0, 0, 0];
+uniform vec4 u_SelectColor : [0, 0, 0, 0];
 uniform float u_PickingStage : 0.0;
 uniform float u_PickingThreshold : 1.0;
 uniform float u_PickingBuffer: 0.0;
 uniform float u_shaderPick;
+uniform float u_EnableSelect: 0.0;
 
 #define PICKING_NONE 0.0
 #define PICKING_ENCODE 1.0
 #define PICKING_HIGHLIGHT 2.0
 #define COLOR_SCALE 1. / 255.
 
+#define NORMAL 0.0
+#define HIGHLIGHT 1.0
+#define SELECT 2.0
+
 bool isVertexPicked(vec3 vertexColor) {
   return
     abs(vertexColor.r - u_PickingColor.r) < u_PickingThreshold &&
@@ -20,12 +27,28 @@ bool isVertexPicked(vec3 vertexColor) {
     abs(vertexColor.b - u_PickingColor.b) < u_PickingThreshold;
 }
 
+// 判断当前点是否已经被 select 选中
+bool isVertexSelected(vec3 vertexColor) {
+  return
+    abs(vertexColor.r - u_CurrentSelectedId.r) < u_PickingThreshold &&
+    abs(vertexColor.g - u_CurrentSelectedId.g) < u_PickingThreshold &&
+    abs(vertexColor.b - u_CurrentSelectedId.b) < u_PickingThreshold;
+}
+
 void setPickingColor(vec3 pickingColor) {
   if(u_shaderPick < 0.5) {
     return;
   }
   // compares only in highlight stage
-  v_PickingResult.a = float((u_PickingStage == PICKING_HIGHLIGHT) && isVertexPicked(pickingColor));
+  if (u_EnableSelect == 1.0 && u_PickingStage == PICKING_HIGHLIGHT && isVertexSelected(pickingColor)) {
+    // 选中态
+    v_PickingResult.a = SELECT;
+  } else if (u_PickingStage == PICKING_HIGHLIGHT && isVertexPicked(pickingColor)) {
+    // 高亮态
+    v_PickingResult.a = HIGHLIGHT;
+  } else {
+    v_PickingResult.a = NORMAL;
+  }
 
   // Stores the picking color so that the fragment shader can render it during picking
   v_PickingResult.rgb = pickingColor * COLOR_SCALE;

packages/layers/src/plugins/PixelPickingPlugin.ts

@@ -83,20 +83,36 @@ export default class PixelPickingPlugin implements ILayerPlugin {
     layer.hooks.beforeHighlight.tap(
       'PixelPickingPlugin',
       (pickedColor: number[]) => {
-        const { highlightColor, activeMix = 0 } = layer.getLayerConfig();
+        const {
+          highlightColor,
+          activeMix = 0,
+          enableSelect,
+        } = layer.getLayerConfig();
         const highlightColorInArray =
           typeof highlightColor === 'string'
             ? rgb2arr(highlightColor)
             : highlightColor || [1, 0, 0, 1];
+
+        const { selectColor } = layer.getLayerConfig();
+        const selectColorInArray =
+          typeof selectColor === 'string'
+            ? rgb2arr(selectColor)
+            : selectColor || [1, 0, 0, 1];
         layer.updateLayerConfig({
           pickedFeatureID: decodePickingColor(new Uint8Array(pickedColor)),
         });
+        const currentSelectedId = layer.getCurrentSelectedId();
         layer.models.forEach((model) =>
           model.addUniforms({
             u_PickingStage: PickingStage.HIGHLIGHT,
             u_PickingColor: pickedColor,
             u_HighlightColor: highlightColorInArray.map((c) => c * 255),
             u_activeMix: activeMix,
+            u_CurrentSelectedId: currentSelectedId
+              ? encodePickingColor(layer.getCurrentSelectedId()!)
+              : [0, 0, 0],
+            u_SelectColor: selectColorInArray.map((c) => c * 255),
+            u_EnableSelect: +(enableSelect || false),
           }),
         );
       },
@@ -119,6 +135,9 @@ export default class PixelPickingPlugin implements ILayerPlugin {
             u_PickingColor: pickedColor,
             u_HighlightColor: highlightColorInArray.map((c) => c * 255),
             u_activeMix: selectMix,
+            u_CurrentSelectedId: pickedColor,
+            u_SelectColor: highlightColorInArray.map((c) => c * 255),
+            u_EnableSelect: 1,
           }),
         );
       },

stories/Layers/components/Point.tsx

@@ -38,6 +38,7 @@ export default class Point3D extends React.Component {
             })
             .shape('circle')
             .size(16)
+            .active(true)
             .select({
               color: 'red',
             })