leaflet-polydraw 0.9.0 → 0.9.2

package/dist/polydraw.es.js

@@ -7,18 +7,19 @@ const touchSupport = true;
 const mergePolygons = true;
 const kinks$1 = false;
 const modes = { "draw": true, "subtract": true, "deleteAll": true, "p2p": true, "attachElbow": true, "dragElbow": true, "dragPolygons": true, "edgeDeletion": true };
-const dragPolygons = { "realTimeUpdate": false, "showDragHandle": false, "opacity": 0.7, "dragCursor": "move", "hoverCursor": "grab", "markerBehavior": "hide", "markerAnimationDuration": 200, "autoMergeOnIntersect": true, "autoHoleOnContained": false, "dragInteractionBehavior": "auto", "modifierSubtract": { "enabled": true, "keys": { "windows": "ctrlKey", "mac": "metaKey", "linux": "ctrlKey" }, "subtractColor": "#D9460F", "hideMarkersOnDrag": true } };
-const edgeDeletion = { "enabled": true, "modifierKey": "auto", "hoverColor": "#D9460F", "confirmDeletion": false, "minVertices": 3 };
-const markers = { "deleteMarker": true, "infoMarker": true, "menuMarker": true, "coordsTitle": true, "zIndexOffset": 0, "markerIcon": { "styleClasses": ["polygon-marker"], "zIndexOffset": null }, "holeIcon": { "styleClasses": ["polygon-marker", "hole"], "zIndexOffset": null }, "markerInfoIcon": { "position": 3, "showArea": true, "showPerimeter": true, "useMetrics": true, "usePerimeterMinValue": false, "areaLabel": "Area", "perimeterLabel": "Perimeter", "values": { "min": { "metric": "50", "imperial": "100" }, "unknown": { "metric": "-", "imperial": "-" } }, "units": { "unknownUnit": "", "metric": { "onlyMetrics": true, "perimeter": { "m": "m", "km": "km" }, "area": { "m2": "m²", "km2": "km²", "daa": "daa", "ha": "ha" } }, "imperial": { "perimeter": { "feet": "ft", "yards": "yd", "miles": "mi" }, "area": { "feet2": "ft²", "yards2": "yd²", "acres": "ac", "miles2": "mi²" } } }, "styleClasses": ["polygon-marker", "info"], "zIndexOffset": 1e4 }, "markerMenuIcon": { "position": 7, "styleClasses": ["polygon-marker", "menu"], "zIndexOffset": 1e4 }, "markerDeleteIcon": { "position": 5, "styleClasses": ["polygon-marker", "delete"], "zIndexOffset": 1e4 }, "visualOptimization": { "sharpAngleThreshold": 30, "thresholdBoundingBox": 0.05, "thresholdDistance": 0.05, "useDistance": true, "useBoundingBox": false, "useAngles": false } };
-const polyLineOptions = { "color": "#50622b", "opacity": 1, "smoothFactor": 0, "noClip": true, "clickable": false, "weight": 2 };
-const subtractLineOptions = { "color": "#50622b", "opacity": 1, "smoothFactor": 0, "noClip": true, "clickable": false, "weight": 2 };
-const polygonOptions = { "smoothFactor": 0.3, "color": "#50622b", "fillColor": "#b4cd8a", "noClip": true };
-const holeOptions = { "color": "#aa0000", "fillColor": "#ffcccc", "weight": 2, "opacity": 1, "fillOpacity": 0.5 };
+const dragPolygons = { "realTimeUpdate": false, "showDragHandle": false, "opacity": 0.7, "dragCursor": "move", "hoverCursor": "grab", "markerBehavior": "hide", "markerAnimationDuration": 200, "autoMergeOnIntersect": true, "autoHoleOnContained": false, "dragInteractionBehavior": "auto", "modifierSubtract": { "enabled": true, "keys": { "windows": "ctrlKey", "mac": "metaKey", "linux": "ctrlKey" }, "hideMarkersOnDrag": true } };
+const edgeDeletion = { "enabled": true, "keys": { "windows": "ctrlKey", "mac": "metaKey", "linux": "ctrlKey" }, "confirmDeletion": false, "minVertices": 3 };
+const markers = { "deleteMarker": true, "infoMarker": true, "menuMarker": true, "coordsTitle": true, "zIndexOffset": 0, "markerIcon": { "styleClasses": ["polygon-marker"], "zIndexOffset": null }, "holeIcon": { "styleClasses": ["polygon-marker", "hole"], "zIndexOffset": null }, "markerInfoIcon": { "position": 3, "showArea": true, "showPerimeter": true, "useMetrics": true, "usePerimeterMinValue": false, "areaLabel": "Area", "perimeterLabel": "Perimeter", "values": { "min": { "metric": "50", "imperial": "100" }, "unknown": { "metric": "-", "imperial": "-" } }, "units": { "unknownUnit": "", "metric": { "onlyMetrics": true, "perimeter": { "m": "m", "km": "km" }, "area": { "m2": "m²", "km2": "km²", "daa": "daa", "ha": "ha" } }, "imperial": { "perimeter": { "feet": "ft", "yards": "yd", "miles": "mi" }, "area": { "feet2": "ft²", "yards2": "yd²", "acres": "ac", "miles2": "mi²" } } }, "styleClasses": ["polygon-marker", "info"], "zIndexOffset": 1e4 }, "markerMenuIcon": { "position": 7, "styleClasses": ["polygon-marker", "menu"], "zIndexOffset": 1e4 }, "markerDeleteIcon": { "position": 5, "styleClasses": ["polygon-marker", "delete"], "zIndexOffset": 1e4 }, "holeMarkers": { "menuMarker": false, "deleteMarker": true, "infoMarker": false }, "visualOptimization": { "sharpAngleThreshold": 30, "thresholdBoundingBox": 0.05, "thresholdDistance": 0.05, "useDistance": true, "useBoundingBox": false, "useAngles": false } };
+const polyLineOptions = { "opacity": 1, "smoothFactor": 0, "noClip": true, "clickable": false, "weight": 2 };
+const subtractLineOptions = { "opacity": 1, "smoothFactor": 0, "noClip": true, "clickable": false, "weight": 2 };
+const polygonOptions = { "smoothFactor": 0.3, "noClip": true };
+const holeOptions = { "weight": 2, "opacity": 1, "fillOpacity": 0.5 };
 const polygonCreation = { "method": "concaveman", "simplification": { "mode": "simple", "tolerance": 1e-5, "highQuality": false } };
 const simplification = { "simplifyTolerance": { "tolerance": 1e-4, "highQuality": false, "mutate": false }, "dynamicMode": { "fractionGuard": 0.9, "multipiler": 2 } };
 const menuOperations = { "simplify": { "processHoles": true }, "doubleElbows": { "processHoles": true }, "bbox": { "processHoles": true } };
 const boundingBox = { "addMidPointMarkers": true };
 const bezier$1 = { "resolution": 1e4, "sharpness": 0.75 };
+const colors = { "dragPolygons": { "subtract": "#D9460F" }, "p2p": { "closingMarker": "#4CAF50" }, "edgeHover": "#7a9441", "edgeDeletion": { "hover": "#D9460F" }, "polyline": "#50622b", "subtractLine": "#50622b", "polygon": { "border": "#50622b", "fill": "#b4cd8a" }, "hole": { "border": "#aa0000", "fill": "#ffcccc" }, "styles": { "controlButton": { "backgroundColor": "#fff", "color": "#000" }, "controlButtonHover": { "backgroundColor": "#f4f4f4" }, "controlButtonActive": { "backgroundColor": "rgb(128, 218, 255)", "color": "#fff" }, "indicatorActive": { "backgroundColor": "#ffcc00" }, "p2pMarker": { "backgroundColor": "#fff", "borderColor": "#50622b" } } };
 const defaultConfig = {
   touchSupport,
   mergePolygons,
@@ -35,7 +36,8 @@ const defaultConfig = {
   simplification,
   menuOperations,
   boundingBox,
-  bezier: bezier$1
+  bezier: bezier$1,
+  colors
 };
 var DrawMode = /* @__PURE__ */ ((DrawMode2) => {
   DrawMode2[DrawMode2["Off"] = 0] = "Off";
@@ -190,7 +192,7 @@ function degreesToRadians(degrees2) {
 function isNumber(num) {
   return !isNaN(num) && num !== null && !Array.isArray(num);
 }
-function isObject(input) {
+function isObject$1(input) {
   return input !== null && typeof input === "object" && !Array.isArray(input);
 }
 function getCoord(coord) {
@@ -1498,6 +1500,161 @@ function coordsToLine(coords, properties) {
   }
   return lineString(coords[0], properties);
 }
+var __defProp$1 = Object.defineProperty;
+var __name = (target, value) => __defProp$1(target, "name", { value, configurable: true });
+var _GeojsonEquality = class _GeojsonEquality2 {
+  constructor(opts) {
+    this.direction = false;
+    this.compareProperties = true;
+    var _a2, _b2, _c;
+    this.precision = 10 ** -((_a2 = opts == null ? void 0 : opts.precision) != null ? _a2 : 17);
+    this.direction = (_b2 = opts == null ? void 0 : opts.direction) != null ? _b2 : false;
+    this.compareProperties = (_c = opts == null ? void 0 : opts.compareProperties) != null ? _c : true;
+  }
+  compare(g1, g2) {
+    if (g1.type !== g2.type) {
+      return false;
+    }
+    if (!sameLength(g1, g2)) {
+      return false;
+    }
+    switch (g1.type) {
+      case "Point":
+        return this.compareCoord(g1.coordinates, g2.coordinates);
+      case "LineString":
+        return this.compareLine(g1.coordinates, g2.coordinates);
+      case "Polygon":
+        return this.comparePolygon(g1, g2);
+      case "GeometryCollection":
+        return this.compareGeometryCollection(g1, g2);
+      case "Feature":
+        return this.compareFeature(g1, g2);
+      case "FeatureCollection":
+        return this.compareFeatureCollection(g1, g2);
+      default:
+        if (g1.type.startsWith("Multi")) {
+          const g1s = explode$1(g1);
+          const g2s = explode$1(
+            g2
+          );
+          return g1s.every(
+            (g1part) => g2s.some((g2part) => this.compare(g1part, g2part))
+          );
+        }
+    }
+    return false;
+  }
+  compareCoord(c1, c2) {
+    return c1.length === c2.length && c1.every((c, i) => Math.abs(c - c2[i]) < this.precision);
+  }
+  compareLine(path1, path2, ind = 0, isPoly = false) {
+    if (!sameLength(path1, path2)) {
+      return false;
+    }
+    const p1 = path1;
+    let p2 = path2;
+    if (isPoly && !this.compareCoord(p1[0], p2[0])) {
+      const startIndex = this.fixStartIndex(p2, p1);
+      if (!startIndex) {
+        return false;
+      } else {
+        p2 = startIndex;
+      }
+    }
+    const sameDirection = this.compareCoord(p1[ind], p2[ind]);
+    if (this.direction || sameDirection) {
+      return this.comparePath(p1, p2);
+    } else {
+      if (this.compareCoord(p1[ind], p2[p2.length - (1 + ind)])) {
+        return this.comparePath(p1.slice().reverse(), p2);
+      }
+      return false;
+    }
+  }
+  fixStartIndex(sourcePath, targetPath) {
+    let correctPath, ind = -1;
+    for (let i = 0; i < sourcePath.length; i++) {
+      if (this.compareCoord(sourcePath[i], targetPath[0])) {
+        ind = i;
+        break;
+      }
+    }
+    if (ind >= 0) {
+      correctPath = [].concat(
+        sourcePath.slice(ind, sourcePath.length),
+        sourcePath.slice(1, ind + 1)
+      );
+    }
+    return correctPath;
+  }
+  comparePath(p1, p2) {
+    return p1.every((c, i) => this.compareCoord(c, p2[i]));
+  }
+  comparePolygon(g1, g2) {
+    if (this.compareLine(g1.coordinates[0], g2.coordinates[0], 1, true)) {
+      const holes1 = g1.coordinates.slice(1, g1.coordinates.length);
+      const holes2 = g2.coordinates.slice(1, g2.coordinates.length);
+      return holes1.every(
+        (h1) => holes2.some((h2) => this.compareLine(h1, h2, 1, true))
+      );
+    }
+    return false;
+  }
+  compareGeometryCollection(g1, g2) {
+    return sameLength(g1.geometries, g2.geometries) && this.compareBBox(g1, g2) && g1.geometries.every((g, i) => this.compare(g, g2.geometries[i]));
+  }
+  compareFeature(g1, g2) {
+    return g1.id === g2.id && (this.compareProperties ? equal(g1.properties, g2.properties) : true) && this.compareBBox(g1, g2) && this.compare(g1.geometry, g2.geometry);
+  }
+  compareFeatureCollection(g1, g2) {
+    return sameLength(g1.features, g2.features) && this.compareBBox(g1, g2) && g1.features.every((f, i) => this.compare(f, g2.features[i]));
+  }
+  compareBBox(g1, g2) {
+    return Boolean(!g1.bbox && !g2.bbox) || (g1.bbox && g2.bbox ? this.compareCoord(g1.bbox, g2.bbox) : false);
+  }
+};
+__name(_GeojsonEquality, "GeojsonEquality");
+var GeojsonEquality = _GeojsonEquality;
+function sameLength(g1, g2) {
+  return g1.coordinates ? g1.coordinates.length === g2.coordinates.length : g1.length === g2.length;
+}
+__name(sameLength, "sameLength");
+function explode$1(g) {
+  return g.coordinates.map((part) => ({
+    type: g.type.replace("Multi", ""),
+    coordinates: part
+  }));
+}
+__name(explode$1, "explode");
+function geojsonEquality(g1, g2, opts) {
+  const eq = new GeojsonEquality(opts);
+  return eq.compare(g1, g2);
+}
+__name(geojsonEquality, "geojsonEquality");
+function equal(object1, object2) {
+  if (object1 === null && object2 === null) {
+    return true;
+  }
+  if (object1 === null || object2 === null) {
+    return false;
+  }
+  const objKeys1 = Object.keys(object1);
+  const objKeys2 = Object.keys(object2);
+  if (objKeys1.length !== objKeys2.length) return false;
+  for (var key of objKeys1) {
+    const value1 = object1[key];
+    const value2 = object2[key];
+    const isObjects = isObject(value1) && isObject(value2);
+    if (isObjects && !equal(value1, value2) || !isObjects && value1 !== value2) {
+      return false;
+    }
+  }
+  return true;
+}
+__name(equal, "equal");
+var isObject = /* @__PURE__ */ __name((object) => {
+  return object != null && typeof object === "object";
+}, "isObject");
 function cleanCoords(geojson, options = {}) {
   var mutate = typeof options === "object" ? options.mutate : options;
   if (!geojson) throw new Error("geojson is required");
@@ -1611,6 +1768,19 @@ function isPointOnLineSegment(start, end, point2) {
     return dxl > 0 ? startX <= x && x <= endX : endX <= x && x <= startX;
   else return dyl > 0 ? startY <= y && y <= endY : endY <= y && y <= startY;
 }
+function booleanEqual(feature1, feature2, options = {}) {
+  let precision2 = options.precision;
+  precision2 = precision2 === void 0 || precision2 === null || isNaN(precision2) ? 6 : precision2;
+  if (typeof precision2 !== "number" || !(precision2 >= 0)) {
+    throw new Error("precision must be a positive number");
+  }
+  const type1 = getGeom(feature1).type;
+  const type2 = getGeom(feature2).type;
+  if (type1 !== type2) return false;
+  return geojsonEquality(cleanCoords(feature1), cleanCoords(feature2), {
+    precision: precision2
+  });
+}
 function quickselect(arr, k, left, right, compare2) {
   quickselectStep(arr, k, left || 0, right || arr.length - 1, compare2 || defaultCompare$1);
 }
@@ -15011,7 +15181,7 @@ function simplify(points, tolerance, highestQuality) {
 function simplify2(geojson, options = {}) {
   var _a2, _b2, _c;
   options = options != null ? options : {};
-  if (!isObject(options)) throw new Error("options is invalid");
+  if (!isObject$1(options)) throw new Error("options is invalid");
   const tolerance = (_a2 = options.tolerance) != null ? _a2 : 1;
   const highQuality = (_b2 = options.highQuality) != null ? _b2 : false;
   const mutate = (_c = options.mutate) != null ? _c : false;
@@ -15878,22 +16048,16 @@ class TurfHelper {
       } catch (error) {
       }
       try {
-        const coords1 = getCoords(polygon2);
-        const coords2 = getCoords(latlngs);
-        for (const ring2 of coords2) {
-          for (const coord of ring2[0]) {
-            const point$1 = point(coord);
-            if (booleanPointInPolygon(point$1, polygon2)) {
-              return true;
-            }
+        const points1 = explode(polygon2);
+        const points2 = explode(latlngs);
+        for (const point2 of points2.features) {
+          if (booleanPointInPolygon(point2, polygon2)) {
+            return true;
           }
         }
-        for (const ring1 of coords1) {
-          for (const coord of ring1[0]) {
-            const point$1 = point(coord);
-            if (booleanPointInPolygon(point$1, latlngs)) {
-              return true;
-            }
+        for (const point2 of points1.features) {
+          if (booleanPointInPolygon(point2, latlngs)) {
+            return true;
           }
         }
       } catch (error) {
@@ -15984,12 +16148,47 @@ class TurfHelper {
       return true;
     }
   }
+  /**
+   * Normalize various point-like inputs into a GeoJSON Feature<Point>.
+   * Supports GeoJSON Feature<Point>, Turf Position [lng, lat], and Leaflet LatLngLiteral.
+   */
+  toPointFeature(point$1) {
+    var _a2, _b2;
+    if ((point$1 == null ? void 0 : point$1.type) === "Feature" && ((_a2 = point$1.geometry) == null ? void 0 : _a2.type) === "Point") {
+      return point$1;
+    }
+    if (Array.isArray(point$1) && point$1.length >= 2 && typeof point$1[0] === "number" && typeof point$1[1] === "number") {
+      return point(point$1);
+    }
+    if (typeof (point$1 == null ? void 0 : point$1.lat) === "number" && typeof (point$1 == null ? void 0 : point$1.lng) === "number") {
+      const p = point$1;
+      return point([p.lng, p.lat]);
+    }
+    if (((_b2 = point$1 == null ? void 0 : point$1.geometry) == null ? void 0 : _b2.coordinates) && Array.isArray(point$1.geometry.coordinates)) {
+      return point(point$1.geometry.coordinates);
+    }
+    throw new Error("Unsupported point format provided to toPointFeature");
+  }
+  /**
+   * Check if a point lies within a polygon.
+   * Accepts Feature<Point>, Turf Position [lng, lat], or Leaflet LatLngLiteral.
+   * This normalization prevents noisy console warnings in tests.
+   */
+  isPointInsidePolygon(point2, polygon2) {
+    try {
+      const pointFeature = this.toPointFeature(point2);
+      return booleanPointInPolygon(pointFeature, polygon2);
+    } catch (error) {
+      return false;
+    }
+  }
   /**
    * Checks if two polygons are equal.
    * @param polygon1 First polygon.
    * @param polygon2 Second polygon.
    */
   equalPolygons(polygon1, polygon2) {
+    return booleanEqual(polygon1, polygon2);
   }
   convertToBoundingBoxPolygon(polygon2) {
     const bbox$1 = bbox(polygon2.geometry);
@@ -16000,37 +16199,31 @@ class TurfHelper {
     const multi = multiPolygon([poly.geometry.coordinates]);
     return multi;
   }
-  injectPointToPolygon(polygon2, point2) {
+  injectPointToPolygon(polygon2, point2, ringIndex) {
     const newPoly = JSON.parse(JSON.stringify(polygon2));
+    let targetRing;
     if (newPoly.geometry.type === "MultiPolygon") {
-      const coordinates = newPoly.geometry.coordinates[0][0];
-      let minDistance = Infinity;
-      let insertIndex = 0;
-      for (let i = 0; i < coordinates.length - 1; i++) {
-        const edgeStart = coordinates[i];
-        const edgeEnd = coordinates[i + 1];
-        const distance2 = this.distanceToLineSegment(point2, edgeStart, edgeEnd);
-        if (distance2 < minDistance) {
-          minDistance = distance2;
-          insertIndex = i + 1;
-        }
-      }
-      coordinates.splice(insertIndex, 0, point2);
+      targetRing = newPoly.geometry.coordinates[0][ringIndex];
     } else if (newPoly.geometry.type === "Polygon") {
-      const coordinates = newPoly.geometry.coordinates[0];
-      let minDistance = Infinity;
-      let insertIndex = 0;
-      for (let i = 0; i < coordinates.length - 1; i++) {
-        const edgeStart = coordinates[i];
-        const edgeEnd = coordinates[i + 1];
-        const distance2 = this.distanceToLineSegment(point2, edgeStart, edgeEnd);
-        if (distance2 < minDistance) {
-          minDistance = distance2;
-          insertIndex = i + 1;
-        }
+      targetRing = newPoly.geometry.coordinates[ringIndex];
+    } else {
+      return newPoly;
+    }
+    if (!targetRing) {
+      return newPoly;
+    }
+    let minDistance = Infinity;
+    let insertIndex = 0;
+    for (let i = 0; i < targetRing.length - 1; i++) {
+      const edgeStart = targetRing[i];
+      const edgeEnd = targetRing[i + 1];
+      const distance2 = this.distanceToLineSegment(point2, edgeStart, edgeEnd);
+      if (distance2 < minDistance) {
+        minDistance = distance2;
+        insertIndex = i + 1;
       }
-      coordinates.splice(insertIndex, 0, point2);
     }
+    targetRing.splice(insertIndex, 0, point2);
     return newPoly;
   }
   distanceToLineSegment(point2, lineStart, lineEnd) {
@@ -17285,11 +17478,10 @@ class EventManager {
    * @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);
+    this.eventListeners.get(event).push(callback);
   }
   /**
    * Unregister an event listener.
@@ -17297,13 +17489,11 @@ class EventManager {
    * @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);
-        }
+    const listeners = this.eventListeners.get(event);
+    if (listeners) {
+      const index = listeners.indexOf(callback);
+      if (index > -1) {
+        listeners.splice(index, 1);
       }
     }
   }
@@ -17315,7 +17505,9 @@ class EventManager {
   emit(event, data) {
     var _a2;
     if (this.eventListeners.has(event)) {
-      (_a2 = this.eventListeners.get(event)) == null ? void 0 : _a2.forEach((callback) => callback(data));
+      (_a2 = this.eventListeners.get(event)) == null ? void 0 : _a2.forEach((callback) => {
+        callback(data);
+      });
     }
   }
 }
@@ -17514,7 +17706,7 @@ class PolygonDrawManager {
     // Point-to-Point drawing state
     __publicField(this, "p2pMarkers", []);
     __publicField(this, "isModifierKeyHeld", false);
-    console.log("PolygonDrawManager constructor");
+    __publicField(this, "markerModifierHandlers", /* @__PURE__ */ new WeakMap());
     this.turfHelper = dependencies.turfHelper;
     this.map = dependencies.map;
     this.config = dependencies.config;
@@ -17526,7 +17718,6 @@ class PolygonDrawManager {
    * 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) {
@@ -17541,12 +17732,11 @@ 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 {
         success: false,
-        error: "Not enough points to form a valid polygon"
+        error: "Not enough points to form a valid polygon. Event: " + JSON.stringify(event)
       };
     }
     let geoPos;
@@ -17555,13 +17745,13 @@ class PolygonDrawManager {
     } catch (error) {
       return {
         success: false,
-        error: error instanceof Error ? error.message : "Failed to create polygon from trace"
+        error: (error instanceof Error ? error.message : "Failed to create polygon from trace") + ". Event: " + JSON.stringify(event)
       };
     }
     if (!geoPos || !geoPos.geometry || !geoPos.geometry.coordinates || geoPos.geometry.coordinates.length === 0) {
       return {
         success: false,
-        error: "Invalid polygon created from trace"
+        error: "Invalid polygon created from trace. Event: " + JSON.stringify(event)
       };
     }
     this.eventManager.emit("polydraw:polygon:created", {
@@ -17587,7 +17777,6 @@ class PolygonDrawManager {
    * Handle point-to-point click
    */
   handlePointToPointClick(clickLatLng) {
-    console.log("handlePointToPointClick");
     if (!clickLatLng) {
       return;
     }
@@ -17616,7 +17805,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);
@@ -17629,8 +17817,8 @@ class PolygonDrawManager {
           if (this.p2pMarkers.length >= 3) {
             const element = pointMarker.getElement();
             if (element) {
-              element.style.backgroundColor = "#4CAF50";
-              element.style.borderColor = "#4CAF50";
+              element.style.backgroundColor = this.config.colors.p2p.closingMarker;
+              element.style.borderColor = this.config.colors.p2p.closingMarker;
               element.style.cursor = "pointer";
               element.title = "Click to close polygon";
             }
@@ -17646,7 +17834,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);
@@ -17667,7 +17854,6 @@ class PolygonDrawManager {
    * Handle double-click to complete point-to-point polygon
    */
   handleDoubleClick(e) {
-    console.log("handleDoubleClick");
     if (this.modeManager.getCurrentMode() !== DrawMode.PointToPoint) {
       return;
     }
@@ -17679,7 +17865,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;
@@ -17710,7 +17895,6 @@ class PolygonDrawManager {
    * Cancel point-to-point drawing
    */
   cancelPointToPointDrawing() {
-    console.log("PolygonDrawManager cancelPointToPointDrawing");
     this.clearP2pMarkers();
     this.resetTracer();
     this.eventManager.emit("polydraw:draw:cancel", {
@@ -17721,7 +17905,6 @@ class PolygonDrawManager {
    * Clear all P2P markers
    */
   clearP2pMarkers() {
-    console.log("PolygonDrawManager clearP2pMarkers");
     this.p2pMarkers.forEach((marker) => this.map.removeLayer(marker));
     this.p2pMarkers = [];
   }
@@ -17729,7 +17912,6 @@ class PolygonDrawManager {
    * Reset the tracer
    */
   resetTracer() {
-    console.log("PolygonDrawManager resetTracer");
     this.tracer.setLatLngs([]);
     try {
       this.tracer.setStyle({
@@ -17742,7 +17924,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;
@@ -17761,7 +17942,7 @@ class PolygonDrawManager {
     if (this.p2pMarkers.length >= 2) {
       try {
         this.tracer.setStyle({
-          color: this.config.polyLineOptions.color,
+          color: this.config.colors.polyline,
           dashArray: "5, 5"
         });
       } catch (error) {
@@ -17793,21 +17974,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;
   }
@@ -17834,8 +18012,8 @@ class PolygonDrawManager {
       if (this.p2pMarkers.length >= 3) {
         const element2 = firstMarker.getElement();
         if (element2) {
-          element2.style.backgroundColor = "#4CAF50";
-          element2.style.borderColor = "#4CAF50";
+          element2.style.backgroundColor = this.config.colors.p2p.closingMarker;
+          element2.style.borderColor = this.config.colors.p2p.closingMarker;
           element2.style.cursor = "pointer";
           element2.title = "Click to close polygon";
         }
@@ -17886,7 +18064,7 @@ class PolygonDrawManager {
           }
         }
       };
-      marker._polydrawModifierHandler = checkModifierAndUpdate;
+      this.markerModifierHandlers.set(marker, checkModifierAndUpdate);
       document.addEventListener("keydown", checkModifierAndUpdate);
       document.addEventListener("keyup", checkModifierAndUpdate);
       element.addEventListener("mousemove", checkModifierAndUpdate);
@@ -17897,12 +18075,12 @@ class PolygonDrawManager {
         container.style.cursor = "";
       } catch (error) {
       }
-      const handler = marker._polydrawModifierHandler;
+      const handler = this.markerModifierHandlers.get(marker);
       if (handler) {
         document.removeEventListener("keydown", handler);
         document.removeEventListener("keyup", handler);
         element.removeEventListener("mousemove", handler);
-        delete marker._polydrawModifierHandler;
+        this.markerModifierHandlers.delete(marker);
       }
     }
   }
@@ -17953,7 +18131,7 @@ class PolygonGeometryManager {
             geometry: { type: "Point", coordinates: coord },
             properties: {}
           };
-          if (this.turfHelper.isPolygonCompletelyWithin(point2, polygon1)) {
+          if (this.turfHelper.isPointInsidePolygon(point2, polygon1)) {
             return true;
           }
         }
@@ -17965,7 +18143,7 @@ class PolygonGeometryManager {
             geometry: { type: "Point", coordinates: coord },
             properties: {}
           };
-          if (this.turfHelper.isPolygonCompletelyWithin(point2, polygon2)) {
+          if (this.turfHelper.isPointInsidePolygon(point2, polygon2)) {
             return true;
           }
         }
@@ -17981,19 +18159,8 @@ class PolygonGeometryManager {
     try {
       let result = newPolygon;
       for (const polygon2 of polygons) {
-        const shouldCreateDonut = this.shouldCreateDonutPolygon(result, polygon2);
-        if (shouldCreateDonut) {
-          const donutPolygon = this.createDonutPolygon(result, polygon2);
-          if (donutPolygon) {
-            result = donutPolygon;
-          } else {
-            const union3 = this.turfHelper.union(result, polygon2);
-            result = union3;
-          }
-        } else {
-          const union3 = this.turfHelper.union(result, polygon2);
-          result = union3;
-        }
+        const union3 = this.turfHelper.union(result, polygon2);
+        result = union3;
       }
       return {
         success: true,
@@ -18304,93 +18471,6 @@ class PolygonGeometryManager {
       return null;
     }
   }
-  /**
-   * Determine if two polygons should create a donut instead of a regular union
-   */
-  shouldCreateDonutPolygon(polygon1, polygon2) {
-    try {
-      return false;
-    } catch (error) {
-      console.warn("Error in shouldCreateDonutPolygon:", error.message);
-      return false;
-    }
-  }
-  /**
-   * Create a donut polygon from two intersecting polygons
-   */
-  createDonutPolygon(polygon1, polygon2) {
-    try {
-      const area1 = this.turfHelper.getPolygonArea(polygon1);
-      const area2 = this.turfHelper.getPolygonArea(polygon2);
-      let outerPolygon;
-      let innerPolygon;
-      if (area1 > area2) {
-        outerPolygon = polygon1;
-        innerPolygon = polygon2;
-      } else {
-        outerPolygon = polygon2;
-        innerPolygon = polygon1;
-      }
-      const innerWithinOuter = this.turfHelper.isPolygonCompletelyWithin(
-        innerPolygon,
-        outerPolygon
-      );
-      if (innerWithinOuter) {
-        return this.createDonutFromContainment(outerPolygon, innerPolygon);
-      } else {
-        return this.createDonutFromIntersection(outerPolygon, innerPolygon);
-      }
-    } catch (error) {
-      console.warn("Error in createDonutPolygon:", error.message);
-      return null;
-    }
-  }
-  /**
-   * Create donut when one polygon is completely within another
-   */
-  createDonutFromContainment(outerPolygon, innerPolygon) {
-    try {
-      const outerCoords = this.turfHelper.getCoords(outerPolygon);
-      const innerCoords = this.turfHelper.getCoords(innerPolygon);
-      const donutCoords = [
-        outerCoords[0][0],
-        // Outer ring
-        innerCoords[0][0]
-        // Inner ring as hole
-      ];
-      return {
-        type: "Feature",
-        geometry: {
-          type: "Polygon",
-          coordinates: donutCoords
-        },
-        properties: {}
-      };
-    } catch (error) {
-      console.warn("Error in createDonutFromContainment:", error.message);
-      return null;
-    }
-  }
-  /**
-   * Create donut from intersecting polygons (C-to-O scenario)
-   */
-  createDonutFromIntersection(polygon1, polygon2) {
-    try {
-      const union3 = this.turfHelper.union(polygon1, polygon2);
-      if (!union3) {
-        return null;
-      }
-      const intersection3 = this.turfHelper.getIntersection(polygon1, polygon2);
-      if (!intersection3) {
-        return union3;
-      }
-      const donut = this.turfHelper.polygonDifference(union3, intersection3);
-      return donut;
-    } catch (error) {
-      console.warn("Error in createDonutFromIntersection:", error.message);
-      return null;
-    }
-  }
 }
 class IconFactory {
   /**
@@ -18405,6 +18485,8 @@ class IconFactory {
 }
 class PolygonInteractionManager {
   constructor(dependencies, featureGroupAccess) {
+    __publicField(this, "markerFeatureGroupMap", /* @__PURE__ */ new WeakMap());
+    __publicField(this, "markerModifierHandlers", /* @__PURE__ */ new WeakMap());
     __publicField(this, "_activeMarker", null);
     __publicField(this, "isDraggingMarker", false);
     __publicField(this, "turfHelper");
@@ -18424,12 +18506,11 @@ class PolygonInteractionManager {
     __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;
       const eventToCheck = e.originalEvent && "metaKey" in e.originalEvent ? e.originalEvent : e;
-      const currentModifierState = this.detectModifierKey(eventToCheck);
+      const currentModifierState = this.detectDragSubtractModifierKey(eventToCheck);
       if (currentModifierState !== this.currentModifierDragMode) {
         this.handleModifierToggleDuringDrag(eventToCheck);
       }
@@ -18442,7 +18523,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;
@@ -18472,17 +18552,15 @@ class PolygonInteractionManager {
       this.currentDragPolygon = null;
     });
     __publicField(this, "onMarkerHoverForEdgeDeletionEvent", (e) => {
-      console.log("PolygonInteractionManager onMarkerHoverForEdgeDeletionEvent");
       if (!this.isModifierKeyHeld) return;
       const element = e.target;
       if (element) {
-        element.style.backgroundColor = "#D9460F";
-        element.style.borderColor = "#D9460F";
+        element.style.backgroundColor = this.config.colors.edgeDeletion.hover;
+        element.style.borderColor = this.config.colors.edgeDeletion.hover;
         element.classList.add("edge-deletion-hover");
       }
     });
     __publicField(this, "onMarkerLeaveForEdgeDeletionEvent", (e) => {
-      console.log("PolygonInteractionManager onMarkerLeaveForEdgeDeletionEvent");
       const element = e.target;
       if (element) {
         element.style.backgroundColor = "";
@@ -18490,7 +18568,6 @@ class PolygonInteractionManager {
         element.classList.remove("edge-deletion-hover");
       }
     });
-    console.log("PolygonInteractionManager constructor");
     this.turfHelper = dependencies.turfHelper;
     this.polygonInformation = dependencies.polygonInformation;
     this.map = dependencies.map;
@@ -18505,7 +18582,6 @@ class PolygonInteractionManager {
    * 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,
@@ -18540,7 +18616,7 @@ class PolygonInteractionManager {
         zIndexOffset: this.config.markers.markerIcon.zIndexOffset ?? this.config.markers.zIndexOffset
       });
       featureGroup.addLayer(marker).addTo(this.map);
-      marker._polydrawFeatureGroup = featureGroup;
+      this.markerFeatureGroupMap.set(marker, featureGroup);
       marker.on("add", () => {
         const el2 = marker.getElement();
         if (el2) el2.style.pointerEvents = "auto";
@@ -18557,7 +18633,7 @@ class PolygonInteractionManager {
         this._activeMarker = marker;
       });
       marker.on("dragend", (e) => {
-        const fg = marker._polydrawFeatureGroup;
+        const fg = this.markerFeatureGroupMap.get(marker);
         if (this.modeManager.canPerformAction("markerDrag") && fg) {
           this.markerDragEnd(fg);
         }
@@ -18569,17 +18645,19 @@ 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 && !isSpecialMarker) {
-            const fg = marker._polydrawFeatureGroup;
+            const fg = this.markerFeatureGroupMap.get(marker);
             if (this.modeManager.canPerformAction("markerDrag") && fg) {
               this.markerDragEnd(fg);
             }
@@ -18604,7 +18682,6 @@ 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");
           const polygonGeoJSON = this.getPolygonGeoJSONFromFeatureGroup(featureGroup);
           const centerOfMass2 = PolygonUtil.getCenterOfMass(polygonGeoJSON);
           const menuPopup = this.generateMenuMarkerPopup(latlngs, featureGroup);
@@ -18624,14 +18701,12 @@ class PolygonInteractionManager {
               popupContent.style.transform = `translateX(${mapBounds.right - popupBounds.right}px)`;
             }
           }, 0);
-          console.log("popupopen, setting touchAction to manipulation");
           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 = "";
@@ -18644,7 +18719,6 @@ 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");
           const infoPopup = this.generateInfoMarkerPopup(area2, perimeter);
           const centerOfMass2 = PolygonUtil.getCenterOfMass(polygonGeoJSON);
           infoPopup.setLatLng(centerOfMass2).openOn(this.map);
@@ -18663,14 +18737,12 @@ class PolygonInteractionManager {
               popupContent.style.transform = `translateX(${mapBounds.right - popupBounds.right}px)`;
             }
           }, 0);
-          console.log("popupopen, setting touchAction to manipulation");
           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 = "";
@@ -18685,13 +18757,11 @@ class PolygonInteractionManager {
         this._activeMarker = marker;
       });
       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();
-            if (poly) {
-              this.elbowClicked(e, poly);
+          if (this.isEdgeDeletionModifierKeyPressed(e.originalEvent)) {
+            const polygonLayer = featureGroup.getLayers().find((layer) => layer instanceof L.Polygon);
+            if (polygonLayer) {
+              this.elbowClicked(e, polygonLayer, marker.getLatLng());
             }
           } else {
             if (i === deleteMarkerIdx && this.config.markers.deleteMarker) {
@@ -18712,91 +18782,292 @@ class PolygonInteractionManager {
     }
   }
   /**
-   * Add hole markers to a polygon feature group
+   * Add hole markers to a polygon feature group, with configurable special markers.
    */
   addHoleMarkers(latlngs, featureGroup) {
-    console.log("PolygonInteractionManager addHoleMarkers");
+    var _a2, _b2, _c;
+    const holeMenuEnabled = ((_a2 = this.config.markers.holeMarkers) == null ? void 0 : _a2.menuMarker) ?? false;
+    const holeDeleteEnabled = ((_b2 = this.config.markers.holeMarkers) == null ? void 0 : _b2.deleteMarker) ?? false;
+    const holeInfoEnabled = ((_c = this.config.markers.holeMarkers) == null ? void 0 : _c.infoMarker) ?? false;
+    let menuMarkerIdx = this.getMarkerIndex(latlngs, this.config.markers.markerMenuIcon.position);
+    let deleteMarkerIdx = this.getMarkerIndex(
+      latlngs,
+      this.config.markers.markerDeleteIcon.position
+    );
+    let infoMarkerIdx = this.getMarkerIndex(latlngs, this.config.markers.markerInfoIcon.position);
+    const separatedIndices = this.ensureMarkerSeparation(latlngs.length, {
+      menu: { index: menuMarkerIdx, enabled: holeMenuEnabled },
+      delete: { index: deleteMarkerIdx, enabled: holeDeleteEnabled },
+      info: { index: infoMarkerIdx, enabled: holeInfoEnabled }
+    });
+    menuMarkerIdx = separatedIndices.menu;
+    deleteMarkerIdx = separatedIndices.delete;
+    infoMarkerIdx = separatedIndices.info;
     latlngs.forEach((latlng, i) => {
-      const iconClasses = this.config.markers.holeIcon.styleClasses;
+      let iconClasses = this.config.markers.holeIcon.styleClasses;
+      if (i === menuMarkerIdx && holeMenuEnabled) {
+        iconClasses = this.config.markers.markerMenuIcon.styleClasses;
+      }
+      if (i === deleteMarkerIdx && holeDeleteEnabled) {
+        iconClasses = this.config.markers.markerDeleteIcon.styleClasses;
+      }
+      if (i === infoMarkerIdx && holeInfoEnabled) {
+        iconClasses = this.config.markers.markerInfoIcon.styleClasses;
+      }
       const processedClasses = Array.isArray(iconClasses) ? iconClasses : [iconClasses];
+      const isSpecialMarker = i === menuMarkerIdx && holeMenuEnabled || i === deleteMarkerIdx && holeDeleteEnabled || i === infoMarkerIdx && holeInfoEnabled;
       const marker = new L.Marker(latlng, {
         icon: this.createDivIcon(processedClasses),
-        draggable: true,
-        title: this.getLatLngInfoString(latlng),
+        draggable: this.config.modes.dragElbow,
+        title: this.config.markers.coordsTitle ? this.getLatLngInfoString(latlng) : "",
         zIndexOffset: this.config.markers.holeIcon.zIndexOffset ?? this.config.markers.zIndexOffset
       });
       featureGroup.addLayer(marker).addTo(this.map);
+      this.markerFeatureGroupMap.set(marker, featureGroup);
       marker.on("add", () => {
-        const el = marker.getElement();
-        if (el) el.style.pointerEvents = "auto";
+        const el2 = marker.getElement();
+        if (el2) el2.style.pointerEvents = "auto";
       });
       marker.on("click", (e) => {
-        var _a2, _b2;
-        (_b2 = (_a2 = e.originalEvent) == null ? void 0 : _a2.stopPropagation) == null ? void 0 : _b2.call(_a2);
-        L.DomEvent.stopPropagation(e);
-      });
-      marker.on("dragend", (e) => {
-        L.DomEvent.stopPropagation(e);
+        var _a3, _b3;
+        if (this.isDraggingMarker) {
+          (_b3 = (_a3 = e.originalEvent) == null ? void 0 : _a3.stopPropagation) == null ? void 0 : _b3.call(_a3);
+          L.DomEvent.stopPropagation(e);
+        }
       });
-      marker.on("drag", (e) => {
-        this.markerDrag(featureGroup);
+      marker.on("dragstart", () => {
+        this.isDraggingMarker = true;
+        this._activeMarker = marker;
       });
       marker.on("dragend", (e) => {
-        this.markerDragEnd(featureGroup);
+        const fg = this.markerFeatureGroupMap.get(marker);
+        if (this.modeManager.canPerformAction("markerDrag") && fg) {
+          this.markerDragEnd(fg);
+        }
+        this._activeMarker = null;
+        L.DomEvent.stopPropagation(e);
+        setTimeout(() => {
+          this.isDraggingMarker = false;
+        }, 10);
       });
-    });
-  }
-  /**
-   * 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) {
-      if (Array.isArray(rawLatLngs[0])) {
-        if (Array.isArray(rawLatLngs[0][0]) && rawLatLngs[0][0].length > 0) {
-          const firstCoord = rawLatLngs[0][0][0];
-          if (firstCoord && typeof firstCoord === "object" && "lat" in firstCoord) {
-            processedRings = rawLatLngs[0];
-          } else {
-            processedRings = rawLatLngs[0];
+      const el = marker.getElement();
+      if (el) {
+        el.addEventListener(
+          "touchstart",
+          (e) => {
+            e.stopPropagation();
+          },
+          { passive: true }
+        );
+        el.addEventListener("touchend", (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          marker.fire("click");
+          if (this.isDraggingMarker && !isSpecialMarker) {
+            const fg = this.markerFeatureGroupMap.get(marker);
+            if (this.modeManager.canPerformAction("markerDrag") && fg) {
+              this.markerDragEnd(fg);
+            }
           }
-        } else if (rawLatLngs[0][0] && typeof rawLatLngs[0][0] === "object" && "lat" in rawLatLngs[0][0]) {
-          processedRings = rawLatLngs;
-        } else {
-          processedRings = rawLatLngs[0];
-        }
-      } else if (rawLatLngs[0] && typeof rawLatLngs[0] === "object" && "lat" in rawLatLngs[0]) {
-        processedRings = [rawLatLngs];
-      } else {
-        processedRings = [rawLatLngs];
+          this._activeMarker = null;
+        });
       }
-    } else {
-      return;
-    }
-    processedRings.forEach((ring, ringIndex) => {
-      for (let i = 0; i < ring.length; i++) {
-        const edgeStart = ring[i];
-        const edgeEnd = ring[(i + 1) % ring.length];
-        if (edgeStart.lat === edgeEnd.lat && edgeStart.lng === edgeEnd.lng) {
-          continue;
+      if (i === menuMarkerIdx || i === deleteMarkerIdx || i === infoMarkerIdx) {
+        const element = marker.getElement();
+        if (element) {
+          element.style.zIndex = "10000";
         }
-        const edgePolyline = L.polyline([edgeStart, edgeEnd], {
-          color: "transparent",
-          weight: 10,
-          opacity: 0,
-          interactive: true
-        });
-        edgePolyline._polydrawEdgeInfo = {
-          ringIndex,
-          edgeIndex: i,
-          startPoint: edgeStart,
-          endPoint: edgeEnd,
-          parentPolygon: polygon2,
-          parentFeatureGroup: featureGroup
-        };
-        edgePolyline.on("click", (e) => {
+      }
+      if (this.config.modes.dragElbow) {
+        const createDragHandler = (fg) => () => {
+          if (this.modeManager.canPerformAction("markerDrag")) {
+            this.markerDrag(fg);
+          }
+        };
+        marker.on("drag", createDragHandler(featureGroup));
+      }
+      if (i === menuMarkerIdx && holeMenuEnabled) {
+        marker.options.zIndexOffset = this.config.markers.markerMenuIcon.zIndexOffset ?? this.config.markers.zIndexOffset;
+        marker.on("click", () => {
+          const ring = latlngs.map((pt) => [pt.lng, pt.lat]);
+          ring.push(ring[0]);
+          const holePolygon = {
+            type: "Feature",
+            properties: {},
+            geometry: {
+              type: "Polygon",
+              coordinates: [ring]
+            }
+          };
+          const centerOfMass2 = PolygonUtil.getCenterOfMass(holePolygon);
+          const menuPopup = this.generateMenuMarkerPopup(latlngs, featureGroup);
+          menuPopup.setLatLng(centerOfMass2).openOn(this.map);
+        });
+        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 container = this.map.getContainer();
+          if (container) {
+            container.style.touchAction = "manipulation";
+          }
+        });
+        marker.on("popupclose", () => {
+          const container = this.map.getContainer();
+          if (container) {
+            container.style.touchAction = "";
+          }
+        });
+      }
+      if (i === infoMarkerIdx && holeInfoEnabled) {
+        const ring = latlngs.map((latlng2) => [latlng2.lng, latlng2.lat]);
+        ring.push(ring[0]);
+        const holePolygon = {
+          type: "Feature",
+          properties: {},
+          geometry: {
+            type: "Polygon",
+            coordinates: [ring]
+          }
+        };
+        const area2 = this.turfHelper.getPolygonArea(holePolygon);
+        const perimeter = this.turfHelper.getPolygonPerimeter(holePolygon) * 1e3;
+        marker.options.zIndexOffset = this.config.markers.markerInfoIcon.zIndexOffset ?? this.config.markers.zIndexOffset;
+        marker.on("click", () => {
+          const infoPopup = this.generateInfoMarkerPopup(area2, perimeter);
+          infoPopup.setLatLng(latlng).openOn(this.map);
+        });
+      }
+      marker.on("mousedown", (e) => {
+        if (!this.modeManager.isInOffMode()) {
+          L.DomEvent.stopPropagation(e);
+          this.map.fire("mousedown", e);
+        }
+        this._activeMarker = marker;
+      });
+      marker.on("click", (e) => {
+        if (this.modeManager.isInOffMode()) {
+          if (this.isEdgeDeletionModifierKeyPressed(e.originalEvent)) {
+            const polygonLayer = featureGroup.getLayers().find((layer) => layer instanceof L.Polygon);
+            if (polygonLayer) {
+              this.elbowClicked(e, polygonLayer, marker.getLatLng());
+            }
+          } else {
+            if (i === deleteMarkerIdx && holeDeleteEnabled) {
+              this.map.closePopup();
+              const parentPolygon = featureGroup.getLayers().find((layer) => layer instanceof L.Polygon);
+              if (parentPolygon) {
+                const rawLatLngs = parentPolygon.getLatLngs();
+                let rings = [];
+                if (Array.isArray(rawLatLngs) && rawLatLngs.length > 0) {
+                  if (Array.isArray(rawLatLngs[0])) {
+                    const first = rawLatLngs[0];
+                    if (Array.isArray(first) && Array.isArray(first[0])) {
+                      rings = rawLatLngs[0];
+                    } else {
+                      rings = rawLatLngs;
+                    }
+                  } else {
+                    rings = [rawLatLngs];
+                  }
+                }
+                const target = marker.getLatLng();
+                let holeIndex = -1;
+                for (let r = 1; r < rings.length; r++) {
+                  if (rings[r].some((p) => p.lat === target.lat && p.lng === target.lng)) {
+                    holeIndex = r;
+                    break;
+                  }
+                }
+                if (holeIndex > 0) {
+                  const newRings = rings.filter((_, idx) => idx !== holeIndex);
+                  const coords = newRings.map((ring) => {
+                    const arr = ring.map((ll) => [ll.lng, ll.lat]);
+                    if (arr.length > 0) {
+                      const firstPt = arr[0];
+                      const lastPt = arr[arr.length - 1];
+                      if (firstPt[0] !== lastPt[0] || firstPt[1] !== lastPt[1]) {
+                        arr.push([firstPt[0], firstPt[1]]);
+                      }
+                    }
+                    return arr;
+                  });
+                  const newPolygon = this.turfHelper.getMultiPolygon([coords]);
+                  this.removeFeatureGroup(featureGroup);
+                  this.eventManager.emit("polydraw:polygon:updated", {
+                    operation: "removeHole",
+                    polygon: newPolygon
+                  });
+                }
+              }
+            }
+          }
+        }
+      });
+      marker.on("mouseover", () => this.onMarkerHoverForEdgeDeletion(marker, true));
+      marker.on("mouseout", () => this.onMarkerHoverForEdgeDeletion(marker, false));
+    });
+  }
+  /**
+   * Add edge click listeners to a polygon
+   */
+  addEdgeClickListeners(polygon2, featureGroup) {
+    const rawLatLngs = polygon2.getLatLngs();
+    let processedRings;
+    if (Array.isArray(rawLatLngs) && rawLatLngs.length > 0) {
+      if (Array.isArray(rawLatLngs[0])) {
+        if (Array.isArray(rawLatLngs[0][0]) && rawLatLngs[0][0].length > 0) {
+          const firstCoord = rawLatLngs[0][0][0];
+          if (firstCoord && typeof firstCoord === "object" && "lat" in firstCoord) {
+            processedRings = rawLatLngs[0];
+          } else {
+            processedRings = rawLatLngs[0];
+          }
+        } else if (rawLatLngs[0][0] && typeof rawLatLngs[0][0] === "object" && "lat" in rawLatLngs[0][0]) {
+          processedRings = rawLatLngs;
+        } else {
+          processedRings = rawLatLngs[0];
+        }
+      } else if (rawLatLngs[0] && typeof rawLatLngs[0] === "object" && "lat" in rawLatLngs[0]) {
+        processedRings = [rawLatLngs];
+      } else {
+        processedRings = [rawLatLngs];
+      }
+    } else {
+      return;
+    }
+    processedRings.forEach((ring, ringIndex) => {
+      for (let i = 0; i < ring.length; i++) {
+        const edgeStart = ring[i];
+        const edgeEnd = ring[(i + 1) % ring.length];
+        if (edgeStart.lat === edgeEnd.lat && edgeStart.lng === edgeEnd.lng) {
+          continue;
+        }
+        const edgePolyline = L.polyline([edgeStart, edgeEnd], {
+          color: "transparent",
+          weight: 10,
+          opacity: 0,
+          interactive: true
+        });
+        edgePolyline._polydrawEdgeInfo = {
+          ringIndex,
+          edgeIndex: i,
+          startPoint: edgeStart,
+          endPoint: edgeEnd,
+          parentPolygon: polygon2,
+          parentFeatureGroup: featureGroup
+        };
+        edgePolyline.on("click", (e) => {
           this.onEdgeClick(e, edgePolyline);
         });
         edgePolyline.on("mouseover", () => {
@@ -18813,7 +19084,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 = {
@@ -18822,7 +19092,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);
@@ -18831,9 +19100,9 @@ class PolygonInteractionManager {
       if (!this.modeManager.canPerformAction("polygonDrag")) {
         return;
       }
-      L.DomEvent.stopPropagation(e);
-      L.DomEvent.preventDefault(e);
-      const isModifierPressed = this.detectModifierKey(e.originalEvent || e);
+      L.DomEvent.stopPropagation(e.originalEvent);
+      L.DomEvent.preventDefault(e.originalEvent);
+      const isModifierPressed = this.detectDragSubtractModifierKey(e.originalEvent);
       this.currentModifierDragMode = isModifierPressed;
       this.isModifierKeyHeld = isModifierPressed;
       polygon2._polydrawDragData.isDragging = true;
@@ -18875,7 +19144,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) => {
@@ -18900,7 +19168,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) {
@@ -18913,7 +19180,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) {
@@ -18930,12 +19196,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;
     }
@@ -18954,10 +19218,11 @@ class PolygonInteractionManager {
         }
         const poly = parentPolygon.toGeoJSON();
         if (poly.geometry.type === "MultiPolygon" || poly.geometry.type === "Polygon") {
-          const newPolygon = this.turfHelper.injectPointToPolygon(poly, [
-            newPoint.lng,
-            newPoint.lat
-          ]);
+          const newPolygon = this.turfHelper.injectPointToPolygon(
+            poly,
+            [newPoint.lng, newPoint.lat],
+            edgeInfo.ringIndex
+          );
           if (newPolygon) {
             const polydrawPolygon = parentPolygon;
             const optimizationLevel = polydrawPolygon._polydrawOptimizationLevel || 0;
@@ -18975,10 +19240,9 @@ class PolygonInteractionManager {
     L.DomEvent.stopPropagation(e);
   }
   highlightEdgeOnHover(edgePolyline, isHovering) {
-    console.log("PolygonInteractionManager highlightEdgeOnHover");
     if (isHovering) {
       edgePolyline.setStyle({
-        color: "#7a9441",
+        color: this.config.colors.edgeHover,
         weight: 4,
         opacity: 1
       });
@@ -18990,62 +19254,90 @@ class PolygonInteractionManager {
       });
     }
   }
-  elbowClicked(e, poly) {
-    console.log("elbowClicked");
-    if (!this.config.modes.edgeDeletion) {
-      return;
-    }
-    if (!this.isModifierKeyPressed(e.originalEvent)) {
+  elbowClicked(e, polygonLayer, forcedLatLng) {
+    if (!this.config.modes.edgeDeletion) return;
+    if (!this.isEdgeDeletionModifierKeyPressed(e.originalEvent)) return;
+    const clickedLatLng = forcedLatLng ?? e.latlng;
+    const rawLatLngs = polygonLayer.getLatLngs();
+    let rings = [];
+    if (Array.isArray(rawLatLngs) && rawLatLngs.length > 0) {
+      if (Array.isArray(rawLatLngs[0])) {
+        const first = rawLatLngs[0];
+        if (Array.isArray(first) && Array.isArray(first[0])) {
+          rings = rawLatLngs[0];
+        } else {
+          rings = rawLatLngs;
+        }
+      } else {
+        rings = [rawLatLngs];
+      }
+    } else {
       return;
     }
-    const clickedLatLng = e.latlng;
-    const allRings = poly.geometry.coordinates[0];
     let targetRingIndex = -1;
     let targetVertexIndex = -1;
-    for (let ringIndex = 0; ringIndex < allRings.length; ringIndex++) {
-      const ring = allRings[ringIndex];
-      const vertexIndex = ring.findIndex(
-        (coord) => Math.abs(coord[1] - clickedLatLng.lat) < 1e-4 && Math.abs(coord[0] - clickedLatLng.lng) < 1e-4
-      );
-      if (vertexIndex !== -1) {
-        targetRingIndex = ringIndex;
-        targetVertexIndex = vertexIndex;
-        break;
+    for (let r = 0; r < rings.length; r++) {
+      const ring = rings[r];
+      for (let v = 0; v < ring.length; v++) {
+        const p = ring[v];
+        if (p.lat === clickedLatLng.lat && p.lng === clickedLatLng.lng) {
+          targetRingIndex = r;
+          targetVertexIndex = v;
+          break;
+        }
       }
+      if (targetRingIndex !== -1) break;
     }
     if (targetRingIndex === -1 || targetVertexIndex === -1) {
       return;
     }
-    const targetRing = allRings[targetRingIndex];
-    if (targetRing.length <= 4) {
+    const targetRing = rings[targetRingIndex];
+    if (targetRing.length <= 3) {
       return;
     }
-    const newAllRings = allRings.map((ring, ringIndex) => {
-      if (ringIndex === targetRingIndex) {
-        const newRing = [...ring];
-        newRing.splice(targetVertexIndex, 1);
-        return newRing;
-      } else {
-        return [...ring];
+    const newRings = rings.map((ring, idx) => {
+      if (idx !== targetRingIndex) return ring.slice();
+      const nr = ring.slice();
+      nr.splice(targetVertexIndex, 1);
+      return nr;
+    });
+    const coords = newRings.map((ring) => {
+      const arr = ring.map((ll) => [ll.lng, ll.lat]);
+      if (arr.length > 0) {
+        const first = arr[0];
+        const last = arr[arr.length - 1];
+        if (first[0] !== last[0] || first[1] !== last[1]) {
+          arr.push([first[0], first[1]]);
+        }
       }
+      return arr;
     });
-    const currentFeatureGroup = this.findFeatureGroupForPoly(poly);
+    let currentFeatureGroup = null;
+    for (const fg of this.getFeatureGroups()) {
+      let found = false;
+      fg.eachLayer((layer) => {
+        if (layer === polygonLayer) found = true;
+      });
+      if (found) {
+        currentFeatureGroup = fg;
+        break;
+      }
+    }
     if (currentFeatureGroup) {
       this.removeFeatureGroup(currentFeatureGroup);
     }
-    const newPolygon = this.turfHelper.getMultiPolygon([newAllRings]);
+    const newPolygon = this.turfHelper.getMultiPolygon([coords]);
     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]) {
         const feature2 = featureCollection2.features[0];
-        if (JSON.stringify(feature2.geometry.coordinates) === JSON.stringify(poly.geometry.coordinates)) {
+        if (this.turfHelper.equalPolygons(feature2, poly)) {
           return featureGroup;
         }
       }
@@ -19057,14 +19349,14 @@ class PolygonInteractionManager {
       console.warn("No active marker set for dragging.");
       return;
     }
-    console.log("PolygonInteractionManager markerDrag", featureGroup);
     const newPos = [];
     let testarray = [];
     let hole = [];
-    const layerLength = featureGroup.getLayers();
-    const posarrays = layerLength[0].getLatLngs();
+    const layers = featureGroup.getLayers();
+    const polygonLayer = layers.find((l) => l instanceof L.Polygon);
+    const posarrays = polygonLayer.getLatLngs();
     let length2 = 0;
-    const markers2 = layerLength.filter((layer) => layer instanceof L.Marker);
+    const markers2 = layers.filter((layer) => layer instanceof L.Marker);
     if (posarrays.length > 1) {
       for (let index = 0; index < posarrays.length; index++) {
         testarray = [];
@@ -19089,7 +19381,7 @@ class PolygonInteractionManager {
           }
           newPos.push(hole);
         } else {
-          length2 += posarrays[index - 1][0].length;
+          length2 += posarrays[index - 1].length;
           for (let j = length2; j < posarrays[index][0].length + length2; j++) {
             if (markers2[j]) {
               testarray.push(markers2[j].getLatLng());
@@ -19130,17 +19422,16 @@ class PolygonInteractionManager {
       }
       newPos.push(hole);
     }
-    layerLength[0].setLatLngs(newPos);
+    polygonLayer.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) {
+    if (featureCollection2.features[0].geometry.type === "MultiPolygon") {
       for (const element of featureCollection2.features[0].geometry.coordinates) {
         const feature2 = this.turfHelper.getMultiPolygon([element]);
         if (this.turfHelper.hasKinks(feature2)) {
@@ -19161,9 +19452,9 @@ class PolygonInteractionManager {
         }
       }
     } else {
-      const feature2 = this.turfHelper.getMultiPolygon(
+      const feature2 = this.turfHelper.getMultiPolygon([
         featureCollection2.features[0].geometry.coordinates
-      );
+      ]);
       if (this.turfHelper.hasKinks(feature2)) {
         const unkink = this.turfHelper.getKinks(feature2);
         for (const polygon2 of unkink) {
@@ -19172,11 +19463,6 @@ class PolygonInteractionManager {
             polygon: this.turfHelper.getTurfPolygon(polygon2),
             allowMerge: true
           });
-          this.eventManager.emit("polydraw:polygon:updated", {
-            operation: "markerDrag",
-            polygon: this.turfHelper.getTurfPolygon(polygon2),
-            allowMerge: true
-          });
         }
       } else {
         this.eventManager.emit("polydraw:polygon:updated", {
@@ -19184,33 +19470,20 @@ class PolygonInteractionManager {
           polygon: feature2,
           allowMerge: true
         });
-        this.eventManager.emit("polydraw:polygon:updated", {
-          operation: "markerDrag",
-          polygon: feature2,
-          allowMerge: true
-        });
       }
     }
     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));
-    } else if (latLngs.lat !== void 0 && latLngs.lng !== void 0) {
-      return {
-        lat: latLngs.lat + offsetLat,
-        lng: latLngs.lng + offsetLng
-      };
-    } else {
       return latLngs.map(
-        (coord) => this.offsetPolygonCoordinates(coord, offsetLat, offsetLng)
+        (ring) => this.offsetPolygonCoordinates(ring, offsetLat, offsetLng)
       );
     }
+    return latLngs.map((p) => L.latLng(p.lat + offsetLat, p.lng + offsetLng));
   }
   updateMarkersAndHoleLinesDuringDrag(polygon2, offsetLat, offsetLng) {
-    console.log("PolygonInteractionManager updateMarkersAndHoleLinesDuringDrag");
     try {
       let featureGroup = null;
       for (const fg of this.getFeatureGroups()) {
@@ -19237,7 +19510,8 @@ class PolygonInteractionManager {
           if (layer instanceof L.Marker) {
             polygon2._polydrawOriginalMarkerPositions.set(layer, layer.getLatLng());
           } else if (layer instanceof L.Polyline && !(layer instanceof L.Polygon)) {
-            polygon2._polydrawOriginalHoleLinePositions.set(layer, layer.getLatLngs());
+            const latLngs = layer.getLatLngs();
+            polygon2._polydrawOriginalHoleLinePositions.set(layer, latLngs);
           }
         });
       }
@@ -19254,10 +19528,16 @@ class PolygonInteractionManager {
         } else if (layer instanceof L.Polyline && !(layer instanceof L.Polygon)) {
           const originalPositions = polygon2._polydrawOriginalHoleLinePositions.get(layer);
           if (originalPositions) {
-            const newLatLngs = originalPositions.map((latlng) => ({
-              lat: latlng.lat + offsetLat,
-              lng: latlng.lng + offsetLng
-            }));
+            let newLatLngs;
+            if (Array.isArray(originalPositions[0])) {
+              newLatLngs = originalPositions.map(
+                (ring) => ring.map((latlng) => L.latLng(latlng.lat + offsetLat, latlng.lng + offsetLng))
+              );
+            } else {
+              newLatLngs = originalPositions.map(
+                (latlng) => L.latLng(latlng.lat + offsetLat, latlng.lng + offsetLng)
+              );
+            }
             layer.setLatLngs(newLatLngs);
           }
         }
@@ -19267,7 +19547,6 @@ class PolygonInteractionManager {
     }
   }
   async updatePolygonAfterDrag(polygon2) {
-    console.log("PolygonInteractionManager updatePolygonAfterDrag");
     try {
       let featureGroup = null;
       for (const fg of this.getFeatureGroups()) {
@@ -19299,36 +19578,39 @@ class PolygonInteractionManager {
     } catch (error) {
     }
   }
-  detectModifierKey(event) {
+  getDragSubtractModifierKey() {
+    const { keys } = this.config.dragPolygons.modifierSubtract;
+    const userAgent = navigator.userAgent.toLowerCase();
+    const isMac = userAgent.includes("mac");
+    const isWindows = userAgent.includes("windows");
+    if (isMac && keys.mac) return keys.mac;
+    if (isWindows && keys.windows) return keys.windows;
+    if (keys.linux) return keys.linux;
+    return isMac ? "metaKey" : "ctrlKey";
+  }
+  detectDragSubtractModifierKey(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;
     }
     if (isTouchDevice()) {
       return false;
     }
-    const userAgent = navigator.userAgent.toLowerCase();
-    const isMac = userAgent.includes("mac");
-    if (isMac) {
-      return event.metaKey;
-    } else {
-      return event.ctrlKey;
-    }
+    const modifierKey = this.getDragSubtractModifierKey();
+    return !!event[modifierKey];
   }
   setSubtractVisualMode(polygon2, enabled) {
-    console.log("PolygonInteractionManager setSubtractVisualMode");
     if (!polygon2 || !polygon2.setStyle) {
       return;
     }
     try {
       if (enabled) {
         polygon2.setStyle({
-          color: this.config.dragPolygons.modifierSubtract.subtractColor
+          color: this.config.colors.dragPolygons.subtract
         });
       } else {
         polygon2.setStyle({
-          color: this.config.polygonOptions.color
+          color: this.config.colors.polygon.border
         });
       }
       this.updateMarkerColorsForSubtractMode(polygon2, enabled);
@@ -19337,7 +19619,6 @@ class PolygonInteractionManager {
   }
   updateMarkerColorsForSubtractMode(polygon2, subtractMode) {
     var _a2, _b2;
-    console.log("PolygonInteractionManager updateMarkerColorsForSubtractMode");
     try {
       let featureGroup = null;
       for (const fg of this.getFeatureGroups()) {
@@ -19362,8 +19643,8 @@ class PolygonInteractionManager {
                 element.style.display = "none";
                 element.classList.add("subtract-mode-hidden");
               } else {
-                element.style.backgroundColor = this.config.dragPolygons.modifierSubtract.subtractColor;
-                element.style.borderColor = this.config.dragPolygons.modifierSubtract.subtractColor;
+                element.style.backgroundColor = this.config.colors.dragPolygons.subtract;
+                element.style.borderColor = this.config.colors.dragPolygons.subtract;
                 element.classList.add("subtract-mode");
               }
             } else {
@@ -19383,8 +19664,7 @@ class PolygonInteractionManager {
     }
   }
   handleModifierToggleDuringDrag(event) {
-    console.log("PolygonInteractionManager handleModifierToggleDuringDrag");
-    const isModifierPressed = this.detectModifierKey(event);
+    const isModifierPressed = this.detectDragSubtractModifierKey(event);
     this.currentModifierDragMode = isModifierPressed;
     this.isModifierKeyHeld = isModifierPressed;
     if (this.currentDragPolygon) {
@@ -19392,11 +19672,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 = [];
@@ -19416,8 +19694,11 @@ class PolygonInteractionManager {
           const existingPolygon = this.turfHelper.getTurfPolygon(firstFeature);
           try {
             const intersection3 = this.turfHelper.getIntersection(existingPolygon, draggedPolygon);
-            if (intersection3 && intersection3.geometry && intersection3.geometry.coordinates.length > 0) {
-              intersectingFeatureGroups.push(featureGroup);
+            if (intersection3 && intersection3.geometry && "coordinates" in intersection3.geometry) {
+              const coords = intersection3.geometry.coordinates;
+              if (coords.length > 0) {
+                intersectingFeatureGroups.push(featureGroup);
+              }
             }
           } catch (intersectError) {
             try {
@@ -19477,30 +19758,39 @@ class PolygonInteractionManager {
   boundingBoxesOverlap(bbox1, bbox2) {
     return !(bbox1[2] < bbox2[0] || bbox2[2] < bbox1[0] || bbox1[3] < bbox2[1] || bbox2[3] < bbox1[1]);
   }
-  isModifierKeyPressed(event) {
-    console.log("PolygonInteractionManager isModifierKeyPressed");
+  isDragSubtractModifierKeyPressed(event) {
     if (isTouchDevice()) {
       return false;
     }
+    const modifierKey = this.getDragSubtractModifierKey();
+    return !!event[modifierKey];
+  }
+  getEdgeDeletionModifierKey() {
+    const { keys } = this.config.edgeDeletion;
     const userAgent = navigator.userAgent.toLowerCase();
     const isMac = userAgent.includes("mac");
-    if (isMac) {
-      return event.metaKey;
-    } else {
-      return event.ctrlKey;
+    const isWindows = userAgent.includes("windows");
+    if (isMac && keys.mac) return keys.mac;
+    if (isWindows && keys.windows) return keys.windows;
+    if (keys.linux) return keys.linux;
+    return isMac ? "metaKey" : "ctrlKey";
+  }
+  isEdgeDeletionModifierKeyPressed(event) {
+    if (isTouchDevice()) {
+      return false;
     }
+    const modifierKey = this.getEdgeDeletionModifierKey();
+    return !!event[modifierKey];
   }
   onMarkerHoverForEdgeDeletion(marker, isHovering) {
-    console.log("PolygonInteractionManager onMarkerHoverForEdgeDeletion");
     const element = marker.getElement();
     if (!element) return;
     if (isHovering) {
       const checkModifierAndUpdate = (e) => {
-        var _a2, _b2, _c, _d;
-        const isModifierPressed = this.detectModifierKey(e);
+        const isModifierPressed = this.isEdgeDeletionModifierKeyPressed(e);
         if (isModifierPressed) {
-          element.style.backgroundColor = ((_b2 = (_a2 = this.config.dragPolygons) == null ? void 0 : _a2.modifierSubtract) == null ? void 0 : _b2.subtractColor) || "#D9460F";
-          element.style.borderColor = ((_d = (_c = this.config.dragPolygons) == null ? void 0 : _c.modifierSubtract) == null ? void 0 : _d.subtractColor) || "#D9460F";
+          element.style.backgroundColor = this.config.colors.edgeDeletion.hover;
+          element.style.borderColor = this.config.colors.edgeDeletion.hover;
           element.classList.add("edge-deletion-hover");
           try {
             const container = this.map.getContainer();
@@ -19520,7 +19810,7 @@ class PolygonInteractionManager {
       };
       const initialEvent = new MouseEvent("mouseover");
       checkModifierAndUpdate(initialEvent);
-      marker._polydrawModifierHandler = checkModifierAndUpdate;
+      this.markerModifierHandlers.set(marker, checkModifierAndUpdate);
       document.addEventListener("keydown", checkModifierAndUpdate);
       document.addEventListener("keyup", checkModifierAndUpdate);
       element.addEventListener("mousemove", checkModifierAndUpdate);
@@ -19533,18 +19823,17 @@ class PolygonInteractionManager {
         container.style.cursor = "";
       } catch (error) {
       }
-      const handler = marker._polydrawModifierHandler;
+      const handler = this.markerModifierHandlers.get(marker);
       if (handler) {
         document.removeEventListener("keydown", handler);
         document.removeEventListener("keyup", handler);
         element.removeEventListener("mousemove", handler);
-        delete marker._polydrawModifierHandler;
+        this.markerModifierHandlers.delete(marker);
       }
     }
   }
   // Helper methods
   getMarkerIndex(latlngs, position) {
-    console.log("PolygonInteractionManager getMarkerIndex");
     const bounds = PolyDrawUtil.getBounds(latlngs, Math.sqrt(2) / 2);
     const compass = new Compass(
       bounds.getSouth(),
@@ -19559,11 +19848,13 @@ class PolygonInteractionManager {
     };
     const targetPoint = this.turfHelper.getCoord(latLngPoint);
     const fc = this.turfHelper.getFeaturePointCollection(latlngs);
-    const nearestPointIdx = this.turfHelper.getNearestPointIndex(targetPoint, fc);
+    const nearestPointIdx = this.turfHelper.getNearestPointIndex(
+      targetPoint,
+      fc
+    );
     return nearestPointIdx;
   }
   ensureMarkerSeparation(polygonLength, markers2) {
-    console.log("PolygonInteractionManager ensureMarkerSeparation");
     const enabledMarkers = [];
     if (markers2.menu.enabled) {
       enabledMarkers.push({ type: "menu", index: markers2.menu.index });
@@ -19606,7 +19897,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++) {
@@ -19628,15 +19918,12 @@ 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");
@@ -19757,16 +20044,16 @@ class PolygonInteractionManager {
       btn.style.pointerEvents = "auto";
       btn.addEventListener("click", (e) => e.stopPropagation());
     });
+    const isMobile = window.innerWidth <= 600;
     const popup = L.popup({
       closeButton: true,
       autoClose: true,
-      className: "menu-popup"
+      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) => {
@@ -19779,7 +20066,11 @@ class PolygonInteractionManager {
       }
       return polygon2.toGeoJSON();
     } catch (error) {
-      console.warn("Error getting polygon GeoJSON from feature group:", error.message);
+      if (error instanceof Error) {
+        console.warn("Error getting polygon GeoJSON from feature group:", error.message);
+      } else {
+        console.warn("Error getting polygon GeoJSON from feature group:", error);
+      }
       return {
         type: "Feature",
         geometry: {
@@ -19799,7 +20090,6 @@ class PolygonInteractionManager {
     }
   }
   getTotalPolygonPerimeter(polygonGeoJSON) {
-    console.log("PolygonInteractionManager getTotalPolygonPerimeter");
     try {
       if (!polygonGeoJSON || !polygonGeoJSON.geometry) {
         return 0;
@@ -19838,12 +20128,15 @@ class PolygonInteractionManager {
       }
       return totalPerimeter * 1e3;
     } catch (error) {
-      console.warn("Error calculating total polygon perimeter:", error.message);
+      if (error instanceof Error) {
+        console.warn("Error calculating total polygon perimeter:", error.message);
+      } else {
+        console.warn("Error calculating total polygon perimeter:", error);
+      }
       return this.turfHelper.getPolygonPerimeter(polygonGeoJSON) * 1e3;
     }
   }
   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");
@@ -19871,10 +20164,11 @@ class PolygonInteractionManager {
       btn.style.pointerEvents = "auto";
       btn.addEventListener("click", (e) => e.stopPropagation());
     });
+    const isMobile = window.innerWidth <= 600;
     const popup = L.popup({
       closeButton: true,
       autoClose: true,
-      className: "info-popup"
+      className: `info-popup${isMobile ? " mobile-popup" : ""}`
     }).setContent(outerWrapper);
     return popup;
   }
@@ -19959,7 +20253,7 @@ class PolygonMutationManager {
       this.subtractPolygon(data.subtractPolygon);
     });
     this.eventManager.on("polydraw:polygon:deleted", () => {
-      this.emit("polygonDeleted");
+      this.emit("polygonDeleted", void 0);
     });
   }
   /**
@@ -19978,11 +20272,10 @@ class PolygonMutationManager {
    * Handle menu actions from interaction manager
    */
   async handleMenuAction(data) {
-    const { action, latLngs, featureGroup } = data;
-    const completePolygonGeoJSON = this.getCompletePolygonFromFeatureGroup(featureGroup);
-    this.removeFeatureGroupInternal(featureGroup);
+    const completePolygonGeoJSON = this.getCompletePolygonFromFeatureGroup(data.featureGroup);
+    this.removeFeatureGroupInternal(data.featureGroup);
     let result;
-    switch (action) {
+    switch (data.action) {
       case "simplify": {
         result = this.geometryManager.simplifyPolygon(completePolygonGeoJSON);
         break;
@@ -20028,7 +20321,8 @@ class PolygonMutationManager {
    * Add a polygon with optional merging logic
    */
   async addPolygon(latlngs, options = {}) {
-    const { simplify: simplify3 = true, noMerge = false } = options;
+    const { noMerge = false } = options;
+    const { simplify: simplify3 = true } = options;
     try {
       if (this.config.mergePolygons && !noMerge && this.getFeatureGroups().length > 0 && !this.config.kinks) {
         return await this.mergePolygon(latlngs, options);
@@ -20153,9 +20447,11 @@ class PolygonMutationManager {
                 this.interactionManager.addMarkers(polyElement, featureGroup);
               } else {
                 const holePolyline = L.polyline(polyElement, {
-                  color: this.config.holeOptions.color,
+                  color: this.config.colors.hole.border,
                   weight: this.config.holeOptions.weight || 2,
-                  opacity: this.config.holeOptions.opacity || 1
+                  opacity: this.config.holeOptions.opacity || 1,
+                  fillColor: this.config.colors.hole.fill,
+                  fillOpacity: this.config.holeOptions.fillOpacity || 0.5
                 });
                 featureGroup.addLayer(holePolyline);
                 this.interactionManager.addHoleMarkers(polyElement, featureGroup);
@@ -20206,18 +20502,23 @@ class PolygonMutationManager {
           if (!firstFeature.geometry || !firstFeature.geometry.coordinates) {
             return;
           }
-          if (firstFeature.geometry.coordinates.length > 1) {
-            firstFeature.geometry.coordinates.forEach((element) => {
-              try {
-                const feature2 = this.turfHelper.getMultiPolygon([element]);
-                polyIntersection = this.geometryManager.checkPolygonIntersection(feature2, latlngs);
-                if (polyIntersection) {
-                  intersectingFeatureGroups.push(featureGroup);
-                  polygonFeature.push(feature2);
+          if (this.isPositionArrayofArrays(firstFeature.geometry.coordinates)) {
+            firstFeature.geometry.coordinates.forEach(
+              (element) => {
+                try {
+                  const feature2 = this.turfHelper.getMultiPolygon([element]);
+                  polyIntersection = this.geometryManager.checkPolygonIntersection(
+                    feature2,
+                    latlngs
+                  );
+                  if (polyIntersection) {
+                    intersectingFeatureGroups.push(featureGroup);
+                    polygonFeature.push(feature2);
+                  }
+                } catch (error) {
                 }
-              } catch (error) {
               }
-            });
+            );
           } else {
             try {
               const feature2 = this.turfHelper.getTurfPolygon(firstFeature);
@@ -20279,12 +20580,31 @@ class PolygonMutationManager {
       };
     }
   }
+  /**
+   * Create a polygon from GeoJSON feature
+   */
+  isPositionArrayofArrays(arr) {
+    if (!Array.isArray(arr) || arr.length === 0) return false;
+    const first = arr[0];
+    if (!Array.isArray(first) || first.length === 0) return false;
+    const second = first[0];
+    if (!Array.isArray(second) || second.length === 0) return false;
+    const leaf = second[0];
+    return this.isPosition(leaf);
+  }
+  isPosition(val) {
+    return Array.isArray(val) && val.length >= 2 && val.every((n) => typeof n === "number");
+  }
   /**
    * Create a polygon from GeoJSON feature
    */
   getPolygon(latlngs) {
     const polygon2 = L.GeoJSON.geometryToLayer(latlngs);
-    polygon2.setStyle(this.config.polygonOptions);
+    polygon2.setStyle({
+      ...this.config.polygonOptions,
+      color: this.config.colors.polygon.border,
+      fillColor: this.config.colors.polygon.fill
+    });
     polygon2._polydrawUniqueId = L.Util.stamp(polygon2) + "_" + Date.now();
     delete polygon2._polydrawDragData;
     delete polygon2._polydrawOriginalLatLngs;
@@ -20482,9 +20802,9 @@ class PolygonMutationManager {
   ensureMarkerSeparation(polygonLength, markers2) {
     var _a2, _b2, _c;
     return {
-      menu: ((_a2 = markers2.menu) == null ? void 0 : _a2.index) || 0,
-      delete: ((_b2 = markers2.delete) == null ? void 0 : _b2.index) || 1,
-      info: ((_c = markers2.info) == null ? void 0 : _c.index) || 2
+      menu: ((_a2 = markers2.menu) == null ? void 0 : _a2.index) ?? 0,
+      delete: ((_b2 = markers2.delete) == null ? void 0 : _b2.index) ?? 1,
+      info: ((_c = markers2.info) == null ? void 0 : _c.index) ?? 2
     };
   }
   findAlternativeMarkerPosition(polygonLength, originalIndex, usedIndices) {
@@ -20592,9 +20912,23 @@ class PolygonMutationManager {
     }
   }
 }
+function injectDynamicStyles(config) {
+  const style = document.createElement("style");
+  style.innerHTML = `
+    .leaflet-control a { background-color: ${config.colors.styles.controlButton.backgroundColor}; color: ${config.colors.styles.controlButton.color}; display: flex; align-items: center; justify-content: center; }
+    .leaflet-control a:hover { background-color: ${config.colors.styles.controlButtonHover.backgroundColor}; }
+    .leaflet-control a.active { background-color: ${config.colors.styles.controlButtonActive.backgroundColor}; color: ${config.colors.styles.controlButtonActive.color}; }
+    .polydraw-indicator-active { background-color: ${config.colors.styles.indicatorActive.backgroundColor} !important; }
+    .crosshair-cursor-enabled { cursor: crosshair !important; }
+    .crosshair-cursor-enabled * { cursor: crosshair !important; }
+    .leaflet-polydraw-p2p-marker { background-color: ${config.colors.styles.p2pMarker.backgroundColor}; border: 2px solid ${config.colors.styles.p2pMarker.borderColor}; border-radius: 50%; box-sizing: border-box; }
+    .leaflet-polydraw-p2p-first-marker { position: relative; }
+    .leaflet-polydraw-p2p-first-marker:hover { transform: scale(1.5); transition: all 0.2s ease; }
+  `;
+  document.head.appendChild(style);
+}
 class Polydraw extends L.Control {
   constructor(options) {
-    console.log("constructor");
     super(options);
     __publicField(this, "map");
     __publicField(this, "tracer", {});
@@ -20617,139 +20951,38 @@ class Polydraw extends L.Control {
     __publicField(this, "_boundTouchEnd");
     __publicField(this, "_boundTouchStart");
     /**
-     * Handle marker hover when modifier key is held - event handler version
+     * Updates map interactions based on the current drawing mode.
      */
-    __publicField(this, "onMarkerHoverForEdgeDeletionEvent", (e) => {
-      console.log("onMarkerHoverForEdgeDeletionEvent");
-      if (!this.isModifierKeyHeld) return;
-      const element = e.target;
-      if (element) {
-        element.style.backgroundColor = "#D9460F";
-        element.style.borderColor = "#D9460F";
-        element.classList.add("edge-deletion-hover");
+    __publicField(this, "_handleActivateToggle", () => {
+      const container = this.getContainer();
+      if (!container) return;
+      const activate = container.querySelector(".icon-activate");
+      if (L.DomUtil.hasClass(activate, "active")) {
+        L.DomUtil.removeClass(activate, "active");
+        if (this.subContainer) {
+          this.subContainer.style.maxHeight = "0px";
+        }
+      } else {
+        L.DomUtil.addClass(activate, "active");
+        if (this.subContainer) {
+          this.subContainer.style.maxHeight = "250px";
+        }
       }
+      this.updateActivateButtonIndicator();
     });
-    /**
-     * 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 = "";
-        element.style.borderColor = "";
-        element.classList.remove("edge-deletion-hover");
+    __publicField(this, "_handleDrawClick", (e) => {
+      if (e) {
+        e.preventDefault();
+        e.stopPropagation();
       }
-    });
-    this.config = defaultConfig;
-    if (options == null ? void 0 : options.configPath) {
-      this.loadExternalConfig(options.configPath, options == null ? void 0 : options.config);
-    } else {
-      this.config = { ...defaultConfig, ...(options == null ? void 0 : options.config) || {} };
-      this.initializeComponents();
-    }
-  }
-  async loadExternalConfig(configPath, inlineConfig) {
-    try {
-      const response = await fetch(configPath);
-      if (!response.ok) {
-        throw new Error(
-          `Failed to load config from ${configPath}: ${response.status} ${response.statusText}`
-        );
-      }
-      const externalConfig = await response.json();
-      this.config = {
-        ...defaultConfig,
-        ...externalConfig,
-        ...inlineConfig || {}
-      };
-      this.initializeComponents();
-    } catch (error) {
-      console.warn(
-        "Failed to load external config, falling back to default + inline config:",
-        error
-      );
-      this.config = { ...defaultConfig, ...inlineConfig || {} };
-      this.initializeComponents();
-    }
-  }
-  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.eventManager);
-    this.polygonInformation.onPolygonInfoUpdated((_k) => {
-      this.updateActivateButtonIndicator();
-    });
-    this._boundKeyDownHandler = this.handleKeyDown.bind(this);
-    this.polygonMutationManager = null;
-    this.polygonDrawManager = null;
-  }
-  onAdd(_map) {
-    _map._onResize = () => {
-    };
-    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 = `
-      .leaflet-control a { background-color: #fff; color: #000; display: flex; align-items: center; justify-content: center; }
-      .leaflet-control a:hover { background-color: #f4f4f4; }
-      .leaflet-control a.active { background-color:rgb(128, 218, 255); color: #fff; }
-      .polydraw-indicator-active { background-color: #ffcc00 !important; }
-      .crosshair-cursor-enabled { cursor: crosshair !important; }
-      .crosshair-cursor-enabled * { cursor: crosshair !important; }
-      .leaflet-polydraw-p2p-marker { background-color: #fff; border: 2px solid #50622b; border-radius: 50%; box-sizing: border-box; }
-      .leaflet-polydraw-p2p-first-marker { position: relative; }
-      .leaflet-polydraw-p2p-first-marker:hover { transform: scale(1.5); transition: all 0.2s ease; }
-    `;
-    document.head.appendChild(style);
-    this.setupKeyboardHandlers();
-    const container = L.DomUtil.create("div", "leaflet-control leaflet-bar");
-    L.DomEvent.disableClickPropagation(container);
-    L.DomEvent.on(container, "mousedown", L.DomEvent.stopPropagation);
-    L.DomEvent.on(container, "touchstart", L.DomEvent.stopPropagation);
-    L.DomEvent.on(container, "click", L.DomEvent.stopPropagation);
-    container.style.display = "flex";
-    container.style.flexDirection = "column-reverse";
-    this.subContainer = L.DomUtil.create("div", "sub-buttons", container);
-    this.subContainer.style.maxHeight = "0px";
-    this.subContainer.style.overflow = "hidden";
-    this.subContainer.style.transition = "max-height 0.3s ease";
-    const onActivateToggle = () => {
-      const activate = container.querySelector(".icon-activate");
-      if (L.DomUtil.hasClass(activate, "active")) {
-        L.DomUtil.removeClass(activate, "active");
-        if (this.subContainer) {
-          this.subContainer.style.maxHeight = "0px";
-        }
-      } else {
-        L.DomUtil.addClass(activate, "active");
-        if (this.subContainer) {
-          this.subContainer.style.maxHeight = "250px";
-        }
-      }
-      this.updateActivateButtonIndicator();
-    };
-    const onDrawClick = (e) => {
-      console.log("onDrawClick");
-      if (e) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-      if (this.modeManager.getCurrentMode() === DrawMode.Add) {
-        this.setDrawMode(DrawMode.Off);
-        return;
+      if (this.modeManager.getCurrentMode() === DrawMode.Add) {
+        this.setDrawMode(DrawMode.Off);
+        return;
       }
       this.setDrawMode(DrawMode.Add);
       this.polygonInformation.saveCurrentState();
-    };
-    const onSubtractClick = (e) => {
-      console.log("onSubtractClick");
+    });
+    __publicField(this, "_handleSubtractClick", (e) => {
       if (e) {
         e.preventDefault();
         e.stopPropagation();
@@ -20760,8 +20993,8 @@ class Polydraw extends L.Control {
       }
       this.setDrawMode(DrawMode.Subtract);
       this.polygonInformation.saveCurrentState();
-    };
-    const onEraseClick = (e) => {
+    });
+    __publicField(this, "_handleEraseClick", (e) => {
       this.map.closePopup();
       if (e) {
         e.preventDefault();
@@ -20771,9 +21004,8 @@ class Polydraw extends L.Control {
         return;
       }
       this.removeAllFeatureGroups();
-    };
-    const onPointToPointClick = (e) => {
-      console.log("onPointToPointClick");
+    });
+    __publicField(this, "_handlePointToPointClick", (e) => {
       if (e) {
         e.preventDefault();
         e.stopPropagation();
@@ -20784,16 +21016,213 @@ class Polydraw extends L.Control {
       }
       this.setDrawMode(DrawMode.PointToPoint);
       this.polygonInformation.saveCurrentState();
+    });
+    /**
+     * Handle marker hover when modifier key is held - event handler version
+     */
+    __publicField(this, "onMarkerHoverForEdgeDeletionEvent", (e) => {
+      if (!this.isModifierKeyHeld) return;
+      const element = e.target;
+      if (element) {
+        element.style.backgroundColor = this.config.colors.edgeDeletion.hover;
+        element.style.borderColor = this.config.colors.edgeDeletion.hover;
+        element.classList.add("edge-deletion-hover");
+      }
+    });
+    /**
+     * Handle marker leave when modifier key is held - event handler version
+     */
+    __publicField(this, "onMarkerLeaveForEdgeDeletionEvent", (e) => {
+      const element = e.target;
+      if (element) {
+        element.style.backgroundColor = "";
+        element.style.borderColor = "";
+        element.classList.remove("edge-deletion-hover");
+      }
+    });
+    this.config = defaultConfig;
+    if (options == null ? void 0 : options.configPath) {
+      this.loadExternalConfig(options.configPath, options == null ? void 0 : options.config);
+    } else {
+      this.config = { ...defaultConfig, ...(options == null ? void 0 : options.config) || {} };
+      this.initializeComponents();
+    }
+  }
+  /**
+   * Method called when the control is added to the map.
+   * It initializes the control, creates the UI, and sets up event listeners.
+   * @param _map - The map instance.
+   * @returns The control's container element.
+   */
+  onAdd(_map) {
+    const extendedMap = _map;
+    const browser = L.Browser;
+    extendedMap._onResize = () => {
     };
+    if (browser.touch && browser.mobile) {
+      extendedMap.tap = false;
+    }
+    this.map = _map;
+    this.setupKeyboardHandlers();
+    const container = L.DomUtil.create("div", "leaflet-control leaflet-bar");
+    this.initializeUI(container);
+    this.createTracer();
+    this.initializeManagers();
+    this.setupEventListeners();
+    return container;
+  }
+  /**
+   * Method called when the control is removed from the map.
+   * It handles the cleanup of layers, events, and handlers.
+   * @param _map - The map instance, unused but required by the L.Control interface.
+   */
+  onRemove(_map) {
+    this.removeKeyboardHandlers();
+    if (this.tracer) {
+      this.map.removeLayer(this.tracer);
+    }
+    this.removeAllFeatureGroups();
+  }
+  /**
+   * Adds the control to the given map.
+   * @param map - The map instance.
+   * @returns The current instance of the control.
+   */
+  addTo(map) {
+    super.addTo(map);
+    return this;
+  }
+  /**
+   * Returns the array of feature groups currently managed by the control.
+   * @returns An array of L.FeatureGroup objects.
+   */
+  getFeatureGroups() {
+    return this.arrayOfFeatureGroups;
+  }
+  /**
+   * Adds a predefined polygon to the map.
+   * @param geographicBorders - An array of LatLng arrays representing the polygon's coordinates.
+   * @param options - Optional parameters, including visual optimization level.
+   */
+  async addPredefinedPolygon(geographicBorders, options) {
+    if (!geographicBorders || geographicBorders.length === 0) {
+      throw new Error("Cannot add empty polygon array");
+    }
+    if (!this.map) {
+      throw new Error("Map not initialized");
+    }
+    if (!this.polygonMutationManager) {
+      throw new Error("PolygonMutationManager not initialized");
+    }
+    const visualOptimizationLevel = (options == null ? void 0 : options.visualOptimizationLevel) ?? 0;
+    for (const [groupIndex, group] of geographicBorders.entries()) {
+      if (!group || !group[0] || group[0].length < 4) {
+        throw new Error(
+          `Invalid polygon data at index ${groupIndex}: A polygon must have at least 3 unique vertices.`
+        );
+      }
+      try {
+        const coords = group.map((ring) => ring.map((latlng) => [latlng.lng, latlng.lat]));
+        const polygon2 = this.turfHelper.getMultiPolygon([coords]);
+        const result = await this.polygonMutationManager.addPolygon(polygon2, {
+          simplify: false,
+          noMerge: false,
+          visualOptimizationLevel
+        });
+        if (!result.success) {
+          console.error("Error adding polygon via manager:", result.error);
+          throw new Error(result.error || "Failed to add polygon");
+        }
+        this.polygonInformation.createPolygonInformationStorage(this.arrayOfFeatureGroups);
+      } catch (error) {
+        console.error("Error adding auto polygon:", error);
+        throw error;
+      }
+    }
+  }
+  /**
+   * Sets the current drawing mode.
+   * @param mode - The drawing mode to set.
+   */
+  setDrawMode(mode) {
+    const previousMode = this.drawMode;
+    this._updateDrawModeState(mode);
+    if (previousMode === DrawMode.PointToPoint && mode !== DrawMode.PointToPoint) {
+      this.polygonDrawManager.clearP2pMarkers();
+      this.stopDraw();
+    } else if (mode === DrawMode.Off) {
+      this.stopDraw();
+    } else if (mode !== DrawMode.PointToPoint) {
+      this.stopDraw();
+    }
+    if (this.map) {
+      this._updateUIAfterDrawModeChange(mode);
+      this._updateMapInteractions();
+    }
+  }
+  /**
+   * Returns the current drawing mode.
+   * @returns The current DrawMode.
+   */
+  getDrawMode() {
+    return this.modeManager.getCurrentMode();
+  }
+  /**
+   * Registers an event listener for a given event type.
+   * @param event - The event type to listen for.
+   * @param callback - The callback function to execute when the event is triggered.
+   */
+  on(event, callback) {
+    this.eventManager.on(event, callback);
+  }
+  /**
+   * Unregisters an event listener for a given event type.
+   * @param event - The event type to stop listening for.
+   * @param callback - The callback function to remove.
+   */
+  off(event, callback) {
+    this.eventManager.off(event, callback);
+  }
+  /**
+   * Removes all feature groups from the map and clears the internal storage.
+   */
+  removeAllFeatureGroups() {
+    this.arrayOfFeatureGroups.forEach((featureGroups) => {
+      try {
+        this.map.removeLayer(featureGroups);
+      } catch (error) {
+      }
+    });
+    this.arrayOfFeatureGroups.length = 0;
+    this.polygonInformation.deletePolygonInformationStorage();
+    this.polygonInformation.updatePolygons();
+    this.updateActivateButtonIndicator();
+  }
+  /**
+   * Initializes the user interface, creates DOM elements, sets up buttons, and injects styles.
+   * @param container - The main control container element.
+   */
+  initializeUI(container) {
+    injectDynamicStyles(this.config);
+    L.DomEvent.disableClickPropagation(container);
+    L.DomEvent.on(container, "mousedown", L.DomEvent.stopPropagation);
+    L.DomEvent.on(container, "touchstart", L.DomEvent.stopPropagation);
+    L.DomEvent.on(container, "click", L.DomEvent.stopPropagation);
+    container.style.display = "flex";
+    container.style.flexDirection = "column-reverse";
+    this.subContainer = L.DomUtil.create("div", "sub-buttons", container);
+    this.subContainer.style.maxHeight = "0px";
+    this.subContainer.style.overflow = "hidden";
+    this.subContainer.style.transition = "max-height 0.3s ease";
     createButtons(
       container,
       this.subContainer,
       this.config,
-      onActivateToggle,
-      onDrawClick,
-      onSubtractClick,
-      onEraseClick,
-      onPointToPointClick
+      this._handleActivateToggle,
+      this._handleDrawClick,
+      this._handleSubtractClick,
+      this._handleEraseClick,
+      this._handlePointToPointClick
     );
     const uiUpdateListener = (mode) => {
       const drawButton = container.querySelector(".icon-draw");
@@ -20802,30 +21231,12 @@ class Polydraw extends L.Control {
       if (subtractButton) subtractButton.classList.toggle("active", mode === DrawMode.Subtract);
     };
     this.drawModeListeners.push(uiUpdateListener);
-    this.tracer = L.polyline([], this.config.polyLineOptions);
-    try {
-      this.tracer.addTo(this.map);
-    } catch (error) {
-    }
-    this.polygonDrawManager = new PolygonDrawManager({
-      turfHelper: this.turfHelper,
-      map: this.map,
-      config: this.config,
-      modeManager: this.modeManager,
-      eventManager: this.eventManager,
-      tracer: this.tracer
-    });
-    this.polygonMutationManager = new PolygonMutationManager({
-      turfHelper: this.turfHelper,
-      polygonInformation: this.polygonInformation,
-      map: this.map,
-      config: this.config,
-      modeManager: this.modeManager,
-      eventManager: this.eventManager,
-      getFeatureGroups: () => this.arrayOfFeatureGroups
-    });
+  }
+  /**
+   * Attaches listeners to polygonMutationManager and eventManager.
+   */
+  setupEventListeners() {
     this.polygonMutationManager.on("polygonOperationComplete", (data) => {
-      console.log("polygonOperationComplete");
       this.updateActivateButtonIndicator();
       this.modeManager.updateStateForMode(DrawMode.Off);
       this.drawMode = DrawMode.Off;
@@ -20866,130 +21277,148 @@ class Polydraw extends L.Control {
       this.stopDraw();
       this.setDrawMode(DrawMode.Off);
     });
-    return container;
   }
-  addTo(map) {
-    console.log("addTo");
-    super.addTo(map);
-    return this;
-  }
-  getFeatureGroups() {
-    return this.arrayOfFeatureGroups;
-  }
-  onRemove(_map) {
-    console.log("onRemove");
-    this.removeKeyboardHandlers();
-    if (this.tracer) {
-      this.map.removeLayer(this.tracer);
+  /**
+   * Initializes and adds the tracer polyline to the map.
+   */
+  createTracer() {
+    this.tracer = L.polyline([], {
+      ...this.config.polyLineOptions,
+      color: this.config.colors.polyline
+    });
+    try {
+      this.tracer.addTo(this.map);
+    } catch (error) {
     }
-    this.removeAllFeatureGroups();
   }
-  async addPredefinedPolygon(geographicBorders, options) {
-    console.log("addPredefinedPolygon");
-    if (!geographicBorders || geographicBorders.length === 0) {
-      throw new Error("Cannot add empty polygon array");
-    }
-    if (!this.map) {
-      throw new Error("Map not initialized");
-    }
-    if (!this.polygonMutationManager) {
-      throw new Error("PolygonMutationManager not initialized");
-    }
-    const visualOptimizationLevel = (options == null ? void 0 : options.visualOptimizationLevel) ?? 0;
-    for (const [groupIndex, group] of geographicBorders.entries()) {
-      if (!group || !group[0] || group[0].length < 4) {
-        throw new Error(
-          `Invalid polygon data at index ${groupIndex}: A polygon must have at least 3 unique vertices.`
-        );
-      }
-      try {
-        const coords = group.map((ring) => ring.map((latlng) => [latlng.lng, latlng.lat]));
-        const polygon2 = this.turfHelper.getMultiPolygon([coords]);
-        const result = await this.polygonMutationManager.addPolygon(polygon2, {
-          simplify: false,
-          noMerge: false,
-          visualOptimizationLevel
-        });
-        if (!result.success) {
-          console.error("Error adding polygon via manager:", result.error);
-          throw new Error(result.error || "Failed to add polygon");
-        }
-        this.polygonInformation.createPolygonInformationStorage(this.arrayOfFeatureGroups);
-      } catch (error) {
-        console.error("Error adding auto polygon:", error);
-        throw error;
+  /**
+   * Sets up PolygonDrawManager and PolygonMutationManager with the map.
+   */
+  initializeManagers() {
+    this.polygonDrawManager = new PolygonDrawManager({
+      turfHelper: this.turfHelper,
+      map: this.map,
+      config: this.config,
+      modeManager: this.modeManager,
+      eventManager: this.eventManager,
+      tracer: this.tracer
+    });
+    this.polygonMutationManager = new PolygonMutationManager({
+      turfHelper: this.turfHelper,
+      polygonInformation: this.polygonInformation,
+      map: this.map,
+      config: this.config,
+      modeManager: this.modeManager,
+      eventManager: this.eventManager,
+      getFeatureGroups: () => this.arrayOfFeatureGroups
+    });
+  }
+  /**
+   * Loads an external configuration file and merges it with the default and inline configs.
+   * @param configPath - The path to the external configuration file.
+   * @param inlineConfig - An optional inline configuration object.
+   */
+  async loadExternalConfig(configPath, inlineConfig) {
+    try {
+      const response = await fetch(configPath);
+      if (!response.ok) {
+        throw new Error(
+          `Failed to load config from ${configPath}: ${response.status} ${response.statusText}`
+        );
       }
+      const externalConfig = await response.json();
+      this.config = {
+        ...defaultConfig,
+        ...externalConfig,
+        ...inlineConfig || {}
+      };
+      this.initializeComponents();
+    } catch (error) {
+      console.warn(
+        "Failed to load external config, falling back to default + inline config:",
+        error
+      );
+      this.config = { ...defaultConfig, ...inlineConfig || {} };
+      this.initializeComponents();
     }
   }
-  setDrawMode(mode) {
-    console.log("setDrawMode");
-    const previousMode = this.drawMode;
+  /**
+   * Initializes the core components of the Polydraw control.
+   */
+  /**
+   * Updates the state of the drawing mode.
+   * @param mode - The new drawing mode.
+   */
+  _updateDrawModeState(mode) {
     this.drawMode = mode;
     this.modeManager.updateStateForMode(mode);
     this.emitDrawModeChanged();
     this.updateMarkerDraggableState();
-    if (previousMode === DrawMode.PointToPoint && mode !== DrawMode.PointToPoint) {
-      this.polygonDrawManager.clearP2pMarkers();
-      this.stopDraw();
-    } else if (mode === DrawMode.Off) {
-      this.stopDraw();
-    } else if (mode !== DrawMode.PointToPoint) {
-      this.stopDraw();
+  }
+  /**
+   * Updates the UI after a change in the drawing mode.
+   * @param mode - The new drawing mode.
+   */
+  _updateUIAfterDrawModeChange(mode) {
+    const shouldShowCrosshair = this.modeManager.shouldShowCrosshairCursor();
+    if (shouldShowCrosshair) {
+      L.DomUtil.addClass(this.map.getContainer(), "crosshair-cursor-enabled");
+    } else {
+      L.DomUtil.removeClass(this.map.getContainer(), "crosshair-cursor-enabled");
     }
-    if (this.map) {
-      const shouldShowCrosshair = this.modeManager.shouldShowCrosshairCursor();
-      const mapDragEnabled = this.modeManager.canPerformAction("mapDrag");
-      const mapZoomEnabled = this.modeManager.canPerformAction("mapZoom");
-      const mapDoubleClickEnabled = this.modeManager.canPerformAction("mapDoubleClickZoom");
-      if (shouldShowCrosshair) {
-        L.DomUtil.addClass(this.map.getContainer(), "crosshair-cursor-enabled");
-      } else {
-        L.DomUtil.removeClass(this.map.getContainer(), "crosshair-cursor-enabled");
-      }
-      this.events(mode !== DrawMode.Off);
-      try {
-        switch (mode) {
-          case DrawMode.Off:
-            this.tracer.setStyle({ color: "" });
-            break;
-          case DrawMode.Add:
-            this.tracer.setStyle({
-              color: defaultConfig.polyLineOptions.color,
-              dashArray: null
-              // Reset to solid line
-            });
-            break;
-          case DrawMode.Subtract:
-            this.tracer.setStyle({
-              color: "#D9460F",
-              dashArray: null
-              // Reset to solid line
-            });
-            break;
-          case DrawMode.PointToPoint:
-            this.tracer.setStyle({
-              color: defaultConfig.polyLineOptions.color,
-              dashArray: "5, 5"
-            });
-            break;
-        }
-      } catch (error) {
+    try {
+      switch (mode) {
+        case DrawMode.Off:
+          this.tracer.setStyle({ color: "" });
+          break;
+        case DrawMode.Add:
+          this.tracer.setStyle({
+            color: this.config.colors.polyline,
+            dashArray: null
+            // Reset to solid line
+          });
+          break;
+        case DrawMode.Subtract:
+          this.tracer.setStyle({
+            color: this.config.colors.subtractLine,
+            dashArray: null
+            // Reset to solid line
+          });
+          break;
+        case DrawMode.PointToPoint:
+          this.tracer.setStyle({
+            color: this.config.colors.polyline,
+            dashArray: "5, 5"
+          });
+          break;
       }
-      this.setLeafletMapEvents(mapDragEnabled, mapDoubleClickEnabled, mapZoomEnabled);
+    } catch (error) {
     }
   }
-  getDrawMode() {
-    console.log("getDrawMode");
-    return this.modeManager.getCurrentMode();
-  }
-  on(event, callback) {
-    this.eventManager.on(event, callback);
+  _updateMapInteractions() {
+    const mapDragEnabled = this.modeManager.canPerformAction("mapDrag");
+    const mapZoomEnabled = this.modeManager.canPerformAction("mapZoom");
+    const mapDoubleClickEnabled = this.modeManager.canPerformAction("mapDoubleClickZoom");
+    this.events(this.drawMode !== DrawMode.Off);
+    this.setLeafletMapEvents(mapDragEnabled, mapDoubleClickEnabled, mapZoomEnabled);
   }
-  off(event, callback) {
-    this.eventManager.off(event, callback);
+  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.eventManager);
+    this.polygonInformation.onPolygonInfoUpdated((_k) => {
+      this.updateActivateButtonIndicator();
+    });
+    this._boundKeyDownHandler = this.handleKeyDown.bind(this);
+    this.polygonMutationManager = null;
+    this.polygonDrawManager = null;
   }
+  /**
+   * Emits an event to notify listeners that the drawing mode has changed.
+   */
   emitDrawModeChanged() {
-    console.log("emitDrawModeChanged");
     this.eventManager.emit("polydraw:mode:change", {
       mode: this.modeManager.getCurrentMode()
     });
@@ -21001,7 +21430,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) => {
@@ -21022,36 +21450,35 @@ class Polydraw extends L.Control {
       });
     });
   }
-  removeAllFeatureGroups() {
-    console.log("removeAllFeatureGroups");
-    this.arrayOfFeatureGroups.forEach((featureGroups) => {
-      try {
-        this.map.removeLayer(featureGroups);
-      } catch (error) {
-      }
-    });
-    this.arrayOfFeatureGroups.length = 0;
-    this.polygonInformation.deletePolygonInformationStorage();
-    this.polygonInformation.updatePolygons();
-    this.updateActivateButtonIndicator();
-  }
+  /**
+   * Stops the current drawing operation and resets the tracer.
+   */
   stopDraw() {
-    console.log("stopDraw");
     this.resetTracker();
     this.drawStartedEvents(false);
   }
+  /**
+   * Enables or disables Leaflet's default map interactions.
+   * @param enableDragging - Whether to enable map dragging.
+   * @param enableDoubleClickZoom - Whether to enable double-click zoom.
+   * @param enableScrollWheelZoom - Whether to enable scroll wheel zoom.
+   */
   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();
   }
+  /**
+   * Resets the tracer polyline by clearing its LatLngs.
+   */
   resetTracker() {
-    console.log("resetTracker");
     this.tracer.setLatLngs([]);
   }
+  /**
+   * Attaches or detaches the mouse move and mouse up event listeners for drawing.
+   * @param onoff - A boolean indicating whether to attach or detach the events.
+   */
   drawStartedEvents(onoff) {
-    console.log("drawStartedEvents");
     const onoroff = onoff ? "on" : "off";
     this.map[onoroff]("mousemove", this.mouseMove, this);
     this.map[onoroff]("mouseup", this.mouseUpLeave, this);
@@ -21069,8 +21496,58 @@ class Polydraw extends L.Control {
       }
     }
   }
+  /**
+   * Attaches or detaches the main drawing event listeners.
+   * @param onoff - A boolean indicating whether to attach or detach the events.
+   */
+  events(onoff) {
+    const onoroff = onoff ? "on" : "off";
+    this.map[onoroff]("mousedown", this.mouseDown, this);
+    this.map[onoroff]("dblclick", this.handleDoubleClick, this);
+    if (onoff) {
+      this._boundTouchStart = (e) => this.mouseDown(e);
+      this.map.getContainer().addEventListener("touchstart", this._boundTouchStart, { passive: false });
+    } else {
+      if (this._boundTouchStart) {
+        this.map.getContainer().removeEventListener("touchstart", this._boundTouchStart);
+      }
+    }
+  }
+  /**
+   * Handles the mouse down event to start a drawing operation.
+   * @param event - The mouse or touch event.
+   */
+  mouseDown(event) {
+    if ("cancelable" in event && event.cancelable) {
+      event.preventDefault();
+    }
+    if (this.modeManager.isInOffMode()) {
+      return;
+    }
+    let clickLatLng;
+    if ("latlng" in event && event.latlng) {
+      clickLatLng = event.latlng;
+    } else if ("touches" in event && event.touches && event.touches.length > 0) {
+      clickLatLng = this.map.containerPointToLatLng([
+        event.touches[0].clientX,
+        event.touches[0].clientY
+      ]);
+    }
+    if (!clickLatLng) {
+      return;
+    }
+    if (this.modeManager.getCurrentMode() === DrawMode.PointToPoint) {
+      this.polygonDrawManager.handlePointToPointClick(clickLatLng);
+      return;
+    }
+    this.tracer.setLatLngs([clickLatLng]);
+    this.startDraw();
+  }
+  /**
+   * Handles the mouse move event to draw the tracer polyline.
+   * @param event - The mouse or touch event.
+   */
   mouseMove(event) {
-    console.log("mouseMove");
     if ("cancelable" in event && event.cancelable) {
       event.preventDefault();
     }
@@ -21084,38 +21561,14 @@ class Polydraw extends L.Control {
       this.tracer.addLatLng(latlng);
     }
   }
-  async handleFreehandDrawCompletion(geoPos) {
-    try {
-      switch (this.modeManager.getCurrentMode()) {
-        case DrawMode.Add: {
-          const result = await this.polygonMutationManager.addPolygon(geoPos, {
-            simplify: true,
-            noMerge: false
-          });
-          if (!result.success) {
-            console.error("Error adding polygon via manager:", result.error);
-          }
-          break;
-        }
-        case DrawMode.Subtract: {
-          const subtractResult = await this.polygonMutationManager.subtractPolygon(geoPos);
-          if (!subtractResult.success) {
-            console.error("Error subtracting polygon via manager:", subtractResult.error);
-          }
-          break;
-        }
-        default:
-          break;
-      }
-    } catch (error) {
-      console.error("Error in mouseUpLeave polygon operation:", error);
-    }
-  }
+  /**
+   * Handles the mouse up event to complete a drawing operation.
+   * @param event - The mouse or touch event.
+   */
   async mouseUpLeave(event) {
     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) {
@@ -21161,64 +21614,63 @@ 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);
-    if (onoff) {
-      this._boundTouchStart = (e) => this.mouseDown(e);
-      this.map.getContainer().addEventListener("touchstart", this._boundTouchStart, { passive: false });
-    } else {
-      if (this._boundTouchStart) {
-        this.map.getContainer().removeEventListener("touchstart", this._boundTouchStart);
+  /**
+   * Handles the completion of a freehand drawing operation.
+   * @param geoPos - The GeoJSON feature representing the drawn polygon.
+   */
+  async handleFreehandDrawCompletion(geoPos) {
+    try {
+      switch (this.modeManager.getCurrentMode()) {
+        case DrawMode.Add: {
+          const result = await this.polygonMutationManager.addPolygon(geoPos, {
+            simplify: true,
+            noMerge: false
+          });
+          if (!result.success) {
+            console.error("Error adding polygon via manager:", result.error);
+          }
+          break;
+        }
+        case DrawMode.Subtract: {
+          const subtractResult = await this.polygonMutationManager.subtractPolygon(geoPos);
+          if (!subtractResult.success) {
+            console.error("Error subtracting polygon via manager:", subtractResult.error);
+          }
+          break;
+        }
+        default:
+          break;
       }
+    } catch (error) {
+      console.error("Error in mouseUpLeave polygon operation:", error);
     }
   }
-  mouseDown(event) {
-    if ("cancelable" in event && event.cancelable) {
-      event.preventDefault();
-    }
-    console.log("mouseDown");
-    if (this.modeManager.isInOffMode()) {
-      return;
-    }
-    let clickLatLng;
-    if ("latlng" in event && event.latlng) {
-      clickLatLng = event.latlng;
-    } else if ("touches" in event && event.touches && event.touches.length > 0) {
-      clickLatLng = this.map.containerPointToLatLng([
-        event.touches[0].clientX,
-        event.touches[0].clientY
-      ]);
-    }
-    if (!clickLatLng) {
-      return;
-    }
-    if (this.modeManager.getCurrentMode() === DrawMode.PointToPoint) {
-      this.polygonDrawManager.handlePointToPointClick(clickLatLng);
-      return;
-    }
-    this.tracer.setLatLngs([clickLatLng]);
-    this.startDraw();
-  }
+  /**
+   * Starts a drawing operation by attaching the necessary event listeners.
+   */
   startDraw() {
-    console.log("startDraw");
     this.drawStartedEvents(true);
   }
+  /**
+   * Sets up the keyboard event handlers for the document.
+   */
   setupKeyboardHandlers() {
-    console.log("setupKeyboardHandlers");
     this._boundKeyUpHandler = this.handleKeyUp.bind(this);
     document.addEventListener("keydown", this._boundKeyDownHandler);
     document.addEventListener("keyup", this._boundKeyUpHandler);
   }
+  /**
+   * Removes the keyboard event handlers from the document.
+   */
   removeKeyboardHandlers() {
-    console.log("removeKeyboardHandlers");
     document.removeEventListener("keydown", this._boundKeyDownHandler);
     document.removeEventListener("keyup", this._boundKeyUpHandler);
   }
+  /**
+   * Handles the key down event for keyboard shortcuts.
+   * @param e - The keyboard event.
+   */
   handleKeyDown(e) {
-    console.log("handleKeyDown");
     if (e.key === "Escape") {
       if (this.modeManager.getCurrentMode() === DrawMode.PointToPoint) {
         this.polygonDrawManager.cancelPointToPointDrawing();
@@ -21231,8 +21683,11 @@ class Polydraw extends L.Control {
       this.updateAllMarkersForEdgeDeletion(true);
     }
   }
+  /**
+   * Handles the key up event for keyboard shortcuts.
+   * @param e - The keyboard event.
+   */
   handleKeyUp(e) {
-    console.log("handleKeyUp");
     const isModifierPressed = this.isModifierKeyPressed(e);
     if (!isModifierPressed && this.isModifierKeyHeld) {
       this.isModifierKeyHeld = false;
@@ -21244,7 +21699,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) {
@@ -21257,7 +21711,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) {
@@ -21270,8 +21723,11 @@ class Polydraw extends L.Control {
       element.style.borderColor = "";
     }
   }
+  /**
+   * Handles the double-click event for point-to-point drawing.
+   * @param e - The mouse event.
+   */
   handleDoubleClick(e) {
-    console.log("handleDoubleClick");
     if (this.modeManager.getCurrentMode() !== DrawMode.PointToPoint) {
       return;
     }
@@ -21281,7 +21737,6 @@ class Polydraw extends L.Control {
    * Detect if modifier key is pressed (Ctrl on Windows/Linux, Cmd on Mac)
    */
   isModifierKeyPressed(event) {
-    console.log("isModifierKeyPressed");
     const userAgent = navigator.userAgent.toLowerCase();
     const isMac = userAgent.includes("mac");
     if (isMac) {
@@ -21290,6 +21745,9 @@ class Polydraw extends L.Control {
       return event.ctrlKey;
     }
   }
+  /**
+   * Updates the visual indicator on the activate button to show if there are active polygons.
+   */
   updateActivateButtonIndicator() {
     if (typeof this.getContainer !== "function") {
       return;