leaflet-rotate 0.3.0 → 0.5.0

package/src/map/handler/CompassBearing.js

@@ -1,12 +1,20 @@
 /**
- * Rotates the map according to a smartphone's compass.
+ * Sets map bearing from device orientation when the browser exposes compass data.
  * 
  * @typedef L.Map.CompassBearing
+ * @property {L.Map.CompassBearing} compassBearing Map handler, enabled to follow device heading.
+ * 
+ * @since leaflet-rotate (v0.1.0)
  */
 
 L.Map.CompassBearing = L.Handler.extend({
 
-    initialize: function(map) {
+    /**
+     * @param {L.Map} map Map whose bearing follows device orientation.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    initialize(map) {
         this._map = map;
         /** @see https://caniuse.com/?search=DeviceOrientation */
         if ('ondeviceorientationabsolute' in window) {
@@ -17,7 +25,12 @@ L.Map.CompassBearing = L.Handler.extend({
         this._throttled = L.Util.throttle(this._onDeviceOrientation, 100, this);
     },
 
-    addHooks: function() {
+    /**
+     * Subscribe to the supported device-orientation event, if available.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    addHooks() {
         if (this._map._rotate && this.__deviceOrientationEvent) {
             L.DomEvent.on(window, this.__deviceOrientationEvent, this._throttled, this);
         } else {
@@ -27,13 +40,20 @@ L.Map.CompassBearing = L.Handler.extend({
         }
     },
 
-    removeHooks: function() {
+    /**
+     * Unsubscribe from device orientation when the handler is disabled.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    removeHooks() {
         if (this._map._rotate && this.__deviceOrientationEvent) {
             L.DomEvent.off(window, this.__deviceOrientationEvent, this._throttled, this);
         }
     },
 
     /**
+     * Apply a device orientation reading to the map bearing.
+     *
      * `DeviceOrientationEvent.absolute` - Indicates whether the device is providing absolute
      *                                     orientation values (relatives to Magnetic North) or
      *                                     using some arbitrary frame determined by the device.
@@ -50,10 +70,14 @@ L.Map.CompassBearing = L.Handler.extend({
      * @see https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent/absolute
      * @see https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent/alpha
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation
+     *
+     * @param {DeviceOrientationEvent} e Orientation reading from the browser.
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    _onDeviceOrientation: function(e) {
-         var angle = e.webkitCompassHeading != null ? e.webkitCompassHeading : e.alpha;
-        var deviceOrientation = 0;
+    _onDeviceOrientation(e) {
+        let angle = e.webkitCompassHeading != null ? e.webkitCompassHeading : e.alpha;
+        let deviceOrientation = 0;
 
          if (!Number.isFinite(angle)) { return; }
 
@@ -76,5 +100,7 @@ L.Map.CompassBearing = L.Handler.extend({
  * Add Compass bearing handler to L.Map (disabled unless `window.DeviceOrientationEvent` is set).
  * 
  * @property {L.Map.CompassBearing} compassBearing
+ * 
+ * @since leaflet-rotate (v0.1.0)
  */
 L.Map.addInitHook('addHandler', 'compassBearing', L.Map.CompassBearing);

package/src/map/handler/ContainerMutation.js

@@ -1,7 +1,10 @@
 /**
- * Triggers `invalidateResize` when the map's DOM container mutates.
+ * Calls `invalidateSize()` when the map container's inline style changes.
  * 
  * @typedef L.Map.ContainerMutation
+ * @property {boolean} [trackContainerMutation=false] Observe inline style changes on the map container.
+ * 
+ * @since leaflet-rotate (v0.1.0)
  */
 
 /**
@@ -19,6 +22,8 @@ L.Map.mergeOptions({
      *
      * @type {Boolean}
      * 
+     * @since leaflet-rotate (v0.1.0)
+     * 
      * @see https://developer.mozilla.org/docs/Web/API/MutationObserver
      */
     trackContainerMutation: false
@@ -27,7 +32,12 @@ L.Map.mergeOptions({
 
 L.Map.ContainerMutation = L.Handler.extend({
 
-    addHooks: function() {
+    /**
+     * Start observing the map container's style attribute.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    addHooks() {
         // if (!L.Browser.mutation) { return; }
         if (!this._observer) {
             this._observer = new MutationObserver(L.Util.bind(this._map.invalidateSize, this._map));
@@ -41,7 +51,12 @@ L.Map.ContainerMutation = L.Handler.extend({
         });
     },
 
-    removeHooks: function() {
+    /**
+     * Stop observing container mutations.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    removeHooks() {
         // if (!L.Browser.mutation) { return; }
         this._observer.disconnect();
     },
@@ -52,5 +67,7 @@ L.Map.ContainerMutation = L.Handler.extend({
  * Add Container mutation handler to L.Map (disabled unless `trackContainerMutation` is set).
  * 
  * @property {L.Map.ContainerMutation} trackContainerMutation
+ * 
+ * @since leaflet-rotate (v0.1.0)
  */
 L.Map.addInitHook('addHandler', 'trackContainerMutation', L.Map.ContainerMutation);

package/src/map/handler/ShiftKeyRotate.js

@@ -1,55 +1,195 @@
 
 /**
- * Rotates the map on shift key + mousewheel scrolling (desktop).
+ * Handles Shift+wheel bearing changes and Ctrl+drag bearing/pitch changes.
  * 
  * @typedef L.Map.ShiftKeyRotate
+ * @property {boolean} [shiftKeyRotate=true] Enable Shift+wheel bearing rotation.
+ * 
+ * @since leaflet-rotate (v0.1.0)
  */
 
 L.Map.mergeOptions({
 
     /**
-     * Whether the map can be rotated with shift + wheel scroll
+     * Whether Shift+wheel changes the map bearing.
+     * 
      * @type {Boolean}
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
     shiftKeyRotate: true,
 
+    /**
+     * Whether Ctrl+drag changes bearing and pitch.
+     * 
+     * @type {Boolean}
+     * 
+     * @since leaflet-rotate (0.5.0)
+     */
+    pitchDrag: true,
+
 });
 
 L.Map.ShiftKeyRotate = L.Handler.extend({
 
-    addHooks: function() {
-        L.DomEvent.on(this._map._container, "wheel", this._handleShiftScroll, this);
-        // this._map.shiftKeyRotate.enable();
-        this._map.shiftKeyRotate.rotate = true;
+    /**
+     * @param {L.Map} map Map controlled by this handler.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    initialize(map) {
+        this._map = map;
+        this._onMouseDownBound = this._onMouseDown.bind(this);
+        this._onMouseMoveBound = this._onMouseMove.bind(this);
+        this._onMouseUpBound = this._onMouseUp.bind(this);
+    },
+
+    /**
+     * Attach enabled wheel and pointer/mouse gesture listeners.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    addHooks() {
+        if (this._map.options.shiftKeyRotate) {
+            L.DomEvent.on(this._map._container, "wheel", this._handleShiftScroll, this);
+        }
+        if (this._map.options.pitchDrag) {
+            this.addPitchHooks();
+        }
     },
 
-    removeHooks: function() {
+    /**
+     * Detach gesture listeners and cancel any active drag.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    removeHooks() {
         L.DomEvent.off(this._map._container, "wheel", this._handleShiftScroll, this);
-        this._map.shiftKeyRotate.rotate = false;
+        this.removePitchHooks();
+    },
+
+    /**
+     * Listen for the start of Ctrl+drag pitch gestures.
+     * 
+     * @since leaflet-rotate (0.5.0)
+     */
+    addPitchHooks() {
+        if (this._pitchHooksAdded) { return; }
+        this._pitchEvents = L.version.startsWith('2.')
+            ? ['pointerdown', 'pointermove', 'pointerup pointercancel']
+            : ['mousedown', 'mousemove', 'mouseup'];
+        this._map._container.addEventListener(this._pitchEvents[0], this._onMouseDownBound, true);
+        this._pitchHooksAdded = true;
+    },
+
+    /**
+     * Stop listening for pitch gestures and remove active document listeners.
+     * 
+     * @since leaflet-rotate (0.5.0)
+     */
+    removePitchHooks() {
+        if (!this._pitchHooksAdded) { return; }
+        this._map._container.removeEventListener(this._pitchEvents[0], this._onMouseDownBound, true);
+        this._onMouseUp();
+        delete this._pitchEvents;
+        this._pitchHooksAdded = false;
     },
 
-    _handleShiftScroll: function(e) {
+    /**
+     * Rotate the map in fixed increments while Shift is held during wheel input.
+     * 
+     * @param {WheelEvent} e Wheel event from the map container.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _handleShiftScroll(e) {
         if (e.shiftKey) {
             e.preventDefault();
             this._map.scrollWheelZoom.disable();
-            this._map.setBearing((this._map._bearing * L.DomUtil.RAD_TO_DEG) + Math.sign(e.deltaY) * 5);
+            this._map.setBearing(this._map.getBearing() + Math.sign(e.deltaY) * 5);
         } else {
             this._map.scrollWheelZoom.enable();
         }
     },
 
+    /**
+     * Start Ctrl+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; }
+
+        const scrollWheelZoom = this._map.scrollWheelZoom;
+        if (scrollWheelZoom && scrollWheelZoom._timer) {
+            clearTimeout(scrollWheelZoom._timer);
+            scrollWheelZoom._timer = null;
+            scrollWheelZoom._delta = 0;
+            scrollWheelZoom._startTime = null;
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        this._lastX = e.clientX;
+        this._lastY = e.clientY;
+        document.addEventListener(this._pitchEvents[1], this._onMouseMoveBound);
+        for (const event of this._pitchEvents[2].split(' ')) {
+            document.addEventListener(event, this._onMouseUpBound);
+        }
+    },
+
+    /**
+     * Apply pointer movement to pitch (vertical) and bearing (horizontal).
+     * 
+     * @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;
+        e.preventDefault();
+    },
+
+    /**
+     * End Ctrl+drag and clear document-level listeners.
+     * 
+     * @since leaflet-rotate (0.5.0)
+     */
+    _onMouseUp() {
+        if (!this._pitchEvents) { return; }
+        document.removeEventListener(this._pitchEvents[1], this._onMouseMoveBound);
+        for (const event of this._pitchEvents[2].split(' ')) {
+            document.removeEventListener(event, this._onMouseUpBound);
+        }
+        delete this._lastX;
+        delete this._lastY;
+    },
+
 });
 
 /**
- * Add ShiftKey handler to L.Map (enabled unless `shiftKeyRotate` is unset).
+ * Create the handler when either desktop rotation gesture is enabled.
  * 
- * @property {L.Map.ShiftKeyRotate} shiftKeyRotate
+ * @since leaflet-rotate (v0.1.0)
  */
-L.Map.addInitHook('addHandler', 'shiftKeyRotate', L.Map.ShiftKeyRotate);
-
-// decrease `scrollWheelZoom` handler priority over `shiftKeyRotate` handler
 L.Map.addInitHook(function() {
-    if (this.scrollWheelZoom.enabled() && this.shiftKeyRotate.enabled()) {
+    if (this.options.shiftKeyRotate) {
+        this.shiftKeyRotate = new L.Map.ShiftKeyRotate(this);
+        this.shiftKeyRotate.enable();
+    } else if (this.options.pitchDrag) {
+        this.shiftKeyRotate = new L.Map.ShiftKeyRotate(this);
+        this.shiftKeyRotate.addPitchHooks();
+        this.on('unload', this.shiftKeyRotate.removePitchHooks, this.shiftKeyRotate);
+    }
+    if (this.scrollWheelZoom.enabled() && this.options.shiftKeyRotate) {
         this.scrollWheelZoom.disable();
         this.scrollWheelZoom.enable();
     }

package/src/map/handler/TouchGestures.js

@@ -1,20 +1,45 @@
 /**
- * TouchGestures is both TouchZoom plus TouchRotate
+ * Shared implementation for two-finger pinch zoom and map rotation.
  * 
  * @see https://github.com/fnicollet/Leaflet/commit/a77af51a6b10f308d1b9a16552091d1d0aee8834
  * @see https://github.com/Leaflet/Leaflet/blob/v1.9.3/src/map/handler/Map.TouchZoom.js
  * 
  * @typedef L.Map.TouchGestures
+ * @property {boolean} [bounceAtZoomLimits] Whether pinch zoom may temporarily exceed zoom limits.
+ * @property {boolean} zoom Whether pinch zoom is enabled.
+ * @property {boolean} rotate Whether touch rotation is enabled.
+ * 
+ * @since leaflet-rotate (v0.1.0)
  */
 
+/**
+ * Convert a touch's client coordinates to coordinates relative to the map container.
+ * 
+ * @param {L.Map} map
+ * @param {Touch} touch
+ * 
+ * @returns {L.Point}
+ * 
+ * @since leaflet-rotate (v0.1.0)
+ */
+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({
 
     /**
-     * Set it to false if you don't want the map to
-     * zoom beyond min/max zoom and then bounce back
-     * when pinch-zooming.
+     * Whether pinch zoom may temporarily exceed min/max zoom and bounce back.
      * 
      * @type {Boolean}
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
     bounceAtZoomLimits: true,
 
@@ -22,27 +47,51 @@ L.Map.mergeOptions({
 
 L.Map.TouchGestures = L.Handler.extend({
 
-    initialize: function(map) {
+    /**
+     * Initialize the shared handler from the map's touch zoom/rotation options.
+     * 
+     * @param {L.Map} map Map whose touch gestures are handled.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    initialize(map) {
         this._map = map;
         this.rotate = !!this._map.options.touchRotate;
         this.zoom = !!this._map.options.touchZoom;
     },
 
-    addHooks: function() {
+    /**
+     * Listen for the start of two-finger gestures on the map container.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    addHooks() {
         L.DomEvent.on(this._map._container, 'touchstart', this._onTouchStart, this);
     },
 
-    removeHooks: function() {
+    /**
+     * Remove the touch-start listener.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    removeHooks() {
         L.DomEvent.off(this._map._container, 'touchstart', this._onTouchStart, this);
     },
 
-    _onTouchStart: function(e) {
-        var map = this._map;
+    /**
+     * Record initial touch points and start tracking a two-finger gesture.
+     * 
+     * @param {TouchEvent} e Touch-start event.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _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 +128,26 @@ L.Map.TouchGestures = L.Handler.extend({
         L.DomEvent.preventDefault(e);
     },
 
-    _onTouchMove: function(e) {
+    /**
+     * Update bearing and/or zoom while the two touch points move.
+     * 
+     * @param {TouchEvent} e Touch-move event.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _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,9 +179,12 @@ 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 mapDelta = map._pitch
+                    ? map.containerPointToLayerPoint(this._centerPoint.add(delta))
+                        .subtract(map.containerPointToLayerPoint(this._centerPoint))
+                    : delta.rotate(-map.getBearing() * (Math.PI / 180));
 
-                this._center = map.unproject(map.project(this._pinchStartLatLng).subtract(delta.rotate(alpha)));
+                this._center = map.unproject(map.project(this._pinchStartLatLng).subtract(mapDelta));
             }
 
         }
@@ -135,10 +194,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 +208,12 @@ L.Map.TouchGestures = L.Handler.extend({
         L.DomEvent.preventDefault(e);
     },
 
-    _onTouchEnd: function() {
+    /**
+     * Finish the gesture, settle the zoom and remove document listeners.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _onTouchEnd() {
         if (!this._moved || !(this._zooming || this._rotating)) {
             this._zooming = false;
             return;
@@ -159,8 +221,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);
@@ -178,8 +238,10 @@ L.Map.TouchGestures = L.Handler.extend({
 });
 
 /**
- * Add Touch Gestures handler (enabled unless `touchGestures` is unset).
+ * Add the shared touch gesture handler to the map.
  * 
  * @property {L.Map.TouchGestures} touchGestures
+ * 
+ * @since leaflet-rotate (v0.1.0)
  */
 L.Map.addInitHook('addHandler', 'touchGestures', L.Map.TouchGestures);

package/src/map/handler/TouchRotate.js

@@ -1,7 +1,10 @@
 /**
- * Rotates the map on two-finger (touch devices).
+ * Enables two-finger rotation through the shared touch-gesture handler.
  * 
  * @typedef L.Map.TouchRotate
+ * @property {boolean} [touchRotate=false] Enable two-finger map rotation.
+ * 
+ * @since leaflet-rotate (v0.1.0)
  */
 
 L.Map.mergeOptions({
@@ -10,6 +13,8 @@ L.Map.mergeOptions({
      * Whether the map can be rotated with a two-finger rotation gesture
      * 
      * @type {Boolean}
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
     touchRotate: false,
 
@@ -17,12 +22,22 @@ L.Map.mergeOptions({
 
 L.Map.TouchRotate = L.Handler.extend({
 
-    addHooks: function() {
+    /**
+     * Enable rotation handling in the map's shared touch gesture handler.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    addHooks() {
         this._map.touchGestures.enable();
         this._map.touchGestures.rotate = true;
     },
 
-    removeHooks: function() {
+    /**
+     * Disable rotation handling without affecting pinch zoom.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    removeHooks() {
         this._map.touchGestures.rotate = false;
     },
 
@@ -32,5 +47,7 @@ L.Map.TouchRotate = L.Handler.extend({
  * Add Touch Rotate handler (disabled unless `touchGestures` is set).
  * 
  * @property {L.Map.TouchGestures} touchGestures
+ * 
+ * @since leaflet-rotate (v0.1.0)
  */
 L.Map.addInitHook('addHandler', 'touchRotate', L.Map.TouchRotate);

package/src/map/handler/TouchZoom.js

@@ -1,9 +1,13 @@
 /**
- * Adds pinch zoom rotation on mobile browsers
+ * Adds pinch zoom support through the shared touch-gesture handler.
  * 
  * @see https://github.com/Leaflet/Leaflet/blob/v1.9.3/src/map/handler/Map.TouchZoom.js
  * 
  * @external L.Map.TouchZoom
+ * @property {boolean|string} [touchZoom=L.Browser.touch] Enable pinch zoom; `'center'` zooms around the view center.
+ * @property {boolean} [bounceAtZoomLimits=false] Allow pinch zoom to exceed zoom limits before settling.
+ * 
+ * @since leaflet-rotate (v0.1.0)
  */
 
 L.Map.mergeOptions({
@@ -16,6 +20,8 @@ L.Map.mergeOptions({
      * for touch-capable web browsers.
      * 
      * @type {(Boolean|String)}
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
     touchZoom: L.Browser.touch,
 
@@ -27,6 +33,8 @@ L.Map.mergeOptions({
      * when pinch-zooming.
      * 
      * @type {Boolean}
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
     bounceAtZoomLimits: false,
 
@@ -34,14 +42,24 @@ L.Map.mergeOptions({
 
 L.Map.TouchZoom = L.Handler.extend({
 
-    addHooks: function() {
-        L.DomUtil.addClass(this._map._container, 'leaflet-touch-zoom');
+    /**
+     * Enable pinch zoom handling and mark the shared touch handler as active.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    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');
+    /**
+     * Disable pinch zoom handling while preserving touch rotation state.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    removeHooks() {
+        this._map._container.classList.remove('leaflet-touch-zoom');
         this._map.touchGestures.zoom = false;
     },
 
@@ -51,5 +69,7 @@ L.Map.TouchZoom = L.Handler.extend({
  * Add Touch Zoom handler (disabled unless `L.Browser.touch` is set).
  * 
  * @property {L.Map.TouchGestures} touchGestures
+ * 
+ * @since leaflet-rotate (v0.1.0)
  */
 L.Map.addInitHook('addHandler', 'touchZoom', L.Map.TouchZoom);

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