Fix

GitOrigin-RevId: e36781d548f3d2986da2dae9345d3538f0311502

Author: ibesora

src/style/pauseable_placement.ts

@@ -57,7 +57,7 @@ class LayerPlacement {
 
         while (this._currentPartIndex < bucketParts.length) {
             const bucketPart = bucketParts[this._currentPartIndex];
-            placement.placeLayerBucketPart(bucketPart, this._seenCrossTileIDs, showCollisionBoxes, bucketPart.symbolInstanceStart === 0, scaleFactor);
+            placement.placeLayerBucketPart(bucketPart, this._seenCrossTileIDs, showCollisionBoxes, scaleFactor);
             this._currentPartIndex++;
             if (shouldPausePlacement()) {
                 return true;

src/style/style.ts

@@ -4722,7 +4722,7 @@ class Style extends Evented<MapEvents> {
                 if (styleLayer.type !== 'symbol') continue;
                 if (styleLayer.visibility === 'none') continue;
                 const checkAgainstClipLayer = this.isLayerClipped(styleLayer);
-                this.placement.updateLayerOpacities(styleLayer, layerTiles[makeFQID(styleLayer.source, styleLayer.scope)], i, checkAgainstClipLayer ? replacementSource : null);
+                this.placement.updateLayerOpacities(styleLayer, layerTiles[makeFQID(styleLayer.source, styleLayer.scope)], i, checkAgainstClipLayer ? replacementSource : null, showCollisionBoxes, this.map.painter.scaleFactor);
             }
         }
 

src/symbol/placement.ts

@@ -437,8 +437,8 @@ export class Placement {
         }
     }
 
-    placeLayerBucketPart(bucketPart: BucketPart, seenCrossTileIDs: Set<number>, showCollisionBoxes: boolean, updateCollisionBoxIfNecessary: boolean, scaleFactor: number = 1) {
-        this.algorithm.placeLayerBucketPart(this, bucketPart, seenCrossTileIDs, showCollisionBoxes, updateCollisionBoxIfNecessary, scaleFactor);
+    placeLayerBucketPart(bucketPart: BucketPart, seenCrossTileIDs: Set<number>, showCollisionBoxes: boolean, scaleFactor: number = 1) {
+        this.algorithm.placeLayerBucketPart(this, bucketPart, seenCrossTileIDs, showCollisionBoxes, scaleFactor);
     }
 
     commit(now: number): void {
@@ -504,7 +504,7 @@ export class Placement {
         }
     }
 
-    updateLayerOpacities(styleLayer: TypedStyleLayer, tiles: Array<Tile>, layerIndex: number, replacementSource?: ReplacementSource | null) {
+    updateLayerOpacities(styleLayer: TypedStyleLayer, tiles: Array<Tile>, layerIndex: number, replacementSource?: ReplacementSource | null, showCollisionBoxes: boolean = false, scaleFactor: number = 1) {
         if (replacementSource) {
             this.lastReplacementSourceUpdateTime = replacementSource.updateTime;
         }
@@ -521,6 +521,18 @@ export class Placement {
                     symbolBucket.hdExt.updateRoadElevation(symbolBucket, tile.tileID.canonical);
                 }
                 symbolBucket.updateZOffset();
+
+                // Collision debug boxes encode elevation directly in their vertex data, so they must be
+                // rebuilt here (after zOffset is refreshed above) rather than during placement, otherwise
+                // they'd render one placement cycle behind the actual symbol quads whenever elevation changes.
+                if (showCollisionBoxes && tile.collisionBoxArray) {
+                    const layout = symbolBucket.layers[0].layout;
+                    const [textSizeScaleRangeMin, textSizeScaleRangeMax] = layout.get('text-size-scale-range');
+                    const [iconSizeScaleRangeMin, iconSizeScaleRangeMax] = layout.get('icon-size-scale-range');
+                    const textScaleFactor = clamp(scaleFactor, textSizeScaleRangeMin, textSizeScaleRangeMax);
+                    const iconScaleFactor = clamp(scaleFactor, iconSizeScaleRangeMin, iconSizeScaleRangeMax);
+                    symbolBucket.updateCollisionDebugBuffers(this.transform.zoom, tile.collisionBoxArray, textScaleFactor, iconScaleFactor);
+                }
             }
         }
     }

src/symbol/placement_algorithm.ts

@@ -105,7 +105,6 @@ export interface PlacementAlgorithm {
         bucketPart: BucketPart,
         seenCrossTileIDs: Set<number>,
         showCollisionBoxes: boolean,
-        updateCollisionBoxIfNecessary: boolean,
         scaleFactor: number,
     ) => void;
 

src/symbol/placement_algorithms/default.ts

@@ -1,7 +1,7 @@
 import Point from '@mapbox/point-geometry';
 import assert from '../../style-spec/util/assert';
 import {mat4, vec4} from 'gl-matrix';
-import {clamp, warnOnce} from '../../util/util';
+import {warnOnce} from '../../util/util';
 import CollisionIndex from '../collision_index';
 import ONE_EM from '../one_em';
 import {WritingMode} from '../shaping';
@@ -48,7 +48,6 @@ export class DefaultPlacementAlgorithm implements PlacementAlgorithm {
         bucketPart: BucketPart,
         seenCrossTileIDs: Set<number>,
         showCollisionBoxes: boolean,
-        updateCollisionBoxIfNecessary: boolean,
         scaleFactor: number = 1,
     ): void {
         const {
@@ -80,10 +79,6 @@ export class DefaultPlacementAlgorithm implements PlacementAlgorithm {
         const symbolZOffset = paint.get('symbol-z-offset');
         const elevationFromSea = layout.get('symbol-elevation-reference') === 'sea';
         const symbolPlacement = layout.get('symbol-placement');
-        const [textSizeScaleRangeMin, textSizeScaleRangeMax] = layout.get('text-size-scale-range');
-        const [iconSizeScaleRangeMin, iconSizeScaleRangeMax] = layout.get('icon-size-scale-range');
-        const textScaleFactor = clamp(scaleFactor, textSizeScaleRangeMin, textSizeScaleRangeMax);
-        const iconScaleFactor = clamp(scaleFactor, iconSizeScaleRangeMin, iconSizeScaleRangeMax);
         const textVariableAnchor = layout.get('text-variable-anchor');
 
         const isTextPlacedAlongLine = textRotateWithMap && symbolPlacement !== 'point';
@@ -106,10 +101,6 @@ export class DefaultPlacementAlgorithm implements PlacementAlgorithm {
             bucket.deserializeCollisionBoxes(collisionBoxArray);
         }
 
-        if (showCollisionBoxes && updateCollisionBoxIfNecessary) {
-            bucket.updateCollisionDebugBuffers(placement.transform.zoom, collisionBoxArray, textScaleFactor, iconScaleFactor);
-        }
-
         const placeSymbol = (symbolInstance: SymbolInstance, boxIndex: number, collisionArrays: CollisionArrays) => {
             const {crossTileID, numVerticalGlyphVertices} = symbolInstance;
 

test/integration/render-tests/symbol-elevation/z-elevation-with-sort-by-viewport-y-and-collision-boxes/style.json

@@ -10,9 +10,6 @@
       ],
       "image-threshold": [
         {"platform-tag-contains": "", "threshold": 0.0035}
-      ],
-      "skip-test": [
-        {"platform-tag-contains": "web", "reason": "Flaky symbol placement"}
       ]
     }
   },