deck.gl 9.2.9 → 9.2.11

package/dist/dist.dev.js

@@ -49303,7 +49303,7 @@ void main(void) {
       let { startZoom, startZoomPosition } = this.getState();
       if (!startZoomPosition) {
         startZoom = this.getViewportProps().zoom;
-        startZoomPosition = this._unproject(startPos) || this._unproject(pos);
+        startZoomPosition = this._unproject(startPos || pos);
       }
       if (!startZoomPosition) {
         return this;
@@ -49368,9 +49368,13 @@ void main(void) {
       });
     }
     /* Private methods */
+    _project(pos) {
+      const viewport = this.makeViewport(this.getViewportProps());
+      return viewport.project(pos);
+    }
     _unproject(pos) {
       const viewport = this.makeViewport(this.getViewportProps());
-      return pos && viewport.unproject(pos);
+      return viewport.unproject(pos);
     }
     // Calculates new zoom
     _calculateNewZoom({
@@ -49385,10 +49389,11 @@ void main(void) {
       return clamp(zoom, minZoom, maxZoom);
     }
     _panFromCenter(offset) {
-      const { width, height, target: target2 } = this.getViewportProps();
+      const { target: target2 } = this.getViewportProps();
+      const center2 = this._project(target2);
       return this.pan({
         startPosition: target2,
-        pos: [width / 2 + offset[0], height / 2 + offset[1]]
+        pos: [center2[0] + offset[0], center2[1] + offset[1]]
       });
     }
     _getUpdatedState(newProps) {
@@ -55424,6 +55429,8 @@ void main(void) {
   vec2 offset = (rotationMatrix * positions.xy * strokeOffsetRatio + column.offset) * dotRadius;
   if (column.radiusUnits == UNIT_METERS) {
     offset = project_size(offset);
+  } else if (column.radiusUnits == UNIT_PIXELS) {
+    offset = project_pixel_size(offset);
   }
   vec3 pos = vec3(offset, 0.);
   DECKGL_FILTER_SIZE(pos, geometry);
@@ -88989,6 +88996,7 @@ void main() {
   init_dist7();
 
   // ../google-maps/src/utils.ts
+  var POSITIONING_CONTAINER_ID = "deck-gl-google-maps-container";
   var MAX_LATITUDE2 = 85.05113;
   function createDeckInstance(map3, overlay, deck, props) {
     if (deck) {
@@ -89006,7 +89014,8 @@ void main() {
     };
     const newDeck = new Deck({
       ...props,
-      useDevicePixels: props.interleaved ? true : props.useDevicePixels,
+      // Default to true for high-DPI displays, but allow user override
+      useDevicePixels: props.useDevicePixels ?? true,
       style: props.interleaved ? null : { pointerEvents: "none" },
       parent: getContainer2(overlay, props.style),
       views: new MapView({ repeat: true }),
@@ -89031,10 +89040,12 @@ void main() {
     const container = document.createElement("div");
     container.style.position = "absolute";
     Object.assign(container.style, style);
-    if ("getPanes" in overlay) {
+    const googleMapsContainer = overlay.getMap().getDiv();
+    const positioningContainer = googleMapsContainer.querySelector(`#${POSITIONING_CONTAINER_ID}`);
+    if (positioningContainer) {
+      positioningContainer.appendChild(container);
+    } else if ("getPanes" in overlay) {
       overlay.getPanes()?.overlayLayer.appendChild(container);
-    } else {
-      overlay.getMap()?.getDiv().appendChild(container);
     }
     return container;
   }
@@ -89213,6 +89224,7 @@ void main() {
       this._map = null;
       this._deck = null;
       this._overlay = null;
+      this._positioningOverlay = null;
       this.setProps({ ...defaultProps48, ...props });
     }
     /* Public API */
@@ -89227,6 +89239,7 @@ void main() {
           this._overlay.requestRedraw();
         }
         this._overlay?.setMap(null);
+        this._positioningOverlay?.setMap(null);
         this._map = null;
       }
       if (map3) {
@@ -89278,30 +89291,45 @@ void main() {
     }
     /* Private API */
     _createOverlay(map3) {
-      const { interleaved } = this.props;
       const { VECTOR, UNINITIALIZED } = google.maps.RenderingType;
       const renderingType = map3.getRenderingType();
       if (renderingType === UNINITIALIZED) {
         return;
       }
       const isVectorMap = renderingType === VECTOR && google.maps.WebGLOverlayView;
-      const OverlayView = isVectorMap ? google.maps.WebGLOverlayView : google.maps.OverlayView;
-      const overlay = new OverlayView();
-      if (overlay instanceof google.maps.WebGLOverlayView) {
-        if (interleaved) {
-          overlay.onAdd = noop7;
-          overlay.onContextRestored = this._onContextRestored.bind(this);
-          overlay.onDraw = this._onDrawVectorInterleaved.bind(this);
-        } else {
-          overlay.onAdd = this._onAdd.bind(this);
-          overlay.onContextRestored = noop7;
-          overlay.onDraw = this._onDrawVectorOverlay.bind(this);
-        }
-        overlay.onContextLost = this._onContextLost.bind(this);
+      if (isVectorMap) {
+        this._createOverlayVector(map3);
       } else {
-        overlay.onAdd = this._onAdd.bind(this);
-        overlay.draw = this._onDrawRaster.bind(this);
+        this._createOverlayRaster(map3);
       }
+    }
+    /**
+     * Create overlays for vector maps.
+     * Uses OverlayView for DOM positioning (correct z-index) and
+     * WebGLOverlayView for camera data (smooth animations).
+     * In interleaved mode, WebGLOverlayView also provides the shared GL context.
+     */
+    _createOverlayVector(map3) {
+      const interleaved = this.props.interleaved ?? defaultProps48.interleaved;
+      const positioningOverlay = new google.maps.OverlayView();
+      positioningOverlay.onAdd = this._onAddVectorOverlay.bind(this);
+      positioningOverlay.draw = this._updateContainerSize.bind(this);
+      positioningOverlay.onRemove = this._onRemove.bind(this);
+      this._positioningOverlay = positioningOverlay;
+      this._positioningOverlay.setMap(map3);
+      const overlay = new google.maps.WebGLOverlayView();
+      overlay.onAdd = noop7;
+      overlay.onContextRestored = interleaved ? this._onContextRestored.bind(this) : noop7;
+      overlay.onDraw = this._onDrawVector.bind(this);
+      overlay.onContextLost = interleaved ? this._onContextLost.bind(this) : noop7;
+      overlay.onRemove = interleaved ? this._onRemove.bind(this) : noop7;
+      this._overlay = overlay;
+      this._overlay.setMap(map3);
+    }
+    _createOverlayRaster(map3) {
+      const overlay = new google.maps.OverlayView();
+      overlay.onAdd = this._onAdd.bind(this);
+      overlay.draw = this._onDrawRaster.bind(this);
       overlay.onRemove = this._onRemove.bind(this);
       this._overlay = overlay;
       this._overlay.setMap(map3);
@@ -89309,6 +89337,33 @@ void main() {
     _onAdd() {
       this._deck = createDeckInstance(this._map, this._overlay, this._deck, this.props);
     }
+    _onAddVectorOverlay() {
+      const overlay = this._positioningOverlay;
+      const panes = overlay.getPanes();
+      if (panes) {
+        const container = document.createElement("div");
+        container.id = POSITIONING_CONTAINER_ID;
+        container.style.position = "absolute";
+        panes.overlayLayer.appendChild(container);
+      }
+      this._deck = createDeckInstance(this._map, overlay, this._deck, this.props);
+    }
+    _updateContainerSize() {
+      if (!this._map)
+        return;
+      const container = this._map.getDiv().querySelector(`#${POSITIONING_CONTAINER_ID}`);
+      if (!container)
+        return;
+      const mapContainer = this._map.getDiv().firstChild;
+      if (!mapContainer)
+        return;
+      const width = mapContainer.offsetWidth;
+      const height = mapContainer.offsetHeight;
+      container.style.width = `${width}px`;
+      container.style.height = `${height}px`;
+      container.style.left = `${-width / 2}px`;
+      container.style.top = `${-height / 2}px`;
+    }
     _onContextRestored({ gl }) {
       if (!this._map || !this._overlay) {
         return;
@@ -89368,19 +89423,18 @@ void main() {
       });
       deck.redraw();
     }
-    // Vector code path
-    _onDrawVectorInterleaved({ gl, transformer }) {
+    _onDrawVector({ gl, transformer }) {
       if (!this._deck || !this._map) {
         return;
       }
       const deck = this._deck;
+      const { interleaved } = this.props;
       deck.setProps({
         ...getViewPropsFromCoordinateTransformer(this._map, transformer),
         // Using external gl context - do not set css size
-        width: null,
-        height: null
+        ...interleaved && { width: null, height: null }
       });
-      if (deck.isInitialized) {
+      if (interleaved && deck.isInitialized) {
         const device = deck.device;
         if (device instanceof WebGLDevice) {
           const _framebuffer = device.getParametersWebGL(GLEnum.FRAMEBUFFER_BINDING);
@@ -89399,18 +89453,10 @@ void main() {
             });
           });
         }
+      } else if (!interleaved) {
+        deck.redraw();
       }
     }
-    _onDrawVectorOverlay({ transformer }) {
-      if (!this._deck || !this._map) {
-        return;
-      }
-      const deck = this._deck;
-      deck.setProps({
-        ...getViewPropsFromCoordinateTransformer(this._map, transformer)
-      });
-      deck.redraw();
-    }
   };
 
   // ../mapbox/src/deck-utils.ts