Add support for text-rotate, text-size and text-offset to appearances (internal-7731)

GitOrigin-RevId: 213415f3bab96d41f09d8cc4d047369f11ac83e2

Author: ibesora

src/data/bucket.ts

@@ -22,6 +22,7 @@ import type {ElevationFeature} from '../../3d-style/elevation/elevation_feature'
 import type {ImageId, StringifiedImageId} from '../style-spec/expression/types/image_id';
 import type {StyleModelMap} from '../style/style_mode';
 import type {GlobalProperties} from '../style-spec/expression';
+import type ImageManager from '../render/image_manager';
 
 export type BucketParameters<Layer extends TypedStyleLayer> = {
     index: number;
@@ -137,7 +138,7 @@ export interface Bucket {
      */
     destroy: (reload?: boolean) => void;
     updateFootprints: (id: UnwrappedTileID, footprints: Array<TileFootprint>) => void;
-    updateAppearances: (canonical?: CanonicalTileID, featureState?: FeatureStates, availableImages?: Array<ImageId>, globalProperties?: GlobalProperties) => void;
+    updateAppearances: (canonical?: CanonicalTileID, featureState?: FeatureStates, availableImages?: Array<ImageId>, globalProperties?: GlobalProperties, imageManager?: ImageManager) => void;
 }
 
 export function deserialize(input: Array<Bucket>, style: Style): Record<string, Bucket> {

src/data/bucket/symbol_bucket.ts

@@ -1,7 +1,7 @@
 #include "_prelude_terrain.vertex.glsl"
 #include "_prelude_shadow.vertex.glsl"
 
-#define APPEARANCE_ICON 1.0
+#define USING_APPEARANCE 1.0
 
 in vec4 a_pos_offset;
 in vec4 a_tex_size;
@@ -125,15 +125,15 @@ void main() {
 
     float a_size_min = floor(a_size[0] * 0.5);
     float a_size_max =  floor(a_size[1] * 0.5);
-    float a_apperance_icon = a_size[1] - 2.0 * a_size_max;
+    float a_apperance = a_size[1] - 2.0 * a_size_max;
     vec2 a_pxoffset = a_pixeloffset.xy;
     vec2 a_min_font_scale = a_pixeloffset.zw / 256.0;
 
     highp float segment_angle = -a_projected_pos[3];
     float size;
 
-    // When rendering icons for appearances, we use a_size_max to store the icon size
-    if (a_apperance_icon == APPEARANCE_ICON) {
+    // When rendering appearances, we use a_size_max to store the size
+    if (a_apperance == USING_APPEARANCE) {
         size = a_size_max / 128.0;
     } else if (!u_is_size_zoom_constant && !u_is_size_feature_constant) {
         size = mix(a_size_min, a_size_max, u_size_t) / 128.0;

src/shaders/symbol.vertex.glsl

@@ -726,7 +726,7 @@ class Tile {
                     brightness: painter.style.getBrightness() || 0,
                     worldview: painter.worldview
                 };
-                bucket.updateAppearances(this.tileID.canonical, sourceLayerStates, availableImages, globalProperties);
+                bucket.updateAppearances(this.tileID.canonical, sourceLayerStates, availableImages, globalProperties, painter.imageManager);
             }
             if (bucket instanceof LineBucket || bucket instanceof FillBucket) {
                 if (painter._terrain && painter._terrain.enabled && sourceCache && bucket.uploadPending()) {

src/source/tile.ts

@@ -296,12 +296,14 @@ export function getGlyphQuads(
     feature: Feature,
     imageMap: StyleImageMap<StringifiedImageVariant>,
     allowVerticalPlacement: boolean,
+    textRotate?: number,
 ): Array<SymbolQuad> {
     const quads = [];
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     if (shaping.positionedLines.length === 0) return quads;
 
-    const textRotate = layer.layout.get('text-rotate').evaluate(feature, {}) * Math.PI / 180;
+    const textRotateValue = textRotate !== undefined ? textRotate : layer.layout.get('text-rotate').evaluate(feature, {});
+    const textRotateRadians = textRotateValue * Math.PI / 180;
     const rotateOffset = getRotateOffset(textOffset);
 
     let shapingHeight = Math.abs(shaping.top - shaping.bottom);
@@ -467,7 +469,7 @@ export function getGlyphQuads(
                 br = new Point(tl.x + paddedHeight, tl.y - paddedWidth);
             }
 
-            if (textRotate) {
+            if (textRotateRadians) {
                 let center: Point;
                 if (!alongLine) {
                     if (useRotateOffset) {
@@ -478,10 +480,10 @@ export function getGlyphQuads(
                 } else {
                     center = new Point(0, 0);
                 }
-                tl._rotateAround(textRotate, center);
-                tr._rotateAround(textRotate, center);
-                bl._rotateAround(textRotate, center);
-                br._rotateAround(textRotate, center);
+                tl._rotateAround(textRotateRadians, center);
+                tr._rotateAround(textRotateRadians, center);
+                bl._rotateAround(textRotateRadians, center);
+                br._rotateAround(textRotateRadians, center);
             }
 
             const pixelOffsetTL = new Point(0, 0);

src/symbol/quads.ts

@@ -638,7 +638,7 @@ function updateIconBoundingBoxes(input : {iconBBox: SymbolBoundingBox | null, ic
     iconOffset: [number, number], baseIconRotate: number, layoutIconSize: number, sizes: Sizes, shapedIcon: PositionedIcon, imagePositions: ImagePositionMap, iconScaleFactor: number,
     iconAnchor: SymbolAnchor) {
 
-    const {appearanceIconOffset, appearanceIconRotate, appearanceIconSize} = getAppearanceIconValues(appearance, symbolLayer, feature, canonical, iconOffset, baseIconRotate, layoutIconSize, sizes);
+    const {appearanceIconOffset, appearanceIconRotate, appearanceIconSize} = getAppearanceIconValues(appearance, symbolLayer, feature, canonical, iconOffset, baseIconRotate, layoutIconSize, sizes.iconScaleFactor);
 
     let appearanceShapedIcon: PositionedIcon | null = null;
     let appearanceVerticallyShapedIcon: PositionedIcon | null = null;
@@ -667,8 +667,8 @@ function updateIconBoundingBoxes(input : {iconBBox: SymbolBoundingBox | null, ic
     }
 }
 
-function getAppearanceIconValues(appearance: SymbolAppearance, symbolLayer: SymbolStyleLayer, feature: SymbolFeature,
-    canonical: CanonicalTileID, iconOffset: [number, number], baseIconRotate: number, layoutIconSize: number, sizes: Sizes) {
+export function getAppearanceIconValues(appearance: SymbolAppearance, symbolLayer: SymbolStyleLayer, feature: SymbolFeature,
+    canonical: CanonicalTileID, iconOffset: [number, number], baseIconRotate: number, layoutIconSize: number, iconScaleFactor: number) {
     const appearanceIconOffsetValue = appearance.hasProperty('icon-offset') ?
         symbolLayer.getAppearanceValueAndResolveTokens(appearance, 'icon-offset', feature, canonical, []) :
         null;
@@ -687,7 +687,7 @@ function getAppearanceIconValues(appearance: SymbolAppearance, symbolLayer: Symb
         symbolLayer.getAppearanceValueAndResolveTokens(appearance, 'icon-size', feature, canonical, []) :
         null;
     const appearanceIconSize = (typeof appearanceIconSizeValue === 'number') ?
-        appearanceIconSizeValue * sizes.iconScaleFactor :
+        appearanceIconSizeValue * iconScaleFactor :
         layoutIconSize;
 
     return {appearanceIconOffset, appearanceIconRotate, appearanceIconSize};
@@ -724,7 +724,7 @@ function updateTextBoundingBoxes(input: {textBBox: SymbolBoundingBox | null, tex
     }
 }
 
-function getAppearanceTextValues(appearance: SymbolAppearance, symbolLayer: SymbolStyleLayer, feature: SymbolFeature,
+export function getAppearanceTextValues(appearance: SymbolAppearance, symbolLayer: SymbolStyleLayer, feature: SymbolFeature,
     canonical: CanonicalTileID, textOffset: [number, number], baseTextRotate: number, layoutTextSize: number) {
     const appearanceTextOffsetValue = appearance.hasProperty('text-offset') ?
         symbolLayer.getAppearanceValueAndResolveTokens(appearance, 'text-offset', feature, canonical, []) :
@@ -919,6 +919,12 @@ function fitIconsToText(bucket: SymbolBucket, shapedIcon: PositionedIcon | undef
     return {defaultShapedIcon, verticallyShapedIcon};
 }
 
+export function computeFontScale(textSize: number, textScaleFactor: number) {
+    const glyphSize = ONE_EM;
+    const fontScale = textSize * textScaleFactor / glyphSize;
+    return fontScale;
+}
+
 /**
  * Given a feature and its shaped text and icon data, add a 'symbol
  * instance' for each _possible_ placement of the symbol feature.
@@ -963,17 +969,19 @@ function addFeature(bucket: SymbolBucket,
     const layout = bucket.layers[0].layout;
 
     const glyphSize = ONE_EM;
-    const fontScale = layoutTextSize * sizes.textScaleFactor / glyphSize;
+    const fontScale = computeFontScale(layoutTextSize, sizes.textScaleFactor);
 
     const defaultShaping = getDefaultHorizontalShaping(shapedTextOrientations.horizontal) || shapedTextOrientations.vertical;
 
-    // Store text shaping data for icon-text-fit appearance updates
-    if (iconTextFit !== 'none' && bucket.appearanceFeatureData && feature.index < bucket.appearanceFeatureData.length) {
-        const featureData = bucket.appearanceFeatureData[feature.index];
+    // Store text shaping data for icon-text-fit and text appearance updates
+    const hasTextAppearances = bucket.hasAnyAppearanceProperty(['text-size', 'text-offset', 'text-rotate']);
+    if ((iconTextFit !== 'none' || hasTextAppearances) && bucket.appearanceFeatureData && bucket.featureToAppearanceIndex[feature.index] < bucket.appearanceFeatureData.length) {
+        const featureData = bucket.appearanceFeatureData[bucket.featureToAppearanceIndex[feature.index]];
         if (featureData) {
             featureData.textShaping = defaultShaping;
             featureData.iconTextFitPadding = layout.get('icon-text-fit-padding').evaluate(feature, {}, canonical);
             featureData.fontScale = fontScale;
+            featureData.textScaleFactor = sizes.textScaleFactor;
         }
     }
     const isGlobe = projection.name === 'globe';
@@ -1115,27 +1123,12 @@ function addTextVertices(bucket: SymbolBucket,
                          symbolInstanceIndex: number,
                          brightness?: number | null) {
     const glyphQuads = getGlyphQuads(tileAnchor, shapedText, textOffset,
-                            layer, textAlongLine, feature, imageMap, bucket.allowVerticalPlacement);
+                            layer, textAlongLine, feature, imageMap, bucket.allowVerticalPlacement, undefined);
 
-    const sizeData = bucket.textSizeData;
-    let textSizeData: number[] = null;
-
-    if (sizeData.kind === 'source') {
-        textSizeData = [
-            SIZE_PACK_FACTOR * layer.layout.get('text-size').evaluate(feature, {}, canonical) * sizes.textScaleFactor
-        ];
-        if (textSizeData[0] > MAX_PACKED_SIZE) {
-            warnOnce(`${bucket.layerIds[0]}: Value for "text-size" is >= ${MAX_GLYPH_ICON_SIZE}. Reduce your "text-size".`);
-        }
-    } else if (sizeData.kind === 'composite') {
-        textSizeData = [
-            SIZE_PACK_FACTOR * sizes.compositeTextSizes[0].evaluate(feature, {}, canonical) * sizes.textScaleFactor,
-            SIZE_PACK_FACTOR * sizes.compositeTextSizes[1].evaluate(feature, {}, canonical) * sizes.textScaleFactor
-        ];
-        if (textSizeData[0] > MAX_PACKED_SIZE || textSizeData[1] > MAX_PACKED_SIZE) {
-            warnOnce(`${bucket.layerIds[0]}: Value for "text-size" is >= ${MAX_GLYPH_ICON_SIZE}. Reduce your "text-size".`);
-        }
-    }
+    const evaluatedTextSize = layer.layout.get('text-size').evaluate(feature, {}, canonical);
+    const minZoomSize = sizes.compositeTextSizes ? sizes.compositeTextSizes[0].evaluate(feature, {}, canonical) : 0;
+    const maxZoomSize = sizes.compositeTextSizes ? sizes.compositeTextSizes[1].evaluate(feature, {}, canonical) : 0;
+    const textSizeData = getSizeDataFromKind(bucket.layerIds[0], bucket.textSizeData, evaluatedTextSize, sizes.textScaleFactor, minZoomSize, maxZoomSize);
 
     bucket.addSymbols(
         bucket.text,
@@ -1166,6 +1159,32 @@ function addTextVertices(bucket: SymbolBucket,
     return glyphQuads.length * 4;
 }
 
+export function getSizeDataFromKind(layerId: string, inputSizeData: SizeData, evaluatedTextSize: number, textScaleFactor: number,
+    minZoomSize: number, maxZoomSize: number
+) {
+    const sizeData = inputSizeData;
+    let textSizeData: number[] = null;
+
+    if (sizeData.kind === 'source') {
+        textSizeData = [
+            SIZE_PACK_FACTOR * evaluatedTextSize * textScaleFactor
+        ];
+        if (textSizeData[0] > MAX_PACKED_SIZE) {
+            warnOnce(`${layerId}: Value for "text-size" is >= ${MAX_GLYPH_ICON_SIZE}. Reduce your "text-size".`);
+        }
+    } else if (sizeData.kind === 'composite') {
+        textSizeData = [
+            SIZE_PACK_FACTOR * minZoomSize * textScaleFactor,
+            SIZE_PACK_FACTOR * maxZoomSize * textScaleFactor
+        ];
+        if (textSizeData[0] > MAX_PACKED_SIZE || textSizeData[1] > MAX_PACKED_SIZE) {
+            warnOnce(`${layerId}: Value for "text-size" is >= ${MAX_GLYPH_ICON_SIZE}. Reduce your "text-size".`);
+        }
+    }
+
+    return textSizeData;
+}
+
 function getDefaultHorizontalShaping(horizontalShaping: Partial<Record<TextJustify, Shaping>>): Shaping | null {
     // We don't care which shaping we get because this is used for collision purposes
     // and all the justifications have the same collision box
@@ -1345,7 +1364,6 @@ function addSymbol(bucket: SymbolBucket,
     // For more info check `updateVariableAnchors` in `draw_symbol.js` .
 
     if (shapedIcon) {
-        const sizeData = bucket.iconSizeData;
         const iconRotate = layer.layout.get('icon-rotate').evaluate(feature, {}, canonical);
         const iconQuads = getIconQuads(shapedIcon, iconRotate, isSDFIcon, hasIconTextFit, sizes.iconScaleFactor);
         const verticalIconQuads = verticallyShapedIcon ? getIconQuads(verticallyShapedIcon, iconRotate, isSDFIcon, hasIconTextFit, sizes.iconScaleFactor) : undefined;
@@ -1357,26 +1375,10 @@ function addSymbol(bucket: SymbolBucket,
             hasIconTextFit);
         numIconVertices = maxQuadCount * 4;
 
-        let iconSizeData = null;
-
-        if (sizeData.kind === 'source') {
-            iconSizeData = [
-                SIZE_PACK_FACTOR * layer.layout.get('icon-size').evaluate(feature, {}, canonical) * sizes.iconScaleFactor
-            ];
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-            if (iconSizeData[0] > MAX_PACKED_SIZE) {
-                warnOnce(`${bucket.layerIds[0]}: Value for "icon-size" is >= ${MAX_GLYPH_ICON_SIZE}. Reduce your "icon-size".`);
-            }
-        } else if (sizeData.kind === 'composite') {
-            iconSizeData = [
-                SIZE_PACK_FACTOR * sizes.compositeIconSizes[0].evaluate(feature, {}, canonical) * sizes.iconScaleFactor,
-                SIZE_PACK_FACTOR * sizes.compositeIconSizes[1].evaluate(feature, {}, canonical) * sizes.iconScaleFactor
-            ];
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-            if (iconSizeData[0] > MAX_PACKED_SIZE || iconSizeData[1] > MAX_PACKED_SIZE) {
-                warnOnce(`${bucket.layerIds[0]}: Value for "icon-size" is >= ${MAX_GLYPH_ICON_SIZE}. Reduce your "icon-size".`);
-            }
-        }
+        const evaluatedIconSize = layer.layout.get('icon-size').evaluate(feature, {}, canonical);
+        const minZoomSize = sizes.compositeIconSizes ? sizes.compositeIconSizes[0].evaluate(feature, {}, canonical) : 0;
+        const maxZoomSize = sizes.compositeIconSizes ? sizes.compositeIconSizes[1].evaluate(feature, {}, canonical) : 0;
+        const iconSizeData = getSizeDataFromKind(bucket.layerIds[0], bucket.iconSizeData, evaluatedIconSize, sizes.iconScaleFactor, minZoomSize, maxZoomSize);
 
         bucket.addSymbols(
             bucket.icon,

src/symbol/symbol_layout.ts

@@ -7,8 +7,6 @@
       "height": 64,
       "width": 64,
       "operations": [
-            ["wait"],
-            ["setPitch", 45],
             ["wait"]
         ]
     }
@@ -60,20 +58,29 @@
     }
   },
   "sprite": "local://sprites/sprite",
+  "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
   "layers": [
     {
       "id": "icon",
       "type": "symbol",
       "source": "geojson",
       "layout": {
-        "icon-image": "bank-12"
+        "icon-image": "bank-12",
+        "text-field": "Test",
+        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
+        "text-size": 12,
+        "text-offset": [0, 0],
+        "text-rotate": 0
       },
       "appearances": [
         {
           "name": "test",
           "condition": [">=", ["measure-light", "brightness"], 0.5],
           "properties": {
-            "icon-image": "bakery-12"
+            "icon-image": "bakery-12",
+            "text-size": 20,
+            "text-offset": [1, 1],
+            "text-rotate": 30
           }
         }
       ]

test/integration/render-tests/appearance/brightness/expected.png

@@ -28,14 +28,23 @@
       "layout": {
         "icon-image": "nine-part",
         "icon-allow-overlap": true,
-        "icon-ignore-placement": true
+        "icon-ignore-placement": true,
+        "text-allow-overlap": true,
+        "text-field": "Text",
+        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
+        "text-size": 14,
+        "text-offset": [0, 0],
+        "text-rotate": 0
       },
       "appearances": [
         {
           "name": "test",
           "condition": [">=", ["zoom"], 1],
           "properties": {
-            "icon-image": "nine-part-content"
+            "icon-image": "nine-part-content",
+            "text-size": 22,
+            "text-offset": [0.5, -0.5],
+            "text-rotate": 20
           }
         }
       ]