Added continueDrawing and markerEditable

README.md

@@ -237,6 +237,8 @@ See the available options in the table below.
 | markerStyle           | `{ draggable: true }`                 | [leaflet marker options](https://leafletjs.com/reference-1.4.0.html#marker-icon) (only for drawing markers).                                          |
 | editable              | `false`                               | makes a `CircleMarker` editable like a `Circle`                                                                                                       |
 | hideMiddleMarkers     | `false`                               | hide the middle Markers in edit mode from Polyline and Polygon.                                                                                       |
+| markerEditable        | `true`                                | Markers and CircleMarkers are editable during the draw-session (you can drag them around immediately after drawing them)                                                                                   |
+| continueDrawing       | `false` / `true`                      | Draw-Mode stays enabled after finishing a layer to immediately draw the next layer. Defaults to `true` for Markers and CircleMarkers and `false` for all other layers.       |                                                                                |
 
 
 

cypress/integration/circle.spec.js

@@ -84,4 +84,28 @@ describe('Draw Circle', () => {
         });
     });
   });
+
+  it('enable continueDrawing', () => {
+    cy.window().then(({ map }) => {
+      map.pm.setGlobalOptions({continueDrawing: true});
+    });
+
+    cy.toolbarButton('circle')
+      .click()
+      .closest('.button-container')
+      .should('have.class', 'active');
+
+    // draw first circle
+    cy.get(mapSelector)
+      .click(200, 200)
+      .click(250, 250);
+
+    // draw with continueDrawing: ture the second circle
+    cy.get(mapSelector)
+      .click(300, 200)
+      .click(350, 250);
+
+    cy.toolbarButton('edit').click();
+    cy.hasVertexMarkers(4);
+  });
 });

cypress/integration/circlemarker.spec.js

@@ -119,7 +119,7 @@ describe('Draw Circle Marker', () => {
 
   it('draw a CircleMarker like a Circle', () => {
     cy.window().then(({ map}) => {
-      map.pm.setGlobalOptions({editable: true});
+      map.pm.setGlobalOptions({editable: true, continueDrawing: false});
     });
 
     cy.toolbarButton('circle-marker')
@@ -162,4 +162,61 @@ describe('Draw Circle Marker', () => {
 
     cy.hasVertexMarkers(4);
   });
+
+  it('disable continueDrawing', () => {
+    cy.window().then(({ map }) => {
+      map.pm.setGlobalOptions({continueDrawing: false});
+    });
+
+    cy.toolbarButton('circle-marker').click();
+    cy.get(mapSelector)
+      .click(191,216);
+
+    cy.get(mapSelector)
+      .click(350, 350);
+
+    cy.toolbarButton('circle-marker')
+      .closest('.button-container')
+      .should('have.not.class', 'active');
+
+    cy.toolbarButton('edit').click();
+    cy.hasLayers(3);
+  });
+
+  it('disable markerEditable', () => {
+    cy.window().then(({ map }) => {
+      map.pm.setGlobalOptions({markerEditable: false});
+    });
+
+    cy.toolbarButton('circle-marker').click();
+    cy.get(mapSelector)
+      .click(191,216);
+
+    cy.window().then(({ map }) => {
+      const marker = map.pm.getGeomanDrawLayers()[0];
+      const enabled = marker.pm.enabled();
+      expect(enabled).to.equal(false);
+    });
+  });
+
+  it('enable markerEditable but disable MarkerRemoval', () => {
+    cy.window().then(({ map }) => {
+      map.pm.setGlobalOptions({markerEditable: true, preventMarkerRemoval: true});
+    });
+
+    cy.toolbarButton('circle-marker').click();
+    cy.get(mapSelector)
+      .click(191,216);
+
+    cy.window().then(({ map }) => {
+      const marker = map.pm.getGeomanDrawLayers()[0];
+      const enabled = marker.pm.enabled();
+      expect(enabled).to.equal(true);
+    });
+
+    cy.get(mapSelector)
+      .rightclick(191,214);
+
+    cy.hasLayers(5);
+  });
 });

cypress/integration/line.spec.js

@@ -184,4 +184,28 @@ describe('Draw & Edit Line', () => {
     cy.hasMiddleMarkers(0);
   });
 
+  it('enable continueDrawing', () => {
+    cy.window().then(({ map }) => {
+      map.pm.setGlobalOptions({continueDrawing: true});
+    });
+
+    cy.toolbarButton('polyline').click();
+
+    // draw a line
+    cy.get(mapSelector)
+      .click(150, 250)
+      .click(160, 50)
+      .click(250, 50)
+      .click(250, 50);
+
+    cy.get(mapSelector)
+      .click(200, 200)
+      .click(250, 250)
+      .click(250, 250);
+
+
+    cy.toolbarButton('edit').click();
+    cy.hasVertexMarkers(5);
+  });
+
 });

cypress/integration/marker.spec.js

@@ -152,4 +152,58 @@ describe('Draw Marker', () => {
     });
   });
 
+  it('disable continueDrawing', () => {
+    cy.window().then(({ map }) => {
+      map.pm.setGlobalOptions({continueDrawing: false});
+    });
+
+    cy.toolbarButton('marker').click();
+    cy.get(mapSelector)
+      .click(191,216);
+
+    cy.get(mapSelector)
+      .click(350, 350);
+
+
+    cy.toolbarButton('edit').click();
+    cy.hasLayers(2);
+  });
+
+  it('disable markerEditable', () => {
+    cy.window().then(({ map }) => {
+      map.pm.setGlobalOptions({markerEditable: false});
+    });
+
+    cy.toolbarButton('marker').click();
+    cy.get(mapSelector)
+      .click(191,216);
+
+    cy.window().then(({ map }) => {
+      const marker = map.pm.getGeomanDrawLayers()[0];
+      const enabled = marker.pm.enabled();
+      expect(enabled).to.equal(false);
+    });
+  });
+
+  it('enable markerEditable but disable MarkerRemoval', () => {
+    cy.window().then(({ map }) => {
+      map.pm.setGlobalOptions({markerEditable: true, preventMarkerRemoval: true});
+    });
+
+    cy.toolbarButton('marker').click();
+    cy.get(mapSelector)
+      .click(191,216);
+
+    cy.window().then(({ map }) => {
+      const marker = map.pm.getGeomanDrawLayers()[0];
+      const enabled = marker.pm.enabled();
+      expect(enabled).to.equal(true);
+    });
+
+    cy.get(mapSelector)
+      .rightclick(191,214);
+
+    cy.hasLayers(4);
+  });
+
 });

cypress/integration/polygon.spec.js

@@ -737,5 +737,29 @@ describe('Draw & Edit Poly', () => {
       .click();
 
     cy.hasVertexMarkers(5);
-  })
+  });
+
+  it('enable continueDrawing', () => {
+    cy.window().then(({ map }) => {
+      map.pm.setGlobalOptions({continueDrawing: true});
+    });
+
+    cy.toolbarButton('polygon').click();
+
+    // draw a line
+    cy.get(mapSelector)
+      .click(150, 250)
+      .click(160, 50)
+      .click(250, 50)
+      .click(150, 250);
+
+    cy.get(mapSelector)
+      .click(230, 230)
+      .click(250, 250)
+      .click(250, 300)
+      .click(230, 230);
+
+    cy.toolbarButton('edit').click();
+    cy.hasVertexMarkers(6);
+  });
 });

cypress/integration/rectangle.spec.js

@@ -158,5 +158,24 @@ describe('Draw Rectangle', () => {
       const coords = geojson.geometry.coordinates;
       expect(coords.length).to.equal(1);
     })
-  })
+  });
+
+  it('enable continueDrawing', () => {
+    cy.window().then(({ map }) => {
+      map.pm.setGlobalOptions({continueDrawing: true});
+    });
+
+    cy.toolbarButton('rectangle').click();
+    cy.get(mapSelector)
+      .click(191,216)
+      .click(608,323);
+
+    cy.get(mapSelector)
+      .click(230, 230)
+      .click(350, 350);
+
+
+    cy.toolbarButton('edit').click();
+    cy.hasVertexMarkers(8);
+  });
 });

src/js/Draw/L.PM.Draw.Circle.js

@@ -226,21 +226,23 @@ Draw.Circle = Draw.extend({
 
     // create the final circle layer
     const circleLayer = L.circle(center, options).addTo(this._map.pm._getContainingLayer());
-    this._setShapeForFinishLayer(circleLayer);
-    this._addDrawnLayerProp(circleLayer);
+    this._finishLayer(circleLayer);
 
     if(circleLayer.pm) {
       // create polygon around the circle border
       circleLayer.pm._updateHiddenPolyCircle();
     }
 
-    // disable drawing
-    this.disable();
-
     // fire the pm:create event and pass shape and layer
     this._map.fire('pm:create', {
       shape: this._shape,
       layer: circleLayer,
     });
+
+    // disable drawing
+    this.disable();
+    if(this.options.continueDrawing){
+      this.enable();
+    }
   },
 });

src/js/Draw/L.PM.Draw.CircleMarker.js

@@ -7,6 +7,8 @@ Draw.CircleMarker = Draw.Marker.extend({
     this._map = map;
     this._shape = 'CircleMarker';
     this.toolbarButtonName = 'drawCircleMarker';
+    // with _layerIsDragging we check if a circlemarker is currently dragged and disable marker creation
+    this._layerIsDragging = false;
   },
   enable(options) {
     // TODO: Think about if these options could be passed globally for all
@@ -102,7 +104,7 @@ Draw.CircleMarker = Draw.Marker.extend({
     // sync hint marker with mouse cursor
     this._map.on('mousemove', this._syncHintMarker, this);
 
-    if (!this.options.editable) {
+    if (!this.options.editable && this.options.markerEditable) {
       // enable edit mode for existing markers
       this._map.eachLayer(layer => {
         if (this.isRelevantMarker(layer)) {
@@ -111,6 +113,8 @@ Draw.CircleMarker = Draw.Marker.extend({
       });
     }
 
+    this._layer.bringToBack();
+
     // fire drawstart event
     this._map.fire('pm:drawstart', {
       shape: this._shape,
@@ -234,7 +238,8 @@ Draw.CircleMarker = Draw.Marker.extend({
     return layer instanceof L.CircleMarker && !(layer instanceof L.Circle) && layer.pm && !layer._pmTempLayer;
   },
   _createMarker(e) {
-    if (!e.latlng) {
+    // with _layerIsDragging we check if a circlemarker is currently dragged
+    if (!e.latlng || this._layerIsDragging) {
       return;
     }
 
@@ -249,12 +254,11 @@ Draw.CircleMarker = Draw.Marker.extend({
 
     // create marker
     const marker = L.circleMarker(latlng, this.options.pathOptions);
-    this._setShapeForFinishLayer(marker);
-    this._addDrawnLayerProp(marker);
+    this._finishLayer(marker);
     // add marker to the map
     marker.addTo(this._map.pm._getContainingLayer());
 
-    if(marker.pm) {
+    if(marker.pm && this.options.markerEditable) {
       // enable editing for the marker
       marker.pm.enable();
     }
@@ -267,6 +271,10 @@ Draw.CircleMarker = Draw.Marker.extend({
     });
 
     this._cleanupSnapping();
+
+    if(!this.options.continueDrawing){
+      this.disable();
+    }
   },
   _finishShape(e) {
     // assign the coordinate of the click to the hintMarker, that's necessary for
@@ -283,20 +291,22 @@ Draw.CircleMarker = Draw.Marker.extend({
 
     // create the final circle layer
     const circleLayer = L.circleMarker(center, options).addTo(this._map.pm._getContainingLayer());
-    this._setShapeForFinishLayer(circleLayer);
-    this._addDrawnLayerProp(circleLayer);
+    this._finishLayer(circleLayer);
     if(circleLayer.pm) {
       // create polygon around the circle border
       circleLayer.pm._updateHiddenPolyCircle();
     }
 
-    // disable drawing
-    this.disable();
-
     // fire the pm:create event and pass shape and layer
     this._map.fire('pm:create', {
       shape: this._shape,
       layer: circleLayer,
     });
+
+    // disable drawing
+    this.disable();
+    if(this.options.continueDrawing){
+      this.enable();
+    }
   },
 });

src/js/Draw/L.PM.Draw.Cut.js

@@ -23,9 +23,6 @@ Draw.Cut = Draw.Polygon.extend({
     const polygonLayer = L.polygon(coords, this.options.pathOptions);
     this._cut(polygonLayer);
 
-    // disable drawing
-    this.disable();
-
     // clean up snapping states
     this._cleanupSnapping();
 
@@ -52,6 +49,12 @@ Draw.Cut = Draw.Polygon.extend({
       originalLayer.fire('pm:edit', { layer: originalLayer, shape: originalLayer.pm.getShape()});
     });
     this._editedLayers = [];
+
+    // disable drawing
+    this.disable();
+    if(this.options.continueDrawing){
+      this.enable();
+    }
   },
   _cut(layer) {
     const all = this._map._layers;