diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/__tests__/test_util.ts b/x-pack/plugins/maps/public/classes/styles/vector/properties/__tests__/test_util.ts index f4ef9bdbe5b6d6..a8fba834d65abd 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/__tests__/test_util.ts +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/__tests__/test_util.ts @@ -25,21 +25,6 @@ class MockField extends AbstractField { } } -export class MockMbMap { - _paintPropertyCalls: unknown[]; - - constructor() { - this._paintPropertyCalls = []; - } - setPaintProperty(...args: unknown[]) { - this._paintPropertyCalls.push([...args]); - } - - getPaintPropertyCalls(): unknown[] { - return this._paintPropertyCalls; - } -} - export const mockField: IField = new MockField({ fieldName: 'foobar', origin: FIELD_ORIGIN.SOURCE, diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.test.tsx b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.test.tsx index c60547f3606c5e..30ea889f663762 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.test.tsx +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.test.tsx @@ -18,11 +18,30 @@ import { shallow } from 'enzyme'; import { DynamicSizeProperty } from './dynamic_size_property'; import { VECTOR_STYLES } from '../../../../../common/constants'; import { IField } from '../../../fields/field'; -import { MockMbMap } from './__tests__/test_util'; - +import { Map as MbMap } from 'mapbox-gl'; +import { SizeDynamicOptions } from '../../../../../common/descriptor_types'; import { mockField, MockLayer, MockStyle } from './__tests__/test_util'; -const makeProperty = (options: object, mockStyle: MockStyle, field: IField = mockField) => { +export class MockMbMap { + _paintPropertyCalls: unknown[]; + + constructor() { + this._paintPropertyCalls = []; + } + setPaintProperty(...args: unknown[]) { + this._paintPropertyCalls.push([...args]); + } + + getPaintPropertyCalls(): unknown[] { + return this._paintPropertyCalls; + } +} + +const makeProperty = ( + options: SizeDynamicOptions, + mockStyle: MockStyle, + field: IField = mockField +) => { return new DynamicSizeProperty( options, VECTOR_STYLES.ICON_SIZE, @@ -30,19 +49,20 @@ const makeProperty = (options: object, mockStyle: MockStyle, field: IField = moc new MockLayer(mockStyle), () => { return (x: string) => x + '_format'; - } + }, + false ); }; -const defaultLegendParams = { - isPointsOnly: true, - isLinesOnly: false, -}; +const fieldMetaOptions = { isEnabled: true }; describe('renderLegendDetailRow', () => { test('Should render as range', async () => { - const sizeProp = makeProperty({}, new MockStyle({ min: 0, max: 100 })); - const legendRow = sizeProp.renderLegendDetailRow(defaultLegendParams); + const sizeProp = makeProperty( + { minSize: 0, maxSize: 10, fieldMetaOptions }, + new MockStyle({ min: 0, max: 100 }) + ); + const legendRow = sizeProp.renderLegendDetailRow(); const component = shallow(legendRow); // Ensure all promises resolve @@ -55,8 +75,11 @@ describe('renderLegendDetailRow', () => { describe('syncSize', () => { test('Should sync with circle-radius prop', async () => { - const sizeProp = makeProperty({ minSize: 8, maxSize: 32 }, new MockStyle({ min: 0, max: 100 })); - const mockMbMap = new MockMbMap(); + const sizeProp = makeProperty( + { minSize: 8, maxSize: 32, fieldMetaOptions }, + new MockStyle({ min: 0, max: 100 }) + ); + const mockMbMap = (new MockMbMap() as unknown) as MbMap & { getPaintPropertyCalls }; sizeProp.syncCircleRadiusWithMb('foobar', mockMbMap); @@ -88,10 +111,10 @@ describe('syncSize', () => { test('Should truncate interpolate expression to max when no delta', async () => { const sizeProp = makeProperty( - { minSize: 8, maxSize: 32 }, + { minSize: 8, maxSize: 32, fieldMetaOptions }, new MockStyle({ min: 100, max: 100 }) ); - const mockMbMap = new MockMbMap(); + const mockMbMap = (new MockMbMap() as unknown) as MbMap & { getPaintPropertyCalls }; sizeProp.syncCircleRadiusWithMb('foobar', mockMbMap); diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.tsx similarity index 72% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.tsx index 83bd4b70ba5c33..35c830f3cb5e37 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.tsx @@ -4,20 +4,34 @@ * you may not use this file except in compliance with the Elastic License. */ -import { DynamicStyleProperty } from './dynamic_style_property'; +import _ from 'lodash'; +import React from 'react'; +import { Map as MbMap } from 'mapbox-gl'; +import { DynamicStyleProperty, FieldFormatter } from './dynamic_style_property'; import { OrdinalLegend } from '../components/legend/ordinal_legend'; import { makeMbClampedNumberExpression } from '../style_util'; import { HALF_LARGE_MAKI_ICON_SIZE, LARGE_MAKI_ICON_SIZE, SMALL_MAKI_ICON_SIZE, + // @ts-expect-error } from '../symbol_utils'; import { MB_LOOKUP_FUNCTION, VECTOR_STYLES } from '../../../../../common/constants'; -import _ from 'lodash'; -import React from 'react'; - -export class DynamicSizeProperty extends DynamicStyleProperty { - constructor(options, styleName, field, vectorLayer, getFieldFormatter, isSymbolizedAsIcon) { +import { SizeDynamicOptions } from '../../../../../common/descriptor_types'; +import { IField } from '../../../fields/field'; +import { IVectorLayer } from '../../../layers/vector_layer/vector_layer'; + +export class DynamicSizeProperty extends DynamicStyleProperty { + private readonly _isSymbolizedAsIcon: boolean; + + constructor( + options: SizeDynamicOptions, + styleName: VECTOR_STYLES, + field: IField | null, + vectorLayer: IVectorLayer, + getFieldFormatter: (fieldName: string) => null | FieldFormatter, + isSymbolizedAsIcon: boolean + ) { super(options, styleName, field, vectorLayer, getFieldFormatter); this._isSymbolizedAsIcon = isSymbolizedAsIcon; } @@ -36,7 +50,7 @@ export class DynamicSizeProperty extends DynamicStyleProperty { return super.supportsMbFeatureState(); } - syncHaloWidthWithMb(mbLayerId, mbMap) { + syncHaloWidthWithMb(mbLayerId: string, mbMap: MbMap) { const haloWidth = this.getMbSizeExpression(); mbMap.setPaintProperty(mbLayerId, 'icon-halo-width', haloWidth); } @@ -47,9 +61,9 @@ export class DynamicSizeProperty extends DynamicStyleProperty { : SMALL_MAKI_ICON_SIZE; } - syncIconSizeWithMb(symbolLayerId, mbMap) { + syncIconSizeWithMb(symbolLayerId: string, mbMap: MbMap) { const rangeFieldMeta = this.getRangeFieldMeta(); - if (this._isSizeDynamicConfigComplete(this._options) && rangeFieldMeta) { + if (this._isSizeDynamicConfigComplete() && rangeFieldMeta) { const halfIconPixels = this.getIconPixelSize() / 2; const targetName = this.getFieldName(); // Using property state instead of feature-state because layout properties do not support feature-state @@ -73,29 +87,29 @@ export class DynamicSizeProperty extends DynamicStyleProperty { } } - syncCircleStrokeWidthWithMb(mbLayerId, mbMap) { + syncCircleStrokeWidthWithMb(mbLayerId: string, mbMap: MbMap) { const lineWidth = this.getMbSizeExpression(); mbMap.setPaintProperty(mbLayerId, 'circle-stroke-width', lineWidth); } - syncCircleRadiusWithMb(mbLayerId, mbMap) { + syncCircleRadiusWithMb(mbLayerId: string, mbMap: MbMap) { const circleRadius = this.getMbSizeExpression(); mbMap.setPaintProperty(mbLayerId, 'circle-radius', circleRadius); } - syncLineWidthWithMb(mbLayerId, mbMap) { + syncLineWidthWithMb(mbLayerId: string, mbMap: MbMap) { const lineWidth = this.getMbSizeExpression(); mbMap.setPaintProperty(mbLayerId, 'line-width', lineWidth); } - syncLabelSizeWithMb(mbLayerId, mbMap) { + syncLabelSizeWithMb(mbLayerId: string, mbMap: MbMap) { const lineWidth = this.getMbSizeExpression(); mbMap.setLayoutProperty(mbLayerId, 'text-size', lineWidth); } getMbSizeExpression() { const rangeFieldMeta = this.getRangeFieldMeta(); - if (!this._isSizeDynamicConfigComplete(this._options) || !rangeFieldMeta) { + if (!this._isSizeDynamicConfigComplete() || !rangeFieldMeta) { return null; } @@ -108,7 +122,19 @@ export class DynamicSizeProperty extends DynamicStyleProperty { }); } - _getMbDataDrivenSize({ targetName, minSize, maxSize, minValue, maxValue }) { + _getMbDataDrivenSize({ + targetName, + minSize, + maxSize, + minValue, + maxValue, + }: { + targetName: string; + minSize: number; + maxSize: number; + minValue: number; + maxValue: number; + }) { const stops = minValue === maxValue ? [maxValue, maxSize] : [minValue, minSize, maxValue, maxSize]; return [ diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_style_property.tsx b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_style_property.tsx index 39ceb580e92b93..47659e055936e5 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_style_property.tsx +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_style_property.tsx @@ -47,7 +47,7 @@ export interface IDynamicStyleProperty extends IStyleProperty { getValueSuggestions(query: string): Promise; } -type FieldFormatter = (value: string | number | undefined) => string | number; +export type FieldFormatter = (value: string | number | undefined) => string | number; export class DynamicStyleProperty extends AbstractStyleProperty implements IDynamicStyleProperty { diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/label_border_size_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/label_border_size_property.ts similarity index 68% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/label_border_size_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/label_border_size_property.ts index 3016b15d0a05c8..bda7a4584370f9 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/label_border_size_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/label_border_size_property.ts @@ -5,15 +5,20 @@ */ import _ from 'lodash'; +import { Map as MbMap } from 'mapbox-gl'; import { AbstractStyleProperty } from './style_property'; import { DEFAULT_LABEL_SIZE } from '../vector_style_defaults'; import { LABEL_BORDER_SIZES } from '../../../../../common/constants'; +import { LabelBorderSizeOptions } from '../../../../../common/descriptor_types'; +import { VECTOR_STYLES } from '../../../../../common/constants'; +import { StaticSizeProperty } from './static_size_property'; +import { DynamicSizeProperty } from './dynamic_size_property'; 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) { +function getWidthRatio(size: LABEL_BORDER_SIZES) { switch (size) { case LABEL_BORDER_SIZES.LARGE: return LARGE_SIZE; @@ -24,13 +29,19 @@ function getWidthRatio(size) { } } -export class LabelBorderSizeProperty extends AbstractStyleProperty { - constructor(options, styleName, labelSizeProperty) { +export class LabelBorderSizeProperty extends AbstractStyleProperty { + private readonly _labelSizeProperty: StaticSizeProperty | DynamicSizeProperty; + + constructor( + options: LabelBorderSizeOptions, + styleName: VECTOR_STYLES, + labelSizeProperty: StaticSizeProperty | DynamicSizeProperty + ) { super(options, styleName); this._labelSizeProperty = labelSizeProperty; } - syncLabelBorderSizeWithMb(mbLayerId, mbMap) { + syncLabelBorderSizeWithMb(mbLayerId: string, mbMap: MbMap) { if (this.getOptions().size === LABEL_BORDER_SIZES.NONE) { mbMap.setPaintProperty(mbLayerId, 'text-halo-width', 0); return; @@ -39,7 +50,8 @@ export class LabelBorderSizeProperty extends AbstractStyleProperty { const widthRatio = getWidthRatio(this.getOptions().size); if (this._labelSizeProperty.isDynamic() && this._labelSizeProperty.isComplete()) { - const labelSizeExpression = this._labelSizeProperty.getMbSizeExpression(); + const labelSizeExpression = (this + ._labelSizeProperty as DynamicSizeProperty).getMbSizeExpression(); if (labelSizeExpression) { mbMap.setPaintProperty(mbLayerId, 'text-halo-width', [ 'max', diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_color_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_color_property.ts similarity index 63% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/static_color_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/static_color_property.ts index ebe2a322711fc3..45d25565b6f235 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_color_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_color_property.ts @@ -4,43 +4,45 @@ * you may not use this file except in compliance with the Elastic License. */ +import { Map as MbMap } from 'mapbox-gl'; import { StaticStyleProperty } from './static_style_property'; +import { ColorStaticOptions } from '../../../../../common/descriptor_types'; -export class StaticColorProperty extends StaticStyleProperty { - syncCircleColorWithMb(mbLayerId, mbMap, alpha) { +export class StaticColorProperty extends StaticStyleProperty { + syncCircleColorWithMb(mbLayerId: string, mbMap: MbMap, alpha: number) { mbMap.setPaintProperty(mbLayerId, 'circle-color', this._options.color); mbMap.setPaintProperty(mbLayerId, 'circle-opacity', alpha); } - syncFillColorWithMb(mbLayerId, mbMap, alpha) { + syncFillColorWithMb(mbLayerId: string, mbMap: MbMap, alpha: number) { mbMap.setPaintProperty(mbLayerId, 'fill-color', this._options.color); mbMap.setPaintProperty(mbLayerId, 'fill-opacity', alpha); } - syncIconColorWithMb(mbLayerId, mbMap) { + syncIconColorWithMb(mbLayerId: string, mbMap: MbMap) { mbMap.setPaintProperty(mbLayerId, 'icon-color', this._options.color); } - syncHaloBorderColorWithMb(mbLayerId, mbMap) { + syncHaloBorderColorWithMb(mbLayerId: string, mbMap: MbMap) { mbMap.setPaintProperty(mbLayerId, 'icon-halo-color', this._options.color); } - syncLineColorWithMb(mbLayerId, mbMap, alpha) { + syncLineColorWithMb(mbLayerId: string, mbMap: MbMap, alpha: number) { mbMap.setPaintProperty(mbLayerId, 'line-color', this._options.color); mbMap.setPaintProperty(mbLayerId, 'line-opacity', alpha); } - syncCircleStrokeWithMb(mbLayerId, mbMap, alpha) { + syncCircleStrokeWithMb(mbLayerId: string, mbMap: MbMap, alpha: number) { mbMap.setPaintProperty(mbLayerId, 'circle-stroke-color', this._options.color); mbMap.setPaintProperty(mbLayerId, 'circle-stroke-opacity', alpha); } - syncLabelColorWithMb(mbLayerId, mbMap, alpha) { + syncLabelColorWithMb(mbLayerId: string, mbMap: MbMap, alpha: number) { mbMap.setPaintProperty(mbLayerId, 'text-color', this._options.color); mbMap.setPaintProperty(mbLayerId, 'text-opacity', alpha); } - syncLabelBorderColorWithMb(mbLayerId, mbMap) { + syncLabelBorderColorWithMb(mbLayerId: string, mbMap: MbMap) { mbMap.setPaintProperty(mbLayerId, 'text-halo-color', this._options.color); } } diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_icon_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_icon_property.ts similarity index 67% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/static_icon_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/static_icon_property.ts index 3b5be083dd3c90..58c569e8132d68 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_icon_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_icon_property.ts @@ -4,11 +4,14 @@ * you may not use this file except in compliance with the Elastic License. */ +import { Map as MbMap } from 'mapbox-gl'; import { StaticStyleProperty } from './static_style_property'; +// @ts-expect-error import { getMakiSymbolAnchor, getMakiIconId } from '../symbol_utils'; +import { IconStaticOptions } from '../../../../../common/descriptor_types'; -export class StaticIconProperty extends StaticStyleProperty { - syncIconWithMb(symbolLayerId, mbMap, iconPixelSize) { +export class StaticIconProperty extends StaticStyleProperty { + syncIconWithMb(symbolLayerId: string, mbMap: MbMap, iconPixelSize: number) { const symbolId = this._options.value; mbMap.setLayoutProperty(symbolLayerId, 'icon-anchor', getMakiSymbolAnchor(symbolId)); mbMap.setLayoutProperty(symbolLayerId, 'icon-image', getMakiIconId(symbolId, iconPixelSize)); diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_orientation_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_orientation_property.ts similarity index 62% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/static_orientation_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/static_orientation_property.ts index 0c8cae10d61895..388cfbd6454683 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_orientation_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_orientation_property.ts @@ -4,10 +4,13 @@ * you may not use this file except in compliance with the Elastic License. */ +import { Map as MbMap } from 'mapbox-gl'; import { StaticStyleProperty } from './static_style_property'; +import { VECTOR_STYLES } from '../../../../../common/constants'; +import { OrientationStaticOptions } from '../../../../../common/descriptor_types'; -export class StaticOrientationProperty extends StaticStyleProperty { - constructor(options, styleName) { +export class StaticOrientationProperty extends StaticStyleProperty { + constructor(options: OrientationStaticOptions, styleName: VECTOR_STYLES) { if (typeof options.orientation !== 'number') { super({ orientation: 0 }, styleName); } else { @@ -15,7 +18,7 @@ export class StaticOrientationProperty extends StaticStyleProperty { } } - syncIconRotationWithMb(symbolLayerId, mbMap) { + syncIconRotationWithMb(symbolLayerId: string, mbMap: MbMap) { mbMap.setLayoutProperty(symbolLayerId, 'icon-rotate', this._options.orientation); } } diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_size_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_size_property.ts similarity index 65% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/static_size_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/static_size_property.ts index d86556c6218cf8..c9ee64ca56647c 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_size_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_size_property.ts @@ -4,15 +4,19 @@ * you may not use this file except in compliance with the Elastic License. */ +import { Map as MbMap } from 'mapbox-gl'; import { StaticStyleProperty } from './static_style_property'; +import { VECTOR_STYLES } from '../../../../../common/constants'; import { HALF_LARGE_MAKI_ICON_SIZE, LARGE_MAKI_ICON_SIZE, SMALL_MAKI_ICON_SIZE, + // @ts-expect-error } from '../symbol_utils'; +import { SizeStaticOptions } from '../../../../../common/descriptor_types'; -export class StaticSizeProperty extends StaticStyleProperty { - constructor(options, styleName) { +export class StaticSizeProperty extends StaticStyleProperty { + constructor(options: SizeStaticOptions, styleName: VECTOR_STYLES) { if (typeof options.size !== 'number') { super({ size: 1 }, styleName); } else { @@ -20,7 +24,7 @@ export class StaticSizeProperty extends StaticStyleProperty { } } - syncHaloWidthWithMb(mbLayerId, mbMap) { + syncHaloWidthWithMb(mbLayerId: string, mbMap: MbMap) { mbMap.setPaintProperty(mbLayerId, 'icon-halo-width', this._options.size); } @@ -30,12 +34,12 @@ export class StaticSizeProperty extends StaticStyleProperty { : SMALL_MAKI_ICON_SIZE; } - syncIconSizeWithMb(symbolLayerId, mbMap) { + syncIconSizeWithMb(symbolLayerId: string, mbMap: MbMap) { const halfIconPixels = this.getIconPixelSize() / 2; mbMap.setLayoutProperty(symbolLayerId, 'icon-size', this._options.size / halfIconPixels); } - syncCircleStrokeWidthWithMb(mbLayerId, mbMap, hasNoRadius) { + syncCircleStrokeWidthWithMb(mbLayerId: string, mbMap: MbMap, hasNoRadius: boolean) { if (hasNoRadius) { mbMap.setPaintProperty(mbLayerId, 'circle-stroke-width', 0); } else { @@ -43,15 +47,15 @@ export class StaticSizeProperty extends StaticStyleProperty { } } - syncCircleRadiusWithMb(mbLayerId, mbMap) { + syncCircleRadiusWithMb(mbLayerId: string, mbMap: MbMap) { mbMap.setPaintProperty(mbLayerId, 'circle-radius', this._options.size); } - syncLineWidthWithMb(mbLayerId, mbMap) { + syncLineWidthWithMb(mbLayerId: string, mbMap: MbMap) { mbMap.setPaintProperty(mbLayerId, 'line-width', this._options.size); } - syncLabelSizeWithMb(mbLayerId, mbMap) { + syncLabelSizeWithMb(mbLayerId: string, mbMap: MbMap) { mbMap.setLayoutProperty(mbLayerId, 'text-size', this._options.size); } } diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_style_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_style_property.ts similarity index 84% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/static_style_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/static_style_property.ts index a02aa15e28b285..ea39f4fa06a78c 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_style_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_style_property.ts @@ -7,6 +7,6 @@ import { AbstractStyleProperty } from './style_property'; import { STYLE_TYPE } from '../../../../../common/constants'; -export class StaticStyleProperty extends AbstractStyleProperty { +export class StaticStyleProperty extends AbstractStyleProperty { static type = STYLE_TYPE.STATIC; } diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_text_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_text_property.ts similarity index 69% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/static_text_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/static_text_property.ts index 7a4a4672152c0a..e24e7553d0b389 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_text_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_text_property.ts @@ -4,14 +4,16 @@ * you may not use this file except in compliance with the Elastic License. */ +import { Map as MbMap } from 'mapbox-gl'; import { StaticStyleProperty } from './static_style_property'; +import { LabelStaticOptions } from '../../../../../common/descriptor_types'; -export class StaticTextProperty extends StaticStyleProperty { +export class StaticTextProperty extends StaticStyleProperty { isComplete() { return this.getOptions().value.length > 0; } - syncTextFieldWithMb(mbLayerId, mbMap) { + syncTextFieldWithMb(mbLayerId: string, mbMap: MbMap) { if (this.getOptions().value.length) { mbMap.setLayoutProperty(mbLayerId, 'text-field', this.getOptions().value); } else { diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/symbolize_as_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/symbolize_as_property.ts similarity index 74% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/symbolize_as_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/symbolize_as_property.ts index 9ae1ef5054e30f..8bfc06a1c7fa92 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/symbolize_as_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/symbolize_as_property.ts @@ -6,12 +6,9 @@ import { AbstractStyleProperty } from './style_property'; import { SYMBOLIZE_AS_TYPES } from '../../../../../common/constants'; +import { SymbolizeAsOptions } from '../../../../../common/descriptor_types'; -export class SymbolizeAsProperty extends AbstractStyleProperty { - constructor(options, styleName) { - super(options, styleName); - } - +export class SymbolizeAsProperty extends AbstractStyleProperty { isSymbolizedAsIcon = () => { return this.getOptions().value === SYMBOLIZE_AS_TYPES.ICON; };