[feat] H3 Layer: default text label anchor to middle position (#2252)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com> Co-authored-by: Jacob Wasilkowski <4933392+jwasilgeo@users.noreply.github.com>
keplergl · Jun 13, 2023 · 4a659e8 · 4a659e8
1 parent acd05e9
commit 4a659e8
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/src/layers/src/h3-hexagon-layer/h3-hexagon-layer.ts b/src/layers/src/h3-hexagon-layer/h3-hexagon-layer.ts
@@ -45,6 +45,7 @@ import {
   CHANNEL_SCALES,
   HIGHLIGH_COLOR_3D,
   DEFAULT_COLOR_UI,
+  DEFAULT_TEXT_LABEL,
   LAYER_VIS_CONFIGS,
   ColorRange
 } from '@kepler.gl/constants';
@@ -275,7 +276,15 @@ export default class HexagonIdLayer extends Layer {
       // add radius visual channel
       coverageField: null,
       coverageDomain: [0, 1],
-      coverageScale: 'linear'
+      coverageScale: 'linear',
+
+      // modify default textLabel anchor position to be appropriate for a hexagon shape
+      textLabel: [
+        {
+          ...DEFAULT_TEXT_LABEL,
+          anchor: 'middle'
+        }
+      ]
     };
   }
 

diff --git a/src/reducers/src/vis-state-updaters.ts b/src/reducers/src/vis-state-updaters.ts
@@ -412,7 +412,7 @@ export function layerSetIsValidUpdater(
   return state;
 }
 
-function addOrRemoveTextLabels(newFields, textLabel) {
+function addOrRemoveTextLabels(newFields, textLabel, defaultTextLabel = DEFAULT_TEXT_LABEL) {
   let newTextLabel = textLabel.slice();
 
   const currentFields = textLabel.map(tl => tl.field && tl.field.name).filter(d => d);
@@ -422,13 +422,13 @@ function addOrRemoveTextLabels(newFields, textLabel) {
 
   // delete
   newTextLabel = newTextLabel.filter(tl => tl.field && !deleteFields.includes(tl.field.name));
-  newTextLabel = !newTextLabel.length ? [DEFAULT_TEXT_LABEL] : newTextLabel;
+  newTextLabel = !newTextLabel.length ? [defaultTextLabel] : newTextLabel;
 
   // add
   newTextLabel = [
     ...newTextLabel.filter(tl => tl.field),
     ...addFields.map(af => ({
-      ...DEFAULT_TEXT_LABEL,
+      ...defaultTextLabel,
       field: af
     }))
   ];
@@ -465,14 +465,19 @@ export function layerTextLabelChangeUpdater(
   const {oldLayer, idx, prop, value} = action;
   const {textLabel} = oldLayer.config;
 
+  // when adding a new empty text label,
+  // rely on the layer's default config, or use the constant DEFAULT_TEXT_LABEL
+  const defaultTextLabel =
+    oldLayer.getDefaultLayerConfig({dataId: ''})?.textLabel?.[0] ?? DEFAULT_TEXT_LABEL;
+
   let newTextLabel = textLabel.slice();
   if (!textLabel[idx] && idx === textLabel.length) {
     // if idx is set to length, add empty text label
-    newTextLabel = [...textLabel, DEFAULT_TEXT_LABEL];
+    newTextLabel = [...textLabel, defaultTextLabel];
   }
 
   if (idx === 'all' && prop === 'fields') {
-    newTextLabel = addOrRemoveTextLabels(value, textLabel);
+    newTextLabel = addOrRemoveTextLabels(value, textLabel, defaultTextLabel);
   } else {
     newTextLabel = updateTextLabelPropAndValue(idx, prop, value, newTextLabel);
   }

diff --git a/test/browser/layer-tests/h3-hexagon-layer-specs.js b/test/browser/layer-tests/h3-hexagon-layer-specs.js
@@ -334,7 +334,7 @@ test('#H3Layer -> renderLayer', t => {
             color: [255, 255, 255],
             size: 18,
             offset: [0, 0],
-            anchor: 'start',
+            anchor: 'middle',
             alignment: 'center'
           }
         ];