@deck.gl/arcgis 9.3.7 → 9.4.0-alpha.2

package/dist/index.cjs

@@ -797,13 +797,6 @@ var PROJECTION_MODE = {
    */
   IDENTITY: 0
 };
-var RECOGNIZERS = {
-  multipan: [import_mjolnir.Pan, { threshold: 10, direction: import_mjolnir.InputDirection.Vertical, pointers: 2 }],
-  pinch: [import_mjolnir.Pinch, {}, null, ["multipan"]],
-  pan: [import_mjolnir.Pan, { threshold: 1 }, ["pinch"], ["multipan"]],
-  dblclick: [import_mjolnir.Tap, { event: "dblclick", taps: 2 }],
-  click: [import_mjolnir.Tap, { event: "click" }, null, ["dblclick"]]
-};
 
 // ../core/src/viewports/viewport.ts
 var DEGREES_TO_RADIANS = Math.PI / 180;
@@ -1597,8 +1590,8 @@ 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_web_mercator4 = 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;
@@ -1619,6 +1612,8 @@ 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
@@ -1627,20 +1622,19 @@ var GlobeViewport = class extends Viewport {
       resolution = 10
     } = opts;
     let { latitude = 0, height, altitude = 1.5, fovy } = opts;
-    latitude = Math.max(Math.min(latitude, import_web_mercator4.MAX_LATITUDE), -import_web_mercator4.MAX_LATITUDE);
+    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 scale = Math.pow(2, zoom - zoomAdjust(latitude));
+    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) * farZMultiplier;
-    const viewMatrix = new import_core6.Matrix4().lookAt({ eye: [0, -altitude, 0], up: [0, 0, 1] });
-    viewMatrix.rotateX(latitude * DEGREES_TO_RADIANS2);
-    viewMatrix.rotateZ(-longitude * DEGREES_TO_RADIANS2);
-    viewMatrix.scale(scale / height);
+    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,
@@ -1660,6 +1654,8 @@ var GlobeViewport = class extends Viewport {
     this.scale = scale;
     this.latitude = latitude;
     this.longitude = longitude;
+    this.bearing = bearing;
+    this.pitch = pitch;
     this.fovy = fovy;
     this.resolution = resolution;
   }
@@ -1749,14 +1745,17 @@ var GlobeViewport = class extends Viewport {
     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, import_web_mercator4.MAX_LATITUDE), -import_web_mercator4.MAX_LATITUDE);
+    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) {
+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);
 }
@@ -1843,6 +1842,7 @@ var EVENT_TYPES = {
   PINCH: ["pinchstart", "pinchmove", "pinchend"],
   MULTI_PAN: ["multipanstart", "multipanmove", "multipanend"],
   DOUBLE_CLICK: ["dblclick"],
+  DOUBLE_CLICK_DRAG: ["dblclickdragstart", "dblclickdragmove", "dblclickdragend", "dblclickdragcancel"],
   KEYBOARD: ["keydown"]
 };
 var pinchEventWorkaround = {};
@@ -1856,6 +1856,10 @@ var Controller = class {
     this._customEvents = [];
     this._eventStartBlocked = null;
     this._panMove = false;
+    this._multiPanMode = null;
+    this._multiPanStartCenter = null;
+    this._doubleClickDragAnchor = null;
+    this._suppressDoubleClickUntil = 0;
     this.invertPan = false;
     this.dragMode = "rotate";
     this.inertia = 0;
@@ -1863,8 +1867,11 @@ var Controller = class {
     this.dragPan = true;
     this.dragRotate = true;
     this.doubleClickZoom = true;
+    this.doubleClickDragZoom = true;
     this.touchZoom = true;
     this.touchRotate = false;
+    this.multiTouchDrag = null;
+    this.trackpadGesture = false;
     this.keyboard = true;
     this.transitionManager = new TransitionManager({
       ...opts,
@@ -1912,11 +1919,11 @@ var Controller = class {
       case "panend":
         return this._onPanEnd(event);
       case "pinchstart":
-        return eventStartBlocked ? false : this._onPinchStart(event);
+        return eventStartBlocked || !this._isTrackpadGestureAllowed(event) ? false : this._onPinchStart(event);
       case "pinchmove":
-        return this._onPinch(event);
+        return this._isTrackpadGestureAllowed(event) ? this._onPinch(event) : false;
       case "pinchend":
-        return this._onPinchEnd(event);
+        return this._isTrackpadGestureAllowed(event) ? this._onPinchEnd(event) : false;
       case "multipanstart":
         return eventStartBlocked ? false : this._onMultiPanStart(event);
       case "multipanmove":
@@ -1925,6 +1932,13 @@ var Controller = class {
         return this._onMultiPanEnd(event);
       case "dblclick":
         return this._onDoubleClick(event);
+      case "dblclickdragstart":
+        return eventStartBlocked ? false : this._onDoubleClickDragStart(event);
+      case "dblclickdragmove":
+        return this._onDoubleClickDrag(event);
+      case "dblclickdragend":
+      case "dblclickdragcancel":
+        return this._onDoubleClickDragEnd(event);
       case "wheel":
         return this._onWheel(event);
       case "keydown":
@@ -1997,23 +2011,33 @@ var Controller = class {
       dragPan = true,
       dragRotate = true,
       doubleClickZoom = true,
+      doubleClickDragZoom = false,
       touchZoom = true,
       touchRotate = false,
+      multiTouchDrag = touchRotate ? "rotate" : null,
+      trackpadGesture = false,
       keyboard = true
     } = props;
     const isInteractive = Boolean(this.onViewStateChange);
     this.toggleEvents(EVENT_TYPES.WHEEL, isInteractive && scrollZoom);
     this.toggleEvents(EVENT_TYPES.PAN, isInteractive);
-    this.toggleEvents(EVENT_TYPES.PINCH, isInteractive && (touchZoom || touchRotate));
-    this.toggleEvents(EVENT_TYPES.MULTI_PAN, isInteractive && touchRotate);
+    this.toggleEvents(
+      EVENT_TYPES.PINCH,
+      isInteractive && (touchZoom || multiTouchDrag === "rotate")
+    );
+    this.toggleEvents(EVENT_TYPES.MULTI_PAN, isInteractive && Boolean(multiTouchDrag));
     this.toggleEvents(EVENT_TYPES.DOUBLE_CLICK, isInteractive && doubleClickZoom);
+    this.toggleEvents(EVENT_TYPES.DOUBLE_CLICK_DRAG, isInteractive && doubleClickDragZoom);
     this.toggleEvents(EVENT_TYPES.KEYBOARD, isInteractive && keyboard);
     this.scrollZoom = scrollZoom;
     this.dragPan = dragPan;
     this.dragRotate = dragRotate;
     this.doubleClickZoom = doubleClickZoom;
+    this.doubleClickDragZoom = doubleClickDragZoom;
     this.touchZoom = touchZoom;
-    this.touchRotate = touchRotate;
+    this.touchRotate = multiTouchDrag === "rotate";
+    this.multiTouchDrag = multiTouchDrag;
+    this.trackpadGesture = trackpadGesture;
     this.keyboard = keyboard;
     const dimensionChanged = !oldProps || oldProps.height !== props.height || oldProps.width !== props.width || oldProps.maxBounds !== props.maxBounds;
     if (dimensionChanged && props.maxBounds) {
@@ -2188,6 +2212,9 @@ var Controller = class {
     if (!this.scrollZoom) {
       return false;
     }
+    if (this.trackpadGesture && event.device !== "mouse") {
+      return false;
+    }
     const pos = this.getCenter(event);
     if (!this.isPointInBounds(pos, event)) {
       return false;
@@ -2215,63 +2242,77 @@ var Controller = class {
     return true;
   }
   _onMultiPanStart(event) {
-    const pos = this.getCenter(event);
-    if (!this.isPointInBounds(pos, event)) {
+    const { multiTouchDrag } = this;
+    if (!multiTouchDrag || !this._isMultiPanEventAllowed(event, multiTouchDrag)) {
       return false;
     }
-    const newControllerState = this.controllerState.rotateStart({ pos });
+    const currentCenter = event.offsetCenter;
+    if (!this.isPointInBounds(this.getCenter(event), event)) {
+      return false;
+    }
+    const isTrackpad = event.pointerType === "trackpad";
+    const startCenter = {
+      x: currentCenter.x - (isTrackpad ? 0 : event.deltaX),
+      y: currentCenter.y - (isTrackpad ? 0 : event.deltaY)
+    };
+    const startEvent = { ...event, offsetCenter: startCenter };
+    const pos = this.getCenter(startEvent);
+    const newControllerState = multiTouchDrag === "pan" ? this.controllerState.panStart({ pos }) : this.controllerState.rotateStart({ pos });
+    this._multiPanMode = multiTouchDrag;
+    this._multiPanStartCenter = startCenter;
     this.updateViewport(newControllerState, NO_TRANSITION_PROPS, { isDragging: true });
     return true;
   }
   _onMultiPan(event) {
-    if (!this.touchRotate) {
-      return false;
-    }
-    if (!this.isDragging()) {
+    const { mode, event: panEvent } = this._getMultiPanEvent(event);
+    if (!mode || !panEvent || !this.isDragging()) {
       return false;
     }
-    const pos = this.getCenter(event);
-    pos[0] -= event.deltaX;
-    const newControllerState = this.controllerState.rotate({ pos });
-    this.updateViewport(newControllerState, NO_TRANSITION_PROPS, {
-      isDragging: true,
-      isRotating: true
-    });
-    return true;
+    return mode === "pan" ? this._onPanMove(panEvent) : this._onPanRotate(panEvent);
   }
   _onMultiPanEnd(event) {
-    if (!this.isDragging()) {
+    const { mode, event: panEvent } = this._getMultiPanEvent(event);
+    if (!mode || !panEvent || !this.isDragging()) {
+      this._resetMultiPan();
       return false;
     }
-    const { inertia } = this;
-    if (this.touchRotate && inertia && event.velocityY) {
-      const pos = this.getCenter(event);
-      const endPos = [pos[0], pos[1] += event.velocityY * inertia / 2];
-      const newControllerState = this.controllerState.rotate({ pos: endPos });
-      this.updateViewport(
-        newControllerState,
-        {
-          ...this._getTransitionProps(),
-          transitionDuration: inertia,
-          transitionEasing: INERTIA_EASING
-        },
-        {
-          isDragging: false,
-          isRotating: true
-        }
-      );
-      this.blockEvents(inertia);
-    } else {
-      const newControllerState = this.controllerState.rotateEnd();
-      this.updateViewport(newControllerState, null, {
-        isDragging: false,
-        isRotating: false
-      });
+    const handled = mode === "pan" ? this._onPanMoveEnd(panEvent) : this._onPanRotateEnd(panEvent);
+    this._resetMultiPan();
+    return handled;
+  }
+  _isTrackpadGestureAllowed(event) {
+    return event.pointerType !== "trackpad" || this.trackpadGesture;
+  }
+  _isMultiPanEventAllowed(event, mode) {
+    if (event.pointerType === "trackpad") {
+      return this.trackpadGesture && (mode === "pan" ? this.dragPan : this.dragRotate);
     }
-    return true;
+    return event.pointerType === "touch" && (mode === "pan" ? this.dragPan : this.dragRotate);
+  }
+  _getMultiPanEvent(event) {
+    const mode = this._multiPanMode;
+    const startCenter = this._multiPanStartCenter;
+    if (!mode || !startCenter) {
+      return { mode: null, event: null };
+    }
+    return {
+      mode,
+      event: {
+        ...event,
+        offsetCenter: {
+          x: startCenter.x + event.deltaX,
+          y: startCenter.y + event.deltaY
+        }
+      }
+    };
+  }
+  _resetMultiPan() {
+    this._multiPanMode = null;
+    this._multiPanStartCenter = null;
   }
   // Default handler for the `pinchstart` event.
   _onPinchStart(event) {
+    this._doubleClickDragAnchor = null;
     const pos = this.getCenter(event);
     if (!this.isPointInBounds(pos, event)) {
       return false;
@@ -2357,6 +2398,9 @@ var Controller = class {
     if (!this.doubleClickZoom) {
       return false;
     }
+    if (Date.now() < this._suppressDoubleClickUntil) {
+      return false;
+    }
     const pos = this.getCenter(event);
     if (!this.isPointInBounds(pos, event)) {
       return false;
@@ -2370,6 +2414,56 @@ var Controller = class {
     this.blockEvents(100);
     return true;
   }
+  _onDoubleClickDragStart(event) {
+    if (!this.doubleClickDragZoom) {
+      this._doubleClickDragAnchor = null;
+      return false;
+    }
+    const pos = this.getCenter(event);
+    if (!this.isPointInBounds(pos, event)) {
+      this._doubleClickDragAnchor = null;
+      return false;
+    }
+    this._doubleClickDragAnchor = pos;
+    let newControllerState = this.controllerState.zoomStart({ pos });
+    if (event.scale !== 1) {
+      newControllerState = newControllerState.zoom({ pos, scale: event.scale });
+    }
+    this.updateViewport(newControllerState, NO_TRANSITION_PROPS, {
+      isDragging: true,
+      isPanning: true,
+      isZooming: true
+    });
+    return true;
+  }
+  _onDoubleClickDrag(event) {
+    const pos = this._doubleClickDragAnchor;
+    if (!pos) {
+      return false;
+    }
+    const newControllerState = this.controllerState.zoom({ pos, scale: event.scale });
+    this.updateViewport(newControllerState, NO_TRANSITION_PROPS, {
+      isDragging: true,
+      isPanning: true,
+      isZooming: true
+    });
+    return true;
+  }
+  _onDoubleClickDragEnd(_event) {
+    if (!this._doubleClickDragAnchor) {
+      return false;
+    }
+    this._doubleClickDragAnchor = null;
+    const newControllerState = this.controllerState.zoomEnd();
+    this.updateViewport(newControllerState, null, {
+      isDragging: false,
+      isPanning: false,
+      isZooming: false
+    });
+    this._suppressDoubleClickUntil = Date.now() + 100;
+    this.blockEvents(100);
+    return true;
+  }
   // Default handler for the `keydown` event
   _onKeyDown(event) {
     if (!this.keyboard) {