fix(map): allow grabbing the map during inertial pan (#1961)

* fix(map): allow grabbing the map during inertial pan

jumpTo resets drag handlers, so skip applyView while a pan or rotate
gesture is active. Fixes #1959.

Co-authored-by: Cursor <cursoragent@cursor.com>

* test(map): cover applyView skip while dragRotate is active

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: hongkai <179992106@qq.com>
Co-authored-by: Cursor <cursoragent@cursor.com>

Author: 3 people

packages/map/src/map-controller.ts

@@ -1121,6 +1121,8 @@ export class MapController {
 
   applyView(view: MapViewState): void {
     if (!this.map) return;
+    // jumpTo stop()s drag handlers, so skip while the user is still panning.
+    if (this.map.dragPan.isActive() || this.map.dragRotate.isActive()) return;
     this.map.jumpTo(constrainMapView(view, this.mapPreferences, this.map));
   }
 

tests/map-controller.test.ts

@@ -180,6 +180,9 @@ function makeFakeMap(initialBasemapLayers: string[] = ["basemap-bg"]): {
     // A laid-out viewport, so the camera helpers that scale with the canvas
     // (the globe-safe fit ceiling) have a real size to work from.
     getCanvas: () => ({ clientWidth: 576, clientHeight: 648 }),
+    jumpTo: record("jumpTo"),
+    dragPan: { isActive: () => false },
+    dragRotate: { isActive: () => false },
     flyTo: record("flyTo"),
     fitBounds: record("fitBounds"),
     cameraForBounds: (...args: unknown[]) => {
@@ -868,6 +871,57 @@ describe("MapController camera and query helpers", () => {
     });
   });
 
+  it("does not jumpTo while the user is dragging, so inertia can be grabbed", () => {
+    const { map, fake } = makeFakeMap();
+    (map as { dragPan: { isActive: () => boolean } }).dragPan = { isActive: () => true };
+    const controller = controllerWith(map);
+
+    controller.applyView({
+      center: [12, 48],
+      zoom: 6,
+      bearing: 0,
+      pitch: 0,
+    });
+
+    assert.ok(
+      !fake.calls.some((c) => c.method === "jumpTo"),
+      "jumpTo would Camera.stop() the in-progress drag",
+    );
+  });
+
+  it("does not jumpTo while the user is rotating", () => {
+    const { map, fake } = makeFakeMap();
+    (map as { dragRotate: { isActive: () => boolean } }).dragRotate = {
+      isActive: () => true,
+    };
+    const controller = controllerWith(map);
+
+    controller.applyView({
+      center: [12, 48],
+      zoom: 6,
+      bearing: 0,
+      pitch: 0,
+    });
+
+    assert.ok(!fake.calls.some((c) => c.method === "jumpTo"));
+  });
+
+  it("jumps when the user is not dragging", () => {
+    const { map, fake } = makeFakeMap();
+    const controller = controllerWith(map);
+
+    controller.applyView({
+      center: [12, 48],
+      zoom: 6,
+      bearing: 0,
+      pitch: 0,
+    });
+
+    const jump = fake.calls.find((c) => c.method === "jumpTo");
+    assert.ok(jump);
+    assert.deepEqual((jump.args[0] as { center: [number, number] }).center, [12, 48]);
+  });
+
   it("normalizes the projection to globe/mercator", () => {
     const { map } = makeFakeMap();
     const controller = controllerWith(map);