leaflet-rotate 0.2.1 → 0.2.3

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/dom/DomUtil.js

@@ -8,6 +8,18 @@ const domUtilProto = L.extend({}, L.DomUtil);
 
 L.extend(L.DomUtil, {
 
+    /**
+     * Resets the 3D CSS transform of `el` so it is
+     * translated by `offset` pixels and optionally
+     * scaled by `scale`. Does not have an effect if
+     * the browser doesn't support 3D CSS transforms.
+     * 
+     * @param {HTMLElement} el 
+     * @param {L.Point} offset 
+     * @param {Number} scale
+     * @param {Number} bearing 
+     * @param {L.Point} pivot 
+     */
     setTransform: function(el, offset, scale, bearing, pivot) {
         var pos = offset || new L.Point(0, 0);
 
@@ -24,7 +36,19 @@ L.extend(L.DomUtil, {
             ' rotate(' + bearing + 'rad)';
     },
 
-    setPosition: function(el, point, bearing, pivot, scale) { // (HTMLElement, Point[, Boolean])
+    /**
+     * Sets the position of `el` to coordinates specified by
+     * `position`, using CSS translate or top/left positioning
+     * depending on the browser (used by Leaflet internally
+     * to position its layers).
+     * 
+     * @param {HTMLElement} el 
+     * @param {L.Point} point 
+     * @param {Number} bearing
+     * @param {L.Point} pivot 
+     * @param {Number} scale 
+     */
+    setPosition: function(el, point, bearing, pivot, scale) {
         if (!bearing) {
             return domUtilProto.setPosition.apply(this, arguments);
         }
@@ -41,8 +65,14 @@ L.extend(L.DomUtil, {
         }
     },
 
-    // Constants for rotation
+    /**
+     * @constant radians = degrees × π/180°
+     */
     DEG_TO_RAD: Math.PI / 180,
+
+    /**
+     * @constant degrees = radians × 180°/π
+     */
     RAD_TO_DEG: 180 / Math.PI,
 
 });

package/src/dom/Draggable.js

@@ -4,8 +4,15 @@
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/dom/Draggable.js
  */
 
+/**
+ * A class for making DOM elements draggable (including touch support).
+ * Used internally for map and marker dragging. Only works for elements
+ * that were positioned with [`L.DomUtil.setPosition`](#domutil-setposition).
+ */
+
 L.Draggable.include({
 
+    /** @TODO */
     // updateMapBearing: function(mapBearing) {
     //     this._mapBearing = mapBearing;
     // },

package/src/geo/LatLngBounds.js

@@ -0,0 +1,13 @@
+/**
+ * @external L.LatLngBounds
+ * 
+ * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/geo/LatLngBounds.js
+ */
+
+/**
+ * @TODO find out if should override here some functions in order
+ * to always get  correct { _southWest, _northEast } bounds on a rotaded
+ * map, for example: at 180° "_southWest" should becomes "_northEast"?
+ * 
+ * @see L.Map.getBounds()
+ */

package/src/geometry/Bounds.js

@@ -0,0 +1,13 @@
+/**
+ * @external L.Bounds
+ * 
+ * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/geometry/Bounds.js
+ */
+
+/**
+ * @TODO find out if should override here some functions in order
+ * to always get  correct { min, max } pixel bounds on a rotaded
+ * map, for example: at 180° "min" should becomes "max"?
+ * 
+ * @see L.Map.getPixelBounds()
+ */

package/src/geometry/Point.js

@@ -26,6 +26,11 @@ L.extend(L.Point.prototype, {
      * 3. add (pivot.x, pivot.y) back
      * 
      * same as `this.subtract(pivot).rotate(theta).add(pivot)`
+     * 
+     * @param {Number} theta 
+     * @param {L.Point} pivot 
+     * 
+     * @returns {L.Point}
      */
     rotateFrom: function(theta, pivot) {
         if (!theta) { return this; }

package/src/index.js

@@ -1,7 +1,21 @@
 /**
+ * Export Leaflet classes in the same order as the core library
+ * 
  * @external L
  *
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/Leaflet.js
+ * 
+ * @see https://github.com/Leaflet/Leaflet/blob/v1.9.3/src/control/index.js
+ * @see https://github.com/Leaflet/Leaflet/blob/v1.9.3/src/core/index.js
+ * 
+ * @see https://github.com/Leaflet/Leaflet/blob/v1.9.3/src/dom/index.js
+ * @see https://github.com/Leaflet/Leaflet/blob/v1.9.3/src/geometry/index.js
+ * @see https://github.com/Leaflet/Leaflet/blob/v1.9.3/src/geo/index.js
+ * @see https://github.com/Leaflet/Leaflet/blob/v1.9.3/src/layer/index.js
+ * @see https://github.com/Leaflet/Leaflet/blob/v1.9.3/src/layer/marker/index.js
+ * @see https://github.com/Leaflet/Leaflet/blob/v1.9.3/src/layer/tile/index.js
+ * @see https://github.com/Leaflet/Leaflet/blob/v1.9.3/src/layer/vector/index.js
+ * @see https://github.com/Leaflet/Leaflet/blob/v1.9.3/src/map/index.js
  */
 
 // import {version} from '../package.json';
@@ -19,9 +33,10 @@ export * from './dom/Draggable';
 
 // geometry
 export * from './geometry/Point';
+export * from './geometry/Bounds';
 
 // geo
-// export * from './geo/index';
+export * from './geo/LatLngBounds';
 
 // layer
 export * from './layer/DivOverlay';
@@ -30,9 +45,7 @@ export * from './layer/Tooltip';
 export * from './layer/marker/Icon';
 export * from './layer/marker/Marker';
 export * from './layer/tile/GridLayer';
-export * from './layer/vector/Canvas';
 export * from './layer/vector/Renderer';
-export * from './layer/vector/SVG';
 
 // map
 export * from './map/Map';

package/src/layer/DivOverlay.js

@@ -8,16 +8,23 @@ const divOverlayProto = L.extend({}, L.DivOverlay.prototype);
 
 L.DivOverlay.include({
 
+    /**
+     * Update L.Popup and L.Tooltip anchor positions after
+     * the map is moved by calling `map.setBearing(theta)`
+     * 
+     * @listens L.Map~rotate
+     */
     getEvents: function() {
         return L.extend(divOverlayProto.getEvents.apply(this, arguments), { rotate: this._updatePosition });
     },
 
+    /**
+     * 0. update element anchor point (divOverlayProto v1.9.3)
+     * 1. rotate around anchor point (subtract anchor -> rotate point -> add anchor)
+     */
     _updatePosition: function() {
-        // 0. update anchor (leaflet v1.9.3)
+        if (!this._map) { return; }
         divOverlayProto._updatePosition.apply(this, arguments);
-        // 1. subtract anchor
-        // 2. rotate element
-        // 3. restore anchor
         if (this._map && this._map._rotate && this._zoomAnimated) {
             var anchor = this._getAnchor();
             var pos = L.DomUtil.getPosition(this._container).subtract(anchor);

package/src/layer/Popup.js

@@ -8,12 +8,12 @@ const popupProto = L.extend({}, L.Popup.prototype);
 
 L.Popup.include({
 
+    /**
+     * 0. update element anchor point (popupProto v1.9.3)
+     * 1. rotate around anchor point (subtract anchor -> rotate point -> add anchor)
+     */
     _animateZoom: function(e) {
-        // 0. update anchor (leaflet v1.9.3)
         popupProto._animateZoom.apply(this, arguments);
-        // 1. subtract anchor
-        // 2. rotate element
-        // 3. restore anchor
         if (this._map && this._map._rotate) {
             var anchor = this._getAnchor();
             var pos = L.DomUtil.getPosition(this._container).subtract(anchor);
@@ -22,7 +22,7 @@ L.Popup.include({
     },
 
     /**
-     * Hot fix for L.Popup.mergeOptions({ keepInView: true, });
+     * Fix for L.popup({ keepInView = true })
      * 
      * @see https://github.com/fnicollet/Leaflet/pull/21
      */
@@ -44,8 +44,8 @@ L.Popup.include({
 
         layerPos._add(L.DomUtil.getPosition(this._container));
 
-        // var containerPos = map.layerPointToContainerPoint(layerPos);
         /** @TODO use popupProto._adjustPan */
+        // var containerPos = map.layerPointToContainerPoint(layerPos);
         var containerPos = layerPos._add(this._map._getMapPanePos()),
             padding = L.point(this.options.autoPanPadding),
             paddingTL = L.point(this.options.autoPanPaddingTopLeft || padding),

package/src/layer/marker/Marker.js

@@ -3,22 +3,33 @@
  * @external L.Handler.MarkerDrag
  * 
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/marker/Marker.js
+ * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/marker/Marker.Drag.js
+ * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/dom/Draggable.js
  */
 
 const markerProto = L.extend({}, L.Marker.prototype);
 
 L.Marker.mergeOptions({
 
-    // @option rotation: Number = 0
-    // Rotation of this marker in rad
+    /**
+     * Rotation of this marker in rad
+     * 
+     * @type {Number}
+     */
     rotation: 0,
 
-    // @option rotateWithView: Boolean = false
-    // Rotate this marker when map rotates
+    /**
+     * Rotate this marker when map rotates
+     * 
+     * @type {Boolean}
+     */
     rotateWithView: false,
 
-    // @option scale: Number = undefined
-    // Scale of the marker icon
+    /**
+     * Scale of the marker icon
+     * 
+     * @type {Number}
+     */
     scale: undefined,
 
 });
@@ -79,15 +90,16 @@ var MarkerDrag = {
 
 L.Marker.include({
 
+    /**
+     * Update L.Marker anchor position after the map
+     * is moved by calling `map.setBearing(theta)`
+     * 
+     * @listens L.Map~rotate
+     */
     getEvents: function() {
         return L.extend(markerProto.getEvents.apply(this, arguments), { rotate: this.update });
     },
 
-    onAdd: function(map) {
-        markerProto.onAdd.apply(this, arguments);
-        map.on('rotate', this.update, this);
-    },
-
     _initInteraction: function() {
         var ret = markerProto._initInteraction.apply(this, arguments);
         if (this.dragging && this.dragging.enabled() && this._map && this._map._rotate) {
@@ -132,12 +144,12 @@ L.Marker.include({
         this._resetZIndex();
     },
 
-    _updateZIndex: function(offset) {
-        if (!this._map._rotate) {
-            return markerProto._updateZIndex.apply(this, arguments);
-        }
-        this._icon.style.zIndex = Math.round(this._zIndex + offset);
-    },
+    // _updateZIndex: function(offset) {
+    //     if (!this._map._rotate) {
+    //         return markerProto._updateZIndex.apply(this, arguments);
+    //     }
+    //     this._icon.style.zIndex = Math.round(this._zIndex + offset);
+    // },
 
     setRotation: function(rotation) {
         this.options.rotation = rotation;

package/src/layer/tile/GridLayer.js

@@ -8,6 +8,12 @@ const gridLayerProto = L.extend({}, L.GridLayer.prototype);
 
 L.GridLayer.include({
 
+    /**
+     * Redraw L.TileLayer bounds after the map is
+     * moved by just calling `map.setBearing(theta)`
+     * 
+     * @listens L.Map~rotate
+     */
     getEvents: function() {
         var events = gridLayerProto.getEvents.apply(this, arguments);
         if (this._map._rotate && !this.options.updateWhenIdle) {

package/src/layer/vector/Renderer.js

@@ -8,17 +8,44 @@ const rendererProto = L.extend({}, L.Renderer.prototype);
 
 L.Renderer.include({
 
-    // onAdd: function() {
-    //     rendererProto.onAdd.apply(this, arguments);
-    //     // this._map.on('rotate', this._update, this);
-    // },
+    /**
+     * Redraw L.Canvas and L.SVG renderer bounds after the
+     * map is moved by just calling `map.setBearing(theta)`
+     * 
+     * @listens L.Map~rotate
+     */
+    getEvents: function() {
+        return L.extend(rendererProto.getEvents.apply(this, arguments), { rotate: this._update });
+    },
 
-    // onRemove: function() {
-    //     rendererProto.onRemove.apply(this, arguments);
-    //     // this._map.off('rotate', this._update, this);
-    // },
+    /**
+     * 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

@@ -473,11 +473,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)