Merge 2.14.1

.nvmrc

@@ -0,0 +1 @@
+v16.15.0

CONTRIBUTING.md

@@ -5,9 +5,10 @@ Thank you for considering contributing to Leaflet-Geoman.
 Follow these steps to get up and running:
 
 1.  clone the repository
-2.  run `npm install`
-3.  run `npm start` to compile dev version and use watch mode
-4.  run `npm run cypress` to launch the test suite (also nice for TDD)
-5.  run `npm run test` to run cypress tests
-6.  run `npm run lint` to check the code with eslint
-7.  run `npm run prepare` to compile the build version
+2.  Make sure you run the node version specified in package.json under "engines" or run `nvm use`
+3.  run `npm install`
+4.  run `npm start` to compile dev version and use watch mode
+5.  run `npm run cypress` to launch the test suite (also nice for TDD)
+6.  run `npm run test` to run cypress tests
+7.  run `npm run lint` to check the code with eslint
+8.  run `npm run prepare` to compile the build version

cypress/integration/circle.spec.js

@@ -284,4 +284,26 @@ describe('Draw Circle', () => {
       expect(layer.getLatLng().equals(layer2.getLatLng())).to.eq(true);
     });
   });
+
+  it('change color of circle while drawing', () => {
+    cy.toolbarButton('circle')
+      .click()
+      .closest('.button-container')
+      .should('have.class', 'active');
+
+    cy.get(mapSelector).click(200, 200);
+    cy.get(mapSelector).trigger('mousemove', 300, 300);
+
+    cy.window().then(({ map }) => {
+      const style = {
+        color: 'red',
+      };
+      map.pm.setGlobalOptions({ templineStyle: style, hintlineStyle: style });
+
+      const layer = map.pm.Draw.Circle._layer;
+      const hintLine = map.pm.Draw.Circle._hintline;
+      expect(layer.options.color).to.eql('red');
+      expect(hintLine.options.color).to.eql('red');
+    });
+  });
 });

cypress/integration/circlemarker.spec.js

@@ -428,4 +428,77 @@ describe('Draw Circle Marker', () => {
     });
     cy.hasLayers(3);
   });
+
+  it('check if snapping works with max radius of circle', () => {
+    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(320, 250).click(450, 250);
+
+    cy.window().then(({ map }) => {
+      map.pm.setGlobalOptions({
+        maxRadiusCircleMarker: 100,
+      });
+    });
+
+    cy.get(mapSelector).click(325, 250).click(475, 250);
+
+    cy.window().then(({ map }) => {
+      const layer = map.pm.getGeomanDrawLayers()[0];
+      const layer2 = map.pm.getGeomanDrawLayers()[1];
+      expect(layer.getLatLng().equals(layer2.getLatLng())).to.eq(true);
+    });
+  });
+
+  it('change color of circleMarker while drawing', () => {
+    cy.toolbarButton('circle-marker')
+      .click()
+      .closest('.button-container')
+      .should('have.class', 'active');
+
+    cy.get(mapSelector).trigger('mousemove', 300, 300);
+
+    cy.window().then(({ map }) => {
+      const style = {
+        color: 'red',
+      };
+      map.pm.setGlobalOptions({ templineStyle: style, hintlineStyle: style });
+
+      const layer = map.pm.Draw.CircleMarker._layer;
+      expect(layer.options.color).to.eql('red');
+    });
+  });
+
+  it('change color of circleMarker (editable) while drawing', () => {
+    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).trigger('mousemove', 300, 300);
+
+    cy.window().then(({ map }) => {
+      const style = {
+        color: 'red',
+      };
+      map.pm.setGlobalOptions({ templineStyle: style, hintlineStyle: style });
+
+      const layer = map.pm.Draw.CircleMarker._layer;
+      const hintLine = map.pm.Draw.CircleMarker._hintline;
+      expect(layer.options.color).to.eql('red');
+      expect(hintLine.options.color).to.eql('red');
+    });
+  });
 });

cypress/integration/globalmodes.spec.js

@@ -304,4 +304,48 @@ describe('Modes', () => {
     });
     cy.hasVertexMarkers(8);
   });
+
+  it('prevent enabling multiple modes at the same time', () => {
+    cy.toolbarButton('edit').click();
+
+    cy.toolbarButton('delete')
+      .click()
+      .closest('.button-container')
+      .should('have.class', 'active');
+
+    cy.toolbarButton('edit')
+      .closest('.button-container')
+      .should('not.have.class', 'active');
+  });
+
+  it('re-applies drag mode onAdd', () => {
+    cy.toolbarButton('polygon').click();
+
+    const jsonString =
+      '{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.155182,51.515687],[-0.155182,51.521028],[-0.124283,51.521028],[-0.124283,51.510345],[-0.155182,51.515687]]]}}';
+
+    const poly = JSON.parse(jsonString);
+
+    cy.get(mapSelector)
+      .click(320, 150)
+      .click(320, 100)
+      .click(400, 100)
+      .click(400, 200)
+      .click(320, 150);
+
+    cy.toolbarButton('drag').click();
+
+    cy.window().then(({ map }) => {
+      expect(map.pm.getGeomanLayers()[0].pm.layerDragEnabled()).to.equal(true);
+    });
+
+    cy.window().then(({ map, L }) => {
+      L.geoJSON(poly).addTo(map);
+    });
+
+    cy.window().then(({ map }) => {
+      expect(map.pm.getGeomanLayers()[0].pm.layerDragEnabled()).to.equal(true);
+      expect(map.pm.getGeomanLayers()[1].pm.layerDragEnabled()).to.equal(true);
+    });
+  });
 });

cypress/integration/line.spec.js

@@ -298,4 +298,27 @@ describe('Draw & Edit Line', () => {
     });
     cy.hasLayers(2);
   });
+
+  it('change color of line while drawing', () => {
+    cy.toolbarButton('polyline')
+      .click()
+      .closest('.button-container')
+      .should('have.class', 'active');
+
+    cy.get(mapSelector).click(200, 200);
+    cy.get(mapSelector).click(100, 230);
+    cy.get(mapSelector).trigger('mousemove', 300, 300);
+
+    cy.window().then(({ map }) => {
+      const style = {
+        color: 'red',
+      };
+      map.pm.setGlobalOptions({ templineStyle: style, hintlineStyle: style });
+
+      const layer = map.pm.Draw.Line._layer;
+      const hintLine = map.pm.Draw.Line._hintline;
+      expect(layer.options.color).to.eql('red');
+      expect(hintLine.options.color).to.eql('red');
+    });
+  });
 });

cypress/integration/marker.spec.js

@@ -294,4 +294,26 @@ describe('Draw Marker', () => {
       expect(updateFired).to.eq(true);
     });
   });
+
+  it('change icon of Marker while drawing', () => {
+    cy.toolbarButton('marker')
+      .click()
+      .closest('.button-container')
+      .should('have.class', 'active');
+
+    cy.get(mapSelector).trigger('mousemove', 300, 300);
+
+    cy.window().then(({ map, L }) => {
+      map.pm.setGlobalOptions({
+        markerStyle: {
+          icon: L.icon({
+            iconUrl: 'someIcon.png',
+          }),
+        },
+      });
+
+      const layer = map.pm.Draw.Marker._hintMarker;
+      expect(layer._icon.src.endsWith('someIcon.png')).to.eql(true);
+    });
+  });
 });

cypress/integration/options.spec.js

@@ -3,41 +3,6 @@ describe('Options', () => {
 
   const mapSelector = '#map';
 
-  it('Pinning fires pm:edit', () => {
-    cy.toolbarButton('polygon').click();
-
-    cy.window().then(({ map, L }) => {
-      cy.get(mapSelector)
-        .click(90, 250)
-        .click(100, 50)
-        .click(150, 50)
-        .click(150, 150)
-        .click(90, 250)
-        .then(() => {
-          let l;
-          map.eachLayer((layer) => {
-            if (layer instanceof L.Polygon) {
-              layer.pm.enable();
-              l = layer;
-            }
-          });
-          return l;
-        })
-        .as('poly');
-    });
-
-    cy.get('@poly').then((poly) => {
-      poly.on('pm:edit', (e) => {
-        console.log(e);
-      });
-    });
-
-    cy.toolbarButton('marker').click();
-    cy.get(mapSelector).click(150, 150);
-
-    cy.toolbarButton('edit').click();
-  });
-
   it('sets global options', () => {
     cy.toolbarButton('polygon').click();
 
@@ -165,4 +130,17 @@ describe('Options', () => {
       );
     });
   });
+
+  it('fires `pm:globaloptionschanged`', () => {
+    cy.window().then(({ map }) => {
+      let fired = false;
+      map.on('pm:globaloptionschanged', () => {
+        fired = true;
+      });
+
+      map.pm.setGlobalOptions({ snapSegment: false });
+
+      expect(fired).to.equal(true);
+    });
+  });
 });

cypress/integration/polygon.spec.js

@@ -900,6 +900,13 @@ describe('Draw & Edit Poly', () => {
     cy.window().then(({ map }) => {
       expect(2).to.eq(map.pm.getGeomanDrawLayers().length);
     });
+
+    cy.toolbarButton('delete').click();
+    cy.get(mapSelector).click(160, 50);
+
+    cy.window().then(({ map }) => {
+      expect(1).to.eq(map.pm.getGeomanDrawLayers().length);
+    });
   });
 
   it('requireSnapToFinish', () => {
@@ -1176,4 +1183,88 @@ describe('Draw & Edit Poly', () => {
       cy.toolbarButton('edit').click();
     }).to.not.throw();
   });
+
+  it('remove vertex & layer by right-click', () => {
+    cy.toolbarButton('polygon').click();
+    cy.get(mapSelector)
+      .click(150, 250)
+      .click(160, 50)
+      .click(250, 50)
+      .click(150, 250);
+
+    cy.toolbarButton('edit').click();
+    cy.hasDrawnLayers(1);
+
+    // Add Vertex
+    cy.get(mapSelector).click(205, 50);
+    cy.hasVertexMarkers(4);
+
+    // Remove Vertex
+    cy.get(mapSelector).rightclick(205, 50);
+    cy.hasVertexMarkers(3);
+
+    cy.get(mapSelector).rightclick(150, 250);
+    cy.hasDrawnLayers(0);
+  });
+
+  it('re-render marker-handlers if hole is removed by right-click', () => {
+    cy.toolbarButton('polygon').click();
+    cy.get(mapSelector)
+      .click(150, 250)
+      .click(150, 50)
+      .click(650, 50)
+      .click(650, 250)
+      .click(150, 250);
+
+    cy.toolbarButton('cut').click();
+    cy.get(mapSelector)
+      .click(250, 200)
+      .click(250, 100)
+      .click(450, 200)
+      .click(250, 200);
+
+    cy.toolbarButton('edit').click();
+    cy.hasVertexMarkers(7);
+
+    // Remove hole
+    cy.get(mapSelector).rightclick(250, 200);
+    cy.hasVertexMarkers(4);
+  });
+
+  it('show correct shape for Polygon while drawing', () => {
+    cy.toolbarButton('polygon')
+      .click()
+      .closest('.button-container')
+      .should('have.class', 'active');
+
+    cy.get(mapSelector).click(150, 150).click(450, 150).click(450, 400);
+
+    cy.window().then(({ map }) => {
+      const polygon = map.pm.Draw.Polygon._layer;
+      expect(polygon.pm.getShape()).to.equal('Polygon');
+    });
+  });
+
+  it('change color of Polygon while drawing', () => {
+    cy.toolbarButton('polygon')
+      .click()
+      .closest('.button-container')
+      .should('have.class', 'active');
+
+    cy.get(mapSelector).click(220, 220);
+    cy.get(mapSelector).click(100, 230);
+    cy.get(mapSelector).trigger('mousemove', 300, 300);
+
+    cy.window().then(({ map }) => {
+      const style = {
+        color: 'red',
+      };
+      map.pm.setGlobalOptions({ templineStyle: style, hintlineStyle: style });
+
+      const layer = map.pm.Draw.Polygon._layer;
+      const hintLine = map.pm.Draw.Polygon._hintline;
+      expect(layer.options.color).to.eql('red');
+      expect(hintLine.options.color).to.eql('red');
+    });
+  });
 });