leaflet-rotate 0.3.0 → 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,10 +145,8 @@ L.Map.TouchGestures = L.Handler.extend({
             this._moved = true;
         }
 
-        L.Util.cancelAnimFrame(this._animRequest);
-
-        var moveFn = map._move.bind(map, this._center, this._zoom, { pinch: true, round: false }, undefined);
-        this._animRequest = L.Util.requestAnimFrame(moveFn, this, true);
+        const moveFn = map._move.bind(map, this._center, this._zoom, { pinch: true, round: false }, undefined);
+        moveFn();
 
         if (this.zoom) {
             if (map.options.zoomAnimation) {
@@ -151,7 +159,7 @@ L.Map.TouchGestures = L.Handler.extend({
         L.DomEvent.preventDefault(e);
     },
 
-    _onTouchEnd: function() {
+    _onTouchEnd() {
         if (!this._moved || !(this._zooming || this._rotating)) {
             this._zooming = false;
             return;
@@ -159,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

@@ -27,6 +27,11 @@ Feature: Rotating a Leaflet map
     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

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"

package/test/steps/bearing.steps.js

@@ -74,7 +74,7 @@ Then('the bearing reaches 90 degrees gradually', function () {
 When('I fit the same bounds twice', async function () {
   this.zooms = await this.page.evaluate(() => {
     const bounds = [[60.81123, 25.71632], [60.81028, 25.73166], [60.7997, 25.72892], [60.80061, 25.71362]];
-    L.rectangle(bounds).addTo(map);
+    new L.Rectangle(bounds).addTo(map);
     map.setZoom(0, { animate: false });
     map.fitBounds(bounds, { animate: false });
     const first = map.getZoom();
@@ -148,8 +148,8 @@ When('I rotate and zoom two fingers over a vector path', async function () {
   this.gesturePathPositions = await this.page.evaluate(() => {
     map.options.zoomAnimation = true;
     map.setView([55, 10], 6, { animate: false });
-    const location = L.latLng(55.1, 10.1);
-    const path = L.circleMarker(location, { radius: 8 }).addTo(map);
+    const location = new L.LatLng(55.1, 10.1);
+    const path = new L.CircleMarker(location, { radius: 8 }).addTo(map);
     const container = map.getContainer();
     const center = map.getSize().divideBy(2);
     const initial = map.getBearing(),

package/test/steps/example.steps.js

@@ -64,7 +64,7 @@ When('I rotate a map with the default rotate control', async function () {
     const container = document.createElement('div');
     container.style.cssText = 'width: 400px; height: 300px';
     document.body.append(container);
-    const testMap = L.map(container, {
+    const testMap = new L.Map(container, {
       center: [55, 10],
       zoom: 6,
       rotate: true,
@@ -166,7 +166,7 @@ When('I apply compass heading readings', async function () {
     const container = document.createElement('div');
     container.style.cssText = 'width: 400px; height: 300px';
     document.body.append(container);
-    const absoluteMap = L.map(container, {
+    const absoluteMap = new L.Map(container, {
       center: [55, 10],
       zoom: 6,
       rotate: true,
@@ -212,6 +212,50 @@ Then('valid compass readings update bearing and invalid readings are ignored', f
   assert.ok(Math.abs(absoluteEventBearing - 60) < 1e-6);
 });
 
+When('I use shift-wheel rotation with the handler disabled', async function () {
+  this.shiftWheelDisabled = await this.page.evaluate(async () => {
+    const container = document.createElement('div');
+    container.style.cssText = 'width: 400px; height: 300px';
+    document.body.append(container);
+    const testMap = new L.Map(container, {
+      center: [55, 10],
+      zoom: 6,
+      rotate: true,
+      rotateControl: false,
+      shiftKeyRotate: false,
+      zoomControl: false,
+      zoomAnimation: false,
+    });
+    const initialZoom = testMap.getZoom();
+    const initialBearing = testMap.getBearing();
+    container.dispatchEvent(new WheelEvent('wheel', {
+      bubbles: true,
+      cancelable: true,
+      deltaY: -60,
+      shiftKey: true,
+    }));
+    await new Promise(resolve => setTimeout(resolve, 150));
+    const result = {
+      handlerDisabled: !testMap.shiftKeyRotate.enabled(),
+      wheelZoomEnabled: testMap.scrollWheelZoom.enabled(),
+      zoomChanged: testMap.getZoom() > initialZoom,
+      bearingUnchanged: testMap.getBearing() === initialBearing,
+    };
+    testMap.remove();
+    container.remove();
+    return result;
+  });
+});
+
+Then('shift-wheel input zooms without changing the map bearing', function () {
+  assert.deepEqual(this.shiftWheelDisabled, {
+    handlerDisabled: true,
+    wheelZoomEnabled: true,
+    zoomChanged: true,
+    bearingUnchanged: true,
+  });
+});
+
 When('I change the debugger bounds padding from the keyboard', async function () {
   await this.page.evaluate(() => {
     map.setView([55, 10], 6, { animate: false });
@@ -244,13 +288,30 @@ When('I inspect debugger geometry after resizing and moving the map', async func
     map.panBy([20, 15], { animate: false });
     map.setZoom(6, { animate: false });
     window.debugMouseEvent = null;
-    map.once('mousemove', event => {
-      window.debugMouseEvent = {
-        latlng: [event.latlng.lng, event.latlng.lat],
-        layerPoint: [event.layerPoint.x, event.layerPoint.y],
-        containerPoint: [event.containerPoint.x, event.containerPoint.y],
-      };
-    });
+    if (L.version.startsWith('2.')) {
+      map.getContainer().addEventListener('mousemove', event => {
+        const rect = map.getContainer().getBoundingClientRect();
+        const containerPoint = new L.Point(
+          event.clientX - rect.left - map.getContainer().clientLeft,
+          event.clientY - rect.top - map.getContainer().clientTop,
+        );
+        const latlng = map.containerPointToLatLng(containerPoint);
+        const layerPoint = map.containerPointToLayerPoint(containerPoint);
+        window.debugMouseEvent = {
+          latlng: [latlng.lng, latlng.lat],
+          layerPoint: [layerPoint.x, layerPoint.y],
+          containerPoint: [containerPoint.x, containerPoint.y],
+        };
+      }, { once: true });
+    } else {
+      map.once('mousemove', event => {
+        window.debugMouseEvent = {
+          latlng: [event.latlng.lng, event.latlng.lat],
+          layerPoint: [event.layerPoint.x, event.layerPoint.y],
+          containerPoint: [event.containerPoint.x, event.containerPoint.y],
+        };
+      });
+    }
   });
 
   const bounds = await this.page.locator('#map').boundingBox();
@@ -339,9 +400,9 @@ When('I rotate the example markers from the debugger', async function () {
 When('I select {string} from the example page', async function (place) {
   await this.page.getByRole('button', { name: place, exact: true }).click();
   await this.page.waitForFunction(name =>
-    map.getZoom() === 10 && map.getCenter().distanceTo(L.latLng(places[name])) < 1, place);
+    map.getZoom() === 10 && map.getCenter().distanceTo(new L.LatLng(...places[name])) < 1, place);
   this.destination = await this.page.evaluate(name => ({
-    distance: map.getCenter().distanceTo(L.latLng(places[name])),
+    distance: map.getCenter().distanceTo(new L.LatLng(...places[name])),
     zoom: map.getZoom(),
   }), place);
 });

package/test/steps/gestures.steps.js

@@ -60,7 +60,7 @@ When('I drag a constrained marker on a rotated map', async function () {
     map.setView([23.1799, 113.4103], 15, { animate: false });
     map.setBearing(30);
     map.setZoom(16, { animate: false });
-    window.dragMarker = L.marker([23.1799, 113.4103], { draggable: true }).addTo(map);
+    window.dragMarker = new L.Marker([23.1799, 113.4103], { draggable: true }).addTo(map);
     window.dragMarkerStart = window.dragMarker.getLatLng();
     window.dragCallbackLatLngs = [];
     window.dragMarker.on('drag dragend', event => {
@@ -100,8 +100,8 @@ When('I drag a map with interactive layers while rotated', async function () {
   await this.page.evaluate(() => {
     map.options.zoomAnimation = false;
     map.setView([55, 10], 6, { animate: false });
-    const marker = L.marker([55.1, 10.1]).addTo(map);
-    const path = L.circleMarker([55.2, 10.2], { radius: 8 }).addTo(map);
+    const marker = new L.Marker([55.1, 10.1]).addTo(map);
+    const path = new L.CircleMarker([55.2, 10.2], { radius: 8 }).addTo(map);
     map.setBearing(35);
     window.interactiveLayers = { marker, path };
   });
@@ -134,7 +134,7 @@ When('I drag a map with interactive layers while rotated', async function () {
         pathScreen.y - mapRect.top - pathExpected.y,
       ];
     };
-    const moved = !map.getCenter().equals(L.latLng(55, 10));
+    const moved = !map.getCenter().equals(new L.LatLng(55, 10));
     const positions = [measure()];
     map.setBearing(0);
     positions.push(measure());