leaflet-rotate 0.2.1 → 0.2.3

package/src/map/handler/CompassBearing.js

@@ -8,30 +8,71 @@ L.Map.CompassBearing = L.Handler.extend({
 
     initialize: function(map) {
         this._map = map;
-        this._throttled = L.Util.throttle(this._onDeviceOrientation, 1000, this);
+        /** @see https://caniuse.com/?search=DeviceOrientation */
+        if ('ondeviceorientationabsolute' in window) {
+            this.__deviceOrientationEvent = 'deviceorientationabsolute';
+        } else if('ondeviceorientation' in window) {
+            this.__deviceOrientationEvent = 'deviceorientation';
+        }
+        this._throttled = L.Util.throttle(this._onDeviceOrientation, 100, this);
     },
 
     addHooks: function() {
-        if (this._map._rotate && window.DeviceOrientationEvent) {
-            L.DomEvent.on(window, 'deviceorientation', this._throttled, this);
+        if (this._map._rotate && this.__deviceOrientationEvent) {
+            L.DomEvent.on(window, this.__deviceOrientationEvent, this._throttled, this);
+        } else {
+            // L.Map.CompassBearing handler will be automatically
+            // disabled if device orientation is not supported.
+            this.disable();
         }
     },
 
     removeHooks: function() {
-        if (this._map._rotate && window.DeviceOrientationEvent) {
-            L.DomEvent.off(window, 'deviceorientation', this._throttled, this);
+        if (this._map._rotate && this.__deviceOrientationEvent) {
+            L.DomEvent.off(window, this.__deviceOrientationEvent, this._throttled, this);
         }
     },
 
-    _onDeviceOrientation: function(event) {
-        if (event.alpha !== null && window.orientation !== undefined) {
-            this._map.setBearing(event.alpha - window.orientation);
+    /**
+     * `DeviceOrientationEvent.absolute` - Indicates whether the device is providing absolute
+     *                                     orientation values (relatives to Magnetic North) or
+     *                                     using some arbitrary frame determined by the device.
+     * 
+     * `DeviceOrientationEvent.alpha`    - Returns the rotation of the device around the Z axis;
+     *                                     that is, the number of degrees by which the device is
+     *                                     being twisted around the center of the screen.
+     * 
+     * `window.orientation`              - Returns the screen orientation in degrees (in 90-degree increments)
+     *                                     of the viewport relative to the device's natural orientation.
+     *                                     Its only possible values are -90, 0, 90, and 180. Positive
+     *                                     values are counterclockwise; negative values are clockwise.
+     * 
+     * @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
+     */
+    _onDeviceOrientation: function(e) {
+        var angle = e.webkitCompassHeading || e.alpha;
+        var deviceOrientation = 0;
+
+        // Safari iOS
+        if (!e.absolute && e.webkitCompassHeading) {
+            angle = 360 - angle;
+        }
+
+        // Older browsers
+        if (!e.absolute && 'undefined' !== typeof window.orientation) {
+            deviceOrientation = window.orientation;
         }
+
+        this._map.setBearing(angle - deviceOrientation);
     },
 
 });
 
-// @section Handlers
-// @property compassBearing: Handler
-// Compass bearing handler.
+/**
+ * Add Compass bearing handler to L.Map (disabled unless `window.DeviceOrientationEvent` is set).
+ * 
+ * @property {L.Map.CompassBearing} compassBearing
+ */
 L.Map.addInitHook('addHandler', 'compassBearing', L.Map.CompassBearing);

package/src/map/handler/ContainerMutation.js

@@ -4,14 +4,23 @@
  * @typedef L.Map.ContainerMutation
  */
 
-// @namespace Map
-// @section Interaction Options
+/**
+ * @TODO check again this file after leaflet v1.9.3 (eg. L.Browser.mutation).
+ * Mutation Observer support will likely be added by default in next releases.
+ */
+
 L.Map.mergeOptions({
 
-    // @option trackContainerMutation: Boolean = false
-    // Whether the map uses [mutation observers](https://developer.mozilla.org/docs/Web/API/MutationObserver)
-    // to detect changes in its container and trigger `invalidateSize`. Disabled
-    // by default due to support not being available in all web browsers.
+    /**
+     * Whether the map uses mutation observers to
+     * detect changes in its container and trigger
+     * `invalidateSize`. Disabled by default due to
+     * support not being available in all web browsers.
+     *
+     * @type {Boolean}
+     * 
+     * @see https://developer.mozilla.org/docs/Web/API/MutationObserver
+     */
     trackContainerMutation: false
 
 });
@@ -19,15 +28,10 @@ L.Map.mergeOptions({
 L.Map.ContainerMutation = L.Handler.extend({
 
     addHooks: function() {
-        /** @TODO check again this property. Will likely be added in future releases (leaflet > v1.9.3) */
-        // if (!L.Browser.mutation) {
-        //     return;
-        // }
-
+        // if (!L.Browser.mutation) { return; }
         if (!this._observer) {
-            this._observer = new MutationObserver(L.Util.bind(this._onMutation, this));
+            this._observer = new MutationObserver(L.Util.bind(this._map.invalidateSize, this._map));
         }
-
         this._observer.observe(this._map.getContainer(), {
             childList: false,
             attributes: true,
@@ -38,20 +42,15 @@ L.Map.ContainerMutation = L.Handler.extend({
     },
 
     removeHooks: function() {
-        /** @TODO check again this property. Will likely be added in future releases (leaflet > v1.9.3) */
-        // if (!L.Browser.mutation) {
-        //     return;
-        // }
+        // if (!L.Browser.mutation) { return; }
         this._observer.disconnect();
     },
 
-    _onMutation: function() {
-        this._map.invalidateSize();
-    },
-
 });
 
-// @section Handlers
-// @property containerMutation: Handler
-// Container mutation handler (disabled unless [`trackContainerMutation`](#map-trackcontainermutation) is set).
+/**
+ * Add Container mutation handler to L.Map (disabled unless `trackContainerMutation` is set).
+ * 
+ * @property {L.Map.ContainerMutation} trackContainerMutation
+ */
 L.Map.addInitHook('addHandler', 'trackContainerMutation', L.Map.ContainerMutation);

package/src/map/handler/ShiftKeyRotate.js

@@ -1,17 +1,16 @@
 
 /**
- * Rotates the map on shift key + mouseheel scrolling (desktop).
+ * Rotates the map on shift key + mousewheel scrolling (desktop).
  * 
  * @typedef L.Map.ShiftKeyRotate
  */
 
-// @namespace Map
-// @section Interaction Options
 L.Map.mergeOptions({
 
-    // @section ShiftKey interaction options
-    // @option shiftKeyRotate: Boolean|String = *
-    // Whether the map can be rotated with a shit-wheel rotation
+    /**
+     * Whether the map can be rotated with shift + wheel scroll
+     * @type {Boolean}
+     */
     shiftKeyRotate: true,
 
 });
@@ -41,12 +40,14 @@ L.Map.ShiftKeyRotate = L.Handler.extend({
 
 });
 
-// @section Handlers
-// @property touchZoom: Handler
-// Touch rotate handler.
+/**
+ * Add ShiftKey handler to L.Map (enabled unless `shiftKeyRotate` is unset).
+ * 
+ * @property {L.Map.ShiftKeyRotate} shiftKeyRotate
+ */
 L.Map.addInitHook('addHandler', 'shiftKeyRotate', L.Map.ShiftKeyRotate);
 
-// decrease "scrollWheelZoom" handler priority over "shiftKeyRotate" handler
+// decrease `scrollWheelZoom` handler priority over `shiftKeyRotate` handler
 L.Map.addInitHook(function() {
     if (this.scrollWheelZoom.enabled() && this.shiftKeyRotate.enabled()) {
         this.scrollWheelZoom.disable();

package/src/map/handler/TouchGestures.js

@@ -7,13 +7,15 @@
  * @typedef L.Map.TouchGestures
  */
 
-// @namespace Map
-// @section Interaction Options
 L.Map.mergeOptions({
 
-    // @option bounceAtZoomLimits: Boolean = true
-    // Set it to false if you don't want the map to zoom beyond min/max zoom
-    // and then bounce back when pinch-zooming.
+    /**
+     * Set it to false if you don't want the map to
+     * zoom beyond min/max zoom and then bounce back
+     * when pinch-zooming.
+     * 
+     * @type {Boolean}
+     */
     bounceAtZoomLimits: true,
 
 });
@@ -92,8 +94,14 @@ L.Map.TouchGestures = L.Handler.extend({
             var bearingDelta = (theta - this._startTheta) * L.DomUtil.RAD_TO_DEG;
             if (vector.y < 0) { bearingDelta += 180; }
             if (bearingDelta) {
-                /// TODO: The pivot should be the last touch point, but zoomAnimation manages to
-                ///   overwrite the rotate pane position. Maybe related to #3529.
+                /**
+                 * @TODO the pivot should be the last touch point,
+                 * but zoomAnimation manages to overwrite the rotate
+                 * pane position. Maybe related to #3529.
+                 * 
+                 * @see https://github.com/Leaflet/Leaflet/pull/3529
+                 * @see https://github.com/fnicollet/Leaflet/commit/a77af51a6b10f308d1b9a16552091d1d0aee8834
+                 */
                 map.setBearing(this._startBearing - bearingDelta);
             }
         }
@@ -161,7 +169,9 @@ L.Map.TouchGestures = L.Handler.extend({
 
 });
 
-// @section Handlers
-// @property touchGestures: Handler
-// Touch gestures handler.
+/**
+ * Add Touch Gestures handler (enabled unless `touchGestures` is unset).
+ * 
+ * @property {L.Map.TouchGestures} touchGestures
+ */
 L.Map.addInitHook('addHandler', 'touchGestures', L.Map.TouchGestures);

package/src/map/handler/TouchRotate.js

@@ -4,13 +4,13 @@
  * @typedef L.Map.TouchRotate
  */
 
-// @namespace Map
-// @section Interaction Options
 L.Map.mergeOptions({
 
-    // @section Touch interaction options
-    // @option touchRotate: Boolean|String = *
-    // Whether the map can be rotated with a two-finger rotation gesture
+    /**
+     * Whether the map can be rotated with a two-finger rotation gesture
+     * 
+     * @type {Boolean}
+     */
     touchRotate: false,
 
 });
@@ -28,7 +28,9 @@ L.Map.TouchRotate = L.Handler.extend({
 
 });
 
-// @section Handlers
-// @property touchZoom: Handler
-// Touch rotate handler.
+/**
+ * Add Touch Rotate handler (disabled unless `touchGestures` is set).
+ * 
+ * @property {L.Map.TouchGestures} touchGestures
+ */
 L.Map.addInitHook('addHandler', 'touchRotate', L.Map.TouchRotate);

package/src/map/handler/TouchZoom.js

@@ -6,25 +6,28 @@
  * @external L.Map.TouchZoom
  */
 
-// @namespace Map
-// @section Interaction Options
 L.Map.mergeOptions({
 
-    // @section Touch interaction options
-    // @option touchZoom: Boolean|String = *
-    // Whether the map can be zoomed by touch-dragging with two fingers. If
-    // passed `'center'`, it will zoom to the center of the view regardless of
-    // where the touch events (fingers) were. Enabled for touch-capable web
-    // browsers.
+    /**
+     * Whether the map can be zoomed by touch-dragging
+     * with two fingers. If passed `'center'`, it will
+     * zoom to the center of the view regardless of
+     * where the touch events (fingers) were. Enabled
+     * for touch-capable web browsers.
+     * 
+     * @type {(Boolean|String)}
+     */
     touchZoom: L.Browser.touch,
 
     /**
      * @TODO check if this is a duplicate of `L.Map.TouchGestures::bounceAtZoomLimits`
+     * 
+     * Set it to false if you don't want the map to
+     * zoom beyond min/max zoom and then bounce back
+     * when pinch-zooming.
+     * 
+     * @type {Boolean}
      */
-
-    // @option bounceAtZoomLimits: Boolean = true
-    // Set it to false if you don't want the map to zoom beyond min/max zoom
-    // and then bounce back when pinch-zooming.
     bounceAtZoomLimits: false,
 
 });
@@ -44,7 +47,9 @@ L.Map.TouchZoom = L.Handler.extend({
 
 });
 
-// @section Handlers
-// @property touchZoom: Handler
-// Touch zoom handler.
+/**
+ * Add Touch Zoom handler (disabled unless `L.Browser.touch` is set).
+ * 
+ * @property {L.Map.TouchGestures} touchGestures
+ */
 L.Map.addInitHook('addHandler', 'touchZoom', L.Map.TouchZoom);

package/test/index.html

@@ -79,6 +79,7 @@
 				layers: [esri],
 				// worldCopyJump: true,
 				// preferCanvas: false,
+				zoomAnimation: false, /* DEBUG: L.Renderer._updateTransform() */
 				rotate: true,
 				rotateControl: {
 					closeOnZeroBearing: false,
@@ -87,7 +88,7 @@
 				bearing: 30,
 				// attributionControl: false,
 				// zoomControl: false,
-				// compassBearing: false,
+				compassBearing: true,
 				// trackContainerMutation: false,
 				// shiftKeyRotate: false,
 				// touchGestures: true,

package/src/layer/vector/Canvas.js

@@ -1,28 +0,0 @@
-/**
- * @external L.Canvas
- * 
- * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/vector/Canvas.js
- */
-
-const canvasProto = L.extend({}, L.Canvas.prototype);
-
-L.Canvas.include({
-
-    // onAdd: function() {
-    //     canvasProto.onAdd.apply(this, arguments);
-    //     // When rotating the canvas itself, it is cleared by some weird reason, so redraw.
-    //     this._map.on('rotate', this._redraw, this);
-    // },
-
-    // onRemove: function() {
-    //     canvasProto.onRemove.apply(this, arguments);
-    //     this._map.off('rotate', this._redraw, this);
-    // },
-
-    // _update: function() {
-    //     canvasProto._update.apply(this, arguments);
-    //     // Tell paths to redraw themselves
-    //     this.fire('update')
-    // },
-
-});

package/src/layer/vector/SVG.js

@@ -1,18 +0,0 @@
-/**
- * @external L.SVG
- * 
- * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/vector/SVG.js
- */
-
-const svgProto = L.extend({}, L.SVG.prototype);
-
-L.SVG.include({
-
-    // _update: function() {
-    //     svgProto._update.apply(this, arguments);
-    //     if (this._map._rotate) {
-    //         this.fire('update');
-    //     }
-    // },
-
-});