Add onVertexClick to Rectangle, Circle and CircleMarker (#1367)

geoman-io · Nov 21, 2023 · cd22a48 · cd22a48
1 parent f3f9343
commit cd22a48
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;