leaflet-rotate 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "leaflet-rotate",
-	"version": "0.3.0",
+	"version": "0.5.0",
 	"description": "A Leaflet plugin that allows to add rotation functionality to map tiles",
 	"type": "module",
 	"main": "dist/leaflet-rotate.js",
@@ -9,7 +9,7 @@
 	"scripts": {
 		"dev": "node build/dev.js",
 		"build": "node build/build.js",
-		"test": "npm run build && cucumber-js",
+		"test": "node build/test.js",
 		"version": "npm run build && git add -A dist"
 	},
 	"repository": {
@@ -46,12 +46,12 @@
 		"url": "https://github.com/Raruto/leaflet-rotate/issues"
 	},
 	"homepage": "https://github.com/Raruto/leaflet-rotate#readme",
+	"peerDependencies": {
+		"leaflet": "^1.9.3 || ^2.0.0-alpha.1"
+	},
 	"devDependencies": {
 		"@cucumber/cucumber": "^10.3.1",
 		"esbuild": "^0.28.2",
 		"playwright": "^1.64.1"
-	},
-	"peerDependencies": {
-		"leaflet": "^1.9.3"
 	}
 }

package/src/control/Rotate.js

@@ -1,11 +1,19 @@
 /**
- * A tri-state control for map rotation, states are:
+ * Leaflet control for changing map rotation and selecting a rotation mode.
+ * Its modes are:
  * 
- * - Locked (default)
- * - Unlocked (user can pinch-rotate)
- * - Follow (rotation follows device orientation, if available)
+ * - Locked: rotation gestures are disabled.
+ * - Touch: two-finger rotation is enabled.
+ * - Compass: bearing follows device orientation when supported and permitted.
  * 
- * @typedef L.Control.Rotate
+ * @class L.Control.Rotate
+ * 
+ * @extends L.Control
+ * 
+ * @property {string} [position='topleft'] Leaflet control position.
+ * @property {boolean} [closeOnZeroBearing=true] Hide the control when bearing is zero.
+ * 
+ * @since leaflet-rotate (v0.1.0)
  */
 
 L.Control.Rotate = L.Control.extend({
@@ -15,12 +23,21 @@ L.Control.Rotate = L.Control.extend({
         closeOnZeroBearing: true
     },
 
-    onAdd: function(map) {
-        var container = this._container = L.DomUtil.create('div', 'leaflet-control-rotate leaflet-bar');
+    /**
+     * Create the control element and subscribe to map rotation.
+     * 
+     * @param {L.Map} map
+     * 
+     * @returns {HTMLElement} Control container.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    onAdd(map) {
+        const 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);
 
-        var arrow = this._arrow = L.DomUtil.create('span', 'leaflet-control-rotate-arrow');
+        const arrow = this._arrow = L.DomUtil.create('span', 'leaflet-control-rotate-arrow');
 
         arrow.style.backgroundImage = `url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")`;
         arrow.style.cursor = 'grab';
@@ -31,7 +48,7 @@ L.Control.Rotate = L.Control.extend({
         arrow.style.backgroundPosition = '50%';
 
         // Copy-pasted from L.Control.Zoom
-        var link = this._link = L.DomUtil.create('a', 'leaflet-control-rotate-toggle', container);
+        const link = this._link = L.DomUtil.create('a', 'leaflet-control-rotate-toggle', container);
         link.appendChild(arrow);
         link.href = '#';
         link.title = 'Rotate map';
@@ -43,10 +60,6 @@ L.Control.Rotate = L.Control.extend({
             .on(link, 'click', this._cycleState, this)
             .on(link, 'click', this._refocusOnMap, this);
 
-        if (!L.Browser.any3d) {
-            L.DomUtil.addClass(link, 'leaflet-disabled');
-        }
-
         this._restyle();
 
         map.on('rotate', this._restyle, this);
@@ -62,11 +75,25 @@ L.Control.Rotate = L.Control.extend({
         return container;
     },
     
-    onRemove: function(map) {
+    /**
+     * Remove the map event listener when the control is detached.
+     * 
+     * @param {L.Map} map
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    onRemove(map) {
         map.off('rotate', this._restyle, this);
     },
 
-    _handleMouseDown: function(e) {
+    /**
+     * Begin dragging the control's bearing indicator.
+     * 
+     * @param {MouseEvent} e Mouse-down event.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _handleMouseDown(e) {
         L.DomEvent.stop(e);
         this.dragging = true;
         this.dragstartX = e.pageX;
@@ -76,7 +103,14 @@ L.Control.Rotate = L.Control.extend({
             .on(document, 'mouseup', this._handleMouseUp, this);
     },
 
-    _handleMouseUp: function(e) {
+    /**
+     * End bearing-indicator dragging and remove document listeners.
+     * 
+     * @param {MouseEvent} e Mouse-up event.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _handleMouseUp(e) {
         L.DomEvent.stop(e);
         this.dragging = false;
 
@@ -85,18 +119,33 @@ L.Control.Rotate = L.Control.extend({
             .off(document, 'mouseup', this._handleMouseUp, this);
     },
 
-    _handleMouseDrag: function(e) {
+    /**
+     * Set bearing from the horizontal drag distance.
+     * 
+     * @param {MouseEvent} e Mouse-move event.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _handleMouseDrag(e) {
         if (!this.dragging) { return; }
-        var deltaX = e.clientX - this.dragstartX;
+        const deltaX = e.clientX - this.dragstartX;
         this._map.setBearing(deltaX);
     },
 
-    _cycleState: function(ev) {
+    /**
+     * Cycle through touch, compass, and locked rotation modes.
+     * Compass mode may require permission from the browser.
+     * 
+     * @param {Event} ev Control click event.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _cycleState(ev) {
         if (!this._map) {
             return;
         }
 
-        var map = this._map;
+        const map = this._map;
 
         // Touch mode
         if (!map.touchRotate.enabled() && !map.compassBearing.enabled()) {
@@ -124,12 +173,19 @@ L.Control.Rotate = L.Control.extend({
         this._restyle();
     },
 
-    _restyle: function() {
+    /**
+     * Update the control icon and visibility to match the current mode.
+     * 
+     * @listens L.Map#rotate
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _restyle() {
         if (!this._map.options.rotate) {
-            L.DomUtil.addClass(this._link, 'leaflet-disabled');
+            this._link.classList.add('leaflet-disabled');
         } else {
-            var map = this._map;
-            var bearing = map.getBearing();
+            const map = this._map;
+            const bearing = map.getBearing();
 
             this._arrow.style.transform = 'rotate(' + bearing + 'deg)';
 
@@ -159,18 +215,31 @@ L.Control.Rotate = L.Control.extend({
 
 });
 
-L.control.rotate = function(options) {
-    return new L.Control.Rotate(options);
-};
+if (L.control) {
+    L.control.rotate = options => new L.Control.Rotate(options);
+}
 
 L.Map.mergeOptions({
+    /**
+     * Add the rotation control automatically. Set to `false` to disable,
+     * or pass an options object to configure the control.
+     * 
+     * @type {boolean|Object}
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
     rotateControl: true,
 });
 
+/**
+ * Add the configured rotation control to each newly initialized map.
+ * 
+ * @since leaflet-rotate (v0.1.0)
+ */
 L.Map.addInitHook(function() {
     if (this.options.rotateControl) {
-        var options = typeof this.options.rotateControl === 'object' ? this.options.rotateControl : {};
-        this.rotateControl = L.control.rotate(options);
+        const options = typeof this.options.rotateControl === 'object' ? this.options.rotateControl : {};
+        this.rotateControl = new L.Control.Rotate(options);
         this.addControl(this.rotateControl);
     }
 });

package/src/dom/DomUtil.js

@@ -4,75 +4,70 @@
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/dom/DomUtil.js
  */
 
-const domUtilProto = L.extend({}, L.DomUtil);
-
-L.extend(L.DomUtil, {
+const domUtilProto = Object.assign({}, L.DomUtil);
 
+Object.assign(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.
+     * Resets the 3D CSS transform of `el` so it is translated by `offset` pixels,
+     * optionally scaled by `scale`, and rotated around `pivot` when `bearing` is set.
+     *
+     * @param {HTMLElement} el Element to transform.
+     * @param {L.Point} [offset] Translation in pixels; defaults to the origin.
+     * @param {number} [scale] Optional scale factor.
+     * @param {number} [bearing] Optional rotation in radians.
+     * @param {L.Point} [pivot] Point in pixels around which to rotate.
+     * 
+     * @returns {void}
      * 
-     * @param {HTMLElement} el 
-     * @param {L.Point} offset 
-     * @param {Number} scale
-     * @param {Number} bearing 
-     * @param {L.Point} pivot 
+     * @since leaflet-rotate (v0.1.0)
      */
-    setTransform: function(el, offset, scale, bearing, pivot) {
-        var pos = offset || new L.Point(0, 0);
+    setTransform(el, offset, scale, bearing, pivot) {
+        let pos = offset || new L.Point(0, 0);
 
         if (!bearing) {
-            offset = pos._round();
-            return domUtilProto.setTransform.apply(this, arguments);
+            return domUtilProto.setTransform(el, pos._round(), scale);
         }
 
         pos = pos.rotateFrom(bearing, pivot);
-
-        el.style[L.DomUtil.TRANSFORM] =
-            'translate3d(' + pos.x + 'px,' + pos.y + 'px' + ',0)' +
+        el.style.transform =
+            'translate3d(' + pos.x + 'px,' + pos.y + 'px,0)' +
             (scale ? ' scale(' + scale + ')' : '') +
             ' rotate(' + bearing + 'rad)';
     },
 
     /**
-     * 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).
+     * Sets the position of `el` to `point`, using CSS transforms or top/left positioning
+     * depending on browser support, and optionally rotating it around `pivot`.
+     *
+     * @param {HTMLElement} el Element to position.
+     * @param {L.Point} point Position in pixels.
+     * @param {number} [bearing] Rotation in radians; zero or omitted uses Leaflet positioning.
+     * @param {L.Point} [pivot] Point in pixels around which to rotate.
+     * @param {number} [scale] Optional scale factor.
      * 
-     * @param {HTMLElement} el 
-     * @param {L.Point} point 
-     * @param {Number} bearing
-     * @param {L.Point} pivot 
-     * @param {Number} scale 
+     * @returns {void}
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    setPosition: function(el, point, bearing, pivot, scale) {
+    setPosition(el, point, bearing, pivot, scale) {
         if (!bearing) {
-            return domUtilProto.setPosition.apply(this, arguments);
+            return domUtilProto.setPosition(el, point);
         }
 
-        /*eslint-disable */
         el._leaflet_pos = point;
-        /*eslint-enable */
-
-        if (L.Browser.any3d) {
-            L.DomUtil.setTransform(el, point, scale, bearing, pivot);
-        } else {
-            el.style.left = point.x + 'px';
-            el.style.top = point.y + 'px';
-        }
+        L.DomUtil.setTransform(el, point, scale, bearing, pivot);
     },
 
     /**
-     * @constant radians = degrees × π/180°
-     */
-    DEG_TO_RAD: Math.PI / 180,
-
-    /**
-     * @constant degrees = radians × 180°/π
+     * Returns the position assigned to `el`.
+     *
+     * @param {HTMLElement} el Element whose Leaflet position is requested.
+     * 
+     * @returns {L.Point} Stored Leaflet position, or the position measured by Leaflet.
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    RAD_TO_DEG: 180 / Math.PI,
-
+    getPosition(el) {
+        return el._leaflet_pos || domUtilProto.getPosition(el);
+    }
 });

package/src/dom/Draggable.js

@@ -1,4 +1,7 @@
 /**
+ * This plugin does not modify the `L.Draggable` API; it adapts marker drag
+ * coordinates in `L.Marker` when rotation or pitch is enabled.
+ *
  * @external L.Draggable
  * 
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/dom/Draggable.js
@@ -8,12 +11,14 @@
  * 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).
+ *
+ * @since leaflet-rotate (v0.1.0)
  */
 
 L.Draggable.include({
 
     /** @TODO */
-    // updateMapBearing: function(mapBearing) {
+    // updateMapBearing(mapBearing) {
     //     this._mapBearing = mapBearing;
     // },
 

package/src/geo/LatLngBounds.js

@@ -1,4 +1,9 @@
 /**
+ * Leaflet's `L.LatLngBounds` is not overridden by this plugin. Map methods
+ * such as `getBounds()` return standard Leaflet bounds containing the viewport.
+ *
+ * @since leaflet-rotate (v0.1.0)
+ *
  * @external L.LatLngBounds
  * 
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/geo/LatLngBounds.js

package/src/geometry/Bounds.js

@@ -1,4 +1,9 @@
 /**
+ * Leaflet's `L.Bounds` is not overridden by this plugin. Rotation-aware
+ * pixel bounds are calculated by the map and renderer extensions.
+ *
+ * @since leaflet-rotate (v0.1.0)
+ *
  * @external L.Bounds
  * 
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/geometry/Bounds.js

package/src/geometry/Point.js

@@ -4,7 +4,7 @@
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/geometry/Point.js
  */
 
-L.extend(L.Point.prototype, {
+Object.assign(L.Point.prototype, {
 
     /**
      * Rotate around (0,0) by applying the 2D rotation matrix:
@@ -12,9 +12,12 @@ L.extend(L.Point.prototype, {
      * ⎡ x' ⎤ = ⎡ cos θ  -sin θ ⎤ ⎡ x ⎤
      * ⎣ y' ⎦   ⎣ sin θ   cos θ ⎦ ⎣ y ⎦
      * 
-     * @param theta must be given in radians.
+     * @param {number} theta Rotation angle in radians, counterclockwise.
+     * @returns {L.Point} Rotated point (or this point when theta is zero).
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    rotate: function(theta) {
+    rotate(theta) {
         return this.rotateFrom(theta, new L.Point(0,0))
     },
 
@@ -27,18 +30,20 @@ L.extend(L.Point.prototype, {
      * 
      * same as `this.subtract(pivot).rotate(theta).add(pivot)`
      * 
-     * @param {Number} theta 
-     * @param {L.Point} pivot 
+     * @param {number} theta Rotation angle in radians, counterclockwise.
+     * @param {L.Point} pivot Point to rotate around.
      * 
      * @returns {L.Point}
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    rotateFrom: function(theta, pivot) {
+    rotateFrom(theta, pivot) {
         if (!theta) { return this; }
-        var sinTheta = Math.sin(theta);
-        var cosTheta = Math.cos(theta);
-        var cx = pivot.x,
+        const sinTheta = Math.sin(theta);
+        const cosTheta = Math.cos(theta);
+        const cx = pivot.x,
             cy = pivot.y;
-        var x = this.x - cx,
+        const x = this.x - cx,
             y = this.y - cy;
 
         return new L.Point(
@@ -48,3 +53,21 @@ L.extend(L.Point.prototype, {
     },
 
 });
+
+/**
+ * Convert an array or point-like object to an `L.Point`.
+ * 
+ * @param {L.Point|number[]|{x:number,y:number}|null} point Coordinate to convert.
+ * 
+ * @returns {L.Point|null} Existing point, converted point, or `null` for a null input.
+ * 
+ * @since leaflet-rotate (v0.1.0)
+ */
+export function toPoint(point) {
+    if (point == null || point instanceof L.Point) {
+        return point;
+    }
+    return Array.isArray(point)
+        ? new L.Point(point[0], point[1])
+        : new L.Point(point.x, point.y);
+}

package/src/index.js

@@ -1,5 +1,7 @@
 /**
- * Export Leaflet classes in the same order as the core library
+ * Export Leaflet classes in the same order as the core library.
+ *
+ * @since leaflet-rotate (v0.1.0)
  * 
  * @external L
  *

package/src/layer/DivOverlay.js

@@ -1,37 +1,68 @@
 /**
+ * Keeps popup and tooltip screen positions aligned with rotated and pitched maps.
+ *
  * @external L.DivOverlay
  * 
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/DivOverlay.js
+ * 
+ * @since leaflet-rotate (v0.1.0)
  */
 
-const divOverlayProto = L.extend({}, L.DivOverlay.prototype);
+import { toPoint } from '../geometry/Point';
+
+const divOverlayProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.DivOverlay.prototype));
 
 L.DivOverlay.include({
 
     /**
-     * Update L.Popup and L.Tooltip anchor positions after
-     * the map is moved by calling `map.setBearing(theta)`
+     * Extend overlay event subscriptions to refresh position after map rotation and pitch.
      * 
      * @listens L.Map~rotate
+     * @listens L.Map~pitch
+     *
+     * @returns {Object} Leaflet event map for the overlay.
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    getEvents: function() {
-        return L.extend(divOverlayProto.getEvents.apply(this, arguments), { rotate: this._updatePosition });
+    getEvents() {
+        const events = Object.assign(divOverlayProto.getEvents.apply(this, arguments), {
+            rotate: this._updatePosition,
+            pitch: this._updatePitchEvents,
+        });
+        if (this._map && this._map._pitch) {
+            events.move = this._updatePosition;
+        }
+        return events;
     },
 
     /**
-     * 0. update element anchor point (divOverlayProto v1.9.3)
-     * 1. rotate around anchor point (subtract anchor -> rotate point -> add anchor)
+     * Listen to map movement only while pitch is non-zero.
+     * 
+     * @since leaflet-rotate (0.5.0)
+     */
+    _updatePitchEvents() {
+        if (this._map._pitch) {
+            this._map.on('move', this._updatePosition, this);
+        } else {
+            this._map.off('move', this._updatePosition, this);
+        }
+    },
+
+    /**
+     * Reposition the overlay after map movement, applying rotation/pitch-aware coordinates.
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    _updatePosition: function() {
+    _updatePosition() {
         if (!this._map) { return; }
         divOverlayProto._updatePosition.apply(this, arguments);
         if (this._map._rotate && this._zoomAnimated) {
-            var anchor = this._getAnchor();
-            var pos = L.DomUtil.getPosition(this._container).subtract(anchor);
+            const anchor = this._getAnchor();
+            const pos = L.DomUtil.getPosition(this._container).subtract(anchor);
             L.DomUtil.setPosition(this._container, this._map.rotatedPointToMapPanePoint(pos).add(anchor));
         } else if (this._map._rotate) {
-            var mapPanePoint = this._map.rotatedPointToMapPanePoint(this._map.latLngToLayerPoint(this._latlng)),
-                offset = L.point(this.options.offset),
+            const mapPanePoint = this._map.rotatedPointToMapPanePoint(this._map.latLngToLayerPoint(this._latlng)),
+                offset = toPoint(this.options.offset || [0, 0]),
                 anchor = this._getAnchor();
 
             this._containerLeft = -Math.round(this._containerWidth / 2) + mapPanePoint.x + offset.x + anchor.x;

package/src/layer/Popup.js

@@ -1,32 +1,45 @@
 /**
+ * Preserves popup positioning and auto-pan behavior on rotated maps.
+ *
  * @external L.Popup
  * 
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/Popup.js
+ * 
+ * @since leaflet-rotate (v0.1.0)
  */
 
-const popupProto = L.extend({}, L.Popup.prototype);
+import { toPoint } from '../geometry/Point';
+
+const popupProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(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)
+     * Update the popup position during zoom animation and transform it into map-pane coordinates.
+     *
+     * @param {Object} e Zoom animation event.
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    _animateZoom: function(e) {
+    _animateZoom(e) {
         popupProto._animateZoom.apply(this, arguments);
         if (this._map && this._map._rotate) {
-            var anchor = this._getAnchor();
-            var pos = L.DomUtil.getPosition(this._container).subtract(anchor);
+            const anchor = this._getAnchor();
+            const pos = L.DomUtil.getPosition(this._container).subtract(anchor);
             L.DomUtil.setPosition(this._container, this._map.rotatedPointToMapPanePoint(pos).add(anchor));
         }
     },
 
     /**
-     * Fix for L.popup({ keepInView = true })
+     * Pan the map when a popup with auto-pan enabled would extend beyond the viewport.
      * 
      * @see https://github.com/fnicollet/Leaflet/pull/21
+     *
+     * @fires L.Map#autopanstart
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    _adjustPan: function() {
+    _adjustPan() {
         if (!this.options.autoPan || (this._map._panAnim && this._map._panAnim._inProgress)) { return; }
 
         // We can endlessly recurse if keepInView is set and the view resets.
@@ -36,8 +49,8 @@ L.Popup.include({
             return;
         }
 
-        var map = this._map,
-            marginBottom = parseInt(L.DomUtil.getStyle(this._container, 'marginBottom'), 10) || 0,
+        const map = this._map,
+            marginBottom = parseInt(getComputedStyle(this._container).marginBottom, 10) || 0,
             containerHeight = this._container.offsetHeight + marginBottom,
             containerWidth = this._containerWidth,
             layerPos = new L.Point(this._containerLeft, -containerHeight - this._containerBottom);
@@ -46,12 +59,12 @@ L.Popup.include({
 
         /** @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),
-            paddingBR = L.point(this.options.autoPanPaddingBottomRight || padding),
-            size = map.getSize(),
-            dx = 0,
+        const containerPos = layerPos._add(this._map._getMapPanePos()),
+            padding = toPoint(this.options.autoPanPadding || [0, 0]),
+            paddingTL = toPoint(this.options.autoPanPaddingTopLeft || padding),
+            paddingBR = toPoint(this.options.autoPanPaddingBottomRight || padding),
+            size = map.getSize();
+        let dx = 0,
             dy = 0;
 
         if (containerPos.x + containerWidth + paddingBR.x > size.x) { // right