leaflet-rotate 0.2.0 → 0.2.2

package/src/map/Map.js

@@ -19,7 +19,7 @@ L.Map.include({
             this._rotate = true;
             this._bearing = 0;
         }
-        mapProto.initialize.call(this, id, options);
+        mapProto.initialize.apply(this, arguments);
         if(this.options.rotate){
           this.setBearing(this.options.bearing);
         }
@@ -35,7 +35,7 @@ L.Map.include({
      */
     containerPointToLayerPoint: function(point) {
         if (!this._rotate) {
-            return mapProto.containerPointToLayerPoint.call(this, point);
+            return mapProto.containerPointToLayerPoint.apply(this, arguments);
         }
         return L.point(point)
             .subtract(this._getMapPanePos())
@@ -50,9 +50,9 @@ L.Map.include({
      * @param {L.Point} point pixel screen coordinates
      * @returns {L.Point} transformed pixel point
      */
-    layerPointToContainerPoint: function(point) { // (Point)
+    layerPointToContainerPoint: function(point) {
         if (!this._rotate) {
-            return mapProto.layerPointToContainerPoint.call(this, point);
+            return mapProto.layerPointToContainerPoint.apply(this, arguments);
         }
         return L.point(point)
             .add(this._getRotatePanePos())
@@ -69,6 +69,8 @@ L.Map.include({
      * 
      * @param {L.Point} point pixel screen coordinates
      * @returns {L.Point}
+     * 
+     * @since leaflet-rotate (v0.1)
      */
     rotatedPointToMapPanePoint: function(point) {
         return L.point(point)
@@ -84,6 +86,8 @@ L.Map.include({
      * (norotatePane) --> (rotatePane)
      * 
      * @param {L.Point} point pixel screen coordinates
+     * 
+     * @since leaflet-rotate (v0.1)
      */
     mapPanePointToRotatedPoint: function(point) {
         return L.point(point)
@@ -91,6 +95,31 @@ L.Map.include({
             .rotate(-this._bearing);
     },
 
+    /**
+     * Given latlng bounds, returns the bounds in projected pixel
+     * relative to the map container.
+     * 
+     * @see https://github.com/ronikar/Leaflet/blob/5c480ef959b947c3beed7065425a5a36c486262b/src/map/Map.js#L1114-L1135
+     * 
+     * @param {L.LatLngBounds} bounds 
+     * @returns {L.Bounds}
+     * 
+     * @since leaflet-rotate (v0.2)
+     */
+    mapBoundsToContainerBounds: function (bounds) {
+        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());
+        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 ]
+        ]);
+    },
+
     /**
      * Returns geographical bounds visible in the current map view
      * 
@@ -103,7 +132,7 @@ L.Map.include({
      */
     getBounds: function() {
         if (!this._rotate) {
-            return mapProto.getBounds.call(this);
+            return mapProto.getBounds.apply(this, arguments);
         }
 
         // SEE: https://github.com/fnicollet/Leaflet/pull/22
@@ -146,6 +175,8 @@ L.Map.include({
      * Change map rotation
      * 
      * @param {number} theta map degrees
+     * 
+     * @since leaflet-rotate (v0.1)
      */
     setBearing: function(theta) {
         if (!L.Browser.any3d || !this._rotate) { return; }
@@ -169,6 +200,8 @@ L.Map.include({
      * Get current map rotation
      * 
      * @returns {number} theta map degrees
+     * 
+     * @since leaflet-rotate (v0.1)
      */
     getBearing: function() {
         return this._bearing * L.DomUtil.RAD_TO_DEG;
@@ -185,7 +218,7 @@ L.Map.include({
      */
     // createPane: function(name, container) {
     //     if (!this._rotate || name == 'mapPane') {
-    //         return mapProto.createPane.call(this, name, container);
+    //         return mapProto.createPane.apply(this, arguments);
     //     }
     //     // init "rotatePane"
     //     if (!this._rotatePane) {
@@ -308,15 +341,108 @@ L.Map.include({
     //     this._enforcingBounds = true;
     //     var center = this.getCenter(),
     //         newCenter = this._limitCenter(center, this._zoom, L.latLngBounds(bounds));
-
+    //
     //     if (!center.equals(newCenter)) {
     //         this.panTo(newCenter, options);
     //     }
-
+    //
     //     this._enforcingBounds = false;
     //     return this;
     // },
 
+    // adjust center for view to get inside bounds
+    // _limitCenter(center, zoom, bounds) {
+    //
+    //     if (!bounds) { return center; }
+    //
+    //     const centerPoint = this.project(center, zoom),
+    //         viewHalf = this.getSize().divideBy(2),
+    //         viewBounds = new Bounds(centerPoint.subtract(viewHalf), centerPoint.add(viewHalf)),
+    //         offset = this._getBoundsOffset(viewBounds, bounds, zoom);
+    //
+    //     // If offset is less than a pixel, ignore.
+    //     // This prevents unstable projections from getting into
+    //     // an infinite loop of tiny offsets.
+    //     if (Math.abs(offset.x) <= 1 && Math.abs(offset.y) <= 1) {
+    //             return center;
+    //     }
+    //
+    //     return this.unproject(centerPoint.add(offset), zoom);
+    // },
+
+    // @method flyToBounds(bounds: LatLngBounds, options?: fitBounds options): this
+    // Sets the view of the map with a smooth animation like [`flyTo`](#map-flyto),
+    // but takes a bounds parameter like [`fitBounds`](#map-fitbounds).
+    // flyToBounds(bounds, options) {
+    //     const target = this._getBoundsCenterZoom(bounds, options);
+    //     return this.flyTo(target.center, target.zoom, options);
+    // },
+
+    // _getBoundsCenterZoom(bounds, options) {
+    //
+    //     options = options || {};
+    //     bounds = bounds.getBounds ? bounds.getBounds() : toLatLngBounds(bounds);
+    //
+    //     const paddingTL = L.point(options.paddingTopLeft || options.padding || [0, 0]),
+    //           paddingBR = L.point(options.paddingBottomRight || options.padding || [0, 0]);
+    //
+    //     let zoom = this.getBoundsZoom(bounds, false, paddingTL.add(paddingBR));
+    //
+    //     zoom = (typeof options.maxZoom === 'number') ? Math.min(options.maxZoom, zoom) : zoom;
+    //
+    //     if (zoom === Infinity) {
+    //         return { center: bounds.getCenter(), zoom };
+    //     }
+    //
+    //     return { center, zoom };
+    //
+    // },
+
+    /**
+     * Returns the maximum zoom level on which the given bounds fit to the map
+     * view in its entirety. If `inside` (optional) is set to `true`, the method
+     * instead returns the minimum zoom level on which the map view fits into
+     * the given bounds in its entirety.
+     * 
+     * @param {L.LatLngBounds} bounds
+     * @param {Boolean} [inside=false]
+     * @param {L.Point} [padding=[0,0]]
+     * 
+     * @returns {Number} zoom level
+     */
+    getBoundsZoom(bounds, inside, padding) {
+        if (!this._rotate || Math.abs(this._bearing).toFixed(1) < 0.1) {
+            return mapProto.getBoundsZoom.apply(this, arguments);
+        }
+
+        bounds = L.latLngBounds(bounds);
+        padding = L.point(padding || [0, 0]);
+
+        let zoom = this.getZoom() || 0;
+        const min = this.getMinZoom(),
+                max = this.getMaxZoom(),
+                /** @TODO use mapProto.getBoundsZoom */
+                // nw = bounds.getNorthWest(),
+                // se = bounds.getSouthEast(),
+                // size = this.getSize().subtract(padding),
+                // boundsSize = L.bounds(this.project(se, zoom), this.project(nw, zoom)).getSize(),
+                size = this.getSize().subtract(padding),
+                boundsSize = this.mapBoundsToContainerBounds(bounds).getSize(),
+                snap = this.options.zoomSnap,
+                scalex = size.x / boundsSize.x,
+                scaley = size.y / boundsSize.y,
+                scale = inside ? Math.max(scalex, scaley) : Math.min(scalex, scaley);
+
+        zoom = this.getScaleZoom(scale, zoom);
+
+        if (snap) {
+            zoom = Math.round(zoom / (snap / 100)) * (snap / 100); // don't jump if within 1% of a snap level
+            zoom = inside ? Math.ceil(zoom / snap) * snap : Math.floor(zoom / snap) * snap;
+        }
+
+        return Math.max(min, Math.min(max, zoom));
+    },
+
     /**
      * Layer point of the current center
      * 
@@ -332,13 +458,16 @@ L.Map.include({
      * @param {L.LatLng} latlng map coordinates
      */
     _getCenterOffset: function(latlng) {
-        var centerOffset = mapProto._getCenterOffset.call(this, latlng);
+        var centerOffset = mapProto._getCenterOffset.apply(this, arguments);
         if (this._rotate) {
             centerOffset = centerOffset.rotate(this._bearing);
         }
         return centerOffset;
     },
 
+    /**
+     * @since leaflet-rotate (v0.1)
+     */
     _getRotatePanePos: function() {
         return this._rotatePanePos || new L.Point(0, 0);
         // return L.DomUtil.getPosition(this._rotatePane) || new L.Point(0, 0);
@@ -347,7 +476,7 @@ L.Map.include({
     _getNewPixelOrigin: function(center, zoom) {
         var viewHalf = this.getSize()._divideBy(2);
         if (!this._rotate) {
-            return mapProto._getNewPixelOrigin.call(this, center, zoom);
+            return mapProto._getNewPixelOrigin.apply(this, arguments);
         }
         return this.project(center, zoom)
             .rotate(this._bearing)
@@ -454,39 +583,6 @@ L.Map.include({
         this.fire('locationfound', data);
     },
 
-    /**
-     * Given latlng bounds, returns the bounds in projected pixel
-     * relative to the map container.
-     * 
-     * @see https://github.com/ronikar/Leaflet/blob/5c480ef959b947c3beed7065425a5a36c486262b/src/map/Map.js#L1114-L1135
-     * 
-     * @param {L.LatLngBounds} bounds 
-     * @returns {L.Bounds}
-     */
-    // boundsToContainerBounds: function (bounds) {
-    //     if (this._rotate) {
-    //         var northWest = this.latLngToContainerPoint(bounds.getNorthWest());
-    //         var northEast = this.latLngToContainerPoint(bounds.getNorthEast());
-    //         var southWest = this.latLngToContainerPoint(bounds.getSouthWest());
-    //         var southEast = this.latLngToContainerPoint(bounds.getSouthEast());
-    //
-    //         var minX = Math.min(northWest.x, northEast.x, southEast.x, southWest.x);
-    //         var maxX = Math.max(northWest.x, northEast.x, southEast.x, southWest.x);
-    //         var minY = Math.min(northWest.y, northEast.y, southEast.y, southWest.y);
-    //         var maxY = Math.max(northWest.y, northEast.y, southEast.y, southWest.y);
-    //
-    //         return L.bounds(
-    //             L.point(minX, minY).multiplyBy(-1),
-    //             L.point(maxX, maxY).multiplyBy(-1).add(this.getSize())
-    //         );
-    //     } else {
-    //         return L.Bounds(
-    //             this.latLngToContainerPoint(bounds.getNorthWest()).multiplyBy(-1),
-    //             this.latLngToContainerPoint(bounds.getSouthEast()).multiplyBy(-1).add(this.getSize())
-    //         );
-    //     }
-    // },
-
     /**
      * @see https://github.com/ronikar/Leaflet/blob/5c480ef959b947c3beed7065425a5a36c486262b/src/geo/LatLngBounds.js#L253-L264
      * 

package/src/map/handler/CompassBearing.js

@@ -31,7 +31,9 @@ L.Map.CompassBearing = L.Handler.extend({
 
 });
 
-// @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,32 @@
  * @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`
+     * 
      */
 
-    // @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.
+    /**
+     * @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}
+     */
     bounceAtZoomLimits: false,
 
 });
@@ -44,7 +51,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

@@ -26,6 +26,7 @@
 				border: 1px solid #ccc;
 				max-height: 50vh;
 			}
+			/* TODO: fix incorrect map corners position when map has some margin */
 			html, body {
 				/* margin: 0; */
 				/* padding: 0; */

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.call(this);
-    //     // 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.call(this);
-    //     this._map.off('rotate', this._redraw, this);
-    // },
-
-    // _update: function() {
-    //     canvasProto._update.call(this);
-    //     // 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.call(this);
-    //     if (this._map._rotate) {
-    //         this.fire('update');
-    //     }
-    // },
-
-});