Prevent the creation of an Marker when dragging in draw mode (#1569)

* Prevent the creation of an additional Marker when dragging a Marker in "Create Marker" mode (#1568)
  - Replicate CircleMarker _layerIsDragging functionality in Marker

* Test to ensure an additional Marker is not created when dragging a Marker in "Create Marker" mode (#1568)

* Update cypress/e2e/marker.cy.js

* Update cypress/e2e/marker.cy.js

---------

Co-authored-by: Trevor Fitzsimmons <[email protected]>
Co-authored-by: Florian Bischof <[email protected]>

Author: 3 people

cypress/e2e/marker.cy.js

@@ -316,4 +316,32 @@ describe('Draw Marker', () => {
       expect(layer._icon.src.endsWith('someIcon.png')).to.eql(true);
     });
   });
+
+  it('does not create additional marker while dragging in draw mode', () => {
+    cy.toolbarButton('marker').click();
+
+    cy.get(mapSelector).click(150, 250);
+
+    cy.window().then(({ map }) => {
+      expect(map.pm.getGeomanDrawLayers().length).to.eq(1);
+    });
+
+    cy.get(mapSelector).trigger('mousedown', 150, 230, { which: 1 });
+    cy.get(mapSelector).trigger('mousemove', 170, 290, { which: 1 });
+    // Do not create a new marker while dragging
+    cy.get(mapSelector).click(170, 290);
+    cy.get(mapSelector).trigger('mouseup', 170, 290, { which: 1 });
+    cy.get(mapSelector).trigger('mousemove', 190, 340, { which: 1 });
+
+    cy.window().then(({ map }) => {
+      expect(map.pm.getGeomanDrawLayers().length).to.eq(1);
+    });
+
+    // Create a new marker after dragging with clicking on the icon of a marker
+    cy.get(mapSelector).click(170, 290);
+
+    cy.window().then(({ map }) => {
+      expect(map.pm.getGeomanDrawLayers().length).to.eq(2);
+    });
+  });
 });

src/js/Draw/L.PM.Draw.Marker.js

@@ -6,6 +6,8 @@ Draw.Marker = Draw.extend({
     this._map = map;
     this._shape = 'Marker';
     this.toolbarButtonName = 'drawMarker';
+    // with _layerIsDragging we check if a marker is currently dragged and disable marker creation
+    this._layerIsDragging = false;
   },
   enable(options) {
     // TODO: Think about if these options could be passed globally for all
@@ -137,7 +139,7 @@ Draw.Marker = Draw.extend({
     this._fireChange(this._hintMarker.getLatLng(), 'Draw');
   },
   _createMarker(e) {
-    if (!e.latlng) {
+    if (!e.latlng || this._layerIsDragging) {
       return;
     }
 

src/js/Edit/L.PM.Edit.Marker.js

@@ -32,6 +32,9 @@ Edit.Marker = Edit.extend({
 
     this._enabled = true;
 
+    this._layer.on('pm:dragstart', this._onDragStart, this);
+    this._layer.on('pm:dragend', this._onMarkerDragEnd, this);
+
     this._fireEnable();
   },
   disable() {
@@ -89,6 +92,12 @@ Edit.Marker = Edit.extend({
     this._fireRemove(marker);
     this._fireRemove(this._map, marker);
   },
+  _onDragStart() {
+    this._map.pm.Draw.Marker._layerIsDragging = true;
+  },
+  _onMarkerDragEnd() {
+    this._map.pm.Draw.Marker._layerIsDragging = false;
+  },
   _onDragEnd() {
     this._fireEdit();
     this._layerEdited = true;