Add event support for nested LayerGroups (#695). Fixes #549 (minor)

* WIP

* Layergroup refactoring -> events now called directly instead over a listener on the child layer

* Fix double import

Author: Falke-Design

cypress/fixtures/FeatureCollectionEventFire.json

@@ -0,0 +1,29 @@
+{
+    "type":"FeatureCollection",
+    "features":[
+        {
+            "type":"Feature",
+            "geometry":{
+                "type":"MultiPoint",
+                "coordinates":[
+                    [
+                        32.83604819,
+                        40.0169319
+                    ]
+                ]
+            }
+        },
+        {
+            "type":"Feature",
+            "geometry":{
+                "type":"MultiPoint",
+                "coordinates":[
+                    [
+                        32.8298979,
+                        40.02567418
+                    ]
+                ]
+            }
+        }
+    ]
+}

cypress/integration/layergroup.spec.js

@@ -1,5 +1,5 @@
 describe('Edit LayerGroup', () => {
-   const mapSelector = '#map';
+  const mapSelector = '#map';
 
   it('correctly enables geojson featureCollection', () => {
     cy.drawShape('FeatureCollectionWithCircles');
@@ -43,8 +43,7 @@ describe('Edit LayerGroup', () => {
   });
 
   it('supports clearLayers', () => {
-
-    cy.window().then(({ L, map }) => {
+    cy.window().then(({L, map}) => {
       const featureGroup = new L.FeatureGroup();
       featureGroup.addTo(map)
       featureGroup.addLayer(new L.Marker([19.04469, 72.9258]));
@@ -60,10 +59,10 @@ describe('Edit LayerGroup', () => {
     let fg2;
 
     // Add layer to group
-    cy.window().then(({ L, map }) => {
+    cy.window().then(({L, map}) => {
       fg = L.featureGroup().addTo(map);
       fg2 = L.featureGroup().addTo(map);
-      map.on('click',(e)=>console.log(map.latLngToContainerPoint(e.latlng)));
+      map.on('click', (e) => console.log(map.latLngToContainerPoint(e.latlng)));
 
       map.pm.setGlobalOptions({layerGroup: fg});
 
@@ -80,15 +79,15 @@ describe('Edit LayerGroup', () => {
     });
 
     // check if layer is on group and will be removed from map, when group is removed
-    cy.window().then(({ map }) => {
+    cy.window().then(({map}) => {
       fg.removeFrom(map);
       cy.hasLayers(3);
 
       const count = fg.getLayers().length;
       expect(count).to.equal(1);
     });
     // delete layer from group and map
-    cy.window().then(({ map }) => {
+    cy.window().then(({map}) => {
       fg.addTo(map);
 
       cy.toolbarButton('delete')
@@ -111,7 +110,7 @@ describe('Edit LayerGroup', () => {
         .click(200, 200)
         .click(400, 350);
     });
-    cy.window().then(({ map }) => {
+    cy.window().then(({map}) => {
       map.pm.setGlobalOptions({layerGroup: fg2});
       cy.hasLayers(5);
 
@@ -149,4 +148,131 @@ describe('Edit LayerGroup', () => {
       cy.hasLayers(4);
     });
   })
+
+
+  it('pass the fired event of the layer to group', () => {
+    let fg;
+    let firedEvent = "";
+
+    cy.window().then(({map, L}) => {
+      fg = L.featureGroup();
+      fg.on("pm:cut", (e) => {
+        firedEvent = e.type;
+      });
+
+      map.on('pm:create', (e) => {
+        e.layer.addTo(fg);
+      })
+    });
+    // activate polygon drawing
+    cy.toolbarButton('polygon')
+      .click()
+      .closest('.button-container')
+      .should('have.class', 'active');
+
+    // draw a polygon
+    cy.get(mapSelector)
+      .click(90, 250)
+      .click(150, 50)
+      .click(500, 50)
+      .click(500, 300)
+      .click(300, 350)
+      .click(90, 250);
+
+    // activate cutting drawing
+    cy.toolbarButton('cut')
+      .click()
+      .closest('.button-container')
+      .should('have.class', 'active');
+
+    // draw a polygon to cut
+    cy.get(mapSelector)
+      .click(450, 100)
+      .click(450, 150)
+      .click(400, 150)
+      .click(390, 140)
+      .click(390, 100)
+      .click(450, 100);
+
+    cy.window().then(() => {
+      expect(firedEvent).to.equal('pm:cut');
+    });
+  });
+
+  it('event is fired only once if group has multiple sub-groups with the same layer', () => {
+
+    let firedEventCount = 0;
+    cy.window().then(({map, L}) => {
+      const group = L.featureGroup().addTo(map);
+      const layers = L.featureGroup().addTo(group);
+      const markers = L.featureGroup().addTo(group);
+      const markersChild = L.featureGroup().addTo(markers);
+      L.marker(map.getCenter()).addTo(layers).addTo(markers).addTo(markersChild);
+
+      group.on('pm:enable', () => {
+        firedEventCount += 1
+      });
+    });
+
+    cy.wait(100);
+
+    cy.toolbarButton('edit').click();
+
+    cy.window().then(() => {
+      expect(firedEventCount).to.equal(1);
+    });
+  });
+
+  it('event is fired on every parent group of a layer (once)', () => {
+
+    let firedEventCount = 0;
+    cy.window().then(({map, L}) => {
+      const group = L.featureGroup().addTo(map);
+      const layers = L.featureGroup().addTo(group);
+      const markers = L.featureGroup().addTo(group);
+      const markersChild = L.featureGroup().addTo(markers);
+      L.marker(map.getCenter()).addTo(layers).addTo(markers).addTo(markersChild);
+
+      group.on('pm:enable', () => {
+        firedEventCount += 1
+      });
+      layers.on('pm:enable', () => {
+        firedEventCount += 1
+      });
+      markers.on('pm:enable', () => {
+        firedEventCount += 1
+      });
+      markersChild.on('pm:enable', () => {
+        firedEventCount += 1
+      });
+    });
+
+    cy.wait(100);
+
+    cy.toolbarButton('edit').click();
+
+    cy.window().then(() => {
+      expect(firedEventCount).to.equal(4);
+    });
+  });
+
+  it('event is fired on L.geoJson when it has FeatureCollections', () => {
+    cy.drawShape('FeatureCollectionEventFire');
+
+    let firedEventCount = 0;
+    cy.get('@feature').then(feature => {
+      feature.on('pm:enable', () => {
+        firedEventCount += 1
+      });
+    });
+
+    cy.wait(100);
+
+    cy.toolbarButton('edit').click();
+
+    cy.window().then(() => {
+      expect(firedEventCount).to.equal(2);
+    });
+  });
+
 });

cypress/support/commands.js

@@ -173,6 +173,19 @@ Cypress.Commands.add('drawShape', (shape, ignore) => {
         });
     }
 
+    if (shape === 'FeatureCollectionEventFire') {
+      cy.fixture(shape)
+        .then(json => {
+          //
+          const layer = L.geoJSON(json).addTo(map);
+          const bounds = layer.getBounds();
+          map.fitBounds(bounds);
+
+          return layer;
+        })
+        .as('feature');
+    }
+
     if (shape === 'FeatureCollectionWithCircles') {
       cy.fixture(shape, ignore)
         .then(json => {

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

@@ -1,6 +1,7 @@
 import Draw from './L.PM.Draw';
 
 import {destinationOnLine, getTranslation} from '../helpers';
+import Utils from "../L.PM.Utils";
 
 Draw.Circle = Draw.extend({
   initialize(map) {
@@ -83,7 +84,7 @@ Draw.Circle = Draw.extend({
     this._otherSnapLayers = [];
 
     // fire drawstart event
-    this._map.fire('pm:drawstart', {
+    Utils._fireEvent(this._map,'pm:drawstart', {
       shape: this._shape,
       workingLayer: this._layer,
     });
@@ -120,7 +121,7 @@ Draw.Circle = Draw.extend({
     }
 
     // fire drawend event
-    this._map.fire('pm:drawend', { shape: this._shape });
+    Utils._fireEvent(this._map,'pm:drawend', { shape: this._shape });
     this._setGlobalDrawMode();
   },
   enabled() {
@@ -205,7 +206,7 @@ Draw.Circle = Draw.extend({
         getTranslation('tooltips.finishCircle')
       );
 
-      this._layer.fire('pm:centerplaced', {
+      Utils._fireEvent(this._layer,'pm:centerplaced', {
         workingLayer: this._layer,
         latlng,
         shape: this._shape
@@ -249,7 +250,7 @@ Draw.Circle = Draw.extend({
     }
 
     // fire the pm:create event and pass shape and layer
-    this._map.fire('pm:create', {
+    Utils._fireEvent(this._map,'pm:create', {
       shape: this._shape,
       layer: circleLayer,
     });

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

@@ -1,6 +1,7 @@
 import Draw from './L.PM.Draw';
 
-import {destinationOnLine, getTranslation} from '../helpers';
+import {destinationOnLine, getTranslation } from '../helpers';
+import Utils from "../L.PM.Utils";
 
 Draw.CircleMarker = Draw.Marker.extend({
   initialize(map) {
@@ -116,7 +117,7 @@ Draw.CircleMarker = Draw.Marker.extend({
     this._layer.bringToBack();
 
     // fire drawstart event
-    this._map.fire('pm:drawstart', {
+    Utils._fireEvent(this._map,'pm:drawstart', {
       shape: this._shape,
       workingLayer: this._layer,
     });
@@ -168,7 +169,7 @@ Draw.CircleMarker = Draw.Marker.extend({
     }
 
     // fire drawend event
-    this._map.fire('pm:drawend', { shape: this._shape });
+    Utils._fireEvent(this._map,'pm:drawend', { shape: this._shape });
     this._setGlobalDrawMode();
   },
   _placeCenterMarker(e) {
@@ -202,7 +203,7 @@ Draw.CircleMarker = Draw.Marker.extend({
         getTranslation('tooltips.finishCircle')
       );
 
-      this._layer.fire('pm:centerplaced', {
+      Utils._fireEvent(this._layer,'pm:centerplaced', {
         shape: this._shape,
         workingLayer: this._layer,
         latlng,
@@ -274,7 +275,7 @@ Draw.CircleMarker = Draw.Marker.extend({
     }
 
     // fire the pm:create event and pass shape and marker
-    this._map.fire('pm:create', {
+    Utils._fireEvent(this._map,'pm:create', {
       shape: this._shape,
       marker, // DEPRECATED
       layer: marker,
@@ -318,7 +319,7 @@ Draw.CircleMarker = Draw.Marker.extend({
     }
 
     // fire the pm:create event and pass shape and layer
-    this._map.fire('pm:create', {
+    Utils._fireEvent(this._map,'pm:create', {
       shape: this._shape,
       layer: circleLayer,
     });

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

@@ -39,21 +39,21 @@ Draw.Cut = Draw.Polygon.extend({
 
     this._editedLayers.forEach(({layer, originalLayer}) =>{
       // fire pm:cut on the cutted layer
-      originalLayer.fire('pm:cut', {
+      Utils._fireEvent(originalLayer,'pm:cut', {
         shape: this._shape,
         layer,
         originalLayer,
       });
 
       // fire pm:cut on the map
-      this._map.fire('pm:cut', {
+      Utils._fireEvent(this._map,'pm:cut', {
         shape: this._shape,
         layer,
         originalLayer,
       });
 
       // fire edit event after cut
-      originalLayer.fire('pm:edit', { layer: originalLayer, shape: originalLayer.pm.getShape()});
+      Utils._fireEvent(originalLayer,'pm:edit', { layer: originalLayer, shape: originalLayer.pm.getShape()});
     });
     this._editedLayers = [];