From c9de8dd5dd05c5129c4ee8cc5a3d21f351818ee5 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Fri, 27 Dec 2019 11:19:06 -0700 Subject: [PATCH 1/9] [Maps] add text halo color and width style properties --- .../components/get_vector_style_label.js | 8 ++++ .../vector/components/vector_style_editor.js | 19 ++++++++ .../properties/dynamic_color_property.js | 5 +++ .../properties/dynamic_size_property.js | 5 +++ .../properties/static_color_property.js | 4 ++ .../vector/properties/static_size_property.js | 4 ++ .../layers/styles/vector/vector_style.js | 13 +++++- .../styles/vector/vector_style_defaults.js | 45 +++++++++++++++++-- 8 files changed, 98 insertions(+), 5 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/get_vector_style_label.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/get_vector_style_label.js index 325fc28f9205..0d87a08d7383 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/get_vector_style_label.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/get_vector_style_label.js @@ -42,6 +42,14 @@ export function getVectorStyleLabel(styleName) { return i18n.translate('xpack.maps.styles.vector.labelSizeLabel', { defaultMessage: 'Label size', }); + case VECTOR_STYLES.LABEL_BORDER_COLOR: + return i18n.translate('xpack.maps.styles.vector.labelBorderColorLabel', { + defaultMessage: 'Label border color', + }); + case VECTOR_STYLES.LABEL_BORDER_WIDTH: + return i18n.translate('xpack.maps.styles.vector.labelBorderWidthLabel', { + defaultMessage: 'Label border width', + }); default: return styleName; } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js index 44f630db9d89..83047e5761df 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js @@ -208,6 +208,25 @@ export class VectorStyleEditor extends Component { defaultDynamicStyleOptions={this.state.defaultDynamicProperties.labelSize.options} /> + + + + + + ); } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js index 3961325c3bd5..49059b095b53 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js @@ -52,6 +52,11 @@ export class DynamicColorProperty extends DynamicStyleProperty { mbMap.setPaintProperty(mbLayerId, 'text-opacity', alpha); } + syncLabelBorderColorWithMb(mbLayerId, mbMap) { + const color = this._getMbColor(); + mbMap.setPaintProperty(mbLayerId, 'text-halo-color', color); + } + isCustomColorRamp() { return this._options.useCustomColorRamp; } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js index 78d75dc818d5..eae4d5a0e254 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js @@ -98,6 +98,11 @@ export class DynamicSizeProperty extends DynamicStyleProperty { mbMap.setLayoutProperty(mbLayerId, 'text-size', lineWidth); } + syncLabelBorderWidthWithMb(mbLayerId, mbMap) { + const lineWidth = this._getMbSize(); + mbMap.setPaintProperty(mbLayerId, 'text-halo-width', lineWidth); + } + _getMbSize() { if (this._isSizeDynamicConfigComplete(this._options)) { return this._getMbDataDrivenSize({ diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_color_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_color_property.js index 658eb6a16455..ebe2a322711f 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_color_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_color_property.js @@ -39,4 +39,8 @@ export class StaticColorProperty extends StaticStyleProperty { mbMap.setPaintProperty(mbLayerId, 'text-color', this._options.color); mbMap.setPaintProperty(mbLayerId, 'text-opacity', alpha); } + + syncLabelBorderColorWithMb(mbLayerId, mbMap) { + mbMap.setPaintProperty(mbLayerId, 'text-halo-color', this._options.color); + } } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_size_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_size_property.js index 1584dec99898..c73faf6f6b2f 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_size_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_size_property.js @@ -47,4 +47,8 @@ export class StaticSizeProperty extends StaticStyleProperty { syncLabelSizeWithMb(mbLayerId, mbMap) { mbMap.setLayoutProperty(mbLayerId, 'text-size', this._options.size); } + + syncLabelBorderWidthWithMb(mbLayerId, mbMap) { + mbMap.setPaintProperty(mbLayerId, 'text-halo-width', this._options.size); + } } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js index 9d9764b5fb1f..b45a74c7699e 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js @@ -98,6 +98,14 @@ export class VectorStyle extends AbstractStyle { this._descriptor.properties[VECTOR_STYLES.LABEL_COLOR], VECTOR_STYLES.LABEL_COLOR ); + this._labelBorderWidthStyleProperty = this._makeSizeProperty( + this._descriptor.properties[VECTOR_STYLES.LABEL_BORDER_WIDTH], + VECTOR_STYLES.LABEL_BORDER_WIDTH + ); + this._labelBorderColorStyleProperty = this._makeColorProperty( + this._descriptor.properties[VECTOR_STYLES.LABEL_BORDER_COLOR], + VECTOR_STYLES.LABEL_BORDER_COLOR + ); } _getAllStyleProperties() { @@ -110,6 +118,8 @@ export class VectorStyle extends AbstractStyle { this._labelStyleProperty, this._labelSizeStyleProperty, this._labelColorStyleProperty, + this._labelBorderWidthStyleProperty, + this._labelBorderColorStyleProperty, ]; } @@ -572,7 +582,8 @@ export class VectorStyle extends AbstractStyle { mbMap.setLayoutProperty(textLayerId, 'text-allow-overlap', true); this._labelStyleProperty.syncTextFieldWithMb(textLayerId, mbMap); this._labelColorStyleProperty.syncLabelColorWithMb(textLayerId, mbMap, alpha); - this._labelSizeStyleProperty.syncLabelSizeWithMb(textLayerId, mbMap); + this._labelBorderWidthStyleProperty.syncLabelBorderWidthWithMb(textLayerId, mbMap); + this._labelBorderColorStyleProperty.syncLabelBorderColorWithMb(textLayerId, mbMap); } setMBSymbolPropertiesForPoints({ mbMap, symbolLayerId, alpha }) { diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js index 4bae90c3165f..eee769b83673 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js @@ -27,6 +27,8 @@ export const VECTOR_STYLES = { LABEL_TEXT: 'labelText', LABEL_COLOR: 'labelColor', LABEL_SIZE: 'labelSize', + LABEL_BORDER_COLOR: 'labelBorderColor', + LABEL_BORDER_WIDTH: 'labelBorderWidth', }; export const LINE_STYLES = [VECTOR_STYLES.LINE_COLOR, VECTOR_STYLES.LINE_WIDTH]; @@ -106,6 +108,18 @@ export function getDefaultStaticProperties(mapColors = []) { size: 14, }, }, + [VECTOR_STYLES.LABEL_BORDER_COLOR]: { + type: VectorStyle.STYLE_TYPE.STATIC, + options: { + color: isDarkMode ? '#000000' : '#FFFFFF', + }, + }, + [VECTOR_STYLES.LABEL_BORDER_WIDTH]: { + type: VectorStyle.STYLE_TYPE.STATIC, + options: { + size: 2, + }, + }, }; } @@ -158,7 +172,7 @@ export function getDefaultDynamicProperties() { }, }, [VECTOR_STYLES.ICON_ORIENTATION]: { - type: VectorStyle.STYLE_TYPE.STATIC, + type: VectorStyle.STYLE_TYPE.DYNAMIC, options: { field: undefined, fieldMetaOptions: { @@ -168,13 +182,13 @@ export function getDefaultDynamicProperties() { }, }, [VECTOR_STYLES.LABEL_TEXT]: { - type: VectorStyle.STYLE_TYPE.STATIC, + type: VectorStyle.STYLE_TYPE.DYNAMIC, options: { field: undefined, }, }, [VECTOR_STYLES.LABEL_COLOR]: { - type: VectorStyle.STYLE_TYPE.STATIC, + type: VectorStyle.STYLE_TYPE.DYNAMIC, options: { color: COLOR_GRADIENTS[0].value, field: undefined, @@ -185,7 +199,7 @@ export function getDefaultDynamicProperties() { }, }, [VECTOR_STYLES.LABEL_SIZE]: { - type: VectorStyle.STYLE_TYPE.STATIC, + type: VectorStyle.STYLE_TYPE.DYNAMIC, options: { minSize: DEFAULT_MIN_SIZE, maxSize: DEFAULT_MAX_SIZE, @@ -196,5 +210,28 @@ export function getDefaultDynamicProperties() { }, }, }, + [VECTOR_STYLES.LABEL_BORDER_COLOR]: { + type: VectorStyle.STYLE_TYPE.DYNAMIC, + options: { + color: COLOR_GRADIENTS[0].value, + field: undefined, + fieldMetaOptions: { + isEnabled: true, + sigma: DEFAULT_SIGMA, + }, + }, + }, + [VECTOR_STYLES.LABEL_BORDER_WIDTH]: { + type: VectorStyle.STYLE_TYPE.DYNAMIC, + options: { + minSize: 1, + maxSize: 10, + field: undefined, + fieldMetaOptions: { + isEnabled: true, + sigma: DEFAULT_SIGMA, + }, + }, + }, }; } From 948de75b9830fc74fd3e4e28fff638989178f540 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Fri, 27 Dec 2019 13:50:51 -0700 Subject: [PATCH 2/9] fix jest test --- .../public/layers/styles/vector/vector_style.test.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.test.js index aa0badd5583d..c04fc1df1a88 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.test.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.test.js @@ -102,6 +102,18 @@ describe('getDescriptorWithMissingStylePropsRemoved', () => { }, type: 'STATIC', }, + labelBorderColor: { + options: { + color: '#FFFFFF', + }, + type: 'STATIC', + }, + labelBorderWidth: { + options: { + size: 2, + }, + type: 'STATIC', + }, labelColor: { options: { color: '#000000', From 98f2fd91c248fe0235fc24291e63ff2044262082 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Mon, 6 Jan 2020 12:49:02 -0500 Subject: [PATCH 3/9] update for new editor UI --- .../vector/components/vector_style_editor.js | 26 +++++++++++++------ 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js index 0c8a0949f151..4c37f2db29df 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js @@ -267,20 +267,30 @@ export class VectorStyleEditor extends Component { From 6119f239c2cbee66be4ecd879e07bfa03fab7da6 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Mon, 6 Jan 2020 16:36:00 -0500 Subject: [PATCH 4/9] add removed styling --- .../plugins/maps/public/layers/styles/vector/vector_style.js | 1 + 1 file changed, 1 insertion(+) diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js index 195aa71192c4..57c28605ec24 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js @@ -547,6 +547,7 @@ export class VectorStyle extends AbstractStyle { mbMap.setLayoutProperty(textLayerId, 'text-allow-overlap', true); this._labelStyleProperty.syncTextFieldWithMb(textLayerId, mbMap); this._labelColorStyleProperty.syncLabelColorWithMb(textLayerId, mbMap, alpha); + this._labelSizeStyleProperty.syncLabelSizeWithMb(textLayerId, mbMap); this._labelBorderWidthStyleProperty.syncLabelBorderWidthWithMb(textLayerId, mbMap); this._labelBorderColorStyleProperty.syncLabelBorderColorWithMb(textLayerId, mbMap); } From 0cb97cc6703fd296952c88019f96778b9515260c Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Tue, 7 Jan 2020 11:30:35 -0500 Subject: [PATCH 5/9] get halo size from label size --- .../components/get_vector_style_label.js | 2 +- .../vector_style_label_border_size_editor.js | 62 +++++++++++++++++++ .../vector/components/vector_style_editor.js | 15 ++--- .../properties/dynamic_size_property.js | 11 +--- .../properties/dynamic_style_property.js | 9 ++- .../properties/label_border_size_property.js | 50 +++++++++++++++ .../vector/properties/static_size_property.js | 4 -- .../layers/styles/vector/vector_style.js | 14 +++-- .../styles/vector/vector_style_defaults.js | 35 +++++------ 9 files changed, 151 insertions(+), 51 deletions(-) create mode 100644 x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/vector_style_label_border_size_editor.js create mode 100644 x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/label_border_size_property.js diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/get_vector_style_label.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/get_vector_style_label.js index 0d87a08d7383..16cfd34c95ab 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/get_vector_style_label.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/get_vector_style_label.js @@ -46,7 +46,7 @@ export function getVectorStyleLabel(styleName) { return i18n.translate('xpack.maps.styles.vector.labelBorderColorLabel', { defaultMessage: 'Label border color', }); - case VECTOR_STYLES.LABEL_BORDER_WIDTH: + case VECTOR_STYLES.LABEL_BORDER_SIZE: return i18n.translate('xpack.maps.styles.vector.labelBorderWidthLabel', { defaultMessage: 'Label border width', }); diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/vector_style_label_border_size_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/vector_style_label_border_size_editor.js new file mode 100644 index 000000000000..0ac583b0a70d --- /dev/null +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/vector_style_label_border_size_editor.js @@ -0,0 +1,62 @@ +/* + * 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 VectorStyleLabelHaloSizeEditor({ handlePropertyChange, styleProperty }) { + function onChange(e) { + handlePropertyChange(styleProperty.getStyleName(), { size: e.target.value }); + } + + return ( + + + + ); +} diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js index 4c37f2db29df..fa4beb024f33 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js @@ -12,6 +12,7 @@ import { VectorStyleColorEditor } from './color/vector_style_color_editor'; import { VectorStyleSizeEditor } from './size/vector_style_size_editor'; import { VectorStyleSymbolEditor } from './vector_style_symbol_editor'; import { VectorStyleLabelEditor } from './label/vector_style_label_editor'; +import { VectorStyleLabelHaloSizeEditor } from './label/vector_style_label_border_size_editor'; import { VectorStyle } from '../vector_style'; import { OrientationEditor } from './orientation/orientation_editor'; import { @@ -280,17 +281,9 @@ export class VectorStyleEditor extends Component { /> - diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js index ec60262f9f39..4736e9125d90 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js @@ -5,7 +5,7 @@ */ import { DynamicStyleProperty } from './dynamic_style_property'; -import { getComputedFieldName } from '../style_util'; + import { HALF_LARGE_MAKI_ICON_SIZE, LARGE_MAKI_ICON_SIZE, @@ -76,7 +76,7 @@ export class DynamicSizeProperty extends DynamicStyleProperty { mbMap.setLayoutProperty(symbolLayerId, 'icon-image', `${symbolId}-${iconPixels}`); const halfIconPixels = iconPixels / 2; - const targetName = getComputedFieldName(VECTOR_STYLES.ICON_SIZE, this._options.field.name); + const targetName = this.getComputedFieldName(); // Using property state instead of feature-state because layout properties do not support feature-state mbMap.setLayoutProperty(symbolLayerId, 'icon-size', [ 'interpolate', @@ -113,15 +113,10 @@ export class DynamicSizeProperty extends DynamicStyleProperty { mbMap.setLayoutProperty(mbLayerId, 'text-size', lineWidth); } - syncLabelBorderWidthWithMb(mbLayerId, mbMap) { - const lineWidth = this._getMbSize(); - mbMap.setPaintProperty(mbLayerId, 'text-halo-width', lineWidth); - } - _getMbSize() { if (this._isSizeDynamicConfigComplete(this._options)) { return this._getMbDataDrivenSize({ - targetName: getComputedFieldName(this._styleName, this._options.field.name), + targetName: this.getComputedFieldName(), minSize: this._options.minSize, maxSize: this._options.maxSize, }); diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js index bac3c9658196..4d9cfbe1e53d 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js @@ -8,7 +8,7 @@ import _ from 'lodash'; import { AbstractStyleProperty } from './style_property'; import { DEFAULT_SIGMA } from '../vector_style_defaults'; import { STYLE_TYPE } from '../../../../../common/constants'; -import { scaleValue } from '../style_util'; +import { scaleValue, getComputedFieldName } from '../style_util'; import React from 'react'; import { OrdinalLegend } from './components/ordinal_legend'; import { CategoricalLegend } from './components/categorical_legend'; @@ -31,6 +31,13 @@ export class DynamicStyleProperty extends AbstractStyleProperty { return this._field; } + getComputedFieldName() { + if (!this.isComplete()) { + return null; + } + return getComputedFieldName(this._styleName, this.getField().getName()); + } + isDynamic() { return true; } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/label_border_size_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/label_border_size_property.js new file mode 100644 index 000000000000..ddee315279db --- /dev/null +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/label_border_size_property.js @@ -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 labelSizeKey = this._labelSizeProperty.getComputedFieldName(); + mbMap.setPaintProperty(mbLayerId, 'text-halo-width', [ + 'max', + ['*', ['coalesce', ['get', labelSizeKey], 0], 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); + } + } +} diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_size_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_size_property.js index c73faf6f6b2f..1584dec99898 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_size_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_size_property.js @@ -47,8 +47,4 @@ export class StaticSizeProperty extends StaticStyleProperty { syncLabelSizeWithMb(mbLayerId, mbMap) { mbMap.setLayoutProperty(mbLayerId, 'text-size', this._options.size); } - - syncLabelBorderWidthWithMb(mbLayerId, mbMap) { - mbMap.setPaintProperty(mbLayerId, 'text-halo-width', this._options.size); - } } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js index 57c28605ec24..e88a3378ced3 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js @@ -38,6 +38,7 @@ import { StaticOrientationProperty } from './properties/static_orientation_prope import { DynamicOrientationProperty } from './properties/dynamic_orientation_property'; import { StaticTextProperty } from './properties/static_text_property'; import { DynamicTextProperty } from './properties/dynamic_text_property'; +import { LabelBorderSizeProperty } from './properties/label_border_size_property'; import { extractColorFromStyleProperty } from './components/legend/extract_color_from_style_property'; const POINTS = [GEO_JSON_TYPE.POINT, GEO_JSON_TYPE.MULTI_POINT]; @@ -100,14 +101,15 @@ export class VectorStyle extends AbstractStyle { this._descriptor.properties[VECTOR_STYLES.LABEL_COLOR], VECTOR_STYLES.LABEL_COLOR ); - this._labelBorderWidthStyleProperty = this._makeSizeProperty( - this._descriptor.properties[VECTOR_STYLES.LABEL_BORDER_WIDTH], - VECTOR_STYLES.LABEL_BORDER_WIDTH - ); this._labelBorderColorStyleProperty = this._makeColorProperty( this._descriptor.properties[VECTOR_STYLES.LABEL_BORDER_COLOR], VECTOR_STYLES.LABEL_BORDER_COLOR ); + this._labelBorderSizeStyleProperty = new LabelBorderSizeProperty( + this._descriptor.properties[VECTOR_STYLES.LABEL_BORDER_SIZE], + VECTOR_STYLES.LABEL_BORDER_SIZE, + this._labelSizeStyleProperty + ); } _getAllStyleProperties() { @@ -120,8 +122,8 @@ export class VectorStyle extends AbstractStyle { this._labelStyleProperty, this._labelSizeStyleProperty, this._labelColorStyleProperty, - this._labelBorderWidthStyleProperty, this._labelBorderColorStyleProperty, + this._labelBorderSizeStyleProperty, ]; } @@ -548,7 +550,7 @@ export class VectorStyle extends AbstractStyle { this._labelStyleProperty.syncTextFieldWithMb(textLayerId, mbMap); this._labelColorStyleProperty.syncLabelColorWithMb(textLayerId, mbMap, alpha); this._labelSizeStyleProperty.syncLabelSizeWithMb(textLayerId, mbMap); - this._labelBorderWidthStyleProperty.syncLabelBorderWidthWithMb(textLayerId, mbMap); + this._labelBorderSizeStyleProperty.syncLabelBorderSizeWithMb(textLayerId, mbMap); this._labelBorderColorStyleProperty.syncLabelBorderColorWithMb(textLayerId, mbMap); } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js index eee769b83673..3631613e7907 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js @@ -16,6 +16,14 @@ export const MAX_SIZE = 64; export const DEFAULT_MIN_SIZE = 4; export const DEFAULT_MAX_SIZE = 32; export const DEFAULT_SIGMA = 3; +export const DEFAULT_LABEL_SIZE = 14; + +export const LABEL_BORDER_SIZES = { + NONE: 'NONE', + SMALL: 'SMALL', + MEDIUM: 'MEDIUM', + LARGE: 'LARGE', +}; export const VECTOR_STYLES = { SYMBOL: 'symbol', @@ -28,7 +36,7 @@ export const VECTOR_STYLES = { LABEL_COLOR: 'labelColor', LABEL_SIZE: 'labelSize', LABEL_BORDER_COLOR: 'labelBorderColor', - LABEL_BORDER_WIDTH: 'labelBorderWidth', + LABEL_BORDER_SIZE: 'labelBorderSize', }; export const LINE_STYLES = [VECTOR_STYLES.LINE_COLOR, VECTOR_STYLES.LINE_WIDTH]; @@ -47,6 +55,11 @@ export function getDefaultProperties(mapColors = []) { symbolId: DEFAULT_ICON, }, }, + [VECTOR_STYLES.LABEL_BORDER_SIZE]: { + options: { + size: LABEL_BORDER_SIZES.SMALL, + }, + }, }; } @@ -105,7 +118,7 @@ export function getDefaultStaticProperties(mapColors = []) { [VECTOR_STYLES.LABEL_SIZE]: { type: VectorStyle.STYLE_TYPE.STATIC, options: { - size: 14, + size: DEFAULT_LABEL_SIZE, }, }, [VECTOR_STYLES.LABEL_BORDER_COLOR]: { @@ -114,12 +127,6 @@ export function getDefaultStaticProperties(mapColors = []) { color: isDarkMode ? '#000000' : '#FFFFFF', }, }, - [VECTOR_STYLES.LABEL_BORDER_WIDTH]: { - type: VectorStyle.STYLE_TYPE.STATIC, - options: { - size: 2, - }, - }, }; } @@ -221,17 +228,5 @@ export function getDefaultDynamicProperties() { }, }, }, - [VECTOR_STYLES.LABEL_BORDER_WIDTH]: { - type: VectorStyle.STYLE_TYPE.DYNAMIC, - options: { - minSize: 1, - maxSize: 10, - field: undefined, - fieldMetaOptions: { - isEnabled: true, - sigma: DEFAULT_SIGMA, - }, - }, - }, }; } From 04ca5bf18fa04c9919ce2a87b7528b179ae78ad5 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Fri, 10 Jan 2020 09:42:32 -0500 Subject: [PATCH 6/9] fix label border size with dynamic label size --- .../vector/properties/dynamic_size_property.js | 12 ++++++------ .../vector/properties/label_border_size_property.js | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js index 4736e9125d90..5a4da1a80c91 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js @@ -63,7 +63,7 @@ export class DynamicSizeProperty extends DynamicStyleProperty { } syncHaloWidthWithMb(mbLayerId, mbMap) { - const haloWidth = this._getMbSize(); + const haloWidth = this.getMbSizeExpression(); mbMap.setPaintProperty(mbLayerId, 'icon-halo-width', haloWidth); } @@ -94,26 +94,26 @@ export class DynamicSizeProperty extends DynamicStyleProperty { } syncCircleStrokeWidthWithMb(mbLayerId, mbMap) { - const lineWidth = this._getMbSize(); + const lineWidth = this.getMbSizeExpression(); mbMap.setPaintProperty(mbLayerId, 'circle-stroke-width', lineWidth); } syncCircleRadiusWithMb(mbLayerId, mbMap) { - const circleRadius = this._getMbSize(); + const circleRadius = this.getMbSizeExpression(); mbMap.setPaintProperty(mbLayerId, 'circle-radius', circleRadius); } syncLineWidthWithMb(mbLayerId, mbMap) { - const lineWidth = this._getMbSize(); + const lineWidth = this.getMbSizeExpression(); mbMap.setPaintProperty(mbLayerId, 'line-width', lineWidth); } syncLabelSizeWithMb(mbLayerId, mbMap) { - const lineWidth = this._getMbSize(); + const lineWidth = this.getMbSizeExpression(); mbMap.setLayoutProperty(mbLayerId, 'text-size', lineWidth); } - _getMbSize() { + getMbSizeExpression() { if (this._isSizeDynamicConfigComplete(this._options)) { return this._getMbDataDrivenSize({ targetName: this.getComputedFieldName(), diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/label_border_size_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/label_border_size_property.js index ddee315279db..e08c2875c310 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/label_border_size_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/label_border_size_property.js @@ -35,10 +35,10 @@ export class LabelBorderSizeProperty extends AbstractStyleProperty { if (this.getOptions().size === LABEL_BORDER_SIZES.NONE) { mbMap.setPaintProperty(mbLayerId, 'text-halo-width', 0); } else if (this._labelSizeProperty.isDynamic() && this._labelSizeProperty.isComplete()) { - const labelSizeKey = this._labelSizeProperty.getComputedFieldName(); + const labelSizeExpression = this._labelSizeProperty.getMbSizeExpression(); mbMap.setPaintProperty(mbLayerId, 'text-halo-width', [ 'max', - ['*', ['coalesce', ['get', labelSizeKey], 0], widthRatio], + ['*', labelSizeExpression, widthRatio], 1, ]); } else { From 3ea01dae95d776e9a9170a66585ec48b070dbe30 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Fri, 10 Jan 2020 12:04:21 -0500 Subject: [PATCH 7/9] clean up --- .../label/vector_style_label_border_size_editor.js | 7 +++++-- .../layers/styles/vector/components/vector_style_editor.js | 4 ++-- .../maps/public/layers/styles/vector/vector_style.js | 2 +- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/vector_style_label_border_size_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/vector_style_label_border_size_editor.js index 0ac583b0a70d..7d06e8b53001 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/vector_style_label_border_size_editor.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/vector_style_label_border_size_editor.js @@ -38,9 +38,12 @@ const options = [ }, ]; -export function VectorStyleLabelHaloSizeEditor({ handlePropertyChange, styleProperty }) { +export function VectorStyleLabelBorderSizeEditor({ handlePropertyChange, styleProperty }) { function onChange(e) { - handlePropertyChange(styleProperty.getStyleName(), { size: e.target.value }); + const styleDescriptor = { + options: { size: e.target.value }, + }; + handlePropertyChange(styleProperty.getStyleName(), styleDescriptor); } return ( diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js index fa4beb024f33..3705561684f8 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js @@ -12,7 +12,7 @@ import { VectorStyleColorEditor } from './color/vector_style_color_editor'; import { VectorStyleSizeEditor } from './size/vector_style_size_editor'; import { VectorStyleSymbolEditor } from './vector_style_symbol_editor'; import { VectorStyleLabelEditor } from './label/vector_style_label_editor'; -import { VectorStyleLabelHaloSizeEditor } from './label/vector_style_label_border_size_editor'; +import { VectorStyleLabelBorderSizeEditor } from './label/vector_style_label_border_size_editor'; import { VectorStyle } from '../vector_style'; import { OrientationEditor } from './orientation/orientation_editor'; import { @@ -281,7 +281,7 @@ export class VectorStyleEditor extends Component { /> - diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js index e88a3378ced3..03a9894781cb 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js @@ -106,7 +106,7 @@ export class VectorStyle extends AbstractStyle { VECTOR_STYLES.LABEL_BORDER_COLOR ); this._labelBorderSizeStyleProperty = new LabelBorderSizeProperty( - this._descriptor.properties[VECTOR_STYLES.LABEL_BORDER_SIZE], + this._descriptor.properties[VECTOR_STYLES.LABEL_BORDER_SIZE].options, VECTOR_STYLES.LABEL_BORDER_SIZE, this._labelSizeStyleProperty ); From d98b20f2cce85d357f1d747f24ed5b8a6be3b89b Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Fri, 10 Jan 2020 13:33:52 -0500 Subject: [PATCH 8/9] fix jest test --- .../maps/public/layers/styles/vector/vector_style.test.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.test.js index c04fc1df1a88..351fdc433a1f 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.test.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.test.js @@ -108,11 +108,10 @@ describe('getDescriptorWithMissingStylePropsRemoved', () => { }, type: 'STATIC', }, - labelBorderWidth: { + labelBorderSize: { options: { - size: 2, + size: 'SMALL', }, - type: 'STATIC', }, labelColor: { options: { From 40748951c5b60862eec96f921cde256a5b56c6a2 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Mon, 13 Jan 2020 14:47:56 -0500 Subject: [PATCH 9/9] fix jest test --- .../vector/properties/dynamic_color_property.test.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js index 0affeefde131..21c24e837b41 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js @@ -4,7 +4,12 @@ * you may not use this file except in compliance with the Elastic License. */ -// eslint-disable-next-line no-unused-vars +jest.mock('../components/vector_style_editor', () => ({ + VectorStyleEditor: () => { + return
mockVectorStyleEditor
; + }, +})); + import React from 'react'; import { shallow } from 'enzyme';