leaflet-rotate 0.2.2 → 0.2.4

package/src/control/Rotate.js

@@ -16,8 +16,6 @@ L.Control.Rotate = L.Control.extend({
     },
 
     onAdd: function(map) {
-        this._onDeviceOrientation = L.Util.throttle(this._unthrottledOnDeviceOrientation, 100, this);
-
         var container = this._container = L.DomUtil.create('div', 'leaflet-control-rotate leaflet-bar');
 
         // this.button = L.Control.Zoom.prototype._createButton.call(this, 'R', 'leaflet-control-rotate', 'leaflet-control-rotate', container, this._toggleLock);
@@ -37,7 +35,6 @@ L.Control.Rotate = L.Control.extend({
         link.appendChild(arrow);
         link.href = '#';
         link.title = 'Rotate map';
-        // link.draggable = false;
 
         L.DomEvent
             .on(link, 'dblclick', L.DomEvent.stopPropagation)
@@ -52,7 +49,7 @@ L.Control.Rotate = L.Control.extend({
 
         this._restyle();
 
-        map.on('rotate', this._restyle.bind(this));
+        map.on('rotate', this._restyle, this);
 
         // State flag
         this._follow = false;
@@ -64,9 +61,13 @@ L.Control.Rotate = L.Control.extend({
 
         return container;
     },
+    
+    onRemove: function(map) {
+        map.off('rotate', this._restyle, this);
+    },
 
     _handleMouseDown: function(e) {
-        L.DomEvent.stop(e); // L.DomEvent.stopPropagation(e);
+        L.DomEvent.stop(e);
         this.dragging = true;
         this.dragstartX = e.pageX;
         this.dragstartY = e.pageY;
@@ -76,7 +77,7 @@ L.Control.Rotate = L.Control.extend({
     },
 
     _handleMouseUp: function(e) {
-        L.DomEvent.stop(e); // L.DomEvent.stopPropagation(e);
+        L.DomEvent.stop(e);
         this.dragging = false;
 
         L.DomEvent
@@ -91,64 +92,64 @@ L.Control.Rotate = L.Control.extend({
     },
 
     _cycleState: function(ev) {
-        var map = this._map;
+        if (!this._map) {
+            return;
+        }
 
-        if (!map) { return; }
+        var map = this._map;
 
+        // Touch mode
         if (!map.touchRotate.enabled() && !map.compassBearing.enabled()) {
-            // Go from disabled to touch
             map.touchRotate.enable();
+        }
+        
+        // Compass mode
+        else if (!map.compassBearing.enabled()) {
+            map.touchRotate.disable();
+            map.compassBearing.enable();
+        }
 
-            // console.log('state is now: touch rotate');
-        } else {
-
-            if (!map.compassBearing.enabled()) {
-                // Go from touch to compass
-                map.touchRotate.disable();
-                map.compassBearing.enable();
-
-                // console.log('state is now: compass');
-
-                // It is possible that compass is not supported. If so,
-                // the hangler will automatically go from compass to disabled.
-            } else {
-                // Go from compass to disabled
-                map.compassBearing.disable();
-
-                // console.log('state is now: locked');
-
-                map.setBearing(0);
-                if (this.options.closeOnZeroBearing) {
-                    map.touchRotate.enable();
-                }
+        // Locked mode
+        else {
+            map.compassBearing.disable();
+            map.setBearing(0);
+            if (this.options.closeOnZeroBearing) {
+                map.touchRotate.enable();
             }
         }
         this._restyle();
     },
 
     _restyle: function() {
-        if (this._map.options.rotate) {
+        if (!this._map.options.rotate) {
+            L.DomUtil.addClass(this._link, 'leaflet-disabled');
+        } else {
             var map = this._map;
             var bearing = map.getBearing();
-            if (this.options.closeOnZeroBearing && bearing) {
+
+            this._arrow.style.transform = 'rotate(' + bearing + 'deg)';
+
+            if (bearing && this.options.closeOnZeroBearing) {
                 this._container.style.display = 'block';
             }
 
-            var cssTransform = 'rotate(' + bearing + 'deg)';
-            this._arrow.style.transform = cssTransform;
-
+            // Compass mode
             if (map.compassBearing.enabled()) {
                 this._link.style.backgroundColor = 'orange';
-            } else if (map.touchRotate.enabled()) {
+            }
+            
+            // Touch mode
+            else if (map.touchRotate.enabled()) {
                 this._link.style.backgroundColor = null;
-            } else {
+            }
+
+            // Locked mode
+            else {
                 this._link.style.backgroundColor = 'grey';
-                if (this.options.closeOnZeroBearing && map.getBearing() === 0) {
+                if (0 === bearing && this.options.closeOnZeroBearing) {
                     this._container.style.display = 'none';
                 }
             }
-        } else {
-            L.DomUtil.addClass(this._link, 'leaflet-disabled');
         }
     },
 

package/src/layer/vector/Renderer.js

@@ -19,6 +19,33 @@ L.Renderer.include({
     },
 
     /**
+     * Fix for `map.flyTo()` when `false === map.options.zoomAnimation`
+     * 
+     * @see https://github.com/Leaflet/Leaflet/pull/8794
+     */
+    onAdd: function() {
+        rendererProto.onAdd.apply(this, arguments);
+        if (L.version <= "1.9.3") {
+            // always keep transform-origin as 0 0
+            this._container.classList.add('leaflet-zoom-animated');
+        }
+    },
+
+    /**
+     * @FIXME layer drifts on `map.setZoom()` (eg. zoom during animation)
+     * 
+     * the main cause seems to be related to `this._updateTransform(path._center, path._zoom))`
+     * and `this._topLeft = this._map.layerPointToLatLng(this._bounds.min);`
+     * 
+     * @example
+     *   map.setZoom(2);
+     *   path._renderer._update();
+     *   path._renderer._updateTransform(path._renderer._center, path._renderer._zoom);
+     * 
+     * @see https://github.com/Leaflet/Leaflet/pull/8794
+     * @see https://github.com/Leaflet/Leaflet/pull/8103
+     * @see https://github.com/Leaflet/Leaflet/issues/7466
+     * 
      * @TODO rechek this changes from leaflet@v1.9.3
      * 
      * @see https://github.com/Leaflet/Leaflet/compare/v1.7.0...v1.9.3
@@ -27,15 +54,58 @@ L.Renderer.include({
         if (!this._map._rotate) {
             return rendererProto._updateTransform.apply(this, arguments);
         }
+        /**
+         * @FIXME see path._renderer._reset();
+         */
         var scale = this._map.getZoomScale(zoom, this._zoom),
             offset = this._map._latLngToNewLayerPoint(this._topLeft, zoom, center);
-        if (L.Browser.any3d) {
-            L.DomUtil.setTransform(this._container, offset, scale);
-        } else {
-            L.DomUtil.setPosition(this._container, offset);
-        }
+
+        L.DomUtil.setTransform(this._container, offset, scale);
+        
     },
 
+    // getEvents() {
+    //     const events = {
+    //         viewreset: this._reset,
+    //         zoom: this._onZoom,
+    //         moveend: this._update,
+    //         zoomend: this._onZoomEnd
+    //     };
+    //     if (this._zoomAnimated) {
+    //         events.zoomanim = this._onAnimZoom;
+    //     }
+    //     return events;
+    // },
+
+    // _onAnimZoom(ev) {
+    //     this._updateTransform(ev.center, ev.zoom);
+    // },
+
+	// _onZoom() {
+    //     this._updateTransform(this._map.getCenter(), this._map.getZoom());
+	// },
+
+    // _onZoomEnd() {
+    //     for (const id in this._layers) {
+    //         this._layers[id]._project();
+    //     }
+    // },
+
+    // _reset() {
+    //     this._update();
+    //     this._updateTransform(this._center, this._zoom);
+
+    //     for (const id in this._layers) {
+    //         this._layers[id]._reset();
+    //     }
+    // },
+
+    // _updatePaths() {
+    //     for (const id in this._layers) {
+    //         this._layers[id]._update();
+    //     }
+    // },
+
     _update: function() {
         if (!this._map._rotate) {
             return rendererProto._update.apply(this, arguments);

package/src/map/Map.js

@@ -95,6 +95,15 @@ L.Map.include({
             .rotate(-this._bearing);
     },
 
+    // latLngToLayerPoint: function (latlng) {
+    //     var projectedPoint = this.project(L.latLng(latlng))._round();
+    //     return projectedPoint._subtract(this.getPixelOrigin());
+    // },
+
+    // latLngToContainerPoint: function (latlng) {
+	// 	return this.layerPointToContainerPoint(this.latLngToLayerPoint(toLatLng(latlng)));
+	// },
+
     /**
      * Given latlng bounds, returns the bounds in projected pixel
      * relative to the map container.
@@ -110,10 +119,12 @@ L.Map.include({
         if (!this._rotate && mapProto.mapBoundsToContainerBounds) {
             return mapProto.mapBoundsToContainerBounds.apply(this, arguments);
         }
-        const nw = this.latLngToContainerPoint(bounds.getNorthWest()),
-            ne = this.latLngToContainerPoint(bounds.getNorthEast()),
-            sw = this.latLngToContainerPoint(bounds.getSouthWest()),
-            se = this.latLngToContainerPoint(bounds.getSouthEast());
+        // same as `this.latLngToContainerPoint(latlng)` but with floating point precision
+        const origin = this.getPixelOrigin().add(this._getMapPanePos());
+        const nw = this.project(bounds.getNorthWest())._subtract(origin),
+              ne = this.project(bounds.getNorthEast())._subtract(origin),
+              sw = this.project(bounds.getSouthWest())._subtract(origin),
+              se = this.project(bounds.getSouthEast())._subtract(origin);
         return L.bounds([
             L.point(Math.min(nw.x, ne.x, se.x, sw.x), Math.min(nw.y, ne.y, se.y, sw.y)), // [ minX, minY ]
             L.point(Math.max(nw.x, ne.x, se.x, sw.x), Math.max(nw.y, ne.y, se.y, sw.y))  // [ maxX, maxY ]
@@ -473,11 +484,16 @@ L.Map.include({
         // return L.DomUtil.getPosition(this._rotatePane) || new L.Point(0, 0);
     },
 
+    // _latLngToNewLayerPoint(latlng, zoom, center) {
+    //    const topLeft = this._getNewPixelOrigin(center, zoom);
+    //    return this.project(latlng, zoom)._subtract(topLeft);
+    //},
+
     _getNewPixelOrigin: function(center, zoom) {
-        var viewHalf = this.getSize()._divideBy(2);
         if (!this._rotate) {
             return mapProto._getNewPixelOrigin.apply(this, arguments);
         }
+        var viewHalf = this.getSize()._divideBy(2);
         return this.project(center, zoom)
             .rotate(this._bearing)
             ._subtract(viewHalf)

package/src/map/handler/CompassBearing.js

@@ -8,25 +8,64 @@ 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);
     },
 
 });

package/src/map/handler/TouchZoom.js

@@ -19,10 +19,6 @@ L.Map.mergeOptions({
      */
     touchZoom: L.Browser.touch,
 
-    /**
-     * 
-     */
-
     /**
      * @TODO check if this is a duplicate of `L.Map.TouchGestures::bounceAtZoomLimits`
      * 

package/test/index.html

@@ -55,6 +55,10 @@
 				<button onclick="map.flyTo(places['Washington'], 10);">Washington</button>
 				<button onclick="map.flyTo(places['Trondheim'], 10);">Trondheim</button>
 			</p>
+			<p>
+				<strong>Fit bounds (z = 0): </strong>
+				<button onclick="map.setZoom(0, {animate: false}) && setTimeout(() => map.fitBounds(rectangle.getBounds(), { animate: false }), 1000);" title="DEBUG: map.setZoom(0) && map.getBoundsZoom(rectangle.getBounds())">RECTANGLE</button>
+			</p>
 		</div>
 
 		<script>
@@ -79,6 +83,7 @@
 				layers: [esri],
 				// worldCopyJump: true,
 				// preferCanvas: false,
+				zoomAnimation: false, /* DEBUG: L.Renderer._updateTransform() */
 				rotate: true,
 				rotateControl: {
 					closeOnZeroBearing: false,
@@ -87,7 +92,7 @@
 				bearing: 30,
 				// attributionControl: false,
 				// zoomControl: false,
-				// compassBearing: false,
+				compassBearing: true,
 				// trackContainerMutation: false,
 				// shiftKeyRotate: false,
 				// touchGestures: true,
@@ -142,8 +147,16 @@
 				[52, 4]
 			]).addTo(map);
 
+			const rectangle = L.rectangle([
+				[60.81123, 25.71632],
+				[60.81028, 25.73166],
+				[60.7997, 25.72892],
+				[60.80061, 25.71362]
+			]).addTo(map);
+
 			// 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"