leaflet-rotate 0.2.8 → 0.4.0

package/src/map/handler/TouchGestures.js

@@ -7,6 +7,16 @@
  * @typedef L.Map.TouchGestures
  */
 
+function touchToContainerPoint(map, touch) {
+    const container = map.getContainer(),
+        rect = container.getBoundingClientRect();
+
+    return new L.Point(
+        touch.clientX - rect.left - container.clientLeft,
+        touch.clientY - rect.top - container.clientTop,
+    );
+}
+
 L.Map.mergeOptions({
 
     /**
@@ -22,27 +32,27 @@ L.Map.mergeOptions({
 
 L.Map.TouchGestures = L.Handler.extend({
 
-    initialize: function(map) {
+    initialize(map) {
         this._map = map;
         this.rotate = !!this._map.options.touchRotate;
         this.zoom = !!this._map.options.touchZoom;
     },
 
-    addHooks: function() {
+    addHooks() {
         L.DomEvent.on(this._map._container, 'touchstart', this._onTouchStart, this);
     },
 
-    removeHooks: function() {
+    removeHooks() {
         L.DomEvent.off(this._map._container, 'touchstart', this._onTouchStart, this);
     },
 
-    _onTouchStart: function(e) {
-        var map = this._map;
+    _onTouchStart(e) {
+        const map = this._map;
 
         if (!e.touches || e.touches.length !== 2 || map._animatingZoom || this._zooming || this._rotating) { return; }
 
-        var p1 = map.mouseEventToContainerPoint(e.touches[0]),
-            p2 = map.mouseEventToContainerPoint(e.touches[1]),
+        const p1 = touchToContainerPoint(map, e.touches[0]),
+            p2 = touchToContainerPoint(map, e.touches[1]),
             vector = p1.subtract(p2);
 
         this._centerPoint = map.getSize()._divideBy(2);
@@ -79,19 +89,19 @@ L.Map.TouchGestures = L.Handler.extend({
         L.DomEvent.preventDefault(e);
     },
 
-    _onTouchMove: function(e) {
+    _onTouchMove(e) {
         if (!e.touches || e.touches.length !== 2 || !(this._zooming || this._rotating)) { return; }
 
-        var map = this._map,
-            p1 = map.mouseEventToContainerPoint(e.touches[0]),
-            p2 = map.mouseEventToContainerPoint(e.touches[1]),
+        const map = this._map,
+            p1 = touchToContainerPoint(map, e.touches[0]),
+            p2 = touchToContainerPoint(map, e.touches[1]),
             vector = p1.subtract(p2),
-            scale = p1.distanceTo(p2) / this._startDist,
-            delta;
+            scale = p1.distanceTo(p2) / this._startDist;
+        let delta;
 
         if (this._rotating) {
-            var theta = Math.atan(vector.x / vector.y);
-            var bearingDelta = (theta - this._startTheta) * L.DomUtil.RAD_TO_DEG;
+            const theta = Math.atan(vector.x / vector.y);
+            let bearingDelta = (theta - this._startTheta) * (180 / Math.PI);
             if (vector.y < 0) { bearingDelta += 180; }
             if (bearingDelta) {
                 /**
@@ -123,7 +133,7 @@ L.Map.TouchGestures = L.Handler.extend({
                 delta = p1._add(p2)._divideBy(2)._subtract(this._centerPoint);
                 if (scale === 1 && delta.x === 0 && delta.y === 0) { return; }
 
-                var alpha = -map.getBearing() * L.DomUtil.DEG_TO_RAD;
+                const alpha = -map.getBearing() * (Math.PI / 180);
 
                 this._center = map.unproject(map.project(this._pinchStartLatLng).subtract(delta.rotate(alpha)));
             }
@@ -135,15 +145,21 @@ L.Map.TouchGestures = L.Handler.extend({
             this._moved = true;
         }
 
-        L.Util.cancelAnimFrame(this._animRequest);
+        const moveFn = map._move.bind(map, this._center, this._zoom, { pinch: true, round: false }, undefined);
+        moveFn();
 
-        var moveFn = map._move.bind(map, this._center, this._zoom, { pinch: true, round: false }, undefined);
-        this._animRequest = L.Util.requestAnimFrame(moveFn, this, true);
+        if (this.zoom) {
+            if (map.options.zoomAnimation) {
+                map._animateZoomNoDelay(this._center, map._limitZoom(this._zoom));
+            } else {
+                map._resetView(this._center, map._limitZoom(this._zoom));
+            }
+        }
 
         L.DomEvent.preventDefault(e);
     },
 
-    _onTouchEnd: function() {
+    _onTouchEnd() {
         if (!this._moved || !(this._zooming || this._rotating)) {
             this._zooming = false;
             return;
@@ -151,8 +167,6 @@ L.Map.TouchGestures = L.Handler.extend({
 
         this._zooming = false;
         this._rotating = false;
-        L.Util.cancelAnimFrame(this._animRequest);
-
         L.DomEvent
             .off(document, 'touchmove', this._onTouchMove, this)
             .off(document, 'touchend touchcancel', this._onTouchEnd, this);

package/src/map/handler/TouchRotate.js

@@ -17,12 +17,12 @@ L.Map.mergeOptions({
 
 L.Map.TouchRotate = L.Handler.extend({
 
-    addHooks: function() {
+    addHooks() {
         this._map.touchGestures.enable();
         this._map.touchGestures.rotate = true;
     },
 
-    removeHooks: function() {
+    removeHooks() {
         this._map.touchGestures.rotate = false;
     },
 

package/src/map/handler/TouchZoom.js

@@ -34,14 +34,14 @@ L.Map.mergeOptions({
 
 L.Map.TouchZoom = L.Handler.extend({
 
-    addHooks: function() {
-        L.DomUtil.addClass(this._map._container, 'leaflet-touch-zoom');
+    addHooks() {
+        this._map._container.classList.add('leaflet-touch-zoom');
         this._map.touchGestures.enable();
         this._map.touchGestures.zoom = true;
     },
 
-    removeHooks: function() {
-        L.DomUtil.removeClass(this._map._container, 'leaflet-touch-zoom');
+    removeHooks() {
+        this._map._container.classList.remove('leaflet-touch-zoom');
         this._map.touchGestures.zoom = false;
     },
 

package/test/features/example.feature

@@ -0,0 +1,92 @@
+Feature: Rotating a Leaflet map
+  Background:
+    Given the example page is open
+
+  @issue-55 @issue-58
+  Scenario: Leaflet heat redraws stay aligned after map rotation
+    When I redraw a heat layer after rotating, panning, and zooming
+    Then the heat points remain aligned with their coordinates
+
+  @issue-11
+  Scenario: The default rotate control appears only when the map is rotated
+    When I rotate a map with the default rotate control
+    Then the default rotate control visibility follows the bearing
+
+  @issue-13
+  Scenario: Dragging the rotate control changes the map bearing
+    When I drag the rotate control
+    Then the map bearing follows the control drag
+
+  @issue-44
+  Scenario: The compass control requests device-orientation permission
+    When I activate compass mode on a permission-based device
+    Then device-orientation permission is requested
+
+  @issue-7
+  Scenario: Compass headings handle absolute, iOS, and unavailable readings
+    When I apply compass heading readings
+    Then valid compass readings update bearing and invalid readings are ignored
+
+  @issue-33 @issue-41
+  Scenario: Shift-wheel rotation can be disabled without disabling wheel zoom
+    When I use shift-wheel rotation with the handler disabled
+    Then shift-wheel input zooms without changing the map bearing
+
+  @debugger
+  Scenario: Debugger rotation presets and keyboard slider stay synchronized
+    When I use the debugger rotation controls
+    Then every debugger rotation control matches the map bearing
+
+  @debugger
+  Scenario: Debugger bounds padding updates from the keyboard
+    When I change the debugger bounds padding from the keyboard
+    Then the displayed bounds use the selected padding
+
+  @debugger
+  Scenario: Debugger geometry follows an offset and resized map
+    When I inspect debugger geometry after resizing and moving the map
+    Then the debugger reports the current map geometry
+
+  @example-ui
+  Scenario: Example base-layer radios select one layer
+    When I switch between the example base layers
+    Then exactly the selected base layer is visible
+
+  @example-ui
+  Scenario: Example zoom controls change and restore the zoom
+    When I use the example zoom controls
+    Then the zoom returns to its starting level
+
+  @example-ui
+  Scenario: Debugger rotates all example markers
+    When I rotate the example markers from the debugger
+    Then every example marker has a new rotation
+
+  @example-ui
+  Scenario Outline: Example destination buttons fly to the selected place
+    When I select "<place>" from the example page
+    Then the map settles at "<place>" at zoom 10
+
+    Examples:
+      | place          |
+      | Kyiv           |
+      | London         |
+      | San Francisco  |
+      | Washington     |
+      | Trondheim      |
+
+  @example-ui
+  Scenario Outline: Example bounds buttons fit the selected layer
+    When I fit the "<layer>" bounds from the example page
+    Then the map view contains the "<layer>" bounds
+
+    Examples:
+      | layer   |
+      | circle  |
+      | polygon |
+      | path    |
+
+  @example-ui
+  Scenario: Rectangle button resets zoom and fits the rectangle
+    When I fit the rectangle from the example page
+    Then the rectangle is fitted at zoom 14

package/test/features/gestures.feature

@@ -0,0 +1,33 @@
+Feature: Rotating a Leaflet map
+  Background:
+    Given the example page is open
+
+  @issue-43
+  Scenario: Pinch zoom refreshes paths during the gesture
+    When I move a two-finger pinch gesture
+    Then the zoom transition ends before the gesture ends
+
+  @issue-43
+  Scenario: Vector paths follow a rotated two-finger gesture
+    When I rotate and zoom two fingers over a vector path
+    Then the vector path remains aligned during the gesture
+
+  @issue-56
+  Scenario: Dragging a max-bounds marker preserves callback coordinates on a rotated map
+    When I drag a constrained marker on a rotated map
+    Then its drag callbacks match the marker and pointer coordinates
+
+  @issue-60
+  Scenario: Interactive layers stay aligned while dragging and rotating the map
+    When I drag a map with interactive layers while rotated
+    Then the marker and vector path stay at their geographic coordinates
+
+  @issue-59 @issue-52
+  Scenario: Focusing an in-bounds point does not pan an offset rotated map
+    When I focus a point near the left edge of an offset map
+    Then the map center remains unchanged
+
+  @issue-65
+  Scenario: Two-finger rotation can be disabled
+    When I disable touch rotation and rotate two fingers
+    Then the map bearing remains unchanged

package/test/features/overlays.feature

@@ -0,0 +1,58 @@
+Feature: Rotating a Leaflet map
+  Background:
+    Given the example page is open
+
+  @issue-4 @issue-35 @issue-62
+  Scenario: Rotated road labels stay upright and aligned with the map
+    When I rotate a label marker with the view
+    Then the label remains upright while following the map bearing
+
+  @issue-2 @issue-54
+  Scenario: GeoJSON in a custom pane rotates with the map
+    When I add GeoJSON to a custom pane inside the rotate pane
+    Then the custom-pane GeoJSON stays aligned with its coordinates
+
+  @issue-32
+  Scenario: Canvas overlays rotate with the map
+    When I render a Canvas vector layer on a rotated map
+    Then the Canvas renderer belongs to the rotating pane
+
+  @issue-57
+  Scenario: SVG paths stay aligned near the latitude limit without zoom animation
+    When I zoom an SVG path near the latitude limit
+    Then the path stays at its geographic coordinate
+
+  @issue-15 @issue-51
+  Scenario: Popup tip remains anchored when zoom animation is disabled
+    When I open a popup on a rotated map without zoom animation
+    Then the popup tip stays at the marker coordinate
+
+  @issue-23
+  Scenario: Removing the rotate control detaches its map listener
+    When I remove the rotate control and change the map bearing
+    Then the map rotates without invoking the removed control
+
+  @issue-3
+  Scenario: Markers remain non-draggable unless requested
+    When I create default and draggable markers
+    Then only the requested marker is draggable
+
+  @issue-46
+  Scenario: Click coordinates match the rotated map location
+    When I click a rotated map at a known container point
+    Then the click event reports the matching geographic coordinate
+
+  @issue-18 @issue-59
+  Scenario: Focusing an in-bounds marker does not pan the rotated map
+    When I focus a marker near the edge of a rotated map
+    Then the map center remains unchanged
+
+  @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
+    Then the popup stays inside the map without a large jump
+
+  @issue-52
+  Scenario: Opening a popup in a second rotated map does not move it
+    When I open a popup in a second rotated map with map listeners
+    Then the second map center remains unchanged and its popup stays anchored

package/test/features/rotation.feature

@@ -0,0 +1,36 @@
+Feature: Rotating a Leaflet map
+  Background:
+    Given the example page is open
+
+  @issue-43
+  Scenario: Rotation is enabled
+    Then rotation is enabled on the map
+
+  @issue-19
+  Scenario: Bearing survives zoom
+    When I set the bearing to 10 and zoom in twice
+    Then the bearing remains 10
+
+  @issue-19
+  Scenario: Bearing survives setting the view
+    When I set the bearing to 10 and change the view twice
+    Then the bearing remains 10
+
+  @issue-63
+  Scenario: Bearing can animate
+    When I animate the bearing to 90 degrees
+    Then the bearing reaches 90 degrees gradually
+
+  @issue-25
+  Scenario: Fit bounds zoom is stable
+    When I fit the same bounds twice
+    Then the map zoom is 14 both times
+
+  @issue-28
+  Scenario: Panning inside a marker keeps its bounds stable
+    When I pan inside the Trondheim marker
+    Then panning inside keeps the expected bounds
+
+  @issue-34
+  Scenario: Draggable marker listeners are not duplicated
+    Then the draggable marker has one drag listener and one drag-end listener

package/test/index.html

@@ -6,18 +6,12 @@
 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 
-		<!-- Leaflet JS / CSS -->
-		<script src="https://unpkg.com/leaflet@1.9/dist/leaflet-src.js"></script>
-		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9/dist/leaflet.css">
-
-		<!-- Leaflet-Rotate -->
-		<script src="../dist/leaflet-rotate-src.js"></script>
+		<link id="leaflet-css" rel="stylesheet">
 
 		<!-- include some miscellaneous -->
 		<script src="../misc/route.js"></script>
 		<script src="../misc/places.js"></script>
 		<script src="../misc/loremIpsum.js"></script>
-		<script src="../lib/debug.js"></script>
 
 		<style>
 			#map {
@@ -36,6 +30,12 @@
 
 	<body>
 
+		<label for="leaflet-version">Leaflet version:</label>
+		<select id="leaflet-version">
+			<option value="1">1.9.4</option>
+			<option value="2">2.0.0-alpha.1</option>
+		</select>
+
 		<div id="map"></div>
 
 		<hr>
@@ -61,8 +61,37 @@
 			</p>
 		</div>
 
-		<script>
-			var esri = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+		<script type="module">
+			const versionSelect = document.getElementById('leaflet-version');
+			const params = new URLSearchParams(location.search);
+			versionSelect.value = params.get('leaflet') === '2' ? '2' : '1';
+			versionSelect.addEventListener('change', () => {
+				location.search = `?leaflet=${versionSelect.value}`;
+			});
+
+			const loadScript = src => new Promise((resolve, reject) => {
+				const script = document.createElement('script');
+				script.src = src;
+				script.onload = resolve;
+				script.onerror = () => reject(new Error(`Could not load ${src}`));
+				document.head.appendChild(script);
+			});
+
+			const version = versionSelect.value;
+			document.getElementById('leaflet-css').href = version === '2'
+				? 'https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet.css'
+				: 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
+
+			if (version === '2') {
+				globalThis.L = await import('https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet.js');
+			} else {
+				await loadScript('https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.js');
+			}
+			await loadScript('../dist/leaflet-rotate-src.js');
+			await loadScript('../lib/debug.js');
+			const L = globalThis.L;
+
+			const esri = new L.TileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
 				id: 'mapbox.streets',
 				maxZoom: 24,
 				maxNativeZoom: 18,
@@ -70,14 +99,14 @@
 				// noWrap: true
 			});
 
-			var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+			const osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 				maxZoom: 24,
 				maxNativeZoom: 19,
 				attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 				// noWrap: true
 			});
 
-			var map = L.map('map', {
+			const map = new L.Map('map', {
 				center: [55, 10],
 				zoom: 2,
 				layers: [esri],
@@ -99,6 +128,9 @@
 				touchRotate: true,
 				// touchZoom: true
 			});
+			window.map = map;
+			window.esri = esri;
+			window.osm = osm;
 
 			// map.setBearing(90);
 			// map.touchRotate.enable();
@@ -111,17 +143,18 @@
 			// map.rotateControl.setPosition('bottomleft');
 			// map.setMaxBounds([[-90,-180], [90,180]]);
 
-			var layers = L.control.layers({
-				'Empty': L.tileLayer(''),
+			const layers = new L.Control.Layers({
+				'Empty': new L.TileLayer(''),
 				'Streets': osm,
 				'Satellite': esri,
 			}, null, {
 				collapsed: false
 			}).addTo(map);
+			window.layers = layers;
 
-			var markers = [];
-			for (var i in places) {
-				markers.push(L.marker(places[i], {
+			const markers = [];
+			for (const i in places) {
+				markers.push(new L.Marker(places[i], {
 						draggable: true
 					})
 					.bindPopup('<b>' + i + '</b><br>' + loremIpsum)
@@ -133,30 +166,34 @@
 					)
 					.addTo(map));
 			}
+			window.markers = markers;
 
-			var path = L.polyline(route, {
-				renderer: L.canvas()
+			const path = new L.Polyline(route, {
+				renderer: new L.Canvas()
 			}).addTo(map);
+			window.path = path;
 
-			var circle = L.circle([53, 4], 111111)
+			const circle = new L.Circle([53, 4], 111111)
 				.addTo(map);
+			window.circle = circle;
 
-			var polygon = L.polygon([
+			const polygon = new L.Polygon([
 				[48, -3],
 				[50, -4],
 				[52, 4]
 			]).addTo(map);
+			window.polygon = polygon;
 
-			const rectangle = L.rectangle([
+			const rectangle = new L.Rectangle([
 				[60.81123, 25.71632],
 				[60.81028, 25.73166],
 				[60.7997, 25.72892],
 				[60.80061, 25.71362]
 			]).addTo(map);
+			window.rectangle = rectangle;
 
 			// Display some debug info
 			L.Rotate.debug(map);
-
 		</script>
 
 		<a href="https://github.com/Raruto/leaflet-rotate" class="view-on-github" style="position: fixed;bottom: 10px;left: calc(50% - 60px);z-index: 9999;"> <img alt="View on Github" src="https://raruto.github.io/img/view-on-github.png" title="View on Github"