maplibre-gl 3.2.2 → 3.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "maplibre-gl",
   "description": "BSD licensed community fork of mapbox-gl, a WebGL interactive maps library",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "main": "dist/maplibre-gl.js",
   "style": "dist/maplibre-gl.css",
   "license": "BSD-3-Clause",
@@ -20,7 +20,7 @@
     "@mapbox/unitbezier": "^0.0.1",
     "@mapbox/vector-tile": "^1.3.1",
     "@mapbox/whoots-js": "^3.1.0",
-    "@maplibre/maplibre-gl-style-spec": "^19.2.2",
+    "@maplibre/maplibre-gl-style-spec": "^19.3.0",
     "@types/geojson": "^7946.0.10",
     "@types/mapbox__point-geometry": "^0.1.2",
     "@types/mapbox__vector-tile": "^1.3.0",
@@ -54,7 +54,7 @@
     "@types/d3": "^7.4.0",
     "@types/diff": "^5.0.3",
     "@types/earcut": "^2.1.1",
-    "@types/eslint": "^8.44.1",
+    "@types/eslint": "^8.44.2",
     "@types/gl": "^6.0.2",
     "@types/glob": "^8.1.0",
     "@types/jest": "^29.5.3",
@@ -62,24 +62,24 @@
     "@types/minimist": "^1.2.2",
     "@types/murmurhash-js": "^1.0.4",
     "@types/nise": "^1.4.1",
-    "@types/node": "^20.4.5",
+    "@types/node": "^20.4.8",
     "@types/offscreencanvas": "^2019.7.0",
     "@types/pixelmatch": "^5.2.4",
     "@types/pngjs": "^6.0.1",
-    "@types/react": "^18.2.17",
+    "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",
     "@types/request": "^2.48.8",
     "@types/shuffle-seed": "^1.1.0",
     "@types/window-or-global": "^1.0.4",
-    "@typescript-eslint/eslint-plugin": "^6.2.0",
-    "@typescript-eslint/parser": "^6.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
     "address": "^1.2.2",
     "benchmark": "^2.1.4",
     "canvas": "^2.11.2",
     "cssnano": "^6.0.1",
     "d3": "^7.8.5",
     "d3-queue": "^3.0.7",
-    "devtools-protocol": "^0.0.1173815",
+    "devtools-protocol": "^0.0.1179426",
     "diff": "^5.1.0",
     "dts-bundle-generator": "^8.0.1",
     "eslint": "^8.46.0",
@@ -111,10 +111,10 @@
     "postcss-cli": "^10.1.0",
     "postcss-inline-svg": "^6.0.0",
     "pretty-bytes": "^6.1.1",
-    "puppeteer": "^20.9.0",
+    "puppeteer": "^21.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.27.0",
+    "rollup": "^3.27.2",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rw": "^1.3.3",
     "semver": "^7.5.4",

package/src/data/array_types.g.ts

@@ -621,10 +621,11 @@ register('StructArrayLayout2i2ui3ul3ui2f3ub1ul1i48', StructArrayLayout2i2ui3ul3u
  * [0]: Int16[8]
  * [16]: Uint16[15]
  * [48]: Uint32[1]
- * [52]: Float32[4]
+ * [52]: Float32[2]
+ * [60]: Uint16[2]
  *
  */
-class StructArrayLayout8i15ui1ul4f68 extends StructArray {
+class StructArrayLayout8i15ui1ul2f2ui64 extends StructArray {
     uint8: Uint8Array;
     int16: Int16Array;
     uint16: Uint16Array;
@@ -646,8 +647,8 @@ class StructArrayLayout8i15ui1ul4f68 extends StructArray {
     }
 
     public emplace(i: number, v0: number, v1: number, v2: number, v3: number, v4: number, v5: number, v6: number, v7: number, v8: number, v9: number, v10: number, v11: number, v12: number, v13: number, v14: number, v15: number, v16: number, v17: number, v18: number, v19: number, v20: number, v21: number, v22: number, v23: number, v24: number, v25: number, v26: number, v27: number) {
-        const o2 = i * 34;
-        const o4 = i * 17;
+        const o2 = i * 32;
+        const o4 = i * 16;
         this.int16[o2 + 0] = v0;
         this.int16[o2 + 1] = v1;
         this.int16[o2 + 2] = v2;
@@ -674,14 +675,14 @@ class StructArrayLayout8i15ui1ul4f68 extends StructArray {
         this.uint32[o4 + 12] = v23;
         this.float32[o4 + 13] = v24;
         this.float32[o4 + 14] = v25;
-        this.float32[o4 + 15] = v26;
-        this.float32[o4 + 16] = v27;
+        this.uint16[o2 + 30] = v26;
+        this.uint16[o2 + 31] = v27;
         return i;
     }
 }
 
-StructArrayLayout8i15ui1ul4f68.prototype.bytesPerElement = 68;
-register('StructArrayLayout8i15ui1ul4f68', StructArrayLayout8i15ui1ul4f68);
+StructArrayLayout8i15ui1ul2f2ui64.prototype.bytesPerElement = 64;
+register('StructArrayLayout8i15ui1ul2f2ui64', StructArrayLayout8i15ui1ul2f2ui64);
 
 /**
  * @internal
@@ -714,6 +715,43 @@ class StructArrayLayout1f4 extends StructArray {
 StructArrayLayout1f4.prototype.bytesPerElement = 4;
 register('StructArrayLayout1f4', StructArrayLayout1f4);
 
+/**
+ * @internal
+ * Implementation of the StructArray layout:
+ * [0]: Uint16[1]
+ * [4]: Float32[2]
+ *
+ */
+class StructArrayLayout1ui2f12 extends StructArray {
+    uint8: Uint8Array;
+    uint16: Uint16Array;
+    float32: Float32Array;
+
+    _refreshViews() {
+        this.uint8 = new Uint8Array(this.arrayBuffer);
+        this.uint16 = new Uint16Array(this.arrayBuffer);
+        this.float32 = new Float32Array(this.arrayBuffer);
+    }
+
+    public emplaceBack(v0: number, v1: number, v2: number) {
+        const i = this.length;
+        this.resize(i + 1);
+        return this.emplace(i, v0, v1, v2);
+    }
+
+    public emplace(i: number, v0: number, v1: number, v2: number) {
+        const o2 = i * 6;
+        const o4 = i * 3;
+        this.uint16[o2 + 0] = v0;
+        this.float32[o4 + 1] = v1;
+        this.float32[o4 + 2] = v2;
+        return i;
+    }
+}
+
+StructArrayLayout1ui2f12.prototype.bytesPerElement = 12;
+register('StructArrayLayout1ui2f12', StructArrayLayout1ui2f12);
+
 /**
  * @internal
  * Implementation of the StructArray layout:
@@ -951,17 +989,17 @@ class SymbolInstanceStruct extends Struct {
     get crossTileID() { return this._structArray.uint32[this._pos4 + 12]; }
     set crossTileID(x: number) { this._structArray.uint32[this._pos4 + 12] = x; }
     get textBoxScale() { return this._structArray.float32[this._pos4 + 13]; }
-    get textOffset0() { return this._structArray.float32[this._pos4 + 14]; }
-    get textOffset1() { return this._structArray.float32[this._pos4 + 15]; }
-    get collisionCircleDiameter() { return this._structArray.float32[this._pos4 + 16]; }
+    get collisionCircleDiameter() { return this._structArray.float32[this._pos4 + 14]; }
+    get textAnchorOffsetStartIndex() { return this._structArray.uint16[this._pos2 + 30]; }
+    get textAnchorOffsetEndIndex() { return this._structArray.uint16[this._pos2 + 31]; }
 }
 
-SymbolInstanceStruct.prototype.size = 68;
+SymbolInstanceStruct.prototype.size = 64;
 
 export type SymbolInstance = SymbolInstanceStruct;
 
 /** @internal */
-export class SymbolInstanceArray extends StructArrayLayout8i15ui1ul4f68 {
+export class SymbolInstanceArray extends StructArrayLayout8i15ui1ul2f2ui64 {
     /**
      * Return the SymbolInstanceStruct at the given location in the array.
      * @param index The index of the element.
@@ -989,6 +1027,31 @@ export class SymbolLineVertexArray extends StructArrayLayout3i6 {
 
 register('SymbolLineVertexArray', SymbolLineVertexArray);
 
+/** @internal */
+class TextAnchorOffsetStruct extends Struct {
+    _structArray: TextAnchorOffsetArray;
+    get textAnchor() { return this._structArray.uint16[this._pos2 + 0]; }
+    get textOffset0() { return this._structArray.float32[this._pos4 + 1]; }
+    get textOffset1() { return this._structArray.float32[this._pos4 + 2]; }
+}
+
+TextAnchorOffsetStruct.prototype.size = 12;
+
+export type TextAnchorOffset = TextAnchorOffsetStruct;
+
+/** @internal */
+export class TextAnchorOffsetArray extends StructArrayLayout1ui2f12 {
+    /**
+     * Return the TextAnchorOffsetStruct at the given location in the array.
+     * @param index The index of the element.
+     */
+    get(index: number): TextAnchorOffsetStruct {
+        return new TextAnchorOffsetStruct(this, index);
+    }
+}
+
+register('TextAnchorOffsetArray', TextAnchorOffsetArray);
+
 /** @internal */
 class FeatureIndexStruct extends Struct {
     _structArray: FeatureIndexArray;
@@ -1051,8 +1114,9 @@ export {
     StructArrayLayout2ub2f12,
     StructArrayLayout3ui6,
     StructArrayLayout2i2ui3ul3ui2f3ub1ul1i48,
-    StructArrayLayout8i15ui1ul4f68,
+    StructArrayLayout8i15ui1ul2f2ui64,
     StructArrayLayout1f4,
+    StructArrayLayout1ui2f12,
     StructArrayLayout1ul2ui8,
     StructArrayLayout2ui4,
     StructArrayLayout1ui2,

package/src/data/bucket/symbol_attributes.ts

@@ -100,8 +100,9 @@ export const symbolInstance = createLayout([
     {type: 'Uint16', name: 'useRuntimeCollisionCircles'},
     {type: 'Uint32', name: 'crossTileID'},
     {type: 'Float32', name: 'textBoxScale'},
-    {type: 'Float32', components: 2, name: 'textOffset'},
     {type: 'Float32', name: 'collisionCircleDiameter'},
+    {type: 'Uint16', name: 'textAnchorOffsetStartIndex'},
+    {type: 'Uint16', name: 'textAnchorOffsetEndIndex'}
 ]);
 
 export const glyphOffset = createLayout([
@@ -113,3 +114,8 @@ export const lineVertex = createLayout([
     {type: 'Int16', name: 'y'},
     {type: 'Int16', name: 'tileUnitDistanceFromAnchor'}
 ]);
+
+export const textAnchorOffset = createLayout([
+    {type: 'Uint16', name: 'textAnchor'},
+    {type: 'Float32', components: 2, name: 'textOffset'}
+]);

package/src/data/bucket/symbol_bucket.ts

@@ -13,7 +13,8 @@ import {SymbolLayoutArray,
     PlacedSymbolArray,
     SymbolInstanceArray,
     GlyphOffsetArray,
-    SymbolLineVertexArray
+    SymbolLineVertexArray,
+    TextAnchorOffsetArray
 } from '../array_types.g';
 
 import Point from '@mapbox/point-geometry';
@@ -333,6 +334,7 @@ export class SymbolBucket implements Bucket {
     lineVertexArray: SymbolLineVertexArray;
     features: Array<SymbolFeature>;
     symbolInstances: SymbolInstanceArray;
+    textAnchorOffsets: TextAnchorOffsetArray;
     collisionArrays: Array<CollisionArrays>;
     sortKeyRanges: Array<SortKeyRange>;
     pixelRatio: number;
@@ -412,6 +414,7 @@ export class SymbolBucket implements Bucket {
         this.glyphOffsetArray = new GlyphOffsetArray();
         this.lineVertexArray = new SymbolLineVertexArray();
         this.symbolInstances = new SymbolInstanceArray();
+        this.textAnchorOffsets = new TextAnchorOffsetArray();
     }
 
     calculateGlyphDependencies(text: string, stack: {[_: number]: boolean}, textAlongLine: boolean, allowVerticalPlacement: boolean, doesAllowVerticalWritingMode: boolean) {

package/src/render/draw_symbol.ts

@@ -13,7 +13,6 @@ import {addDynamicAttributes} from '../data/bucket/symbol_bucket';
 
 import {getAnchorAlignment, WritingMode} from '../symbol/shaping';
 import ONE_EM from '../symbol/one_em';
-import {evaluateVariableOffset, TextAnchor} from '../symbol/symbol_layout';
 
 import {
     SymbolIconUniformsType,
@@ -37,6 +36,7 @@ import type {SymbolLayerSpecification} from '@maplibre/maplibre-gl-style-spec';
 import type {Transform} from '../geo/transform';
 import type {ColorMode} from '../gl/color_mode';
 import type {Program} from './program';
+import type {TextAnchor} from '../style/style_layer/variable_text_anchor';
 
 type SymbolTileRenderState = {
     segments: SegmentVector;
@@ -65,11 +65,11 @@ export function drawSymbols(painter: Painter, sourceCache: SourceCache, layer: S
     // Disable the stencil test so that labels aren't clipped to tile boundaries.
     const stencilMode = StencilMode.disabled;
     const colorMode = painter.colorModeForRenderPass();
-    const variablePlacement = layer.layout.get('text-variable-anchor');
+    const hasVariablePlacement = layer._unevaluatedLayout.hasValue('text-variable-anchor') || layer._unevaluatedLayout.hasValue('text-variable-anchor-offset');
 
     //Compute variable-offsets before painting since icons and text data positioning
     //depend on each other in this case.
-    if (variablePlacement) {
+    if (hasVariablePlacement) {
         updateVariableAnchors(coords, painter, layer, sourceCache,
             layer.layout.get('text-rotation-alignment'),
             layer.layout.get('text-pitch-alignment'),
@@ -117,10 +117,9 @@ function calculateVariableRenderShift(
     const {horizontalAlign, verticalAlign} = getAnchorAlignment(anchor);
     const shiftX = -(horizontalAlign - 0.5) * width;
     const shiftY = -(verticalAlign - 0.5) * height;
-    const variableOffset = evaluateVariableOffset(anchor, textOffset);
     return new Point(
-        (shiftX / textBoxScale + variableOffset[0]) * renderTextSize,
-        (shiftY / textBoxScale + variableOffset[1]) * renderTextSize
+        (shiftX / textBoxScale + textOffset[0]) * renderTextSize,
+        (shiftY / textBoxScale + textOffset[1]) * renderTextSize
     );
 }
 
@@ -281,7 +280,7 @@ function drawLayerSymbols(
 
     const depthMode = painter.depthModeForSublayer(0, DepthMode.ReadOnly);
 
-    const variablePlacement = layer.layout.get('text-variable-anchor');
+    const hasVariablePlacement = layer._unevaluatedLayout.hasValue('text-variable-anchor') || layer._unevaluatedLayout.hasValue('text-variable-anchor-offset');
 
     const tileRenderState: Array<SymbolTileRenderState> = [];
 
@@ -332,7 +331,7 @@ function drawLayerSymbols(
         const labelPlaneMatrix = symbolProjection.getLabelPlaneMatrix(coord.posMatrix, pitchWithMap, rotateWithMap, painter.transform, s);
         const glCoordMatrix = symbolProjection.getGlCoordMatrix(coord.posMatrix, pitchWithMap, rotateWithMap, painter.transform, s);
 
-        const hasVariableAnchors = variablePlacement && bucket.hasTextData();
+        const hasVariableAnchors = hasVariablePlacement && bucket.hasTextData();
         const updateTextFitIcon = layer.layout.get('icon-text-fit') !== 'none' &&
             hasVariableAnchors &&
             bucket.hasIconData();
@@ -344,7 +343,7 @@ function drawLayerSymbols(
         }
 
         const matrix = painter.translatePosMatrix(coord.posMatrix, tile, translate, translateAnchor),
-            uLabelPlaneMatrix = (alongLine || (isText && variablePlacement) || updateTextFitIcon) ? identityMat4 : labelPlaneMatrix,
+            uLabelPlaneMatrix = (alongLine || (isText && hasVariablePlacement) || updateTextFitIcon) ? identityMat4 : labelPlaneMatrix,
             uglCoordMatrix = painter.translatePosMatrix(glCoordMatrix, tile, translate, translateAnchor, true);
 
         const hasHalo = isSDF && layer.paint.get(isText ? 'text-halo-width' : 'icon-halo-width').constantOr(1) !== 0;

package/src/style/properties.ts

@@ -317,6 +317,10 @@ export class Layout<Props> {
         this._values = (Object.create(properties.defaultPropertyValues) as any);
     }
 
+    hasValue<S extends keyof Props>(name: S) {
+        return this._values[name].value !== undefined;
+    }
+
     getValue<S extends keyof Props>(name: S) {
         return clone(this._values[name].value);
     }

package/src/style/style_layer/background_style_layer_properties.g.ts

@@ -14,12 +14,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color} from '@maplibre/maplibre-gl-style-spec';
-import type {Padding} from '@maplibre/maplibre-gl-style-spec';
-
-import type {Formatted} from '@maplibre/maplibre-gl-style-spec';
-
-import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 
 

package/src/style/style_layer/circle_style_layer_properties.g.ts

@@ -14,12 +14,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color} from '@maplibre/maplibre-gl-style-spec';
-import type {Padding} from '@maplibre/maplibre-gl-style-spec';
-
-import type {Formatted} from '@maplibre/maplibre-gl-style-spec';
-
-import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 
 export type CircleLayoutProps = {

package/src/style/style_layer/fill_extrusion_style_layer_properties.g.ts

@@ -14,12 +14,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color} from '@maplibre/maplibre-gl-style-spec';
-import type {Padding} from '@maplibre/maplibre-gl-style-spec';
-
-import type {Formatted} from '@maplibre/maplibre-gl-style-spec';
-
-import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 
 

package/src/style/style_layer/fill_style_layer_properties.g.ts

@@ -14,12 +14,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color} from '@maplibre/maplibre-gl-style-spec';
-import type {Padding} from '@maplibre/maplibre-gl-style-spec';
-
-import type {Formatted} from '@maplibre/maplibre-gl-style-spec';
-
-import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 
 export type FillLayoutProps = {

package/src/style/style_layer/heatmap_style_layer_properties.g.ts

@@ -14,12 +14,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color} from '@maplibre/maplibre-gl-style-spec';
-import type {Padding} from '@maplibre/maplibre-gl-style-spec';
-
-import type {Formatted} from '@maplibre/maplibre-gl-style-spec';
-
-import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 
 

package/src/style/style_layer/hillshade_style_layer_properties.g.ts

@@ -14,12 +14,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color} from '@maplibre/maplibre-gl-style-spec';
-import type {Padding} from '@maplibre/maplibre-gl-style-spec';
-
-import type {Formatted} from '@maplibre/maplibre-gl-style-spec';
-
-import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 
 

package/src/style/style_layer/line_style_layer_properties.g.ts

@@ -14,12 +14,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color} from '@maplibre/maplibre-gl-style-spec';
-import type {Padding} from '@maplibre/maplibre-gl-style-spec';
-
-import type {Formatted} from '@maplibre/maplibre-gl-style-spec';
-
-import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 
 export type LineLayoutProps = {

package/src/style/style_layer/raster_style_layer_properties.g.ts

@@ -14,12 +14,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color} from '@maplibre/maplibre-gl-style-spec';
-import type {Padding} from '@maplibre/maplibre-gl-style-spec';
-
-import type {Formatted} from '@maplibre/maplibre-gl-style-spec';
-
-import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 
 

package/src/style/style_layer/symbol_style_layer_properties.g.ts

@@ -14,12 +14,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color} from '@maplibre/maplibre-gl-style-spec';
-import type {Padding} from '@maplibre/maplibre-gl-style-spec';
-
-import type {Formatted} from '@maplibre/maplibre-gl-style-spec';
-
-import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 
 import {
@@ -58,6 +53,7 @@ export type SymbolLayoutProps = {
     "text-justify": DataDrivenProperty<"auto" | "left" | "center" | "right">,
     "text-radial-offset": DataDrivenProperty<number>,
     "text-variable-anchor": DataConstantProperty<Array<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">>,
+    "text-variable-anchor-offset": DataDrivenProperty<VariableAnchorOffsetCollection>,
     "text-anchor": DataDrivenProperty<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">,
     "text-max-angle": DataConstantProperty<number>,
     "text-writing-mode": DataConstantProperty<Array<"horizontal" | "vertical">>,
@@ -104,6 +100,7 @@ export type SymbolLayoutPropsPossiblyEvaluated = {
     "text-justify": PossiblyEvaluatedPropertyValue<"auto" | "left" | "center" | "right">,
     "text-radial-offset": PossiblyEvaluatedPropertyValue<number>,
     "text-variable-anchor": Array<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">,
+    "text-variable-anchor-offset": PossiblyEvaluatedPropertyValue<VariableAnchorOffsetCollection>,
     "text-anchor": PossiblyEvaluatedPropertyValue<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">,
     "text-max-angle": number,
     "text-writing-mode": Array<"horizontal" | "vertical">,
@@ -151,6 +148,7 @@ const getLayout = () => layout = layout || new Properties({
     "text-justify": new DataDrivenProperty(styleSpec["layout_symbol"]["text-justify"] as any as StylePropertySpecification),
     "text-radial-offset": new DataDrivenProperty(styleSpec["layout_symbol"]["text-radial-offset"] as any as StylePropertySpecification),
     "text-variable-anchor": new DataConstantProperty(styleSpec["layout_symbol"]["text-variable-anchor"] as any as StylePropertySpecification),
+    "text-variable-anchor-offset": new DataDrivenProperty(styleSpec["layout_symbol"]["text-variable-anchor-offset"] as any as StylePropertySpecification),
     "text-anchor": new DataDrivenProperty(styleSpec["layout_symbol"]["text-anchor"] as any as StylePropertySpecification),
     "text-max-angle": new DataConstantProperty(styleSpec["layout_symbol"]["text-max-angle"] as any as StylePropertySpecification),
     "text-writing-mode": new DataConstantProperty(styleSpec["layout_symbol"]["text-writing-mode"] as any as StylePropertySpecification),

package/src/style/style_layer/variable_text_anchor.test.ts

@@ -0,0 +1,117 @@
+import {EvaluationParameters} from '../evaluation_parameters';
+import {ZoomHistory} from '../zoom_history';
+import {SymbolStyleLayer} from './symbol_style_layer';
+import {INVALID_TEXT_OFFSET, evaluateVariableOffset, getTextVariableAnchorOffset} from './variable_text_anchor';
+
+describe('evaluateVariableOffset', () => {
+    test('fromRadialOffset', () => {
+        // Radial offset mode is invoked by using INVALID_TEXT_OFFSET as the Y value
+        const srcOffset = [10, INVALID_TEXT_OFFSET] as [number, number];
+
+        expect(evaluateVariableOffset('center', srcOffset)).toEqual([0, 0]);
+
+        // Top/bottom offsets are shifted by the default baseline (7)
+        expect(evaluateVariableOffset('top', srcOffset)).toEqual([0, 3]);
+        expect(evaluateVariableOffset('bottom', srcOffset)).toEqual([0, -3]);
+        expect(evaluateVariableOffset('left', srcOffset)).toEqual([10, 0]);
+        expect(evaluateVariableOffset('right', srcOffset)).toEqual([-10, 0]);
+
+        const hypotenuse = 10 / Math.SQRT2;
+        expect(evaluateVariableOffset('top-left', srcOffset)).toEqual([expect.closeTo(hypotenuse), expect.closeTo(hypotenuse - 7)]);
+        expect(evaluateVariableOffset('top-right', srcOffset)).toEqual([expect.closeTo(-hypotenuse), expect.closeTo(hypotenuse - 7)]);
+        expect(evaluateVariableOffset('bottom-left', srcOffset)).toEqual([expect.closeTo(hypotenuse), expect.closeTo(-hypotenuse + 7)]);
+        expect(evaluateVariableOffset('bottom-right', srcOffset)).toEqual([expect.closeTo(-hypotenuse), expect.closeTo(-hypotenuse + 7)]);
+    });
+
+    test('fromTextOffset', () => {
+        const srcOffset = [10, -10] as [number, number];
+
+        expect(evaluateVariableOffset('center', srcOffset)).toEqual([0, 0]);
+
+        // Top/bottom offsets are shifted by the default baseline (7)
+        expect(evaluateVariableOffset('top', srcOffset)).toEqual([0, 3]);
+        expect(evaluateVariableOffset('bottom', srcOffset)).toEqual([0, -3]);
+        expect(evaluateVariableOffset('left', srcOffset)).toEqual([10, 0]);
+        expect(evaluateVariableOffset('right', srcOffset)).toEqual([-10, 0]);
+        expect(evaluateVariableOffset('top-left', srcOffset)).toEqual([10, 3]);
+        expect(evaluateVariableOffset('top-right', srcOffset)).toEqual([-10, 3]);
+        expect(evaluateVariableOffset('bottom-left', srcOffset)).toEqual([10, -3]);
+        expect(evaluateVariableOffset('bottom-right', srcOffset)).toEqual([-10, -3]);
+    });
+});
+
+function createSymbolLayer(layerProperties) {
+    const layer = new SymbolStyleLayer(layerProperties);
+    layer.recalculate({zoom: 0, zoomHistory: {} as ZoomHistory} as EvaluationParameters, []);
+    return layer;
+}
+
+describe('getTextVariableAnchorOffset', () => {
+    test('defaults - no props set', () => {
+        const props = {};
+        const layer = createSymbolLayer(props);
+
+        expect(getTextVariableAnchorOffset(layer, null, null)).toBeNull();
+    });
+
+    test('text-variable-anchor-offset set', () => {
+        const props = {layout: {'text-variable-anchor-offset': ['top', [1, 1], 'bottom', [2, 2]]}};
+        const layer = createSymbolLayer(props);
+
+        const offset = getTextVariableAnchorOffset(layer, null, null);
+        expect(offset).toBeDefined();
+        // Offset converted to EMs, accounting for baseline shift on Y axis
+        expect(offset.toString()).toBe('["top",[24,17],"bottom",[48,55]]');
+    });
+
+    test('text-variable-anchor set', () => {
+        const props = {layout: {'text-variable-anchor': ['top']}};
+        const layer = createSymbolLayer(props);
+
+        const offset = getTextVariableAnchorOffset(layer, null, null);
+        expect(offset).toBeDefined();
+        // Default offset (0, 0) converted to EMs, accounting for baseline shift on Y axis
+        expect(offset.toString()).toBe('["top",[0,-7]]');
+    });
+
+    test('text-variable-anchor and text-offset set', () => {
+        const props = {layout: {'text-variable-anchor': ['top'], 'text-offset': [1, 1]}};
+        const layer = createSymbolLayer(props);
+
+        const offset = getTextVariableAnchorOffset(layer, null, null);
+        expect(offset).toBeDefined();
+        // Offset converted to EMs, accounting for baseline shift on Y axis
+        expect(offset.toString()).toBe('["top",[0,17]]');
+    });
+
+    test('text-variable-anchor and text-radial-offset set', () => {
+        const props = {layout: {'text-variable-anchor': ['top'], 'text-radial-offset': 2}};
+        const layer = createSymbolLayer(props);
+
+        const offset = getTextVariableAnchorOffset(layer, null, null);
+        expect(offset).toBeDefined();
+        // Offset converted to EMs, accounting for baseline shift on Y axis
+        expect(offset.toString()).toBe('["top",[0,41]]');
+    });
+
+    test('text-variable-anchor, text-offset, and text-radial-offset set', () => {
+        const props = {layout: {'text-variable-anchor': ['top'], 'text-offset': [1, 1], 'text-radial-offset': 2}};
+        const layer = createSymbolLayer(props);
+
+        const offset = getTextVariableAnchorOffset(layer, null, null);
+        expect(offset).toBeDefined();
+        // Offset converted to EMs, accounting for baseline shift on Y axis
+        expect(offset.toString()).toBe('["top",[0,41]]');
+    });
+
+    test('text-variable-anchor and text-variable-anchor-offset set', () => {
+        const props = {layout: {'text-variable-anchor-offset': ['top', [1, 1]], 'text-variable-anchor': ['bottom']}};
+        const layer = createSymbolLayer(props);
+
+        const offset = getTextVariableAnchorOffset(layer, null, null);
+        expect(offset).toBeDefined();
+        // Offset converted to EMs, accounting for baseline shift on Y axis
+        expect(offset.toString()).toBe('["top",[24,17]]');
+    });
+});
+