Auto detect initial angle of Rectangle (#1370) (patch)

* Auto detect init angle of Rectangle * Auto detect init angle of Rectangle * Check if altKey property is available
geoman-io · Nov 21, 2023 · f3f9343 · f3f9343
1 parent e714545
commit f3f9343
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 8 deletions.
diff --git a/cypress/integration/rectangle.spec.js b/cypress/integration/rectangle.spec.js
@@ -906,4 +906,50 @@ describe('Draw Rectangle', () => {
       expect(corners[3].equals([51.51889124411909, -0.12084960937500001])).to.eql(true);
     });
   });
+
+  it('edit correctly after a rotated rectangle is imported', ()=>{
+    cy.window().then(({ map, L }) => {
+      const coords = JSON.parse('{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.122532,51.507986],[-0.117474,51.518864],[-0.06784,51.509926],[-0.072898,51.499046],[-0.122532,51.507986]]]}}');
+      const rectangle = L.rectangle([[0,0],[0,0]]);
+      rectangle.setLatLngs(L.geoJSON(coords).getLayers()[0].getLatLngs());
+      rectangle.addTo(map);
+    });
+
+    cy.toolbarButton('edit').click();
+
+    cy.window().then(({ map }) => {
+      const layer = map.pm.getGeomanLayers()[0];
+      const marker1 = layer.pm._markers[0][0];
+      marker1.fire('dragstart', { target: marker1 });
+      marker1.setLatLng(map.containerPointToLatLng([200, 120]));
+      marker1.fire('drag', { target: marker1 });
+      marker1.fire('dragend', { target: marker1 });
+
+      const expected = [
+        {
+          "x": 200,
+          "y": 120
+        },
+        {
+          "x": 617,
+          "y": 243
+        },
+        {
+          "x": 629,
+          "y": 204
+        },
+        {
+          "x": 211,
+          "y": 81
+        }
+      ];
+
+      const px = layer.getLatLngs()[0].map((latlng) => {
+        const point = map.latLngToContainerPoint(latlng);
+        return { x: point.x, y: point.y };
+      });
+
+      expect(px).to.eql(expected);
+    });
+  });
 });
diff --git a/cypress/integration/rotation.spec.js b/cypress/integration/rotation.spec.js
@@ -436,4 +436,55 @@ describe('Rotation', () => {
       expect(map.pm.getGeomanLayers().length).to.eq(2);
     });
   });
+
+  it('set the angle correctly after rotating a new imported rotated rectangle', ()=>{
+    cy.window().then(({ map, L }) => {
+      const coords = JSON.parse('{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.122532,51.507986],[-0.117474,51.518864],[-0.06784,51.509926],[-0.072898,51.499046],[-0.122532,51.507986]]]}}');
+      const rectangle = L.rectangle([[0,0],[0,0]]);
+      rectangle.setLatLngs(L.geoJSON(coords).getLayers()[0].getLatLngs());
+      rectangle.addTo(map);
+    });
+
+    cy.toolbarButton('rotate').click();
+
+    cy.window().then(({ map }) => {
+      const layer = map.pm.getGeomanLayers()[0];
+      layer.pm.enableRotate();
+      const marker1 = layer.pm._rotatePoly.pm._markers[0][0];
+      marker1.fire('dragstart', { target: marker1 });
+      marker1.setLatLng(map.containerPointToLatLng([200, 120]));
+      marker1.fire('drag', { target: marker1 });
+      marker1.fire('dragend', { target: marker1 });
+      expect(Math.ceil(layer.pm.getAngle())).to.eq(39);
+
+      layer.pm.rotateLayerToAngle(0);
+      expect(Math.ceil(layer.pm.getAngle())).to.eq(0);
+
+      const expected = [
+        {
+          'x': 319,
+          'y': 267,
+        },
+        {
+          'x': 319,
+          'y': 161,
+        },
+        {
+          'x': 620,
+          'y': 159,
+        },
+        {
+          'x': 620,
+          'y': 265,
+        },
+      ];
+
+      const px = layer.getLatLngs()[0].map((latlng) => {
+        const point = map.latLngToContainerPoint(latlng);
+        return { x: point.x, y: point.y };
+      });
+
+      expect(px).to.eql(expected);
+    });
+  })
 });
diff --git a/src/js/Edit/L.PM.Edit.Rectangle.js b/src/js/Edit/L.PM.Edit.Rectangle.js
@@ -1,6 +1,7 @@
 // Corner detection based on Leaflet Draw's Edit.Rectangle.js Class:
 // https://github.com/Leaflet/Leaflet.draw/blob/master/src/edit/handler/Edit.Rectangle.js
 import Edit from './L.PM.Edit';
+import {calcAngle} from '../helpers';
 
 Edit.Rectangle = Edit.Polygon.extend({
   _shape: 'Rectangle',
@@ -150,7 +151,7 @@ Edit.Rectangle = Edit.Polygon.extend({
     const corners = L.PM.Utils._getRotatedRectangle(
       movedMarker.getLatLng(),
       movedMarker._oppositeCornerLatLng,
-      this._angle || 0,
+      this.getAngle(),
       this._map
     );
     this._layer.setLatLngs(corners);
@@ -197,12 +198,16 @@ Edit.Rectangle = Edit.Polygon.extend({
   // finds the 4 corners of the current bounding box
   // returns array of 4 LatLng objects in this order: Northwest corner, Northeast corner, Southeast corner, Southwest corner
   _findCorners() {
+    if(this._angle === undefined){
+      this.setInitAngle(calcAngle(this._map, this._layer.getLatLngs()[0][0],this._layer.getLatLngs()[0][1]) || 0)
+    }
+
     const latlngs = this._layer.getLatLngs()[0];
     return L.PM.Utils._getRotatedRectangle(
       latlngs[0],
       latlngs[2],
-      this._angle || 0,
-      this._map
+      this.getAngle(),
+      this._map || this
     );
   },
 });
diff --git a/src/js/Mixins/Rotating.js b/src/js/Mixins/Rotating.js
@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { _convertLatLngs, _toPoint } from '../helpers/ModeHelper';
-import { copyLatLngs } from '../helpers';
+import { calcAngle, copyLatLngs } from '../helpers';
 
 /**
  * We create a temporary polygon with the same latlngs as the layer that we want to rotate.
@@ -154,6 +154,10 @@ const RotateMixin = {
       this.disableRotate();
     }
 
+    if(this._layer instanceof L.Rectangle && this._angle === undefined){
+        this.setInitAngle(calcAngle(this._layer._map, this._layer.getLatLngs()[0][0],this._layer.getLatLngs()[0][1]) || 0)
+    }
+
     // We create an hidden polygon. We set pmIgnore to false, so that the `pm` property will be always create, also if OptIn == true
     const options = {
       fill: false,

diff --git a/src/js/Mixins/Snapping.js b/src/js/Mixins/Snapping.js
@@ -77,7 +77,7 @@ const SnapMixin = {
 
     // if snapping is disabled via holding ALT during drag, stop right here
     // we need to check for the altKey on the move event, because keydown event is to slow ...
-    if (e.originalEvent.altKey || this._map?.pm?.Keyboard.isAltKeyPressed()) {
+    if (e?.originalEvent?.altKey || this._map?.pm?.Keyboard.isAltKeyPressed()) {
       return false;
     }
 

diff --git a/src/js/helpers/index.js b/src/js/helpers/index.js
@@ -179,8 +179,7 @@ function destination(latlng, heading, distance) {
   return L.latLng([lat2 * radInv, lon2]);
 }
 /* Copied from L.GeometryUtil */
-// TODO: rename this function to calcAngle
-function angle(map, latlngA, latlngB) {
+export function calcAngle(map, latlngA, latlngB) {
   const pointA = map.latLngToContainerPoint(latlngA);
   const pointB = map.latLngToContainerPoint(latlngB);
   let angleDeg =
@@ -190,7 +189,7 @@ function angle(map, latlngA, latlngB) {
 }
 
 export function destinationOnLine(map, latlngA, latlngB, distance) {
-  const angleDeg = angle(map, latlngA, latlngB);
+  const angleDeg = calcAngle(map, latlngA, latlngB);
   return destination(latlngA, angleDeg, distance);
 }