Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Maps] add text halo color and width style properties #53827

Merged
merged 14 commits into from
Jan 13, 2020
Merged

[Maps] add text halo color and width style properties #53827

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
c9de8dd
[Maps] add text halo color and width style properties
nreese Dec 27, 2019
948de75
fix jest test
nreese Dec 27, 2019
4287d30
Merge branch 'master' of github.com:elastic/kibana into text-halo
nreese Jan 6, 2020
98f2fd9
update for new editor UI
nreese Jan 6, 2020
6119f23
add removed styling
nreese Jan 6, 2020
0cb97cc
get halo size from label size
nreese Jan 7, 2020
04ca5bf
fix label border size with dynamic label size
nreese Jan 10, 2020
3ea01da
clean up
nreese Jan 10, 2020
66a5571
Merge branch 'master' into text-halo
elasticmachine Jan 10, 2020
d98b20f
fix jest test
nreese Jan 10, 2020
5efd862
Merge branch 'master' into text-halo
elasticmachine Jan 13, 2020
ed30450
Merge branch 'text-halo' of github.com:nreese/kibana into text-halo
nreese Jan 13, 2020
412e912
Merge branch 'master' of github.com:elastic/kibana into text-halo
nreese Jan 13, 2020
4074895
fix jest test
nreese Jan 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions x-pack/legacy/plugins/maps/public/layers/styles/vector/components/get_vector_style_label.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
29 changes: 29 additions & 0 deletions x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,35 @@ export class VectorStyleEditor extends Component {
}
/>
<EuiSpacer size="m" />

<VectorStyleColorEditor
swatches={DEFAULT_LINE_COLORS}
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_BORDER_COLOR]}
fields={this._getOrdinalFields()}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_BORDER_COLOR].options
}
defaultDynamicStyleOptions={
this.state.defaultDynamicProperties[VECTOR_STYLES.LABEL_BORDER_COLOR].options
}
/>
<EuiSpacer size="m" />

<VectorStyleSizeEditor
nreese marked this conversation as resolved.
Show resolved Hide resolved
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_BORDER_WIDTH]}
fields={this._getOrdinalFields()}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_BORDER_WIDTH].options
}
defaultDynamicStyleOptions={
this.state.defaultDynamicProperties[VECTOR_STYLES.LABEL_BORDER_WIDTH].options
}
/>
<EuiSpacer size="m" />
</Fragment>
);
}
Expand Down
5 changes: 5 additions & 0 deletions x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,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;
}
Expand Down
5 changes: 5 additions & 0 deletions x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,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({
Expand Down
4 changes: 4 additions & 0 deletions x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_color_property.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
4 changes: 4 additions & 0 deletions x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_size_property.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
13 changes: 12 additions & 1 deletion x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,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() {
Expand All @@ -112,6 +120,8 @@ export class VectorStyle extends AbstractStyle {
this._labelStyleProperty,
this._labelSizeStyleProperty,
this._labelColorStyleProperty,
this._labelBorderWidthStyleProperty,
this._labelBorderColorStyleProperty,
];
}

Expand Down Expand Up @@ -537,7 +547,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);
nreese marked this conversation as resolved.
Show resolved Hide resolved
this._labelBorderWidthStyleProperty.syncLabelBorderWidthWithMb(textLayerId, mbMap);
this._labelBorderColorStyleProperty.syncLabelBorderColorWithMb(textLayerId, mbMap);
}

setMBSymbolPropertiesForPoints({ mbMap, symbolLayerId, alpha }) {
Expand Down
12 changes: 12 additions & 0 deletions x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,18 @@ describe('getDescriptorWithMissingStylePropsRemoved', () => {
},
type: 'STATIC',
},
labelBorderColor: {
options: {
color: '#FFFFFF',
},
type: 'STATIC',
},
labelBorderWidth: {
options: {
size: 2,
},
type: 'STATIC',
},
labelColor: {
options: {
color: '#000000',
Expand Down
45 changes: 41 additions & 4 deletions x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down Expand Up @@ -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,
},
},
};
}

Expand Down Expand Up @@ -158,7 +172,7 @@ export function getDefaultDynamicProperties() {
},
},
[VECTOR_STYLES.ICON_ORIENTATION]: {
type: VectorStyle.STYLE_TYPE.STATIC,
nreese marked this conversation as resolved.
Show resolved Hide resolved
type: VectorStyle.STYLE_TYPE.DYNAMIC,
options: {
field: undefined,
fieldMetaOptions: {
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
},
},
},
};
}