diff --git a/cypress/integration/circle.spec.js b/cypress/integration/circle.spec.js index 8575b1f6..343a501c 100644 --- a/cypress/integration/circle.spec.js +++ b/cypress/integration/circle.spec.js @@ -336,7 +336,7 @@ describe('Draw Circle', () => { const layer = map.pm.getGeomanDrawLayers()[0]; let disableFired = false; - layer.on('pm:disable',()=>{ + layer.on('pm:disable', () => { disableFired = true; }); layer.pm.disable(); @@ -348,10 +348,12 @@ describe('Draw Circle', () => { }); }); - it('creates circles (non-resizableCircle)', () => { cy.window().then(({ map }) => { - map.pm.setGlobalOptions({ resizableCircle: false, continueDrawing: true }); + map.pm.setGlobalOptions({ + resizableCircle: false, + continueDrawing: true, + }); }); cy.toolbarButton('circle') @@ -414,10 +416,7 @@ describe('Draw Circle', () => { cy.hasCircleLayers(1); - - cy.get(mapSelector) - .rightclick(200, 200); - + cy.get(mapSelector).rightclick(200, 200); cy.hasCircleLayers(1); }); @@ -457,18 +456,17 @@ describe('Draw Circle', () => { cy.window().then(({ map }) => { let count = 0; const layer = map.pm.getGeomanDrawLayers()[0]; - layer.on('pm:vertexclick', ()=>{ + layer.on('pm:vertexclick', () => { count += 1; - if(count >= 2) { + if (count >= 2) { expect(count).to.eql(2); - setTimeout(done, 100) + setTimeout(done, 100); } - }) + }); }); cy.toolbarButton('edit').click(); cy.get(mapSelector).click(200, 200); cy.get(mapSelector).click(300, 200); - }); }); diff --git a/cypress/integration/circlemarker.spec.js b/cypress/integration/circlemarker.spec.js index 6ab98386..ed86ece5 100644 --- a/cypress/integration/circlemarker.spec.js +++ b/cypress/integration/circlemarker.spec.js @@ -116,7 +116,10 @@ describe('Draw Circle Marker', () => { it('draw a CircleMarker like a Circle', () => { cy.window().then(({ map }) => { - map.pm.setGlobalOptions({ resizeableCircleMarker: true, continueDrawing: false }); + map.pm.setGlobalOptions({ + resizeableCircleMarker: true, + continueDrawing: false, + }); }); cy.toolbarButton('circle-marker') @@ -142,7 +145,10 @@ describe('Draw Circle Marker', () => { it('enable continueDrawing #2', () => { cy.window().then(({ map }) => { - map.pm.setGlobalOptions({ continueDrawing: true, resizeableCircleMarker: true }); + map.pm.setGlobalOptions({ + continueDrawing: true, + resizeableCircleMarker: true, + }); }); cy.toolbarButton('circle-marker') @@ -523,7 +529,7 @@ describe('Draw Circle Marker', () => { const layer = map.pm.getGeomanDrawLayers()[0]; let disableFired = false; - layer.on('pm:disable',()=>{ + layer.on('pm:disable', () => { disableFired = true; }); layer.pm.disable(); @@ -543,8 +549,7 @@ describe('Draw Circle Marker', () => { cy.get(mapSelector).click(200, 200); - cy.toolbarButton('circle-marker') - .click(); + cy.toolbarButton('circle-marker').click(); cy.window().then(({ map }) => { const layer = map.pm.getGeomanDrawLayers()[0]; @@ -595,18 +600,17 @@ describe('Draw Circle Marker', () => { cy.window().then(({ map }) => { let count = 0; const layer = map.pm.getGeomanDrawLayers()[0]; - layer.on('pm:vertexclick', ()=>{ + layer.on('pm:vertexclick', () => { count += 1; - if(count >= 2) { + if (count >= 2) { expect(count).to.eql(2); - setTimeout(done, 100) + setTimeout(done, 100); } - }) + }); }); cy.toolbarButton('edit').click(); cy.get(mapSelector).click(200, 200); cy.get(mapSelector).click(300, 200); - }); }); diff --git a/cypress/integration/rectangle.spec.js b/cypress/integration/rectangle.spec.js index 9a05ed61..a855d93f 100644 --- a/cypress/integration/rectangle.spec.js +++ b/cypress/integration/rectangle.spec.js @@ -900,17 +900,30 @@ describe('Draw Rectangle', () => { cy.window().then(({ map }) => { const corners = map.pm.Draw.Rectangle._findCorners(); - expect(corners[0].equals([51.50820824957313, -0.13801574707031253])).to.eql(true); - expect(corners[1].equals([51.48897254548231, -0.10711669921875001])).to.eql(true); - expect(corners[2].equals([51.499660050014434, -0.08995056152343751])).to.eql(true); - expect(corners[3].equals([51.51889124411909, -0.12084960937500001])).to.eql(true); + expect( + corners[0].equals([51.50820824957313, -0.13801574707031253]) + ).to.eql(true); + expect( + corners[1].equals([51.48897254548231, -0.10711669921875001]) + ).to.eql(true); + expect( + corners[2].equals([51.499660050014434, -0.08995056152343751]) + ).to.eql(true); + expect( + corners[3].equals([51.51889124411909, -0.12084960937500001]) + ).to.eql(true); }); }); - it('edit correctly after a rotated rectangle is imported', ()=>{ + 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]]); + 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); }); @@ -927,21 +940,21 @@ describe('Draw Rectangle', () => { const expected = [ { - "x": 200, - "y": 120 + x: 200, + y: 120, }, { - "x": 617, - "y": 243 + x: 617, + y: 243, }, { - "x": 629, - "y": 204 + x: 629, + y: 204, }, { - "x": 211, - "y": 81 - } + x: 211, + y: 81, + }, ]; const px = layer.getLatLngs()[0].map((latlng) => { @@ -965,18 +978,17 @@ describe('Draw Rectangle', () => { cy.window().then(({ map }) => { let count = 0; const layer = map.pm.getGeomanDrawLayers()[0]; - layer.on('pm:vertexclick', ()=>{ + layer.on('pm:vertexclick', () => { count += 1; - if(count >= 2) { + if (count >= 2) { expect(count).to.eql(2); - setTimeout(done, 100) + setTimeout(done, 100); } - }) + }); }); cy.toolbarButton('edit').click(); cy.get(mapSelector).click(200, 200); cy.get(mapSelector).click(300, 300); - }); }); diff --git a/cypress/integration/rotation.spec.js b/cypress/integration/rotation.spec.js index b7dc438f..54f1a898 100644 --- a/cypress/integration/rotation.spec.js +++ b/cypress/integration/rotation.spec.js @@ -349,7 +349,6 @@ describe('Rotation', () => { layer.pm.setRotationCenter(origin); }); - cy.window().then(({ map }) => { const layer = map.pm.getGeomanDrawLayers()[0]; const marker1 = layer.pm._rotatePoly.pm._markers[0][0]; @@ -437,10 +436,15 @@ describe('Rotation', () => { }); }); - it('set the angle correctly after rotating a new imported rotated rectangle', ()=>{ + 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]]); + 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); }); @@ -462,20 +466,20 @@ describe('Rotation', () => { const expected = [ { - 'x': 319, - 'y': 267, + x: 319, + y: 267, }, { - 'x': 319, - 'y': 161, + x: 319, + y: 161, }, { - 'x': 620, - 'y': 159, + x: 620, + y: 159, }, { - 'x': 620, - 'y': 265, + x: 620, + y: 265, }, ]; @@ -486,5 +490,5 @@ describe('Rotation', () => { expect(px).to.eql(expected); }); - }) + }); }); diff --git a/demo/demo-canvas.js b/demo/demo-canvas.js index a2def3a2..ff8d0206 100644 --- a/demo/demo-canvas.js +++ b/demo/demo-canvas.js @@ -1,30 +1,21 @@ /* eslint-disable no-console */ -const tiles1 = L.tileLayer( - 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - { - maxZoom: 19, - attribution: - '© OpenStreetMap contributors', - } -); - -const tiles2 = L.tileLayer( - 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - { - maxZoom: 19, - attribution: - '© OpenStreetMap contributors', - } -); - -const tiles3 = L.tileLayer( - 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - { - maxZoom: 19, - attribution: - '© OpenStreetMap contributors', - } -); +const tiles1 = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: + '© OpenStreetMap contributors', +}); + +const tiles2 = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: + '© OpenStreetMap contributors', +}); + +const tiles3 = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: + '© OpenStreetMap contributors', +}); const map2 = L.map('example2', { preferCanvas: true }) .setView([51.505, -0.09], 13) diff --git a/demo/demo.js b/demo/demo.js index 78357497..04c45565 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -1,30 +1,21 @@ /* eslint-disable no-console */ -const tiles1 = L.tileLayer( - 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - { - maxZoom: 19, - attribution: - '© OpenStreetMap contributors', - } -); +const tiles1 = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: + '© OpenStreetMap contributors', +}); -const tiles2 = L.tileLayer( - 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - { - maxZoom: 19, - attribution: - '© OpenStreetMap contributors', - } -); +const tiles2 = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: + '© OpenStreetMap contributors', +}); -const tiles3 = L.tileLayer( - 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - { - maxZoom: 19, - attribution: - '© OpenStreetMap contributors', - } -); +const tiles3 = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: + '© OpenStreetMap contributors', +}); const map2 = L.map('example2').setView([51.505, -0.09], 13).addLayer(tiles1); const map3 = L.map('example3').setView([51.505, -0.09], 13).addLayer(tiles2); diff --git a/src/js/Draw/L.PM.Draw.Circle.js b/src/js/Draw/L.PM.Draw.Circle.js index d6d7c0bb..9020cbb1 100644 --- a/src/js/Draw/L.PM.Draw.Circle.js +++ b/src/js/Draw/L.PM.Draw.Circle.js @@ -11,17 +11,17 @@ Draw.Circle = Draw.CircleMarker.extend({ this._editableOption = 'resizableCircle'; this._defaultRadius = 100; }, - _extendingEnable(){}, - _extendingDisable(){}, - _extendingCreateMarker(){}, - isRelevantMarker(){}, - _getMinDistanceInMeter(){ - return this.options[this._minRadiusOption] + _extendingEnable() {}, + _extendingDisable() {}, + _extendingCreateMarker() {}, + isRelevantMarker() {}, + _getMinDistanceInMeter() { + return this.options[this._minRadiusOption]; }, - _getMaxDistanceInMeter(){ - return this.options[this._maxRadiusOption] + _getMaxDistanceInMeter() { + return this.options[this._maxRadiusOption]; }, - _distanceCalculation(A, B){ + _distanceCalculation(A, B) { return this._map.distance(A, B); - } + }, }); diff --git a/src/js/Draw/L.PM.Draw.CircleMarker.js b/src/js/Draw/L.PM.Draw.CircleMarker.js index 68dcc0ad..e336d2a2 100644 --- a/src/js/Draw/L.PM.Draw.CircleMarker.js +++ b/src/js/Draw/L.PM.Draw.CircleMarker.js @@ -19,7 +19,7 @@ Draw.CircleMarker = Draw.extend({ // instances of L.PM.Draw. So a dev could set drawing style one time as some kind of config L.Util.setOptions(this, options); // TODO: remove with next major release - if(this.options.editable){ + if (this.options.editable) { this.options.resizeableCircleMarker = this.options.editable; delete this.options.editable; } @@ -46,7 +46,10 @@ Draw.CircleMarker = Draw.extend({ this._layerGroup.addTo(this._map); // this is the circle we want to draw - this._layer = new this._BaseCircleClass(this._map.getCenter(), templineStyle); + this._layer = new this._BaseCircleClass( + this._map.getCenter(), + templineStyle + ); this._setPane(this._layer, 'layerPane'); this._layer._pmTempLayer = true; @@ -98,10 +101,10 @@ Draw.CircleMarker = Draw.extend({ this._map.on('click', this._createMarker, this); // this is the hintmarker on the mouse cursor - this._hintMarker = new this._BaseCircleClass( - this._map.getCenter(), - {radius: this._defaultRadius, ...this.options.templineStyle} - ); + this._hintMarker = new this._BaseCircleClass(this._map.getCenter(), { + radius: this._defaultRadius, + ...this.options.templineStyle, + }); this._setPane(this._hintMarker, 'layerPane'); this._hintMarker._pmTempLayer = true; this._hintMarker.addTo(this._map); @@ -135,7 +138,7 @@ Draw.CircleMarker = Draw.extend({ this._fireDrawStart(); this._setGlobalDrawMode(); }, - _extendingEnable(){ + _extendingEnable() { if (!this.options[this._editableOption] && this.options.markerEditable) { // enable edit mode for existing markers this._map.eachLayer((layer) => { @@ -160,7 +163,6 @@ Draw.CircleMarker = Draw.extend({ // disable when drawing like a Circle if (this.options[this._editableOption]) { - // unbind listeners this._map.off('click', this._finishShape, this); this._map.off('click', this._placeCenterMarker, this); @@ -192,7 +194,7 @@ Draw.CircleMarker = Draw.extend({ this._fireDrawEnd(); this._setGlobalDrawMode(); }, - _extendingDisable(){ + _extendingDisable() { // disable dragging and removing for all markers this._map.eachLayer((layer) => { if (this.isRelevantMarker(layer)) { @@ -328,7 +330,10 @@ Draw.CircleMarker = Draw.extend({ const latlng = this._hintMarker.getLatLng(); // create marker - const marker = new this._BaseCircleClass(latlng, {radius: this._defaultRadius, ...this.options.pathOptions}); + const marker = new this._BaseCircleClass(latlng, { + radius: this._defaultRadius, + ...this.options.pathOptions, + }); this._setPane(marker, 'layerPane'); this._finishLayer(marker); // add marker to the map @@ -345,7 +350,7 @@ Draw.CircleMarker = Draw.extend({ this.disable(); } }, - _extendingCreateMarker(marker){ + _extendingCreateMarker(marker) { if (marker.pm && this.options.markerEditable) { // enable editing for the marker marker.pm.enable(); @@ -443,11 +448,19 @@ Draw.CircleMarker = Draw.extend({ } return secondLatLng; }, - _getMinDistanceInMeter(){ - return L.PM.Utils.pxRadiusToMeterRadius(this.options[this._minRadiusOption], this._map, this._centerMarker.getLatLng()) + _getMinDistanceInMeter() { + return L.PM.Utils.pxRadiusToMeterRadius( + this.options[this._minRadiusOption], + this._map, + this._centerMarker.getLatLng() + ); }, - _getMaxDistanceInMeter(){ - return L.PM.Utils.pxRadiusToMeterRadius(this.options[this._maxRadiusOption], this._map, this._centerMarker.getLatLng()) + _getMaxDistanceInMeter() { + return L.PM.Utils.pxRadiusToMeterRadius( + this.options[this._maxRadiusOption], + this._map, + this._centerMarker.getLatLng() + ); }, _handleHintMarkerSnapping() { if (this.options[this._editableOption]) { @@ -483,9 +496,7 @@ Draw.CircleMarker = Draw.extend({ this._layer?.setStyle(templineStyle); this._hintline?.setStyle(this.options.hintlineStyle); }, - _distanceCalculation(A, B){ - return this._map - .project(A) - .distanceTo(this._map.project(B)); - } + _distanceCalculation(A, B) { + return this._map.project(A).distanceTo(this._map.project(B)); + }, }); diff --git a/src/js/Draw/L.PM.Draw.Rectangle.js b/src/js/Draw/L.PM.Draw.Rectangle.js index d35d24ac..d800c53f 100644 --- a/src/js/Draw/L.PM.Draw.Rectangle.js +++ b/src/js/Draw/L.PM.Draw.Rectangle.js @@ -248,11 +248,11 @@ Draw.Rectangle = Draw.extend({ _findCorners() { const latlngs = this._layer.getLatLngs()[0]; return L.PM.Utils._getRotatedRectangle( - latlngs[0], - latlngs[2], + latlngs[0], + latlngs[2], this.options.rectangleAngle || 0, - this._map - ); + this._map + ); }, _finishShape(e) { // assign the coordinate of the click to the hintMarker, that's necessary for diff --git a/src/js/Draw/L.PM.Draw.js b/src/js/Draw/L.PM.Draw.js index 1d97306e..d8052352 100644 --- a/src/js/Draw/L.PM.Draw.js +++ b/src/js/Draw/L.PM.Draw.js @@ -33,7 +33,7 @@ const Draw = L.Class.extend({ continueDrawing: false, snapSegment: true, requireSnapToFinish: false, - rectangleAngle: 0 + rectangleAngle: 0, }, setOptions(options) { L.Util.setOptions(this, options); diff --git a/src/js/Edit/L.PM.Edit.Circle.js b/src/js/Edit/L.PM.Edit.Circle.js index aaba68e0..e68fc704 100644 --- a/src/js/Edit/L.PM.Edit.Circle.js +++ b/src/js/Edit/L.PM.Edit.Circle.js @@ -16,8 +16,8 @@ Edit.Circle = Edit.CircleMarker.extend({ // TODO: this can be removed after the default options of CircleMarker.enable are removed L.PM.Edit.CircleMarker.prototype.enable.call(this, options || {}); }, - _extendingEnable(){}, - _extendingDisable(){ + _extendingEnable() {}, + _extendingDisable() { this._layer.off('remove', this.disable, this); // remove draggable class @@ -26,11 +26,11 @@ Edit.Circle = Edit.CircleMarker.extend({ : this._layer._renderer._container; L.DomUtil.removeClass(el, 'leaflet-pm-draggable'); }, - _extendingApplyOptions(){}, - _syncMarkers(){}, - _removeMarker(){}, - _onDragStart(){}, - _extedingMarkerDragEnd(){}, + _extendingApplyOptions() {}, + _syncMarkers() {}, + _removeMarker() {}, + _onDragStart() {}, + _extedingMarkerDragEnd() {}, _updateHiddenPolyCircle() { const crsSimple = this._map && this._map.pm._isCRSSimple(); if (this._hiddenPolyCircle) { @@ -49,14 +49,14 @@ Edit.Circle = Edit.CircleMarker.extend({ this._hiddenPolyCircle._parentCopy = this._layer; } }, - _distanceCalculation(A, B){ + _distanceCalculation(A, B) { return this._map.distance(A, B); }, - _getMinDistanceInMeter(){ - return this.options[this._minRadiusOption] + _getMinDistanceInMeter() { + return this.options[this._minRadiusOption]; }, - _getMaxDistanceInMeter(){ - return this.options[this._maxRadiusOption] + _getMaxDistanceInMeter() { + return this.options[this._maxRadiusOption]; }, _onVertexClick(e) { const vertex = e.target; diff --git a/src/js/Edit/L.PM.Edit.CircleMarker.js b/src/js/Edit/L.PM.Edit.CircleMarker.js index 2ae1a0da..78eff834 100644 --- a/src/js/Edit/L.PM.Edit.CircleMarker.js +++ b/src/js/Edit/L.PM.Edit.CircleMarker.js @@ -18,7 +18,7 @@ Edit.CircleMarker = Edit.extend({ enable(options = { draggable: true, snappable: true }) { L.Util.setOptions(this, options); // TODO: remove with next major release - if(this.options.editable){ + if (this.options.editable) { this.options.resizeableCircleMarker = this.options.editable; delete this.options.editable; } @@ -52,7 +52,7 @@ Edit.CircleMarker = Edit.extend({ this._fireEnable(); }, - _extendingEnable(){ + _extendingEnable() { // if CircleMarker is dragged while draw mode this._layer.on('pm:dragstart', this._onDragStart, this); this._layer.on('pm:drag', this._onMarkerDrag, this); @@ -79,7 +79,7 @@ Edit.CircleMarker = Edit.extend({ } // disable dragging of non-editable circle - if(this.layerDragEnabled()) { + if (this.layerDragEnabled()) { this.disableLayerDrag(); } @@ -89,7 +89,7 @@ Edit.CircleMarker = Edit.extend({ } this._map.off('move', this._syncMarkers, this); this._outerMarker.off('drag', this._handleOuterMarkerSnapping, this); - }else{ + } else { this._map.off('move', this._updateHiddenPolyCircle, this); } @@ -105,7 +105,7 @@ Edit.CircleMarker = Edit.extend({ this._enabled = false; }, - _extendingDisable(){ + _extendingDisable() { this._layer.off('contextmenu', this._removeMarker, this); }, enabled() { @@ -119,7 +119,7 @@ Edit.CircleMarker = Edit.extend({ } }, applyOptions() { - if (this.options[this._editableOption]){ + if (this.options[this._editableOption]) { this._initMarkers(); this._map.on('move', this._syncMarkers, this); @@ -135,9 +135,8 @@ Edit.CircleMarker = Edit.extend({ } else { this._disableSnapping(); } - } else { - if(this.options.draggable) { + if (this.options.draggable) { this.enableLayerDrag(); } // only update the circle border poly @@ -152,7 +151,7 @@ Edit.CircleMarker = Edit.extend({ this._extendingApplyOptions(); }, - _extendingApplyOptions(){ + _extendingApplyOptions() { // enable removal for the marker if (!this.options.preventMarkerRemoval) { this._layer.on('contextmenu', this._removeMarker, this); @@ -338,7 +337,7 @@ Edit.CircleMarker = Edit.extend({ } this._fireMarkerDragEnd(e); }, - _extedingMarkerDragEnd(){ + _extedingMarkerDragEnd() { this._map.pm.Draw.CircleMarker._layerIsDragging = false; }, // _initSnappableMarkers when option editable is not true @@ -444,16 +443,22 @@ Edit.CircleMarker = Edit.extend({ // calculate the new latlng of marker if radius is out of min/max this._outerMarker.setLatLng(this._getNewDestinationOfOuterMarker()); }, - _distanceCalculation(A, B){ - return this._map - .project(A) - .distanceTo(this._map.project(B)); - }, - _getMinDistanceInMeter(latlng){ - return L.PM.Utils.pxRadiusToMeterRadius(this.options[this._minRadiusOption], this._map, latlng) - }, - _getMaxDistanceInMeter(latlng){ - return L.PM.Utils.pxRadiusToMeterRadius(this.options[this._maxRadiusOption], this._map, latlng) + _distanceCalculation(A, B) { + return this._map.project(A).distanceTo(this._map.project(B)); + }, + _getMinDistanceInMeter(latlng) { + return L.PM.Utils.pxRadiusToMeterRadius( + this.options[this._minRadiusOption], + this._map, + latlng + ); + }, + _getMaxDistanceInMeter(latlng) { + return L.PM.Utils.pxRadiusToMeterRadius( + this.options[this._maxRadiusOption], + this._map, + latlng + ); }, _onVertexClick(e) { const vertex = e.target; diff --git a/src/js/Edit/L.PM.Edit.Rectangle.js b/src/js/Edit/L.PM.Edit.Rectangle.js index fedc1a4a..4a1d3e2e 100644 --- a/src/js/Edit/L.PM.Edit.Rectangle.js +++ b/src/js/Edit/L.PM.Edit.Rectangle.js @@ -1,7 +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'; +import { calcAngle } from '../helpers'; Edit.Rectangle = Edit.Polygon.extend({ _shape: 'Rectangle', @@ -200,8 +200,14 @@ 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) + 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]; diff --git a/src/js/L.PM.Map.js b/src/js/L.PM.Map.js index 554cfb4e..4566f2d9 100644 --- a/src/js/L.PM.Map.js +++ b/src/js/L.PM.Map.js @@ -101,7 +101,7 @@ const Map = L.Class.extend({ const options = merge(this.globalOptions, o); // TODO: remove with next major release - if(options.editable){ + if (options.editable) { options.resizeableCircleMarker = options.editable; delete options.editable; } @@ -110,7 +110,8 @@ const Map = L.Class.extend({ let reenableCircleMarker = false; if ( this.map.pm.Draw.CircleMarker.enabled() && - !!this.map.pm.Draw.CircleMarker.options.resizeableCircleMarker !== !!options.resizeableCircleMarker + !!this.map.pm.Draw.CircleMarker.options.resizeableCircleMarker !== + !!options.resizeableCircleMarker ) { this.map.pm.Draw.CircleMarker.disable(); reenableCircleMarker = true; @@ -119,7 +120,8 @@ const Map = L.Class.extend({ let reenableCircle = false; if ( this.map.pm.Draw.Circle.enabled() && - !!this.map.pm.Draw.Circle.options.resizableCircle !== !!options.resizableCircle + !!this.map.pm.Draw.Circle.options.resizableCircle !== + !!options.resizableCircle ) { this.map.pm.Draw.Circle.disable(); reenableCircle = true; diff --git a/src/js/Mixins/Dragging.js b/src/js/Mixins/Dragging.js index 2e088c27..630477a8 100644 --- a/src/js/Mixins/Dragging.js +++ b/src/js/Mixins/Dragging.js @@ -195,12 +195,9 @@ const DragMixin = { } // we need to disable snapping for CircleMarker because they are snapping because of the check in onLayerDrag -> if(_snapped) - if ( - this._layer instanceof L.CircleMarker - ) { - + if (this._layer instanceof L.CircleMarker) { let _editableOption = 'resizeableCircleMarker'; - if(this._layer instanceof L.Circle){ + if (this._layer instanceof L.Circle) { _editableOption = 'resizableCircle'; } @@ -371,8 +368,10 @@ const DragMixin = { }); if ( - (this._layer instanceof L.Circle && this._layer.options.resizableCircle) || - (this._layer instanceof L.CircleMarker && this._layer.options.resizeableCircleMarker) + (this._layer instanceof L.Circle && + this._layer.options.resizableCircle) || + (this._layer instanceof L.CircleMarker && + this._layer.options.resizeableCircleMarker) ) { // create the new coordinates array const newCoords = moveCoords([this._layer.getLatLng()]); diff --git a/src/js/Mixins/Rotating.js b/src/js/Mixins/Rotating.js index ca007fa1..32e087ec 100644 --- a/src/js/Mixins/Rotating.js +++ b/src/js/Mixins/Rotating.js @@ -154,8 +154,14 @@ 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) + 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 @@ -285,7 +291,7 @@ const RotateMixin = { setRotationCenter(center) { this._rotationCenter = center; - if(this._rotatePoly){ + if (this._rotatePoly) { this._rotatePoly.pm.setRotationCenter(center); } }, diff --git a/src/js/helpers/index.js b/src/js/helpers/index.js index f4a533ad..107b9b42 100644 --- a/src/js/helpers/index.js +++ b/src/js/helpers/index.js @@ -153,7 +153,7 @@ function destination(latlng, heading, distance) { heading = (heading + 360) % 360; const rad = Math.PI / 180; const radInv = 180 / Math.PI; - const R = L.CRS.Earth.R; // approximation of Earth's radius + const { R } = L.CRS.Earth; // approximation of Earth's radius const lon1 = latlng.lng * rad; const lat1 = latlng.lat * rad; const rheading = heading * rad;