leaflet-rotate 0.5.1 → 0.5.2

package/README.md

@@ -26,7 +26,7 @@ Load Leaflet first, then the plugin. For example, using the published CDN build:
 ```html
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9/dist/leaflet.css">
 <script src="https://unpkg.com/leaflet@1.9/dist/leaflet.js"></script>
-<script src="https://unpkg.com/leaflet-rotate@0.5.1/dist/leaflet-rotate.js"></script>
+<script src="https://unpkg.com/leaflet-rotate@0.5.2/dist/leaflet-rotate.js"></script>
 ```
 
 Or if you want to test it with [`2.0.0-alpha.1`](https://github.com/Leaflet/Leaflet/releases/tag/v2.0.0-alpha.1):
@@ -35,7 +35,7 @@ Or if you want to test it with [`2.0.0-alpha.1`](https://github.com/Leaflet/Leaf
 <link rel="stylesheet" href="https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet.css">
 <script src="https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet-global-src.js"></script>
 <script>globalThis.L = globalThis.leaflet;</script>
-<script src="https://unpkg.com/leaflet-rotate@0.5.1/dist/leaflet-rotate.js"></script>
+<script src="https://unpkg.com/leaflet-rotate@0.5.2/dist/leaflet-rotate.js"></script>
 ```
 
 Now, you can enable rotation in the map options. Bearing and pitch values are in degrees:

package/dist/leaflet-rotate-src.js

@@ -831,6 +831,9 @@ var leafletRotate = (() => {
       mapProto.initialize.apply(this, arguments);
       if (this.options.rotate) {
         this.on("resize", this._updatePitchTransform, this);
+        this.on("movestart dragstart", this._startPitchPan, this);
+        this.on("move", this._updatePitchPan, this);
+        this.on("moveend", this._endPitchPan, this);
         this.on("move", this._updatePitchSky, this);
         this.setBearing(this.options.bearing);
         this.setPitch(this.options.pitch);
@@ -951,7 +954,8 @@ var leafletRotate = (() => {
     /**
      * Return the geographic bounds of the current viewport, accounting for rotation and pitch.
      * 
-     * The result is the smallest geographic bounds containing all four viewport corners.
+     * The result encloses the four corners of the visible ground rectangle. With pitch,
+     * the rectangle stops at the configured far plane, excluding the sky.
      * 
      * @returns {L.LatLngBounds} Geographic bounds visible in the map viewport.
      * 
@@ -1170,10 +1174,12 @@ var leafletRotate = (() => {
       this.fire("rotate");
     },
     /**
-     * Transform a point with a projective matrix, accepting DOMMatrix or its 2D inverse.
+     * Transform a ground-plane point with a DOMMatrix, or reverse its screen projection.
+     * Both branches divide by the homogeneous coordinate after applying the matrix.
      * 
      * @param {L.Point|number[]} point Input pixel coordinate.
-     * @param {DOMMatrix|Object} matrix Forward or inverse transformation matrix.
+     * @param {DOMMatrix|Object} matrix Forward CSS matrix or inverse homography with
+     *                                row-major coefficients `a` through `i`.
      * 
      * @returns {L.Point} Transformed pixel coordinate.
      * 
@@ -1201,6 +1207,20 @@ var leafletRotate = (() => {
         return;
       }
       const pivot = this._getPixelCenter(), size = this.getSize(), perspective = Math.max(1, size.y * 1.5), position = this._rotatePane._leaflet_pos || new L.Point(0, 0), transform = `translate3d(${pivot.x}px,${pivot.y}px,0) perspective(${perspective}px) rotateX(${this.getPitch()}deg) rotateZ(${this.getBearing()}deg) translate3d(${position.x - pivot.x}px,${position.y - pivot.y}px,0)`;
+      this._setPitchTransform(transform);
+    },
+    /**
+     * Apply the CSS transform and cache matching forward/inverse point conversions.
+     *
+     * Ground points have z = 0, so the 4x4 CSS matrix reduces to the homography
+     * [a b c; d e f; g h i]. Its inverse maps screen points back onto that plane;
+     * inverting the full 4x4 matrix at screen z = 0 would not undo perspective.
+     *
+     * @param {string} transform CSS transform list, including a serialized DOMMatrix.
+     * 
+     * @since leaflet-rotate (0.5.2)
+     */
+    _setPitchTransform(transform) {
       this._rotatePane.style.transformOrigin = "0 0";
       this._rotatePane.style.transform = transform;
       const matrix = this._pitchTransform = new DOMMatrix(transform), a = matrix.m11, b = matrix.m21, c = matrix.m41, d = matrix.m12, e = matrix.m22, f = matrix.m42, g = matrix.m14, h = matrix.m24, i = matrix.m44, determinant = a * (e * i - f * h) - b * (d * i - f * g) + c * (d * h - e * g);
@@ -1217,6 +1237,73 @@ var leafletRotate = (() => {
       };
       this._updatePitchSky();
     },
+    /**
+     * Capture a fixed projection baseline for a pitched drag or programmatic pan.
+     *
+     * `movestart` uses the viewport center; `dragstart` replaces it with the original
+     * pointer position. Store both the screen anchor and its ground-plane coordinate
+     * so subsequent frames can keep the grabbed geographic point under the pointer.
+     * Pane positions are in screen pixels and the baseline matrices stay unchanged.
+     *
+     * @param {L.Event} e Leaflet `movestart` or `dragstart` event.
+     * 
+     * @since leaflet-rotate (0.5.2)
+     */
+    _startPitchPan(e) {
+      if (!this._pitch || !this._loaded) {
+        return;
+      }
+      const draggable = this.dragging && this.dragging._draggable, anchor = e.type === "dragstart" && draggable ? (this.pointerEventToContainerPoint || this.mouseEventToContainerPoint).call(this, {
+        clientX: draggable._startPoint.x,
+        clientY: draggable._startPoint.y
+      }) : this.getSize().divideBy(2), panePos = this._getMapPanePos().clone();
+      this._pitchPan = {
+        anchor,
+        panePos,
+        lastPanePos: panePos,
+        matrix: this._pitchTransform,
+        inverse: this._pitchInverseTransform,
+        layerAnchor: this.containerPointToLayerPoint(anchor),
+        zoom: this._zoom
+      };
+    },
+    /**
+     * Translate the ground plane without moving the camera's vanishing point.
+     *
+     * For pane displacement delta, invert the displaced anchor with the baseline
+     * projection to find the required layer-space shift. Compose
+     * T(-delta) * baseline * T(shift): the left translation cancels Leaflet's outer
+     * pane movement, while the right translation moves geography before perspective.
+     * Always derive this from the baseline, not the previous frame, to avoid drift.
+     * Zoom frames are handled by Leaflet's zoom/origin updates instead.
+     * 
+     * @since leaflet-rotate (0.5.2)
+     */
+    _updatePitchPan() {
+      const pan = this._pitchPan;
+      if (!this._pitch || !pan || this._animatingZoom || this._zoom !== pan.zoom) {
+        return;
+      }
+      const panePos = this._getMapPanePos();
+      if (panePos.equals(pan.lastPanePos)) {
+        return;
+      }
+      const delta = panePos.subtract(pan.panePos), target = this._transformPitchPoint(pan.anchor.add(delta).subtract(pan.panePos), pan.inverse), shift = target.subtract(pan.layerAnchor);
+      const matrix = new DOMMatrix().translate(-delta.x, -delta.y).multiply(pan.matrix).translate(shift.x, shift.y);
+      this._setPitchTransform(matrix.toString());
+      pan.lastPanePos = panePos.clone();
+      delete this._lastCenter;
+    },
+    /**
+     * Discard the baseline only at `moveend`, after any drag inertia has completed.
+     * Keep the final transform and pixel origin: resetting the view here would
+     * reproject layers abruptly and cause a visible jump on release.
+     * 
+     * @since leaflet-rotate (0.5.2)
+     */
+    _endPitchPan() {
+      delete this._pitchPan;
+    },
     /**
      * Fill the area above the far plane (where no tiles are loaded) with a sky gradient.
      * Style it through the `.leaflet-pitch-sky` class.
@@ -1565,7 +1652,10 @@ var leafletRotate = (() => {
     //    return this.containerPointToLayerPoint(this.getSize()._divideBy(2));
     // },
     /**
-     * Return the pixel offset from the current center to the given geographic point.
+     * Return the screen-space pan offset needed to center the given geographic point.
+     * Under perspective, projecting a negated layer offset is not equivalent to
+     * negating its screen projection. Reflect the target about the layer center
+     * to match the opposite anchor displacement performed by Leaflet's `panBy`.
      * 
      * @param {L.LatLng} latlng Geographic point.
      * 
@@ -1577,6 +1667,10 @@ var leafletRotate = (() => {
       if (!this._rotate) {
         return mapProto._getCenterOffset.apply(this, arguments);
       }
+      if (this._pitch) {
+        const center = this.getSize().divideBy(2), layerCenter = this.containerPointToLayerPoint(center), opposite = layerCenter.multiplyBy(2).subtract(this.project(latlng).subtract(this._pixelOrigin));
+        return center.subtract(this.layerPointToContainerPoint(opposite));
+      }
       return this.latLngToContainerPoint(latlng)._subtract(this.getSize()._divideBy(2));
     },
     /**
@@ -1636,9 +1730,12 @@ var leafletRotate = (() => {
       return new L.Bounds(pixelCenter.subtract(halfSize), pixelCenter.add(halfSize));
     },
     /**
+     * Return the viewport center before the outer map-pane translation.
+     * Used as the bearing/pitch pivot in map-pane coordinates, not layer coordinates.
+     *
      * @since leaflet-rotate (v0.2.0)
      * 
-     * @returns {L.Point} Map pivot point in pixel coordinates.
+     * @returns {L.Point} Map pivot in map-pane pixels.
      */
     _getPixelCenter() {
       if (!this._rotate && mapProto._getPixelCenter) {
@@ -1647,6 +1744,9 @@ var leafletRotate = (() => {
       return this.getSize()._divideBy(2)._subtract(this._getMapPanePos());
     },
     /**
+     * Convert the padded visible ground rectangle to layer bounds for vector renderers.
+     * Clip its far edge before reversing perspective to avoid unbounded render areas.
+     *
      * @see src\layer\vector\Renderer::_update()
      * 
      * @param {number} padding Bounds padding as a fraction of map size.