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

package/dist/dist.dev.js

@@ -12143,6 +12143,179 @@ void main(void) {
     }
   };
 
+  // ../../node_modules/mjolnir.js/dist/hammerjs/recognizers/double-click-drag.js
+  var EVENT_NAMES = ["", "start", "move", "end", "cancel"];
+  var DoubleClickDragRecognizer = class extends Recognizer {
+    constructor(options = {}) {
+      super({
+        enable: true,
+        event: "doubleclickdrag",
+        pointers: 1,
+        interval: 500,
+        time: 350,
+        threshold: 28,
+        dragThreshold: 1,
+        pixelsPerScale: 120,
+        ...options
+      });
+      this._tapStart = null;
+      this._lastTap = null;
+      this._drag = null;
+      this._emittedStart = false;
+    }
+    getTouchAction() {
+      return [TOUCH_ACTION_MANIPULATION];
+    }
+    getEventNames() {
+      return EVENT_NAMES.map((suffix) => this.options.event + suffix);
+    }
+    process(input) {
+      const { options } = this;
+      const validPointers = input.pointers.length === options.pointers;
+      if (!validPointers) {
+        this.reset();
+        return RecognizerState.Failed;
+      }
+      if (input.eventType & InputEvent.Start) {
+        return this._handleStart(input);
+      }
+      if (input.eventType & InputEvent.Move) {
+        return this._handleMove(input);
+      }
+      if (input.eventType & InputEvent.Cancel) {
+        return this._handleEnd(input, true);
+      }
+      if (input.eventType & InputEvent.End) {
+        return this._handleEnd(input, false);
+      }
+      return RecognizerState.Failed;
+    }
+    reset() {
+      this._tapStart = null;
+      this._lastTap = null;
+      this._drag = null;
+      this._emittedStart = false;
+    }
+    emit(input) {
+      if (!input) {
+        return;
+      }
+      if (this.state === RecognizerState.Began) {
+        if (!this._drag?.active || this._emittedStart) {
+          return;
+        }
+        this._emittedStart = true;
+        this.manager.emit(`${this.options.event}start`, input);
+        this.manager.emit(this.options.event, input);
+        return;
+      }
+      if (this.state === RecognizerState.Changed) {
+        if (!this._emittedStart) {
+          return;
+        }
+        this.manager.emit(`${this.options.event}move`, input);
+        this.manager.emit(this.options.event, input);
+        return;
+      }
+      if (this.state === RecognizerState.Ended) {
+        if (!this._emittedStart) {
+          return;
+        }
+        this.manager.emit(this.options.event, input);
+        this.manager.emit(`${this.options.event}end`, input);
+        this._emittedStart = false;
+        return;
+      }
+      if (this.state === RecognizerState.Cancelled) {
+        if (!this._emittedStart) {
+          return;
+        }
+        this.manager.emit(this.options.event, input);
+        this.manager.emit(`${this.options.event}cancel`, input);
+        this._emittedStart = false;
+      }
+    }
+    _handleStart(input) {
+      const pointerId = this._getPointerId(input);
+      if (this._lastTap && this._isTapMatch(input, this._lastTap)) {
+        this._tapStart = null;
+        this._lastTap = null;
+        this._drag = {
+          startCenter: input.center,
+          pointerId,
+          active: false
+        };
+        this._emittedStart = false;
+        return RecognizerState.Began;
+      }
+      this._tapStart = {
+        center: input.center,
+        timeStamp: input.timeStamp,
+        pointerId
+      };
+      this._lastTap = null;
+      this._drag = null;
+      this._emittedStart = false;
+      return RecognizerState.Failed;
+    }
+    _handleMove(input) {
+      if (!this._drag || !this._isSamePointer(input, this._drag.pointerId)) {
+        return RecognizerState.Failed;
+      }
+      const dy = this._drag.startCenter.y - input.center.y;
+      if (!this._drag.active && Math.abs(dy) < this.options.dragThreshold) {
+        return RecognizerState.Began;
+      }
+      this._drag.active = true;
+      input.scale = Math.pow(2, dy / this.options.pixelsPerScale);
+      return this._emittedStart ? RecognizerState.Changed : RecognizerState.Began;
+    }
+    _handleEnd(input, cancelled) {
+      if (this._drag && this._isSamePointer(input, this._drag.pointerId)) {
+        const { active, startCenter } = this._drag;
+        this._drag = null;
+        this._tapStart = null;
+        this._lastTap = null;
+        if (!active) {
+          this._emittedStart = false;
+          return RecognizerState.Failed;
+        }
+        const dy = startCenter.y - input.center.y;
+        input.scale = Math.pow(2, dy / this.options.pixelsPerScale);
+        return cancelled ? RecognizerState.Cancelled : RecognizerState.Ended;
+      }
+      if (!this._tapStart || !this._isSamePointer(input, this._tapStart.pointerId)) {
+        if (cancelled) {
+          this.reset();
+        }
+        return RecognizerState.Failed;
+      }
+      if (this._isValidTap(input)) {
+        this._lastTap = {
+          center: input.center,
+          timeStamp: input.timeStamp,
+          pointerId: this._tapStart.pointerId
+        };
+      } else {
+        this._lastTap = null;
+      }
+      this._tapStart = null;
+      return RecognizerState.Failed;
+    }
+    _isTapMatch(input, tap) {
+      return input.timeStamp - tap.timeStamp <= this.options.interval && getPointDistance(input.center, tap.center) <= this.options.threshold;
+    }
+    _isValidTap(input) {
+      return input.deltaTime <= this.options.time && input.distance <= this.options.threshold;
+    }
+    _getPointerId(input) {
+      return "pointerId" in input.srcEvent ? input.srcEvent.pointerId : null;
+    }
+    _isSamePointer(input, pointerId) {
+      return pointerId === null || this._getPointerId(input) === pointerId;
+    }
+  };
+
   // ../../node_modules/mjolnir.js/dist/hammerjs/recognizers/tap.js
   var TapRecognizer = class extends Recognizer {
     constructor(options = {}) {
@@ -12221,7 +12394,7 @@ void main(void) {
   };
 
   // ../../node_modules/mjolnir.js/dist/hammerjs/recognizers/pan.js
-  var EVENT_NAMES = ["", "start", "move", "end", "cancel", "up", "down", "left", "right"];
+  var EVENT_NAMES2 = ["", "start", "move", "end", "cancel", "up", "down", "left", "right"];
   var PanRecognizer = class extends AttrRecognizer {
     constructor(options = {}) {
       super({
@@ -12247,7 +12420,7 @@ void main(void) {
       return actions;
     }
     getEventNames() {
-      return EVENT_NAMES.map((suffix) => this.options.event + suffix);
+      return EVENT_NAMES2.map((suffix) => this.options.event + suffix);
     }
     directionTest(input) {
       const { options } = this;
@@ -12285,7 +12458,7 @@ void main(void) {
   };
 
   // ../../node_modules/mjolnir.js/dist/hammerjs/recognizers/pinch.js
-  var EVENT_NAMES2 = ["", "start", "move", "end", "cancel", "in", "out"];
+  var EVENT_NAMES3 = ["", "start", "move", "end", "cancel", "in", "out"];
   var PinchRecognizer = class extends AttrRecognizer {
     constructor(options = {}) {
       super({
@@ -12300,7 +12473,7 @@ void main(void) {
       return [TOUCH_ACTION_NONE];
     }
     getEventNames() {
-      return EVENT_NAMES2.map((suffix) => this.options.event + suffix);
+      return EVENT_NAMES3.map((suffix) => this.options.event + suffix);
     }
     attrTest(input) {
       return super.attrTest(input) && (Math.abs(input.scale - 1) > this.options.threshold || Boolean(this.state & RecognizerState.Began));
@@ -12377,8 +12550,9 @@ void main(void) {
     multipan: [PanRecognizer, { threshold: 10, direction: InputDirection.Vertical, pointers: 2 }],
     pinch: [PinchRecognizer, {}, null, ["multipan"]],
     pan: [PanRecognizer, { threshold: 1 }, ["pinch"], ["multipan"]],
-    dblclick: [TapRecognizer, { event: "dblclick", taps: 2 }],
-    click: [TapRecognizer, { event: "click" }, null, ["dblclick"]]
+    dblclick: [TapRecognizer, { event: "dblclick", taps: 2, enable: false }],
+    dblclickdrag: [DoubleClickDragRecognizer, { event: "dblclickdrag", enable: false }, ["dblclick"], null],
+    click: [TapRecognizer, { event: "click" }, ["dblclickdrag"], ["dblclick", "dblclickdrag"]]
   };
 
   // ../core/src/viewports/viewport.ts
@@ -13176,6 +13350,8 @@ void main(void) {
     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
@@ -13184,20 +13360,19 @@ void main(void) {
         resolution = 10
       } = opts;
       let { latitude = 0, height, altitude = 1.5, fovy } = opts;
-      latitude = Math.max(Math.min(latitude, MAX_LATITUDE), -MAX_LATITUDE);
+      latitude = Math.max(Math.min(latitude, 90), -90);
       height = height || 1;
       if (fovy) {
         altitude = fovyToAltitude(fovy);
       } else {
         fovy = altitudeToFovy(altitude);
       }
-      const scale5 = Math.pow(2, zoom - zoomAdjust(latitude));
+      const scaleLatitude = Math.max(Math.min(latitude, MAX_LATITUDE), -MAX_LATITUDE);
+      const scale5 = Math.pow(2, zoom - zoomAdjust(scaleLatitude));
+      const pitchRadians = pitch * DEGREES_TO_RADIANS5;
       const nearZ = opts.nearZ ?? nearZMultiplier;
-      const farZ = opts.farZ ?? (altitude + GLOBE_RADIUS * 2 * scale5 / height) * farZMultiplier;
-      const viewMatrix = new Matrix4().lookAt({ eye: [0, -altitude, 0], up: [0, 0, 1] });
-      viewMatrix.rotateX(latitude * DEGREES_TO_RADIANS5);
-      viewMatrix.rotateZ(-longitude * DEGREES_TO_RADIANS5);
-      viewMatrix.scale(scale5 / height);
+      const farZ = opts.farZ ?? (altitude + GLOBE_RADIUS * 2 * scale5 / height / Math.max(Math.cos(pitchRadians), 0.1)) * farZMultiplier;
+      const viewMatrix = new Matrix4().lookAt({ eye: [0, -altitude, 0], up: [0, 0, 1] }).rotateX(-pitchRadians).rotateY(-bearing * DEGREES_TO_RADIANS5).rotateX(latitude * DEGREES_TO_RADIANS5).rotateZ(-longitude * DEGREES_TO_RADIANS5).scale(scale5 / height);
       super({
         ...opts,
         // x, y, width,
@@ -13217,6 +13392,8 @@ void main(void) {
       this.scale = scale5;
       this.latitude = latitude;
       this.longitude = longitude;
+      this.bearing = bearing;
+      this.pitch = pitch;
       this.fovy = fovy;
       this.resolution = resolution;
     }
@@ -13306,14 +13483,17 @@ void main(void) {
       const rotationSpeed = 0.25 / scale5;
       const longitude = startLng + rotationSpeed * (startPixel[0] - pixel[0]);
       let latitude = startLat - rotationSpeed * (startPixel[1] - pixel[1]);
-      latitude = Math.max(Math.min(latitude, MAX_LATITUDE), -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, MAX_LATITUDE), -MAX_LATITUDE);
+    }
     const scaleAdjust = Math.PI * Math.cos(latitude * Math.PI / 180);
     return Math.log2(scaleAdjust);
   }
@@ -13400,6 +13580,7 @@ void main(void) {
     PINCH: ["pinchstart", "pinchmove", "pinchend"],
     MULTI_PAN: ["multipanstart", "multipanmove", "multipanend"],
     DOUBLE_CLICK: ["dblclick"],
+    DOUBLE_CLICK_DRAG: ["dblclickdragstart", "dblclickdragmove", "dblclickdragend", "dblclickdragcancel"],
     KEYBOARD: ["keydown"]
   };
   var pinchEventWorkaround = {};
@@ -13413,6 +13594,8 @@ void main(void) {
       this._customEvents = [];
       this._eventStartBlocked = null;
       this._panMove = false;
+      this._doubleClickDragAnchor = null;
+      this._suppressDoubleClickUntil = 0;
       this.invertPan = false;
       this.dragMode = "rotate";
       this.inertia = 0;
@@ -13420,6 +13603,7 @@ void main(void) {
       this.dragPan = true;
       this.dragRotate = true;
       this.doubleClickZoom = true;
+      this.doubleClickDragZoom = true;
       this.touchZoom = true;
       this.touchRotate = false;
       this.keyboard = true;
@@ -13481,6 +13665,13 @@ void main(void) {
           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":
@@ -13553,6 +13744,7 @@ void main(void) {
         dragPan = true,
         dragRotate = true,
         doubleClickZoom = true,
+        doubleClickDragZoom = false,
         touchZoom = true,
         touchRotate = false,
         keyboard = true
@@ -13563,11 +13755,13 @@ void main(void) {
       this.toggleEvents(EVENT_TYPES.PINCH, isInteractive && (touchZoom || touchRotate));
       this.toggleEvents(EVENT_TYPES.MULTI_PAN, isInteractive && touchRotate);
       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.keyboard = keyboard;
@@ -13828,6 +14022,7 @@ void main(void) {
     }
     // Default handler for the `pinchstart` event.
     _onPinchStart(event) {
+      this._doubleClickDragAnchor = null;
       const pos = this.getCenter(event);
       if (!this.isPointInBounds(pos, event)) {
         return false;
@@ -13913,6 +14108,9 @@ void main(void) {
       if (!this.doubleClickZoom) {
         return false;
       }
+      if (Date.now() < this._suppressDoubleClickUntil) {
+        return false;
+      }
       const pos = this.getCenter(event);
       if (!this.isPointInBounds(pos, event)) {
         return false;
@@ -13926,6 +14124,56 @@ void main(void) {
       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) {

package/dist/index.cjs

@@ -801,8 +801,9 @@ 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"]]
+  dblclick: [import_mjolnir.Tap, { event: "dblclick", taps: 2, enable: false }],
+  dblclickdrag: [import_mjolnir.DoubleClickDrag, { event: "dblclickdrag", enable: false }, ["dblclick"], null],
+  click: [import_mjolnir.Tap, { event: "click" }, ["dblclickdrag"], ["dblclick", "dblclickdrag"]]
 };
 
 // ../core/src/viewports/viewport.ts
@@ -1597,8 +1598,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 +1620,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 +1630,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 +1662,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 +1753,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 +1850,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 +1864,8 @@ var Controller = class {
     this._customEvents = [];
     this._eventStartBlocked = null;
     this._panMove = false;
+    this._doubleClickDragAnchor = null;
+    this._suppressDoubleClickUntil = 0;
     this.invertPan = false;
     this.dragMode = "rotate";
     this.inertia = 0;
@@ -1863,6 +1873,7 @@ var Controller = class {
     this.dragPan = true;
     this.dragRotate = true;
     this.doubleClickZoom = true;
+    this.doubleClickDragZoom = true;
     this.touchZoom = true;
     this.touchRotate = false;
     this.keyboard = true;
@@ -1925,6 +1936,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,6 +2015,7 @@ var Controller = class {
       dragPan = true,
       dragRotate = true,
       doubleClickZoom = true,
+      doubleClickDragZoom = false,
       touchZoom = true,
       touchRotate = false,
       keyboard = true
@@ -2007,11 +2026,13 @@ var Controller = class {
     this.toggleEvents(EVENT_TYPES.PINCH, isInteractive && (touchZoom || touchRotate));
     this.toggleEvents(EVENT_TYPES.MULTI_PAN, isInteractive && touchRotate);
     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.keyboard = keyboard;
@@ -2272,6 +2293,7 @@ var Controller = class {
   }
   // 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 +2379,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 +2395,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) {