From cd22a48eb9aeec1e7332e0bc032a470a0a15337c Mon Sep 17 00:00:00 2001
From: Florian Bischof <design.falke@gmail.com>
Date: Tue, 21 Nov 2023 19:53:26 +0100
Subject: [PATCH] Add onVertexClick to Rectangle, Circle and CircleMarker
 (#1367)

---
 cypress/integration/circle.spec.js       | 27 +++++++++++++++++++++
 cypress/integration/circlemarker.spec.js | 31 ++++++++++++++++++++++++
 cypress/integration/rectangle.spec.js    | 27 +++++++++++++++++++++
 src/js/Edit/L.PM.Edit.Circle.js          |  8 ++++++
 src/js/Edit/L.PM.Edit.CircleMarker.js    |  9 +++++++
 src/js/Edit/L.PM.Edit.Rectangle.js       |  2 ++
 6 files changed, 104 insertions(+)

diff --git a/cypress/integration/circle.spec.js b/cypress/integration/circle.spec.js
index 73323fc1..8575b1f6 100644
--- a/cypress/integration/circle.spec.js
+++ b/cypress/integration/circle.spec.js
@@ -444,4 +444,31 @@ describe('Draw Circle', () => {
       expect(layer.options.color).to.eql('red');
     });
   });
+
+  it('on vertex click', (done) => {
+    cy.toolbarButton('circle')
+      .click()
+      .closest('.button-container')
+      .should('have.class', 'active');
+
+    cy.get(mapSelector).click(200, 200);
+    cy.get(mapSelector).click(300, 200);
+
+    cy.window().then(({ map }) => {
+      let count = 0;
+      const layer = map.pm.getGeomanDrawLayers()[0];
+      layer.on('pm:vertexclick', ()=>{
+        count += 1;
+        if(count >= 2) {
+          expect(count).to.eql(2);
+          setTimeout(done, 100)
+        }
+      })
+    });
+
+    cy.toolbarButton('edit').click();
+    cy.get(mapSelector).click(200, 200);
+    cy.get(mapSelector).click(300, 200);
+
+  });
 });
diff --git a/cypress/integration/circlemarker.spec.js b/cypress/integration/circlemarker.spec.js
index ed374568..6ab98386 100644
--- a/cypress/integration/circlemarker.spec.js
+++ b/cypress/integration/circlemarker.spec.js
@@ -578,4 +578,35 @@ describe('Draw Circle Marker', () => {
 
     cy.hasVertexMarkers(2);
   });
+
+  it('on vertex click - editable', (done) => {
+    cy.window().then(({ map }) => {
+      map.pm.setGlobalOptions({ editable: true });
+    });
+
+    cy.toolbarButton('circle-marker')
+      .click()
+      .closest('.button-container')
+      .should('have.class', 'active');
+
+    cy.get(mapSelector).click(200, 200);
+    cy.get(mapSelector).click(300, 200);
+
+    cy.window().then(({ map }) => {
+      let count = 0;
+      const layer = map.pm.getGeomanDrawLayers()[0];
+      layer.on('pm:vertexclick', ()=>{
+        count += 1;
+        if(count >= 2) {
+          expect(count).to.eql(2);
+          setTimeout(done, 100)
+        }
+      })
+    });
+
+    cy.toolbarButton('edit').click();
+    cy.get(mapSelector).click(200, 200);
+    cy.get(mapSelector).click(300, 200);
+
+  });
 });
diff --git a/cypress/integration/rectangle.spec.js b/cypress/integration/rectangle.spec.js
index 593399d6..9a05ed61 100644
--- a/cypress/integration/rectangle.spec.js
+++ b/cypress/integration/rectangle.spec.js
@@ -952,4 +952,31 @@ describe('Draw Rectangle', () => {
       expect(px).to.eql(expected);
     });
   });
+
+  it('on vertex click', (done) => {
+    cy.toolbarButton('rectangle')
+      .click()
+      .closest('.button-container')
+      .should('have.class', 'active');
+
+    cy.get(mapSelector).click(200, 200);
+    cy.get(mapSelector).click(300, 300);
+
+    cy.window().then(({ map }) => {
+      let count = 0;
+      const layer = map.pm.getGeomanDrawLayers()[0];
+      layer.on('pm:vertexclick', ()=>{
+        count += 1;
+        if(count >= 2) {
+          expect(count).to.eql(2);
+          setTimeout(done, 100)
+        }
+      })
+    });
+
+    cy.toolbarButton('edit').click();
+    cy.get(mapSelector).click(200, 200);
+    cy.get(mapSelector).click(300, 300);
+
+  });
 });
diff --git a/src/js/Edit/L.PM.Edit.Circle.js b/src/js/Edit/L.PM.Edit.Circle.js
index 808596ba..aaba68e0 100644
--- a/src/js/Edit/L.PM.Edit.Circle.js
+++ b/src/js/Edit/L.PM.Edit.Circle.js
@@ -58,4 +58,12 @@ Edit.Circle = Edit.CircleMarker.extend({
   _getMaxDistanceInMeter(){
     return this.options[this._maxRadiusOption]
   },
+  _onVertexClick(e) {
+    const vertex = e.target;
+    if (vertex._dragging) {
+      return;
+    }
+
+    this._fireVertexClick(e, undefined);
+  },
 });
diff --git a/src/js/Edit/L.PM.Edit.CircleMarker.js b/src/js/Edit/L.PM.Edit.CircleMarker.js
index 954a408e..2ae1a0da 100644
--- a/src/js/Edit/L.PM.Edit.CircleMarker.js
+++ b/src/js/Edit/L.PM.Edit.CircleMarker.js
@@ -222,6 +222,7 @@ Edit.CircleMarker = Edit.extend({
     marker.on('dragstart', this._onMarkerDragStart, this);
     marker.on('drag', this._onMarkerDrag, this);
     marker.on('dragend', this._onMarkerDragEnd, this);
+    marker.on('click', this._onVertexClick, this);
 
     this._helperLayers.addLayer(marker);
 
@@ -454,4 +455,12 @@ Edit.CircleMarker = Edit.extend({
   _getMaxDistanceInMeter(latlng){
     return L.PM.Utils.pxRadiusToMeterRadius(this.options[this._maxRadiusOption], this._map, latlng)
   },
+  _onVertexClick(e) {
+    const vertex = e.target;
+    if (vertex._dragging) {
+      return;
+    }
+
+    this._fireVertexClick(e, undefined);
+  },
 });
diff --git a/src/js/Edit/L.PM.Edit.Rectangle.js b/src/js/Edit/L.PM.Edit.Rectangle.js
index cb24cbc7..fedc1a4a 100644
--- a/src/js/Edit/L.PM.Edit.Rectangle.js
+++ b/src/js/Edit/L.PM.Edit.Rectangle.js
@@ -58,6 +58,8 @@ Edit.Rectangle = Edit.Polygon.extend({
     marker._index = index;
     marker._pmTempLayer = true;
 
+    marker.on('click', this._onVertexClick, this);
+
     this._markerGroup.addLayer(marker);
 
     return marker;