leaflet-polydraw 0.8.9 → 0.9.0

package/dist/polydraw.es.js

@@ -11644,6 +11644,52 @@ function convex(geojson, options = {}) {
   }
   return null;
 }
+function centerOfMass(geojson, options = {}) {
+  switch (getType(geojson)) {
+    case "Point":
+      return point(getCoord(geojson), options.properties);
+    case "Polygon":
+      var coords = [];
+      coordEach(geojson, function(coord) {
+        coords.push(coord);
+      });
+      var centre = centroid(geojson, { properties: options.properties });
+      var translation = centre.geometry.coordinates;
+      var sx = 0;
+      var sy = 0;
+      var sArea = 0;
+      var i, pi2, pj, xi, xj, yi, yj, a;
+      var neutralizedPoints = coords.map(function(point2) {
+        return [point2[0] - translation[0], point2[1] - translation[1]];
+      });
+      for (i = 0; i < coords.length - 1; i++) {
+        pi2 = neutralizedPoints[i];
+        xi = pi2[0];
+        yi = pi2[1];
+        pj = neutralizedPoints[i + 1];
+        xj = pj[0];
+        yj = pj[1];
+        a = xi * yj - xj * yi;
+        sArea += a;
+        sx += (xi + xj) * a;
+        sy += (yi + yj) * a;
+      }
+      if (sArea === 0) {
+        return centre;
+      } else {
+        var area2 = sArea * 0.5;
+        var areaFactor = 1 / (6 * area2);
+        return point(
+          [translation[0] + areaFactor * sx, translation[1] + areaFactor * sy],
+          options.properties
+        );
+      }
+    default:
+      var hull = convex(geojson);
+      if (hull) return centerOfMass(hull, { properties: options.properties });
+      else return centroid(geojson, { properties: options.properties });
+  }
+}
 function clone$1(geojson) {
   if (!geojson) {
     throw new Error("geojson is required");
@@ -16060,6 +16106,9 @@ class TurfHelper {
     const length$12 = length(poly, { units: "kilometers" });
     return length$12;
   }
+  getCenterOfMass(feature2) {
+    return centerOfMass(feature2);
+  }
   getDoubleElbowLatLngs(points) {
     const doubleized = [];
     const len = points.length;
@@ -16997,6 +17046,18 @@ class PolygonUtil {
     const bounds = polyLine.getBounds();
     return bounds;
   }
+  /**
+   * Calculates the center of mass of the polygon.
+   * @param polygon A GeoJSON polygon.
+   * @returns The center LatLng.
+   */
+  static getCenterOfMass(polygon2) {
+    const centerOfMass2 = this.turfHelper.getCenterOfMass(polygon2);
+    return {
+      lat: centerOfMass2.geometry.coordinates[1],
+      lng: centerOfMass2.geometry.coordinates[0]
+    };
+  }
 }
 __publicField(PolygonUtil, "turfHelper", new TurfHelper(defaultConfig));
 class PolygonInfo {
@@ -17214,11 +17275,57 @@ class MapStateService {
   updatePolygons(polygons) {
   }
 }
+class EventManager {
+  constructor() {
+    __publicField(this, "eventListeners", /* @__PURE__ */ new Map());
+  }
+  /**
+   * Register an event listener.
+   * @param event - The event to listen for.
+   * @param callback - The callback to execute when the event is emitted.
+   */
+  on(event, callback) {
+    var _a2;
+    if (!this.eventListeners.has(event)) {
+      this.eventListeners.set(event, []);
+    }
+    (_a2 = this.eventListeners.get(event)) == null ? void 0 : _a2.push(callback);
+  }
+  /**
+   * Unregister an event listener.
+   * @param event - The event to stop listening for.
+   * @param callback - The specific callback to remove.
+   */
+  off(event, callback) {
+    if (this.eventListeners.has(event)) {
+      const listeners = this.eventListeners.get(event);
+      if (listeners) {
+        const index = listeners.indexOf(callback);
+        if (index > -1) {
+          listeners.splice(index, 1);
+        }
+      }
+    }
+  }
+  /**
+   * Emit an event.
+   * @param event - The event to emit.
+   * @param data - The data to pass to the event listeners.
+   */
+  emit(event, data) {
+    var _a2;
+    if (this.eventListeners.has(event)) {
+      (_a2 = this.eventListeners.get(event)) == null ? void 0 : _a2.forEach((callback) => callback(data));
+    }
+  }
+}
 class ModeManager {
-  constructor(config) {
+  constructor(config, eventManager) {
     __publicField(this, "state");
     __publicField(this, "config");
+    __publicField(this, "eventManager");
     this.config = config;
+    this.eventManager = eventManager;
     this.state = this.createInitialState();
   }
   /**
@@ -17268,6 +17375,7 @@ class ModeManager {
         break;
     }
     this.state.isDrawingActive = mode !== DrawMode.Off;
+    this.eventManager.emit("polydraw:mode:change", { mode });
   }
   /**
    * Set interaction state for Off mode (normal editing)
@@ -17401,8 +17509,8 @@ class PolygonDrawManager {
     __publicField(this, "map");
     __publicField(this, "config");
     __publicField(this, "modeManager");
+    __publicField(this, "eventManager");
     __publicField(this, "tracer");
-    __publicField(this, "eventListeners", /* @__PURE__ */ new Map());
     // Point-to-Point drawing state
     __publicField(this, "p2pMarkers", []);
     __publicField(this, "isModifierKeyHeld", false);
@@ -17411,28 +17519,9 @@ class PolygonDrawManager {
     this.map = dependencies.map;
     this.config = dependencies.config;
     this.modeManager = dependencies.modeManager;
+    this.eventManager = dependencies.eventManager;
     this.tracer = dependencies.tracer;
   }
-  /**
-   * Add event listener
-   */
-  on(event, callback) {
-    console.log("PolygonDrawManager on");
-    if (!this.eventListeners.has(event)) {
-      this.eventListeners.set(event, []);
-    }
-    this.eventListeners.get(event).push(callback);
-  }
-  /**
-   * Emit event to all listeners
-   */
-  emit(event, data) {
-    console.log("PolygonDrawManager emit");
-    const listeners = this.eventListeners.get(event);
-    if (listeners) {
-      listeners.forEach((callback) => callback(data));
-    }
-  }
   /**
    * Handle mouse move during freehand drawing
    */
@@ -17475,7 +17564,7 @@ class PolygonDrawManager {
         error: "Invalid polygon created from trace"
       };
     }
-    this.emit("drawCompleted", {
+    this.eventManager.emit("polydraw:polygon:created", {
       polygon: geoPos,
       mode: this.modeManager.getCurrentMode()
     });
@@ -17606,7 +17695,7 @@ class PolygonDrawManager {
       const geoPos = this.turfHelper.getMultiPolygon([[coordinates]]);
       this.clearP2pMarkers();
       this.resetTracer();
-      this.emit("drawCompleted", {
+      this.eventManager.emit("polydraw:polygon:created", {
         polygon: geoPos,
         mode: DrawMode.PointToPoint,
         isPointToPoint: true
@@ -17624,7 +17713,9 @@ class PolygonDrawManager {
     console.log("PolygonDrawManager cancelPointToPointDrawing");
     this.clearP2pMarkers();
     this.resetTracer();
-    this.emit("drawCancelled", { mode: DrawMode.PointToPoint });
+    this.eventManager.emit("polydraw:draw:cancel", {
+      mode: DrawMode.PointToPoint
+    });
   }
   /**
    * Clear all P2P markers
@@ -18321,11 +18412,12 @@ class PolygonInteractionManager {
     __publicField(this, "map");
     __publicField(this, "config");
     __publicField(this, "modeManager");
-    __publicField(this, "eventListeners", /* @__PURE__ */ new Map());
+    __publicField(this, "eventManager");
     // Polygon drag state
     __publicField(this, "currentDragPolygon", null);
     __publicField(this, "currentModifierDragMode", false);
     __publicField(this, "isModifierKeyHeld", false);
+    __publicField(this, "_openMenuPopup", null);
     // Read-only access to feature groups
     __publicField(this, "getFeatureGroups");
     __publicField(this, "addFeatureGroup");
@@ -18404,30 +18496,11 @@ class PolygonInteractionManager {
     this.map = dependencies.map;
     this.config = dependencies.config;
     this.modeManager = dependencies.modeManager;
+    this.eventManager = dependencies.eventManager;
     this.getFeatureGroups = featureGroupAccess.getFeatureGroups;
     this.addFeatureGroup = featureGroupAccess.addFeatureGroup;
     this.removeFeatureGroup = featureGroupAccess.removeFeatureGroup;
   }
-  /**
-   * Add event listener
-   */
-  on(event, callback) {
-    console.log("PolygonInteractionManager on");
-    if (!this.eventListeners.has(event)) {
-      this.eventListeners.set(event, []);
-    }
-    this.eventListeners.get(event).push(callback);
-  }
-  /**
-   * Emit event to all listeners
-   */
-  emit(event, data) {
-    console.log("PolygonInteractionManager emit");
-    const listeners = this.eventListeners.get(event);
-    if (listeners) {
-      listeners.forEach((callback) => callback(data));
-    }
-  }
   /**
    * Add markers to a polygon feature group
    */
@@ -18459,6 +18532,7 @@ class PolygonInteractionManager {
         iconClasses = this.config.markers.markerInfoIcon.styleClasses;
       }
       const processedClasses = Array.isArray(iconClasses) ? iconClasses : [iconClasses];
+      const isSpecialMarker = i === menuMarkerIdx && this.config.markers.menuMarker || i === deleteMarkerIdx && this.config.markers.deleteMarker || i === infoMarkerIdx && this.config.markers.infoMarker;
       const marker = new L.Marker(latlng, {
         icon: this.createDivIcon(processedClasses),
         draggable: this.config.modes.dragElbow,
@@ -18504,7 +18578,7 @@ class PolygonInteractionManager {
           e.preventDefault();
           e.stopPropagation();
           marker.fire("click");
-          if (this.isDraggingMarker) {
+          if (this.isDraggingMarker && !isSpecialMarker) {
             const fg = marker._polydrawFeatureGroup;
             if (this.modeManager.canPerformAction("markerDrag") && fg) {
               this.markerDragEnd(fg);
@@ -18531,12 +18605,25 @@ class PolygonInteractionManager {
         marker.options.zIndexOffset = this.config.markers.markerMenuIcon.zIndexOffset ?? this.config.markers.zIndexOffset;
         marker.on("click", () => {
           console.log("menu marker clicked");
-          marker.unbindPopup();
+          const polygonGeoJSON = this.getPolygonGeoJSONFromFeatureGroup(featureGroup);
+          const centerOfMass2 = PolygonUtil.getCenterOfMass(polygonGeoJSON);
           const menuPopup = this.generateMenuMarkerPopup(latlngs, featureGroup);
-          marker.bindPopup(menuPopup, { className: "alter-marker" });
-          marker.openPopup();
+          menuPopup.setLatLng(centerOfMass2).openOn(this.map);
         });
-        marker.on("popupopen", () => {
+        marker.on("popupopen", (e) => {
+          const popup = e.popup;
+          const popupContent = popup.getElement();
+          if (!popupContent) return;
+          setTimeout(() => {
+            const mapContainer = this.map.getContainer();
+            const mapBounds = mapContainer.getBoundingClientRect();
+            const popupBounds = popupContent.getBoundingClientRect();
+            if (popupBounds.left < mapBounds.left) {
+              popupContent.style.transform = `translateX(${mapBounds.left - popupBounds.left}px)`;
+            } else if (popupBounds.right > mapBounds.right) {
+              popupContent.style.transform = `translateX(${mapBounds.right - popupBounds.right}px)`;
+            }
+          }, 0);
           console.log("popupopen, setting touchAction to manipulation");
           const container2 = this.map.getContainer();
           if (container2) {
@@ -18558,12 +18645,24 @@ class PolygonInteractionManager {
         marker.options.zIndexOffset = this.config.markers.markerInfoIcon.zIndexOffset ?? this.config.markers.zIndexOffset;
         marker.on("click", () => {
           console.log("info marker clicked");
-          marker.unbindPopup();
           const infoPopup = this.generateInfoMarkerPopup(area2, perimeter);
-          marker.bindPopup(infoPopup, { className: "info-marker" });
-          marker.openPopup();
+          const centerOfMass2 = PolygonUtil.getCenterOfMass(polygonGeoJSON);
+          infoPopup.setLatLng(centerOfMass2).openOn(this.map);
         });
-        marker.on("popupopen", () => {
+        marker.on("popupopen", (e) => {
+          const popup = e.popup;
+          const popupContent = popup.getElement();
+          if (!popupContent) return;
+          setTimeout(() => {
+            const mapContainer = this.map.getContainer();
+            const mapBounds = mapContainer.getBoundingClientRect();
+            const popupBounds = popupContent.getBoundingClientRect();
+            if (popupBounds.left < mapBounds.left) {
+              popupContent.style.transform = `translateX(${mapBounds.left - popupBounds.left}px)`;
+            } else if (popupBounds.right > mapBounds.right) {
+              popupContent.style.transform = `translateX(${mapBounds.right - popupBounds.right}px)`;
+            }
+          }, 0);
           console.log("popupopen, setting touchAction to manipulation");
           const container2 = this.map.getContainer();
           if (container2) {
@@ -18596,9 +18695,10 @@ class PolygonInteractionManager {
             }
           } else {
             if (i === deleteMarkerIdx && this.config.markers.deleteMarker) {
+              this.map.closePopup();
               this.removeFeatureGroup(featureGroup);
               this.polygonInformation.createPolygonInformationStorage(this.getFeatureGroups());
-              this.emit("polygonDeleted");
+              this.eventManager.emit("polydraw:polygon:deleted", void 0);
             }
           }
         }
@@ -18862,7 +18962,7 @@ class PolygonInteractionManager {
             const polydrawPolygon = parentPolygon;
             const optimizationLevel = polydrawPolygon._polydrawOptimizationLevel || 0;
             this.removeFeatureGroup(parentFeatureGroup);
-            this.emit("polygonModified", {
+            this.eventManager.emit("polydraw:polygon:updated", {
               operation: "addVertex",
               polygon: newPolygon,
               optimizationLevel
@@ -18934,7 +19034,7 @@ class PolygonInteractionManager {
       this.removeFeatureGroup(currentFeatureGroup);
     }
     const newPolygon = this.turfHelper.getMultiPolygon([newAllRings]);
-    this.emit("polygonModified", {
+    this.eventManager.emit("polydraw:polygon:updated", {
       operation: "removeVertex",
       polygon: newPolygon
     });
@@ -19036,6 +19136,9 @@ class PolygonInteractionManager {
     console.log("PolygonInteractionManager markerDragEnd");
     this.polygonInformation.deletePolygonInformationStorage();
     const featureCollection2 = featureGroup.toGeoJSON();
+    if (!featureCollection2.features || featureCollection2.features.length === 0) {
+      return;
+    }
     this.removeFeatureGroup(featureGroup);
     if (featureCollection2.features[0].geometry.coordinates.length > 1) {
       for (const element of featureCollection2.features[0].geometry.coordinates) {
@@ -19043,14 +19146,14 @@ class PolygonInteractionManager {
         if (this.turfHelper.hasKinks(feature2)) {
           const unkink = this.turfHelper.getKinks(feature2);
           for (const polygon2 of unkink) {
-            this.emit("polygonModified", {
+            this.eventManager.emit("polydraw:polygon:updated", {
               operation: "markerDrag",
               polygon: this.turfHelper.getTurfPolygon(polygon2),
               allowMerge: true
             });
           }
         } else {
-          this.emit("polygonModified", {
+          this.eventManager.emit("polydraw:polygon:updated", {
             operation: "markerDrag",
             polygon: feature2,
             allowMerge: true
@@ -19064,14 +19167,24 @@ class PolygonInteractionManager {
       if (this.turfHelper.hasKinks(feature2)) {
         const unkink = this.turfHelper.getKinks(feature2);
         for (const polygon2 of unkink) {
-          this.emit("polygonModified", {
+          this.eventManager.emit("polydraw:polygon:updated", {
+            operation: "markerDrag",
+            polygon: this.turfHelper.getTurfPolygon(polygon2),
+            allowMerge: true
+          });
+          this.eventManager.emit("polydraw:polygon:updated", {
             operation: "markerDrag",
             polygon: this.turfHelper.getTurfPolygon(polygon2),
             allowMerge: true
           });
         }
       } else {
-        this.emit("polygonModified", {
+        this.eventManager.emit("polydraw:polygon:updated", {
+          operation: "markerDrag",
+          polygon: feature2,
+          allowMerge: true
+        });
+        this.eventManager.emit("polydraw:polygon:updated", {
           operation: "markerDrag",
           polygon: feature2,
           allowMerge: true
@@ -19177,7 +19290,7 @@ class PolygonInteractionManager {
       }
       this.removeFeatureGroup(featureGroup);
       const feature2 = this.turfHelper.getTurfPolygon(newGeoJSON);
-      this.emit("polygonModified", {
+      this.eventManager.emit("polydraw:polygon:updated", {
         operation: "polygonDrag",
         polygon: feature2,
         allowMerge: true
@@ -19333,7 +19446,7 @@ class PolygonInteractionManager {
               const coords = this.turfHelper.getCoords(difference3);
               for (const coordSet of coords) {
                 const individualPolygon = this.turfHelper.getMultiPolygon([coordSet]);
-                this.emit("polygonModified", {
+                this.eventManager.emit("polydraw:polygon:updated", {
                   operation: "modifierSubtract",
                   polygon: this.turfHelper.getTurfPolygon(individualPolygon),
                   allowMerge: false
@@ -19343,7 +19456,7 @@ class PolygonInteractionManager {
             }
           } catch (differenceError) {
             console.warn("Failed to perform difference operation:", differenceError);
-            this.emit("polygonModified", {
+            this.eventManager.emit("polydraw:polygon:updated", {
               operation: "modifierSubtractFallback",
               polygon: existingPolygon,
               allowMerge: false
@@ -19528,8 +19641,6 @@ class PolygonInteractionManager {
     outerWrapper.classList.add("alter-marker-outer-wrapper");
     const wrapper = document.createElement("div");
     wrapper.classList.add("alter-marker-wrapper");
-    const invertedCorner = document.createElement("i");
-    invertedCorner.classList.add("inverted-corner");
     const markerContent = document.createElement("div");
     markerContent.classList.add("content");
     const markerContentWrapper = document.createElement("div");
@@ -19553,7 +19664,6 @@ class PolygonInteractionManager {
     const separator = document.createElement("div");
     separator.classList.add("separator");
     outerWrapper.appendChild(wrapper);
-    wrapper.appendChild(invertedCorner);
     wrapper.appendChild(markerContent);
     markerContent.appendChild(markerContentWrapper);
     markerContentWrapper.appendChild(simplify3);
@@ -19563,42 +19673,83 @@ class PolygonInteractionManager {
     markerContentWrapper.appendChild(bbox2);
     markerContentWrapper.appendChild(separator.cloneNode());
     markerContentWrapper.appendChild(bezier2);
+    const closePopupIfOpen = () => {
+      if (this._openMenuPopup) {
+        this.map.closePopup(this._openMenuPopup);
+        this._openMenuPopup = null;
+      }
+    };
     simplify3.addEventListener("touchend", (e) => {
-      console.log("simplify touchend");
       e.preventDefault();
       e.stopPropagation();
-      this.emit("menuAction", { action: "simplify", latLngs, featureGroup });
+      this.eventManager.emit("polydraw:menu:action", {
+        action: "simplify",
+        latLngs,
+        featureGroup
+      });
+      closePopupIfOpen();
     });
     simplify3.onclick = () => {
-      console.log("simplify clicked");
-      this.emit("menuAction", { action: "simplify", latLngs, featureGroup });
+      this.eventManager.emit("polydraw:menu:action", {
+        action: "simplify",
+        latLngs,
+        featureGroup
+      });
+      closePopupIfOpen();
     };
     bbox2.addEventListener("touchend", (e) => {
-      console.log("bbox touchend");
       e.preventDefault();
       e.stopPropagation();
-      this.emit("menuAction", { action: "bbox", latLngs, featureGroup });
+      this.eventManager.emit("polydraw:menu:action", {
+        action: "bbox",
+        latLngs,
+        featureGroup
+      });
+      closePopupIfOpen();
     });
     bbox2.onclick = () => {
-      this.emit("menuAction", { action: "bbox", latLngs, featureGroup });
+      this.eventManager.emit("polydraw:menu:action", {
+        action: "bbox",
+        latLngs,
+        featureGroup
+      });
+      closePopupIfOpen();
     };
     doubleElbows.addEventListener("touchend", (e) => {
-      console.log("doubleElbows touchend");
       e.preventDefault();
       e.stopPropagation();
-      this.emit("menuAction", { action: "doubleElbows", latLngs, featureGroup });
+      this.eventManager.emit("polydraw:menu:action", {
+        action: "doubleElbows",
+        latLngs,
+        featureGroup
+      });
+      closePopupIfOpen();
     });
     doubleElbows.onclick = () => {
-      this.emit("menuAction", { action: "doubleElbows", latLngs, featureGroup });
+      this.eventManager.emit("polydraw:menu:action", {
+        action: "doubleElbows",
+        latLngs,
+        featureGroup
+      });
+      closePopupIfOpen();
     };
     bezier2.addEventListener("touchend", (e) => {
-      console.log("bezier touchend");
       e.preventDefault();
       e.stopPropagation();
-      this.emit("menuAction", { action: "bezier", latLngs, featureGroup });
+      this.eventManager.emit("polydraw:menu:action", {
+        action: "bezier",
+        latLngs,
+        featureGroup
+      });
+      closePopupIfOpen();
     });
     bezier2.onclick = () => {
-      this.emit("menuAction", { action: "bezier", latLngs, featureGroup });
+      this.eventManager.emit("polydraw:menu:action", {
+        action: "bezier",
+        latLngs,
+        featureGroup
+      });
+      closePopupIfOpen();
     };
     L.DomEvent.disableClickPropagation(outerWrapper);
     outerWrapper.style.pointerEvents = "auto";
@@ -19606,7 +19757,13 @@ class PolygonInteractionManager {
       btn.style.pointerEvents = "auto";
       btn.addEventListener("click", (e) => e.stopPropagation());
     });
-    return outerWrapper;
+    const popup = L.popup({
+      closeButton: true,
+      autoClose: true,
+      className: "menu-popup"
+    }).setContent(outerWrapper);
+    this._openMenuPopup = popup;
+    return popup;
   }
   getPolygonGeoJSONFromFeatureGroup(featureGroup) {
     console.log("PolygonInteractionManager getPolygonGeoJSONFromFeatureGroup");
@@ -19693,8 +19850,6 @@ class PolygonInteractionManager {
     outerWrapper.classList.add("info-marker-outer-wrapper");
     const wrapper = document.createElement("div");
     wrapper.classList.add("info-marker-wrapper");
-    const invertedCorner = document.createElement("i");
-    invertedCorner.classList.add("inverted-corner");
     const markerContent = document.createElement("div");
     markerContent.classList.add("content");
     const infoContentWrapper = document.createElement("div");
@@ -19709,7 +19864,6 @@ class PolygonInteractionManager {
     infoContentWrapper.appendChild(perimeterDiv);
     markerContent.appendChild(infoContentWrapper);
     outerWrapper.appendChild(wrapper);
-    wrapper.appendChild(invertedCorner);
     wrapper.appendChild(markerContent);
     L.DomEvent.disableClickPropagation(outerWrapper);
     outerWrapper.style.pointerEvents = "auto";
@@ -19717,7 +19871,12 @@ class PolygonInteractionManager {
       btn.style.pointerEvents = "auto";
       btn.addEventListener("click", (e) => e.stopPropagation());
     });
-    return outerWrapper;
+    const popup = L.popup({
+      closeButton: true,
+      autoClose: true,
+      className: "info-popup"
+    }).setContent(outerWrapper);
+    return popup;
   }
 }
 class PolygonMutationManager {
@@ -19727,8 +19886,8 @@ class PolygonMutationManager {
     __publicField(this, "map");
     __publicField(this, "config");
     __publicField(this, "modeManager");
+    __publicField(this, "eventManager");
     __publicField(this, "getFeatureGroups");
-    __publicField(this, "eventListeners", /* @__PURE__ */ new Map());
     // Specialized managers
     __publicField(this, "geometryManager");
     __publicField(this, "drawManager");
@@ -19738,6 +19897,7 @@ class PolygonMutationManager {
     this.map = dependencies.map;
     this.config = dependencies.config;
     this.modeManager = dependencies.modeManager;
+    this.eventManager = dependencies.eventManager;
     this.getFeatureGroups = dependencies.getFeatureGroups;
     this.initializeSpecializedManagers(dependencies);
   }
@@ -19755,6 +19915,7 @@ class PolygonMutationManager {
       map: dependencies.map,
       config: dependencies.config,
       modeManager: dependencies.modeManager,
+      eventManager: this.eventManager,
       tracer: placeholderTracer
     });
     this.interactionManager = new PolygonInteractionManager(
@@ -19763,7 +19924,8 @@ class PolygonMutationManager {
         polygonInformation: dependencies.polygonInformation,
         map: dependencies.map,
         config: dependencies.config,
-        modeManager: dependencies.modeManager
+        modeManager: dependencies.modeManager,
+        eventManager: this.eventManager
       },
       {
         getFeatureGroups: this.getFeatureGroups,
@@ -19777,38 +19939,29 @@ class PolygonMutationManager {
    * Set up event forwarding from specialized managers to facade
    */
   setupEventForwarding() {
-    this.drawManager.on("drawCompleted", (data) => {
-      this.handleDrawCompleted(data);
-    });
-    this.drawManager.on("drawCancelled", (data) => {
+    this.eventManager.on("polydraw:draw:cancel", (data) => {
       this.emit("drawCancelled", data);
     });
-    this.interactionManager.on("polygonModified", (data) => {
+    this.eventManager.on("polydraw:polygon:updated", (data) => {
       this.handlePolygonModified(data);
     });
-    this.interactionManager.on("menuAction", (data) => {
+    this.eventManager.on("polydraw:menu:action", (data) => {
       this.handleMenuAction(data);
     });
-    this.interactionManager.on("checkIntersection", (data) => {
+    this.eventManager.on("polydraw:check:intersection", (data) => {
       const hasIntersection = this.geometryManager.checkPolygonIntersection(
         data.polygon1,
         data.polygon2
       );
       data.callback(hasIntersection);
     });
-    this.interactionManager.on("performSubtractOperation", (data) => {
+    this.eventManager.on("polydraw:subtract", (data) => {
       this.subtractPolygon(data.subtractPolygon);
     });
-    this.interactionManager.on("polygonDeleted", () => {
+    this.eventManager.on("polydraw:polygon:deleted", () => {
       this.emit("polygonDeleted");
     });
   }
-  /**
-   * Handle draw completion from draw manager
-   */
-  async handleDrawCompleted(data) {
-    await this.addPolygon(data.polygon, { simplify: true });
-  }
   /**
    * Handle polygon modification from interaction manager
    */
@@ -19863,19 +20016,13 @@ class PolygonMutationManager {
    * Add event listener
    */
   on(event, callback) {
-    if (!this.eventListeners.has(event)) {
-      this.eventListeners.set(event, []);
-    }
-    this.eventListeners.get(event).push(callback);
+    this.eventManager.on(event, callback);
   }
   /**
    * Emit event to all listeners
    */
   emit(event, data) {
-    const listeners = this.eventListeners.get(event);
-    if (listeners) {
-      listeners.forEach((callback) => callback(data));
-    }
+    this.eventManager.emit(event, data);
   }
   /**
    * Add a polygon with optional merging logic
@@ -20455,6 +20602,7 @@ class Polydraw extends L.Control {
     __publicField(this, "subContainer");
     __publicField(this, "config");
     __publicField(this, "mapStateService");
+    __publicField(this, "eventManager");
     __publicField(this, "polygonInformation");
     __publicField(this, "modeManager");
     __publicField(this, "polygonDrawManager");
@@ -20528,8 +20676,9 @@ class Polydraw extends L.Control {
   initializeComponents() {
     this.turfHelper = new TurfHelper(this.config);
     this.mapStateService = new MapStateService();
+    this.eventManager = new EventManager();
     this.polygonInformation = new PolygonInformationService(this.mapStateService);
-    this.modeManager = new ModeManager(this.config);
+    this.modeManager = new ModeManager(this.config, this.eventManager);
     this.polygonInformation.onPolygonInfoUpdated((_k) => {
       this.updateActivateButtonIndicator();
     });
@@ -20613,7 +20762,7 @@ class Polydraw extends L.Control {
       this.polygonInformation.saveCurrentState();
     };
     const onEraseClick = (e) => {
-      console.log("onEraseClick");
+      this.map.closePopup();
       if (e) {
         e.preventDefault();
         e.stopPropagation();
@@ -20663,6 +20812,7 @@ class Polydraw extends L.Control {
       map: this.map,
       config: this.config,
       modeManager: this.modeManager,
+      eventManager: this.eventManager,
       tracer: this.tracer
     });
     this.polygonMutationManager = new PolygonMutationManager({
@@ -20671,6 +20821,7 @@ class Polydraw extends L.Control {
       map: this.map,
       config: this.config,
       modeManager: this.modeManager,
+      eventManager: this.eventManager,
       getFeatureGroups: () => this.arrayOfFeatureGroups
     });
     this.polygonMutationManager.on("polygonOperationComplete", (data) => {
@@ -20699,7 +20850,7 @@ class Polydraw extends L.Control {
     this.polygonMutationManager.on("polygonDeleted", () => {
       this.updateActivateButtonIndicator();
     });
-    this.polygonDrawManager.on("drawCompleted", async (data) => {
+    this.eventManager.on("polydraw:polygon:created", async (data) => {
       this.stopDraw();
       if (data.isPointToPoint) {
         await this.polygonMutationManager.addPolygon(data.polygon, {
@@ -20711,7 +20862,7 @@ class Polydraw extends L.Control {
       }
       this.polygonInformation.createPolygonInformationStorage(this.arrayOfFeatureGroups);
     });
-    this.polygonDrawManager.on("drawCancelled", () => {
+    this.eventManager.on("polydraw:draw:cancel", () => {
       this.stopDraw();
       this.setDrawMode(DrawMode.Off);
     });
@@ -20831,19 +20982,17 @@ class Polydraw extends L.Control {
     console.log("getDrawMode");
     return this.modeManager.getCurrentMode();
   }
-  onDrawModeChangeListener(callback) {
-    console.log("onDrawModeChangeListener");
-    this.drawModeListeners.push(callback);
+  on(event, callback) {
+    this.eventManager.on(event, callback);
   }
-  offDrawModeChangeListener(callback) {
-    console.log("offDrawModeChangeListener");
-    const index = this.drawModeListeners.indexOf(callback);
-    if (index > -1) {
-      this.drawModeListeners.splice(index, 1);
-    }
+  off(event, callback) {
+    this.eventManager.off(event, callback);
   }
   emitDrawModeChanged() {
     console.log("emitDrawModeChanged");
+    this.eventManager.emit("polydraw:mode:change", {
+      mode: this.modeManager.getCurrentMode()
+    });
     for (const cb of this.drawModeListeners) {
       cb(this.modeManager.getCurrentMode());
     }
@@ -21133,9 +21282,6 @@ class Polydraw extends L.Control {
    */
   isModifierKeyPressed(event) {
     console.log("isModifierKeyPressed");
-    if (isTouchDevice()) {
-      return false;
-    }
     const userAgent = navigator.userAgent.toLowerCase();
     const isMac = userAgent.includes("mac");
     if (isMac) {