Fix rendering bug using terrain (#1841)

Author: Pessimistress

src/mapbox/mapbox.ts

@@ -1,4 +1,4 @@
-import {transformToViewState, applyViewStateToTransform} from '../utils/transform';
+import {transformToViewState, applyViewStateToTransform, cloneTransform} from '../utils/transform';
 import {normalizeStyle} from '../utils/style-utils';
 import {deepEqual} from '../utils/deep-equal';
 
@@ -451,7 +451,7 @@ export default class Mapbox {
 
     const settingsChanged = this._updateSettings(props, oldProps);
     if (settingsChanged) {
-      this._renderTransform = this._map.transform.clone();
+      this._renderTransform = cloneTransform(this._map.transform);
     }
     const sizeChanged = this._updateSize(props);
     const viewStateChanged = this._updateViewState(props, true);
@@ -542,7 +542,7 @@ export default class Mapbox {
     if (props.cursor) {
       map.getCanvas().style.cursor = props.cursor;
     }
-    this._renderTransform = map.transform.clone();
+    this._renderTransform = cloneTransform(map.transform);
 
     // Hack
     // Insert code into map's render cycle
@@ -723,11 +723,10 @@ export default class Mapbox {
         if (!nextProps.terrain || map.getSource(nextProps.terrain.source)) {
           changed = true;
           map.setTerrain(nextProps.terrain);
-          // Copy changes to the transform
-          // @ts-ignore
-          this._renderTransform.elevation = map.transform.elevation;
         }
       }
+      // Copy changes to the transform
+      this._renderTransform.elevation = map.transform.elevation;
     }
     return changed;
   }
@@ -878,6 +877,7 @@ export default class Mapbox {
     const tr = this._map.transform;
     // Make sure camera matches the current props
     this._map.transform = this._renderTransform;
+    this._map.painter.transform = this._renderTransform;
 
     this._onAfterRepaint = () => {
       // Restores camera state before render/load events are fired

src/types/index.ts

@@ -29,6 +29,8 @@ export type Transform = {
   bearing: number;
   pitch: number;
   padding: PaddingOptions;
+  elevation: any;
+  pixelsToGLUnits: [number, number];
 
   clone: () => Transform;
   resize: (width: number, height: number) => void;

src/utils/transform.ts

@@ -1,6 +1,17 @@
 import type {MapboxProps} from '../mapbox/mapbox';
 import type {Transform, ViewState} from '../types';
 
+/**
+ * Make a copy of a transform
+ * @param tr
+ */
+export function cloneTransform(tr: Transform): Transform {
+  const newTransform = tr.clone();
+  // Work around mapbox bug - this value is not assigned in clone(), only in resize()
+  newTransform.pixelsToGLUnits = tr.pixelsToGLUnits;
+  return newTransform;
+}
+
 /**
  * Capture a transform's current state
  * @param transform

test/src/utils/mapbox-gl-mock/map.js

@@ -35,6 +35,7 @@ export default class Map extends Evented {
     this.transform.zoom = this.options.zoom || 0;
     this.transform.pitch = this.options.pitch || 0;
     this.transform.bearing = this.options.bearing || 0;
+    this.painter = {transform: this.transform};
 
     setTimeout(() => {
       this.style._loaded = true;