From 15770cacd5beaefbcde95465fdd10e6086740d81 Mon Sep 17 00:00:00 2001 From: falke-design Date: Thu, 20 Aug 2020 21:14:42 +0200 Subject: [PATCH 1/4] Fix intersection snap --- src/js/Draw/L.PM.Draw.Line.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/Draw/L.PM.Draw.Line.js b/src/js/Draw/L.PM.Draw.Line.js index 83834877..e655ec81 100644 --- a/src/js/Draw/L.PM.Draw.Line.js +++ b/src/js/Draw/L.PM.Draw.Line.js @@ -183,7 +183,7 @@ Draw.Line = Draw.extend({ // if self-intersection is forbidden, handle it if (!this.options.allowSelfIntersection) { - this._handleSelfIntersection(true, e.latlng); + this._handleSelfIntersection(true, this._hintMarker.getLatLng()); } }, _handleSelfIntersection(addVertex, latlng) { From a20f4cc706319d8065848ab74aad0fbb6e7450bf Mon Sep 17 00:00:00 2001 From: falke-design Date: Fri, 21 Aug 2020 12:25:23 +0200 Subject: [PATCH 2/4] Add self snapping polyline & polygon --- src/js/Draw/L.PM.Draw.Line.js | 26 +++++++++++++++++--------- src/js/Draw/L.PM.Draw.Polygon.js | 15 +++++++++++---- 2 files changed, 28 insertions(+), 13 deletions(-) diff --git a/src/js/Draw/L.PM.Draw.Line.js b/src/js/Draw/L.PM.Draw.Line.js index e655ec81..1dd935bd 100644 --- a/src/js/Draw/L.PM.Draw.Line.js +++ b/src/js/Draw/L.PM.Draw.Line.js @@ -247,15 +247,6 @@ Draw.Line = Draw.extend({ this._syncHintLine(); }, _createVertex(e) { - // don't create a vertex if we have a selfIntersection and it is not allowed - if (!this.options.allowSelfIntersection) { - this._handleSelfIntersection(true, e.latlng); - - if (this._doesSelfIntersect) { - return; - } - } - // assign the coordinate of the click to the hintMarker, that's necessary for // mobile where the marker can't follow a cursor if (!this._hintMarker._snapped) { @@ -265,6 +256,15 @@ Draw.Line = Draw.extend({ // get coordinate for new vertex by hintMarker (cursor marker) const latlng = this._hintMarker.getLatLng(); + // don't create a vertex if we have a selfIntersection and it is not allowed + if (!this.options.allowSelfIntersection) { + this._handleSelfIntersection(true, latlng); + + if (this._doesSelfIntersect) { + return; + } + } + // check if the first and this vertex have the same latlng if (latlng.equals(this._layer.getLatLngs()[0])) { // yes? finish the polygon @@ -351,6 +351,14 @@ Draw.Line = Draw.extend({ if (second) { this._hintMarker.setTooltipContent(getTranslation('tooltips.finishLine')); + // adding layer to the snapping list after a segment is created (two markers needed) + this._otherSnapLayers.push(this._layer); + } + + this._otherSnapLayers.push(marker); + + if (this.options.snappable) { + this._cleanupSnapping(); } return marker; diff --git a/src/js/Draw/L.PM.Draw.Polygon.js b/src/js/Draw/L.PM.Draw.Polygon.js index 2e4840cd..faddf44a 100644 --- a/src/js/Draw/L.PM.Draw.Polygon.js +++ b/src/js/Draw/L.PM.Draw.Polygon.js @@ -71,15 +71,22 @@ Draw.Polygon = Draw.Line.extend({ // add the first vertex to "other snapping layers" so the polygon is easier to finish this._tempSnapLayerIndex = this._otherSnapLayers.push(marker) - 1; - - if (this.options.snappable) { - this._cleanupSnapping(); - } } else { // add a click event w/ no handler to the marker // event won't bubble so prevents creation of identical markers in same polygon // fixes issue where double click during poly creation when allowSelfIntersection: false caused it to break marker.on('click', () => (1)); + this._otherSnapLayers.push(marker); + } + + const second = this._layer.getLatLngs().length === 2; + if (second) { + // adding layer to the snapping list after a segment is created (two markers needed) + this._otherSnapLayers.push(this._layer); + } + + if (this.options.snappable) { + this._cleanupSnapping(); } // handle tooltip text From 22ae40f92efbab18f3a7bea4b826cf9d868b4512 Mon Sep 17 00:00:00 2001 From: falke-design Date: Fri, 21 Aug 2020 12:41:04 +0200 Subject: [PATCH 3/4] Fixed bug with debuglines when "removeLastVertex" is called --- src/js/Draw/L.PM.Draw.Line.js | 10 ++++++++++ src/js/Mixins/Snapping.js | 5 ++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/js/Draw/L.PM.Draw.Line.js b/src/js/Draw/L.PM.Draw.Line.js index 1dd935bd..25cac4ae 100644 --- a/src/js/Draw/L.PM.Draw.Line.js +++ b/src/js/Draw/L.PM.Draw.Line.js @@ -240,11 +240,21 @@ Draw.Line = Draw.extend({ // remove that marker this._layerGroup.removeLayer(marker); + // remove the marker from the snapping list + const idx = this._otherSnapLayers.indexOf(marker); + if(idx > -1){ + this._otherSnapLayers.splice(idx,1); + } + // update layer with new coords this._layer.setLatLngs(coords); // sync the hintline again this._syncHintLine(); + + if (this.options.snappable) { + this._cleanupSnapping(); + } }, _createVertex(e) { // assign the coordinate of the click to the hintMarker, that's necessary for diff --git a/src/js/Mixins/Snapping.js b/src/js/Mixins/Snapping.js index f50f064f..cd2d00d6 100644 --- a/src/js/Mixins/Snapping.js +++ b/src/js/Mixins/Snapping.js @@ -243,7 +243,7 @@ const SnapMixin = { } // uncomment 👇 this line to show helper lines for debugging - // debugLine.addTo(map); + debugLine.addTo(map); } }); @@ -281,6 +281,9 @@ const SnapMixin = { const results = this._calcLayerDistances(latlng, layer); // show indicator lines, it's for debugging + if(!this.debugIndicatorLines[index] || !(this.debugIndicatorLines[index] instanceof L.Polyline)){ + this.debugIndicatorLines[index] = L.polyline([], { color: 'red', pmIgnore: true }); + } this.debugIndicatorLines[index].setLatLngs([latlng, results.latlng]); // save the info if it doesn't exist or if the distance is smaller than the previous one From d4769cc75ca9e6ee5a124357632757707b862060 Mon Sep 17 00:00:00 2001 From: falke-design Date: Fri, 21 Aug 2020 13:04:35 +0200 Subject: [PATCH 4/4] Fixed tests --- cypress/integration/polygon.spec.js | 2 +- cypress/integration/toolbar.spec.js | 7 ++++--- src/js/Draw/L.PM.Draw.Line.js | 5 +++++ src/js/Mixins/Snapping.js | 2 +- 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/cypress/integration/polygon.spec.js b/cypress/integration/polygon.spec.js index 611c5aeb..0c62ddf3 100644 --- a/cypress/integration/polygon.spec.js +++ b/cypress/integration/polygon.spec.js @@ -486,7 +486,7 @@ describe('Draw & Edit Poly', () => { .click(450, 100) .click(450, 150) .click(400, 150) - .click(390, 140) + .click(390, 120) .click(390, 100) .click(450, 100); diff --git a/cypress/integration/toolbar.spec.js b/cypress/integration/toolbar.spec.js index a4aea889..7fd0b7fc 100644 --- a/cypress/integration/toolbar.spec.js +++ b/cypress/integration/toolbar.spec.js @@ -219,7 +219,7 @@ describe('Testing the Toolbar', () => { }); - it('Custom Controls - new draw instance', () => { + it.only('Custom Controls - new draw instance', () => { cy.get('.leaflet-pm-toolbar') .parent('.leaflet-top.leaflet-left') .should('exist'); @@ -262,6 +262,7 @@ describe('Testing the Toolbar', () => { cy.window().then(({map, L}) => { map.pm.enableDraw('PolygonCopy'); map.on('pm:create', (e) => { + console.log(e); e.layer.on('click', (l) => testlayer = l.target) }) }); @@ -271,12 +272,12 @@ describe('Testing the Toolbar', () => { .click(450, 100) .click(450, 150) .click(400, 150) - .click(390, 140) + .click(390, 120) .click(390, 100) .click(450, 100); - cy.get(mapSelector).click(390, 140).then(() => { + cy.get(mapSelector).click(410, 140).then(() => { console.log(testlayer); expect(testlayer.options.color).to.equal("red"); }) diff --git a/src/js/Draw/L.PM.Draw.Line.js b/src/js/Draw/L.PM.Draw.Line.js index 25cac4ae..e518c350 100644 --- a/src/js/Draw/L.PM.Draw.Line.js +++ b/src/js/Draw/L.PM.Draw.Line.js @@ -286,6 +286,11 @@ Draw.Line = Draw.extend({ return; } + // when last latlng is equal to the current one -> don't create a new point. Can happen while snapping + if(this._layer.getLatLngs().length > 0 && latlng.equals(this._layer.getLatLngs().slice(-1)[0])){ + return; + } + // is this the first point? const first = this._layer.getLatLngs().length === 0; diff --git a/src/js/Mixins/Snapping.js b/src/js/Mixins/Snapping.js index cd2d00d6..ea95ce88 100644 --- a/src/js/Mixins/Snapping.js +++ b/src/js/Mixins/Snapping.js @@ -243,7 +243,7 @@ const SnapMixin = { } // uncomment 👇 this line to show helper lines for debugging - debugLine.addTo(map); + // debugLine.addTo(map); } });