Remove Last Vertex. Fixes #267 (#360) (Minor)

* added removeLastVertex function * added toolbar button * added tests * removed .only limiter in tests * added comments * fixed polygon test
geoman-io · Nov 27, 2018 · dc182a5 · dc182a5
1 parent 0cced3c
commit dc182a5
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 17 deletions.
diff --git a/cypress/integration/line.spec.js b/cypress/integration/line.spec.js
@@ -15,6 +15,26 @@ describe('Draw & Edit Line', () => {
         cy.hasVertexMarkers(0);
     });
 
+    it('removes last vertex', () => {
+        cy.toolbarButton('polyline').click();
+
+        cy.get(mapSelector)
+            .click(190, 250)
+            .click(200, 50)
+            .click(250, 50)
+            .click(250, 250);
+
+        cy.hasVertexMarkers(5);
+
+        cy.get('.button-container.active .action-removeLastVertex').click();
+
+        cy.hasVertexMarkers(4);
+
+        cy.get('.button-container.active .action-removeLastVertex').click();
+
+        cy.hasVertexMarkers(3);
+    });
+
     it('draws and edits a line', () => {
         cy.window().then(({ map }) => {
             cy.hasLayers(map, 1);

diff --git a/cypress/integration/polygon.spec.js b/cypress/integration/polygon.spec.js
@@ -11,6 +11,8 @@ describe('Draw & Edit Poly', () => {
         cy.toolbarButton('edit').click();
 
         cy.hasVertexMarkers(0);
+
+        cy.toolbarButton('edit').click();
     });
 
     it('adds new vertex to end of array', () => {
@@ -188,12 +190,12 @@ describe('Draw & Edit Poly', () => {
 
         // draw a polygon
         cy.get(mapSelector)
-            .click(250, 250)
-            .click(270, 80)
-            .click(300, 80)
+            .click(150, 150)
+            .click(270, 180)
+            .click(300, 180)
             .click(280, 280)
             .click(200, 285)
-            .click(250, 250);
+            .click(150, 150);
 
         // enable global edit mode
         cy.toolbarButton('edit')
@@ -258,5 +260,7 @@ describe('Draw & Edit Poly', () => {
 
         cy.hasVertexMarkers(5);
         cy.hasMiddleMarkers(4);
+
+        cy.toolbarButton('edit').click();
     });
 });
diff --git a/src/js/Draw/L.PM.Draw.Line.js b/src/js/Draw/L.PM.Draw.Line.js
@@ -147,10 +147,7 @@ Draw.Line = Draw.extend({
             const lastPolygonPoint = polyPoints[polyPoints.length - 1];
 
             // set coords for hintline from marker to last vertex of drawin polyline
-            this._hintline.setLatLngs([
-                lastPolygonPoint,
-                this._hintMarker.getLatLng(),
-            ]);
+            this._hintline.setLatLngs([lastPolygonPoint, this._hintMarker.getLatLng()]);
         }
     },
     _syncHintMarker(e) {
@@ -195,6 +192,32 @@ Draw.Line = Draw.extend({
             this._hintline.setStyle(this.options.hintlineStyle);
         }
     },
+    _removeLastVertex() {
+        // remove last coords
+        const coords = this._layer.getLatLngs();
+        const removedCoord = coords.pop();
+
+        // if all coords are gone, cancel drawing
+        if (coords.length < 1) {
+            this.disable();
+        }
+
+        // find corresponding marker
+        const marker = this._layerGroup
+            .getLayers()
+            .filter(l => l instanceof L.Marker)
+            .filter(l => !L.DomUtil.hasClass(l._icon, 'cursor-marker'))
+            .find(l => l.getLatLng() === removedCoord);
+
+        // remove that marker
+        this._layerGroup.removeLayer(marker);
+
+        // update layer with new coords
+        this._layer.setLatLngs(coords);
+
+        // sync the hintline again
+        this._syncHintLine();
+    },
     _createVertex(e) {
         if (!this.options.allowSelfIntersection && this._doesSelfIntersect) {
             return;
@@ -250,10 +273,7 @@ Draw.Line = Draw.extend({
         }
 
         // create the leaflet shape and add it to the map
-        const polylineLayer = L.polyline(
-            coords,
-            this.options.pathOptions,
-        ).addTo(this._map);
+        const polylineLayer = L.polyline(coords, this.options.pathOptions).addTo(this._map);
 
         // disable drawing
         this.disable();

diff --git a/src/js/Draw/L.PM.Draw.Poly.js b/src/js/Draw/L.PM.Draw.Poly.js
@@ -25,7 +25,7 @@ Draw.Poly = Draw.Line.extend({
             // Leaflet creates an extra node with double click
             coords.splice(coords.length - 1, 1);
         }
-        const polygonLayer = L.polygon(coords, this.options.pathOptions).addTo(this._map,);
+        const polygonLayer = L.polygon(coords, this.options.pathOptions).addTo(this._map);
 
         // disable drawing
         this.disable();

diff --git a/src/js/Toolbar/L.Controls.js b/src/js/Toolbar/L.Controls.js
@@ -84,7 +84,9 @@ const PMButton = L.Control.extend({
             },
             removeLastVertex: {
                 text: 'Remove Last Vertex',
-                onClick() {},
+                onClick() {
+                    this._map.pm.Draw[button.jsClass]._removeLastVertex();
+                },
             },
             finish: {
                 text: 'Finish',

diff --git a/src/js/Toolbar/L.PM.Toolbar.js b/src/js/Toolbar/L.PM.Toolbar.js
@@ -138,7 +138,7 @@ const Toolbar = L.Class.extend({
             toggleStatus: false,
             disableOtherButtons: true,
             position: this.options.position,
-            actions: ['finish', 'cancel'],
+            actions: ['finish', 'removeLastVertex', 'cancel'],
         };
 
         const cutButton = {
@@ -157,7 +157,7 @@ const Toolbar = L.Class.extend({
             toggleStatus: false,
             disableOtherButtons: true,
             position: this.options.position,
-            actions: ['finish', 'cancel'],
+            actions: ['finish', 'removeLastVertex', 'cancel'],
         };
 
         const drawMarkerButton = {
@@ -187,7 +187,7 @@ const Toolbar = L.Class.extend({
             toggleStatus: false,
             disableOtherButtons: true,
             position: this.options.position,
-            actions: ['finish', 'cancel'],
+            actions: ['finish', 'removeLastVertex', 'cancel'],
         };
 
         const drawCircleButton = {