Refactor events and create new Mixin-Class for events

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

@@ -87,10 +87,7 @@ Draw.Circle = Draw.extend({
     this._otherSnapLayers = [];
 
     // fire drawstart event
-    L.PM.Utils._fireEvent(this._map,'pm:drawstart', {
-      shape: this._shape,
-      workingLayer: this._layer,
-    });
+    this._fireDrawStart();
     this._setGlobalDrawMode();
   },
   disable() {
@@ -124,7 +121,7 @@ Draw.Circle = Draw.extend({
     }
 
     // fire drawend event
-    L.PM.Utils._fireEvent(this._map,'pm:drawend', { shape: this._shape });
+    this._fireDrawEnd();
     this._setGlobalDrawMode();
   },
   enabled() {
@@ -209,11 +206,7 @@ Draw.Circle = Draw.extend({
         getTranslation('tooltips.finishCircle')
       );
 
-      L.PM.Utils._fireEvent(this._layer,'pm:centerplaced', {
-        workingLayer: this._layer,
-        latlng,
-        shape: this._shape
-      });
+      this._fireCenterPlaced();
     }
   },
   _finishShape(e) {
@@ -260,10 +253,7 @@ Draw.Circle = Draw.extend({
     }
 
     // fire the pm:create event and pass shape and layer
-    L.PM.Utils._fireEvent(this._map,'pm:create', {
-      shape: this._shape,
-      layer: circleLayer,
-    });
+    this._fireCreate(circleLayer);
 
     // disable drawing
     this.disable();

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

@@ -120,10 +120,7 @@ Draw.CircleMarker = Draw.Marker.extend({
     this._layer.bringToBack();
 
     // fire drawstart event
-    L.PM.Utils._fireEvent(this._map,'pm:drawstart', {
-      shape: this._shape,
-      workingLayer: this._layer,
-    });
+    this._fireDrawStart();
     this._setGlobalDrawMode();
   },
   disable() {
@@ -172,7 +169,7 @@ Draw.CircleMarker = Draw.Marker.extend({
     }
 
     // fire drawend event
-    L.PM.Utils._fireEvent(this._map,'pm:drawend', { shape: this._shape });
+    this._fireDrawEnd();
     this._setGlobalDrawMode();
   },
   _placeCenterMarker(e) {
@@ -206,11 +203,7 @@ Draw.CircleMarker = Draw.Marker.extend({
         getTranslation('tooltips.finishCircle')
       );
 
-      L.PM.Utils._fireEvent(this._layer,'pm:centerplaced', {
-        shape: this._shape,
-        workingLayer: this._layer,
-        latlng,
-      });
+      this._fireCenterPlaced();
     }
   },
   _syncHintLine() {
@@ -284,11 +277,7 @@ Draw.CircleMarker = Draw.Marker.extend({
     }
 
     // fire the pm:create event and pass shape and marker
-    L.PM.Utils._fireEvent(this._map,'pm:create', {
-      shape: this._shape,
-      marker, // DEPRECATED
-      layer: marker,
-    });
+    this._fireCreate(marker);
 
     this._cleanupSnapping();
 
@@ -337,10 +326,7 @@ Draw.CircleMarker = Draw.Marker.extend({
     }
 
     // fire the pm:create event and pass shape and layer
-    L.PM.Utils._fireEvent(this._map,'pm:create', {
-      shape: this._shape,
-      layer: circleLayer,
-    });
+    this._fireCreate(circleLayer);
 
     // disable drawing
     this.disable();

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

@@ -38,21 +38,13 @@ Draw.Cut = Draw.Polygon.extend({
 
     this._editedLayers.forEach(({layer, originalLayer}) =>{
       // fire pm:cut on the cutted layer
-      L.PM.Utils._fireEvent(originalLayer,'pm:cut', {
-        shape: this._shape,
-        layer,
-        originalLayer,
-      });
+      this._fireCut(originalLayer,layer,originalLayer);
 
       // fire pm:cut on the map
-      L.PM.Utils._fireEvent(this._map,'pm:cut', {
-        shape: this._shape,
-        layer,
-        originalLayer,
-      });
+      this._fireCut(this._map,layer,originalLayer);
 
       // fire edit event after cut
-      L.PM.Utils._fireEvent(originalLayer,'pm:edit', { layer: originalLayer, shape: originalLayer.pm.getShape()});
+      originalLayer.pm._fireEdit();
     });
     this._editedLayers = [];
 
@@ -143,7 +135,7 @@ Draw.Cut = Draw.Polygon.extend({
       }
       this._setPane(resultLayer,'layerPane');
       const resultingLayer = resultLayer.addTo(this._map.pm._getContainingLayer());
-
+      this._addDrawnLayerProp(resultingLayer);
       // give the new layer the original options
       resultingLayer.pm.enable(l.pm.options);
       resultingLayer.pm.disable();

src/js/Draw/L.PM.Draw.Line.js

@@ -95,10 +95,7 @@ Draw.Line = Draw.extend({
 
 
     // fire drawstart event
-    L.PM.Utils._fireEvent(this._map,'pm:drawstart', {
-      shape: this._shape,
-      workingLayer: this._layer,
-    });
+    this._fireDrawStart();
     this._setGlobalDrawMode();
   },
   disable() {
@@ -137,7 +134,7 @@ Draw.Line = Draw.extend({
     }
 
     // fire drawend event
-    L.PM.Utils._fireEvent(this._map,'pm:drawend', { shape: this._shape });
+    this._fireDrawEnd();
     this._setGlobalDrawMode();
 
   },
@@ -260,12 +257,7 @@ Draw.Line = Draw.extend({
 
     this._hintline.setLatLngs([latlng, latlng]);
 
-    L.PM.Utils._fireEvent(this._layer,'pm:vertexadded', {
-      shape: this._shape,
-      workingLayer: this._layer,
-      marker: newMarker,
-      latlng,
-    });
+    this._fireVertexAdded(newMarker, undefined, latlng, "Draw");
 
     // check if we should finish on snap
     if (this.options.finishOn === 'snap' && this._hintMarker._snapped) {
@@ -330,10 +322,7 @@ Draw.Line = Draw.extend({
     polylineLayer.addTo(this._map.pm._getContainingLayer());
 
     // fire the pm:create event and pass shape and layer
-    L.PM.Utils._fireEvent(this._map,'pm:create', {
-      shape: this._shape,
-      layer: polylineLayer,
-    });
+    this._fireCreate(polylineLayer);
 
     if (this.options.snappable) {
       this._cleanupSnapping();

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

@@ -57,10 +57,7 @@ Draw.Marker = Draw.extend({
     }
 
     // fire drawstart event
-    L.PM.Utils._fireEvent(this._map,'pm:drawstart', {
-      shape: this._shape,
-      workingLayer: this._layer,
-    });
+    this._fireDrawStart();
     this._setGlobalDrawMode();
   },
   disable() {
@@ -98,7 +95,7 @@ Draw.Marker = Draw.extend({
     }
 
     // fire drawend event
-    L.PM.Utils._fireEvent(this._map,'pm:drawend', { shape: this._shape });
+    this._fireDrawEnd();
     this._setGlobalDrawMode();
   },
   enabled() {
@@ -168,11 +165,7 @@ Draw.Marker = Draw.extend({
     }
 
     // fire the pm:create event and pass shape and marker
-    L.PM.Utils._fireEvent(this._map,'pm:create', {
-      shape: this._shape,
-      marker, // DEPRECATED
-      layer: marker,
-    });
+    this._fireCreate(marker);
 
     this._cleanupSnapping();
 

src/js/Draw/L.PM.Draw.Polygon.js

@@ -1,5 +1,4 @@
 import Draw from './L.PM.Draw';
-
 import { getTranslation } from '../helpers';
 
 Draw.Polygon = Draw.Line.extend({
@@ -83,10 +82,7 @@ Draw.Polygon = Draw.Line.extend({
     polygonLayer.addTo(this._map.pm._getContainingLayer());
 
     // fire the pm:create event and pass shape and layer
-    L.PM.Utils._fireEvent(this._map,'pm:create', {
-      shape: this._shape,
-      layer: polygonLayer,
-    });
+    this._fireCreate(polygonLayer);
 
     // clean up snapping states
     this._cleanupSnapping();

src/js/Draw/L.PM.Draw.Rectangle.js

@@ -97,10 +97,7 @@ Draw.Rectangle = Draw.extend({
     this._otherSnapLayers = [];
 
     // fire drawstart event
-    L.PM.Utils._fireEvent(this._map,'pm:drawstart', {
-      shape: this._shape,
-      workingLayer: this._layer,
-    });
+    this._fireDrawStart();
     this._setGlobalDrawMode();
 
   },
@@ -133,7 +130,7 @@ Draw.Rectangle = Draw.extend({
       this._cleanupSnapping();
     }
     // fire drawend event
-    L.PM.Utils._fireEvent(this._map,'pm:drawend', { shape: this._shape });
+    this._fireDrawEnd();
     this._setGlobalDrawMode();
 
   },
@@ -272,10 +269,7 @@ Draw.Rectangle = Draw.extend({
     rectangleLayer.addTo(this._map.pm._getContainingLayer());
 
     // fire the pm:create event and pass shape and layer
-    L.PM.Utils._fireEvent(this._map,'pm:create', {
-      shape: this._shape,
-      layer: rectangleLayer,
-    });
+    this._fireCreate(rectangleLayer);
 
     // disable drawing
     this.disable();

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

@@ -1,8 +1,9 @@
 import merge from 'lodash/merge';
 import SnapMixin from '../Mixins/Snapping';
+import EventMixin from "../Mixins/Events";
 
 const Draw = L.Class.extend({
-  includes: [SnapMixin],
+  includes: [SnapMixin, EventMixin],
   options: {
     snappable: true,
     snapDistance: 20,
@@ -67,6 +68,10 @@ const Draw = L.Class.extend({
     // if somebody wants to know what shapes are available
     return this.shapes;
   },
+  getShape() {
+    // return the shape of the current drawing layer
+    return this._shape;
+  },
   enable(shape, options) {
     if (!shape) {
       throw new Error(
@@ -109,16 +114,9 @@ const Draw = L.Class.extend({
   _setGlobalDrawMode() {
     // extended to all PM.Draw shapes
     if (this._shape === "Cut") {
-      L.PM.Utils._fireEvent(this._map,'pm:globalcutmodetoggled', {
-        enabled: !!this._enabled,
-        map: this._map,
-      });
+      this._fireGlobalCutModeToggled();
     } else {
-      L.PM.Utils._fireEvent(this._map,'pm:globaldrawmodetoggled', {
-        enabled: this._enabled,
-        shape: this._shape,
-        map: this._map,
-      });
+      this._fireGlobalDrawModeToggled();
     }
 
     const layers = L.PM.Utils.findLayers(this._map);

src/js/Edit/L.PM.Edit.Circle.js

@@ -35,7 +35,7 @@ Edit.Circle = Edit.extend({
     // create polygon around the circle border
     this._updateHiddenPolyCircle();
 
-    L.PM.Utils._fireEvent(this._layer,'pm:enable', { layer: this._layer, shape: this.getShape() });
+    this._fireEnable();
   },
   disable(layer = this._layer) {
     // if it's not enabled, it doesn't need to be disabled
@@ -62,11 +62,11 @@ Edit.Circle = Edit.extend({
 
 
     if (this._layerEdited) {
-      L.PM.Utils._fireEvent(this._layer,'pm:update', { layer: this._layer, shape: this.getShape() });
+      this._fireUpdate();
     }
     this._layerEdited = false;
 
-    L.PM.Utils._fireEvent(this._layer,'pm:disable', { layer: this._layer, shape: this.getShape() });
+    this._fireDisable();
     return true;
   },
   enabled() {
@@ -181,11 +181,7 @@ Edit.Circle = Edit.extend({
 
     this._updateHiddenPolyCircle();
 
-    L.PM.Utils._fireEvent(this._layer,'pm:centerplaced', {
-      layer: this._layer,
-      latlng: center,
-      shape: this.getShape()
-    });
+    this._fireCenterPlaced("Edit");
   },
   _syncCircleRadius() {
     const A = this._centerMarker.getLatLng();
@@ -221,46 +217,16 @@ Edit.Circle = Edit.extend({
     this._layer.off('pm:dragstart', this._unsnap, this);
   },
   _onMarkerDragStart(e) {
-    L.PM.Utils._fireEvent(this._layer,'pm:markerdragstart', {
-      layer: this._layer,
-      markerEvent: e,
-      shape: this.getShape(),
-      indexPath: undefined
-    });
+    this._fireMarkerDragStart(e);
   },
   _onMarkerDrag(e) {
-    L.PM.Utils._fireEvent(this._layer,'pm:markerdrag', {
-      layer: this._layer,
-      markerEvent: e,
-      shape: this.getShape(),
-      indexPath: undefined
-    });
+    this._fireMarkerDrag(e);
   },
   _onMarkerDragEnd(e) {
     // fire edit event
     this._fireEdit();
-
-    // fire markerdragend event
-    L.PM.Utils._fireEvent(this._layer,'pm:markerdragend', {
-      layer: this._layer,
-      markerEvent: e,
-      shape: this.getShape(),
-      indexPath: undefined
-    });
-  },
-  _fireEdit() {
-    // fire edit event
-    L.PM.Utils._fireEvent(this._layer,'pm:edit', { layer: this._layer, shape: this.getShape() });
     this._layerEdited = true;
-  },
-  _fireDragStart() {
-    L.PM.Utils._fireEvent(this._layer,'pm:dragstart', { layer: this._layer, shape: this.getShape() });
-  },
-  _fireDrag(e) {
-    L.PM.Utils._fireEvent(this._layer,'pm:drag', Object.assign({},e, {shape:this.getShape()}));
-  },
-  _fireDragEnd() {
-    L.PM.Utils._fireEvent(this._layer,'pm:dragend', { layer: this._layer, shape: this.getShape() });
+    this._fireMarkerDragEnd(e);
   },
   _updateHiddenPolyCircle() {
     if (this._hiddenPolyCircle) {