diff --git a/src/layers/src/h3-hexagon-layer/h3-hexagon-layer.ts b/src/layers/src/h3-hexagon-layer/h3-hexagon-layer.ts index aa9e20acc6..293aa475a8 100644 --- 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 index 7f01072ac5..ff90248dd5 100644 --- 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 index abd19f1ee8..dd823ab941 100644 --- 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' } ];