@deck.gl/test-utils 9.4.0-beta.1 → 9.4.0-beta.3

package/dist/vitest.cjs

@@ -886,8 +886,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;
@@ -895,7 +895,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_core2.equals)(viewport.projectionMatrix, this.projectionMatrix) && (0, import_core2.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_core2.equals)(viewport.distanceScales.unitsPerMeter, this.distanceScales.unitsPerMeter) && (0, import_core2.equals)(viewport.projectionMatrix, this.projectionMatrix) && (0, import_core2.equals)(viewport.viewMatrix, this.viewMatrix);
   }
   /**
    * Projects xyz (possibly latitude and longitude) to pixel coordinates in window
@@ -1232,6 +1232,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);
@@ -2259,7 +2263,7 @@ var View = class {
 };
 
 // ../core/src/controllers/map-controller.ts
-var import_core9 = require("@math.gl/core");
+var import_core7 = require("@math.gl/core");
 
 // ../core/src/transitions/transition.ts
 var Transition = class {
@@ -2571,185 +2575,7 @@ var TransitionInterpolator = class {
 };
 
 // ../core/src/transitions/linear-interpolator.ts
-var import_core8 = require("@math.gl/core");
-
-// ../core/src/viewports/globe-viewport.ts
 var import_core6 = require("@math.gl/core");
-var import_web_mercator3 = require("@math.gl/web-mercator");
-var import_core7 = require("@math.gl/core");
-var import_web_mercator4 = 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_mercator3.fovyToAltitude)(fovy);
-    } else {
-      fovy = (0, import_web_mercator3.altitudeToFovy)(altitude);
-    }
-    const scaleLatitude = Math.max(Math.min(latitude, import_web_mercator4.MAX_LATITUDE), -import_web_mercator4.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_core6.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_core7.vec3.sqrLen(import_core7.vec3.sub([], coord0, coord1));
-      const l0Sqr = import_core7.vec3.sqrLen(coord0);
-      const l1Sqr = import_core7.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_core7.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_core7.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_mercator4.MAX_LATITUDE), -import_web_mercator4.MAX_LATITUDE);
-  }
-  const scaleAdjust = Math.PI * Math.cos(latitude * Math.PI / 180);
-  return Math.log2(scaleAdjust);
-}
-function transformVector(matrix, vector) {
-  const result = import_core7.vec4.transformMat4([], vector, matrix);
-  import_core7.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 {
@@ -2776,28 +2602,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_core8.lerp)(startProps[key] || 0, endProps[key] || 0, t);
+      propsInTransition[key] = (0, import_core6.lerp)(startProps[key] || 0, endProps[key] || 0, t);
     }
     if (endProps.aroundPosition && this.opts.makeViewport) {
       const viewport = this.opts.makeViewport({ ...endProps, ...propsInTransition });
@@ -2806,7 +2627,7 @@ var LinearInterpolator = class extends TransitionInterpolator {
         viewport.panByPosition(
           endProps.aroundPosition,
           // anchor point in current screen coordinates
-          (0, import_core8.lerp)(startProps.around, endProps.around, t)
+          (0, import_core6.lerp)(startProps.around, endProps.around, t)
         )
       );
     }
@@ -2815,6 +2636,7 @@ var LinearInterpolator = class extends TransitionInterpolator {
 };
 
 // ../core/src/controllers/controller.ts
+var import_web_mercator3 = require("@math.gl/web-mercator");
 var NO_TRANSITION_PROPS = {
   transitionDuration: 0
 };
@@ -2863,6 +2685,7 @@ var Controller = class {
     this.touchRotate = false;
     this.multiTouchDrag = null;
     this.trackpadGesture = false;
+    this.zoomAround = "pointer";
     this.keyboard = true;
     this.transitionManager = new TransitionManager({
       ...opts,
@@ -2957,6 +2780,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_mercator3.worldToPixels)(viewport.center, viewport.pixelProjectionMatrix);
+    return [centerX, centerY];
+  }
   isPointInBounds(pos, event) {
     const { width, height } = this.props;
     if (event && event.handled) {
@@ -3014,6 +2846,7 @@ var Controller = class {
       touchRotate = false,
       multiTouchDrag = touchRotate ? "rotate" : null,
       trackpadGesture = false,
+      zoomAround = "pointer",
       keyboard = true
     } = props;
     const isInteractive = Boolean(this.onViewStateChange);
@@ -3036,6 +2869,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) {
@@ -3269,8 +3103,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
@@ -3356,7 +3191,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 });
@@ -3375,7 +3210,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")
       );
     }
@@ -3403,15 +3238,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
         },
@@ -3456,8 +3292,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
     });
@@ -3474,14 +3314,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")
       );
     }
@@ -3650,7 +3490,7 @@ function getMaxBoundsExtents(viewport, target, rect) {
 }
 
 // ../core/src/controllers/map-controller.ts
-var import_web_mercator5 = require("@math.gl/web-mercator");
+var import_web_mercator4 = require("@math.gl/web-mercator");
 var PITCH_MOUSE_THRESHOLD = 5;
 var PITCH_ACCEL = 1.2;
 var WEB_MERCATOR_TILE_SIZE = 512;
@@ -3664,11 +3504,11 @@ function lngLatToWorld2([lng, lat]) {
     lat = Math.sign(lat) * 90;
   }
   if (Number.isFinite(lng)) {
-    const [x, y2] = (0, import_web_mercator5.lngLatToWorld)([lng, lat]);
-    return [x, (0, import_core9.clamp)(y2, 0, WEB_MERCATOR_TILE_SIZE)];
+    const [x, y2] = (0, import_web_mercator4.lngLatToWorld)([lng, lat]);
+    return [x, (0, import_core7.clamp)(y2, 0, WEB_MERCATOR_TILE_SIZE)];
   }
-  const [, y] = (0, import_web_mercator5.lngLatToWorld)([0, lat]);
-  return [lng, (0, import_core9.clamp)(y, 0, WEB_MERCATOR_TILE_SIZE)];
+  const [, y] = (0, import_web_mercator4.lngLatToWorld)([0, lat]);
+  return [lng, (0, import_core7.clamp)(y, 0, WEB_MERCATOR_TILE_SIZE)];
 }
 var MapState = class extends ViewState {
   constructor(options) {
@@ -3977,7 +3817,7 @@ var MapState = class extends ViewState {
         props.bearing = mod(bearing + 180, 360) - 180;
       }
     }
-    props.pitch = (0, import_core9.clamp)(pitch, minPitch, maxPitch);
+    props.pitch = (0, import_core7.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;
@@ -4012,8 +3852,8 @@ var MapState = class extends ViewState {
       ];
       const center = lngLatToWorld2([props.longitude, props.latitude]);
       const constrainedCenter = [
-        (0, import_core9.clamp)(center[0], minimumCenter[0], maximumCenter[0]),
-        (0, import_core9.clamp)(center[1], minimumCenter[1], maximumCenter[1])
+        (0, import_core7.clamp)(center[0], minimumCenter[0], maximumCenter[0]),
+        (0, import_core7.clamp)(center[1], minimumCenter[1], maximumCenter[1])
       ];
       const displayedCenter = center.slice();
       if (maxBoundsRect.width >= 0) {
@@ -4023,7 +3863,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_mercator5.worldToLngLat)(displayedCenter);
+        const [displayedLongitude, displayedLatitude] = (0, import_web_mercator4.worldToLngLat)(displayedCenter);
         if (displayedCenter[0] !== center[0]) {
           props.longitude = displayedLongitude;
         }
@@ -4054,7 +3894,7 @@ var MapState = class extends ViewState {
       }
       if (minZoom > maxZoom) minZoom = maxZoom;
     }
-    return (0, import_core9.clamp)(zoom, minZoom, maxZoom);
+    return (0, import_core7.clamp)(zoom, minZoom, maxZoom);
   }
   _zoomFromCenter(scale, constraintContext) {
     const { width, height } = this.getViewportProps();
@@ -4110,7 +3950,7 @@ var MapState = class extends ViewState {
         deltaScaleY = 1 - centerY / startY;
       }
     }
-    deltaScaleY = (0, import_core9.clamp)(deltaScaleY, -1, 1);
+    deltaScaleY = (0, import_core7.clamp)(deltaScaleY, -1, 1);
     const { minPitch, maxPitch } = this.getViewportProps();
     const bearing = startBearing + 180 * deltaScaleX;
     let pitch = startPitch;