Preserve live gesture when camera setter is called from inside a

GitOrigin-RevId: 9cdc8e49485bd4668ffe1ae3bbb05f5d2262d057

Author: Xdudu

src/ui/camera.ts

@@ -31,6 +31,7 @@ import {getZoomAdjustment} from '../geo/projection/adjustments';
 import type Tile from '../source/tile';
 import type Transform from '../geo/transform';
 import type HandlerManager from './handler_manager';
+import type {KeepGesture} from './handler_manager';
 import type {TaskID} from '../util/task_queue';
 import type {Callback} from '../types/callback';
 import type {MapEvents} from './events';
@@ -1103,7 +1104,9 @@ class Camera extends Evented<MapEvents> {
      * @see [Example: Update a feature in realtime](https://docs.mapbox.com/mapbox-gl-js/example/live-update-feature/)
      */
     jumpTo(options: CameraOptions & {preloadOnly?: AnimationOptions['preloadOnly']}, eventData?: EventData): this {
-        this.stop();
+        // a camera setter (setCenter/setPitch/…) called from within a 'drag'/'move' handler
+        // must not tear down the gesture the user is still performing.
+        this._stop({keepGesture: 'ifPointerDown'});
 
         const tr = options.preloadOnly ? this.transform.clone() : this.transform;
         let zoomChanged = false,
@@ -1325,7 +1328,9 @@ class Camera extends Evented<MapEvents> {
         },
         eventData?: EventData,
     ): this {
-        this._stop(false, options.easeId);
+        this._stop({
+            easeId: options.easeId
+        });
 
         options = {offset: [0, 0],
             duration: 500,
@@ -1777,7 +1782,24 @@ class Camera extends Evented<MapEvents> {
     // No-op in the Camera class, implemented by the Map class
     _cancelRenderFrame(_: TaskID): void {}
 
-    _stop(allowGestures?: boolean, easeId?: string): this {
+    // Cancels any running camera animation.
+    // `keepGesture` controls whether to keep a gesture that is currently in progress or not:
+    // - 'never' (default behavior):
+    //      Never keep the gesture.
+    //      Used in `stop`.
+    // - 'always':
+    //      Always keep the gesture.
+    //      Used when only want to cancel any animation.
+    // - 'ifPointerDown':
+    //      Keep the gesture only if a pointer is still physically down (see `_isPointerDown` in `HandlerManager`).
+    //      Possible use case: when `jumpTo` called from inside a drag/move handler, do not kill the drag the user is still performing.
+    _stop({
+        easeId,
+        keepGesture
+    }: {
+        easeId?: string;
+        keepGesture?: KeepGesture;
+    } = {}): this {
         if (this._easeFrameId) {
             this._cancelRenderFrame(this._easeFrameId);
             this._easeFrameId = undefined;
@@ -1792,10 +1814,10 @@ class Camera extends Evented<MapEvents> {
             this._onEaseEnd = undefined;
             onEaseEnd.call(this, easeId);
         }
-        if (!allowGestures) {
-            const handlers = this.handlers;
-            if (handlers) handlers.stop(false);
-        }
+
+        const handlers = this.handlers;
+        if (handlers) handlers.stop(keepGesture);
+
         return this;
     }
 

src/ui/handler_manager.ts

@@ -41,6 +41,8 @@ export type HandlerManagerOptions = {
     pitchRotateKey?: PitchRotateKey;
 };
 
+export type KeepGesture = 'always' | 'ifPointerDown' | 'never';
+
 type EventsInProgress = {
     [T in keyof MapEvents]?: MapEvents[T];
 };
@@ -126,6 +128,12 @@ class HandlerManager {
     _dragOrigin: vec3 | null | undefined;
     _originalZoom: number | null | undefined;
 
+    // Whether a pointer is currently physically down.
+    // Used to avoid tearing down an in-progress gesture when a soft camera update (jumpTo/easeTo/flyTo)
+    // is called while the user is still dragging.
+    _mouseBeingPressed: boolean;
+    _activeTouchCount: number;
+
     constructor(map: Map, options: HandlerManagerOptions) {
         this._map = map;
         this._el = this._map.getCanvasContainer();
@@ -138,6 +146,8 @@ class HandlerManager {
         this._previousActiveHandlers = {};
         this._trackingEllipsoid = new TrackingEllipsoid();
         this._dragOrigin = null;
+        this._mouseBeingPressed = false;
+        this._activeTouchCount = 0;
 
         // Track whether map is currently moving, to compute start/move/end events
         this._eventsInProgress = {};
@@ -259,15 +269,17 @@ class HandlerManager {
         this._handlersById[handlerName] = handler;
     }
 
-    stop(allowEndAnimation: boolean) {
+    stop(keepGesture: KeepGesture = 'never') {
         // do nothing if this method was triggered by a gesture update
         if (this._updatingCamera) return;
 
+        if (keepGesture === 'always' || (keepGesture === 'ifPointerDown' && this._isPointerDown())) return;
+
         for (const {handler} of this._handlers) {
             handler.reset();
         }
         this._inertia.clear();
-        this._fireEvents({}, {}, allowEndAnimation);
+        this._fireEvents({}, {}, false);
         this._changes = [];
         this._originalZoom = undefined;
     }
@@ -326,7 +338,43 @@ class HandlerManager {
         return mapTouches as unknown as TouchList;
     }
 
+    // Track raw physical pointer state from the DOM events
+    _updatePointerLiveness(e: InputEvent | RenderFrameEvent) {
+        switch (e.type) {
+        case 'mousedown':
+            this._mouseBeingPressed = true;
+            break;
+        case 'mousemove':
+            // A mousemove with no buttons held means the press was released
+            // outside the window/iframe and no mouseup was delivered.
+            if ((e as MouseEvent).buttons === 0) {
+                this._mouseBeingPressed = false;
+            }
+            break;
+        case 'mouseup':
+            this._mouseBeingPressed = false;
+            break;
+        case 'touchstart':
+        case 'touchmove':
+        case 'touchend':
+        case 'touchcancel':
+            this._activeTouchCount = (e as TouchEvent).touches ? (e as TouchEvent).touches.length : 0;
+            break;
+        case 'blur':
+            this._mouseBeingPressed = false;
+            this._activeTouchCount = 0;
+            break;
+        }
+    }
+
+    // Whether the user is still physically holding a pointer down (mouse or touch).
+    // Helps avoid an in-progress gesture being torn down unexpectedly.
+    _isPointerDown(): boolean {
+        return this._mouseBeingPressed || this._activeTouchCount > 0;
+    }
+
     handleEvent(e: InputEvent | RenderFrameEvent, eventName?: string) {
+        this._updatePointerLiveness(e);
         this._updatingCamera = true;
         assert(e.timeStamp !== undefined);
 
@@ -384,7 +432,7 @@ class HandlerManager {
         }
 
         if (Object.keys(activeHandlers).length || hasChange(mergedHandlerResult)) {
-            this._map._stop(true);
+            this._map._stop({keepGesture: 'always'});
         }
 
         this._updatingCamera = false;
@@ -478,7 +526,7 @@ class HandlerManager {
         }
 
         // Catches double click and double tap zooms when camera is constrained over terrain
-        if (tr._isCameraConstrained) map._stop(true);
+        if (tr._isCameraConstrained) map._stop({keepGesture: 'always'});
 
         if (!hasChange(combinedResult)) {
             this._fireEvents(combinedEventsInProgress, deactivatedHandlers, true);
@@ -509,7 +557,7 @@ class HandlerManager {
         tr.cameraElevationReference = "sea";
 
         // stop any ongoing camera animations (easeTo, flyTo)
-        map._stop(true);
+        map._stop({keepGesture: 'always'});
 
         around = around || map.transform.centerPoint;
         if (bearingDelta) tr.bearing += bearingDelta;

test/unit/ui/handler/drag_pan.test.ts

@@ -628,3 +628,94 @@ test('Dragging to the left', async () => {
     expect(equalWithPrecision(-35.15596, lng, 0.001)).toBeTruthy();
     expect(equalWithPrecision(-0.00029, lat, 0.001)).toBeTruthy();
 });
+
+test('TouchPanHandler keeps the drag alive when a camera setter is called from a drag handler', () => {
+    const map = createMap();
+    const target = map.getCanvas();
+
+    let dragCount = 0;
+    map.on('drag', () => {
+        dragCount++;
+        map.setPitch(map.getPitch() + 1);
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    simulate.touchstart(target, {touches: [constructTouch(target, {target, identifier: 1, clientX: 0, clientY: 0})]});
+    map._renderTaskQueue.run();
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    simulate.touchmove(target, {touches: [constructTouch(target, {target, identifier: 1, clientX: 0, clientY: 10})]});
+    map._renderTaskQueue.run();
+    expect(dragCount).toBe(1);
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    simulate.touchmove(target, {touches: [constructTouch(target, {target, identifier: 1, clientX: 0, clientY: 20})]});
+    map._renderTaskQueue.run();
+    expect(dragCount).toBe(2);
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    simulate.touchend(target);
+    map._renderTaskQueue.run();
+
+    map.remove();
+});
+
+test('DragPanHandler keeps the drag alive when a camera setter is called from a drag handler (GLJS-1102)', () => {
+    const map = createMap();
+
+    let dragCount = 0;
+    map.on('drag', () => {
+        dragCount++;
+        map.setPitch(map.getPitch() + 1);
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    simulate.mousedown(map.getCanvas());
+    map._renderTaskQueue.run();
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    simulate.mousemove(window.document, {buttons, clientX: 10, clientY: 10});
+    map._renderTaskQueue.run();
+    expect(dragCount).toBe(1);
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    simulate.mousemove(window.document, {buttons, clientX: 20, clientY: 20});
+    map._renderTaskQueue.run();
+    expect(dragCount).toBe(2);
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    simulate.mouseup(window.document);
+    map._renderTaskQueue.run();
+
+    map.remove();
+});
+
+test('map.stop() ends an in-progress drag even while the pointer is still down', () => {
+    const map = createMap();
+
+    const drag = vi.fn();
+    map.on('drag', drag);
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    simulate.mousedown(map.getCanvas());
+    map._renderTaskQueue.run();
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    simulate.mousemove(window.document, {buttons, clientX: 10, clientY: 10});
+    map._renderTaskQueue.run();
+    expect(drag).toHaveBeenCalledTimes(1);
+
+    // The public stop() uses keepGesture 'never' and tears down even a live gesture.
+    map.stop();
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    simulate.mousemove(window.document, {buttons, clientX: 20, clientY: 20});
+    map._renderTaskQueue.run();
+    expect(drag).toHaveBeenCalledTimes(1);
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    simulate.mouseup(window.document);
+    map._renderTaskQueue.run();
+
+    map.remove();
+});