forked from elastic/kibana
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Maps] add text halo color and width style properties (elastic#53827)
* [Maps] add text halo color and width style properties * fix jest test * update for new editor UI * add removed styling * get halo size from label size * fix label border size with dynamic label size * clean up * fix jest test * fix jest test Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
- Loading branch information
1 parent
9aa8e5e
commit 1953411
Showing
12 changed files
with
239 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
65 changes: 65 additions & 0 deletions
65
...aps/public/layers/styles/vector/components/label/vector_style_label_border_size_editor.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License; | ||
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
|
|
||
| import { EuiFormRow, EuiSelect } from '@elastic/eui'; | ||
| import { LABEL_BORDER_SIZES, VECTOR_STYLES } from '../../vector_style_defaults'; | ||
| import { getVectorStyleLabel } from '../get_vector_style_label'; | ||
| import { i18n } from '@kbn/i18n'; | ||
|
|
||
| const options = [ | ||
| { | ||
| value: LABEL_BORDER_SIZES.NONE, | ||
| text: i18n.translate('xpack.maps.styles.labelBorderSize.noneLabel', { | ||
| defaultMessage: 'None', | ||
| }), | ||
| }, | ||
| { | ||
| value: LABEL_BORDER_SIZES.SMALL, | ||
| text: i18n.translate('xpack.maps.styles.labelBorderSize.smallLabel', { | ||
| defaultMessage: 'Small', | ||
| }), | ||
| }, | ||
| { | ||
| value: LABEL_BORDER_SIZES.MEDIUM, | ||
| text: i18n.translate('xpack.maps.styles.labelBorderSize.mediumLabel', { | ||
| defaultMessage: 'Medium', | ||
| }), | ||
| }, | ||
| { | ||
| value: LABEL_BORDER_SIZES.LARGE, | ||
| text: i18n.translate('xpack.maps.styles.labelBorderSize.largeLabel', { | ||
| defaultMessage: 'Large', | ||
| }), | ||
| }, | ||
| ]; | ||
|
|
||
| export function VectorStyleLabelBorderSizeEditor({ handlePropertyChange, styleProperty }) { | ||
| function onChange(e) { | ||
| const styleDescriptor = { | ||
| options: { size: e.target.value }, | ||
| }; | ||
| handlePropertyChange(styleProperty.getStyleName(), styleDescriptor); | ||
| } | ||
|
|
||
| return ( | ||
| <EuiFormRow | ||
| label={getVectorStyleLabel(VECTOR_STYLES.LABEL_BORDER_SIZE)} | ||
| display="columnCompressed" | ||
| > | ||
| <EuiSelect | ||
| options={options} | ||
| value={styleProperty.getOptions().size} | ||
| onChange={onChange} | ||
| aria-label={i18n.translate('xpack.maps.styles.labelBorderSizeSelect.ariaLabel', { | ||
| defaultMessage: 'Select label border size', | ||
| })} | ||
| compressed | ||
| /> | ||
| </EuiFormRow> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
50 changes: 50 additions & 0 deletions
50
.../legacy/plugins/maps/public/layers/styles/vector/properties/label_border_size_property.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License; | ||
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| import _ from 'lodash'; | ||
| import { AbstractStyleProperty } from './style_property'; | ||
| import { DEFAULT_LABEL_SIZE, LABEL_BORDER_SIZES } from '../vector_style_defaults'; | ||
|
|
||
| const SMALL_SIZE = 1 / 16; | ||
| const MEDIUM_SIZE = 1 / 8; | ||
| const LARGE_SIZE = 1 / 5; // halo of 1/4 is just a square. Use smaller ratio to preserve contour on letters | ||
|
|
||
| function getWidthRatio(size) { | ||
| switch (size) { | ||
| case LABEL_BORDER_SIZES.LARGE: | ||
| return LARGE_SIZE; | ||
| case LABEL_BORDER_SIZES.MEDIUM: | ||
| return MEDIUM_SIZE; | ||
| default: | ||
| return SMALL_SIZE; | ||
| } | ||
| } | ||
|
|
||
| export class LabelBorderSizeProperty extends AbstractStyleProperty { | ||
| constructor(options, styleName, labelSizeProperty) { | ||
| super(options, styleName); | ||
| this._labelSizeProperty = labelSizeProperty; | ||
| } | ||
|
|
||
| syncLabelBorderSizeWithMb(mbLayerId, mbMap) { | ||
| const widthRatio = getWidthRatio(this.getOptions().size); | ||
|
|
||
| if (this.getOptions().size === LABEL_BORDER_SIZES.NONE) { | ||
| mbMap.setPaintProperty(mbLayerId, 'text-halo-width', 0); | ||
| } else if (this._labelSizeProperty.isDynamic() && this._labelSizeProperty.isComplete()) { | ||
| const labelSizeExpression = this._labelSizeProperty.getMbSizeExpression(); | ||
| mbMap.setPaintProperty(mbLayerId, 'text-halo-width', [ | ||
| 'max', | ||
| ['*', labelSizeExpression, widthRatio], | ||
| 1, | ||
| ]); | ||
| } else { | ||
| const labelSize = _.get(this._labelSizeProperty.getOptions(), 'size', DEFAULT_LABEL_SIZE); | ||
| const labelBorderSize = Math.max(labelSize * widthRatio, 1); | ||
| mbMap.setPaintProperty(mbLayerId, 'text-halo-width', labelBorderSize); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.