From 3c12dbe44c3fe95cee269810a92b2deba2500847 Mon Sep 17 00:00:00 2001 From: Leon Machens Date: Sat, 18 Dec 2021 12:18:56 +0100 Subject: [PATCH] Fix fire vertex removed event (#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 --- cypress/integration/line.spec.js | 12 +++++++++ src/js/Draw/L.PM.Draw.Line.js | 11 +++++++- src/js/Edit/L.PM.Edit.Line.js | 46 +++++++------------------------- src/js/L.PM.Utils.js | 28 +++++++++++++++++++ 4 files changed, 59 insertions(+), 38 deletions(-) diff --git a/cypress/integration/line.spec.js b/cypress/integration/line.spec.js index 2c367d63..4933e7e8 100644 --- 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 index fadd0511..1b8891c6 100644 --- 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 index 8b36d20c..bdfa01f3 100644 --- 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 index f9d7dc61..a554669c 100644 --- 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]);