Fix fire vertex removed event (geoman-io#1028)

* Fix fire vertex removed event * Add test * Move findDeepMarkerIndex into Utils and add it to the removeVertrex evt * Fix this.L.PM Co-authored-by: Falke Design <design.falke@gmail.com>
BaharWeb · May 13, 2022 · 3c12dbe · 3c12dbe
1 parent 849f519
commit 3c12dbe
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 38 deletions.
diff --git a/cypress/integration/line.spec.js b/cypress/integration/line.spec.js
@@ -14,6 +14,15 @@ describe('Draw & Edit Line', () => {
   });
 
   it('removes last vertex', () => {
+    let eventCalled = false;
+    cy.window().then(({ map }) => {
+      map.on('pm:drawstart', (e) => {
+        e.workingLayer.on('pm:vertexremoved', () => {
+          eventCalled = true;
+        });
+      });
+    });
+
     cy.toolbarButton('polyline').click();
 
     cy.get(mapSelector)
@@ -31,6 +40,9 @@ describe('Draw & Edit Line', () => {
     cy.get('.button-container.active .action-removeLastVertex').click();
 
     cy.hasVertexMarkers(3);
+    cy.window().then(() => {
+      expect(eventCalled).to.eq(true);
+    });
   });
 
   it('respects custom style', () => {

diff --git a/src/js/Draw/L.PM.Draw.Line.js b/src/js/Draw/L.PM.Draw.Line.js
@@ -282,15 +282,24 @@ Draw.Line = Draw.extend({
       .filter((l) => !L.DomUtil.hasClass(l._icon, 'cursor-marker'))
       .find((l) => l.getLatLng() === removedCoord);
 
+
+    const markers = this._layerGroup.getLayers().filter((l)=>l instanceof L.Marker);
+    // the index path to the marker inside the multidimensional marker array
+    const { indexPath } = L.PM.Utils.findDeepMarkerIndex(
+      markers,
+      marker
+    );
+
     // remove that marker
     this._layerGroup.removeLayer(marker);
-
     // update layer with new coords
     this._layer.setLatLngs(coords);
 
     // sync the hintline again
     this._syncHintLine();
     this._setTooltipText();
+
+    this._fireVertexRemoved(marker, indexPath, 'Draw');
   },
   _finishShape() {
     // if self intersection is not allowed, do not finish the shape!

diff --git a/src/js/Edit/L.PM.Edit.Line.js b/src/js/Edit/L.PM.Edit.Line.js
@@ -304,7 +304,7 @@ Edit.Line = Edit.extend({
     delete newM.rightM;
 
     // the index path to the marker inside the multidimensional marker array
-    const { indexPath, index, parentPath } = this.findDeepMarkerIndex(
+    const { indexPath, index, parentPath } = L.PM.Utils.findDeepMarkerIndex(
       this._markers,
       leftM
     );
@@ -337,7 +337,7 @@ Edit.Line = Edit.extend({
 
     this._fireVertexAdded(
       newM,
-      this.findDeepMarkerIndex(this._markers, newM).indexPath,
+      L.PM.Utils.findDeepMarkerIndex(this._markers, newM).indexPath,
       latlng
     );
 
@@ -449,7 +449,7 @@ Edit.Line = Edit.extend({
     let coords = this._layer.getLatLngs();
 
     // the index path to the marker inside the multidimensional marker array
-    const { indexPath, index, parentPath } = this.findDeepMarkerIndex(
+    const { indexPath, index, parentPath } = L.PM.Utils.findDeepMarkerIndex(
       this._markers,
       marker
     );
@@ -570,34 +570,6 @@ Edit.Line = Edit.extend({
     // TODO: maybe fire latlng as well?
     this._fireVertexRemoved(marker, indexPath);
   },
-  findDeepMarkerIndex(arr, marker) {
-    // thanks for the function, Felix Heck
-    let result;
-
-    const run = (path) => (v, i) => {
-      const iRes = path.concat(i);
-
-      if (v._leaflet_id === marker._leaflet_id) {
-        result = iRes;
-        return true;
-      }
-
-      return Array.isArray(v) && v.some(run(iRes));
-    };
-    arr.some(run([]));
-
-    let returnVal = {};
-
-    if (result) {
-      returnVal = {
-        indexPath: result,
-        index: result[result.length - 1],
-        parentPath: result.slice(0, result.length - 1),
-      };
-    }
-
-    return returnVal;
-  },
   updatePolygonCoordsFromMarkerDrag(marker) {
     // update polygon coords
     const coords = this._layer.getLatLngs();
@@ -606,7 +578,7 @@ Edit.Line = Edit.extend({
     const latlng = marker.getLatLng();
 
     // get indexPath of Marker
-    const { indexPath, index, parentPath } = this.findDeepMarkerIndex(
+    const { indexPath, index, parentPath } = L.PM.Utils.findDeepMarkerIndex(
       this._markers,
       marker
     );
@@ -620,7 +592,7 @@ Edit.Line = Edit.extend({
   },
 
   _getNeighborMarkers(marker) {
-    const { indexPath, index, parentPath } = this.findDeepMarkerIndex(
+    const { indexPath, index, parentPath } = L.PM.Utils.findDeepMarkerIndex(
       this._markers,
       marker
     );
@@ -682,7 +654,7 @@ Edit.Line = Edit.extend({
       return;
     }
 
-    const { indexPath } = this.findDeepMarkerIndex(this._markers, marker);
+    const { indexPath } = L.PM.Utils.findDeepMarkerIndex(this._markers, marker);
 
     this._fireMarkerDragStart(e, indexPath);
 
@@ -710,7 +682,7 @@ Edit.Line = Edit.extend({
       return;
     }
 
-    const { indexPath, index, parentPath } = this.findDeepMarkerIndex(
+    const { indexPath, index, parentPath } = L.PM.Utils.findDeepMarkerIndex(
       this._markers,
       marker
     );
@@ -783,7 +755,7 @@ Edit.Line = Edit.extend({
       return;
     }
 
-    const { indexPath } = this.findDeepMarkerIndex(this._markers, marker);
+    const { indexPath } = L.PM.Utils.findDeepMarkerIndex(this._markers, marker);
 
     // if self intersection is not allowed but this edit caused a self intersection,
     // reset and cancel; do not fire events
@@ -835,7 +807,7 @@ Edit.Line = Edit.extend({
       return;
     }
 
-    const { indexPath } = this.findDeepMarkerIndex(this._markers, vertex);
+    const { indexPath } = L.PM.Utils.findDeepMarkerIndex(this._markers, vertex);
 
     this._fireVertexClick(e, indexPath);
   },

diff --git a/src/js/L.PM.Utils.js b/src/js/L.PM.Utils.js
@@ -141,6 +141,34 @@ const Utils = {
 
     return returnVal;
   },
+  findDeepMarkerIndex(arr, marker) {
+    // thanks for the function, Felix Heck
+    let result;
+
+    const run = (path) => (v, i) => {
+      const iRes = path.concat(i);
+
+      if (v._leaflet_id === marker._leaflet_id) {
+        result = iRes;
+        return true;
+      }
+
+      return Array.isArray(v) && v.some(run(iRes));
+    };
+    arr.some(run([]));
+
+    let returnVal = {};
+
+    if (result) {
+      returnVal = {
+        indexPath: result,
+        index: result[result.length - 1],
+        parentPath: result.slice(0, result.length - 1),
+      };
+    }
+
+    return returnVal;
+  },
   _getIndexFromSegment(coords, segment) {
     if (segment && segment.length === 2) {
       const indexA = this.findDeepCoordIndex(coords, segment[0]);