@deck.gl/mapbox 9.3.0-alpha.5 → 9.3.0-beta.1

package/dist/index.cjs

@@ -25,10 +25,95 @@ __export(dist_exports, {
 module.exports = __toCommonJS(dist_exports);
 
 // dist/mapbox-overlay.js
-var import_core5 = require("@deck.gl/core");
+var import_core4 = require("@deck.gl/core");
 
 // dist/deck-utils.js
+var import_core3 = require("@deck.gl/core");
+
+// dist/resolve-layer-groups.js
+var import_core2 = require("@deck.gl/core");
+
+// dist/mapbox-layer-group.js
 var import_core = require("@deck.gl/core");
+var MapboxLayerGroup = class {
+  /* eslint-disable no-this-before-super */
+  constructor(props) {
+    (0, import_core.assert)(props.id, "id is required");
+    this.id = props.id;
+    this.type = "custom";
+    this.renderingMode = props.renderingMode || "3d";
+    this.slot = props.slot;
+    this.beforeId = props.beforeId;
+    this.map = null;
+  }
+  /* Mapbox custom layer methods */
+  onAdd(map, gl) {
+    this.map = map;
+  }
+  render(gl, renderParameters) {
+    if (!this.map)
+      return;
+    drawLayerGroup(this.map.__deck, this.map, this, renderParameters);
+  }
+};
+
+// dist/resolve-layer-groups.js
+var UNDEFINED_BEFORE_ID = "__UNDEFINED__";
+function getLayerGroupId(layer) {
+  if (layer.props.beforeId) {
+    return `deck-layer-group-before:${layer.props.beforeId}`;
+  } else if (layer.props.slot) {
+    return `deck-layer-group-slot:${layer.props.slot}`;
+  }
+  return "deck-layer-group-last";
+}
+function resolveLayerGroups(map, oldLayers, newLayers) {
+  if (!map || !map.style || !map.style._loaded) {
+    return;
+  }
+  const layers = (0, import_core2._flatten)(newLayers, Boolean);
+  if (oldLayers !== newLayers) {
+    const prevLayers = (0, import_core2._flatten)(oldLayers, Boolean);
+    const prevLayerGroupIds = new Set(prevLayers.map((l) => getLayerGroupId(l)));
+    const newLayerGroupIds = new Set(layers.map((l) => getLayerGroupId(l)));
+    for (const groupId of prevLayerGroupIds) {
+      if (!newLayerGroupIds.has(groupId)) {
+        if (map.getLayer(groupId)) {
+          map.removeLayer(groupId);
+        }
+      }
+    }
+  }
+  const layerGroups = {};
+  for (const layer of layers) {
+    const groupId = getLayerGroupId(layer);
+    const mapboxGroup = map.getLayer(groupId);
+    if (mapboxGroup) {
+      const groupInstance = mapboxGroup.implementation || mapboxGroup;
+      layerGroups[groupId] = groupInstance;
+    } else {
+      const newGroup = new MapboxLayerGroup({
+        id: groupId,
+        slot: layer.props.slot,
+        beforeId: layer.props.beforeId
+      });
+      layerGroups[groupId] = newGroup;
+      map.addLayer(newGroup, layer.props.beforeId);
+    }
+  }
+  const mapLayers = map.style._order;
+  for (const [groupId, group] of Object.entries(layerGroups)) {
+    const beforeId = group.beforeId || UNDEFINED_BEFORE_ID;
+    const expectedGroupIndex = beforeId === UNDEFINED_BEFORE_ID ? mapLayers.length : mapLayers.indexOf(beforeId);
+    const currentGropupIndex = mapLayers.indexOf(groupId);
+    if (currentGropupIndex !== expectedGroupIndex - 1) {
+      const moveBeforeId = beforeId === UNDEFINED_BEFORE_ID ? void 0 : beforeId;
+      map.moveLayer(groupId, moveBeforeId);
+    }
+  }
+}
+
+// dist/deck-utils.js
 var import_web_mercator = require("@math.gl/web-mercator");
 var MAPBOX_VIEW_ID = "mapbox";
 var TILE_SIZE = 512;
@@ -102,27 +187,6 @@ function getDefaultParameters(map, interleaved) {
   }
   return result;
 }
-function drawLayer(deck, map, layer, renderParameters) {
-  if (!deck.isInitialized) {
-    return;
-  }
-  let { currentViewport } = deck.userData;
-  let clearStack = false;
-  if (!currentViewport) {
-    currentViewport = getViewport(deck, map, renderParameters);
-    deck.userData.currentViewport = currentViewport;
-    clearStack = true;
-  }
-  if (!currentViewport) {
-    return;
-  }
-  deck._drawLayers("mapbox-repaint", {
-    viewports: [currentViewport],
-    layerFilter: (params) => (!deck.props.layerFilter || deck.props.layerFilter(params)) && (layer.id === params.layer.id || params.layer.props.operation.includes("terrain")),
-    clearStack,
-    clearCanvas: false
-  });
-}
 function drawLayerGroup(deck, map, group, renderParameters) {
   if (!deck.isInitialized) {
     return;
@@ -171,9 +235,9 @@ function getProjection(map) {
 }
 function getDefaultView(map) {
   if (getProjection(map) === "globe") {
-    return new import_core._GlobeView({ id: MAPBOX_VIEW_ID });
+    return new import_core3._GlobeView({ id: MAPBOX_VIEW_ID });
   }
-  return new import_core.MapView({ id: MAPBOX_VIEW_ID });
+  return new import_core3.MapView({ id: MAPBOX_VIEW_ID });
 }
 function getViewState(map) {
   var _a;
@@ -242,8 +306,9 @@ function getViewport(deck, map, renderParameters) {
   });
 }
 function afterRender(deck, map) {
-  const deckLayers = (0, import_core._flatten)(deck.props.layers, Boolean);
-  const hasNonMapboxLayers = deckLayers.some((layer) => layer && !map.getLayer(layer.id));
+  var _a, _b, _c, _d;
+  const deckLayers = (0, import_core3._flatten)(deck.props.layers, Boolean);
+  const hasNonMapboxLayers = deckLayers.some((layer) => layer && !map.getLayer(getLayerGroupId(layer)));
   let viewports = deck.getViewports();
   const mapboxViewportIdx = viewports.findIndex((vp) => vp.id === MAPBOX_VIEW_ID);
   const hasNonMapboxViews = viewports.length > 1 || mapboxViewportIdx < 0;
@@ -259,9 +324,14 @@ function afterRender(deck, map) {
     }
     deck._drawLayers("mapbox-repaint", {
       viewports,
-      layerFilter: (params) => (!deck.props.layerFilter || deck.props.layerFilter(params)) && (params.viewport.id !== MAPBOX_VIEW_ID || !map.getLayer(params.layer.id)),
+      layerFilter: (params) => (!deck.props.layerFilter || deck.props.layerFilter(params)) && (params.viewport.id !== MAPBOX_VIEW_ID || !map.getLayer(getLayerGroupId(params.layer))),
       clearCanvas: false
     });
+  } else {
+    const device = deck.device;
+    const gl = device == null ? void 0 : device.gl;
+    (_b = (_a = deck.props).onBeforeRender) == null ? void 0 : _b.call(_a, { device, gl });
+    (_d = (_c = deck.props).onAfterRender) == null ? void 0 : _d.call(_c, { device, gl });
   }
   deck.userData.currentViewport = null;
 }
@@ -272,188 +342,6 @@ function onMapMove(deck, map) {
   deck.needsRedraw({ clearRedrawFlags: true });
 }
 
-// dist/resolve-layers.js
-var import_core2 = require("@deck.gl/core");
-
-// dist/mapbox-layer.js
-var MapboxLayer = class {
-  /* eslint-disable no-this-before-super */
-  constructor(props) {
-    if (!props.id) {
-      throw new Error("Layer must have an unique id");
-    }
-    this.id = props.id;
-    this.type = "custom";
-    this.renderingMode = props.renderingMode || "3d";
-    this.slot = props.slot;
-    this.map = null;
-    this.props = props;
-  }
-  /* Mapbox custom layer methods */
-  onAdd(map, gl) {
-    this.map = map;
-  }
-  onRemove() {
-    this.map = null;
-  }
-  setProps(props) {
-    Object.assign(this.props, props, { id: this.id });
-  }
-  render(gl, renderParameters) {
-    if (!this.map)
-      return;
-    drawLayer(this.map.__deck, this.map, this, renderParameters);
-  }
-};
-
-// dist/resolve-layers.js
-var UNDEFINED_BEFORE_ID = "__UNDEFINED__";
-function resolveLayers(map, deck, oldLayers, newLayers) {
-  if (!map || !deck || !map.style || !map.style._loaded) {
-    return;
-  }
-  const layers = (0, import_core2._flatten)(newLayers, Boolean);
-  if (oldLayers !== newLayers) {
-    const prevLayers = (0, import_core2._flatten)(oldLayers, Boolean);
-    const prevLayerIds = new Set(prevLayers.map((l) => l.id));
-    for (const layer of layers) {
-      prevLayerIds.delete(layer.id);
-    }
-    for (const id of prevLayerIds) {
-      if (map.getLayer(id)) {
-        map.removeLayer(id);
-      }
-    }
-  }
-  for (const layer of layers) {
-    const mapboxLayer = map.getLayer(layer.id);
-    if (mapboxLayer) {
-      const layerInstance = mapboxLayer.implementation || mapboxLayer;
-      layerInstance.setProps(layer.props);
-    } else {
-      map.addLayer(
-        new MapboxLayer({
-          id: layer.id,
-          // @ts-expect-error slot is not defined in LayerProps
-          slot: layer.props.slot
-        }),
-        // @ts-expect-error beforeId is not defined in LayerProps
-        layer.props.beforeId
-      );
-    }
-  }
-  const mapLayers = map.style._order;
-  const layerGroups = {};
-  for (const layer of layers) {
-    let { beforeId } = layer.props;
-    if (!beforeId || !mapLayers.includes(beforeId)) {
-      beforeId = UNDEFINED_BEFORE_ID;
-    }
-    layerGroups[beforeId] = layerGroups[beforeId] || [];
-    layerGroups[beforeId].push(layer.id);
-  }
-  for (const beforeId in layerGroups) {
-    const layerGroup = layerGroups[beforeId];
-    let lastLayerIndex = beforeId === UNDEFINED_BEFORE_ID ? mapLayers.length : mapLayers.indexOf(beforeId);
-    let lastLayerId = beforeId === UNDEFINED_BEFORE_ID ? void 0 : beforeId;
-    for (let i = layerGroup.length - 1; i >= 0; i--) {
-      const layerId = layerGroup[i];
-      const layerIndex = mapLayers.indexOf(layerId);
-      if (layerIndex !== lastLayerIndex - 1) {
-        map.moveLayer(layerId, lastLayerId);
-        if (layerIndex > lastLayerIndex) {
-          lastLayerIndex++;
-        }
-      }
-      lastLayerIndex--;
-      lastLayerId = layerId;
-    }
-  }
-}
-
-// dist/resolve-layer-groups.js
-var import_core4 = require("@deck.gl/core");
-
-// dist/mapbox-layer-group.js
-var import_core3 = require("@deck.gl/core");
-var MapboxLayerGroup = class {
-  /* eslint-disable no-this-before-super */
-  constructor(props) {
-    (0, import_core3.assert)(props.id, "id is required");
-    this.id = props.id;
-    this.type = "custom";
-    this.renderingMode = props.renderingMode || "3d";
-    this.slot = props.slot;
-    this.beforeId = props.beforeId;
-    this.map = null;
-  }
-  /* Mapbox custom layer methods */
-  onAdd(map, gl) {
-    this.map = map;
-  }
-  render(gl, renderParameters) {
-    if (!this.map)
-      return;
-    drawLayerGroup(this.map.__deck, this.map, this, renderParameters);
-  }
-};
-
-// dist/resolve-layer-groups.js
-var UNDEFINED_BEFORE_ID2 = "__UNDEFINED__";
-function getLayerGroupId(layer) {
-  if (layer.props.beforeId) {
-    return `deck-layer-group-before:${layer.props.beforeId}`;
-  } else if (layer.props.slot) {
-    return `deck-layer-group-slot:${layer.props.slot}`;
-  }
-  return "deck-layer-group-last";
-}
-function resolveLayerGroups(map, oldLayers, newLayers) {
-  if (!map || !map.style || !map.style._loaded) {
-    return;
-  }
-  const layers = (0, import_core4._flatten)(newLayers, Boolean);
-  if (oldLayers !== newLayers) {
-    const prevLayers = (0, import_core4._flatten)(oldLayers, Boolean);
-    const prevLayerGroupIds = new Set(prevLayers.map((l) => getLayerGroupId(l)));
-    const newLayerGroupIds = new Set(layers.map((l) => getLayerGroupId(l)));
-    for (const groupId of prevLayerGroupIds) {
-      if (!newLayerGroupIds.has(groupId)) {
-        if (map.getLayer(groupId)) {
-          map.removeLayer(groupId);
-        }
-      }
-    }
-  }
-  const layerGroups = {};
-  for (const layer of layers) {
-    const groupId = getLayerGroupId(layer);
-    const mapboxGroup = map.getLayer(groupId);
-    if (mapboxGroup) {
-      const groupInstance = mapboxGroup.implementation || mapboxGroup;
-      layerGroups[groupId] = groupInstance;
-    } else {
-      const newGroup = new MapboxLayerGroup({
-        id: groupId,
-        slot: layer.props.slot,
-        beforeId: layer.props.beforeId
-      });
-      layerGroups[groupId] = newGroup;
-      map.addLayer(newGroup, layer.props.beforeId);
-    }
-  }
-  const mapLayers = map.style._order;
-  for (const [groupId, group] of Object.entries(layerGroups)) {
-    const beforeId = group.beforeId || UNDEFINED_BEFORE_ID2;
-    const expectedGroupIndex = beforeId === UNDEFINED_BEFORE_ID2 ? mapLayers.length : mapLayers.indexOf(beforeId);
-    const currentGropupIndex = mapLayers.indexOf(groupId);
-    if (currentGropupIndex !== expectedGroupIndex - 1) {
-      const moveBeforeId = beforeId === UNDEFINED_BEFORE_ID2 ? void 0 : beforeId;
-      map.moveLayer(groupId, moveBeforeId);
-    }
-  }
-}
-
 // dist/mapbox-overlay.js
 var MapboxOverlay = class {
   constructor(props) {
@@ -463,8 +351,8 @@ var MapboxOverlay = class {
       if (!this._map)
         return;
       const projection = getProjection(this._map);
-      if (projection && !this._props.views) {
-        (_a = this._deck) == null ? void 0 : _a.setProps({ views: getDefaultView(this._map) });
+      if (projection) {
+        (_a = this._deck) == null ? void 0 : _a.setProps({ views: this._getViews(this._map) });
       }
     };
     this._updateContainerSize = () => {
@@ -481,7 +369,7 @@ var MapboxOverlay = class {
       const map = this._map;
       if (deck && map) {
         deck.setProps({
-          views: this._props.views || getDefaultView(map),
+          views: this._getViews(map),
           viewState: getViewState(map)
         });
         if (deck.isInitialized) {
@@ -552,7 +440,6 @@ var MapboxOverlay = class {
     };
     const { interleaved = false } = props;
     this._interleaved = interleaved;
-    this._renderLayersInGroups = props._renderLayersInGroups || false;
     this._props = this.filterProps(props);
   }
   /** Filter out props to pass to Deck **/
@@ -572,6 +459,7 @@ var MapboxOverlay = class {
     if (this._deck && this._map) {
       this._deck.setProps({
         ...this._props,
+        views: this._getViews(this._map),
         parameters: {
           ...getDefaultParameters(this._map, this._interleaved),
           ...this._props.parameters
@@ -596,11 +484,11 @@ var MapboxOverlay = class {
       pointerEvents: "none"
     });
     this._container = container;
-    this._deck = new import_core5.Deck({
+    this._deck = new import_core4.Deck({
       ...this._props,
       parent: container,
       parameters: { ...getDefaultParameters(map, false), ...this._props.parameters },
-      views: this._props.views || getDefaultView(map),
+      views: this._getViews(map),
       viewState: getViewState(map)
     });
     map.on("resize", this._updateContainerSize);
@@ -619,12 +507,13 @@ var MapboxOverlay = class {
   _onAddInterleaved(map) {
     const gl = map.painter.context.gl;
     if (gl instanceof WebGLRenderingContext) {
-      import_core5.log.warn("Incompatible basemap library. See: https://deck.gl/docs/api-reference/mapbox/overview#compatibility")();
+      import_core4.log.warn("Incompatible basemap library. See: https://deck.gl/docs/api-reference/mapbox/overview#compatibility")();
     }
     this._deck = getDeckInstance({
       map,
-      deck: new import_core5.Deck({
+      deck: new import_core4.Deck({
         ...this._props,
+        views: this._getViews(map),
         gl,
         parameters: { ...getDefaultParameters(map, true), ...this._props.parameters }
       })
@@ -633,12 +522,8 @@ var MapboxOverlay = class {
     this._resolveLayers(map, this._deck, [], this._props.layers);
     return document.createElement("div");
   }
-  _resolveLayers(map, deck, prevLayers, newLayers) {
-    if (this._renderLayersInGroups) {
-      resolveLayerGroups(map, prevLayers, newLayers);
-    } else {
-      resolveLayers(map, deck, prevLayers, newLayers);
-    }
+  _resolveLayers(map, _deck, prevLayers, newLayers) {
+    resolveLayerGroups(map, prevLayers, newLayers);
   }
   /** Called when the control is removed from a map */
   onRemove() {
@@ -678,17 +563,17 @@ var MapboxOverlay = class {
   }
   /** Forwards the Deck.pickObject method */
   pickObject(params) {
-    (0, import_core5.assert)(this._deck);
+    (0, import_core4.assert)(this._deck);
     return this._deck.pickObject(params);
   }
   /** Forwards the Deck.pickMultipleObjects method */
   pickMultipleObjects(params) {
-    (0, import_core5.assert)(this._deck);
+    (0, import_core4.assert)(this._deck);
     return this._deck.pickMultipleObjects(params);
   }
   /** Forwards the Deck.pickObjects method */
   pickObjects(params) {
-    (0, import_core5.assert)(this._deck);
+    (0, import_core4.assert)(this._deck);
     return this._deck.pickObjects(params);
   }
   /** Remove from map and releases all resources */
@@ -704,5 +589,16 @@ var MapboxOverlay = class {
     }
     return this._interleaved ? this._map.getCanvas() : this._deck.getCanvas();
   }
+  _getViews(map) {
+    if (!this._props.views) {
+      return getDefaultView(map);
+    }
+    const views = Array.isArray(this._props.views) ? this._props.views : [this._props.views];
+    const hasMapboxView = views.some((v) => v.id === MAPBOX_VIEW_ID);
+    if (hasMapboxView) {
+      return this._props.views;
+    }
+    return [getDefaultView(map), ...views];
+  }
 };
 //# sourceMappingURL=index.cjs.map