From 192749794df5bb6139524fbf37e7f6b53bc1bda5 Mon Sep 17 00:00:00 2001
From: Xiaoji Chen <Pessimistress@users.noreply.github.com>
Date: Thu, 21 Apr 2022 11:49:13 -0700
Subject: [PATCH] Fix rendering bug using terrain (#1841)

---
 src/mapbox/mapbox.ts                 | 12 ++++++------
 src/types/index.ts                   |  2 ++
 src/utils/transform.ts               | 11 +++++++++++
 test/src/utils/mapbox-gl-mock/map.js |  1 +
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/mapbox/mapbox.ts b/src/mapbox/mapbox.ts
index f2fd5ad3..9a6b0819 100644
--- a/src/mapbox/mapbox.ts
+++ b/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
diff --git a/src/types/index.ts b/src/types/index.ts
index db358cf0..ebd02776 100644
--- a/src/types/index.ts
+++ b/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;
diff --git a/src/utils/transform.ts b/src/utils/transform.ts
index 4d286916..4c46849e 100644
--- a/src/utils/transform.ts
+++ b/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
diff --git a/test/src/utils/mapbox-gl-mock/map.js b/test/src/utils/mapbox-gl-mock/map.js
index 544be3d3..cdbc5707 100644
--- a/test/src/utils/mapbox-gl-mock/map.js
+++ b/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;