leaflet-rotate 0.5.0 → 0.5.2

package/src/map/handler/ShiftKeyRotate.js

@@ -1,6 +1,6 @@
 
 /**
- * Handles Shift+wheel bearing changes and Ctrl+drag bearing/pitch changes.
+ * Handles Shift+wheel bearing changes and Ctrl+drag / right-drag bearing/pitch changes.
  * 
  * @typedef L.Map.ShiftKeyRotate
  * @property {boolean} [shiftKeyRotate=true] Enable Shift+wheel bearing rotation.
@@ -20,7 +20,7 @@ L.Map.mergeOptions({
     shiftKeyRotate: true,
 
     /**
-     * Whether Ctrl+drag changes bearing and pitch.
+     * Whether Ctrl+drag (or right-button drag) changes bearing and pitch.
      * 
      * @type {Boolean}
      * 
@@ -42,6 +42,8 @@ L.Map.ShiftKeyRotate = L.Handler.extend({
         this._onMouseDownBound = this._onMouseDown.bind(this);
         this._onMouseMoveBound = this._onMouseMove.bind(this);
         this._onMouseUpBound = this._onMouseUp.bind(this);
+        this._onContextMenuBound = this._onContextMenu.bind(this);
+        this._applyBound = this._apply.bind(this);
     },
 
     /**
@@ -79,6 +81,7 @@ L.Map.ShiftKeyRotate = L.Handler.extend({
             ? ['pointerdown', 'pointermove', 'pointerup pointercancel']
             : ['mousedown', 'mousemove', 'mouseup'];
         this._map._container.addEventListener(this._pitchEvents[0], this._onMouseDownBound, true);
+        this._map._container.addEventListener('contextmenu', this._onContextMenuBound, true);
         this._pitchHooksAdded = true;
     },
 
@@ -90,6 +93,7 @@ L.Map.ShiftKeyRotate = L.Handler.extend({
     removePitchHooks() {
         if (!this._pitchHooksAdded) { return; }
         this._map._container.removeEventListener(this._pitchEvents[0], this._onMouseDownBound, true);
+        this._map._container.removeEventListener('contextmenu', this._onContextMenuBound, true);
         this._onMouseUp();
         delete this._pitchEvents;
         this._pitchHooksAdded = false;
@@ -113,14 +117,16 @@ L.Map.ShiftKeyRotate = L.Handler.extend({
     },
 
     /**
-     * Start Ctrl+drag and capture subsequent movement outside the map.
+     * Start Ctrl+drag (or right-button drag) and capture subsequent movement outside the map.
      * 
      * @param {MouseEvent|PointerEvent} e Gesture start event.
      * 
      * @since leaflet-rotate (0.5.0)
      */
     _onMouseDown(e) {
-        if (!this._map._rotate || !this._map.options.pitchDrag || !e.ctrlKey || e.button !== 0) { return; }
+        if (this._dragging) { return; }
+        this._moved = false;
+        if (!this._map._rotate || !this._map.options.pitchDrag || !(e.button === 2 || (e.ctrlKey && e.button === 0))) { return; }
 
         const scrollWheelZoom = this._map.scrollWheelZoom;
         if (scrollWheelZoom && scrollWheelZoom._timer) {
@@ -133,8 +139,11 @@ L.Map.ShiftKeyRotate = L.Handler.extend({
         e.preventDefault();
         e.stopPropagation();
         e.stopImmediatePropagation();
+        this._map._stopPitchBearingAnimation();
+        this._dragging = true;
         this._lastX = e.clientX;
         this._lastY = e.clientY;
+        this._pitchDelta = this._bearingDelta = 0;
         document.addEventListener(this._pitchEvents[1], this._onMouseMoveBound);
         for (const event of this._pitchEvents[2].split(' ')) {
             document.addEventListener(event, this._onMouseUpBound);
@@ -142,33 +151,75 @@ L.Map.ShiftKeyRotate = L.Handler.extend({
     },
 
     /**
-     * Apply pointer movement to pitch (vertical) and bearing (horizontal).
+     * Accumulate pointer movement as pitch (vertical) and bearing (horizontal).
+     * Far from the horizontal center line the bearing follows the pointer angle
+     * around the map center.
      * 
      * @param {MouseEvent|PointerEvent} e Gesture movement event.
      * 
      * @since leaflet-rotate (0.5.0)
      */
     _onMouseMove(e) {
-        this._map._setPitchAndBearing(
-            this._map.getPitch() + (this._lastY - e.clientY) * 0.5,
-            this._map.getBearing() + (e.clientX - this._lastX) * 0.8
-        );
-        this._lastX = e.clientX;
-        this._lastY = e.clientY;
+        const rect = this._map._container.getBoundingClientRect(),
+            cx = rect.left + rect.width / 2,
+            cy = rect.top + rect.height / 2,
+            x = e.clientX,
+            y = e.clientY;
+
+        this._pitchDelta += (this._lastY - y) * 0.5;
+        this._bearingDelta += Math.abs(cy - this._lastY) > 100
+            ? (Math.atan2(y - cy, x - cx) - Math.atan2(y - cy, this._lastX - cx)) * (180 / Math.PI)
+            : (x - this._lastX) * 0.8 * (y < cy ? 1 : -1);
+        this._lastX = x;
+        this._lastY = y;
+        this._moved = true;
+        if (!this._frame) {
+            this._frame = requestAnimationFrame(this._applyBound);
+        }
         e.preventDefault();
     },
 
     /**
-     * End Ctrl+drag and clear document-level listeners.
+     * Apply accumulated movement once per animation frame.
+     * 
+     * @since leaflet-rotate (0.5.1)
+     */
+    _apply() {
+        this._frame = null;
+        if (!this._pitchDelta && !this._bearingDelta) { return; }
+        this._map._setPitchAndBearing(this._map.getPitch() + this._pitchDelta, this._map.getBearing() + this._bearingDelta);
+        this._pitchDelta = this._bearingDelta = 0;
+    },
+
+    /**
+     * Suppress the context menu that follows a right-button drag.
+     * 
+     * @param {MouseEvent} e Context menu event.
+     * 
+     * @since leaflet-rotate (0.5.1)
+     */
+    _onContextMenu(e) {
+        if (this._dragging || this._moved) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    },
+
+    /**
+     * End Ctrl+drag, flush pending movement and clear document-level listeners.
      * 
      * @since leaflet-rotate (0.5.0)
      */
     _onMouseUp() {
-        if (!this._pitchEvents) { return; }
+        if (!this._pitchEvents || !this._dragging) { return; }
         document.removeEventListener(this._pitchEvents[1], this._onMouseMoveBound);
         for (const event of this._pitchEvents[2].split(' ')) {
             document.removeEventListener(event, this._onMouseUpBound);
         }
+        cancelAnimationFrame(this._frame);
+        if (this._map._mapPane) { this._apply(); }
+        this._frame = null;
+        this._dragging = false;
         delete this._lastX;
         delete this._lastY;
     },

package/src/map/handler/TouchGestures.js

@@ -58,6 +58,7 @@ L.Map.TouchGestures = L.Handler.extend({
         this._map = map;
         this.rotate = !!this._map.options.touchRotate;
         this.zoom = !!this._map.options.touchZoom;
+        this.pitch = !!this._map.options.touchPitch;
     },
 
     /**
@@ -88,12 +89,20 @@ L.Map.TouchGestures = L.Handler.extend({
     _onTouchStart(e) {
         const map = this._map;
 
-        if (!e.touches || e.touches.length !== 2 || map._animatingZoom || this._zooming || this._rotating) { return; }
+        if (!e.touches || e.touches.length !== 2 || map._animatingZoom || this._zooming || this._rotating || this._gesture) { return; }
 
         const p1 = touchToContainerPoint(map, e.touches[0]),
             p2 = touchToContainerPoint(map, e.touches[1]),
             vector = p1.subtract(p2);
 
+        // Two horizontally aligned fingers moving vertically together change the pitch
+        const canPitch = this.pitch && map._rotate && Math.abs(vector.x) > Math.abs(vector.y);
+        if (!canPitch && !this.zoom && !this.rotate) { return; }
+        this._gesture = canPitch ? 'pending' : 'pinch';
+        this._startP1 = p1;
+        this._startP2 = p2;
+        map._stopPitchBearingAnimation();
+
         this._centerPoint = map.getSize()._divideBy(2);
         this._startLatLng = map.containerPointToLatLng(this._centerPoint);
 
@@ -136,7 +145,7 @@ L.Map.TouchGestures = L.Handler.extend({
      * @since leaflet-rotate (v0.1.0)
      */
     _onTouchMove(e) {
-        if (!e.touches || e.touches.length !== 2 || !(this._zooming || this._rotating)) { return; }
+        if (!e.touches || e.touches.length !== 2 || !this._gesture) { return; }
 
         const map = this._map,
             p1 = touchToContainerPoint(map, e.touches[0]),
@@ -145,6 +154,33 @@ L.Map.TouchGestures = L.Handler.extend({
             scale = p1.distanceTo(p2) / this._startDist;
         let delta;
 
+        if (this._gesture === 'pending') {
+            const d1 = p1.subtract(this._startP1),
+                d2 = p2.subtract(this._startP2);
+            if (Math.max(d1.x * d1.x + d1.y * d1.y, d2.x * d2.x + d2.y * d2.y) < 25) {
+                L.DomEvent.preventDefault(e);
+                return;
+            }
+            const vertical = d => Math.abs(d.y) > Math.abs(d.x);
+            if (vertical(d1) && vertical(d2) && Math.sign(d1.y) === Math.sign(d2.y)) {
+                this._gesture = 'pitch';
+                this._lastPitchY = (this._startP1.y + this._startP2.y) / 2;
+                this._zooming = this._rotating = false;
+            } else {
+                this._gesture = 'pinch';
+            }
+        }
+
+        if (this._gesture === 'pitch') {
+            const y = (p1.y + p2.y) / 2;
+            map._setPitchAndBearing(map.getPitch() - (y - this._lastPitchY) * 0.5, map.getBearing());
+            this._lastPitchY = y;
+            L.DomEvent.preventDefault(e);
+            return;
+        }
+
+        if (!(this._zooming || this._rotating)) { return; }
+
         if (this._rotating) {
             const theta = Math.atan(vector.x / vector.y);
             let bearingDelta = (theta - this._startTheta) * (180 / Math.PI);
@@ -214,8 +250,14 @@ L.Map.TouchGestures = L.Handler.extend({
      * @since leaflet-rotate (v0.1.0)
      */
     _onTouchEnd() {
-        if (!this._moved || !(this._zooming || this._rotating)) {
+        const gesture = this._gesture;
+        delete this._gesture;
+        if (gesture === 'pitch' || gesture === 'pending' || !this._moved || !(this._zooming || this._rotating)) {
             this._zooming = false;
+            this._rotating = false;
+            L.DomEvent
+                .off(document, 'touchmove', this._onTouchMove, this)
+                .off(document, 'touchend touchcancel', this._onTouchEnd, this);
             return;
         }
 

package/src/map/handler/TouchPitch.js

@@ -0,0 +1,53 @@
+/**
+ * Enables MapLibre-like two-finger pitch (both fingers dragged vertically) through the shared touch-gesture handler.
+ * 
+ * @typedef L.Map.TouchPitch
+ * @property {boolean} [touchPitch=false] Enable two-finger map pitch (vertical drag).
+ * 
+ * @since leaflet-rotate (0.5.1)
+ */
+
+L.Map.mergeOptions({
+
+    /**
+     * Whether the map can be pitched by dragging two fingers vertically
+     * 
+     * @type {Boolean}
+     * 
+     * @since leaflet-rotate (0.5.1)
+     */
+    touchPitch: false,
+
+});
+
+L.Map.TouchPitch = L.Handler.extend({
+
+    /**
+     * Enable pitch handling in the map's shared touch gesture handler.
+     * 
+     * @since leaflet-rotate (0.5.1)
+     */
+    addHooks() {
+        this._map.touchGestures.enable();
+        this._map.touchGestures.pitch = true;
+    },
+
+    /**
+     * Disable pitch handling without affecting pinch zoom and rotation.
+     * 
+     * @since leaflet-rotate (0.5.1)
+     */
+    removeHooks() {
+        this._map.touchGestures.pitch = false;
+    },
+
+});
+
+/**
+ * Add Touch Pitch handler (disabled unless `touchGestures` is set).
+ * 
+ * @property {L.Map.TouchGestures} touchGestures
+ * 
+ * @since leaflet-rotate (0.5.1)
+ */
+L.Map.addInitHook('addHandler', 'touchPitch', L.Map.TouchPitch);

package/test/features/example.feature

@@ -13,13 +13,17 @@ Feature: Rotating a Leaflet map
     Then the default rotate control visibility follows the bearing
 
   @issue-13
-  Scenario: Dragging the rotate control changes the map bearing
+  Scenario: Dragging the rotate control changes the map bearing and pitch
     When I drag the rotate control
-    Then the map bearing follows the control drag
+    Then the map bearing and pitch follow the control drag
+
+  Scenario: Clicking the rotate control resets bearing and pitch
+    When I click the rotate control on a rotated and pitched map
+    Then the map animates back to north and zero pitch
 
   @issue-44
-  Scenario: The compass control requests device-orientation permission
-    When I activate compass mode on a permission-based device
+  Scenario: Enabling compass bearing requests device-orientation permission
+    When I enable compass bearing on a permission-based device
     Then device-orientation permission is requested
 
   @issue-7

package/test/features/gestures.feature

@@ -7,6 +7,10 @@ Feature: Rotating a Leaflet map
     When I move a two-finger pinch gesture
     Then the zoom transition ends before the gesture ends
 
+  Scenario: Two fingers dragged vertically change the pitch, pinching does not
+    When I drag two fingers vertically and then pinch with touch pitch enabled
+    Then only the vertical two-finger drag changes the pitch
+
   @issue-43
   Scenario: Vector paths follow a rotated two-finger gesture
     When I rotate and zoom two fingers over a vector path

package/test/features/rotation.feature

@@ -36,6 +36,11 @@ Feature: Rotating a Leaflet map
     When I drag the pitched map
     Then vector layers stay aligned with their map coordinates
 
+  @issue-74
+  Scenario: Pitched panning does not jump or reset the view on release
+    When I pan a highly pitched map in several directions
+    Then releasing the map does not jump or reset its layers
+
   @issue-72
   Scenario: Vector layers stay aligned after off-center zoom and rotation
     When I zoom off-center then rotate the map
@@ -64,3 +69,33 @@ Feature: Rotating a Leaflet map
   @issue-34
   Scenario: Draggable marker listeners are not duplicated
     Then the draggable marker has one drag listener and one drag-end listener
+
+  @issue-73
+  Scenario: Vector layers do not jump when zooming from a low level
+    When I animate a zoom from a low level on a rotated map
+    Then vector layers do not jump at the end of the zoom animation
+
+  @issue-73
+  Scenario: Wheel zoom keeps the cursor point on a pitched map
+    When I zoom around an off-center point on a pitched map
+    Then the point under the cursor stays in place
+
+  @issue-73
+  Scenario: Right-drag rotates around the map center
+    When I right-drag horizontally below the map center
+    Then the map rotates counterclockwise without opening the context menu
+
+  @issue-73
+  Scenario: Right-button press suppresses the context menu before movement
+    When a context menu event fires immediately on right-button press
+    Then the early context menu is suppressed
+
+  @issue-73
+  Scenario: High pitch keeps tile loading bounded
+    When I look at a high zoom map with a high pitch
+    Then tile loading stays bounded and covers the visible map
+
+  @issue-73
+  Scenario: Tiles stay aligned after panning and changing pitch
+    When I pan, zoom and change the pitch of a rotated map
+    Then the map is centered and the tiles stay aligned with the map coordinates