@deck.gl/react 9.4.0-beta.1 → 9.4.0-beta.3

package/dist/index.cjs

@@ -663,12 +663,12 @@ function calculateViewportUniforms({
     }
   }
   if (viewport.projectionMode === PROJECTION_MODE.GLOBE && coordinateSystem === "meter-offsets") {
-    const EARTH_RADIUS2 = 6370972;
-    const GLOBE_RADIUS2 = 256;
+    const EARTH_RADIUS = 6370972;
+    const GLOBE_RADIUS = 256;
     const lambda = coordinateOrigin[0] * Math.PI / 180;
     const phi = coordinateOrigin[1] * Math.PI / 180;
     const cosPhi = Math.cos(phi);
-    const D = ((coordinateOrigin[2] || 0) / EARTH_RADIUS2 + 1) * GLOBE_RADIUS2;
+    const D = ((coordinateOrigin[2] || 0) / EARTH_RADIUS + 1) * GLOBE_RADIUS;
     uniforms.commonOrigin = [
       Math.sin(lambda) * cosPhi * D,
       -Math.cos(lambda) * cosPhi * D,
@@ -856,7 +856,7 @@ fn project_mercator_(lnglat: vec2<f32>) -> vec2<f32> {
   let y = clamp(lnglat.y, -89.9, 89.9);
   return vec2<f32>(
     radians(x) + PI,
-    PI + log(tan(PI * 0.25 + radians(y) * 0.5))
+    PI + log(tan_fp32(PI * 0.25 + radians(y) * 0.5))
   ) * WORLD_SCALE;
 }
 
@@ -2706,8 +2706,8 @@ var _Viewport = class _Viewport {
     }
     return PROJECTION_MODE.IDENTITY;
   }
-  // Two viewports are equal if width and height are identical, and if
-  // their view and projection matrices are (approximately) equal.
+  // Two viewports are equal if their dimensions, common-space scale, and
+  // view and projection matrices are (approximately) equal.
   equals(viewport) {
     if (!(viewport instanceof _Viewport)) {
       return false;
@@ -2715,7 +2715,7 @@ var _Viewport = class _Viewport {
     if (this === viewport) {
       return true;
     }
-    return viewport.width === this.width && viewport.height === this.height && viewport.scale === this.scale && (0, import_core7.equals)(viewport.projectionMatrix, this.projectionMatrix) && (0, import_core7.equals)(viewport.viewMatrix, this.viewMatrix);
+    return viewport.width === this.width && viewport.height === this.height && viewport.scale === this.scale && viewport.projectionMode === this.projectionMode && viewport.resolution === this.resolution && (0, import_core7.equals)(viewport.distanceScales.unitsPerMeter, this.distanceScales.unitsPerMeter) && (0, import_core7.equals)(viewport.projectionMatrix, this.projectionMatrix) && (0, import_core7.equals)(viewport.viewMatrix, this.viewMatrix);
   }
   /**
    * Projects xyz (possibly latitude and longitude) to pixel coordinates in window
@@ -3052,6 +3052,10 @@ var _WebMercatorViewport = class _WebMercatorViewport extends Viewport {
     }
     return this._subViewports;
   }
+  /** Returns whether two Web Mercator viewports use the same projection settings. */
+  equals(viewport) {
+    return viewport instanceof _WebMercatorViewport && viewport._pseudoMeters === this._pseudoMeters && super.equals(viewport);
+  }
   projectPosition(xyz) {
     if (this._pseudoMeters) {
       return super.projectPosition(xyz);
@@ -4565,7 +4569,7 @@ var View = class {
 };
 
 // ../core/src/controllers/map-controller.ts
-var import_core15 = require("@math.gl/core");
+var import_core13 = require("@math.gl/core");
 
 // ../core/src/transitions/transition.ts
 var Transition = class {
@@ -4877,185 +4881,7 @@ var TransitionInterpolator = class {
 };
 
 // ../core/src/transitions/linear-interpolator.ts
-var import_core14 = require("@math.gl/core");
-
-// ../core/src/viewports/globe-viewport.ts
 var import_core12 = require("@math.gl/core");
-var import_web_mercator5 = require("@math.gl/web-mercator");
-var import_core13 = require("@math.gl/core");
-var import_web_mercator6 = require("@math.gl/web-mercator");
-var DEGREES_TO_RADIANS2 = Math.PI / 180;
-var RADIANS_TO_DEGREES = 180 / Math.PI;
-var EARTH_RADIUS = 6370972;
-var GLOBE_RADIUS = 256;
-function getDistanceScales2() {
-  const unitsPerMeter2 = GLOBE_RADIUS / EARTH_RADIUS;
-  const unitsPerDegree = Math.PI / 180 * GLOBE_RADIUS;
-  return {
-    unitsPerMeter: [unitsPerMeter2, unitsPerMeter2, unitsPerMeter2],
-    unitsPerMeter2: [0, 0, 0],
-    metersPerUnit: [1 / unitsPerMeter2, 1 / unitsPerMeter2, 1 / unitsPerMeter2],
-    unitsPerDegree: [unitsPerDegree, unitsPerDegree, unitsPerMeter2],
-    unitsPerDegree2: [0, 0, 0],
-    degreesPerUnit: [1 / unitsPerDegree, 1 / unitsPerDegree, 1 / unitsPerMeter2]
-  };
-}
-var GlobeViewport = class extends Viewport {
-  constructor(opts = {}) {
-    const {
-      longitude = 0,
-      bearing = 0,
-      pitch = 0,
-      zoom = 0,
-      // Matches Maplibre defaults
-      // https://github.com/maplibre/maplibre-gl-js/blob/f8ab4b48d59ab8fe7b068b102538793bbdd4c848/src/geo/projection/globe_transform.ts#L632-L633
-      nearZMultiplier = 0.5,
-      farZMultiplier = 1,
-      resolution = 10
-    } = opts;
-    let { latitude = 0, height, altitude = 1.5, fovy } = opts;
-    latitude = Math.max(Math.min(latitude, 90), -90);
-    height = height || 1;
-    if (fovy) {
-      altitude = (0, import_web_mercator5.fovyToAltitude)(fovy);
-    } else {
-      fovy = (0, import_web_mercator5.altitudeToFovy)(altitude);
-    }
-    const scaleLatitude = Math.max(Math.min(latitude, import_web_mercator6.MAX_LATITUDE), -import_web_mercator6.MAX_LATITUDE);
-    const scale = Math.pow(2, zoom - zoomAdjust(scaleLatitude));
-    const pitchRadians = pitch * DEGREES_TO_RADIANS2;
-    const nearZ = opts.nearZ ?? nearZMultiplier;
-    const farZ = opts.farZ ?? (altitude + GLOBE_RADIUS * 2 * scale / height / Math.max(Math.cos(pitchRadians), 0.1)) * farZMultiplier;
-    const viewMatrix = new import_core12.Matrix4().lookAt({ eye: [0, -altitude, 0], up: [0, 0, 1] }).rotateX(-pitchRadians).rotateY(-bearing * DEGREES_TO_RADIANS2).rotateX(latitude * DEGREES_TO_RADIANS2).rotateZ(-longitude * DEGREES_TO_RADIANS2).scale(scale / height);
-    super({
-      ...opts,
-      // x, y, width,
-      height,
-      // view matrix
-      viewMatrix,
-      longitude,
-      latitude,
-      zoom,
-      // projection matrix parameters
-      distanceScales: getDistanceScales2(),
-      fovy,
-      focalDistance: altitude,
-      near: nearZ,
-      far: farZ
-    });
-    this.scale = scale;
-    this.latitude = latitude;
-    this.longitude = longitude;
-    this.bearing = bearing;
-    this.pitch = pitch;
-    this.fovy = fovy;
-    this.resolution = resolution;
-  }
-  get projectionMode() {
-    return PROJECTION_MODE.GLOBE;
-  }
-  getDistanceScales() {
-    return this.distanceScales;
-  }
-  getBounds(options = {}) {
-    const unprojectOption = { targetZ: options.z || 0 };
-    const left = this.unproject([0, this.height / 2], unprojectOption);
-    const top = this.unproject([this.width / 2, 0], unprojectOption);
-    const right = this.unproject([this.width, this.height / 2], unprojectOption);
-    const bottom = this.unproject([this.width / 2, this.height], unprojectOption);
-    if (right[0] < this.longitude) right[0] += 360;
-    if (left[0] > this.longitude) left[0] -= 360;
-    return [
-      Math.min(left[0], right[0], top[0], bottom[0]),
-      Math.min(left[1], right[1], top[1], bottom[1]),
-      Math.max(left[0], right[0], top[0], bottom[0]),
-      Math.max(left[1], right[1], top[1], bottom[1])
-    ];
-  }
-  unproject(xyz, { topLeft = true, targetZ } = {}) {
-    const [x, y, z] = xyz;
-    const y2 = topLeft ? y : this.height - y;
-    const { pixelUnprojectionMatrix } = this;
-    let coord;
-    if (Number.isFinite(z)) {
-      coord = transformVector(pixelUnprojectionMatrix, [x, y2, z, 1]);
-    } else {
-      const coord0 = transformVector(pixelUnprojectionMatrix, [x, y2, -1, 1]);
-      const coord1 = transformVector(pixelUnprojectionMatrix, [x, y2, 1, 1]);
-      const lt = ((targetZ || 0) / EARTH_RADIUS + 1) * GLOBE_RADIUS;
-      const lSqr = import_core13.vec3.sqrLen(import_core13.vec3.sub([], coord0, coord1));
-      const l0Sqr = import_core13.vec3.sqrLen(coord0);
-      const l1Sqr = import_core13.vec3.sqrLen(coord1);
-      const sSqr = (4 * l0Sqr * l1Sqr - (lSqr - l0Sqr - l1Sqr) ** 2) / 16;
-      const dSqr = 4 * sSqr / lSqr;
-      const r0 = Math.sqrt(l0Sqr - dSqr);
-      const dr = Math.sqrt(Math.max(0, lt * lt - dSqr));
-      const t = (r0 - dr) / Math.sqrt(lSqr);
-      coord = import_core13.vec3.lerp([], coord0, coord1, t);
-    }
-    const [X, Y, Z] = this.unprojectPosition(coord);
-    if (Number.isFinite(z)) {
-      return [X, Y, Z];
-    }
-    return Number.isFinite(targetZ) ? [X, Y, targetZ] : [X, Y];
-  }
-  projectPosition(xyz) {
-    const [lng, lat, Z = 0] = xyz;
-    const lambda = lng * DEGREES_TO_RADIANS2;
-    const phi = lat * DEGREES_TO_RADIANS2;
-    const cosPhi = Math.cos(phi);
-    const D = (Z / EARTH_RADIUS + 1) * GLOBE_RADIUS;
-    return [Math.sin(lambda) * cosPhi * D, -Math.cos(lambda) * cosPhi * D, Math.sin(phi) * D];
-  }
-  unprojectPosition(xyz) {
-    const [x, y, z] = xyz;
-    const D = import_core13.vec3.len(xyz);
-    const phi = Math.asin(z / D);
-    const lambda = Math.atan2(x, -y);
-    const lng = lambda * RADIANS_TO_DEGREES;
-    const lat = phi * RADIANS_TO_DEGREES;
-    const Z = (D / GLOBE_RADIUS - 1) * EARTH_RADIUS;
-    return [lng, lat, Z];
-  }
-  projectFlat(xyz) {
-    return xyz;
-  }
-  unprojectFlat(xyz) {
-    return xyz;
-  }
-  /**
-   * Pan the globe using delta-based movement
-   * @param coords - the geographic coordinates where the pan started
-   * @param pixel - the current screen position
-   * @param startPixel - the screen position where the pan started
-   * @returns updated viewport options with new longitude/latitude
-   */
-  panByPosition([startLng, startLat, startZoom], pixel, startPixel) {
-    const scale = Math.pow(2, this.zoom - zoomAdjust(this.latitude));
-    const rotationSpeed = 0.25 / scale;
-    const longitude = startLng + rotationSpeed * (startPixel[0] - pixel[0]);
-    let latitude = startLat - rotationSpeed * (startPixel[1] - pixel[1]);
-    latitude = Math.max(Math.min(latitude, 90), -90);
-    const out = { longitude, latitude, zoom: startZoom - zoomAdjust(startLat) };
-    out.zoom += zoomAdjust(out.latitude);
-    return out;
-  }
-};
-GlobeViewport.displayName = "GlobeViewport";
-function zoomAdjust(latitude, clampToPoles) {
-  if (clampToPoles) {
-    latitude = Math.max(Math.min(latitude, import_web_mercator6.MAX_LATITUDE), -import_web_mercator6.MAX_LATITUDE);
-  }
-  const scaleAdjust = Math.PI * Math.cos(latitude * Math.PI / 180);
-  return Math.log2(scaleAdjust);
-}
-function transformVector(matrix, vector) {
-  const result = import_core13.vec4.transformMat4([], vector, matrix);
-  import_core13.vec4.scale(result, result, 1 / result[3]);
-  return result;
-}
-
-// ../core/src/transitions/linear-interpolator.ts
 var DEFAULT_PROPS = ["longitude", "latitude", "zoom", "bearing", "pitch"];
 var DEFAULT_REQUIRED_PROPS = ["longitude", "latitude", "zoom"];
 var LinearInterpolator = class extends TransitionInterpolator {
@@ -5082,28 +4908,23 @@ var LinearInterpolator = class extends TransitionInterpolator {
     const result = super.initializeProps(startProps, endProps);
     const { makeViewport, around } = this.opts;
     if (makeViewport && around) {
-      const TestViewport = makeViewport(startProps);
-      if (TestViewport instanceof GlobeViewport) {
-        log_default.warn("around not supported in GlobeView")();
-      } else {
-        const startViewport = makeViewport(startProps);
-        const endViewport = makeViewport(endProps);
-        const aroundPosition = startViewport.unproject(around);
-        result.start.around = around;
-        Object.assign(result.end, {
-          around: endViewport.project(aroundPosition),
-          aroundPosition,
-          width: endProps.width,
-          height: endProps.height
-        });
-      }
+      const startViewport = makeViewport(startProps);
+      const endViewport = makeViewport(endProps);
+      const aroundPosition = startViewport.unproject(around);
+      result.start.around = around;
+      Object.assign(result.end, {
+        around: endViewport.project(aroundPosition),
+        aroundPosition,
+        width: endProps.width,
+        height: endProps.height
+      });
     }
     return result;
   }
   interpolateProps(startProps, endProps, t) {
     const propsInTransition = {};
     for (const key of this._propsToExtract) {
-      propsInTransition[key] = (0, import_core14.lerp)(startProps[key] || 0, endProps[key] || 0, t);
+      propsInTransition[key] = (0, import_core12.lerp)(startProps[key] || 0, endProps[key] || 0, t);
     }
     if (endProps.aroundPosition && this.opts.makeViewport) {
       const viewport = this.opts.makeViewport({ ...endProps, ...propsInTransition });
@@ -5112,7 +4933,7 @@ var LinearInterpolator = class extends TransitionInterpolator {
         viewport.panByPosition(
           endProps.aroundPosition,
           // anchor point in current screen coordinates
-          (0, import_core14.lerp)(startProps.around, endProps.around, t)
+          (0, import_core12.lerp)(startProps.around, endProps.around, t)
         )
       );
     }
@@ -5121,6 +4942,7 @@ var LinearInterpolator = class extends TransitionInterpolator {
 };
 
 // ../core/src/controllers/controller.ts
+var import_web_mercator5 = require("@math.gl/web-mercator");
 var NO_TRANSITION_PROPS = {
   transitionDuration: 0
 };
@@ -5169,6 +4991,7 @@ var Controller = class {
     this.touchRotate = false;
     this.multiTouchDrag = null;
     this.trackpadGesture = false;
+    this.zoomAround = "pointer";
     this.keyboard = true;
     this.transitionManager = new TransitionManager({
       ...opts,
@@ -5263,6 +5086,15 @@ var Controller = class {
     const { offsetCenter } = event;
     return [offsetCenter.x - x, offsetCenter.y - y];
   }
+  /** Resolves the zoom anchor for pointer-based controls. */
+  getZoomPosition(position) {
+    if (this.zoomAround === "pointer") {
+      return position;
+    }
+    const viewport = this.makeViewport(this.controllerState.getViewportProps());
+    const [centerX, centerY] = (0, import_web_mercator5.worldToPixels)(viewport.center, viewport.pixelProjectionMatrix);
+    return [centerX, centerY];
+  }
   isPointInBounds(pos, event) {
     const { width, height } = this.props;
     if (event && event.handled) {
@@ -5320,6 +5152,7 @@ var Controller = class {
       touchRotate = false,
       multiTouchDrag = touchRotate ? "rotate" : null,
       trackpadGesture = false,
+      zoomAround = "pointer",
       keyboard = true
     } = props;
     const isInteractive = Boolean(this.onViewStateChange);
@@ -5342,6 +5175,7 @@ var Controller = class {
     this.touchRotate = multiTouchDrag === "rotate";
     this.multiTouchDrag = multiTouchDrag;
     this.trackpadGesture = trackpadGesture;
+    this.zoomAround = zoomAround;
     this.keyboard = keyboard;
     const constraintChanged = !oldProps || oldProps.height !== props.height || oldProps.width !== props.width || oldProps.maxBounds !== props.maxBounds || oldProps.maxBoundsPadding !== props.maxBoundsPadding;
     if (constraintChanged && props.maxBounds) {
@@ -5575,8 +5409,9 @@ var Controller = class {
     if (delta < 0 && scale !== 0) {
       scale = 1 / scale;
     }
-    const transitionProps = smooth ? { ...this._getTransitionProps({ around: pos }), transitionDuration: 250 } : NO_TRANSITION_PROPS;
-    const newControllerState = this.controllerState.zoom({ pos, scale });
+    const zoomPosition = this.getZoomPosition(pos);
+    const transitionProps = smooth ? { ...this._getTransitionProps({ around: zoomPosition }), transitionDuration: 250 } : NO_TRANSITION_PROPS;
+    const newControllerState = this.controllerState.zoom({ pos: zoomPosition, scale });
     this.updateViewport(newControllerState, transitionProps, {
       isZooming: true,
       isPanning: true
@@ -5662,7 +5497,7 @@ var Controller = class {
     if (!this.isPointInBounds(pos, event)) {
       return false;
     }
-    const newControllerState = this.controllerState.zoomStart({ pos }, this._getConstraintContext("zoom", "start")).rotateStart({ pos }, this._getConstraintContext("rotate", "start"));
+    const newControllerState = this.controllerState.zoomStart({ pos: this.getZoomPosition(pos) }, this._getConstraintContext("zoom", "start")).rotateStart({ pos }, this._getConstraintContext("rotate", "start"));
     pinchEventWorkaround._startPinchRotation = event.rotation;
     pinchEventWorkaround._lastPinchEvent = event;
     this.updateViewport(newControllerState, NO_TRANSITION_PROPS, { isDragging: true });
@@ -5681,7 +5516,7 @@ var Controller = class {
       const { scale } = event;
       const pos = this.getCenter(event);
       newControllerState = newControllerState.zoom(
-        { pos, scale },
+        { pos: this.getZoomPosition(pos), scale },
         this._getConstraintContext("zoom", "update")
       );
     }
@@ -5709,15 +5544,16 @@ var Controller = class {
     const { _lastPinchEvent } = pinchEventWorkaround;
     if (this.touchZoom && inertia && _lastPinchEvent && event.scale !== _lastPinchEvent.scale) {
       const pos = this.getCenter(event);
+      const zoomPosition = this.getZoomPosition(pos);
       let newControllerState = this.controllerState.rotateEnd();
       const z = Math.log2(event.scale);
       const velocityZ = (z - Math.log2(_lastPinchEvent.scale)) / (event.deltaTime - _lastPinchEvent.deltaTime);
       const endScale = Math.pow(2, z + velocityZ * inertia / 2);
-      newControllerState = newControllerState.zoom({ pos, scale: endScale }).zoomEnd();
+      newControllerState = newControllerState.zoom({ pos: zoomPosition, scale: endScale }).zoomEnd();
       this.updateViewport(
         newControllerState,
         {
-          ...this._getTransitionProps({ around: pos }),
+          ...this._getTransitionProps({ around: zoomPosition }),
           transitionDuration: inertia,
           transitionEasing: INERTIA_EASING
         },
@@ -5762,8 +5598,12 @@ var Controller = class {
       return false;
     }
     const isZoomOut = this.isFunctionKeyPressed(event);
-    const newControllerState = this.controllerState.zoom({ pos, scale: isZoomOut ? 0.5 : 2 });
-    this.updateViewport(newControllerState, this._getTransitionProps({ around: pos }), {
+    const zoomPosition = this.getZoomPosition(pos);
+    const newControllerState = this.controllerState.zoom({
+      pos: zoomPosition,
+      scale: isZoomOut ? 0.5 : 2
+    });
+    this.updateViewport(newControllerState, this._getTransitionProps({ around: zoomPosition }), {
       isZooming: true,
       isPanning: true
     });
@@ -5780,14 +5620,14 @@ var Controller = class {
       this._doubleClickDragAnchor = null;
       return false;
     }
-    this._doubleClickDragAnchor = pos;
+    this._doubleClickDragAnchor = this.getZoomPosition(pos);
     let newControllerState = this.controllerState.zoomStart(
-      { pos },
+      { pos: this._doubleClickDragAnchor },
       this._getConstraintContext("zoom", "start")
     );
     if (event.scale !== 1) {
       newControllerState = newControllerState.zoom(
-        { pos, scale: event.scale },
+        { pos: this._doubleClickDragAnchor, scale: event.scale },
         this._getConstraintContext("zoom", "update")
       );
     }
@@ -5956,7 +5796,7 @@ function getMaxBoundsExtents(viewport, target, rect) {
 }
 
 // ../core/src/controllers/map-controller.ts
-var import_web_mercator7 = require("@math.gl/web-mercator");
+var import_web_mercator6 = require("@math.gl/web-mercator");
 var PITCH_MOUSE_THRESHOLD = 5;
 var PITCH_ACCEL = 1.2;
 var WEB_MERCATOR_TILE_SIZE = 512;
@@ -5970,11 +5810,11 @@ function lngLatToWorld2([lng, lat]) {
     lat = Math.sign(lat) * 90;
   }
   if (Number.isFinite(lng)) {
-    const [x, y2] = (0, import_web_mercator7.lngLatToWorld)([lng, lat]);
-    return [x, (0, import_core15.clamp)(y2, 0, WEB_MERCATOR_TILE_SIZE)];
+    const [x, y2] = (0, import_web_mercator6.lngLatToWorld)([lng, lat]);
+    return [x, (0, import_core13.clamp)(y2, 0, WEB_MERCATOR_TILE_SIZE)];
   }
-  const [, y] = (0, import_web_mercator7.lngLatToWorld)([0, lat]);
-  return [lng, (0, import_core15.clamp)(y, 0, WEB_MERCATOR_TILE_SIZE)];
+  const [, y] = (0, import_web_mercator6.lngLatToWorld)([0, lat]);
+  return [lng, (0, import_core13.clamp)(y, 0, WEB_MERCATOR_TILE_SIZE)];
 }
 var MapState = class extends ViewState {
   constructor(options) {
@@ -6283,7 +6123,7 @@ var MapState = class extends ViewState {
         props.bearing = mod(bearing + 180, 360) - 180;
       }
     }
-    props.pitch = (0, import_core15.clamp)(pitch, minPitch, maxPitch);
+    props.pitch = (0, import_core13.clamp)(pitch, minPitch, maxPitch);
     const constrainedZoom = this._constrainZoom(props.zoom, props);
     const shouldRubberBand = rubberBand && (constraintContext == null ? void 0 : constraintContext.mode) === "elastic";
     props.zoom = (constraintContext == null ? void 0 : constraintContext.mode) === "preserve" ? props.zoom : shouldRubberBand ? applyRubberBand(props.zoom, constrainedZoom, ZOOM_RUBBER_BAND_RANGE) : constrainedZoom;
@@ -6318,8 +6158,8 @@ var MapState = class extends ViewState {
       ];
       const center = lngLatToWorld2([props.longitude, props.latitude]);
       const constrainedCenter = [
-        (0, import_core15.clamp)(center[0], minimumCenter[0], maximumCenter[0]),
-        (0, import_core15.clamp)(center[1], minimumCenter[1], maximumCenter[1])
+        (0, import_core13.clamp)(center[0], minimumCenter[0], maximumCenter[0]),
+        (0, import_core13.clamp)(center[1], minimumCenter[1], maximumCenter[1])
       ];
       const displayedCenter = center.slice();
       if (maxBoundsRect.width >= 0) {
@@ -6329,7 +6169,7 @@ var MapState = class extends ViewState {
         displayedCenter[1] = (constraintContext == null ? void 0 : constraintContext.mode) === "preserve" ? center[1] : shouldRubberBand ? applyRubberBand(center[1], constrainedCenter[1], maxBoundsRect.height / 2 / scale) : constrainedCenter[1];
       }
       if (displayedCenter[0] !== center[0] || displayedCenter[1] !== center[1]) {
-        const [displayedLongitude, displayedLatitude] = (0, import_web_mercator7.worldToLngLat)(displayedCenter);
+        const [displayedLongitude, displayedLatitude] = (0, import_web_mercator6.worldToLngLat)(displayedCenter);
         if (displayedCenter[0] !== center[0]) {
           props.longitude = displayedLongitude;
         }
@@ -6360,7 +6200,7 @@ var MapState = class extends ViewState {
       }
       if (minZoom > maxZoom) minZoom = maxZoom;
     }
-    return (0, import_core15.clamp)(zoom, minZoom, maxZoom);
+    return (0, import_core13.clamp)(zoom, minZoom, maxZoom);
   }
   _zoomFromCenter(scale, constraintContext) {
     const { width, height } = this.getViewportProps();
@@ -6416,7 +6256,7 @@ var MapState = class extends ViewState {
         deltaScaleY = 1 - centerY / startY;
       }
     }
-    deltaScaleY = (0, import_core15.clamp)(deltaScaleY, -1, 1);
+    deltaScaleY = (0, import_core13.clamp)(deltaScaleY, -1, 1);
     const { minPitch, maxPitch } = this.getViewportProps();
     const bearing = startBearing + 180 * deltaScaleX;
     let pitch = startPitch;
@@ -6745,7 +6585,7 @@ var DeckRenderer = class {
 };
 
 // ../core/src/lib/deck-picker.ts
-var import_core16 = require("@luma.gl/core");
+var import_core14 = require("@luma.gl/core");
 
 // ../core/src/lib/picking/query-object.ts
 var NO_PICKED_OBJECT = {
@@ -7014,7 +6854,7 @@ var DeckPicker = class {
         format: "rgba8unorm",
         width: 1,
         height: 1,
-        usage: import_core16.Texture.RENDER_ATTACHMENT | import_core16.Texture.COPY_SRC
+        usage: import_core14.Texture.RENDER_ATTACHMENT | import_core14.Texture.COPY_SRC
       });
       this.pickingFBO = this.device.createFramebuffer({
         colorAttachments: [pickingColorTexture],
@@ -7025,7 +6865,7 @@ var DeckPicker = class {
           format: "rgba32float",
           width: 1,
           height: 1,
-          usage: import_core16.Texture.RENDER_ATTACHMENT | import_core16.Texture.COPY_SRC
+          usage: import_core14.Texture.RENDER_ATTACHMENT | import_core14.Texture.COPY_SRC
         });
         const depthFBO = this.device.createFramebuffer({
           colorAttachments: [depthColorTexture],
@@ -7543,7 +7383,7 @@ var DeckPicker = class {
     const layout = texture.computeMemoryLayout(options);
     const readBuffer = this.device.createBuffer({
       byteLength: layout.byteLength,
-      usage: import_core16.Buffer.COPY_DST | import_core16.Buffer.MAP_READ
+      usage: import_core14.Buffer.COPY_DST | import_core14.Buffer.MAP_READ
     });
     try {
       texture.readBuffer(options, readBuffer);
@@ -8268,7 +8108,7 @@ var CanvasManager = class {
 };
 
 // ../core/src/lib/deck.ts
-var import_core17 = require("@luma.gl/core");
+var import_core15 = require("@luma.gl/core");
 var import_webgl = require("@luma.gl/webgl");
 
 // ../../node_modules/@luma.gl/webgl/dist/constants/webgl-constants.js
@@ -9886,7 +9726,7 @@ var Deck = class {
       // we must use 'premultiplied' canvas for webgpu to enable transparency and match shaders
       alphaMode: ((_b = this.props.deviceProps) == null ? void 0 : _b.type) === "webgpu" ? "premultiplied" : void 0
     };
-    return import_core17.luma.createDevice({
+    return import_core15.luma.createDevice({
       // luma by default throws if a device is already attached
       // asynchronous device creation could happen after finalize() is called
       // TODO - createDevice should support AbortController?
@@ -10167,7 +10007,7 @@ var Deck = class {
     metrics.cpuTime = stats.get("CPU Time").time;
     metrics.gpuTimePerFrame = stats.get("GPU Time").getAverageTime();
     metrics.cpuTimePerFrame = stats.get("CPU Time").getAverageTime();
-    const memoryStats = import_core17.luma.stats.get("GPU Time and Memory");
+    const memoryStats = import_core15.luma.stats.get("GPU Time and Memory");
     metrics.bufferMemory = memoryStats.get("Buffer Memory").count;
     metrics.textureMemory = memoryStats.get("Texture Memory").count;
     metrics.renderbufferMemory = memoryStats.get("Renderbuffer Memory").count;
@@ -10180,10 +10020,10 @@ Deck.defaultProps = defaultProps;
 Deck.VERSION = VERSION;
 
 // ../core/src/lib/attribute/data-column.ts
-var import_core19 = require("@luma.gl/core");
+var import_core17 = require("@luma.gl/core");
 
 // ../core/src/lib/attribute/gl-utils.ts
-var import_core18 = require("@luma.gl/core");
+var import_core16 = require("@luma.gl/core");
 function typedArrayFromDataType(type) {
   switch (type) {
     case "float64":
@@ -10192,10 +10032,10 @@ function typedArrayFromDataType(type) {
     case "unorm8":
       return Uint8ClampedArray;
     default:
-      return (0, import_core18.getTypedArrayConstructor)(type);
+      return (0, import_core16.getTypedArrayConstructor)(type);
   }
 }
-var dataTypeFromTypedArray = import_core18.dataTypeDecoder.getDataType.bind(import_core18.dataTypeDecoder);
+var dataTypeFromTypedArray = import_core16.dataTypeDecoder.getDataType.bind(import_core16.dataTypeDecoder);
 function getBufferAttributeLayout(name, accessor, deviceType) {
   if (accessor.size > 4) {
     return null;
@@ -10326,6 +10166,7 @@ var DataColumn = class {
       this._buffer = null;
     }
     typed_array_manager_default.release(this.state.allocatedValue);
+    this.state.allocatedValue = null;
   }
   getBuffer() {
     if (this.state.constant && this.device.type !== "webgpu") {
@@ -10445,7 +10286,7 @@ var DataColumn = class {
     let opts;
     if (ArrayBuffer.isView(data)) {
       opts = { value: data };
-    } else if (data instanceof import_core19.Buffer) {
+    } else if (data instanceof import_core17.Buffer) {
       opts = { buffer: data };
     } else {
       opts = data;
@@ -10645,7 +10486,7 @@ var DataColumn = class {
       this._buffer.destroy();
     }
     const { isIndexed, type } = this.settings;
-    const usage = this.device.type === "webgpu" && !isIndexed ? import_core19.Buffer.VERTEX | import_core19.Buffer.STORAGE | import_core19.Buffer.COPY_DST | import_core19.Buffer.COPY_SRC : (isIndexed ? import_core19.Buffer.INDEX : import_core19.Buffer.VERTEX) | import_core19.Buffer.COPY_DST;
+    const usage = this.device.type === "webgpu" && !isIndexed ? import_core17.Buffer.VERTEX | import_core17.Buffer.STORAGE | import_core17.Buffer.COPY_DST | import_core17.Buffer.COPY_SRC : (isIndexed ? import_core17.Buffer.INDEX : import_core17.Buffer.VERTEX) | import_core17.Buffer.COPY_DST;
     this._buffer = this.device.createBuffer({
       ...(_a = this._buffer) == null ? void 0 : _a.props,
       id: this.id,
@@ -11275,6 +11116,7 @@ ${getComputeBlock(module2.name, inputEntries, output, elementWise, expression)}
   );
   const computation = new import_engine4.Computation(outputBuffer.device, {
     source: source2,
+    modules: module2.dependencies,
     shaderAssembler: GPGPU_SHADER_ASSEMBLER,
     shaderLayout: {
       bindings: [
@@ -12666,11 +12508,11 @@ var AttributeManager = class {
 };
 
 // ../core/src/lib/layer.ts
-var import_core22 = require("@luma.gl/core");
+var import_core20 = require("@luma.gl/core");
 var import_webgl2 = require("@luma.gl/webgl");
 
 // ../core/src/transitions/cpu-interpolation-transition.ts
-var import_core20 = require("@math.gl/core");
+var import_core18 = require("@math.gl/core");
 var CPUInterpolationTransition = class extends Transition {
   get value() {
     return this._value;
@@ -12681,7 +12523,7 @@ var CPUInterpolationTransition = class extends Transition {
       settings: { fromValue, toValue, duration, easing }
     } = this;
     const t = easing(time / duration);
-    this._value = (0, import_core20.lerp)(fromValue, toValue, t);
+    this._value = (0, import_core18.lerp)(fromValue, toValue, t);
   }
 };
 
@@ -13041,7 +12883,7 @@ function mergeShaders(target, source2) {
 }
 
 // ../core/src/utils/texture.ts
-var import_core21 = require("@luma.gl/core");
+var import_core19 = require("@luma.gl/core");
 var DEFAULT_TEXTURE_PARAMETERS = {
   minFilter: "linear",
   mipmapFilter: "linear",
@@ -13051,7 +12893,7 @@ var DEFAULT_TEXTURE_PARAMETERS = {
 };
 var internalTextures = {};
 function createTexture(owner, device, image, sampler) {
-  if (image instanceof import_core21.Texture) {
+  if (image instanceof import_core19.Texture) {
     return image;
   } else if (image.constructor && image.constructor.name !== "Object") {
     image = { data: image };
@@ -13082,7 +12924,7 @@ function createTexture(owner, device, image, sampler) {
   return texture;
 }
 function destroyTexture(owner, texture) {
-  if (!texture || !(texture instanceof import_core21.Texture)) {
+  if (!texture || !(texture instanceof import_core19.Texture)) {
     return;
   }
   if (internalTextures[texture.id] === owner) {
@@ -13710,8 +13552,8 @@ var LayerState = class extends ComponentState {
 };
 
 // ../core/src/lib/layer.ts
-var import_web_mercator8 = require("@math.gl/web-mercator");
-var import_core23 = require("@loaders.gl/core");
+var import_web_mercator7 = require("@math.gl/web-mercator");
+var import_core21 = require("@loaders.gl/core");
 var TRACE_CHANGE_FLAG = "layer.changeFlag";
 var TRACE_INITIALIZE = "layer.initialize";
 var TRACE_UPDATE = "layer.update";
@@ -13774,7 +13616,7 @@ var defaultProps2 = {
       }
       let inResourceManager = resourceManager.contains(url);
       if (!inResourceManager && !loadOptions) {
-        resourceManager.add({ resourceId: url, data: (0, import_core23.load)(url, loaders), persistent: false });
+        resourceManager.add({ resourceId: url, data: (0, import_core21.load)(url, loaders), persistent: false });
         inResourceManager = true;
       }
       if (inResourceManager) {
@@ -13788,7 +13630,7 @@ var defaultProps2 = {
           requestId: propName
         });
       }
-      return (0, import_core23.load)(url, loaders, loadOptions);
+      return (0, import_core21.load)(url, loaders, loadOptions);
     }
   },
   updateTriggers: {},
@@ -13858,7 +13700,7 @@ var Layer = class extends Component {
       coordinateOrigin: this.props.coordinateOrigin,
       coordinateSystem: this.props.coordinateSystem
     });
-    const [x, y, z] = (0, import_web_mercator8.worldToPixels)(worldPosition, viewport.pixelProjectionMatrix);
+    const [x, y, z] = (0, import_web_mercator7.worldToPixels)(worldPosition, viewport.pixelProjectionMatrix);
     return xyz.length === 2 ? [x, y] : [x, y, z];
   }
   /** Unprojects a screen pixel to the current view's default coordinate system
@@ -14269,7 +14111,7 @@ var Layer = class extends Component {
       const values = changedAttributes[name].getValue();
       for (const attributeName in values) {
         const value = values[attributeName];
-        if (value instanceof import_core22.Buffer) {
+        if (value instanceof import_core20.Buffer) {
           if (changedAttributes[name].settings.isIndexed) {
             model.setIndexBuffer(value);
           } else {
@@ -14304,7 +14146,7 @@ var Layer = class extends Component {
       const values = attribute.getValue();
       for (const attributeName in values) {
         const value = values[attributeName];
-        if (value instanceof import_core22.Buffer) {
+        if (value instanceof import_core20.Buffer) {
           if (attribute.settings.isIndexed) {
             model.setIndexBuffer(value);
           } else {