leaflet-polydraw 0.8.10 → 0.9.1

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,43 +17509,22 @@ 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);
-    console.log("PolygonDrawManager constructor");
     this.turfHelper = dependencies.turfHelper;
     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
    */
   mouseMove(event) {
-    console.log("mouseMove");
     if ("latlng" in event && event.latlng) {
       this.tracer.addLatLng(event.latlng);
     } else if ("touches" in event && event.touches && event.touches.length > 0) {
@@ -17452,7 +17539,6 @@ class PolygonDrawManager {
    * Handle mouse up/leave to complete freehand drawing
    */
   async mouseUpLeave(event) {
-    console.log("mouseUpLeave");
     const tracerGeoJSON = this.tracer.toGeoJSON();
     if (!tracerGeoJSON || !tracerGeoJSON.geometry || !tracerGeoJSON.geometry.coordinates || tracerGeoJSON.geometry.coordinates.length < 3) {
       return {
@@ -17475,7 +17561,7 @@ class PolygonDrawManager {
         error: "Invalid polygon created from trace"
       };
     }
-    this.emit("drawCompleted", {
+    this.eventManager.emit("polydraw:polygon:created", {
       polygon: geoPos,
       mode: this.modeManager.getCurrentMode()
     });
@@ -17498,7 +17584,6 @@ class PolygonDrawManager {
    * Handle point-to-point click
    */
   handlePointToPointClick(clickLatLng) {
-    console.log("handlePointToPointClick");
     if (!clickLatLng) {
       return;
     }
@@ -17527,7 +17612,6 @@ class PolygonDrawManager {
         this.updateP2PTracer();
       });
       pointMarker.on("click", (e) => {
-        console.log("p2p marker click");
         if (this.isModifierKeyHeld && this.config.modes.edgeDeletion) {
           this.deleteP2PMarker(pointMarker);
           L.DomEvent.stopPropagation(e);
@@ -17557,7 +17641,6 @@ class PolygonDrawManager {
           }
         });
         pointMarker.on("click", (e) => {
-          console.log("p2p first marker click");
           if (this.isModifierKeyHeld && this.config.modes.edgeDeletion) {
             this.deleteP2PMarker(pointMarker);
             L.DomEvent.stopPropagation(e);
@@ -17578,7 +17661,6 @@ class PolygonDrawManager {
    * Handle double-click to complete point-to-point polygon
    */
   handleDoubleClick(e) {
-    console.log("handleDoubleClick");
     if (this.modeManager.getCurrentMode() !== DrawMode.PointToPoint) {
       return;
     }
@@ -17590,7 +17672,6 @@ class PolygonDrawManager {
    * Complete point-to-point polygon drawing
    */
   completePointToPointPolygon() {
-    console.log("PolygonDrawManager completePointToPointPolygon");
     const points = this.p2pMarkers.map((marker) => marker.getLatLng());
     if (points.length < 3) {
       return;
@@ -17606,7 +17687,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
@@ -17621,16 +17702,16 @@ class PolygonDrawManager {
    * Cancel point-to-point drawing
    */
   cancelPointToPointDrawing() {
-    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
    */
   clearP2pMarkers() {
-    console.log("PolygonDrawManager clearP2pMarkers");
     this.p2pMarkers.forEach((marker) => this.map.removeLayer(marker));
     this.p2pMarkers = [];
   }
@@ -17638,7 +17719,6 @@ class PolygonDrawManager {
    * Reset the tracer
    */
   resetTracer() {
-    console.log("PolygonDrawManager resetTracer");
     this.tracer.setLatLngs([]);
     try {
       this.tracer.setStyle({
@@ -17651,7 +17731,6 @@ class PolygonDrawManager {
    * Check if clicking on the first point to close polygon
    */
   isClickingFirstPoint(clickLatLng, firstPoint) {
-    console.log("PolygonDrawManager isClickingFirstPoint");
     if (!firstPoint) return false;
     const zoom = this.map.getZoom();
     const baseTolerance = 5e-4;
@@ -17702,21 +17781,18 @@ class PolygonDrawManager {
    * Get current P2P markers (for external access)
    */
   getP2pMarkers() {
-    console.log("PolygonDrawManager getP2pMarkers");
     return [...this.p2pMarkers];
   }
   /**
    * Check if currently in point-to-point drawing mode
    */
   isInPointToPointMode() {
-    console.log("PolygonDrawManager isInPointToPointMode");
     return this.modeManager.getCurrentMode() === DrawMode.PointToPoint;
   }
   /**
    * Get current tracer points count
    */
   getTracerPointsCount() {
-    console.log("PolygonDrawManager getTracerPointsCount");
     const points = this.tracer.getLatLngs();
     return points.length;
   }
@@ -18321,18 +18397,18 @@ 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");
     __publicField(this, "removeFeatureGroup");
     // Polygon dragging methods
     __publicField(this, "onPolygonMouseMove", (e) => {
-      console.log("PolygonInteractionManager onPolygonMouseMove");
       if (!this.currentDragPolygon || !this.currentDragPolygon._polydrawDragData.isDragging) return;
       const polygon2 = this.currentDragPolygon;
       const dragData = polygon2._polydrawDragData;
@@ -18350,7 +18426,6 @@ class PolygonInteractionManager {
       this.updateMarkersAndHoleLinesDuringDrag(polygon2, offsetLat, offsetLng);
     });
     __publicField(this, "onPolygonMouseUp", (e) => {
-      console.log("PolygonInteractionManager onPolygonMouseUp");
       if (!this.currentDragPolygon || !this.currentDragPolygon._polydrawDragData.isDragging) return;
       const polygon2 = this.currentDragPolygon;
       const dragData = polygon2._polydrawDragData;
@@ -18380,7 +18455,6 @@ class PolygonInteractionManager {
       this.currentDragPolygon = null;
     });
     __publicField(this, "onMarkerHoverForEdgeDeletionEvent", (e) => {
-      console.log("PolygonInteractionManager onMarkerHoverForEdgeDeletionEvent");
       if (!this.isModifierKeyHeld) return;
       const element = e.target;
       if (element) {
@@ -18390,7 +18464,6 @@ class PolygonInteractionManager {
       }
     });
     __publicField(this, "onMarkerLeaveForEdgeDeletionEvent", (e) => {
-      console.log("PolygonInteractionManager onMarkerLeaveForEdgeDeletionEvent");
       const element = e.target;
       if (element) {
         element.style.backgroundColor = "";
@@ -18398,41 +18471,20 @@ class PolygonInteractionManager {
         element.classList.remove("edge-deletion-hover");
       }
     });
-    console.log("PolygonInteractionManager constructor");
     this.turfHelper = dependencies.turfHelper;
     this.polygonInformation = dependencies.polygonInformation;
     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
    */
   addMarkers(latlngs, featureGroup) {
-    console.log("PolygonInteractionManager addMarkers");
     let menuMarkerIdx = this.getMarkerIndex(latlngs, this.config.markers.markerMenuIcon.position);
     let deleteMarkerIdx = this.getMarkerIndex(
       latlngs,
@@ -18459,6 +18511,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,
@@ -18495,16 +18548,18 @@ class PolygonInteractionManager {
       });
       const el = marker.getElement();
       if (el) {
-        el.addEventListener("touchstart", (e) => {
-          console.log("marker touchstart");
-          e.stopPropagation();
-        });
+        el.addEventListener(
+          "touchstart",
+          (e) => {
+            e.stopPropagation();
+          },
+          { passive: true }
+        );
         el.addEventListener("touchend", (e) => {
-          console.log("marker touchend");
           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);
@@ -18530,21 +18585,31 @@ class PolygonInteractionManager {
       if (i === menuMarkerIdx && this.config.markers.menuMarker) {
         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", () => {
-          console.log("popupopen, setting touchAction to manipulation");
+        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);
           const container2 = this.map.getContainer();
           if (container2) {
             container2.style.touchAction = "manipulation";
           }
         });
         marker.on("popupclose", () => {
-          console.log("popupclose, resetting touchAction");
           const container2 = this.map.getContainer();
           if (container2) {
             container2.style.touchAction = "";
@@ -18557,21 +18622,30 @@ class PolygonInteractionManager {
         const perimeter = this.getTotalPolygonPerimeter(polygonGeoJSON);
         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", () => {
-          console.log("popupopen, setting touchAction to manipulation");
+        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);
           const container2 = this.map.getContainer();
           if (container2) {
             container2.style.touchAction = "manipulation";
           }
         });
         marker.on("popupclose", () => {
-          console.log("popupclose, resetting touchAction");
           const container2 = this.map.getContainer();
           if (container2) {
             container2.style.touchAction = "";
@@ -18587,7 +18661,6 @@ class PolygonInteractionManager {
       });
       marker.on("click", (e) => {
         var _a2;
-        console.log("marker click");
         if (this.modeManager.isInOffMode()) {
           if (this.isModifierKeyPressed(e.originalEvent)) {
             const poly = (_a2 = featureGroup.getLayers().find((layer) => layer instanceof L.Polygon)) == null ? void 0 : _a2.toGeoJSON();
@@ -18596,9 +18669,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);
             }
           }
         }
@@ -18615,7 +18689,6 @@ class PolygonInteractionManager {
    * Add hole markers to a polygon feature group
    */
   addHoleMarkers(latlngs, featureGroup) {
-    console.log("PolygonInteractionManager addHoleMarkers");
     latlngs.forEach((latlng, i) => {
       const iconClasses = this.config.markers.holeIcon.styleClasses;
       const processedClasses = Array.isArray(iconClasses) ? iconClasses : [iconClasses];
@@ -18650,7 +18723,6 @@ class PolygonInteractionManager {
    * Add edge click listeners to a polygon
    */
   addEdgeClickListeners(polygon2, featureGroup) {
-    console.log("PolygonInteractionManager addEdgeClickListeners");
     const rawLatLngs = polygon2.getLatLngs();
     let processedRings;
     if (Array.isArray(rawLatLngs) && rawLatLngs.length > 0) {
@@ -18713,7 +18785,6 @@ class PolygonInteractionManager {
    * Enable polygon dragging functionality
    */
   enablePolygonDragging(polygon2, latlngs) {
-    console.log("PolygonInteractionManager enablePolygonDragging");
     if (!this.config.modes.dragPolygons) return;
     polygon2._polydrawOriginalLatLngs = latlngs;
     polygon2._polydrawDragData = {
@@ -18722,7 +18793,6 @@ class PolygonInteractionManager {
       startLatLngs: null
     };
     polygon2.on("mousedown", (e) => {
-      console.log("polygon mousedown");
       if (!this.modeManager.isInOffMode()) {
         L.DomEvent.stopPropagation(e);
         this.map.fire("mousedown", e);
@@ -18775,7 +18845,6 @@ class PolygonInteractionManager {
    * Update marker draggable state based on current mode
    */
   updateMarkerDraggableState() {
-    console.log("PolygonInteractionManager updateMarkerDraggableState");
     const shouldBeDraggable = this.modeManager.canPerformAction("markerDrag");
     this.getFeatureGroups().forEach((featureGroup) => {
       featureGroup.eachLayer((layer) => {
@@ -18800,7 +18869,6 @@ class PolygonInteractionManager {
    * Update all markers for edge deletion visual feedback
    */
   updateAllMarkersForEdgeDeletion(showFeedback) {
-    console.log("PolygonInteractionManager updateAllMarkersForEdgeDeletion");
     this.getFeatureGroups().forEach((featureGroup) => {
       featureGroup.eachLayer((layer) => {
         if (layer instanceof L.Marker) {
@@ -18813,7 +18881,6 @@ class PolygonInteractionManager {
    * Update individual marker for edge deletion visual feedback
    */
   updateMarkerForEdgeDeletion(marker, showFeedback) {
-    console.log("PolygonInteractionManager updateMarkerForEdgeDeletion");
     const element = marker.getElement();
     if (!element) return;
     if (showFeedback) {
@@ -18830,12 +18897,10 @@ class PolygonInteractionManager {
    * Set modifier key held state
    */
   setModifierKeyHeld(isHeld) {
-    console.log("PolygonInteractionManager setModifierKeyHeld");
     this.isModifierKeyHeld = isHeld;
   }
   // Private methods
   onEdgeClick(e, edgePolyline) {
-    console.log("onEdgeClick");
     if (!this.config.modes.attachElbow) {
       return;
     }
@@ -18862,7 +18927,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
@@ -18875,7 +18940,6 @@ class PolygonInteractionManager {
     L.DomEvent.stopPropagation(e);
   }
   highlightEdgeOnHover(edgePolyline, isHovering) {
-    console.log("PolygonInteractionManager highlightEdgeOnHover");
     if (isHovering) {
       edgePolyline.setStyle({
         color: "#7a9441",
@@ -18891,7 +18955,6 @@ class PolygonInteractionManager {
     }
   }
   elbowClicked(e, poly) {
-    console.log("elbowClicked");
     if (!this.config.modes.edgeDeletion) {
       return;
     }
@@ -18934,13 +18997,12 @@ class PolygonInteractionManager {
       this.removeFeatureGroup(currentFeatureGroup);
     }
     const newPolygon = this.turfHelper.getMultiPolygon([newAllRings]);
-    this.emit("polygonModified", {
+    this.eventManager.emit("polydraw:polygon:updated", {
       operation: "removeVertex",
       polygon: newPolygon
     });
   }
   findFeatureGroupForPoly(poly) {
-    console.log("PolygonInteractionManager findFeatureGroupForPoly");
     for (const featureGroup of this.getFeatureGroups()) {
       const featureCollection2 = featureGroup.toGeoJSON();
       if (featureCollection2 && featureCollection2.features && featureCollection2.features[0]) {
@@ -18957,7 +19019,6 @@ class PolygonInteractionManager {
       console.warn("No active marker set for dragging.");
       return;
     }
-    console.log("PolygonInteractionManager markerDrag", featureGroup);
     const newPos = [];
     let testarray = [];
     let hole = [];
@@ -19033,9 +19094,11 @@ class PolygonInteractionManager {
     layerLength[0].setLatLngs(newPos);
   }
   async markerDragEnd(featureGroup) {
-    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 +19106,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 +19127,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
@@ -19081,7 +19154,6 @@ class PolygonInteractionManager {
     this.polygonInformation.createPolygonInformationStorage(this.getFeatureGroups());
   }
   offsetPolygonCoordinates(latLngs, offsetLat, offsetLng) {
-    console.log("PolygonInteractionManager offsetPolygonCoordinates");
     if (!latLngs) return latLngs;
     if (Array.isArray(latLngs[0])) {
       return latLngs.map((ring) => this.offsetPolygonCoordinates(ring, offsetLat, offsetLng));
@@ -19097,7 +19169,6 @@ class PolygonInteractionManager {
     }
   }
   updateMarkersAndHoleLinesDuringDrag(polygon2, offsetLat, offsetLng) {
-    console.log("PolygonInteractionManager updateMarkersAndHoleLinesDuringDrag");
     try {
       let featureGroup = null;
       for (const fg of this.getFeatureGroups()) {
@@ -19154,7 +19225,6 @@ class PolygonInteractionManager {
     }
   }
   async updatePolygonAfterDrag(polygon2) {
-    console.log("PolygonInteractionManager updatePolygonAfterDrag");
     try {
       let featureGroup = null;
       for (const fg of this.getFeatureGroups()) {
@@ -19177,7 +19247,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
@@ -19188,7 +19258,6 @@ class PolygonInteractionManager {
   }
   detectModifierKey(event) {
     var _a2, _b2;
-    console.log("PolygonInteractionManager detectModifierKey");
     if (!((_b2 = (_a2 = this.config.dragPolygons) == null ? void 0 : _a2.modifierSubtract) == null ? void 0 : _b2.enabled)) {
       return false;
     }
@@ -19204,7 +19273,6 @@ class PolygonInteractionManager {
     }
   }
   setSubtractVisualMode(polygon2, enabled) {
-    console.log("PolygonInteractionManager setSubtractVisualMode");
     if (!polygon2 || !polygon2.setStyle) {
       return;
     }
@@ -19224,7 +19292,6 @@ class PolygonInteractionManager {
   }
   updateMarkerColorsForSubtractMode(polygon2, subtractMode) {
     var _a2, _b2;
-    console.log("PolygonInteractionManager updateMarkerColorsForSubtractMode");
     try {
       let featureGroup = null;
       for (const fg of this.getFeatureGroups()) {
@@ -19270,7 +19337,6 @@ class PolygonInteractionManager {
     }
   }
   handleModifierToggleDuringDrag(event) {
-    console.log("PolygonInteractionManager handleModifierToggleDuringDrag");
     const isModifierPressed = this.detectModifierKey(event);
     this.currentModifierDragMode = isModifierPressed;
     this.isModifierKeyHeld = isModifierPressed;
@@ -19279,11 +19345,9 @@ class PolygonInteractionManager {
     }
   }
   isModifierDragActive() {
-    console.log("PolygonInteractionManager isModifierDragActive");
     return this.currentModifierDragMode;
   }
   performModifierSubtract(draggedGeoJSON, originalFeatureGroup) {
-    console.log("PolygonInteractionManager performModifierSubtract");
     try {
       const draggedPolygon = this.turfHelper.getTurfPolygon(draggedGeoJSON);
       const intersectingFeatureGroups = [];
@@ -19333,7 +19397,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 +19407,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
@@ -19365,7 +19429,6 @@ class PolygonInteractionManager {
     return !(bbox1[2] < bbox2[0] || bbox2[2] < bbox1[0] || bbox1[3] < bbox2[1] || bbox2[3] < bbox1[1]);
   }
   isModifierKeyPressed(event) {
-    console.log("PolygonInteractionManager isModifierKeyPressed");
     if (isTouchDevice()) {
       return false;
     }
@@ -19378,7 +19441,6 @@ class PolygonInteractionManager {
     }
   }
   onMarkerHoverForEdgeDeletion(marker, isHovering) {
-    console.log("PolygonInteractionManager onMarkerHoverForEdgeDeletion");
     const element = marker.getElement();
     if (!element) return;
     if (isHovering) {
@@ -19431,7 +19493,6 @@ class PolygonInteractionManager {
   }
   // Helper methods
   getMarkerIndex(latlngs, position) {
-    console.log("PolygonInteractionManager getMarkerIndex");
     const bounds = PolyDrawUtil.getBounds(latlngs, Math.sqrt(2) / 2);
     const compass = new Compass(
       bounds.getSouth(),
@@ -19450,7 +19511,6 @@ class PolygonInteractionManager {
     return nearestPointIdx;
   }
   ensureMarkerSeparation(polygonLength, markers2) {
-    console.log("PolygonInteractionManager ensureMarkerSeparation");
     const enabledMarkers = [];
     if (markers2.menu.enabled) {
       enabledMarkers.push({ type: "menu", index: markers2.menu.index });
@@ -19493,7 +19553,6 @@ class PolygonInteractionManager {
     };
   }
   findAlternativeMarkerPosition(polygonLength, originalIndex, usedIndices) {
-    console.log("PolygonInteractionManager findAlternativeMarkerPosition");
     const maxAttempts = polygonLength;
     const step = Math.max(1, Math.floor(polygonLength / 8));
     for (let attempt = 1; attempt < maxAttempts; attempt++) {
@@ -19515,21 +19574,16 @@ class PolygonInteractionManager {
     return originalIndex;
   }
   createDivIcon(processedClasses) {
-    console.log("PolygonInteractionManager createDivIcon");
     return IconFactory.createDivIcon(processedClasses);
   }
   getLatLngInfoString(latlng) {
-    console.log("PolygonInteractionManager getLatLngInfoString");
     return "Latitude: " + latlng.lat + " Longitude: " + latlng.lng;
   }
   generateMenuMarkerPopup(latLngs, featureGroup) {
-    console.log("PolygonInteractionManager generateMenuMarkerPopup");
     const outerWrapper = document.createElement("div");
     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 +19607,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 +19616,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,10 +19700,16 @@ class PolygonInteractionManager {
       btn.style.pointerEvents = "auto";
       btn.addEventListener("click", (e) => e.stopPropagation());
     });
-    return outerWrapper;
+    const isMobile = window.innerWidth <= 600;
+    const popup = L.popup({
+      closeButton: true,
+      autoClose: true,
+      className: `menu-popup${isMobile ? " mobile-popup" : ""}`
+    }).setContent(outerWrapper);
+    this._openMenuPopup = popup;
+    return popup;
   }
   getPolygonGeoJSONFromFeatureGroup(featureGroup) {
-    console.log("PolygonInteractionManager getPolygonGeoJSONFromFeatureGroup");
     try {
       let polygon2 = null;
       featureGroup.eachLayer((layer) => {
@@ -19642,7 +19742,6 @@ class PolygonInteractionManager {
     }
   }
   getTotalPolygonPerimeter(polygonGeoJSON) {
-    console.log("PolygonInteractionManager getTotalPolygonPerimeter");
     try {
       if (!polygonGeoJSON || !polygonGeoJSON.geometry) {
         return 0;
@@ -19686,15 +19785,12 @@ class PolygonInteractionManager {
     }
   }
   generateInfoMarkerPopup(area2, perimeter) {
-    console.log("PolygonInteractionManager generateInfoMarkerPopup");
     const _perimeter = new Perimeter(perimeter, this.config);
     const _area = new Area(area2, this.config);
     const outerWrapper = document.createElement("div");
     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 +19805,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 +19812,13 @@ class PolygonInteractionManager {
       btn.style.pointerEvents = "auto";
       btn.addEventListener("click", (e) => e.stopPropagation());
     });
-    return outerWrapper;
+    const isMobile = window.innerWidth <= 600;
+    const popup = L.popup({
+      closeButton: true,
+      autoClose: true,
+      className: `info-popup${isMobile ? " mobile-popup" : ""}`
+    }).setContent(outerWrapper);
+    return popup;
   }
 }
 class PolygonMutationManager {
@@ -19727,8 +19828,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 +19839,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 +19857,7 @@ class PolygonMutationManager {
       map: dependencies.map,
       config: dependencies.config,
       modeManager: dependencies.modeManager,
+      eventManager: this.eventManager,
       tracer: placeholderTracer
     });
     this.interactionManager = new PolygonInteractionManager(
@@ -19763,7 +19866,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 +19881,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 +19958,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
@@ -20447,7 +20536,6 @@ class PolygonMutationManager {
 }
 class Polydraw extends L.Control {
   constructor(options) {
-    console.log("constructor");
     super(options);
     __publicField(this, "map");
     __publicField(this, "tracer", {});
@@ -20455,6 +20543,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");
@@ -20472,7 +20561,6 @@ class Polydraw extends L.Control {
      * Handle marker hover when modifier key is held - event handler version
      */
     __publicField(this, "onMarkerHoverForEdgeDeletionEvent", (e) => {
-      console.log("onMarkerHoverForEdgeDeletionEvent");
       if (!this.isModifierKeyHeld) return;
       const element = e.target;
       if (element) {
@@ -20485,7 +20573,6 @@ class Polydraw extends L.Control {
      * Handle marker leave when modifier key is held - event handler version
      */
     __publicField(this, "onMarkerLeaveForEdgeDeletionEvent", (e) => {
-      console.log("onMarkerLeaveForEdgeDeletionEvent");
       const element = e.target;
       if (element) {
         element.style.backgroundColor = "";
@@ -20528,8 +20615,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();
     });
@@ -20543,8 +20631,6 @@ class Polydraw extends L.Control {
     if (L.Browser.touch && L.Browser.mobile) {
       _map.tap = false;
     }
-    console.log("iOS touch workaround applied");
-    console.log("onAdd");
     this.map = _map;
     const style = document.createElement("style");
     style.innerHTML = `
@@ -20587,7 +20673,6 @@ class Polydraw extends L.Control {
       this.updateActivateButtonIndicator();
     };
     const onDrawClick = (e) => {
-      console.log("onDrawClick");
       if (e) {
         e.preventDefault();
         e.stopPropagation();
@@ -20600,7 +20685,6 @@ class Polydraw extends L.Control {
       this.polygonInformation.saveCurrentState();
     };
     const onSubtractClick = (e) => {
-      console.log("onSubtractClick");
       if (e) {
         e.preventDefault();
         e.stopPropagation();
@@ -20613,7 +20697,7 @@ class Polydraw extends L.Control {
       this.polygonInformation.saveCurrentState();
     };
     const onEraseClick = (e) => {
-      console.log("onEraseClick");
+      this.map.closePopup();
       if (e) {
         e.preventDefault();
         e.stopPropagation();
@@ -20624,7 +20708,6 @@ class Polydraw extends L.Control {
       this.removeAllFeatureGroups();
     };
     const onPointToPointClick = (e) => {
-      console.log("onPointToPointClick");
       if (e) {
         e.preventDefault();
         e.stopPropagation();
@@ -20663,6 +20746,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,10 +20755,10 @@ 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) => {
-      console.log("polygonOperationComplete");
       this.updateActivateButtonIndicator();
       this.modeManager.updateStateForMode(DrawMode.Off);
       this.drawMode = DrawMode.Off;
@@ -20699,7 +20783,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,14 +20795,13 @@ 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);
     });
     return container;
   }
   addTo(map) {
-    console.log("addTo");
     super.addTo(map);
     return this;
   }
@@ -20726,7 +20809,6 @@ class Polydraw extends L.Control {
     return this.arrayOfFeatureGroups;
   }
   onRemove(_map) {
-    console.log("onRemove");
     this.removeKeyboardHandlers();
     if (this.tracer) {
       this.map.removeLayer(this.tracer);
@@ -20734,7 +20816,6 @@ class Polydraw extends L.Control {
     this.removeAllFeatureGroups();
   }
   async addPredefinedPolygon(geographicBorders, options) {
-    console.log("addPredefinedPolygon");
     if (!geographicBorders || geographicBorders.length === 0) {
       throw new Error("Cannot add empty polygon array");
     }
@@ -20771,7 +20852,6 @@ class Polydraw extends L.Control {
     }
   }
   setDrawMode(mode) {
-    console.log("setDrawMode");
     const previousMode = this.drawMode;
     this.drawMode = mode;
     this.modeManager.updateStateForMode(mode);
@@ -20828,22 +20908,18 @@ class Polydraw extends L.Control {
     }
   }
   getDrawMode() {
-    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());
     }
@@ -20852,7 +20928,6 @@ class Polydraw extends L.Control {
    * Update the draggable state of all existing markers when draw mode changes
    */
   updateMarkerDraggableState() {
-    console.log("updateMarkerDraggableState");
     const shouldBeDraggable = this.modeManager.canPerformAction("markerDrag");
     this.arrayOfFeatureGroups.forEach((featureGroup) => {
       featureGroup.eachLayer((layer) => {
@@ -20874,7 +20949,6 @@ class Polydraw extends L.Control {
     });
   }
   removeAllFeatureGroups() {
-    console.log("removeAllFeatureGroups");
     this.arrayOfFeatureGroups.forEach((featureGroups) => {
       try {
         this.map.removeLayer(featureGroups);
@@ -20887,22 +20961,18 @@ class Polydraw extends L.Control {
     this.updateActivateButtonIndicator();
   }
   stopDraw() {
-    console.log("stopDraw");
     this.resetTracker();
     this.drawStartedEvents(false);
   }
   setLeafletMapEvents(enableDragging, enableDoubleClickZoom, enableScrollWheelZoom) {
-    console.log("setLeafletMapEvents");
     enableDragging ? this.map.dragging.enable() : this.map.dragging.disable();
     enableDoubleClickZoom ? this.map.doubleClickZoom.enable() : this.map.doubleClickZoom.disable();
     enableScrollWheelZoom ? this.map.scrollWheelZoom.enable() : this.map.scrollWheelZoom.disable();
   }
   resetTracker() {
-    console.log("resetTracker");
     this.tracer.setLatLngs([]);
   }
   drawStartedEvents(onoff) {
-    console.log("drawStartedEvents");
     const onoroff = onoff ? "on" : "off";
     this.map[onoroff]("mousemove", this.mouseMove, this);
     this.map[onoroff]("mouseup", this.mouseUpLeave, this);
@@ -20921,7 +20991,6 @@ class Polydraw extends L.Control {
     }
   }
   mouseMove(event) {
-    console.log("mouseMove");
     if ("cancelable" in event && event.cancelable) {
       event.preventDefault();
     }
@@ -20966,7 +21035,6 @@ class Polydraw extends L.Control {
     if ("cancelable" in event && event.cancelable) {
       event.preventDefault();
     }
-    console.log("mouseUpLeave");
     this.polygonInformation.deletePolygonInformationStorage();
     const tracerGeoJSON = this.tracer.toGeoJSON();
     if (!tracerGeoJSON || !tracerGeoJSON.geometry || !tracerGeoJSON.geometry.coordinates || tracerGeoJSON.geometry.coordinates.length < 3) {
@@ -21013,7 +21081,6 @@ class Polydraw extends L.Control {
     this.polygonInformation.createPolygonInformationStorage(this.arrayOfFeatureGroups);
   }
   events(onoff) {
-    console.log("events");
     const onoroff = onoff ? "on" : "off";
     this.map[onoroff]("mousedown", this.mouseDown, this);
     this.map[onoroff]("dblclick", this.handleDoubleClick, this);
@@ -21030,7 +21097,6 @@ class Polydraw extends L.Control {
     if ("cancelable" in event && event.cancelable) {
       event.preventDefault();
     }
-    console.log("mouseDown");
     if (this.modeManager.isInOffMode()) {
       return;
     }
@@ -21054,22 +21120,18 @@ class Polydraw extends L.Control {
     this.startDraw();
   }
   startDraw() {
-    console.log("startDraw");
     this.drawStartedEvents(true);
   }
   setupKeyboardHandlers() {
-    console.log("setupKeyboardHandlers");
     this._boundKeyUpHandler = this.handleKeyUp.bind(this);
     document.addEventListener("keydown", this._boundKeyDownHandler);
     document.addEventListener("keyup", this._boundKeyUpHandler);
   }
   removeKeyboardHandlers() {
-    console.log("removeKeyboardHandlers");
     document.removeEventListener("keydown", this._boundKeyDownHandler);
     document.removeEventListener("keyup", this._boundKeyUpHandler);
   }
   handleKeyDown(e) {
-    console.log("handleKeyDown");
     if (e.key === "Escape") {
       if (this.modeManager.getCurrentMode() === DrawMode.PointToPoint) {
         this.polygonDrawManager.cancelPointToPointDrawing();
@@ -21083,7 +21145,6 @@ class Polydraw extends L.Control {
     }
   }
   handleKeyUp(e) {
-    console.log("handleKeyUp");
     const isModifierPressed = this.isModifierKeyPressed(e);
     if (!isModifierPressed && this.isModifierKeyHeld) {
       this.isModifierKeyHeld = false;
@@ -21095,7 +21156,6 @@ class Polydraw extends L.Control {
    * Update all markers to show/hide edge deletion visual feedback
    */
   updateAllMarkersForEdgeDeletion(showFeedback) {
-    console.log("updateAllMarkersForEdgeDeletion");
     this.arrayOfFeatureGroups.forEach((featureGroup) => {
       featureGroup.eachLayer((layer) => {
         if (layer instanceof L.Marker) {
@@ -21108,7 +21168,6 @@ class Polydraw extends L.Control {
    * Update individual marker for edge deletion visual feedback
    */
   updateMarkerForEdgeDeletion(marker, showFeedback) {
-    console.log("updateMarkerForEdgeDeletion");
     const element = marker.getElement();
     if (!element) return;
     if (showFeedback) {
@@ -21122,7 +21181,6 @@ class Polydraw extends L.Control {
     }
   }
   handleDoubleClick(e) {
-    console.log("handleDoubleClick");
     if (this.modeManager.getCurrentMode() !== DrawMode.PointToPoint) {
       return;
     }
@@ -21132,10 +21190,6 @@ class Polydraw extends L.Control {
    * Detect if modifier key is pressed (Ctrl on Windows/Linux, Cmd on Mac)
    */
   isModifierKeyPressed(event) {
-    console.log("isModifierKeyPressed");
-    if (isTouchDevice()) {
-      return false;
-    }
     const userAgent = navigator.userAgent.toLowerCase();
     const isMac = userAgent.includes("mac");
     if (isMac) {