[feat] H3 Layer separate layer opacity into unique fill opacity and s…

…troke opacity (#2261)

src/components/src/side-panel/layer-panel/layer-configurator.tsx

@@ -490,12 +490,12 @@ export default function LayerConfiguratorFactory(
     }) {
       return (
         <StyledLayerVisualConfigurator>
-          {/* Fill Color */}
+          {/* Fill */}
           <LayerConfigGroup
             {...layer.visConfigSettings.filled}
             {...visConfiguratorProps}
-            collapsible
             label={'layer.fillColor'}
+            collapsible
           >
             {layer.config.colorField ? (
               <LayerColorRangeSelector {...visConfiguratorProps} />
@@ -507,10 +507,15 @@ export default function LayerConfiguratorFactory(
                 channel={layer.visualChannels.color}
                 {...layerChannelConfigProps}
               />
+              <VisConfigSlider
+                {...layer.visConfigSettings.opacity}
+                {...visConfiguratorProps}
+                disabled={!layer.config.visConfig.filled}
+              />
             </ConfigGroupCollapsibleContent>
           </LayerConfigGroup>
 
-          {/* Outline Color */}
+          {/* Outline */}
           <LayerConfigGroup
             {...layer.visConfigSettings.outline}
             {...visConfiguratorProps}
@@ -530,6 +535,11 @@ export default function LayerConfiguratorFactory(
               />
             )}
             <ConfigGroupCollapsibleContent>
+              <VisConfigSlider
+                {...layer.visConfigSettings.strokeOpacity}
+                {...visConfiguratorProps}
+                disabled={!layer.config.visConfig.outline}
+              />
               <VisConfigSlider
                 {...layer.visConfigSettings.thickness}
                 {...visConfiguratorProps}
@@ -538,15 +548,6 @@ export default function LayerConfiguratorFactory(
             </ConfigGroupCollapsibleContent>
           </LayerConfigGroup>
 
-          {/* Opacity */}
-          <LayerConfigGroup label={layer.visConfigSettings.opacity.label}>
-            <VisConfigSlider
-              {...layer.visConfigSettings.opacity}
-              {...visConfiguratorProps}
-              label={false}
-            />
-          </LayerConfigGroup>
-
           {/* Coverage */}
           <LayerConfigGroup label={'layer.coverage'} collapsible>
             {!layer.config.coverageField ? (

src/deckgl-layers/src/column-layer/enhanced-column-layer.ts

@@ -18,7 +18,10 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {ColumnLayer} from '@deck.gl/layers';
+import {UNIT} from '@deck.gl/core';
+import {ColumnLayer, ColumnLayerProps} from '@deck.gl/layers/typed';
+import GL from '@luma.gl/constants';
+
 import {editShader} from '../';
 
 function addInstanceCoverage(vs) {
@@ -38,8 +41,12 @@ function addInstanceCoverage(vs) {
   );
 }
 
+type EnhancedColumnLayerProps = ColumnLayerProps<any> & {
+  strokeOpacity: any;
+};
+
 // TODO: export all deck.gl layers from kepler.gl
-class EnhancedColumnLayer extends ColumnLayer<any> {
+class EnhancedColumnLayer extends ColumnLayer<any, EnhancedColumnLayerProps> {
   getShaders() {
     const shaders = super.getShaders();
 
@@ -50,12 +57,78 @@ class EnhancedColumnLayer extends ColumnLayer<any> {
   }
 
   initializeState() {
-    super.initializeState(undefined);
+    super.initializeState();
 
-    this.getAttributeManager().addInstanced({
+    this.getAttributeManager()?.addInstanced({
       instanceCoverage: {size: 1, accessor: 'getCoverage'}
     });
   }
+
+  draw({uniforms}) {
+    const {
+      lineWidthUnits,
+      lineWidthScale,
+      lineWidthMinPixels,
+      lineWidthMaxPixels,
+      radiusUnits,
+      elevationScale,
+      extruded,
+      filled,
+      stroked,
+      strokeOpacity,
+      wireframe,
+      offset,
+      coverage,
+      radius,
+      angle
+    } = this.props;
+    const {model, fillVertexCount, wireframeVertexCount, edgeDistance} = this.state;
+
+    model.setUniforms(uniforms).setUniforms({
+      radius,
+      angle: (angle / 180) * Math.PI,
+      offset,
+      extruded,
+      stroked,
+      coverage,
+      elevationScale,
+      edgeDistance,
+      radiusUnits: UNIT[radiusUnits],
+      widthUnits: UNIT[lineWidthUnits],
+      widthScale: lineWidthScale,
+      widthMinPixels: lineWidthMinPixels,
+      widthMaxPixels: lineWidthMaxPixels
+    });
+
+    // When drawing 3d: draw wireframe first so it doesn't get occluded by depth test
+    if (extruded && wireframe) {
+      model.setProps({isIndexed: true});
+      model
+        .setVertexCount(wireframeVertexCount)
+        .setDrawMode(GL.LINES)
+        .setUniforms({isStroke: true})
+        .draw();
+    }
+    if (filled) {
+      model.setProps({isIndexed: false});
+      model
+        .setVertexCount(fillVertexCount)
+        .setDrawMode(GL.TRIANGLE_STRIP)
+        .setUniforms({isStroke: false})
+        .draw();
+    }
+    // When drawing 2d: draw fill before stroke so that the outline is always on top
+    if (!extruded && stroked) {
+      model.setProps({isIndexed: false});
+      // The width of the stroke is achieved by flattening the side of the cylinder.
+      // Skip the last 1/3 of the vertices which is the top.
+      model
+        .setVertexCount((fillVertexCount * 2) / 3)
+        .setDrawMode(GL.TRIANGLE_STRIP)
+        .setUniforms({isStroke: true, opacity: strokeOpacity})
+        .draw();
+    }
+  }
 }
 
 EnhancedColumnLayer.layerName = 'EnhancedColumnLayer';

src/layers/src/h3-hexagon-layer/h3-hexagon-layer.ts

@@ -67,6 +67,7 @@ export type HexagonIdLayerColumnsConfig = {
 
 export type HexagonIdLayerVisConfigSettings = {
   opacity: VisConfigNumber;
+  strokeOpacity: VisConfigNumber;
   colorRange: VisConfigColorRange;
   coverage: VisConfigNumber;
   enable3d: VisConfigBoolean;
@@ -81,6 +82,7 @@ export type HexagonIdLayerVisConfigSettings = {
 
 export type HexagonIdLayerVisConfig = {
   opacity: number;
+  strokeOpacity: number;
   colorRange: ColorRange;
   coverage: number;
   enable3d: boolean;
@@ -115,7 +117,8 @@ export const defaultElevation = 500;
 export const defaultCoverage = 1;
 
 export const HexagonIdVisConfigs: {
-  opacity: 'opacity';
+  opacity: VisConfigNumber;
+  strokeOpacity: VisConfigNumber;
   colorRange: 'colorRange';
   filled: VisConfigBoolean;
   outline: 'outline';
@@ -129,15 +132,26 @@ export const HexagonIdVisConfigs: {
   elevationScale: 'elevationScale';
   enableElevationZoomFactor: 'enableElevationZoomFactor';
 } = {
-  opacity: 'opacity',
   colorRange: 'colorRange',
   filled: {
     ...LAYER_VIS_CONFIGS.filled,
     defaultValue: true
   },
+  opacity: {
+    ...LAYER_VIS_CONFIGS.opacity,
+    label: 'Fill Opacity',
+    range: [0, 1],
+    property: 'opacity'
+  },
   outline: 'outline',
   strokeColor: 'strokeColor',
   strokeColorRange: 'strokeColorRange',
+  strokeOpacity: {
+    ...LAYER_VIS_CONFIGS.opacity,
+    label: 'Stroke Opacity',
+    range: [0, 1],
+    property: 'strokeOpacity'
+  },
   thickness: 'thickness',
   coverage: 'coverage',
   enable3d: 'enable3d',
@@ -432,7 +446,8 @@ export default class HexagonIdLayer extends Layer {
           'hexagon-cell': {
             type: EnhancedColumnLayer,
             getCoverage: data.getCoverage,
-            updateTriggers: columnLayerTriggers
+            updateTriggers: columnLayerTriggers,
+            strokeOpacity: visConfig.strokeOpacity
           }
         }
       }),

src/localization/src/translations/en.ts

@@ -464,6 +464,7 @@ export default {
     colorScale: 'Color Scale',
     sizeScale: 'Size Scale',
     strokeScale: 'Stroke Scale',
+    strokeColorScale: 'Stroke Color Scale',
     scale: 'Scale'
   },
   fileUploader: {

test/fixtures/test-hex-id-data.js

@@ -395,6 +395,7 @@ mergedH3Layer.config = {
       category: 'Uber',
       colors: ['#5A1846', '#900C3F', '#C70039', '#E3611C', '#F1920E', '#FFC300']
     },
+    strokeOpacity: 0.8,
     thickness: 2,
     coverage: 1,
     sizeRange: [0, 500],