Merge pull request #1057 from geoman-io/develop

Release Branch

.eslintrc

@@ -1,5 +1,8 @@
 {
   "extends": ["airbnb-base", "prettier"],
+  "parserOptions": {
+    "ecmaVersion": 2020
+  },
   "rules": {
     "no-underscore-dangle": 0,
     "import/prefer-default-export": 0,

.github/workflows/nodejs.yml

@@ -8,7 +8,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x]
+        node-version: [14.x, 16.x]
 
     steps:
       - uses: actions/checkout@v2

README.md

@@ -59,6 +59,7 @@ Features marked with ⭐ in this documentation are available in Leaflet-Geoman P
 - [Customization](#customize)  
 - [Toolbar](#toolbar)  
 - [Utils](#utils)  
+- [Lazy loading](#lazy-loading)  
 - [Need a feature? | Existing Feature Requests](https://github.com/geoman-io/Leaflet-Geoman/issues?q=is%3Aissue+is%3Aclosed+label%3A%22feature+request%22+sort%3Areactions-%2B1-desc)  
 
 
@@ -1069,6 +1070,33 @@ The following methods are available on `L.PM.Utils`:
 | circleToPolygon(`circle`, `sides = 60`, `withBearing = true`) | `Polygon` | Converts a circle into a polygon with default 60 sides. For CRS.Simple maps `withBearing` needs to be false.                                               |
 | pxRadiusToMeterRadius(`radiusInPx`, `map`, `center`)          | `Number`  | Converts a px-radius (CircleMarker) to meter-radius (Circle). The center LatLng is needed because the earth has different projections on different places. |
 
+### Lazy Loading
+
+If you want to keep your initial webpage loading size low you might want to deferre Geoman javascript to load only when actually needed on the webpage. In that case if the L.Map object is already initialized when the Geoman javascript is loaded, Geoman won't attach to the existing map object and the `pm` property on the map object will be undefined. In order for Geoman to attach it self to your map object you need to run the following command after Geoman javascript file was loaded.
+
+```js
+L.PM.reInitLayer(map);
+```
+
+Using ES6 Module, a simple example would look something like this:
+
+```js
+import * as L from 'leaflet'
+
+let map = L.Map()
+
+// map created and display on webpage
+...
+
+/* drawing script */
+// at this point map.pm is undefined
+if (!map.pm) {
+  await import(/* webpackChunkName: "leaflet-geoman" */ '@geoman-io/leaflet-geoman-free')
+  L.PM.reInitLayer(map)
+}
+// map.pm is now defined and can be used to draw on map
+```
+
 ### Keyboard
 
 We implemented a built-in keyboard listener to make one central place where keyboard events can be accessed (without adding self a listener).

cypress/integration/circle.spec.js

@@ -242,4 +242,44 @@ describe('Draw Circle', () => {
       expect(!!map.pm.Draw.Circle._layer._map).to.eq(false);
     });
   });
+  it('removes circle if enabled', () => {
+    cy.toolbarButton('circle')
+      .click()
+      .closest('.button-container')
+      .should('have.class', 'active');
+
+    cy.get(mapSelector).click(200, 200).click(250, 250);
+
+    cy.toolbarButton('edit').click();
+
+    cy.hasLayers(7);
+    cy.window().then(({ map }) => {
+      const layer = map.pm.getGeomanDrawLayers()[0];
+      layer.remove();
+    });
+    cy.hasLayers(3);
+  });
+  it('check if snapping works with max radius of circle', () => {
+    cy.toolbarButton('circle')
+      .click()
+      .closest('.button-container')
+      .should('have.class', 'active');
+
+    cy.get(mapSelector).click(350, 250).click(450, 250);
+
+    cy.window().then(({ map }) => {
+      map.pm.setGlobalOptions({
+        maxRadiusCircle: 1500,
+      });
+    });
+
+    cy.toolbarButton('circle').click();
+    cy.get(mapSelector).click(355, 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);
+    });
+  });
 });

cypress/integration/circlemarker.spec.js

@@ -391,12 +391,40 @@ describe('Draw Circle Marker', () => {
   });
   it('checks if circle is hidden before drawing', () => {
     cy.window().then(({ map }) => {
-      map.pm.setGlobalOptions({editable: true});
+      map.pm.setGlobalOptions({ editable: true });
     });
     cy.toolbarButton('circle-marker').click();
     cy.window().then(({ map }) => {
       // if map property is null, then it is not visible
       expect(!!map.pm.Draw.CircleMarker._layer._map).to.eq(false);
     });
   });
+
+  it('removes circleMarker if enabled', () => {
+    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(350, 250).click(190, 60);
+
+    // TODO: Remove this in the next cypress version. Not reasonable why 'circle' button is clicked instead of 'edit'. With first disable 'circle-marker' draw, it works to select 'edit'
+    cy.toolbarButton('circle-marker').click();
+
+    cy.toolbarButton('edit')
+      .click()
+      .closest('.button-container')
+      .should('have.class', 'active');
+
+    cy.hasLayers(7);
+    cy.window().then(({ map }) => {
+      const layer = map.pm.getGeomanDrawLayers()[0];
+      layer.remove();
+    });
+    cy.hasLayers(3);
+  });
 });

cypress/integration/imageoverlay.spec.js

@@ -18,7 +18,9 @@ describe('Opens Testing Environment', () => {
 
       map.on('pm:drawstart', (e) => {
         const layer = e.workingLayer;
-        layer.on('pm:snap', (x) => (eventcalled = x.type));
+        layer.on('pm:snap', (x) => {
+          eventcalled = x.type;
+        });
       });
     });
 
@@ -29,8 +31,40 @@ describe('Opens Testing Environment', () => {
       cy.get(mapSelector).click(point);
     });
 
-    cy.window().then(({}) => {
+    cy.window().then(() => {
       expect(eventcalled).to.equal('pm:snap');
     });
   });
+
+  it('Drags ImageOverlay', () => {
+    let eventcalled = false;
+    let io;
+    cy.window().then(({ map, L }) => {
+      map.setView([18.74469, 72.1258], 10);
+      const icon =
+        'https://camo.githubusercontent.com/33fa9a94048274f81a806631ca881a55c2aa8f0a/68747470733a2f2f66696c652d6a787a796a67717775742e6e6f772e73682f';
+      io = L.imageOverlay(
+        icon,
+        [
+          [18.74469, 72.1258],
+          [18.94469, 72.3258],
+        ],
+        { interactive: true }
+      ).addTo(map);
+
+      io.pm._simulateMouseDownEvent = () => {
+        eventcalled = true;
+      };
+    });
+
+    cy.toolbarButton('drag').click();
+
+    cy.window().then(() => {
+      cy.get(io._image).trigger('mousedown');
+    });
+
+    cy.window().then(() => {
+      expect(eventcalled).to.equal(true);
+    });
+  });
 });

cypress/integration/line.spec.js

@@ -14,6 +14,15 @@ describe('Draw & Edit Line', () => {
   });
 
   it('removes last vertex', () => {
+    let eventCalled = false;
+    cy.window().then(({ map }) => {
+      map.on('pm:drawstart', (e) => {
+        e.workingLayer.on('pm:vertexremoved', () => {
+          eventCalled = true;
+        });
+      });
+    });
+
     cy.toolbarButton('polyline').click();
 
     cy.get(mapSelector)
@@ -31,6 +40,9 @@ describe('Draw & Edit Line', () => {
     cy.get('.button-container.active .action-removeLastVertex').click();
 
     cy.hasVertexMarkers(3);
+    cy.window().then(() => {
+      expect(eventCalled).to.eq(true);
+    });
   });
 
   it('respects custom style', () => {
@@ -268,4 +280,22 @@ describe('Draw & Edit Line', () => {
 
     cy.hasVertexMarkers(0);
   });
+
+  it('remove line if enabled', () => {
+    cy.toolbarButton('polyline')
+      .click()
+      .closest('.button-container')
+      .should('have.class', 'active');
+
+    cy.get(mapSelector).click(200, 200).click(250, 250).click(250, 250);
+
+    cy.toolbarButton('edit').click();
+
+    cy.hasLayers(7);
+    cy.window().then(({ map }) => {
+      const layer = map.pm.getGeomanDrawLayers()[0];
+      layer.remove();
+    });
+    cy.hasLayers(2);
+  });
 });

cypress/integration/marker.spec.js

@@ -239,4 +239,23 @@ describe('Draw Marker', () => {
       expect(2).to.eq(map.pm.getGeomanDrawLayers().length);
     });
   });
+  it('fires pm:update after edit', () => {
+    cy.toolbarButton('marker').click();
+    cy.get(mapSelector).click(350, 250);
+
+    let updateFired = false;
+    cy.window().then(({ map }) => {
+      const marker = map.pm.getGeomanDrawLayers()[0];
+      marker.on('pm:update', () => {
+        updateFired = true;
+      });
+      marker.pm.enable();
+      marker.pm._layerEdited = true;
+      marker.pm.disable();
+    });
+
+    cy.window().then(() => {
+      expect(updateFired).to.eq(true);
+    });
+  });
 });