From 858a7d7fbe1272fef2680d72e1e6afae241d1745 Mon Sep 17 00:00:00 2001 From: falke-design Date: Tue, 6 Apr 2021 19:12:57 +0200 Subject: [PATCH 1/5] Refactor events and create new Mixin-Class for events --- src/js/Draw/L.PM.Draw.Circle.js | 18 +- src/js/Draw/L.PM.Draw.CircleMarker.js | 24 +-- src/js/Draw/L.PM.Draw.Cut.js | 14 +- src/js/Draw/L.PM.Draw.Line.js | 19 +-- src/js/Draw/L.PM.Draw.Marker.js | 13 +- src/js/Draw/L.PM.Draw.Polygon.js | 6 +- src/js/Draw/L.PM.Draw.Rectangle.js | 12 +- src/js/Draw/L.PM.Draw.js | 14 +- src/js/Edit/L.PM.Edit.Circle.js | 49 +----- src/js/Edit/L.PM.Edit.CircleMarker.js | 45 ++--- src/js/Edit/L.PM.Edit.ImageOverlay.js | 13 +- src/js/Edit/L.PM.Edit.Line.js | 72 ++------ src/js/Edit/L.PM.Edit.Marker.js | 23 ++- src/js/Edit/L.PM.Edit.Rectangle.js | 21 +-- src/js/Edit/L.PM.Edit.js | 3 +- src/js/L.PM.Map.js | 10 +- src/js/Mixins/Dragging.js | 15 -- src/js/Mixins/Events.js | 236 ++++++++++++++++++++++++++ src/js/Mixins/Modes/Mode.Drag.js | 10 +- src/js/Mixins/Modes/Mode.Edit.js | 8 +- src/js/Mixins/Modes/Mode.Removal.js | 19 +-- src/js/Mixins/Snapping.js | 12 +- src/js/Toolbar/L.Controls.js | 6 +- 23 files changed, 336 insertions(+), 326 deletions(-) create mode 100644 src/js/Mixins/Events.js diff --git a/src/js/Draw/L.PM.Draw.Circle.js b/src/js/Draw/L.PM.Draw.Circle.js index df21e7c3..1a91ecdd 100644 --- a/src/js/Draw/L.PM.Draw.Circle.js +++ b/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(); diff --git a/src/js/Draw/L.PM.Draw.CircleMarker.js b/src/js/Draw/L.PM.Draw.CircleMarker.js index 3d8fcd52..aa89cdf9 100644 --- a/src/js/Draw/L.PM.Draw.CircleMarker.js +++ b/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(); diff --git a/src/js/Draw/L.PM.Draw.Cut.js b/src/js/Draw/L.PM.Draw.Cut.js index e2201912..967bcccf 100644 --- a/src/js/Draw/L.PM.Draw.Cut.js +++ b/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()}); + this._fireEdit(originalLayer); }); this._editedLayers = []; diff --git a/src/js/Draw/L.PM.Draw.Line.js b/src/js/Draw/L.PM.Draw.Line.js index 370aa528..05f28fe6 100644 --- a/src/js/Draw/L.PM.Draw.Line.js +++ b/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, latlng); // 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(); diff --git a/src/js/Draw/L.PM.Draw.Marker.js b/src/js/Draw/L.PM.Draw.Marker.js index 5960da7b..cb8e5b2e 100644 --- a/src/js/Draw/L.PM.Draw.Marker.js +++ b/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(); diff --git a/src/js/Draw/L.PM.Draw.Polygon.js b/src/js/Draw/L.PM.Draw.Polygon.js index edd593f2..5f118c43 100644 --- a/src/js/Draw/L.PM.Draw.Polygon.js +++ b/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(); diff --git a/src/js/Draw/L.PM.Draw.Rectangle.js b/src/js/Draw/L.PM.Draw.Rectangle.js index 9e500ad0..97881dbc 100644 --- a/src/js/Draw/L.PM.Draw.Rectangle.js +++ b/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(); }, @@ -262,10 +259,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(); diff --git a/src/js/Draw/L.PM.Draw.js b/src/js/Draw/L.PM.Draw.js index ac7768d3..a0132132 100644 --- a/src/js/Draw/L.PM.Draw.js +++ b/src/js/Draw/L.PM.Draw.js @@ -1,7 +1,8 @@ import SnapMixin from '../Mixins/Snapping'; +import {EventMixinDraw, EventMixinSnapping} from "../Mixins/Events"; const Draw = L.Class.extend({ - includes: [SnapMixin], + includes: [SnapMixin, EventMixinDraw, EventMixinSnapping], options: { snappable: true, snapDistance: 20, @@ -102,16 +103,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); diff --git a/src/js/Edit/L.PM.Edit.Circle.js b/src/js/Edit/L.PM.Edit.Circle.js index 13ba88b5..a9d46296 100644 --- a/src/js/Edit/L.PM.Edit.Circle.js +++ b/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(); }, _syncCircleRadius() { const A = this._centerMarker.getLatLng(); @@ -221,46 +217,15 @@ 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) { diff --git a/src/js/Edit/L.PM.Edit.CircleMarker.js b/src/js/Edit/L.PM.Edit.CircleMarker.js index e7e1b6e0..08034893 100644 --- a/src/js/Edit/L.PM.Edit.CircleMarker.js +++ b/src/js/Edit/L.PM.Edit.CircleMarker.js @@ -35,7 +35,7 @@ Edit.CircleMarker = 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) { // prevent disabling if layer is being dragged @@ -69,10 +69,10 @@ Edit.CircleMarker = Edit.extend({ // only fire events if it was enabled before if (this.enabled()) { 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(); } layer.pm._enabled = false; @@ -216,11 +216,7 @@ Edit.CircleMarker = Edit.extend({ this._updateHiddenPolyCircle(); - L.PM.Utils._fireEvent(this._layer,'pm:centerplaced', { - layer: this._layer, - latlng: center, - shape: this.getShape() - }); + this._fireCenterPlaced(); }, _syncMarkers() { const center = this._layer.getLatLng(); @@ -262,41 +258,24 @@ Edit.CircleMarker = Edit.extend({ this.disable(); } this._layer.remove(); - L.PM.Utils._fireEvent(this._layer,'pm:remove', { layer: this._layer, shape: this.getShape() }); - L.PM.Utils._fireEvent(this._map,'pm:remove', { layer: this._layer, shape: this.getShape() }); + this._fireRemove(this._layer); + this._fireRemove(this._map, this._layer); }, _onDragStart(){ this._map.pm.Draw.CircleMarker._layerIsDragging = true; }, _onMarkerDragStart(e) { - L.PM.Utils._fireEvent(this._layer,'pm:markerdragstart', { - markerEvent: e, - layer: this._layer, - 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) { this._map.pm.Draw.CircleMarker._layerIsDragging = false; - 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; + if (this.options.editable) { + this._fireEdit(); + } + this._fireMarkerDragEnd(e); }, // _initSnappableMarkers when option editable is not true _initSnappableMarkersDrag() { diff --git a/src/js/Edit/L.PM.Edit.ImageOverlay.js b/src/js/Edit/L.PM.Edit.ImageOverlay.js index a9294667..8cf12d77 100644 --- a/src/js/Edit/L.PM.Edit.ImageOverlay.js +++ b/src/js/Edit/L.PM.Edit.ImageOverlay.js @@ -37,7 +37,7 @@ Edit.ImageOverlay = Edit.extend({ // create markers for four corners of ImageOverlay this._otherSnapLayers = L.PM.Edit.Rectangle.prototype._findCorners.apply(this); - L.PM.Utils._fireEvent(this._layer,'pm:enable', { layer: this._layer, shape: this.getShape() }); + this._fireEnable(); }, disable(layer = this._layer) { // prevent disabling if layer is being dragged @@ -55,19 +55,14 @@ Edit.ImageOverlay = Edit.extend({ // only fire events if it was enabled before if (!this.enabled()) { if (this._layerEdited) { - L.PM.Utils._fireEvent(layer,'pm:update', { layer, shape: this.getShape() }); + this._fireUpdate(); } this._layerEdited = false; - L.PM.Utils._fireEvent(layer,'pm:disable', { layer, shape: this.getShape() }); + this._fireDisable(); } this._layer.off('contextmenu', this._removeMarker, this); layer.pm._enabled = false; return true; - }, - _fireEdit() { - // fire edit event - L.PM.Utils._fireEvent(this._layer,'pm:edit', { layer: this._layer, shape: this.getShape() }); - this._layerEdited = true; - }, + } }); diff --git a/src/js/Edit/L.PM.Edit.Line.js b/src/js/Edit/L.PM.Edit.Line.js index 4ca05a0a..650010b1 100644 --- a/src/js/Edit/L.PM.Edit.Line.js +++ b/src/js/Edit/L.PM.Edit.Line.js @@ -68,7 +68,7 @@ Edit.Line = Edit.extend({ }else{ this.cachedColor = undefined; } - L.PM.Utils._fireEvent(this._layer,'pm:enable', { layer: this._layer, shape: this.getShape() }); + this._fireEnable(); }, disable(poly = this._layer) { // if it's not enabled, it doesn't need to be disabled @@ -105,10 +105,10 @@ Edit.Line = 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() { @@ -306,13 +306,7 @@ Edit.Line = Edit.extend({ // fire edit event this._fireEdit(); - L.PM.Utils._fireEvent(this._layer,'pm:vertexadded', { - layer: this._layer, - marker: newM, - indexPath: this.findDeepMarkerIndex(this._markers, newM).indexPath, - latlng, - shape: this.getShape() - }); + this._fireVertexAdded(newM,this.findDeepMarkerIndex(this._markers, newM).indexPath, latlng); if (this.options.snappable) { this._initSnappableMarkers(); @@ -359,12 +353,9 @@ Edit.Line = Edit.extend({ this.isRed = true; } + // TODO: call kinks only once (hasSelfIntersection) // fire intersect event - L.PM.Utils._fireEvent(this._layer,'pm:intersect', { - layer: this._layer, - intersection: kinks(this._layer.toGeoJSON(15)), - shape: this.getShape() - }); + this._fireIntersect(kinks(this._layer.toGeoJSON(15))); } else { // if not, reset the style to the default color layer.setStyle({ color: this.cachedColor }); @@ -531,13 +522,8 @@ Edit.Line = Edit.extend({ this._fireEdit(); // fire vertex removal event - L.PM.Utils._fireEvent(this._layer,'pm:vertexremoved', { - layer: this._layer, - marker, - indexPath, - shape: this.getShape() - // TODO: maybe add latlng as well? - }); + // TODO: maybe fire latlng as well? + this._fireVertexRemoved(marker, indexPath); }, findDeepMarkerIndex(arr, marker) { // thanks for the function, Felix Heck @@ -635,12 +621,7 @@ Edit.Line = Edit.extend({ const marker = e.target; const { indexPath } = this.findDeepMarkerIndex(this._markers, marker); - L.PM.Utils._fireEvent(this._layer,'pm:markerdragstart', { - layer: this._layer, - markerEvent: e, - indexPath, - shape: this.getShape() - }); + this._fireMarkerDragStart(e, indexPath); // if self intersection isn't allowed, save the coords upon dragstart // in case we need to reset the layer @@ -653,7 +634,6 @@ Edit.Line = Edit.extend({ this.cachedColor = this._layer.options.color; } - if (!this.options.allowSelfIntersection && this.options.allowSelfIntersectionEdit && this.hasSelfIntersection()) { this._markerAllowedToDrag = this._checkMarkerAllowedToDrag(marker); } else { @@ -723,12 +703,7 @@ Edit.Line = Edit.extend({ if (!this.options.allowSelfIntersection) { this._handleLayerStyle(); } - L.PM.Utils._fireEvent(this._layer,'pm:markerdrag', { - layer: this._layer, - markerEvent: e, - shape: this.getShape(), - indexPath - }); + this._fireMarkerDrag(e, indexPath); }, _onMarkerDragEnd(e) { const marker = e.target; @@ -744,13 +719,7 @@ Edit.Line = Edit.extend({ const intersectionReset = !this.options.allowSelfIntersection && intersection; - L.PM.Utils._fireEvent(this._layer,'pm:markerdragend', { - layer: this._layer, - markerEvent: e, - indexPath, - shape: this.getShape(), - intersectionReset - }); + this._fireMarkerDragEnd(e, indexPath, intersectionReset); if (intersectionReset) { // reset coordinates @@ -767,12 +736,7 @@ Edit.Line = Edit.extend({ // check for selfintersection again (mainly to reset the style) this._handleLayerStyle(); - L.PM.Utils._fireEvent(this._layer,'pm:layerreset', { - layer: this._layer, - markerEvent: e, - indexPath, - shape: this.getShape() - }); + this._fireLayerReset(e,indexPath); return; } if (!this.options.allowSelfIntersection && this.options.allowSelfIntersectionEdit) { @@ -789,16 +753,6 @@ Edit.Line = Edit.extend({ const { indexPath } = this.findDeepMarkerIndex(this._markers, vertex); - L.PM.Utils._fireEvent(this._layer,'pm:vertexclick', { - layer: this._layer, - markerEvent: e, - indexPath, - shape: this.getShape() - }); - }, - _fireEdit() { - // fire edit event - this._layerEdited = true; - L.PM.Utils._fireEvent(this._layer,'pm:edit', { layer: this._layer, shape: this.getShape() }); + this._fireVertexClick(e,indexPath); }, }); diff --git a/src/js/Edit/L.PM.Edit.Marker.js b/src/js/Edit/L.PM.Edit.Marker.js index aa749caa..9994293b 100644 --- a/src/js/Edit/L.PM.Edit.Marker.js +++ b/src/js/Edit/L.PM.Edit.Marker.js @@ -21,7 +21,7 @@ Edit.Marker = Edit.extend({ this.applyOptions(); this._enabled = true; - L.PM.Utils._fireEvent(this._layer,'pm:enable', { layer: this._layer, shape: this.getShape() }); + this._fireEnable(); }, disable() { this._enabled = false; @@ -31,12 +31,13 @@ Edit.Marker = Edit.extend({ this._layer.off('contextmenu', this._removeMarker, this); - L.PM.Utils._fireEvent(this._layer,'pm:disable', { layer: this._layer, shape: this.getShape() }); - - if (this._layerEdited) { - L.PM.Utils._fireEvent(this._layer,'pm:update', { layer: this._layer, shape: this.getShape() }); + if (this.enabled()) { + if (this._layerEdited) { + this._fireUpdate(); + } + this._layerEdited = false; + this._fireDisable(); } - this._layerEdited = false; }, enabled() { return this._enabled; @@ -69,15 +70,11 @@ Edit.Marker = Edit.extend({ const marker = e.target; marker.remove(); // TODO: find out why this is fired manually, shouldn't it be catched by L.PM.Map 'layerremove'? - L.PM.Utils._fireEvent(marker,'pm:remove', { layer: marker, shape: this.getShape() }); - L.PM.Utils._fireEvent(this._map,'pm:remove', { layer: marker, shape: this.getShape() }); + this._fireRemove(marker); + this._fireRemove(this._map, marker); }, _onDragEnd(e) { - const marker = e.target; - - // fire the pm:edit event and pass shape and marker - L.PM.Utils._fireEvent(marker,'pm:edit', { layer: this._layer, shape: this.getShape() }); - this._layerEdited = true; + this._fireEdit(); }, // overwrite initSnappableMarkers from Snapping.js Mixin _initSnappableMarkers() { diff --git a/src/js/Edit/L.PM.Edit.Rectangle.js b/src/js/Edit/L.PM.Edit.Rectangle.js index a361e2e9..7c810552 100644 --- a/src/js/Edit/L.PM.Edit.Rectangle.js +++ b/src/js/Edit/L.PM.Edit.Rectangle.js @@ -86,12 +86,7 @@ Edit.Rectangle = Edit.Polygon.extend({ // (Without this, it's occasionally possible for a marker to get stuck as 'snapped,' which prevents Rectangle resizing) draggedMarker._snapped = false; - L.PM.Utils._fireEvent(this._layer,'pm:markerdragstart', { - layer: this._layer, - markerEvent: e, - shape: this.getShape(), - indexPath: undefined - }); + this._fireMarkerDragStart(e); }, _onMarkerDrag(e) { @@ -108,12 +103,7 @@ Edit.Rectangle = Edit.Polygon.extend({ this._adjustRectangleForMarkerMove(draggedMarker); } - L.PM.Utils._fireEvent(this._layer,'pm:markerdrag', { - layer: this._layer, - markerEvent: e, - shape: this.getShape(), - indexPath: undefined - }); + this._fireMarkerDrag(e); }, _onMarkerDragEnd(e) { @@ -130,12 +120,7 @@ Edit.Rectangle = Edit.Polygon.extend({ // Update bounding box this._layer.setLatLngs(corners); - L.PM.Utils._fireEvent(this._layer,'pm:markerdragend', { - layer: this._layer, - markerEvent: e, - shape: this.getShape(), - indexPath: undefined - }); + this._fireMarkerDragEnd(e); // fire edit event this._fireEdit(); diff --git a/src/js/Edit/L.PM.Edit.js b/src/js/Edit/L.PM.Edit.js index 57d7b6af..80137da2 100644 --- a/src/js/Edit/L.PM.Edit.js +++ b/src/js/Edit/L.PM.Edit.js @@ -1,8 +1,9 @@ import SnapMixin from '../Mixins/Snapping'; import DragMixin from '../Mixins/Dragging'; +import {EventMixinEdit, EventMixinSnapping} from "../Mixins/Events"; const Edit = L.Class.extend({ - includes: [DragMixin, SnapMixin], + includes: [DragMixin, SnapMixin, EventMixinEdit, EventMixinSnapping], options: { snappable: true, snapDistance: 20, diff --git a/src/js/L.PM.Map.js b/src/js/L.PM.Map.js index 6c663521..e4769f86 100644 --- a/src/js/L.PM.Map.js +++ b/src/js/L.PM.Map.js @@ -3,9 +3,10 @@ import translations from '../assets/translations'; import GlobalEditMode from './Mixins/Modes/Mode.Edit'; import GlobalDragMode from './Mixins/Modes/Mode.Drag'; import GlobalRemovalMode from './Mixins/Modes/Mode.Removal'; +import {EventMixinGlobal} from "./Mixins/Events"; const Map = L.Class.extend({ - includes: [GlobalEditMode, GlobalDragMode, GlobalRemovalMode], + includes: [GlobalEditMode, GlobalDragMode, GlobalRemovalMode,EventMixinGlobal], initialize(map) { this.map = map; this.Draw = new L.PM.Draw(map); @@ -32,12 +33,7 @@ const Map = L.Class.extend({ L.PM.activeLang = lang; this.map.pm.Toolbar.reinit(); - L.PM.Utils._fireEvent(this.map,"pm:langchange", { - oldLang, - activeLang: lang, - fallback, - translations: translations[lang] - }); + this._fireLangChange(oldLang, lang, fallback, translations[lang]); }, addControls(options) { this.Toolbar.addControls(options); diff --git a/src/js/Mixins/Dragging.js b/src/js/Mixins/Dragging.js index c44f95ff..ce8b787f 100644 --- a/src/js/Mixins/Dragging.js +++ b/src/js/Mixins/Dragging.js @@ -220,21 +220,6 @@ const DragMixin = { // fire pm:dragstart event this._fireDrag(e); }, - _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() - }); - }, addDraggingClass() { const el = this._getDOMElem(); if(el) { diff --git a/src/js/Mixins/Events.js b/src/js/Mixins/Events.js new file mode 100644 index 00000000..becd4a53 --- /dev/null +++ b/src/js/Mixins/Events.js @@ -0,0 +1,236 @@ +const EventMixinEdit = { + // also fired in EventMixinDraw + _fireEdit() { + L.PM.Utils._fireEvent(this._layer,'pm:edit', { layer: this._layer, shape: this.getShape() }); + this._layerEdited = true; + }, + _fireEnable(){ + L.PM.Utils._fireEvent(this._layer,'pm:enable', { layer: this._layer, shape: this.getShape() }); + }, + _fireDisable(){ + L.PM.Utils._fireEvent(this._layer,'pm:disable', { layer: this._layer, shape: this.getShape() }); + }, + _fireUpdate(){ + L.PM.Utils._fireEvent(this._layer,'pm:update', { layer: this._layer, shape: this.getShape() }); + }, + _fireCenterPlaced(){ + L.PM.Utils._fireEvent(this._layer,'pm:centerplaced', { + layer: this._layer, + latlng: this._layer.getLatLng(), + shape: this.getShape() + }); + }, + _fireMarkerDragStart(e, indexPath = undefined){ + L.PM.Utils._fireEvent(this._layer,'pm:markerdragstart', { + layer: this._layer, + markerEvent: e, + shape: this.getShape(), + indexPath + }); + }, + _fireMarkerDrag(e, indexPath = undefined){ + L.PM.Utils._fireEvent(this._layer,'pm:markerdrag', { + layer: this._layer, + markerEvent: e, + shape: this.getShape(), + indexPath + }); + }, + _fireMarkerDragEnd(e, indexPath = undefined, intersectionReset = undefined){ + L.PM.Utils._fireEvent(this._layer,'pm:markerdragend', { + layer: this._layer, + markerEvent: e, + shape: this.getShape(), + indexPath, + intersectionReset + }); + }, + _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() + }); + }, + // also fired in EventMixinGlobal + _fireRemove(fireLayer,refLayer = fireLayer){ + L.PM.Utils._fireEvent(fireLayer,'pm:remove', { layer: refLayer, shape: this.getShape() }); + }, + _fireVertexAdded(marker, indexPath, latlng){ + L.PM.Utils._fireEvent(this._layer,'pm:vertexadded', { + layer: this._layer, + marker, + indexPath, + latlng, + shape: this.getShape() + }); + }, + _fireVertexRemoved(marker, indexPath){ + L.PM.Utils._fireEvent(this._layer,'pm:vertexremoved', { + layer: this._layer, + marker, + indexPath, + shape: this.getShape() + // TODO: maybe add latlng as well? + }); + }, + _fireVertexClick(e, indexPath){ + L.PM.Utils._fireEvent(this._layer,'pm:vertexclick', { + layer: this._layer, + markerEvent: e, + indexPath, + shape: this.getShape() + }); + }, + _fireIntersect(intersection){ + L.PM.Utils._fireEvent(this._layer,'pm:intersect', { + layer: this._layer, + intersection, + shape: this.getShape() + }); + }, + _fireLayerReset(e, indexPath){ + L.PM.Utils._fireEvent(this._layer,'pm:layerreset', { + layer: this._layer, + markerEvent: e, + indexPath, + shape: this.getShape() + }); + } +}; + +const EventMixinDraw = { + _fireDrawStart(){ + L.PM.Utils._fireEvent(this._map,'pm:drawstart', { + shape: this._shape, + workingLayer: this._layer, + }); + }, + _fireDrawEnd(){ + L.PM.Utils._fireEvent(this._map,'pm:drawend', { + shape: this._shape, + }); + }, + _fireCreate(layer){ + L.PM.Utils._fireEvent(this._map,'pm:create', { + shape: this._shape, + layer, + }); + }, + _fireCenterPlaced() { + L.PM.Utils._fireEvent(this._layer,'pm:centerplaced', { + shape: this._shape, + workingLayer: this._layer, + latlng: this._layer.getLatLng(), + }); + }, + _fireVertexAdded(marker, latlng) { + L.PM.Utils._fireEvent(this._layer,'pm:vertexadded', { + shape: this._shape, + workingLayer: this._layer, + marker, + latlng, + }); + }, + _fireCut(fireLayer, layer, originalLayer){ + L.PM.Utils._fireEvent(fireLayer,'pm:cut', { + shape: this._shape, + layer, + originalLayer, + }); + }, + // also fired in EventMixinEdit + _fireEdit(layer){ + L.PM.Utils._fireEvent(layer,'pm:edit', { + layer, + shape: layer.pm.getShape() + }); + }, + _fireGlobalCutModeToggled(){ + L.PM.Utils._fireEvent(this._map,'pm:globalcutmodetoggled', { + enabled: !!this._enabled, + map: this._map, + }); + }, + _fireGlobalDrawModeToggled(){ + L.PM.Utils._fireEvent(this._map,'pm:globaldrawmodetoggled', { + enabled: this._enabled, + shape: this._shape, + map: this._map, + }); + } +}; + +const EventMixinSnapping = { + _fireSnapDrag(fireLayer, eventInfo){ + L.PM.Utils._fireEvent(fireLayer,'pm:snapdrag', eventInfo); + }, + _fireSnap(fireLayer, eventInfo){ + L.PM.Utils._fireEvent(fireLayer,'pm:snap', eventInfo); + }, + _fireUnsnap(fireLayer, eventInfo){ + L.PM.Utils._fireEvent(fireLayer,'pm:unsnap', eventInfo); + } +}; + +const EventMixinGlobal = { + _fireActionClick(action, btnName, button){ + // this._map is used because this is fired from L.Controls (PMButton) + L.PM.Utils._fireEvent(this._map,'pm:actionclick', { + text: action.text, + action, + btnName, + button + }); + }, + _fireButtonClick(btnName, button){ + // this._map is used because this is fired from L.Controls (PMButton) + L.PM.Utils._fireEvent(this._map,'pm:buttonclick', {btnName, button}); + }, + _fireLangChange(oldLang, activeLang, fallback, translations ){ + L.PM.Utils._fireEvent(this.map,"pm:langchange", { + oldLang, + activeLang, + fallback, + translations + }); + }, + _fireGlobalDragModeToggled(enabled) { + L.PM.Utils._fireEvent(this.map,'pm:globaldragmodetoggled', { + enabled, + map: this.map, + }); + }, + _fireGlobalEditModeToggled(enabled) { + L.PM.Utils._fireEvent(this.map,'pm:globaleditmodetoggled', { + enabled, + map: this.map, + }); + }, + _fireGlobalRemovalModeToggled(enabled) { + L.PM.Utils._fireEvent(this.map,'pm:globalremovalmodetoggled', { + enabled, + map: this.map, + }); + }, + // Called when LayerGroup is removed, also fired in EventMixinEdit + _fireRemoveLayerGroup(fireLayer, refLayer = fireLayer) { + L.PM.Utils._fireEvent(fireLayer,'pm:remove', { layer: refLayer, shape: undefined }); + } +}; + +// TODO: is it possible to merge EventMixinEdit / EventMixinDraw with EventMixinSnapping +export { + EventMixinEdit, + EventMixinDraw, + EventMixinSnapping, + EventMixinGlobal +} diff --git a/src/js/Mixins/Modes/Mode.Drag.js b/src/js/Mixins/Modes/Mode.Drag.js index 96ba9a09..3dd8f1f7 100644 --- a/src/js/Mixins/Modes/Mode.Drag.js +++ b/src/js/Mixins/Modes/Mode.Drag.js @@ -19,7 +19,7 @@ const GlobalDragMode = { // toogle the button in the toolbar if this is called programatically this.Toolbar.toggleButton('dragMode', this._globalDragMode); - this._fireDragModeEvent(true); + this._fireGlobalDragModeToggled(true); }, disableGlobalDragMode() { const layers = L.PM.Utils.findLayers(this.map); @@ -36,7 +36,7 @@ const GlobalDragMode = { // toogle the button in the toolbar if this is called programatically this.Toolbar.toggleButton('dragMode', this._globalDragMode); - this._fireDragModeEvent(false); + this._fireGlobalDragModeToggled(false); }, globalDragModeEnabled() { return !!this._globalDragMode; @@ -61,12 +61,6 @@ const GlobalDragMode = { this.enableGlobalDragMode(); } }, - _fireDragModeEvent(enabled) { - L.PM.Utils._fireEvent(this.map,'pm:globaldragmodetoggled', { - enabled, - map: this.map, - }); - }, } export default GlobalDragMode diff --git a/src/js/Mixins/Modes/Mode.Edit.js b/src/js/Mixins/Modes/Mode.Edit.js index bdbdd862..bacaf069 100644 --- a/src/js/Mixins/Modes/Mode.Edit.js +++ b/src/js/Mixins/Modes/Mode.Edit.js @@ -62,7 +62,7 @@ const GlobalEditMode = { // set status this._globalEditMode = status; // fire event - this._fireEditModeEvent(this._globalEditMode); + this._fireGlobalEditModeToggled(this._globalEditMode); }, toggleGlobalEditMode(options = this.globalOptions) { if (this.globalEditModeEnabled()) { @@ -94,12 +94,6 @@ const GlobalEditMode = { _layerAdded({layer}){ this._addedLayers.push(layer); }, - _fireEditModeEvent(enabled) { - L.PM.Utils._fireEvent(this.map,'pm:globaleditmodetoggled', { - enabled, - map: this.map, - }); - }, }; export default GlobalEditMode diff --git a/src/js/Mixins/Modes/Mode.Removal.js b/src/js/Mixins/Modes/Mode.Removal.js index 0582146b..c0317efb 100644 --- a/src/js/Mixins/Modes/Mode.Removal.js +++ b/src/js/Mixins/Modes/Mode.Removal.js @@ -19,7 +19,7 @@ const GlobalRemovalMode = { // toogle the button in the toolbar if this is called programatically this.Toolbar.toggleButton('deleteLayer', this._globalRemovalMode); - this._fireRemovalModeEvent(true); + this._fireGlobalRemovalModeToggled(true); }, disableGlobalRemovalMode() { this._globalRemovalMode = false; @@ -33,7 +33,7 @@ const GlobalRemovalMode = { // toogle the button in the toolbar if this is called programatically this.Toolbar.toggleButton('deleteLayer', this._globalRemovalMode); - this._fireRemovalModeEvent(false); + this._fireGlobalRemovalModeToggled(false); }, // TODO: Remove in the next major release globalRemovalEnabled() { @@ -62,12 +62,6 @@ const GlobalRemovalMode = { this.enableGlobalRemovalMode(); } }, - _fireRemovalModeEvent(enabled) { - L.PM.Utils._fireEvent(this.map,'pm:globalremovalmodetoggled', { - enabled, - map: this.map, - }); - }, removeLayer(e) { const layer = e.target; // only remove layer, if it's handled by leaflet-geoman, @@ -78,13 +72,12 @@ const GlobalRemovalMode = { layer.removeFrom(this.map.pm._getContainingLayer()); layer.remove(); if(layer instanceof L.LayerGroup){ - L.PM.Utils._fireEvent(layer,'pm:remove', { layer, shape: undefined }); - L.PM.Utils._fireEvent(this.map,'pm:remove', { layer, shape: undefined }); + this._fireRemoveLayerGroup(layer); + this._fireRemoveLayerGroup(this.map, layer); }else{ - L.PM.Utils._fireEvent(layer,'pm:remove', { layer, shape: layer.pm.getShape() }); - L.PM.Utils._fireEvent(this.map,'pm:remove', { layer, shape: layer.pm.getShape() }); + layer.pm._fireRemove(layer); + layer.pm._fireRemove(this.map, layer); } - } }, _isRelevant(layer){ diff --git a/src/js/Mixins/Snapping.js b/src/js/Mixins/Snapping.js index e0d30d40..f8bda14b 100644 --- a/src/js/Mixins/Snapping.js +++ b/src/js/Mixins/Snapping.js @@ -127,8 +127,8 @@ const SnapMixin = { distance: closestLayer.distance, }; - L.PM.Utils._fireEvent(eventInfo.marker,'pm:snapdrag', eventInfo); - L.PM.Utils._fireEvent(this._layer,'pm:snapdrag', eventInfo); + this._fireSnapDrag(eventInfo.marker, eventInfo); + this._fireSnapDrag(this._layer, eventInfo); if (closestLayer.distance < minDistance) { // snap the marker @@ -140,8 +140,8 @@ const SnapMixin = { const triggerSnap = () => { this._snapLatLng = snapLatLng; - L.PM.Utils._fireEvent(marker,'pm:snap', eventInfo); - L.PM.Utils._fireEvent(this._layer,'pm:snap', eventInfo); + this._fireSnap(marker, eventInfo); + this._fireSnap(this._layer, eventInfo); }; // check if the snapping position differs from the last snap @@ -162,8 +162,8 @@ const SnapMixin = { marker._snapped = false; // and fire unsnap event - L.PM.Utils._fireEvent(eventInfo.marker,'pm:unsnap', eventInfo); - L.PM.Utils._fireEvent(this._layer,'pm:unsnap', eventInfo); + this._fireUnsnap(eventInfo.marker, eventInfo); + this._fireUnsnap(this._layer, eventInfo); } return true; diff --git a/src/js/Toolbar/L.Controls.js b/src/js/Toolbar/L.Controls.js index 3b68cec7..072c2144 100644 --- a/src/js/Toolbar/L.Controls.js +++ b/src/js/Toolbar/L.Controls.js @@ -1,6 +1,8 @@ import { getTranslation } from '../helpers'; +import {EventMixinGlobal} from "../Mixins/Events"; const PMButton = L.Control.extend({ + includes: [EventMixinGlobal], options: { position: 'topleft', }, @@ -160,7 +162,7 @@ const PMButton = L.Control.extend({ break; } } - L.PM.Utils._fireEvent(this._map,'pm:actionclick', {text: action.text, action, btnName, button}); + this._fireActionClick(action, btnName, button); }; L.DomEvent.addListener(actionNode, 'click', actionClick, this); @@ -201,7 +203,7 @@ const PMButton = L.Control.extend({ break; } } - L.PM.Utils._fireEvent(this._map,'pm:buttonclick', {btnName, button}); + this._fireButtonClick(btnName, button); }); L.DomEvent.addListener(newButton, 'click', this._triggerClick, this); } From f4288e01c4dda37f6fad64e2dd3cb30c55d063c3 Mon Sep 17 00:00:00 2001 From: falke-design Date: Sun, 18 Apr 2021 17:51:18 +0200 Subject: [PATCH 2/5] Merge the EventMixins to one and added arguments `source` and `customPayload` --- src/js/Draw/L.PM.Draw.Cut.js | 4 +- src/js/Draw/L.PM.Draw.Line.js | 2 +- src/js/Draw/L.PM.Draw.js | 8 +- src/js/Edit/L.PM.Edit.Circle.js | 3 +- src/js/Edit/L.PM.Edit.CircleMarker.js | 3 +- src/js/Edit/L.PM.Edit.Line.js | 3 + src/js/Edit/L.PM.Edit.Marker.js | 1 + src/js/Edit/L.PM.Edit.Rectangle.js | 1 + src/js/Edit/L.PM.Edit.js | 4 +- src/js/L.PM.Map.js | 4 +- src/js/Mixins/Dragging.js | 1 + src/js/Mixins/Events.js | 321 ++++++++++++++------------ src/js/Toolbar/L.Controls.js | 4 +- 13 files changed, 194 insertions(+), 165 deletions(-) diff --git a/src/js/Draw/L.PM.Draw.Cut.js b/src/js/Draw/L.PM.Draw.Cut.js index 967bcccf..cc2a6372 100644 --- a/src/js/Draw/L.PM.Draw.Cut.js +++ b/src/js/Draw/L.PM.Draw.Cut.js @@ -44,7 +44,7 @@ Draw.Cut = Draw.Polygon.extend({ this._fireCut(this._map,layer,originalLayer); // fire edit event after cut - this._fireEdit(originalLayer); + originalLayer.pm._fireEdit(); }); this._editedLayers = []; @@ -135,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(); diff --git a/src/js/Draw/L.PM.Draw.Line.js b/src/js/Draw/L.PM.Draw.Line.js index 05f28fe6..d0cc5d55 100644 --- a/src/js/Draw/L.PM.Draw.Line.js +++ b/src/js/Draw/L.PM.Draw.Line.js @@ -257,7 +257,7 @@ Draw.Line = Draw.extend({ this._hintline.setLatLngs([latlng, latlng]); - this._fireVertexAdded(newMarker, latlng); + this._fireVertexAdded(newMarker, undefined, latlng, "Draw"); // check if we should finish on snap if (this.options.finishOn === 'snap' && this._hintMarker._snapped) { diff --git a/src/js/Draw/L.PM.Draw.js b/src/js/Draw/L.PM.Draw.js index 89dde35b..b93c41ea 100644 --- a/src/js/Draw/L.PM.Draw.js +++ b/src/js/Draw/L.PM.Draw.js @@ -1,8 +1,8 @@ import SnapMixin from '../Mixins/Snapping'; -import {EventMixinDraw, EventMixinSnapping} from "../Mixins/Events"; +import EventMixin from "../Mixins/Events"; const Draw = L.Class.extend({ - includes: [SnapMixin, EventMixinDraw, EventMixinSnapping], + includes: [SnapMixin, EventMixin], options: { snappable: true, snapDistance: 20, @@ -61,6 +61,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( diff --git a/src/js/Edit/L.PM.Edit.Circle.js b/src/js/Edit/L.PM.Edit.Circle.js index a9d46296..388d6bdf 100644 --- a/src/js/Edit/L.PM.Edit.Circle.js +++ b/src/js/Edit/L.PM.Edit.Circle.js @@ -181,7 +181,7 @@ Edit.Circle = Edit.extend({ this._updateHiddenPolyCircle(); - this._fireCenterPlaced(); + this._fireCenterPlaced("Edit"); }, _syncCircleRadius() { const A = this._centerMarker.getLatLng(); @@ -225,6 +225,7 @@ Edit.Circle = Edit.extend({ _onMarkerDragEnd(e) { // fire edit event this._fireEdit(); + this._layerEdited = true; this._fireMarkerDragEnd(e); }, _updateHiddenPolyCircle() { diff --git a/src/js/Edit/L.PM.Edit.CircleMarker.js b/src/js/Edit/L.PM.Edit.CircleMarker.js index 08034893..a31c5208 100644 --- a/src/js/Edit/L.PM.Edit.CircleMarker.js +++ b/src/js/Edit/L.PM.Edit.CircleMarker.js @@ -216,7 +216,7 @@ Edit.CircleMarker = Edit.extend({ this._updateHiddenPolyCircle(); - this._fireCenterPlaced(); + this._fireCenterPlaced("Edit"); }, _syncMarkers() { const center = this._layer.getLatLng(); @@ -274,6 +274,7 @@ Edit.CircleMarker = Edit.extend({ this._map.pm.Draw.CircleMarker._layerIsDragging = false; if (this.options.editable) { this._fireEdit(); + this._layerEdited = true; } this._fireMarkerDragEnd(e); }, diff --git a/src/js/Edit/L.PM.Edit.Line.js b/src/js/Edit/L.PM.Edit.Line.js index b5b5d181..bd0bc0dc 100644 --- a/src/js/Edit/L.PM.Edit.Line.js +++ b/src/js/Edit/L.PM.Edit.Line.js @@ -312,6 +312,7 @@ Edit.Line = Edit.extend({ // fire edit event this._fireEdit(); + this._layerEdited = true; this._fireVertexAdded(newM,this.findDeepMarkerIndex(this._markers, newM).indexPath, latlng); @@ -527,6 +528,7 @@ Edit.Line = Edit.extend({ // fire edit event this._fireEdit(); + this._layerEdited = true; // fire vertex removal event // TODO: maybe fire latlng as well? @@ -751,6 +753,7 @@ Edit.Line = Edit.extend({ } // fire edit event this._fireEdit(); + this._layerEdited = true; }, _onVertexClick(e) { const vertex = e.target; diff --git a/src/js/Edit/L.PM.Edit.Marker.js b/src/js/Edit/L.PM.Edit.Marker.js index 9994293b..c20ba365 100644 --- a/src/js/Edit/L.PM.Edit.Marker.js +++ b/src/js/Edit/L.PM.Edit.Marker.js @@ -75,6 +75,7 @@ Edit.Marker = Edit.extend({ }, _onDragEnd(e) { this._fireEdit(); + this._layerEdited = true; }, // overwrite initSnappableMarkers from Snapping.js Mixin _initSnappableMarkers() { diff --git a/src/js/Edit/L.PM.Edit.Rectangle.js b/src/js/Edit/L.PM.Edit.Rectangle.js index a35c8de0..d5583144 100644 --- a/src/js/Edit/L.PM.Edit.Rectangle.js +++ b/src/js/Edit/L.PM.Edit.Rectangle.js @@ -121,6 +121,7 @@ Edit.Rectangle = Edit.Polygon.extend({ // fire edit event this._fireEdit(); + this._layerEdited = true; }, // adjusts the rectangle's size and bounds whenever a marker is moved diff --git a/src/js/Edit/L.PM.Edit.js b/src/js/Edit/L.PM.Edit.js index c13aa0bc..8ae81dcb 100644 --- a/src/js/Edit/L.PM.Edit.js +++ b/src/js/Edit/L.PM.Edit.js @@ -1,10 +1,10 @@ import SnapMixin from '../Mixins/Snapping'; import DragMixin from '../Mixins/Dragging'; import RotateMixin from "../Mixins/Rotating"; -import {EventMixinEdit, EventMixinSnapping} from "../Mixins/Events"; +import EventMixin from "../Mixins/Events"; const Edit = L.Class.extend({ - includes: [DragMixin, SnapMixin, RotateMixin, EventMixinEdit, EventMixinSnapping], + includes: [DragMixin, SnapMixin, RotateMixin, EventMixin], options: { snappable: true, snapDistance: 20, diff --git a/src/js/L.PM.Map.js b/src/js/L.PM.Map.js index 2c7765f8..b9bddf19 100644 --- a/src/js/L.PM.Map.js +++ b/src/js/L.PM.Map.js @@ -4,10 +4,10 @@ import GlobalEditMode from './Mixins/Modes/Mode.Edit'; import GlobalDragMode from './Mixins/Modes/Mode.Drag'; import GlobalRemovalMode from './Mixins/Modes/Mode.Removal'; import GlobalRotateMode from "./Mixins/Modes/Mode.Rotate"; -import {EventMixinGlobal} from "./Mixins/Events"; +import EventMixin from "./Mixins/Events"; const Map = L.Class.extend({ - includes: [GlobalEditMode, GlobalDragMode, GlobalRemovalMode, GlobalRotateMode, EventMixinGlobal], + includes: [GlobalEditMode, GlobalDragMode, GlobalRemovalMode, GlobalRotateMode, EventMixin], initialize(map) { this.map = map; this.Draw = new L.PM.Draw(map); diff --git a/src/js/Mixins/Dragging.js b/src/js/Mixins/Dragging.js index ce8b787f..1cdcb089 100644 --- a/src/js/Mixins/Dragging.js +++ b/src/js/Mixins/Dragging.js @@ -156,6 +156,7 @@ const DragMixin = { // fire edit this._fireEdit(); + this._layerEdited = true; }, 10); return true; diff --git a/src/js/Mixins/Events.js b/src/js/Mixins/Events.js index becd4a53..7a090d53 100644 --- a/src/js/Mixins/Events.js +++ b/src/js/Mixins/Events.js @@ -1,236 +1,253 @@ -const EventMixinEdit = { - // also fired in EventMixinDraw - _fireEdit() { - L.PM.Utils._fireEvent(this._layer,'pm:edit', { layer: this._layer, shape: this.getShape() }); - this._layerEdited = true; - }, - _fireEnable(){ - L.PM.Utils._fireEvent(this._layer,'pm:enable', { layer: this._layer, shape: this.getShape() }); +import merge from 'lodash/merge'; + +const EventMixin = { + // Draw Events + // Fired when enableDraw() is called -> draw start + _fireDrawStart(source = "Draw", customPayload = {}){ + this.__fire(this._map,'pm:drawstart', { + shape: this._shape, + workingLayer: this._layer, + }, source, customPayload); }, - _fireDisable(){ - L.PM.Utils._fireEvent(this._layer,'pm:disable', { layer: this._layer, shape: this.getShape() }); + // Fired when disableDraw() is called -> draw stop + _fireDrawEnd(source = "Draw", customPayload = {}){ + this.__fire(this._map,'pm:drawend', { + shape: this._shape, + }, source, customPayload); }, - _fireUpdate(){ - L.PM.Utils._fireEvent(this._layer,'pm:update', { layer: this._layer, shape: this.getShape() }); + // Fired when layer is created while drawing + _fireCreate(layer, source = "Draw", customPayload = {}){ + this.__fire(this._map,'pm:create', { + shape: this._shape, + layer, + }, source, customPayload); }, - _fireCenterPlaced(){ - L.PM.Utils._fireEvent(this._layer,'pm:centerplaced', { - layer: this._layer, + // Fired when Circle / CircleMarker center is placed + // if source == "Draw" then `workingLayer` is passed else `layer` + _fireCenterPlaced(source = "Draw", customPayload = {}) { + const workingLayer = source === "Draw" ? this._layer : undefined; + const layer = source !== "Draw" ? this._layer : undefined; + + this.__fire(this._layer,'pm:centerplaced', { + shape: this._shape, + workingLayer, + layer, latlng: this._layer.getLatLng(), - shape: this.getShape() - }); + }, source, customPayload); + }, + // Fired when layer is cutted + // TODO: is Cut "Draw" or "Edit"? The event `pm:edit` in the same scope is called as source "Edit" + _fireCut(fireLayer, layer, originalLayer, source = "Draw", customPayload = {}){ + this.__fire(fireLayer,'pm:cut', { + shape: this._shape, + layer, + originalLayer, + }, source, customPayload); }, - _fireMarkerDragStart(e, indexPath = undefined){ - L.PM.Utils._fireEvent(this._layer,'pm:markerdragstart', { + + // Edit Events + // Fired when layer is edited / changed + _fireEdit(source = "Edit", customPayload = {}) { + this.__fire(this._layer,'pm:edit', { layer: this._layer, shape: this.getShape() }, source, customPayload); + }, + // Fired when layer is enabled for editing + _fireEnable(source = "Edit", customPayload = {}){ + this.__fire(this._layer,'pm:enable', { layer: this._layer, shape: this.getShape() }, source, customPayload); + }, + // Fired when layer is disabled for editing + _fireDisable(source = "Edit", customPayload = {}){ + this.__fire(this._layer,'pm:disable', { layer: this._layer, shape: this.getShape() }, source, customPayload); + }, + // Fired when layer is disabled and was edited / changed + _fireUpdate(source = "Edit", customPayload = {}){ + this.__fire(this._layer,'pm:update', { layer: this._layer, shape: this.getShape() }, source, customPayload); + }, + // Fired when a vertex-marker is started dragging + // indexPath is only passed from Line / Polygon + _fireMarkerDragStart(e, indexPath = undefined, source = "Edit", customPayload = {}){ + this.__fire(this._layer,'pm:markerdragstart', { layer: this._layer, markerEvent: e, shape: this.getShape(), indexPath - }); + }, source, customPayload); }, - _fireMarkerDrag(e, indexPath = undefined){ - L.PM.Utils._fireEvent(this._layer,'pm:markerdrag', { + // Fired while dragging a vertex-marker + // indexPath is only passed from Line / Polygon + _fireMarkerDrag(e, indexPath = undefined, source = "Edit", customPayload = {}){ + this.__fire(this._layer,'pm:markerdrag', { layer: this._layer, markerEvent: e, shape: this.getShape(), indexPath - }); + }, source, customPayload); }, - _fireMarkerDragEnd(e, indexPath = undefined, intersectionReset = undefined){ - L.PM.Utils._fireEvent(this._layer,'pm:markerdragend', { + // Fired when a vertex-marker is stopped dragging + // indexPath and intersectionReset is only passed from Line / Polygon + _fireMarkerDragEnd(e, indexPath = undefined, intersectionReset = undefined, source = "Edit", customPayload = {}){ + this.__fire(this._layer,'pm:markerdragend', { layer: this._layer, markerEvent: e, shape: this.getShape(), indexPath, intersectionReset - }); + }, source, customPayload); }, - _fireDragStart() { - L.PM.Utils._fireEvent(this._layer,'pm:dragstart', { + // Fired when a layer is started dragging + _fireDragStart(source = "Edit", customPayload = {}) { + this.__fire(this._layer,'pm:dragstart', { layer: this._layer, shape: this.getShape() - }); + }, source, customPayload); }, - _fireDrag(e) { - L.PM.Utils._fireEvent(this._layer,'pm:drag', Object.assign({}, e, {shape:this.getShape()})); + // Fired while dragging a layer + _fireDrag(e, source = "Edit", customPayload = {}) { + this.__fire(this._layer,'pm:drag', Object.assign({}, e, {shape:this.getShape()}), source, customPayload); }, - _fireDragEnd() { - L.PM.Utils._fireEvent(this._layer,'pm:dragend', { + // Fired when a layer is stopped dragging + _fireDragEnd(source = "Edit", customPayload = {}) { + this.__fire(this._layer,'pm:dragend', { layer: this._layer, shape: this.getShape() - }); + }, source, customPayload); }, - // also fired in EventMixinGlobal - _fireRemove(fireLayer,refLayer = fireLayer){ - L.PM.Utils._fireEvent(fireLayer,'pm:remove', { layer: refLayer, shape: this.getShape() }); + // Fired when a layer is removed + _fireRemove(fireLayer,refLayer = fireLayer, source = "Edit", customPayload = {}){ + this.__fire(fireLayer,'pm:remove', { layer: refLayer, shape: this.getShape() }, source, customPayload); }, - _fireVertexAdded(marker, indexPath, latlng){ - L.PM.Utils._fireEvent(this._layer,'pm:vertexadded', { + // Fired when a vertex-marker is created + _fireVertexAdded(marker, indexPath, latlng, source = "Edit", customPayload = {}){ + this.__fire(this._layer,'pm:vertexadded', { layer: this._layer, marker, indexPath, latlng, shape: this.getShape() - }); + }, source, customPayload); }, - _fireVertexRemoved(marker, indexPath){ - L.PM.Utils._fireEvent(this._layer,'pm:vertexremoved', { + // Fired when a vertex-marker is removed + _fireVertexRemoved(marker, indexPath, source = "Edit", customPayload = {}){ + this.__fire(this._layer,'pm:vertexremoved', { layer: this._layer, marker, indexPath, shape: this.getShape() // TODO: maybe add latlng as well? - }); + }, source, customPayload); }, - _fireVertexClick(e, indexPath){ - L.PM.Utils._fireEvent(this._layer,'pm:vertexclick', { + // Fired when a vertex-marker is clicked + _fireVertexClick(e, indexPath, source = "Edit", customPayload = {}){ + this.__fire(this._layer,'pm:vertexclick', { layer: this._layer, markerEvent: e, indexPath, shape: this.getShape() - }); + }, source, customPayload); }, - _fireIntersect(intersection){ - L.PM.Utils._fireEvent(this._layer,'pm:intersect', { + // Fired when a Line / Polygon has self intersection + _fireIntersect(intersection, source = "Edit", customPayload = {}){ + this.__fire(this._layer,'pm:intersect', { layer: this._layer, intersection, shape: this.getShape() - }); + }, source, customPayload); }, - _fireLayerReset(e, indexPath){ - L.PM.Utils._fireEvent(this._layer,'pm:layerreset', { + // Fired when a Line / Polygon is reset because of self intersection + _fireLayerReset(e, indexPath, source = "Edit", customPayload = {}){ + this.__fire(this._layer,'pm:layerreset', { layer: this._layer, markerEvent: e, indexPath, shape: this.getShape() - }); - } -}; - -const EventMixinDraw = { - _fireDrawStart(){ - L.PM.Utils._fireEvent(this._map,'pm:drawstart', { - shape: this._shape, - workingLayer: this._layer, - }); - }, - _fireDrawEnd(){ - L.PM.Utils._fireEvent(this._map,'pm:drawend', { - shape: this._shape, - }); + }, source, customPayload); }, - _fireCreate(layer){ - L.PM.Utils._fireEvent(this._map,'pm:create', { - shape: this._shape, - layer, - }); - }, - _fireCenterPlaced() { - L.PM.Utils._fireEvent(this._layer,'pm:centerplaced', { - shape: this._shape, - workingLayer: this._layer, - latlng: this._layer.getLatLng(), - }); - }, - _fireVertexAdded(marker, latlng) { - L.PM.Utils._fireEvent(this._layer,'pm:vertexadded', { - shape: this._shape, - workingLayer: this._layer, - marker, - latlng, - }); - }, - _fireCut(fireLayer, layer, originalLayer){ - L.PM.Utils._fireEvent(fireLayer,'pm:cut', { - shape: this._shape, - layer, - originalLayer, - }); - }, - // also fired in EventMixinEdit - _fireEdit(layer){ - L.PM.Utils._fireEvent(layer,'pm:edit', { - layer, - shape: layer.pm.getShape() - }); - }, - _fireGlobalCutModeToggled(){ - L.PM.Utils._fireEvent(this._map,'pm:globalcutmodetoggled', { - enabled: !!this._enabled, - map: this._map, - }); - }, - _fireGlobalDrawModeToggled(){ - L.PM.Utils._fireEvent(this._map,'pm:globaldrawmodetoggled', { - enabled: this._enabled, - shape: this._shape, - map: this._map, - }); - } -}; -const EventMixinSnapping = { - _fireSnapDrag(fireLayer, eventInfo){ - L.PM.Utils._fireEvent(fireLayer,'pm:snapdrag', eventInfo); + // Snapping Events + // Fired during a marker move/drag and other layers are existing + _fireSnapDrag(fireLayer, eventInfo, source = "Snapping", customPayload = {}){ + this.__fire(fireLayer,'pm:snapdrag', eventInfo, source, customPayload); }, - _fireSnap(fireLayer, eventInfo){ - L.PM.Utils._fireEvent(fireLayer,'pm:snap', eventInfo); + // Fired when a vertex is snapped + _fireSnap(fireLayer, eventInfo, source = "Snapping", customPayload = {}){ + this.__fire(fireLayer,'pm:snap', eventInfo, source, customPayload); + }, + // Fired when a vertex is unsnapped + _fireUnsnap(fireLayer, eventInfo, source = "Snapping", customPayload = {}){ + this.__fire(fireLayer,'pm:unsnap', eventInfo, source, customPayload); }, - _fireUnsnap(fireLayer, eventInfo){ - L.PM.Utils._fireEvent(fireLayer,'pm:unsnap', eventInfo); - } -}; -const EventMixinGlobal = { - _fireActionClick(action, btnName, button){ + // Global Events + // Fired when a Toolbar action is clicked + _fireActionClick(action, btnName, button, source = "Toolbar", customPayload = {}){ // this._map is used because this is fired from L.Controls (PMButton) - L.PM.Utils._fireEvent(this._map,'pm:actionclick', { + this.__fire(this._map,'pm:actionclick', { text: action.text, action, btnName, button - }); + }, source, customPayload); }, - _fireButtonClick(btnName, button){ + // Fired when a Toolbar button is clicked + _fireButtonClick(btnName, button, source = "Toolbar", customPayload = {}){ // this._map is used because this is fired from L.Controls (PMButton) - L.PM.Utils._fireEvent(this._map,'pm:buttonclick', {btnName, button}); + this.__fire(this._map,'pm:buttonclick', {btnName, button}, source, customPayload); }, - _fireLangChange(oldLang, activeLang, fallback, translations ){ - L.PM.Utils._fireEvent(this.map,"pm:langchange", { + // Fired when language is changed + _fireLangChange(oldLang, activeLang, fallback, translations, source = "Global", customPayload = {} ){ + this.__fire(this.map,"pm:langchange", { oldLang, activeLang, fallback, translations - }); + }, source, customPayload); }, - _fireGlobalDragModeToggled(enabled) { - L.PM.Utils._fireEvent(this.map,'pm:globaldragmodetoggled', { + // Fired when Drag Mode is toggled. + _fireGlobalDragModeToggled(enabled, source = "Global", customPayload = {}) { + this.__fire(this.map,'pm:globaldragmodetoggled', { enabled, map: this.map, - }); + }, source, customPayload); }, - _fireGlobalEditModeToggled(enabled) { - L.PM.Utils._fireEvent(this.map,'pm:globaleditmodetoggled', { + // Fired when Edit Mode is toggled. + _fireGlobalEditModeToggled(enabled, source = "Global", customPayload = {}) { + this.__fire(this.map,'pm:globaleditmodetoggled', { enabled, map: this.map, - }); + }, source, customPayload); }, - _fireGlobalRemovalModeToggled(enabled) { - L.PM.Utils._fireEvent(this.map,'pm:globalremovalmodetoggled', { + // Fired when Removal Mode is toggled. + _fireGlobalRemovalModeToggled(enabled, source = "Global", customPayload = {}) { + this.__fire(this.map,'pm:globalremovalmodetoggled', { enabled, map: this.map, - }); + }, source, customPayload); + }, + // Fired when Cut Mode is toggled. + _fireGlobalCutModeToggled(source = "Global", customPayload = {}){ + this.__fire(this._map,'pm:globalcutmodetoggled', { + enabled: !!this._enabled, + map: this._map, + }, source, customPayload); }, - // Called when LayerGroup is removed, also fired in EventMixinEdit - _fireRemoveLayerGroup(fireLayer, refLayer = fireLayer) { - L.PM.Utils._fireEvent(fireLayer,'pm:remove', { layer: refLayer, shape: undefined }); + // Fired when Draw Mode is toggled. + _fireGlobalDrawModeToggled(source = "Global", customPayload = {}){ + this.__fire(this._map,'pm:globaldrawmodetoggled', { + enabled: this._enabled, + shape: this._shape, + map: this._map, + }, source, customPayload); + }, + // Fired when LayerGroup is removed + _fireRemoveLayerGroup(fireLayer, refLayer = fireLayer, source = "Edit", customPayload = {}) { + this.__fire(fireLayer,'pm:remove', { layer: refLayer, shape: undefined }, source, customPayload); + }, + + // private (very private) fire function + __fire(fireLayer, type, payload, source, customPayload = {}){ + payload = merge(payload, customPayload, {source}); + L.PM.Utils._fireEvent(fireLayer,type,payload); } + }; -// TODO: is it possible to merge EventMixinEdit / EventMixinDraw with EventMixinSnapping -export { - EventMixinEdit, - EventMixinDraw, - EventMixinSnapping, - EventMixinGlobal -} +export default EventMixin; diff --git a/src/js/Toolbar/L.Controls.js b/src/js/Toolbar/L.Controls.js index 072c2144..c62537b0 100644 --- a/src/js/Toolbar/L.Controls.js +++ b/src/js/Toolbar/L.Controls.js @@ -1,8 +1,8 @@ import { getTranslation } from '../helpers'; -import {EventMixinGlobal} from "../Mixins/Events"; +import EventMixin from "../Mixins/Events"; const PMButton = L.Control.extend({ - includes: [EventMixinGlobal], + includes: [EventMixin], options: { position: 'topleft', }, From 0dae0f734385e4c223aa5846c99bfc49122584d1 Mon Sep 17 00:00:00 2001 From: falke-design Date: Tue, 11 May 2021 17:29:19 +0200 Subject: [PATCH 3/5] Add workingLayer vertexadded --- src/js/Mixins/Events.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/Mixins/Events.js b/src/js/Mixins/Events.js index 7a090d53..de3ba890 100644 --- a/src/js/Mixins/Events.js +++ b/src/js/Mixins/Events.js @@ -119,6 +119,7 @@ const EventMixin = { _fireVertexAdded(marker, indexPath, latlng, source = "Edit", customPayload = {}){ this.__fire(this._layer,'pm:vertexadded', { layer: this._layer, + workingLayer: this._layer, marker, indexPath, latlng, From c79ce48bc3a276e672df1cad1c26b385e9c5b61d Mon Sep 17 00:00:00 2001 From: falke-design Date: Tue, 11 May 2021 17:44:50 +0200 Subject: [PATCH 4/5] Move Rotation Events to EventMixin --- src/js/Mixins/Events.js | 47 +++++++++++++++++++++++++++++++++++++++ src/js/Mixins/Rotating.js | 42 +++++++++------------------------- 2 files changed, 57 insertions(+), 32 deletions(-) diff --git a/src/js/Mixins/Events.js b/src/js/Mixins/Events.js index de3ba890..aa63f75c 100644 --- a/src/js/Mixins/Events.js +++ b/src/js/Mixins/Events.js @@ -177,6 +177,53 @@ const EventMixin = { this.__fire(fireLayer,'pm:unsnap', eventInfo, source, customPayload); }, + // Rotation Events + // Fired when rotation is enabled + _fireRotationEnable(fireLayer, helpLayer, source = "Rotation", customPayload = {}){ + this.__fire(fireLayer,'pm:rotateenable', { + layer: this._layer, + helpLayer: this._rotatePoly + }, source, customPayload); + }, + // Fired when rotation is disabled + _fireRotationDisable(fireLayer, source = "Rotation", customPayload = {}){ + this.__fire(fireLayer,'pm:rotatedisable', { + layer: this._layer + }, source, customPayload); + }, + // Fired when rotation starts + _fireRotationStart(fireLayer, originLatLngs, source = "Rotation", customPayload = {}){ + this.__fire(fireLayer,'pm:rotatestart', { + layer: this._rotationLayer, + helpLayer: this._layer, + startAngle: this._startAngle, + originLatLngs + }, source, customPayload); + }, + // Fired while rotation + _fireRotation(fireLayer, angleDiff, oldLatLngs, source = "Rotation", customPayload = {}){ + this.__fire(fireLayer,'pm:rotate', { + layer: this._rotationLayer, + helpLayer: this._layer, + startAngle: this._startAngle, + angle: this._rotationLayer.pm.getAngle(), + angleDiff, + oldLatLngs, + newLatLngs: this._rotationLayer.getLatLngs() + }, source, customPayload); + }, + // Fired when rotation ends + _fireRotationEnd(fireLayer, startAngle, originLatLngs, source = "Rotation", customPayload = {}){ + this.__fire(fireLayer,'pm:rotateend', { + layer: this._rotationLayer, + helpLayer: this._layer, + startAngle, + angle: this._rotationLayer.pm.getAngle(), + originLatLngs, + newLatLngs: this._rotationLayer.getLatLngs() + }, source, customPayload); + }, + // Global Events // Fired when a Toolbar action is clicked _fireActionClick(action, btnName, button, source = "Toolbar", customPayload = {}){ diff --git a/src/js/Mixins/Rotating.js b/src/js/Mixins/Rotating.js index c57556b7..1f5f2837 100644 --- a/src/js/Mixins/Rotating.js +++ b/src/js/Mixins/Rotating.js @@ -20,15 +20,8 @@ const RotateMixin = { const originLatLngs = L.polygon(this._rotationLayer.pm._rotateOrgLatLng).getLatLngs(); - const data = { - layer: this._rotationLayer, - helpLayer: this._layer, - startAngle: this._startAngle, - originLatLngs - }; - L.PM.Utils._fireEvent(this._rotationLayer,'pm:rotatestart',data); - L.PM.Utils._fireEvent(this._map,'pm:rotatestart',data); - + this._fireRotationStart(this._rotationLayer, originLatLngs); + this._fireRotationStart(this._map, originLatLngs); }, _onRotate(e) { const position = _toPoint(this._map, e.target.getLatLng()); @@ -66,8 +59,8 @@ const RotateMixin = { oldLatLngs, newLatLngs: this._rotationLayer.getLatLngs() }; - L.PM.Utils._fireEvent(this._rotationLayer,'pm:rotate',data); - L.PM.Utils._fireEvent(this._map,'pm:rotate',data); + this._fireRotation(this._rotationLayer, angleDiff, oldLatLngs); + this._fireRotation(this._map, angleDiff, oldLatLngs); }, _onRotateEnd(){ const startAngle = this._startAngle; @@ -81,16 +74,8 @@ const RotateMixin = { // store the new latlngs this._rotationLayer.pm._rotateOrgLatLng = L.polygon(this._rotationLayer.getLatLngs()).getLatLngs(); - const data = { - layer: this._rotationLayer, - helpLayer: this._layer, - startAngle, - angle: this._rotationLayer.pm.getAngle(), - originLatLngs, - newLatLngs: this._rotationLayer.getLatLngs() - }; - L.PM.Utils._fireEvent(this._rotationLayer,'pm:rotateend',data); - L.PM.Utils._fireEvent(this._map,'pm:rotateend',data); + this._fireRotationEnd(this._rotationLayer,startAngle,originLatLngs); + this._fireRotationEnd(this._map,startAngle,originLatLngs); this._preventRenderingMarkers(false); }, @@ -133,13 +118,9 @@ const RotateMixin = { this._rotateEnabled = true; - const data = { - layer: this._layer, - helpLayer: this._rotatePoly - }; - L.PM.Utils._fireEvent(this._layer, 'pm:rotateenable', data); + this._fireRotationEnable(this._layer); // we need to use this._layer._map because this._map can be undefined if layer was never enabled for editing before - L.PM.Utils._fireEvent(this._layer._map, 'pm:rotateenable', data); + this._fireRotationEnable(this._layer._map); }, disableRotate(){ if(this.rotateEnabled()){ @@ -152,12 +133,9 @@ const RotateMixin = { this._rotateEnabled = false; - const data = { - layer: this._layer, - }; - L.PM.Utils._fireEvent(this._layer, 'pm:rotatedisable', data); + this._fireRotationDisable(this._layer); // we need to use this._layer._map because this._map can be undefined if layer was never enabled for editing before - L.PM.Utils._fireEvent(this._layer._map, 'pm:rotatedisable', data); + this._fireRotationDisable(this._layer._map); } }, rotateEnabled(){ From 4874ffc5a4075a7a835c03b114c07614ec3c94e7 Mon Sep 17 00:00:00 2001 From: falke-design Date: Tue, 11 May 2021 17:51:20 +0200 Subject: [PATCH 5/5] Move _fireRotateModeEvent to EventMixin --- src/js/Mixins/Events.js | 7 +++++++ src/js/Mixins/Modes/Mode.Rotate.js | 6 ------ 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/js/Mixins/Events.js b/src/js/Mixins/Events.js index aa63f75c..f48c44b4 100644 --- a/src/js/Mixins/Events.js +++ b/src/js/Mixins/Events.js @@ -285,6 +285,13 @@ const EventMixin = { map: this._map, }, source, customPayload); }, + // Fired when Rotation Mode is toggled. + _fireRotateModeEvent() { + L.PM.Utils._fireEvent(this.map, 'pm:globalrotatemodetoggled', { + enabled: this.globalRotateModeEnabled(), + map: this.map, + }); + }, // Fired when LayerGroup is removed _fireRemoveLayerGroup(fireLayer, refLayer = fireLayer, source = "Edit", customPayload = {}) { this.__fire(fireLayer,'pm:remove', { layer: refLayer, shape: undefined }, source, customPayload); diff --git a/src/js/Mixins/Modes/Mode.Rotate.js b/src/js/Mixins/Modes/Mode.Rotate.js index 3f444070..75051e80 100644 --- a/src/js/Mixins/Modes/Mode.Rotate.js +++ b/src/js/Mixins/Modes/Mode.Rotate.js @@ -33,12 +33,6 @@ const GlobalRotateMode = { this.enableGlobalRotateMode(); } }, - _fireRotateModeEvent() { - L.PM.Utils._fireEvent(this.map, 'pm:globalrotatemodetoggled', { - enabled: this.globalRotateModeEnabled(), - map: this.map, - }); - } }; export default GlobalRotateMode;