Support highlightColor callback

docs/api-reference/layer.md

@@ -194,11 +194,14 @@ If this callback returns a truthy value, the `dragend` event is marked as handle
 
 Requires `pickable` to be true.
 
-##### `highlightColor` (Array, optional)
+##### `highlightColor` (Array|Function, optional)
 
 * Default: `[0, 0, 128, 128]`
 
-RGBA color to be used to render highlighted object. When 3 component (RGB) array is specified, a default value of 255 is used for alpha.
+RGBA color to blend with the highlighted object (either the hovered over object if `autoHighlight: true`, or the object at the index specified by `highlightedObjectIndex`). When the value is a 3 component (RGB) array, a default alpha of 255 is applied.
+
+- If an array is supplied, it is used for the object that is currently highlighted.
+- If a function is supplied, it is called with a [pickingInfo](/docs/developer-guide/interactivity.md#the-picking-info-object) object when the hovered object changes. The return value is used as the highlight color for the picked object. Only works with `autoHighlight: true`.
 
 ##### `highlightedObjectIndex` (Integer, optional)
 

modules/aggregation-layers/package.json

@@ -30,7 +30,7 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env.dev"
   },
   "dependencies": {
-    "@luma.gl/shadertools": "^8.1.0",
+    "@luma.gl/shadertools": "^8.1.2",
     "@math.gl/web-mercator": "^3.1.3",
     "d3-hexbin": "^0.2.1"
   },

modules/core/package.json

@@ -34,7 +34,7 @@
   "dependencies": {
     "@loaders.gl/core": "^2.1.1",
     "@loaders.gl/images": "^2.1.1",
-    "@luma.gl/core": "^8.1.0",
+    "@luma.gl/core": "^8.1.2",
     "@math.gl/web-mercator": "^3.1.3",
     "gl-matrix": "^3.0.0",
     "math.gl": "^3.1.2",

modules/core/src/lib/layer.js

@@ -97,7 +97,7 @@ const defaultProps = {
   // Selection/Highlighting
   highlightedObjectIndex: null,
   autoHighlight: false,
-  highlightColor: {type: 'color', value: [0, 0, 128, 128]}
+  highlightColor: {type: 'accessor', value: [0, 0, 128, 128]}
 };
 
 export default class Layer extends Component {
@@ -757,9 +757,9 @@ export default class Layer extends Component {
       if (!autoHighlight) {
         parameters.pickingSelectedColor = null;
       }
-      // TODO - fix in luma?
-      highlightColor[3] = highlightColor[3] || 255;
-      parameters.pickingHighlightColor = highlightColor;
+      if (Array.isArray(highlightColor)) {
+        parameters.pickingHighlightColor = highlightColor;
+      }
 
       // highlightedObjectIndex will overwrite any settings from auto highlighting.
       if (Number.isInteger(highlightedObjectIndex)) {

modules/core/src/lib/picking/pick-info.js

@@ -111,9 +111,14 @@ export function processPickInfo({
     }
 
     if (mode === 'hover' && layer.props.autoHighlight) {
-      layer.setModuleParameters({
+      const pickingModuleParameters = {
         pickingSelectedColor: pickedLayer === layer ? pickedColor : null
-      });
+      };
+      const {highlightColor} = layer.props;
+      if (pickedLayer === layer && typeof highlightColor === 'function') {
+        pickingModuleParameters.pickingHighlightColor = highlightColor(info);
+      }
+      layer.setModuleParameters(pickingModuleParameters);
       // setModuleParameters does not trigger redraw
       layer.setNeedsRedraw();
     }

modules/extensions/package.json

@@ -30,7 +30,7 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env.dev"
   },
   "dependencies": {
-    "@luma.gl/shadertools": "^8.1.0"
+    "@luma.gl/shadertools": "^8.1.2"
   },
   "peerDependencies": {
     "@deck.gl/core": "^8.0.0"

modules/jupyter-widget/package.json

@@ -38,7 +38,7 @@
     "@loaders.gl/3d-tiles": "^2.1.1",
     "@loaders.gl/core": "^2.1.1",
     "@loaders.gl/csv": "^2.1.1",
-    "@luma.gl/constants": "^8.1.0",
+    "@luma.gl/constants": "^8.1.2",
     "mapbox-gl": "^1.2.1"
   },
   "jupyterlab": {

modules/mesh-layers/package.json

@@ -33,7 +33,7 @@
     "@deck.gl/core": "^8.0.0"
   },
   "dependencies": {
-    "@luma.gl/experimental": "^8.1.0",
-    "@luma.gl/shadertools": "^8.1.0"
+    "@luma.gl/experimental": "^8.1.2",
+    "@luma.gl/shadertools": "^8.1.2"
   }
 }

modules/test-utils/package.json

@@ -25,8 +25,8 @@
   ],
   "peerDependencies": {
     "@deck.gl/core": "^8.0.0",
-    "@luma.gl/test-utils": "^8.1.0",
-    "@luma.gl/webgl": "^8.1.0",
+    "@luma.gl/test-utils": "^8.1.2",
+    "@luma.gl/webgl": "^8.1.2",
     "@probe.gl/test-utils": "^3.2.1"
   },
   "scripts": {}

package.json

@@ -43,8 +43,8 @@
   "devDependencies": {
     "@loaders.gl/csv": "^2.1.1",
     "@loaders.gl/polyfills": "^2.1.1",
-    "@luma.gl/engine": "^8.1.0",
-    "@luma.gl/test-utils": "^8.1.0",
+    "@luma.gl/engine": "^8.1.2",
+    "@luma.gl/test-utils": "^8.1.2",
     "@probe.gl/bench": "^3.2.1",
     "@probe.gl/test-utils": "^3.2.1",
     "babel-loader": "^8.0.0",

test/modules/core/lib/picking.spec.js

@@ -33,6 +33,14 @@ const testLayer = new ScatterplotLayer({
   autoHighlight: true
 });
 
+const testLayerWithCallback = new ScatterplotLayer({
+  id: 'test-layer-with-callback',
+  data: ['a', 'b'],
+  getPosition: d => [0, 0],
+  autoHighlight: true,
+  highlightColor: ({object}) => (object === 'b' ? [255, 0, 0] : [0, 255, 0])
+});
+
 const testCompositeLayer = new GeoJsonLayer({
   id: 'test-composite-layer',
   data: [{type: 'Feature', geometry: {type: 'Point', coordinates: [0, 0]}}]
@@ -49,16 +57,27 @@ const parameters = {
       height: 200
     })
   ],
-  layers: [testLayer, testCompositeLayer],
+  layers: [testLayer, testLayerWithCallback, testCompositeLayer],
   x: 100,
   y: 100,
   deviceX: 200,
   deviceY: 200,
   pixelRatio: 2
 };
 
+function validateUniforms(actual, expected) {
+  for (const key in expected) {
+    if (!equals(actual[key], expected[key])) {
+      return {key, expected: expected[key], actual: actual[key]};
+    }
+  }
+  return null;
+}
+
+/* eslint-disable max-statements */
 test('processPickInfo', t => {
   testInitializeLayer({layer: testLayer});
+  testInitializeLayer({layer: testLayerWithCallback});
   testInitializeLayer({layer: testCompositeLayer});
 
   const TEST_CASES = [
@@ -95,6 +114,45 @@ test('processPickInfo', t => {
       lastPickedInfo: {layerId: 'test-layer', index: 1},
       testLayerUniforms: {picking_uSelectedColorValid: 1, picking_uSelectedColor: [2, 0, 0]}
     },
+    {
+      pickInfo: {
+        pickedColor: [1, 0, 0, 0],
+        pickedLayer: testLayerWithCallback,
+        pickedObjectIndex: 0
+      },
+      size: 3,
+      info: {
+        layer: testLayerWithCallback,
+        object: 'a',
+        index: 0,
+        picked: true,
+        x: 100,
+        coordinate: [-122, 38]
+      },
+      lastPickedInfo: {layerId: 'test-layer-with-callback', index: 0},
+      testLayerUniforms: {picking_uSelectedColorValid: 0},
+      currentLayerUniforms: {
+        picking_uSelectedColorValid: 1,
+        picking_uSelectedColor: [1, 0, 0],
+        picking_uHighlightColor: [0, 1, 0, 1]
+      }
+    },
+    {
+      pickInfo: {
+        pickedColor: [2, 0, 0, 0],
+        pickedLayer: testLayerWithCallback,
+        pickedObjectIndex: 1
+      },
+      size: 2,
+      info: {layer: testLayerWithCallback, object: 'b'},
+      lastPickedInfo: {layerId: 'test-layer-with-callback', index: 1},
+      testLayerUniforms: {picking_uSelectedColorValid: 0},
+      currentLayerUniforms: {
+        picking_uSelectedColorValid: 1,
+        picking_uSelectedColor: [2, 0, 0],
+        picking_uHighlightColor: [1, 0, 0, 1]
+      }
+    },
     {
       pickInfo: {
         pickedColor: [1, 0, 0, 0],
@@ -115,6 +173,7 @@ test('processPickInfo', t => {
   parameters.lastPickedInfo = lastPickedInfo;
 
   const testLayerUniforms = testLayer.getModels()[0].getUniforms();
+  let currentLayerUniforms;
 
   for (const testCase of TEST_CASES) {
     parameters.pickInfo = testCase.pickInfo;
@@ -134,16 +193,18 @@ test('processPickInfo', t => {
     for (const key in testCase.lastPickedInfo) {
       t.deepEqual(lastPickedInfo[key], testCase.lastPickedInfo[key], `lastPickedInfo.${key}`);
     }
-    for (const key in testCase.testLayerUniforms) {
-      t.deepEqual(
-        testLayerUniforms[key],
-        testCase.testLayerUniforms[key],
-        `testLayerUniforms.${key}`
+    t.notOk(validateUniforms(testLayerUniforms, testCase.testLayerUniforms), 'testLayerUniforms');
+    if (testCase.currentLayerUniforms) {
+      currentLayerUniforms = testCase.pickInfo.pickedLayer.getModels()[0].getUniforms();
+      t.notOk(
+        validateUniforms(currentLayerUniforms, testCase.currentLayerUniforms),
+        'currentLayerUniforms'
       );
     }
   }
 
   testLayer._finalize();
+  testLayerWithCallback._finalize();
   testCompositeLayer._finalize();
 
   t.end();

yarn.lock

@@ -1671,82 +1671,82 @@
     "@math.gl/geospatial" "^3.1.2"
     "@probe.gl/stats" "^3.2.1"
 
-"@luma.gl/constants@8.1.0", "@luma.gl/constants@^8.1.0":
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/@luma.gl/constants/-/constants-8.1.0.tgz#ca69f5439ce173c1d8db38e9058612e046e99588"
-  integrity sha512-mKd3FKkvr17/MdrFgtVAMddTiBwgAtAtXx3XCx6bpR1nJg39f7j7MnrFB3omu/twISLWLxv9GqIo+yxuO5hnhw==
+"@luma.gl/constants@8.1.2", "@luma.gl/constants@^8.1.2":
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/@luma.gl/constants/-/constants-8.1.2.tgz#729fb10ba6dc6946ccb2745f4b4d22c2f4b021d7"
+  integrity sha512-xhEPc4U8HFo8qDtPqu8wB9/HuYOqMYH9JfEWouj4wn7CXbGApoOpmJemwHwQtnoEQ+XLwsDy9ihHK+2uwYt+fQ==
 
 "@luma.gl/constants@^8.0.0":
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/@luma.gl/constants/-/constants-8.0.3.tgz#5418bc121f2d2b477e94df1170702f7563ee1b91"
   integrity sha512-Ps89hhaNGyseXDECnSNWbDARP3n1WOttoUnci2BL3O6Od7IIzkuV4HeoI3wsH5Zyyf9/3UBFaFwDnfnfK7E0TA==
 
-"@luma.gl/core@^8.1.0":
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/@luma.gl/core/-/core-8.1.0.tgz#be1e1225ee442cfad1e604e86eb555d049bc5db3"
-  integrity sha512-zZwbO5tledK032jFBKA5zh6EG42bgocjc8sqpSFVrVyCXYlG6LMBsHQf7fEqpM/vUuQWdLqCvM3NsLzHrB97rA==
+"@luma.gl/core@^8.1.2":
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/@luma.gl/core/-/core-8.1.2.tgz#9d0b3c50b3aaf86adcef0318191611ba32a05f82"
+  integrity sha512-l3yovFtqpY4LCRj0LRJFXv4fnC8tVGoEYpTPbt+wAW2yal8CGfAlODpd7h176yl+R/upq5PqX108/2G2NBk22Q==
   dependencies:
     "@babel/runtime" "^7.0.0"
-    "@luma.gl/constants" "8.1.0"
-    "@luma.gl/engine" "8.1.0"
-    "@luma.gl/shadertools" "8.1.0"
-    "@luma.gl/webgl" "8.1.0"
+    "@luma.gl/constants" "8.1.2"
+    "@luma.gl/engine" "8.1.2"
+    "@luma.gl/shadertools" "8.1.2"
+    "@luma.gl/webgl" "8.1.2"
 
-"@luma.gl/engine@8.1.0", "@luma.gl/engine@^8.1.0":
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/@luma.gl/engine/-/engine-8.1.0.tgz#6128e1a01f7a6e9e0b5bdac4bdf8665854e5c103"
-  integrity sha512-szBn9I7ipsNSldotCaOGdv8T0/2MNZwzS7yTqzqIvKe3l1TbsLVBC0BWbHkH82BXlIedI6iPQ/dPVn/jVYljIQ==
+"@luma.gl/engine@8.1.2", "@luma.gl/engine@^8.1.2":
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/@luma.gl/engine/-/engine-8.1.2.tgz#0874378efc30c392a6b0182dd57a9eeed45ee110"
+  integrity sha512-uEJQSpZfQvR3pSgS9/7aXKAFOa46NYHpUBByTO0JK719t/+412q9wqi+cYe79A02QzYuwRFdojOQ1PuoVpNN/Q==
   dependencies:
     "@babel/runtime" "^7.0.0"
-    "@luma.gl/constants" "8.1.0"
-    "@luma.gl/gltools" "8.1.0"
-    "@luma.gl/shadertools" "8.1.0"
-    "@luma.gl/webgl" "8.1.0"
+    "@luma.gl/constants" "8.1.2"
+    "@luma.gl/gltools" "8.1.2"
+    "@luma.gl/shadertools" "8.1.2"
+    "@luma.gl/webgl" "8.1.2"
     math.gl "^3.1.3"
     probe.gl "^3.2.1"
 
-"@luma.gl/experimental@^8.1.0":
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/@luma.gl/experimental/-/experimental-8.1.0.tgz#2c904ff67fe784bac5652f0002afdf1402bf1655"
-  integrity sha512-LXUiBEX7rmWyBEAckIcMuGaQNgwaMsrJfgX54ddaFyUGK8k1s4ze00lOnbrSE7VQ081EgA6Mu0pte2Tiz9xziA==
+"@luma.gl/experimental@^8.1.2":
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/@luma.gl/experimental/-/experimental-8.1.2.tgz#a7b6def707effde5c757fa7cdfd7e839dcdee19b"
+  integrity sha512-HLDvr30PC1J4UBmeOLFFdNp9DSAX/mMHW64euno4P2ojfngU9BKzI0lHz36A5c+yXogrenD2WqO5VK/TrhQOYw==
   dependencies:
     "@loaders.gl/images" "^2.1.1"
-    "@luma.gl/constants" "8.1.0"
+    "@luma.gl/constants" "8.1.2"
     earcut "^2.0.6"
     math.gl "^3.1.3"
 
-"@luma.gl/gltools@8.1.0":
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/@luma.gl/gltools/-/gltools-8.1.0.tgz#8c5958c22eab7379b90ebf6f8f78bc81b7fe851b"
-  integrity sha512-+6k/++mJRcsJMqts90Oabap6+MDnw4Rf3G+eIZ6gI6oH4NSrLu+kY2KAKycQwoljQ4zVwLRcPydlpcPMJx7zhg==
+"@luma.gl/gltools@8.1.2":
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/@luma.gl/gltools/-/gltools-8.1.2.tgz#cf169322b573a1e0ae3390061da40b397b7e15e6"
+  integrity sha512-I8J+7bEm8ucfhoKlHtQhyaYF3NyGmTeYYMRNq9h8hbGQko4ztJBUWYKzBaEk49RxcejXhCv1RDaPCFLevXM2sQ==
   dependencies:
     "@babel/runtime" "^7.0.0"
-    "@luma.gl/constants" "8.1.0"
+    "@luma.gl/constants" "8.1.2"
     probe.gl "^3.2.1"
 
-"@luma.gl/shadertools@8.1.0", "@luma.gl/shadertools@^8.1.0":
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/@luma.gl/shadertools/-/shadertools-8.1.0.tgz#4cf11d2349426dbbfdec0fc9e8fba7a20e931193"
-  integrity sha512-RCKaAk5tyDdiUQJciMIIuMYH2fGnzvhwbIeQV1/9oLDndkjGZCTFkLgvQnA/roZzy84QvoRoNn1FFc1XEvwwYg==
+"@luma.gl/shadertools@8.1.2", "@luma.gl/shadertools@^8.1.2":
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/@luma.gl/shadertools/-/shadertools-8.1.2.tgz#e972a7f3e30ed06662780db5bd4f25f616203c11"
+  integrity sha512-8CCKs7PMP7vYg9RbNmfBUqYrAyWTrEnUJz481/npeGVjKKuGN8tSksht//sSKmryEcT/WqairOBxpgaVPDFf+w==
   dependencies:
     "@babel/runtime" "^7.0.0"
     math.gl "^3.1.3"
 
-"@luma.gl/test-utils@^8.1.0":
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/@luma.gl/test-utils/-/test-utils-8.1.0.tgz#1ae427da6702fd519944d458290c0b0f18d48505"
-  integrity sha512-HYgyC76tS8muqptCAL+BPjaC/pC8FccIdbZUyu+42D4L8Xtr179+t4OVU9pEep4UqARB3ZRhHUV6U3Yp8suC7w==
+"@luma.gl/test-utils@^8.1.2":
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/@luma.gl/test-utils/-/test-utils-8.1.2.tgz#960ce4b402a6134386d76f0111e64897a314acab"
+  integrity sha512-zO1xSEhm3qVtwTzmIEULJX6FU9SwtGHtCChRZtVcKxyWdVDH2uvoqX4hZOMXNpv+tHc8qXA53j2p77cryivFSA==
   dependencies:
     probe.gl "^3.2.1"
 
-"@luma.gl/webgl@8.1.0":
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/@luma.gl/webgl/-/webgl-8.1.0.tgz#58221b0f08f89268d1b7940fcddee93b56482992"
-  integrity sha512-M9Wpmz9zMPHOJghq76KJUDweAdyPFpf18Oi+LhlLLXoHURxxPz6edJXLO4FOXm5DbvG3oCeWkOnfTKSL9P2M0w==
+"@luma.gl/webgl@8.1.2":
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/@luma.gl/webgl/-/webgl-8.1.2.tgz#ae699db5b231ae4cdd31366b7f303ef94ed94702"
+  integrity sha512-XK26eOX1nkH3D/dubSxJTX/nHfIugOm4a4zT4jHKnyWQNi0WU07S1KBnYVXRRWvu3KaHR4wsT/O5R573CiyDGw==
   dependencies:
     "@babel/runtime" "^7.0.0"
-    "@luma.gl/constants" "8.1.0"
-    "@luma.gl/gltools" "8.1.0"
+    "@luma.gl/constants" "8.1.2"
+    "@luma.gl/gltools" "8.1.2"
     probe.gl "^3.2.1"
 
 "@mapbox/geojson-area@0.2.2":