-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Maps] Introduce typed styles (#49803)
- Loading branch information
1 parent
559ac84
commit 479177a
Showing
61 changed files
with
504 additions
and
250 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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| @import './components/color_gradient'; | ||
| @import './components/static_dynamic_style_row'; | ||
| @import './components/vector/color/color_stops'; | ||
| @import './vector/components/color/color_stops'; |
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
File renamed without changes.
File renamed without changes.
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
File renamed without changes.
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
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
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
File renamed without changes.
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
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
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
File renamed without changes.
File renamed without changes.
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
File renamed without changes.
File renamed without changes.
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
File renamed without changes.
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
File renamed without changes.
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
105 changes: 105 additions & 0 deletions
105
x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_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,105 @@ | ||
| /* | ||
| * 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 { DynamicStyleProperty } from './dynamic_style_property'; | ||
| import _ from 'lodash'; | ||
| import { getComputedFieldName } from '../style_util'; | ||
| import { getColorRampStops } from '../../color_utils'; | ||
|
|
||
|
|
||
| export class DynamicColorProperty extends DynamicStyleProperty { | ||
|
|
||
|
|
||
| syncCircleColorWithMb(mbLayerId, mbMap, alpha) { | ||
| const color = this._getMbColor(); | ||
| mbMap.setPaintProperty(mbLayerId, 'circle-color', color); | ||
| mbMap.setPaintProperty(mbLayerId, 'circle-opacity', alpha); | ||
| } | ||
|
|
||
| syncIconColorWithMb(mbLayerId, mbMap) { | ||
| const color = this._getMbColor(); | ||
| mbMap.setPaintProperty(mbLayerId, 'icon-color', color); | ||
| } | ||
|
|
||
| syncHaloBorderColorWithMb(mbLayerId, mbMap) { | ||
| const color = this._getMbColor(); | ||
| mbMap.setPaintProperty(mbLayerId, 'icon-halo-color', color); | ||
| } | ||
|
|
||
| syncCircleStrokeWithMb(pointLayerId, mbMap, alpha) { | ||
| const color = this._getMbColor(); | ||
| mbMap.setPaintProperty(pointLayerId, 'circle-stroke-color', color); | ||
| mbMap.setPaintProperty(pointLayerId, 'circle-stroke-opacity', alpha); | ||
| } | ||
|
|
||
| syncFillColorWithMb(mbLayerId, mbMap, alpha) { | ||
| const color = this._getMbColor(); | ||
| mbMap.setPaintProperty(mbLayerId, 'fill-color', color); | ||
| mbMap.setPaintProperty(mbLayerId, 'fill-opacity', alpha); | ||
| } | ||
|
|
||
| syncLineColorWithMb(mbLayerId, mbMap, alpha) { | ||
| const color = this._getMbColor(); | ||
| mbMap.setPaintProperty(mbLayerId, 'line-color', color); | ||
| mbMap.setPaintProperty(mbLayerId, 'line-opacity', alpha); | ||
| } | ||
|
|
||
| _getMbColor() { | ||
| const isDynamicConfigComplete = _.has(this._options, 'field.name') && _.has(this._options, 'color'); | ||
| if (!isDynamicConfigComplete) { | ||
| return null; | ||
| } | ||
|
|
||
| if (this._options.useCustomColorRamp && (!this._options.customColorRamp || !this._options.customColorRamp.length)) { | ||
| return null; | ||
| } | ||
|
|
||
| return this._getMBDataDrivenColor({ | ||
| targetName: getComputedFieldName(this._styleName, this._options.field.name), | ||
| colorStops: this._getMBColorStops(), | ||
| isSteps: this._options.useCustomColorRamp, | ||
| }); | ||
| } | ||
|
|
||
| _getMBDataDrivenColor({ targetName, colorStops, isSteps }) { | ||
| if (isSteps) { | ||
| const firstStopValue = colorStops[0]; | ||
| const lessThenFirstStopValue = firstStopValue - 1; | ||
| return [ | ||
| 'step', | ||
| ['coalesce', ['feature-state', targetName], lessThenFirstStopValue], | ||
| 'rgba(0,0,0,0)', // MB will assign the base value to any features that is below the first stop value | ||
| ...colorStops | ||
| ]; | ||
| } | ||
|
|
||
| return [ | ||
| 'interpolate', | ||
| ['linear'], | ||
| ['coalesce', ['feature-state', targetName], -1], | ||
| -1, 'rgba(0,0,0,0)', | ||
| ...colorStops | ||
| ]; | ||
| } | ||
|
|
||
|
|
||
| _getMBColorStops() { | ||
|
|
||
| if (this._options.useCustomColorRamp) { | ||
| return this._options.customColorRamp.reduce((accumulatedStops, nextStop) => { | ||
| return [...accumulatedStops, nextStop.stop, nextStop.color]; | ||
| }, []); | ||
| } | ||
|
|
||
| return getColorRampStops(this._options.color); | ||
| } | ||
|
|
||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
29 changes: 29 additions & 0 deletions
29
...egacy/plugins/maps/public/layers/styles/vector/properties/dynamic_orientation_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,29 @@ | ||
| /* | ||
| * 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 { DynamicStyleProperty } from './dynamic_style_property'; | ||
| import { getComputedFieldName } from '../style_util'; | ||
| import { vectorStyles } from '../vector_style_defaults'; | ||
|
|
||
|
|
||
| export class DynamicOrientationProperty extends DynamicStyleProperty { | ||
|
|
||
| syncIconRotationWithMb(symbolLayerId, mbMap) { | ||
| if (this._options.field && this._options.field.name) { | ||
| const targetName = getComputedFieldName(vectorStyles.ICON_ORIENTATION, this._options.field.name); | ||
| // Using property state instead of feature-state because layout properties do not support feature-state | ||
| mbMap.setLayoutProperty(symbolLayerId, 'icon-rotate', ['coalesce', ['get', targetName], 0]); | ||
| } else { | ||
| mbMap.setLayoutProperty(symbolLayerId, 'icon-rotate', 0); | ||
| } | ||
| } | ||
|
|
||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
Oops, something went wrong.