leaflet-rotate 0.5.3 → 0.5.4

package/lib/debug.js

@@ -34,6 +34,9 @@
             .leaflet-rotate-info tr[title] {
               cursor: help;
             }
+            div.crosshair, div.pivot, div.pixelorigin, div.panebounds {
+              pointer-events: none;
+            }
             div.crosshair {
               position:absolute;
               width:1px;

package/lib/debug.min.js

@@ -1,4 +1,4 @@
-(function(){const e=Object.isExtensible(globalThis.L)?globalThis.L:Object.assign({},globalThis.L);globalThis.L=e,e.Rotate={debug(t,o={}){this._map=t,document.head.insertAdjacentHTML("beforeend",'<style>.leaflet-rotate-tools{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-bottom:6px}.leaflet-rotate-tools input,.leaflet-rotate-tools button{vertical-align:middle}.leaflet-rotate-info{border-collapse:collapse}.leaflet-rotate-info td,.leaflet-rotate-info th{padding:1px 12px 1px 0;text-align:left;white-space:nowrap;vertical-align:top}.leaflet-rotate-info td:nth-of-type(1),.leaflet-rotate-info td:nth-of-type(2){font-family:monospace;min-width:12ch}.leaflet-rotate-info tr[title]{cursor:help}div.crosshair{position:absolute;width:1px;height:1px;border:1px solid green;z-index:100;left:50%;right:50%}div.pivot,div.pixelorigin{position:absolute;width:1px;height:1px;border:5px solid yellow;border-radius:100%;z-index:1000}div.pivot:before{left:-1.5em;bottom:-2em;position:absolute;content:"PIVOT";color:#ff0}div.pixelorigin:before{left:-1.75em;top:-2em;position:absolute;content:"ORIGIN";color:#ff0}div.panebounds.main{position:absolute;width:800px;height:600px;box-sizing:border-box;border:1px solid red;border-bottom:1px red dashed;border-right:1px red dashed;z-index:100}div.panebounds.rotate{position:absolute;width:800px;height:600px;box-sizing:border-box;border:1px solid purple;border-bottom:1px purple dashed;border-right:1px purple dashed;z-index:100}div.crosshair.c1{left:calc(50% - 5px);top:50%;height:0;width:10px}div.crosshair.c2{left:50%;top:calc(50% - 5px);width:0;height:10px}#rho_input{vertical-align:middle}.panebounds:before{padding:1ch}.panebounds.rotate:before{float:right;content:"ROTATED"}.panebounds.main:before{float:left;content:"MAIN"}</style>'),t._container.insertAdjacentHTML("afterbegin",'<div class="crosshair c1"></div><div class="crosshair c2"></div>');const i=`
+(function(){const e=Object.isExtensible(globalThis.L)?globalThis.L:Object.assign({},globalThis.L);globalThis.L=e,e.Rotate={debug(t,o={}){this._map=t,document.head.insertAdjacentHTML("beforeend",'<style>.leaflet-rotate-tools{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-bottom:6px}.leaflet-rotate-tools input,.leaflet-rotate-tools button{vertical-align:middle}.leaflet-rotate-info{border-collapse:collapse}.leaflet-rotate-info td,.leaflet-rotate-info th{padding:1px 12px 1px 0;text-align:left;white-space:nowrap;vertical-align:top}.leaflet-rotate-info td:nth-of-type(1),.leaflet-rotate-info td:nth-of-type(2){font-family:monospace;min-width:12ch}.leaflet-rotate-info tr[title]{cursor:help}div.crosshair,div.pivot,div.pixelorigin,div.panebounds{pointer-events:none}div.crosshair{position:absolute;width:1px;height:1px;border:1px solid green;z-index:100;left:50%;right:50%}div.pivot,div.pixelorigin{position:absolute;width:1px;height:1px;border:5px solid yellow;border-radius:100%;z-index:1000}div.pivot:before{left:-1.5em;bottom:-2em;position:absolute;content:"PIVOT";color:#ff0}div.pixelorigin:before{left:-1.75em;top:-2em;position:absolute;content:"ORIGIN";color:#ff0}div.panebounds.main{position:absolute;width:800px;height:600px;box-sizing:border-box;border:1px solid red;border-bottom:1px red dashed;border-right:1px red dashed;z-index:100}div.panebounds.rotate{position:absolute;width:800px;height:600px;box-sizing:border-box;border:1px solid purple;border-bottom:1px purple dashed;border-right:1px purple dashed;z-index:100}div.crosshair.c1{left:calc(50% - 5px);top:50%;height:0;width:10px}div.crosshair.c2{left:50%;top:calc(50% - 5px);width:0;height:10px}#rho_input{vertical-align:middle}.panebounds:before{padding:1ch}.panebounds.rotate:before{float:right;content:"ROTATED"}.panebounds.main:before{float:left;content:"MAIN"}</style>'),t._container.insertAdjacentHTML("afterbegin",'<div class="crosshair c1"></div><div class="crosshair c2"></div>');const i=`
         <div class="leaflet-rotate-tools">
           <span>Bearing
             ${[0,15,30,45,60,75,90,180].map(n=>`<button onclick="L.Rotate._map.setBearing(${n});" title="map.setBearing(${n});">${n}</button>`).join("")}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "leaflet-rotate",
-	"version": "0.5.3",
+	"version": "0.5.4",
 	"description": "A Leaflet plugin that allows to add rotation functionality to map tiles",
 	"type": "module",
 	"main": "dist/leaflet-rotate.js",

package/src/dom/Draggable.js

@@ -1,6 +1,6 @@
 /**
- * This plugin does not modify the `L.Draggable` API; it adapts marker drag
- * coordinates in `L.Marker` when rotation or pitch is enabled.
+ * Preserve the final position when an active drag returns within its starting
+ * click tolerance. Marker geographic coordinates are adapted in `L.Marker`.
  *
  * @external L.Draggable
  * 
@@ -15,11 +15,23 @@
  * @since leaflet-rotate (v0.1.0)
  */
 
-L.Draggable.include({
-
-    /** @TODO */
-    // updateMapBearing(mapBearing) {
-    //     this._mapBearing = mapBearing;
-    // },
+const draggableProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Draggable.prototype));
 
+L.Draggable.include({
+    _onMove(e) {
+        const pointer = e.touches ? e.touches[0] : e;
+        if (this._enabled && this._moving && (!e.touches || e.touches.length === 1)) {
+            const offset = new L.Point(pointer.clientX, pointer.clientY).subtract(this._startPoint);
+            if ((!offset.x && !offset.y) || Math.abs(offset.x) + Math.abs(offset.y) < this.options.clickTolerance) {
+                L.DomEvent.preventDefault(e);
+                this._newPos = this._startPos.add(new L.Point(
+                    offset.x / this._parentScale.x, offset.y / this._parentScale.y
+                ));
+                this._lastEvent = e;
+                this._updatePosition();
+                return;
+            }
+        }
+        return draggableProto._onMove.apply(this, arguments);
+    },
 });

package/src/map/Map.js

@@ -932,10 +932,11 @@ L.Map.include({
      * @since leaflet-rotate (v0.1.4)
      */
     panInside(latlng, options) {
-        if (!this._rotate || (!this._pitch && Math.abs(this._bearing).toFixed(1) < 0.1)) {
+        if (!this._rotate) {
             return mapProto.panInside.apply(this, arguments);
         }
 
+        // The rotate pane can retain an offset after returning to bearing zero.
         options = options || {};
 
         const paddingTL = toPoint(options.paddingTopLeft || options.padding || [0, 0]),
@@ -1179,7 +1180,8 @@ L.Map.include({
                 opposite = layerCenter.multiplyBy(2).subtract(this.project(latlng).subtract(this._pixelOrigin));
             return center.subtract(this.layerPointToContainerPoint(opposite));
         }
-        return this.latLngToContainerPoint(latlng)._subtract(this.getSize()._divideBy(2));
+        return this.layerPointToContainerPoint(this.project(latlng).subtract(this._pixelOrigin))
+            ._subtract(this.getSize()._divideBy(2));
     },
 
     /**
@@ -1215,9 +1217,9 @@ L.Map.include({
         }
         // the layer point under the view center doesn't depend on zoom (pane transforms only rotate/pitch around the pivot),
         // so this matches `_setBearing` also when the pivot is no longer the view center (eg. after panning)
+        // Keep subpixel centers exact: wheel bursts magnify rounding from earlier zooms.
         return this.project(center, zoom)
-            ._subtract(this.containerPointToLayerPoint(this.getSize()._divideBy(2)))
-            ._round();
+            ._subtract(this.containerPointToLayerPoint(this.getSize()._divideBy(2)));
     },
 
     /**

package/test/features/example.feature

@@ -51,6 +51,11 @@ Feature: Rotating a Leaflet map
     When I inspect debugger geometry after resizing and moving the map
     Then the debugger reports the current map geometry
 
+  @debugger @issue-76
+  Scenario: Debugger overlays do not intercept marker clicks
+    When I place the debugger overlays over a marker
+    Then the marker receives the pointer events
+
   @example-ui
   Scenario: Example base-layer radios select one layer
     When I switch between the example base layers

package/test/features/harness.feature

@@ -0,0 +1,84 @@
+Feature: Interactive regression scenarios have executable BDD coverage
+  Background:
+    Given the interactive regression page is open
+
+  Scenario: Every interactive scenario has a BDD example
+    Then every interactive scenario is listed in the BDD examples
+
+  Scenario: An active drag can finish within its starting click tolerance
+    Then active drags return to their starting position without turning clicks into drags
+
+  Scenario Outline: Camera gestures retain their intended behavior
+    When I run the interactive scenario "<scenario>"
+    Then the interactive camera result is "<result>"
+
+    Examples:
+      | scenario                                               | result        |
+      | Ctrl+drag up: pitch from center                         | pitch up      |
+      | Ctrl+drag down: pitch clamps at 0                       | pitch zero    |
+      | Ctrl+drag far up: pitch clamps at max                   | pitch max     |
+      | Ctrl+drag right, just above center                      | clockwise     |
+      | Ctrl+drag right, just below center                      | counterclockwise |
+      | Ctrl+drag right, far above center (angular)              | clockwise     |
+      | Ctrl+drag right, far below center (angular)              | counterclockwise |
+      | Ctrl+drag diagonal, pitched + rotated                   | pitch and bearing |
+      | Ctrl+drag fast (2 big steps)                            | pitch and bearing |
+      | Ctrl+drag full circle around center                     | pitch and bearing |
+      | Ctrl+drag leaving the map                               | pitch and bearing |
+      | Ctrl+drag starting on a marker                          | pitch and bearing |
+      | Ctrl released mid-drag                                 | pitch and bearing |
+      | Ctrl pressed mid-pan (should keep panning)               | pan           |
+      | Right-drag up + right                                  | pitch and bearing |
+      | Ctrl+drag then plain pan                               | rotate then pan |
+      | Shift+wheel rotate                                     | shift rotate  |
+      | Wheel then Ctrl+drag while zoom pending                 | cancel zoom   |
+      | Wheel during Ctrl+drag                                 | zoom and rotate |
+
+  Scenario Outline: Wheel input zooms around its geographic anchor
+    When I run the interactive scenario "<scenario>"
+    Then the interactive camera result is "<result>"
+
+    Examples:
+      | scenario                                               | result    |
+      | Wheel in at top-right, flat (control case)               | zoom in   |
+      | Wheel in at top-right, rotated                          | zoom in   |
+      | Wheel in at top-right, pitch 60                         | zoom in   |
+      | Wheel out at bottom-left, pitch 45                      | zoom out  |
+      | Wheel near horizon, pitch 75                           | zoom in   |
+      | Ctrl+wheel pinch-in burst (trackpad), pitch 50           | zoom in   |
+      | Ctrl+wheel pinch-out burst (trackpad), rotated           | zoom out  |
+      | Ctrl+wheel mouse notches at center                      | zoom in   |
+      | Low zoom rotated, wheel in (layer jump check)           | zoom in   |
+
+  Scenario Outline: Pitched drags retain their geographic anchor
+    When I run the interactive scenario "<scenario>"
+    Then the interactive camera result is "pan"
+
+    Examples:
+      | scenario                                               |
+      | Pan pitched 70                                         |
+      | Pan pitched 70: vertical up                            |
+      | Pan pitched 70: vertical down                          |
+      | Pan pitched 70: horizontal left                        |
+      | Pan pitched 70: horizontal right                       |
+      | Pan pitched 70: diagonal up-right                       |
+      | Pan pitched 70: diagonal down-left                      |
+      | Pan pitched 70: reverse vertical drag                   |
+      | Pan pitched 70: multi-direction loop                    |
+      | Pan pitched 70, bearing 225: diagonal                   |
+
+  Scenario Outline: Navigation reaches its destination while pitched and rotated
+    When I run the interactive scenario "<scenario>"
+    Then the interactive camera result is "navigate"
+
+    Examples:
+      | scenario                                               |
+      | Go to: Circle                                          |
+      | Go to: Polygon                                         |
+      | Go to: Path                                            |
+      | Go to: Kyiv                                            |
+      | Go to: London                                          |
+      | Go to: San Francisco                                   |
+      | Go to: Washington                                      |
+      | Go to: Trondheim                                       |
+      | Go to: Rectangle (fit from z 0)                         |

package/test/features/overlays.feature

@@ -47,6 +47,22 @@ Feature: Rotating a Leaflet map
     When I focus a marker near the edge of a rotated map
     Then the map center remains unchanged
 
+  @issue-76
+  Scenario: Marker popups still work after dragging and resetting the bearing
+    When I drag between city markers and reset north before clicking Trondheim
+    Then the Trondheim popup opens without jumping back to London
+
+  Scenario Outline: PanInside preserves visibility and minimal movement near bearing zero
+    When I keep padded points visible with rotation <rotate> and bearing <bearing>
+    Then panInside moves only enough to reach the padded viewport
+
+    Examples:
+      | rotate | bearing |
+      | false  | 0       |
+      | true   | 0       |
+      | true   | 2.8     |
+      | true   | 2.9     |
+
   @issue-51
   Scenario: Opening an edge popup pans only enough to keep it visible
     When I open a popup near the edge of a rotated map

package/test/index.html

@@ -293,6 +293,11 @@
 
 		const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 		const frame = () => new Promise(resolve => requestAnimationFrame(resolve));
+		const clientPoint = (el, fx, fy) => {
+			const r = el.getBoundingClientRect();
+			// MouseEvent client coordinates are integers; anchors must use the same pixels.
+			return { clientX: Math.round(r.left + el.clientLeft + el.clientWidth * fx), clientY: Math.round(r.top + el.clientTop + el.clientHeight * fy) };
+		};
 		/**
 		 * Create synthetic mouse/pointer/wheel input for one renderer.
 		 * Positions are container fractions (0..1 inside, outside values allowed).
@@ -308,8 +313,7 @@
 			let pressed = 0, button = 0;
 			/** Convert fractional container coordinates to viewport client pixels. */
 			const at = (fx, fy) => {
-				const r = el.getBoundingClientRect();
-				return { clientX: r.left + r.width * fx, clientY: r.top + r.height * fy };
+				return clientPoint(el, fx, fy);
 			};
 			/** Hit-test layers/markers; use body outside this map so document listeners still run. */
 			const target = ({ clientX, clientY }) => {
@@ -531,14 +535,25 @@
 			}
 			const anchor = scenario.anchor && (() => {
 				const r = m.el.getBoundingClientRect();
-				return scenario.anchor.map(([fx, fy]) => [r.width * fx, r.height * fy]);
+				return scenario.anchor.map(([fx, fy]) => {
+					const p = clientPoint(m.el, fx, fy);
+					return [p.clientX - r.left - m.el.clientLeft, p.clientY - r.top - m.el.clientTop];
+				});
 			})();
-			const latlng = anchor && m.toLatLng(anchor[0]);
+			let latlng = anchor && m.toLatLng(anchor[0]);
+			const input = driver(key), down = input.down;
+			if (anchor) {
+				input.down = async (...args) => {
+					// A composite rotation + pan anchors the point when the plain pan starts.
+					if (!args[2]?.ctrlKey && !args[2]?.button) latlng = m.toLatLng(anchor[0]);
+					await down(...args);
+				};
+			}
 			const inertia = key === 'lf' && scenario.noInertia ? lf.options.inertia : undefined;
 			if (inertia !== undefined) lf.options.inertia = false;
 			try {
 				if (scenario.goTo) await runGoTo(key, scenario.goTo);
-				else await scenario.run(driver(key));
+				else await scenario.run(input);
 				if (key === 'ml' && scenario.noInertia) ml.stop();
 				await sleep(scenario.settle || 900);
 			} finally {

package/test/steps/example.steps.js

@@ -59,6 +59,24 @@ Then('every debugger rotation control matches the map bearing', function () {
   });
 });
 
+When('I place the debugger overlays over a marker', async function () {
+  this.markerHit = await this.page.evaluate(() => {
+    map.setView(markers[0].getLatLng(), 6, { animate: false });
+    map.setBearing(0);
+    const icon = markers[0]._icon;
+    const box = icon.getBoundingClientRect();
+    const mapBox = map._mapPane.getBoundingClientRect();
+    const x = box.left + box.width / 2, y = box.top + box.height / 2;
+    map.___rotatePivotDot.style.left = `${x - mapBox.left - 5}px`;
+    map.___rotatePivotDot.style.top = `${y - mapBox.top - 5}px`;
+    return document.elementFromPoint(x, y) === icon;
+  });
+});
+
+Then('the marker receives the pointer events', function () {
+  assert.equal(this.markerHit, true);
+});
+
 When('I rotate a map with the default rotate control', async function () {
   this.rotateControlVisibility = await this.page.evaluate(() => {
     const container = document.createElement('div');

package/test/steps/harness.steps.js

@@ -0,0 +1,207 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import { Given, Then, When } from '@cucumber/cucumber';
+import { generateMessages } from '@cucumber/gherkin';
+import { IdGenerator, SourceMediaType } from '@cucumber/messages';
+
+Given('the interactive regression page is open', { timeout: 30000 }, async function () {
+  this.harnessErrors = [];
+  this.page.on('pageerror', error => this.harnessErrors.push(error.message));
+  await this.page.route(/server\.arcgisonline\.com|tile\.openstreetmap\.org/, route =>
+    route.fulfill({ contentType: 'image/svg+xml', body: '<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"/>' }));
+  const version = process.env.LEAFLET_VERSION === '2' ? '2' : '1';
+  await this.page.goto(`${this.baseUrl}/test/index.html?leaflet=${version}&maplibre=0&debug=0`, {
+    waitUntil: 'domcontentloaded',
+  });
+  await this.page.waitForFunction(() => window.runScenario && window.scenarios);
+  await this.page.evaluate(() => { map.options.inertia = false; });
+  assert.match(await this.page.evaluate(() => L.version), version === '2' ? /^2\.0\.0-alpha/ : /^1\.9/);
+});
+
+Then('every interactive scenario is listed in the BDD examples', async function () {
+  const source = await readFile(new URL('../features/harness.feature', import.meta.url), 'utf8');
+  const messages = generateMessages(source, 'harness.feature', SourceMediaType.TEXT_X_CUCUMBER_GHERKIN_PLAIN, {
+    includeGherkinDocument: true,
+    includePickles: false,
+    includeSource: false,
+    newId: IdGenerator.incrementing(),
+  });
+  const document = messages.find(message => message.gherkinDocument)?.gherkinDocument;
+  assert.ok(document, 'Could not parse harness.feature');
+  const examples = document.feature.children.flatMap(child =>
+    child.scenario?.examples.flatMap(example => {
+      const index = example.tableHeader.cells.findIndex(cell => cell.value === 'scenario');
+      return example.tableBody.map(row => row.cells[index].value);
+    }) || []);
+  const scenarios = await this.page.evaluate(() => scenarios.map(scenario => scenario.name));
+  assert.equal(new Set(examples).size, examples.length, 'Duplicate BDD examples');
+  assert.deepEqual(examples.sort(), scenarios.sort(), 'Interactive scenarios and BDD examples must match');
+});
+
+Then('active drags return to their starting position without turning clicks into drags', async function () {
+  await this.page.evaluate(() => {
+    const parent = document.createElement('div');
+    parent.style.cssText = 'position:absolute;z-index:10000;left:100px;top:100px;width:100px;height:100px;transform:scale(2);transform-origin:0 0';
+    const element = document.createElement('div');
+    element.id = 'returning-drag';
+    element.style.cssText = 'width:20px;height:20px;background:red';
+    parent.append(element);
+    document.body.append(parent);
+    const draggable = new L.Draggable(element);
+    draggable.enable();
+    window.returningDrag = { draggable, parent, element, starts: 0 };
+    draggable.on('dragstart', () => returningDrag.starts++);
+    L.DomUtil.setPosition(element, new L.Point(0, 0));
+  });
+  for (const offset of [0, 1]) {
+    const rect = await this.page.locator('#returning-drag').boundingBox();
+    const start = { x: rect.x + 10, y: rect.y + 10 };
+    await this.page.mouse.move(start.x, start.y);
+    await this.page.mouse.down();
+    await this.page.mouse.move(start.x + 30, start.y + 30, { steps: 3 });
+    await this.page.mouse.move(start.x + offset, start.y);
+    await this.page.mouse.up();
+    const result = await this.page.evaluate(() => {
+      const { element, draggable, starts } = returningDrag;
+      const position = L.DomUtil.getPosition(element);
+      L.DomUtil.setPosition(element, new L.Point(0, 0));
+      return { x: position.x, y: position.y, starts, moving: draggable._moving };
+    });
+    assert.ok(Math.abs(result.x - offset / 2) < 1e-7, JSON.stringify(result));
+    assert.equal(result.y, 0, JSON.stringify(result));
+    assert.equal(result.starts, offset + 1, JSON.stringify(result));
+    assert.equal(result.moving, false, JSON.stringify(result));
+  }
+  const rect = await this.page.locator('#returning-drag').boundingBox();
+  await this.page.mouse.move(rect.x + 10, rect.y + 10);
+  await this.page.mouse.down();
+  await this.page.mouse.move(rect.x + 11, rect.y + 10);
+  await this.page.mouse.up();
+  const click = await this.page.evaluate(() => {
+    const { parent, element, draggable, starts } = returningDrag;
+    const position = L.DomUtil.getPosition(element);
+    draggable.disable();
+    parent.remove();
+    return { x: position.x, y: position.y, starts };
+  });
+  assert.deepEqual(click, { x: 0, y: 0, starts: 2 });
+});
+
+When('I run the interactive scenario {string}', { timeout: 30000 }, async function (name) {
+  this.harnessResult = await this.page.evaluate(async name => {
+    const scenario = scenarios.find(scenario => scenario.name === name);
+    if (!scenario) throw new Error(`Unknown interactive scenario: ${name}`);
+    const initial = { lat: 50, lng: 5, zoom: 5, bearing: 0, pitch: 0, ...scenario.view };
+    map.setView([initial.lat, initial.lng], initial.zoom, { animate: false });
+    map.setPitch(initial.pitch);
+    map.setBearing(initial.bearing);
+    const markerLocations = markers.map(marker => marker.getLatLng());
+    const probe = new L.CircleMarker([initial.lat, initial.lng], { radius: 4 }).addTo(map);
+    const bearings = [];
+    const onRotate = () => bearings.push(map.getBearing());
+    map.on('rotate', onRotate);
+    const anchorProbe = () => {
+      if (scenario.anchor) {
+        const [x, y] = scenario.anchor[0];
+        probe.setLatLng(map.containerPointToLatLng([map.getSize().x * x, map.getSize().y * y]));
+      }
+    };
+    map.once('rotate', anchorProbe);
+    const results = await runScenario(scenario);
+    map.off('rotate', onRotate);
+    map.off('rotate', anchorProbe);
+    const [{ end, drift }] = results;
+    const center = map.project(map.getCenter());
+    if (scenario.goTo) probe.setLatLng(map.getCenter());
+    const expected = map.latLngToContainerPoint(probe.getLatLng());
+    const rect = probe.getElement().getBoundingClientRect();
+    const container = map.getContainer().getBoundingClientRect();
+    const vectorError = Math.hypot(
+      rect.left + rect.width / 2 - container.left - map.getContainer().clientLeft - expected.x,
+      rect.top + rect.height / 2 - container.top - map.getContainer().clientTop - expected.y,
+    );
+    probe.remove();
+    const destination = scenario.goTo;
+    const boundsLayer = { Circle: circle, Polygon: polygon, Path: path, 'Rectangle (fit from z 0)': rectangle }[destination];
+    return {
+      name, initial, end, drift, vectorError, bearings,
+      centerMovement: center.distanceTo(map.project([initial.lat, initial.lng], end.zoom)),
+      centerError: map.latLngToContainerPoint(map.getCenter()).distanceTo(map.getSize().divideBy(2)),
+      markersUnchanged: markers.every((marker, index) => marker.getLatLng().equals(markerLocations[index])),
+      dragging: Boolean(map.shiftKeyRotate._dragging || map.dragging._draggable._moving),
+      destinationDistance: destination && !boundsLayer ? map.getCenter().distanceTo(new L.LatLng(...places[destination])) : null,
+      boundsVisible: boundsLayer ? map.getBounds().contains(boundsLayer.getBounds()) : null,
+    };
+  }, name);
+});
+
+Then('the interactive camera result is {string}', function (outcome) {
+  const r = this.harnessResult, details = JSON.stringify(r);
+  assert.deepEqual(this.harnessErrors, [], 'Interactive scenario raised a browser error');
+  assert.ok(Object.values(r.end).every(Number.isFinite), details);
+  assert.ok(r.end.pitch >= 0 && r.end.pitch <= 85, details);
+  assert.ok(r.end.bearing >= 0 && r.end.bearing < 360, details);
+  assert.equal(r.markersUnchanged, true, details);
+  assert.equal(r.dragging, false, details);
+  assert.ok(r.centerError < 1.5, details);
+  assert.ok(r.vectorError < 3, details);
+  if (r.drift !== null) assert.ok(r.drift < 3, details);
+  const bearingDelta = ((r.end.bearing - r.initial.bearing + 540) % 360) - 180;
+  if (['zoom in', 'zoom out', 'pan', 'navigate'].includes(outcome)) {
+    assert.ok(Math.abs(bearingDelta) < 0.1, details);
+    assert.ok(Math.abs(r.end.pitch - r.initial.pitch) < 0.1, details);
+  }
+  switch (outcome) {
+    case 'pitch up':
+      assert.ok(r.end.pitch > r.initial.pitch + 1, details);
+      assert.ok(Math.abs(bearingDelta) < 0.1, details);
+      break;
+    case 'pitch zero':
+      assert.equal(r.end.pitch, 0, details);
+      break;
+    case 'pitch max':
+      assert.ok(Math.abs(r.end.pitch - 85) < 0.1, details);
+      break;
+    case 'clockwise':
+    case 'counterclockwise':
+      assert.ok(outcome === 'clockwise' ? bearingDelta > 1 : bearingDelta < -1, details);
+      assert.equal(r.end.pitch, r.initial.pitch, details);
+      break;
+    case 'pitch and bearing':
+    case 'rotate then pan':
+    case 'zoom and rotate':
+      assert.ok(r.bearings.some(bearing => Math.abs(((bearing - r.initial.bearing + 540) % 360) - 180) > 1), details);
+      assert.ok(r.end.pitch > r.initial.pitch + 1, details);
+      if (outcome === 'zoom and rotate') assert.ok(r.end.zoom > r.initial.zoom, details);
+      break;
+    case 'shift rotate':
+      assert.ok(Math.abs(bearingDelta - 30) < 0.1, details);
+      assert.equal(r.end.pitch, r.initial.pitch, details);
+      break;
+    case 'cancel zoom':
+      assert.equal(r.end.zoom, r.initial.zoom, details);
+      assert.ok(r.end.pitch > 1 && Math.abs(bearingDelta) > 1, details);
+      break;
+    case 'zoom in':
+    case 'zoom out':
+      assert.ok(outcome === 'zoom in' ? r.end.zoom > r.initial.zoom : r.end.zoom < r.initial.zoom, details);
+      break;
+    case 'pan':
+      assert.equal(r.end.zoom, r.initial.zoom, details);
+      break;
+    case 'navigate':
+      if (r.destinationDistance !== null) {
+        assert.ok(r.destinationDistance < 1, details);
+        assert.equal(r.end.zoom, 10, details);
+      } else {
+        assert.equal(r.boundsVisible, true, details);
+      }
+      break;
+    default:
+      assert.fail(`Unknown camera expectation: ${outcome}`);
+  }
+  if (!['zoom in', 'zoom out', 'zoom and rotate', 'pan', 'rotate then pan', 'navigate'].includes(outcome)) {
+    assert.equal(r.end.zoom, r.initial.zoom, details);
+    assert.ok(r.centerMovement < 1.5, details);
+  }
+});

package/test/steps/overlays.steps.js

@@ -178,6 +178,148 @@ When('I focus a marker near the edge of a rotated map', async function () {
   });
 });
 
+When('I drag between city markers and reset north before clicking Trondheim', { timeout: 30000 }, async function () {
+  await this.page.evaluate(() => {
+    map.options.inertia = false;
+    map.setBearing(0);
+    map.setView(places.Kyiv, 6, { animate: false });
+    markers.forEach((marker, index) => { marker.getElement().id = `city-marker-${index}`; });
+  });
+  const rect = await this.page.locator('#map').boundingBox();
+  await this.page.mouse.move(rect.x + rect.width / 2, rect.y + rect.height / 2 - 20);
+  await this.page.keyboard.down('Control');
+  await this.page.mouse.down();
+  await this.page.mouse.move(rect.x + rect.width / 2 + 75, rect.y + rect.height / 2 - 20, { steps: 8 });
+  await this.page.mouse.up();
+  await this.page.keyboard.up('Control');
+  assert.ok(await this.page.evaluate(() => map.getBearing() > 1 && map.getPitch() === 0));
+
+  const waitForPan = () => this.page.waitForFunction(() => !map._panAnim || !map._panAnim._inProgress);
+  const dragTo = async name => {
+    for (let i = 0; i < 30; i++) {
+      const point = await this.page.evaluate(name => {
+        const point = map.latLngToContainerPoint(places[name]);
+        return { x: point.x, y: point.y };
+      }, name);
+      const dx = Math.max(-rect.width / 4, Math.min(rect.width / 4, rect.width * 0.6 - point.x));
+      const dy = Math.max(-rect.height / 4, Math.min(rect.height / 4, rect.height * 0.65 - point.y));
+      if (Math.hypot(dx, dy) < 2) return;
+      await this.page.mouse.move(rect.x + rect.width / 2, rect.y + rect.height / 2);
+      await this.page.mouse.down();
+      await this.page.mouse.move(rect.x + rect.width / 2 + dx, rect.y + rect.height / 2 + dy, { steps: 4 });
+      await this.page.mouse.up();
+    }
+    throw new Error(`Could not drag to ${name}`);
+  };
+  for (const [index, name] of [[0, 'Kyiv'], [1, 'London']]) {
+    await dragTo(name);
+    await this.page.locator(`#city-marker-${index}`).click();
+    await waitForPan();
+    await this.page.locator('.leaflet-popup-close-button').click();
+  }
+  const resetCenter = await this.page.evaluate(() => map.project(map.getCenter()));
+  await this.page.locator('.leaflet-control-rotate-toggle').click();
+  await this.page.waitForFunction(() => map.getBearing() === 0 && !map._bearingAnimationFrame);
+  this.cityPopup = await this.page.evaluate(before => ({
+    resetMovement: map.project(map.getCenter()).distanceTo(new L.Point(before.x, before.y)),
+  }), resetCenter);
+  await dragTo('Trondheim');
+  const before = await this.page.evaluate(() => map.project(map.getCenter()));
+  // Use the pointer position, so a focus-induced jump cannot make Playwright chase the marker.
+  const icon = await this.page.locator('#city-marker-4').boundingBox();
+  await this.page.locator('#city-marker-4').focus();
+  await waitForPan();
+  this.cityPopup.focusMovement = await this.page.evaluate(before =>
+    map.project(map.getCenter()).distanceTo(new L.Point(before.x, before.y)), before);
+  await this.page.mouse.click(icon.x + icon.width / 2, icon.y + icon.height / 2);
+  await waitForPan();
+  Object.assign(this.cityPopup, await this.page.evaluate(before => {
+    const popup = markers[4].getPopup();
+    const rect = map.getContainer().getBoundingClientRect();
+    const popupRect = popup.getElement()?.getBoundingClientRect();
+    const center = map.project(map.getCenter());
+    const viewportCenter = map.project(map.containerPointToLatLng(map.getSize().divideBy(2)));
+    return {
+      open: markers[4].isPopupOpen(),
+      movement: center.distanceTo(new L.Point(before.x, before.y)),
+      centerError: center.distanceTo(viewportCenter),
+      inside: Boolean(popupRect && popupRect.left >= rect.left - 1 && popupRect.right <= rect.right + 1
+        && popupRect.top >= rect.top - 1 && popupRect.bottom <= rect.bottom + 1),
+      size: Math.max(map.getSize().x, map.getSize().y),
+    };
+  }, before));
+});
+
+Then('the Trondheim popup opens without jumping back to London', function () {
+  assert.ok(this.cityPopup.resetMovement < 1, JSON.stringify(this.cityPopup));
+  assert.ok(this.cityPopup.focusMovement < 1, JSON.stringify(this.cityPopup));
+  assert.equal(this.cityPopup.open, true, JSON.stringify(this.cityPopup));
+  assert.equal(this.cityPopup.inside, true, JSON.stringify(this.cityPopup));
+  assert.ok(this.cityPopup.movement < this.cityPopup.size / 2, JSON.stringify(this.cityPopup));
+  assert.ok(this.cityPopup.centerError < 1, JSON.stringify(this.cityPopup));
+});
+
+When('I keep padded points visible with rotation {word} and bearing {float}', async function (rotate, bearing) {
+  this.paddedPans = await this.page.evaluate(({ rotate, bearing }) => {
+    const element = document.createElement('div');
+    element.style.cssText = 'width: 400px; height: 300px; margin-left: 100px';
+    document.body.append(element);
+    const testMap = new L.Map(element, {
+      center: [55, 10], zoom: 6, rotate: rotate === 'true', bearing, rotateControl: false,
+    });
+    const results = [];
+    for (const padding of [
+      {},
+      { padding: [20, 30] },
+      { paddingTopLeft: new L.Point(35, 45), paddingBottomRight: new L.Point(25, 15) },
+    ]) {
+      const tl = padding.paddingTopLeft || new L.Point(...(padding.padding || [0, 0]));
+      const br = padding.paddingBottomRight || new L.Point(...(padding.padding || [0, 0]));
+      const min = tl, max = testMap.getSize().subtract(br);
+      for (const point of [
+        min.add([1, 1]), max.subtract([1, 1]),
+        new L.Point(min.x - 80, 150), new L.Point(max.x + 80, 150),
+        new L.Point(200, min.y - 80), new L.Point(200, max.y + 80),
+        min.subtract([80, 80]), max.add([80, 80]),
+      ]) {
+        testMap.setView([55, 10], 6, { reset: true, animate: false });
+        const latlng = testMap.containerPointToLatLng(point);
+        // Measure the rendered center, avoiding the cached setView center before pixel rounding.
+        const center = testMap.getSize().divideBy(2);
+        const before = testMap.project(testMap.containerPointToLatLng(center));
+        const expected = new L.Point(
+          Math.max(min.x, Math.min(max.x, point.x)),
+          Math.max(min.y, Math.min(max.y, point.y)),
+        );
+        const returnedMap = testMap.panInside(latlng, { ...padding, animate: false });
+        const actual = testMap.latLngToContainerPoint(latlng);
+        const after = testMap.project(testMap.containerPointToLatLng(center));
+        results.push({
+          point, expected, actual, rotate, bearing,
+          chainable: returnedMap === testMap,
+          movement: before.distanceTo(after),
+          expectedMovement: point.distanceTo(expected),
+          error: actual.distanceTo(expected),
+        });
+      }
+    }
+    testMap.remove();
+    element.remove();
+    return results;
+  }, { rotate, bearing });
+});
+
+Then('panInside moves only enough to reach the padded viewport', function () {
+  for (const result of this.paddedPans) {
+    assert.equal(result.chainable, true, JSON.stringify(result));
+    assert.ok(result.error < 1.5, JSON.stringify(result));
+    assert.ok(Math.abs(result.movement - result.expectedMovement) < 1.5, JSON.stringify(result));
+    if (result.expectedMovement === 0) {
+      assert.equal(result.movement, 0, JSON.stringify(result));
+    }
+  }
+});
+
 When('I redraw a heat layer after rotating, panning, and zooming', async function () {
   await this.page.evaluate(() => {
     map.setView([55, 10], 6, { animate: false });