fix(mapbox): guard against null viewport when canvas has zero dimensions

modules/mapbox/src/deck-utils.ts

@@ -137,6 +137,11 @@ export function drawLayer(
     clearStack = true;
   }
 
+  if (!currentViewport) {
+    // Viewport could not be created (e.g. canvas has zero dimensions).
+    return;
+  }
+
   deck._drawLayers('mapbox-repaint', {
     viewports: [currentViewport],
     layerFilter: params =>
@@ -167,6 +172,11 @@ export function drawLayerGroup(
     clearStack = true;
   }
 
+  if (!currentViewport) {
+    // Viewport could not be created (e.g. canvas has zero dimensions).
+    return;
+  }
+
   deck._drawLayers('mapbox-repaint', {
     viewports: [currentViewport],
     layerFilter: params => {

test/modules/mapbox/mapbox-gl-mock/map.ts

@@ -136,7 +136,11 @@ export default class Map extends Evented {
   }
 
   _render() {
-    this.style.render();
+    try {
+      this.style.render();
+    } catch (e) {
+      this._renderError = e;
+    }
     this.fire(new Event('render'));
   }
 

test/modules/mapbox/mapbox-layer.spec.ts

@@ -131,6 +131,7 @@ test('MapboxLayer#external Deck multiple views supplied', t => {
     map.addLayer(layerDefaultView);
 
     map.on('render', () => {
+      t.notOk((map as any)._renderError, 'render should not throw');
       t.deepEqual(
         drawLog,
         [
@@ -184,6 +185,7 @@ test('MapboxLayer#external Deck custom views', t => {
 
     map.addLayer(new MapboxLayer({id: 'scatterplot'}));
     map.on('render', () => {
+      t.notOk((map as any)._renderError, 'render should not throw');
       t.deepEqual(
         drawLog,
         [
@@ -200,6 +202,46 @@ test('MapboxLayer#external Deck custom views', t => {
   });
 });
 
+test('MapboxLayer#drawLayer with zero-size canvas', t => {
+  const map = new MockMapboxMap({
+    center: {lng: -122.45, lat: 37.78},
+    zoom: 12
+  });
+
+  map.on('load', () => {
+    const deck = new Deck({
+      device,
+      viewState: {longitude: 0, latitude: 0, zoom: 1},
+      layers: [
+        new ScatterplotLayer({
+          id: 'scatterplot',
+          data: [],
+          getPosition: d => d.position,
+          getRadius: 10,
+          getFillColor: [255, 0, 0]
+        })
+      ]
+    });
+
+    getDeckInstance({map, deck});
+    map.addLayer(new MapboxLayer({id: 'scatterplot'}));
+
+    // Simulate a zero-size canvas (e.g. hidden or detached container).
+    // makeViewport() returns null when width or height is 0, so drawLayer
+    // must not pass that null into deck._drawLayers.
+    (deck as any).width = 0;
+    (deck as any).height = 0;
+
+    map.on('render', () => {
+      t.notOk((map as any)._renderError, 'render should not throw when canvas has zero dimensions');
+      deck.finalize();
+      t.end();
+    });
+
+    map.fire('render');
+  });
+});
+
 /** Used to compare view states */
 export function objectEqual(actual, expected) {
   if (equals(actual, expected)) {