Polygon & Line self snapping

cypress/integration/polygon.spec.js

@@ -558,7 +558,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);
 

cypress/integration/toolbar.spec.js

@@ -272,12 +272,11 @@ 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(() => {
           expect(testlayer.options.color).to.equal("red");
         })
       })

src/js/Draw/L.PM.Draw.Line.js

@@ -180,7 +180,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());
     }
   },
   hasSelfIntersection() {
@@ -222,15 +222,6 @@ Draw.Line = Draw.extend({
     }
   },
   _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) {
@@ -240,6 +231,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
@@ -251,6 +251,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;
 
@@ -287,11 +292,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();
+    }
   },
   _finishShape() {
     // if self intersection is not allowed, do not finish the shape!
@@ -355,6 +370,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;

src/js/Draw/L.PM.Draw.Polygon.js

@@ -27,15 +27,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

src/js/Mixins/Snapping.js

@@ -229,6 +229,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