From d785d2b13d6ff21f74e406078ebc59d9a038b1f3 Mon Sep 17 00:00:00 2001 From: Stanislaw Puda Date: Wed, 2 Oct 2024 11:32:47 +0200 Subject: [PATCH 01/15] Add vertical-align to v8.json --- src/reference/v8.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/reference/v8.json b/src/reference/v8.json index 8cc9e7367..4f869fce5 100644 --- a/src/reference/v8.json +++ b/src/reference/v8.json @@ -3177,7 +3177,7 @@ } }, "format": { - "doc": "Returns a `formatted` string for displaying mixed-format text in the `text-field` property. The input may contain a string literal or expression, including an [`'image'`](#image) expression. Strings may be followed by a style override object that supports the following properties:\n\n- `\"text-font\"`: Overrides the font stack specified by the root layout property.\n\n- `\"text-color\"`: Overrides the color specified by the root paint property.\n\n- `\"font-scale\"`: Applies a scaling factor on `text-size` as specified by the root layout property.\n\n - [Change the case of labels](https://maplibre.org/maplibre-gl-js/docs/examples/change-case-of-labels/)\n\n - [Display and style rich text labels](https://maplibre.org/maplibre-gl-js/docs/examples/display-and-style-rich-text-labels/)", + "doc": "Returns a `formatted` string for displaying mixed-format text in the `text-field` property. The input may contain a string literal or expression, including an [`'image'`](#image) expression. Strings may be followed by a style override object that supports the following properties:\n\n- `\"text-font\"`: Overrides the font stack specified by the root layout property.\n\n- `\"text-color\"`: Overrides the color specified by the root paint property.\n\n- `\"font-scale\"`: Applies a scaling factor on `text-size` as specified by the root layout property.\n\n- `\"vertical-align\"`: Align vertically text block or image in relation to the row it belongs to. Possible values are: \n\t- `\"baseline\"` *default*: text baseline or image bottom are in line.\n\t- `\"center\"`: image center or text center (between baseline and top) are in line.\n\t- `\"top\"`: image top and text top are in line.\n\n - [Change the case of labels](https://maplibre.org/maplibre-gl-js/docs/examples/change-case-of-labels/)\n\n - [Display and style rich text labels](https://maplibre.org/maplibre-gl-js/docs/examples/display-and-style-rich-text-labels/)", "example": { "syntax": { "method": ["value", "{ \"text-font\": string, \"text-color\": color, \"font-scale\": number }", "..."], From cfd9111167ea219bba66ff2d89abb6e847074285 Mon Sep 17 00:00:00 2001 From: Stanislaw Puda Date: Wed, 2 Oct 2024 13:34:53 +0200 Subject: [PATCH 02/15] Add vertical-align to format definition --- src/expression/definitions/format.ts | 18 +++++- src/expression/types/formatted.ts | 8 ++- src/reference/v8.json | 2 +- .../expression/tests/format/basic/test.json | 24 +++++-- .../tests/format/coercion/test.json | 9 ++- .../tests/format/data-driven-font/test.json | 6 +- .../data-driven-vertical-align/test.json | 64 +++++++++++++++++++ .../tests/format/image-sections/test.json | 6 +- .../tests/format/implicit-coerce/test.json | 9 ++- .../tests/format/implicit-omit/test.json | 9 ++- .../tests/format/implicit/test.json | 9 ++- 11 files changed, 138 insertions(+), 26 deletions(-) create mode 100644 test/integration/expression/tests/format/data-driven-vertical-align/test.json diff --git a/src/expression/definitions/format.ts b/src/expression/definitions/format.ts index 884fa6060..a6ddee1ba 100644 --- a/src/expression/definitions/format.ts +++ b/src/expression/definitions/format.ts @@ -22,6 +22,7 @@ type FormattedSectionExpression = { scale: Expression | null; font: Expression | null; textColor: Expression | null; + verticalAlign: Expression | null; }; export default class FormatExpression implements Expression { @@ -69,10 +70,17 @@ export default class FormatExpression implements Expression { if (!textColor) return null; } + let verticalAlign = null; + if (arg['vertical-align']) { + verticalAlign = context.parse(arg['vertical-align'], 1, StringType); + if (!verticalAlign) return null; + } + const lastExpression = sections[sections.length - 1]; lastExpression.scale = scale; lastExpression.font = font; lastExpression.textColor = textColor; + lastExpression.verticalAlign = verticalAlign; } else { const content = context.parse(args[i], 1, ValueType); if (!content) return null; @@ -82,7 +90,7 @@ export default class FormatExpression implements Expression { return context.error('Formatted text type must be \'string\', \'value\', \'image\' or \'null\'.') as null; nextTokenMayBeObject = true; - sections.push({content, scale: null, font: null, textColor: null}); + sections.push({content, scale: null, font: null, textColor: null, verticalAlign: null}); } } @@ -93,7 +101,7 @@ export default class FormatExpression implements Expression { const evaluateSection = section => { const evaluatedContent = section.content.evaluate(ctx); if (typeOf(evaluatedContent) === ResolvedImageType) { - return new FormattedSection('', evaluatedContent, null, null, null); + return new FormattedSection('', evaluatedContent, null, null, null, null); } return new FormattedSection( @@ -101,7 +109,8 @@ export default class FormatExpression implements Expression { null, section.scale ? section.scale.evaluate(ctx) : null, section.font ? section.font.evaluate(ctx).join(',') : null, - section.textColor ? section.textColor.evaluate(ctx) : null + section.textColor ? section.textColor.evaluate(ctx) : null, + section.verticalAlign ? section.verticalAlign.evaluate(ctx) : null ); }; @@ -120,6 +129,9 @@ export default class FormatExpression implements Expression { if (section.textColor) { fn(section.textColor); } + if (section.verticalAlign) { + fn(section.verticalAlign); + } } } diff --git a/src/expression/types/formatted.ts b/src/expression/types/formatted.ts index 2a81cf87b..882fa3260 100644 --- a/src/expression/types/formatted.ts +++ b/src/expression/types/formatted.ts @@ -1,19 +1,23 @@ import type Color from '../../util/color'; import type ResolvedImage from '../types/resolved_image'; +type VerticalAlign = 'baseline' | 'center' | 'top'; + export class FormattedSection { text: string; image: ResolvedImage | null; scale: number | null; fontStack: string | null; textColor: Color | null; + verticalAlign: VerticalAlign | null; - constructor(text: string, image: ResolvedImage | null, scale: number | null, fontStack: string | null, textColor: Color | null) { + constructor(text: string, image: ResolvedImage | null, scale: number | null, fontStack: string | null, textColor: Color | null, verticalAlign: VerticalAlign | null) { this.text = text; this.image = image; this.scale = scale; this.fontStack = fontStack; this.textColor = textColor; + this.verticalAlign = verticalAlign; } } @@ -25,7 +29,7 @@ export default class Formatted { } static fromString(unformatted: string): Formatted { - return new Formatted([new FormattedSection(unformatted, null, null, null, null)]); + return new Formatted([new FormattedSection(unformatted, null, null, null, null, null)]); } isEmpty(): boolean { diff --git a/src/reference/v8.json b/src/reference/v8.json index 4f869fce5..43afbd215 100644 --- a/src/reference/v8.json +++ b/src/reference/v8.json @@ -3177,7 +3177,7 @@ } }, "format": { - "doc": "Returns a `formatted` string for displaying mixed-format text in the `text-field` property. The input may contain a string literal or expression, including an [`'image'`](#image) expression. Strings may be followed by a style override object that supports the following properties:\n\n- `\"text-font\"`: Overrides the font stack specified by the root layout property.\n\n- `\"text-color\"`: Overrides the color specified by the root paint property.\n\n- `\"font-scale\"`: Applies a scaling factor on `text-size` as specified by the root layout property.\n\n- `\"vertical-align\"`: Align vertically text block or image in relation to the row it belongs to. Possible values are: \n\t- `\"baseline\"` *default*: text baseline or image bottom are in line.\n\t- `\"center\"`: image center or text center (between baseline and top) are in line.\n\t- `\"top\"`: image top and text top are in line.\n\n - [Change the case of labels](https://maplibre.org/maplibre-gl-js/docs/examples/change-case-of-labels/)\n\n - [Display and style rich text labels](https://maplibre.org/maplibre-gl-js/docs/examples/display-and-style-rich-text-labels/)", + "doc": "Returns a `formatted` string for displaying mixed-format text in the `text-field` property. The input may contain a string literal or expression, including an [`'image'`](#image) expression. Strings may be followed by a style override object that supports the following properties:\n\n- `\"text-font\"`: Overrides the font stack specified by the root layout property.\n\n- `\"text-color\"`: Overrides the color specified by the root paint property.\n\n- `\"font-scale\"`: Applies a scaling factor on `text-size` as specified by the root layout property.\n\n- `\"vertical-align\"`: Align vertically text section or image in relation to the row it belongs to. Possible values are: \n\t- `\"baseline\"` *default*: text baseline or image bottom are in line.\n\t- `\"center\"`: image center or text center (between baseline and top) are in line.\n\t- `\"top\"`: image top and text top are in line.\n\n - [Change the case of labels](https://maplibre.org/maplibre-gl-js/docs/examples/change-case-of-labels/)\n\n - [Display and style rich text labels](https://maplibre.org/maplibre-gl-js/docs/examples/display-and-style-rich-text-labels/)", "example": { "syntax": { "method": ["value", "{ \"text-font\": string, \"text-color\": color, \"font-scale\": number }", "..."], diff --git a/test/integration/expression/tests/format/basic/test.json b/test/integration/expression/tests/format/basic/test.json index 203bcd228..4b133bace 100644 --- a/test/integration/expression/tests/format/basic/test.json +++ b/test/integration/expression/tests/format/basic/test.json @@ -20,6 +20,10 @@ "d", { "text-color": "rgb(0, 255, 0)" + }, + "e", + { + "vertical-align": "center" } ], "inputs": [ @@ -43,21 +47,24 @@ "image": null, "scale": null, "fontStack": null, - "textColor": null + "textColor": null, + "verticalAlign": null }, { "text": "b", "image": null, "scale": 2, "fontStack": null, - "textColor": null + "textColor": null, + "verticalAlign": null }, { "text": "c", "image": null, "scale": null, "fontStack": "a,b", - "textColor": null + "textColor": null, + "verticalAlign": null }, { "text": "d", @@ -69,7 +76,16 @@ "g": 1, "b": 0, "a": 1 - } + }, + "verticalAlign": null + }, + { + "text": "e", + "image": null, + "scale": null, + "fontStack": null, + "textColor": null, + "verticalAlign": "center" } ] } diff --git a/test/integration/expression/tests/format/coercion/test.json b/test/integration/expression/tests/format/coercion/test.json index 1e4851022..712638454 100644 --- a/test/integration/expression/tests/format/coercion/test.json +++ b/test/integration/expression/tests/format/coercion/test.json @@ -44,21 +44,24 @@ "image": null, "scale": null, "fontStack": null, - "textColor": null + "textColor": null, + "verticalAlign": null }, { "text": "1", "image": null, "scale": null, "fontStack": null, - "textColor": null + "textColor": null, + "verticalAlign": null }, { "text": "true", "image": null, "scale": null, "fontStack": null, - "textColor": null + "textColor": null, + "verticalAlign": null } ] } diff --git a/test/integration/expression/tests/format/data-driven-font/test.json b/test/integration/expression/tests/format/data-driven-font/test.json index 25f380e1f..333441d21 100644 --- a/test/integration/expression/tests/format/data-driven-font/test.json +++ b/test/integration/expression/tests/format/data-driven-font/test.json @@ -42,7 +42,8 @@ "image": null, "scale": 1.5, "fontStack": null, - "textColor": null + "textColor": null, + "verticalAlign": null } ] }, @@ -53,7 +54,8 @@ "image": null, "scale": 0.5, "fontStack": null, - "textColor": null + "textColor": null, + "verticalAlign": null } ] } diff --git a/test/integration/expression/tests/format/data-driven-vertical-align/test.json b/test/integration/expression/tests/format/data-driven-vertical-align/test.json new file mode 100644 index 000000000..9f3f8516e --- /dev/null +++ b/test/integration/expression/tests/format/data-driven-vertical-align/test.json @@ -0,0 +1,64 @@ +{ + "expression": [ + "format", + "a", + { + "vertical-align": [ + "get", + "vertical-align" + ] + } + ], + "inputs": [ + [ + {}, + { + "properties": { + "vertical-align": "center" + } + } + ], + [ + {}, + { + "properties": { + "vertical-align": "top" + } + } + ] + ], + "expected": { + "compiled": { + "result": "success", + "isFeatureConstant": false, + "isZoomConstant": true, + "type": "formatted" + }, + "outputs": [ + { + "sections": [ + { + "text": "a", + "image": null, + "scale": null, + "fontStack": null, + "textColor": null, + "verticalAlign": "center" + } + ] + }, + { + "sections": [ + { + "text": "a", + "image": null, + "scale": null, + "fontStack": null, + "textColor": null, + "verticalAlign": "top" + } + ] + } + ] + } +} \ No newline at end of file diff --git a/test/integration/expression/tests/format/image-sections/test.json b/test/integration/expression/tests/format/image-sections/test.json index 7bb844352..de221c62f 100644 --- a/test/integration/expression/tests/format/image-sections/test.json +++ b/test/integration/expression/tests/format/image-sections/test.json @@ -38,7 +38,8 @@ }, "scale": null, "fontStack": null, - "textColor": null + "textColor": null, + "verticalAlign": null }, { "text": "", @@ -48,7 +49,8 @@ }, "scale": null, "fontStack": null, - "textColor": null + "textColor": null, + "verticalAlign": null } ] } diff --git a/test/integration/expression/tests/format/implicit-coerce/test.json b/test/integration/expression/tests/format/implicit-coerce/test.json index d365f6ed8..4433dc0d6 100644 --- a/test/integration/expression/tests/format/implicit-coerce/test.json +++ b/test/integration/expression/tests/format/implicit-coerce/test.json @@ -56,7 +56,8 @@ "image": null, "scale": null, "fontStack": null, - "textColor": null + "textColor": null, + "verticalAlign": null } ] }, @@ -67,7 +68,8 @@ "image": null, "scale": null, "fontStack": null, - "textColor": null + "textColor": null, + "verticalAlign": null } ] }, @@ -78,7 +80,8 @@ "image": null, "scale": null, "fontStack": null, - "textColor": null + "textColor": null, + "verticalAlign": null } ] } diff --git a/test/integration/expression/tests/format/implicit-omit/test.json b/test/integration/expression/tests/format/implicit-omit/test.json index 1d253a3e6..6c094c603 100644 --- a/test/integration/expression/tests/format/implicit-omit/test.json +++ b/test/integration/expression/tests/format/implicit-omit/test.json @@ -60,7 +60,8 @@ "image": null, "scale": null, "fontStack": null, - "textColor": null + "textColor": null, + "verticalAlign": null } ] }, @@ -71,7 +72,8 @@ "image": null, "scale": null, "fontStack": null, - "textColor": null + "textColor": null, + "verticalAlign": null } ] }, @@ -82,7 +84,8 @@ "image": null, "scale": null, "fontStack": null, - "textColor": null + "textColor": null, + "verticalAlign": null } ] } diff --git a/test/integration/expression/tests/format/implicit/test.json b/test/integration/expression/tests/format/implicit/test.json index 93fe5924b..97d824d2c 100644 --- a/test/integration/expression/tests/format/implicit/test.json +++ b/test/integration/expression/tests/format/implicit/test.json @@ -53,7 +53,8 @@ "image": null, "scale": null, "fontStack": null, - "textColor": null + "textColor": null, + "verticalAlign": null } ] }, @@ -64,7 +65,8 @@ "image": null, "scale": null, "fontStack": null, - "textColor": null + "textColor": null, + "verticalAlign": null } ] }, @@ -75,7 +77,8 @@ "image": null, "scale": null, "fontStack": null, - "textColor": null + "textColor": null, + "verticalAlign": null } ] } From 7593fa96ed82f8896f4aa452893af07abfa497b1 Mon Sep 17 00:00:00 2001 From: Stanislaw Puda Date: Wed, 2 Oct 2024 15:24:01 +0200 Subject: [PATCH 03/15] Add static value validation --- src/expression/definitions/format.ts | 6 +++++- src/expression/types/formatted.ts | 3 ++- .../format/unknown-vertical-align/test.json | 20 +++++++++++++++++++ 3 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 test/integration/expression/tests/format/unknown-vertical-align/test.json diff --git a/src/expression/definitions/format.ts b/src/expression/definitions/format.ts index a6ddee1ba..188c4d587 100644 --- a/src/expression/definitions/format.ts +++ b/src/expression/definitions/format.ts @@ -7,7 +7,7 @@ import { ColorType, ResolvedImageType, } from '../types'; -import Formatted, {FormattedSection} from '../types/formatted'; +import Formatted, {FormattedSection, VERTICAL_ALIGN_OPTIONS, VerticalAlign} from '../types/formatted'; import {toString, typeOf} from '../values'; import type {Expression} from '../expression'; @@ -72,6 +72,10 @@ export default class FormatExpression implements Expression { let verticalAlign = null; if (arg['vertical-align']) { + if (typeof arg['vertical-align'] === 'string' && !VERTICAL_ALIGN_OPTIONS.includes(arg['vertical-align'] as VerticalAlign)) { + return context.error(`\`vertical-align\` must be one of: 'baseline', 'center', 'top' but found '${arg['vertical-align']}' instead.`) as null; + } + verticalAlign = context.parse(arg['vertical-align'], 1, StringType); if (!verticalAlign) return null; } diff --git a/src/expression/types/formatted.ts b/src/expression/types/formatted.ts index 882fa3260..59fbb7f6b 100644 --- a/src/expression/types/formatted.ts +++ b/src/expression/types/formatted.ts @@ -1,7 +1,8 @@ import type Color from '../../util/color'; import type ResolvedImage from '../types/resolved_image'; -type VerticalAlign = 'baseline' | 'center' | 'top'; +export const VERTICAL_ALIGN_OPTIONS = ['baseline', 'center', 'top'] as const; +export type VerticalAlign = typeof VERTICAL_ALIGN_OPTIONS[number]; export class FormattedSection { text: string; diff --git a/test/integration/expression/tests/format/unknown-vertical-align/test.json b/test/integration/expression/tests/format/unknown-vertical-align/test.json new file mode 100644 index 000000000..778504948 --- /dev/null +++ b/test/integration/expression/tests/format/unknown-vertical-align/test.json @@ -0,0 +1,20 @@ +{ + "expression": [ + "format", + "a", + { + "vertical-align": "unknown" + } + ], + "expected": { + "compiled": { + "result": "error", + "errors": [ + { + "key": "", + "error": "`vertical-align` must be one of: 'baseline', 'center', 'top' but found 'unknown' instead." + } + ] + } + } +} \ No newline at end of file From 6065c887a6e1dcaca9acc55f27783cda3bced709 Mon Sep 17 00:00:00 2001 From: Stanislaw Puda Date: Mon, 7 Oct 2024 10:57:21 +0200 Subject: [PATCH 04/15] Add support for image --- src/expression/definitions/format.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/expression/definitions/format.ts b/src/expression/definitions/format.ts index 188c4d587..02d4d184c 100644 --- a/src/expression/definitions/format.ts +++ b/src/expression/definitions/format.ts @@ -105,7 +105,14 @@ export default class FormatExpression implements Expression { const evaluateSection = section => { const evaluatedContent = section.content.evaluate(ctx); if (typeOf(evaluatedContent) === ResolvedImageType) { - return new FormattedSection('', evaluatedContent, null, null, null, null); + return new FormattedSection( + '', + evaluatedContent, + null, + null, + null, + section.verticalAlign ? section.verticalAlign.evaluate(ctx) : null + ); } return new FormattedSection( From a4630d096f9043b84ed90a9e4220bac78b999a8e Mon Sep 17 00:00:00 2001 From: Stanislaw Puda Date: Tue, 12 Nov 2024 11:08:15 +0100 Subject: [PATCH 05/15] update vertical-align description --- src/reference/v8.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/reference/v8.json b/src/reference/v8.json index 43afbd215..f67d68c31 100644 --- a/src/reference/v8.json +++ b/src/reference/v8.json @@ -3177,10 +3177,10 @@ } }, "format": { - "doc": "Returns a `formatted` string for displaying mixed-format text in the `text-field` property. The input may contain a string literal or expression, including an [`'image'`](#image) expression. Strings may be followed by a style override object that supports the following properties:\n\n- `\"text-font\"`: Overrides the font stack specified by the root layout property.\n\n- `\"text-color\"`: Overrides the color specified by the root paint property.\n\n- `\"font-scale\"`: Applies a scaling factor on `text-size` as specified by the root layout property.\n\n- `\"vertical-align\"`: Align vertically text section or image in relation to the row it belongs to. Possible values are: \n\t- `\"baseline\"` *default*: text baseline or image bottom are in line.\n\t- `\"center\"`: image center or text center (between baseline and top) are in line.\n\t- `\"top\"`: image top and text top are in line.\n\n - [Change the case of labels](https://maplibre.org/maplibre-gl-js/docs/examples/change-case-of-labels/)\n\n - [Display and style rich text labels](https://maplibre.org/maplibre-gl-js/docs/examples/display-and-style-rich-text-labels/)", + "doc": "Returns a `formatted` string for displaying mixed-format text in the `text-field` property. The input may contain a string literal or expression, including an [`'image'`](#image) expression. Strings may be followed by a style override object that supports the following properties:\n\n- `\"text-font\"`: Overrides the font stack specified by the root layout property.\n\n- `\"text-color\"`: Overrides the color specified by the root paint property.\n\n- `\"font-scale\"`: Applies a scaling factor on `text-size` as specified by the root layout property.\n\n- `\"vertical-align\"`: Align vertically text section or image in relation to the row it belongs to. Possible values are: \n\t- `\"baseline\"` *default*: text baseline or image bottom are in line.\n\t- `\"center\"`: image center or text center are in line.\n\t- `\"top\"`: image top and text top are in line.\n\n - [Change the case of labels](https://maplibre.org/maplibre-gl-js/docs/examples/change-case-of-labels/)\n\n - [Display and style rich text labels](https://maplibre.org/maplibre-gl-js/docs/examples/display-and-style-rich-text-labels/)", "example": { "syntax": { - "method": ["value", "{ \"text-font\": string, \"text-color\": color, \"font-scale\": number }", "..."], + "method": ["value", "{ \"text-font\": string, \"text-color\": color, \"font-scale\": number, \"vertical-align\": string }", "..."], "result": "formatted" }, "value": ["format", ["upcase", ["get", "FacilityName"]], {"font-scale": 0.8}, "\n\n", {}, ["downcase", ["get", "Comments"]], {"font-scale": 0.6}] From 1a5cf7ce84fc0964b47afc6ec18ce01c49e535f5 Mon Sep 17 00:00:00 2001 From: Stanislaw Puda Date: Tue, 12 Nov 2024 12:50:05 +0100 Subject: [PATCH 06/15] add changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a16deef8..d9414fd77 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## main ### ✨ Features and improvements +- Add `vertical-align` option to `format` expression ([#832](https://github.com/maplibre/maplibre-style-spec/issues/832)) - _...Add new stuff here..._ ### 🐞 Bug fixes From 695efdf332b5b7f4802ee1b8bc3f3506057c13f0 Mon Sep 17 00:00:00 2001 From: Stanislaw Puda Date: Thu, 28 Nov 2024 09:54:26 +0100 Subject: [PATCH 07/15] add image section `vertical-align` test --- .../expression/tests/format/image-sections/test.json | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/test/integration/expression/tests/format/image-sections/test.json b/test/integration/expression/tests/format/image-sections/test.json index de221c62f..c769c5dd0 100644 --- a/test/integration/expression/tests/format/image-sections/test.json +++ b/test/integration/expression/tests/format/image-sections/test.json @@ -8,7 +8,10 @@ [ "image", "beach-11" - ] + ], + { + "vertical-align": "center" + } ], "inputs": [ [ @@ -50,7 +53,7 @@ "scale": null, "fontStack": null, "textColor": null, - "verticalAlign": null + "verticalAlign": "center" } ] } From c74afe5ccef8a3c36eeef7cf60049de70d281834 Mon Sep 17 00:00:00 2001 From: Stanislaw Puda Date: Thu, 28 Nov 2024 10:00:52 +0100 Subject: [PATCH 08/15] change `baseline` to `bottom` --- src/expression/definitions/format.ts | 2 +- src/expression/types/formatted.ts | 2 +- src/reference/v8.json | 2 +- .../expression/tests/format/unknown-vertical-align/test.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/expression/definitions/format.ts b/src/expression/definitions/format.ts index 8078d85b6..bbbed9c52 100644 --- a/src/expression/definitions/format.ts +++ b/src/expression/definitions/format.ts @@ -73,7 +73,7 @@ export class FormatExpression implements Expression { let verticalAlign = null; if (arg['vertical-align']) { if (typeof arg['vertical-align'] === 'string' && !VERTICAL_ALIGN_OPTIONS.includes(arg['vertical-align'] as VerticalAlign)) { - return context.error(`\`vertical-align\` must be one of: 'baseline', 'center', 'top' but found '${arg['vertical-align']}' instead.`) as null; + return context.error(`\`vertical-align\` must be one of: 'bottom', 'center', 'top' but found '${arg['vertical-align']}' instead.`) as null; } verticalAlign = context.parse(arg['vertical-align'], 1, StringType); diff --git a/src/expression/types/formatted.ts b/src/expression/types/formatted.ts index 1235fc438..81780b004 100644 --- a/src/expression/types/formatted.ts +++ b/src/expression/types/formatted.ts @@ -1,7 +1,7 @@ import type {Color} from '../../expression/types/color'; import type {ResolvedImage} from '../types/resolved_image'; -export const VERTICAL_ALIGN_OPTIONS = ['baseline', 'center', 'top'] as const; +export const VERTICAL_ALIGN_OPTIONS = ['bottom', 'center', 'top'] as const; export type VerticalAlign = typeof VERTICAL_ALIGN_OPTIONS[number]; export class FormattedSection { diff --git a/src/reference/v8.json b/src/reference/v8.json index da16d903f..05c7cb8b1 100644 --- a/src/reference/v8.json +++ b/src/reference/v8.json @@ -3226,7 +3226,7 @@ } }, "format": { - "doc": "Returns a `formatted` string for displaying mixed-format text in the `text-field` property. The input may contain a string literal or expression, including an [`'image'`](#image) expression. Strings may be followed by a style override object that supports the following properties:\n\n- `\"text-font\"`: Overrides the font stack specified by the root layout property.\n\n- `\"text-color\"`: Overrides the color specified by the root paint property.\n\n- `\"font-scale\"`: Applies a scaling factor on `text-size` as specified by the root layout property.\n\n- `\"vertical-align\"`: Align vertically text section or image in relation to the row it belongs to. Possible values are: \n\t- `\"baseline\"` *default*: text baseline or image bottom are in line.\n\t- `\"center\"`: image center or text center are in line.\n\t- `\"top\"`: image top and text top are in line.\n\n - [Change the case of labels](https://maplibre.org/maplibre-gl-js/docs/examples/change-case-of-labels/)\n\n - [Display and style rich text labels](https://maplibre.org/maplibre-gl-js/docs/examples/display-and-style-rich-text-labels/)", + "doc": "Returns a `formatted` string for displaying mixed-format text in the `text-field` property. The input may contain a string literal or expression, including an [`'image'`](#image) expression. Strings may be followed by a style override object that supports the following properties:\n\n- `\"text-font\"`: Overrides the font stack specified by the root layout property.\n\n- `\"text-color\"`: Overrides the color specified by the root paint property.\n\n- `\"font-scale\"`: Applies a scaling factor on `text-size` as specified by the root layout property.\n\n- `\"vertical-align\"`: Align vertically text section or image in relation to the row it belongs to. Possible values are: \n\t- `\"bottom\"` *default*: text baseline or image bottom are in line.\n\t- `\"center\"`: image center or text center are in line.\n\t- `\"top\"`: image top and text top are in line.\n\n - [Change the case of labels](https://maplibre.org/maplibre-gl-js/docs/examples/change-case-of-labels/)\n\n - [Display and style rich text labels](https://maplibre.org/maplibre-gl-js/docs/examples/display-and-style-rich-text-labels/)", "example": { "syntax": { "method": ["value", "{ \"text-font\": string, \"text-color\": color, \"font-scale\": number, \"vertical-align\": string }", "..."], diff --git a/test/integration/expression/tests/format/unknown-vertical-align/test.json b/test/integration/expression/tests/format/unknown-vertical-align/test.json index 778504948..68f3144ab 100644 --- a/test/integration/expression/tests/format/unknown-vertical-align/test.json +++ b/test/integration/expression/tests/format/unknown-vertical-align/test.json @@ -12,7 +12,7 @@ "errors": [ { "key": "", - "error": "`vertical-align` must be one of: 'baseline', 'center', 'top' but found 'unknown' instead." + "error": "`vertical-align` must be one of: 'bottom', 'center', 'top' but found 'unknown' instead." } ] } From b55daaa6daf35f928a4464cd5c6c445a1074b1d3 Mon Sep 17 00:00:00 2001 From: Stanislaw Puda Date: Thu, 28 Nov 2024 11:38:21 +0100 Subject: [PATCH 09/15] add `vertical-align` to sdk support table --- src/reference/v8.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/reference/v8.json b/src/reference/v8.json index 05c7cb8b1..f0081b0b8 100644 --- a/src/reference/v8.json +++ b/src/reference/v8.json @@ -3256,6 +3256,11 @@ "android": "7.3.0", "ios": "4.10.0" }, + "vertical-align": { + "js": "https://github.com/maplibre/maplibre-gl-js/issues/5043", + "android": "x", + "ios": "x" + }, "image": { "js": "1.6.0", "android": "8.6.0", From 2429fe8901466cd2d150ac2f61379988ef7e8e24 Mon Sep 17 00:00:00 2001 From: Stanislaw Puda Date: Thu, 28 Nov 2024 11:57:30 +0100 Subject: [PATCH 10/15] add links to maplibre native issue --- src/reference/v8.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/reference/v8.json b/src/reference/v8.json index f0081b0b8..e2d7e22ab 100644 --- a/src/reference/v8.json +++ b/src/reference/v8.json @@ -3258,8 +3258,8 @@ }, "vertical-align": { "js": "https://github.com/maplibre/maplibre-gl-js/issues/5043", - "android": "x", - "ios": "x" + "android": "https://github.com/maplibre/maplibre-native/issues/3055", + "ios": "https://github.com/maplibre/maplibre-native/issues/3055" }, "image": { "js": "1.6.0", From 4cf94a51616abefdc729873edb48e75822830ef7 Mon Sep 17 00:00:00 2001 From: Stanislaw Puda Date: Thu, 28 Nov 2024 15:10:04 +0100 Subject: [PATCH 11/15] review fixes --- src/expression/definitions/format.ts | 2 +- src/reference/v8.json | 2 +- .../expression/tests/format/unknown-vertical-align/test.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/expression/definitions/format.ts b/src/expression/definitions/format.ts index bbbed9c52..038813fb2 100644 --- a/src/expression/definitions/format.ts +++ b/src/expression/definitions/format.ts @@ -73,7 +73,7 @@ export class FormatExpression implements Expression { let verticalAlign = null; if (arg['vertical-align']) { if (typeof arg['vertical-align'] === 'string' && !VERTICAL_ALIGN_OPTIONS.includes(arg['vertical-align'] as VerticalAlign)) { - return context.error(`\`vertical-align\` must be one of: 'bottom', 'center', 'top' but found '${arg['vertical-align']}' instead.`) as null; + return context.error(`'vertical-align' must be one of: 'bottom', 'center', 'top' but found '${arg['vertical-align']}' instead.`) as null; } verticalAlign = context.parse(arg['vertical-align'], 1, StringType); diff --git a/src/reference/v8.json b/src/reference/v8.json index e2d7e22ab..4290dd6f6 100644 --- a/src/reference/v8.json +++ b/src/reference/v8.json @@ -3226,7 +3226,7 @@ } }, "format": { - "doc": "Returns a `formatted` string for displaying mixed-format text in the `text-field` property. The input may contain a string literal or expression, including an [`'image'`](#image) expression. Strings may be followed by a style override object that supports the following properties:\n\n- `\"text-font\"`: Overrides the font stack specified by the root layout property.\n\n- `\"text-color\"`: Overrides the color specified by the root paint property.\n\n- `\"font-scale\"`: Applies a scaling factor on `text-size` as specified by the root layout property.\n\n- `\"vertical-align\"`: Align vertically text section or image in relation to the row it belongs to. Possible values are: \n\t- `\"bottom\"` *default*: text baseline or image bottom are in line.\n\t- `\"center\"`: image center or text center are in line.\n\t- `\"top\"`: image top and text top are in line.\n\n - [Change the case of labels](https://maplibre.org/maplibre-gl-js/docs/examples/change-case-of-labels/)\n\n - [Display and style rich text labels](https://maplibre.org/maplibre-gl-js/docs/examples/display-and-style-rich-text-labels/)", + "doc": "Returns a `formatted` string for displaying mixed-format text in the `text-field` property. The input may contain a string literal or expression, including an [`'image'`](#image) expression. Strings may be followed by a style override object that supports the following properties:\n\n- `\"text-font\"`: Overrides the font stack specified by the root layout property.\n\n- `\"text-color\"`: Overrides the color specified by the root paint property.\n\n- `\"font-scale\"`: Applies a scaling factor on `text-size` as specified by the root layout property.\n\n- `\"vertical-align\"`: Aligns vertically text section or image in relation to the row it belongs to. Possible values are: \n\t- `\"bottom\"` *default*: text baseline or image bottom are in line.\n\t- `\"center\"`: image center or text center are in line.\n\t- `\"top\"`: image top and text top are in line.\n\n - [Change the case of labels](https://maplibre.org/maplibre-gl-js/docs/examples/change-case-of-labels/)\n\n - [Display and style rich text labels](https://maplibre.org/maplibre-gl-js/docs/examples/display-and-style-rich-text-labels/)", "example": { "syntax": { "method": ["value", "{ \"text-font\": string, \"text-color\": color, \"font-scale\": number, \"vertical-align\": string }", "..."], diff --git a/test/integration/expression/tests/format/unknown-vertical-align/test.json b/test/integration/expression/tests/format/unknown-vertical-align/test.json index 68f3144ab..d2d1cc0d7 100644 --- a/test/integration/expression/tests/format/unknown-vertical-align/test.json +++ b/test/integration/expression/tests/format/unknown-vertical-align/test.json @@ -12,7 +12,7 @@ "errors": [ { "key": "", - "error": "`vertical-align` must be one of: 'bottom', 'center', 'top' but found 'unknown' instead." + "error": "'vertical-align' must be one of: 'bottom', 'center', 'top' but found 'unknown' instead." } ] } From ef5ac81262d4d06f6401e192c94ab290841c617d Mon Sep 17 00:00:00 2001 From: Stanislaw Puda Date: Mon, 16 Dec 2024 11:28:18 +0100 Subject: [PATCH 12/15] Define `vertical-align` as set of possible values instead of `string` --- src/reference/v8.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/reference/v8.json b/src/reference/v8.json index 9cf8181e6..1e00a9d20 100644 --- a/src/reference/v8.json +++ b/src/reference/v8.json @@ -3229,7 +3229,7 @@ "doc": "Returns a `formatted` string for displaying mixed-format text in the `text-field` property. The input may contain a string literal or expression, including an [`'image'`](#image) expression. Strings may be followed by a style override object that supports the following properties:\n\n- `\"text-font\"`: Overrides the font stack specified by the root layout property.\n\n- `\"text-color\"`: Overrides the color specified by the root paint property.\n\n- `\"font-scale\"`: Applies a scaling factor on `text-size` as specified by the root layout property.\n\n- `\"vertical-align\"`: Aligns vertically text section or image in relation to the row it belongs to. Possible values are: \n\t- `\"bottom\"` *default*: text baseline or image bottom are in line.\n\t- `\"center\"`: image center or text center are in line.\n\t- `\"top\"`: image top and text top are in line.\n\n - [Change the case of labels](https://maplibre.org/maplibre-gl-js/docs/examples/change-case-of-labels/)\n\n - [Display and style rich text labels](https://maplibre.org/maplibre-gl-js/docs/examples/display-and-style-rich-text-labels/)", "example": { "syntax": { - "method": ["value", "{ \"text-font\": string, \"text-color\": color, \"font-scale\": number, \"vertical-align\": string }", "..."], + "method": ["value", "{ \"text-font\": string, \"text-color\": color, \"font-scale\": number, \"vertical-align\": \"bottom\" | \"center\" | \"top\" }", "..."], "result": "formatted" }, "value": ["format", ["upcase", ["get", "FacilityName"]], {"font-scale": 0.8}, "\n\n", {}, ["downcase", ["get", "Comments"]], {"font-scale": 0.6}] From 7adf081cbea593620f997cb7912fc6959acfb7cc Mon Sep 17 00:00:00 2001 From: Stanislaw Puda Date: Mon, 23 Dec 2024 07:01:19 +0100 Subject: [PATCH 13/15] simplify vertical-align options description --- src/reference/v8.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/reference/v8.json b/src/reference/v8.json index 1e00a9d20..26685de79 100644 --- a/src/reference/v8.json +++ b/src/reference/v8.json @@ -3226,7 +3226,7 @@ } }, "format": { - "doc": "Returns a `formatted` string for displaying mixed-format text in the `text-field` property. The input may contain a string literal or expression, including an [`'image'`](#image) expression. Strings may be followed by a style override object that supports the following properties:\n\n- `\"text-font\"`: Overrides the font stack specified by the root layout property.\n\n- `\"text-color\"`: Overrides the color specified by the root paint property.\n\n- `\"font-scale\"`: Applies a scaling factor on `text-size` as specified by the root layout property.\n\n- `\"vertical-align\"`: Aligns vertically text section or image in relation to the row it belongs to. Possible values are: \n\t- `\"bottom\"` *default*: text baseline or image bottom are in line.\n\t- `\"center\"`: image center or text center are in line.\n\t- `\"top\"`: image top and text top are in line.\n\n - [Change the case of labels](https://maplibre.org/maplibre-gl-js/docs/examples/change-case-of-labels/)\n\n - [Display and style rich text labels](https://maplibre.org/maplibre-gl-js/docs/examples/display-and-style-rich-text-labels/)", + "doc": "Returns a `formatted` string for displaying mixed-format text in the `text-field` property. The input may contain a string literal or expression, including an [`'image'`](#image) expression. Strings may be followed by a style override object that supports the following properties:\n\n- `\"text-font\"`: Overrides the font stack specified by the root layout property.\n\n- `\"text-color\"`: Overrides the color specified by the root paint property.\n\n- `\"font-scale\"`: Applies a scaling factor on `text-size` as specified by the root layout property.\n\n- `\"vertical-align\"`: Aligns vertically text section or image in relation to the row it belongs to. Possible values are: \n\t- `\"bottom\"` *default*: align the bottom of this section with the bottom of other sections.\n\t- `\"center\"`: align the center of this section with the center of other sections.\n\t- `\"top\"`: align the top of this section with the top of other sections.\n\n - [Change the case of labels](https://maplibre.org/maplibre-gl-js/docs/examples/change-case-of-labels/)\n\n - [Display and style rich text labels](https://maplibre.org/maplibre-gl-js/docs/examples/display-and-style-rich-text-labels/)", "example": { "syntax": { "method": ["value", "{ \"text-font\": string, \"text-color\": color, \"font-scale\": number, \"vertical-align\": \"bottom\" | \"center\" | \"top\" }", "..."], From 56c2eed7258bd61cbd7d01e119fcded8e8fb5ce4 Mon Sep 17 00:00:00 2001 From: Stanislaw Puda Date: Mon, 23 Dec 2024 07:11:20 +0100 Subject: [PATCH 14/15] update example --- src/reference/v8.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/reference/v8.json b/src/reference/v8.json index 26685de79..999fb668c 100644 --- a/src/reference/v8.json +++ b/src/reference/v8.json @@ -3232,7 +3232,7 @@ "method": ["value", "{ \"text-font\": string, \"text-color\": color, \"font-scale\": number, \"vertical-align\": \"bottom\" | \"center\" | \"top\" }", "..."], "result": "formatted" }, - "value": ["format", ["upcase", ["get", "FacilityName"]], {"font-scale": 0.8}, "\n\n", {}, ["downcase", ["get", "Comments"]], {"font-scale": 0.6}] + "value": ["format", ["upcase", ["get", "FacilityName"]], {"font-scale": 0.8}, "\n\n", {}, ["downcase", ["get", "Comments"]], {"font-scale": 0.6, "vertical-align": "center"}] }, "group": "Types", "sdk-support": { From f2595e98bd55638832d058ae85a29795ec917318 Mon Sep 17 00:00:00 2001 From: Stanislaw Puda Date: Mon, 23 Dec 2024 07:23:02 +0100 Subject: [PATCH 15/15] link design proposal for more details --- src/reference/v8.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/reference/v8.json b/src/reference/v8.json index 999fb668c..e9a2ae7a1 100644 --- a/src/reference/v8.json +++ b/src/reference/v8.json @@ -3226,7 +3226,7 @@ } }, "format": { - "doc": "Returns a `formatted` string for displaying mixed-format text in the `text-field` property. The input may contain a string literal or expression, including an [`'image'`](#image) expression. Strings may be followed by a style override object that supports the following properties:\n\n- `\"text-font\"`: Overrides the font stack specified by the root layout property.\n\n- `\"text-color\"`: Overrides the color specified by the root paint property.\n\n- `\"font-scale\"`: Applies a scaling factor on `text-size` as specified by the root layout property.\n\n- `\"vertical-align\"`: Aligns vertically text section or image in relation to the row it belongs to. Possible values are: \n\t- `\"bottom\"` *default*: align the bottom of this section with the bottom of other sections.\n\t- `\"center\"`: align the center of this section with the center of other sections.\n\t- `\"top\"`: align the top of this section with the top of other sections.\n\n - [Change the case of labels](https://maplibre.org/maplibre-gl-js/docs/examples/change-case-of-labels/)\n\n - [Display and style rich text labels](https://maplibre.org/maplibre-gl-js/docs/examples/display-and-style-rich-text-labels/)", + "doc": "Returns a `formatted` string for displaying mixed-format text in the `text-field` property. The input may contain a string literal or expression, including an [`'image'`](#image) expression. Strings may be followed by a style override object that supports the following properties:\n\n- `\"text-font\"`: Overrides the font stack specified by the root layout property.\n\n- `\"text-color\"`: Overrides the color specified by the root paint property.\n\n- `\"font-scale\"`: Applies a scaling factor on `text-size` as specified by the root layout property.\n\n- `\"vertical-align\"`: Aligns vertically text section or image in relation to the row it belongs to. Possible values are: \n\t- `\"bottom\"` *default*: align the bottom of this section with the bottom of other sections.\n\t- `\"center\"`: align the center of this section with the center of other sections.\n\t- `\"top\"`: align the top of this section with the top of other sections.\n\t- Refer to [the design proposal](https://github.com/maplibre/maplibre-style-spec/issues/832) for more details.\n\n - [Change the case of labels](https://maplibre.org/maplibre-gl-js/docs/examples/change-case-of-labels/)\n\n - [Display and style rich text labels](https://maplibre.org/maplibre-gl-js/docs/examples/display-and-style-rich-text-labels/)", "example": { "syntax": { "method": ["value", "{ \"text-font\": string, \"text-color\": color, \"font-scale\": number, \"vertical-align\": \"bottom\" | \"center\" | \"top\" }", "..."],