leaflet-polydraw 2.1.0 → 2.1.1

package/dist/polydraw.es.js

@@ -9726,6 +9726,14 @@ const getGlobalLeaflet = () => {
   if (typeof globalThis === "undefined") return void 0;
   return globalThis.L;
 };
+const getModuleLeaflet = () => ({
+  version: Reflect.get(L, "version"),
+  marker: Reflect.get(L, "marker"),
+  polyline: Reflect.get(L, "polyline"),
+  polygon: Reflect.get(L, "polygon"),
+  Marker: Reflect.get(L, "Marker"),
+  Polyline: Reflect.get(L, "Polyline")
+});
 class LeafletVersionDetector {
   /**
    * Detects the Leaflet version being used
@@ -9735,11 +9743,7 @@ class LeafletVersionDetector {
     if (this._detectedVersion) {
       return this._detectedVersion;
     }
-    const globalL = getGlobalLeaflet();
-    if (!globalL) {
-      return LeafletVersion.V2;
-    }
-    this._detectedVersion = this.detectVersion(globalL);
+    this._detectedVersion = this.detectVersion(getGlobalLeaflet() ?? getModuleLeaflet());
     return this._detectedVersion;
   }
   /**
@@ -9747,10 +9751,7 @@ class LeafletVersionDetector {
    * @returns The detected Leaflet version
    */
   static detectVersion(globalL) {
-    const resolvedGlobal = globalL ?? getGlobalLeaflet();
-    if (!resolvedGlobal) {
-      return LeafletVersion.V2;
-    }
+    const resolvedGlobal = globalL ?? getGlobalLeaflet() ?? getModuleLeaflet();
     if (resolvedGlobal.version) {
       if (resolvedGlobal.version.startsWith("2.")) {
         return LeafletVersion.V2;
@@ -9797,16 +9798,19 @@ class LeafletVersionDetector {
   static getVersionInfo() {
     const version = this.getVersion();
     const globalL = getGlobalLeaflet();
+    const resolvedLeaflet = globalL ?? getModuleLeaflet();
     return {
       version,
-      leafletVersion: globalL == null ? void 0 : globalL.version,
-      hasFactoryMethods: typeof (globalL == null ? void 0 : globalL.marker) === "function",
-      hasConstructors: !!(globalL == null ? void 0 : globalL.Marker) && typeof globalL.Marker === "function",
+      leafletVersion: resolvedLeaflet.version,
+      hasFactoryMethods: typeof resolvedLeaflet.marker === "function",
+      hasConstructors: !!resolvedLeaflet.Marker && typeof resolvedLeaflet.Marker === "function",
       globalLAvailable: !!globalL
     };
   }
 }
 __publicField(LeafletVersionDetector, "_detectedVersion", null);
+const getLegacyBrowser = () => Reflect.get(L, "Browser") ?? {};
+const getNavigator = () => typeof navigator === "undefined" ? void 0 : navigator;
 class LeafletAdapter {
   constructor() {
     /**
@@ -9828,25 +9832,13 @@ class LeafletAdapter {
         }
       },
       addClass: (el, name) => {
-        if (this.version === LeafletVersion.V1) {
-          L.DomUtil.addClass(el, name);
-        } else {
-          el.classList.add(name);
-        }
+        el.classList.add(name);
       },
       removeClass: (el, name) => {
-        if (this.version === LeafletVersion.V1) {
-          L.DomUtil.removeClass(el, name);
-        } else {
-          el.classList.remove(name);
-        }
+        el.classList.remove(name);
       },
       hasClass: (el, name) => {
-        if (this.version === LeafletVersion.V1) {
-          return L.DomUtil.hasClass(el, name);
-        } else {
-          return el.classList.contains(name);
-        }
+        return el.classList.contains(name);
       },
       setPosition: (el, point2) => {
         L.DomUtil.setPosition(el, point2);
@@ -9868,7 +9860,8 @@ class LeafletAdapter {
         return this;
       },
       stopPropagation: (e) => {
-        L.DomEvent.stopPropagation(e);
+        const stopPropagation = L.DomEvent.stopPropagation;
+        stopPropagation(e);
         return this;
       },
       preventDefault: (e) => {
@@ -9888,12 +9881,8 @@ class LeafletAdapter {
         return this;
       },
       getMousePosition: (e, container) => {
-        if (this.version === LeafletVersion.V1) {
-          return L.DomEvent.getMousePosition(e, container);
-        } else {
-          const domEvent = L.DomEvent;
-          return domEvent.getPointerPosition ? domEvent.getPointerPosition(e, container) : L.DomEvent.getMousePosition(e, container);
-        }
+        const rect = container == null ? void 0 : container.getBoundingClientRect();
+        return new L.Point(e.clientX - ((rect == null ? void 0 : rect.left) ?? 0), e.clientY - ((rect == null ? void 0 : rect.top) ?? 0));
       }
     });
     /**
@@ -9901,18 +9890,10 @@ class LeafletAdapter {
      */
     __publicField(this, "util", {
       extend: (dest, ...sources) => {
-        if (this.version === LeafletVersion.V1) {
-          return L.Util.extend(dest, ...sources);
-        } else {
-          return Object.assign(dest, ...sources);
-        }
+        return Object.assign(dest, ...sources);
       },
       bind: (fn, obj) => {
-        if (this.version === LeafletVersion.V1) {
-          return L.Util.bind(fn, obj);
-        } else {
-          return fn.bind(obj);
-        }
+        return fn.bind(obj);
       },
       stamp: (obj) => {
         return L.Util.stamp(obj);
@@ -9930,11 +9911,7 @@ class LeafletAdapter {
         return L.Util.formatNum(num, digits);
       },
       trim: (str) => {
-        if (this.version === LeafletVersion.V1) {
-          return L.Util.trim(str);
-        } else {
-          return str.trim();
-        }
+        return str.trim();
       },
       splitWords: (str) => {
         return L.Util.splitWords(str);
@@ -9943,50 +9920,34 @@ class LeafletAdapter {
         return L.Util.setOptions(obj, options);
       },
       getParamString: (obj, existingUrl, uppercase) => {
-        if (this.version === LeafletVersion.V1) {
-          return L.Util.getParamString(obj, existingUrl, uppercase);
-        } else {
-          const params = new URLSearchParams();
-          for (const key in obj) {
-            if (Object.prototype.hasOwnProperty.call(obj, key)) {
-              const paramKey = uppercase ? key.toUpperCase() : key;
-              params.set(paramKey, String(obj[key]));
-            }
-          }
-          const paramString = params.toString();
-          if (existingUrl) {
-            const separator = existingUrl.indexOf("?") === -1 ? "?" : "&";
-            return existingUrl + separator + paramString;
+        const params = new URLSearchParams();
+        for (const key in obj) {
+          if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            const paramKey = uppercase ? key.toUpperCase() : key;
+            params.set(paramKey, String(obj[key]));
           }
-          return paramString ? "?" + paramString : "";
         }
+        const paramString = params.toString();
+        if (existingUrl) {
+          const separator = existingUrl.indexOf("?") === -1 ? "?" : "&";
+          return existingUrl + separator + paramString;
+        }
+        return paramString ? "?" + paramString : "";
       },
       template: (str, data) => {
         return L.Util.template(str, data);
       },
       isArray: (obj) => {
-        if (this.version === LeafletVersion.V1) {
-          return L.Util.isArray(obj);
-        } else {
-          return Array.isArray(obj);
-        }
+        return Array.isArray(obj);
       },
       indexOf: (array, item) => {
-        return L.Util.indexOf(array, item);
+        return array.indexOf(item);
       },
       requestAnimFrame: (fn, context, immediate) => {
-        if (this.version === LeafletVersion.V1) {
-          return L.Util.requestAnimFrame(fn, context, immediate);
-        } else {
-          return requestAnimationFrame(context ? fn.bind(context) : fn);
-        }
+        return requestAnimationFrame(context ? fn.bind(context) : fn);
       },
       cancelAnimFrame: (id) => {
-        if (this.version === LeafletVersion.V1) {
-          L.Util.cancelAnimFrame(id);
-        } else {
-          cancelAnimationFrame(id);
-        }
+        cancelAnimationFrame(id);
       }
     });
   }
@@ -10075,107 +10036,110 @@ class LeafletAdapter {
    * Browser detection compatibility
    */
   getBrowser() {
-    const self = this;
-    const browser = L.Browser;
+    const browser = getLegacyBrowser();
+    const currentNavigator = getNavigator();
+    const userAgent = (currentNavigator == null ? void 0 : currentNavigator.userAgent) ?? "";
+    const platform = (currentNavigator == null ? void 0 : currentNavigator.platform) ?? "";
+    const coarsePointer = typeof matchMedia !== "undefined" && matchMedia("(pointer: coarse)").matches;
     return {
       get ie() {
-        return self.version === LeafletVersion.V1 ? L.Browser.ie : false;
+        return browser.ie ?? false;
       },
       get ielt9() {
-        return self.version === LeafletVersion.V1 ? L.Browser.ielt9 : false;
+        return browser.ielt9 ?? false;
       },
       get edge() {
-        return self.version === LeafletVersion.V1 ? L.Browser.edge : false;
+        return browser.edge ?? false;
       },
       get webkit() {
-        return self.version === LeafletVersion.V1 ? L.Browser.webkit : false;
+        return browser.webkit ?? /AppleWebKit/.test(userAgent);
       },
       get android() {
-        return self.version === LeafletVersion.V1 ? L.Browser.android : /Android/.test(navigator.userAgent);
+        return browser.android ?? /Android/.test(userAgent);
       },
       get android23() {
-        return self.version === LeafletVersion.V1 ? L.Browser.android23 : false;
+        return browser.android23 ?? false;
       },
       get androidStock() {
-        return self.version === LeafletVersion.V1 ? L.Browser.androidStock : false;
+        return browser.androidStock ?? false;
       },
       get opera() {
-        return self.version === LeafletVersion.V1 ? L.Browser.opera : false;
+        return browser.opera ?? false;
       },
       get chrome() {
-        return self.version === LeafletVersion.V1 ? L.Browser.chrome : /Chrome/.test(navigator.userAgent);
+        return browser.chrome ?? /(?:Chrome|CriOS)/.test(userAgent);
       },
       get gecko() {
-        return self.version === LeafletVersion.V1 ? L.Browser.gecko : false;
+        return browser.gecko ?? /Gecko\//.test(userAgent);
       },
       get safari() {
-        return self.version === LeafletVersion.V1 ? L.Browser.safari : /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
+        return browser.safari ?? (/Safari/.test(userAgent) && !/(?:Chrome|CriOS)/.test(userAgent));
       },
       get phantom() {
-        return self.version === LeafletVersion.V1 ? browser.phantom ?? false : false;
+        return browser.phantom ?? false;
       },
       get opera12() {
-        return self.version === LeafletVersion.V1 ? L.Browser.opera12 : false;
+        return browser.opera12 ?? false;
       },
       get win() {
-        return self.version === LeafletVersion.V1 ? L.Browser.win : /Win/.test(navigator.platform);
+        return browser.win ?? /Win/.test(platform);
       },
       get ie3d() {
-        return self.version === LeafletVersion.V1 ? L.Browser.ie3d : false;
+        return browser.ie3d ?? false;
       },
       get webkit3d() {
-        return self.version === LeafletVersion.V1 ? L.Browser.webkit3d : false;
+        return browser.webkit3d ?? false;
       },
       get gecko3d() {
-        return self.version === LeafletVersion.V1 ? L.Browser.gecko3d : false;
+        return browser.gecko3d ?? false;
       },
       get any3d() {
-        return self.version === LeafletVersion.V1 ? L.Browser.any3d : true;
+        return browser.any3d ?? true;
       },
       get mobile() {
-        return L.Browser.mobile;
+        return browser.mobile ?? coarsePointer;
       },
       get mobileWebkit() {
-        return self.version === LeafletVersion.V1 ? L.Browser.mobileWebkit : false;
+        return browser.mobileWebkit ?? false;
       },
       get mobileWebkit3d() {
-        return self.version === LeafletVersion.V1 ? L.Browser.mobileWebkit3d : false;
+        return browser.mobileWebkit3d ?? false;
       },
       get msPointer() {
-        return self.version === LeafletVersion.V1 ? L.Browser.msPointer : false;
+        return browser.msPointer ?? false;
       },
       get pointer() {
-        return L.Browser.pointer || true;
+        return browser.pointer ?? typeof PointerEvent !== "undefined";
       },
       get touch() {
-        return L.Browser.touch;
+        return browser.touch ?? coarsePointer;
       },
       get touchNative() {
-        return self.version === LeafletVersion.V1 ? browser.touchNative ?? false : false;
+        return browser.touchNative ?? coarsePointer;
       },
       get mobileOpera() {
-        return self.version === LeafletVersion.V1 ? L.Browser.mobileOpera : false;
+        return browser.mobileOpera ?? false;
       },
       get mobileGecko() {
-        return self.version === LeafletVersion.V1 ? L.Browser.mobileGecko : false;
+        return browser.mobileGecko ?? false;
       },
       get retina() {
-        return L.Browser.retina;
+        return browser.retina ?? (typeof devicePixelRatio !== "undefined" && devicePixelRatio > 1);
       },
       get passiveEvents() {
-        return self.version === LeafletVersion.V1 ? browser.passiveEvents ?? true : true;
+        return browser.passiveEvents ?? true;
       },
       get canvas() {
-        return self.version === LeafletVersion.V1 ? L.Browser.canvas : true;
+        return browser.canvas ?? true;
       },
       get svg() {
-        return self.version === LeafletVersion.V1 ? L.Browser.svg : true;
+        return browser.svg ?? true;
       },
       get vml() {
-        return self.version === LeafletVersion.V1 ? L.Browser.vml : false;
+        return browser.vml ?? false;
       },
       get inlineSvg() {
-        return self.version === LeafletVersion.V1 ? browser.inlineSvg ?? true : true;
+        return browser.inlineSvg ?? true;
       }
     };
   }
@@ -10313,7 +10277,8 @@ function createButtons(container, subContainer, config, onActivateToggle, onDraw
   activate.dataset.collapsedIcon = icons$1.collapse;
   L.DomEvent.on(activate, "mousedown", L.DomEvent.stopPropagation);
   L.DomEvent.on(activate, "touchstart", L.DomEvent.stopPropagation);
-  L.DomEvent.on(activate, "click", L.DomEvent.stop).on(activate, "click", onActivateToggle);
+  L.DomEvent.on(activate, "click", L.DomEvent.stop);
+  L.DomEvent.on(activate, "click", onActivateToggle);
   if (config.tools.draw) {
     const draw = leafletAdapter.domUtil.create("a", "icon-draw", subContainer);
     draw.href = "#";
@@ -11185,7 +11150,7 @@ class PolygonDrawManager {
       pointMarker.addTo(this.map);
       this.applyP2PMarkerMode(pointMarker);
       pointMarker.on("mousedown", (e) => {
-        L.DomEvent.stopPropagation(e);
+        leafletAdapter.domEvent.stopPropagation(e);
       });
       pointMarker.on("drag", () => {
         this.updateP2PTracer();
@@ -11193,7 +11158,7 @@ class PolygonDrawManager {
       pointMarker.on("click", (e) => {
         if (this.shouldAllowP2PMarkerDeletion()) {
           this.deleteP2PMarker(pointMarker);
-          L.DomEvent.stopPropagation(e);
+          leafletAdapter.domEvent.stopPropagation(e);
         }
       });
       pointMarker.on("mouseover", () => this.onMarkerHoverForEdgeDeletion(pointMarker, true));
@@ -11223,11 +11188,11 @@ class PolygonDrawManager {
         pointMarker.on("click", (e) => {
           if (this.shouldAllowP2PMarkerDeletion()) {
             this.deleteP2PMarker(pointMarker);
-            L.DomEvent.stopPropagation(e);
+            leafletAdapter.domEvent.stopPropagation(e);
             return;
           }
           if (this.p2pMarkers.length >= 3) {
-            L.DomEvent.stopPropagation(e);
+            leafletAdapter.domEvent.stopPropagation(e);
             this.completePointToPointPolygon();
           }
         });
@@ -11453,11 +11418,11 @@ class PolygonDrawManager {
     firstMarker.on("click", (e) => {
       if (this.shouldAllowP2PMarkerDeletion()) {
         this.deleteP2PMarker(firstMarker);
-        L.DomEvent.stopPropagation(e);
+        leafletAdapter.domEvent.stopPropagation(e);
         return;
       }
       if (this.p2pMarkers.length >= 3) {
-        L.DomEvent.stopPropagation(e);
+        leafletAdapter.domEvent.stopPropagation(e);
         this.completePointToPointPolygon();
       }
     });
@@ -13443,6 +13408,7 @@ class PolygonInteractionManager {
     __publicField(this, "dragUsesPointerEvents", false);
     __publicField(this, "polygonTouchStartListeners", /* @__PURE__ */ new WeakMap());
     __publicField(this, "polygonNativeStartListeners", /* @__PURE__ */ new WeakMap());
+    __publicField(this, "polygonTouchActionValues", /* @__PURE__ */ new WeakMap());
     __publicField(this, "_openMenuPopup", null);
     __publicField(this, "transformModeActive", false);
     __publicField(this, "transformControllers", /* @__PURE__ */ new WeakMap());
@@ -13611,6 +13577,7 @@ class PolygonInteractionManager {
    * the polygon is restored unchanged.
    */
   handleDonutCommit(controller, featureGroup, polygonLayer, optimizationLevel, originalOptimizationLevel) {
+    var _a2;
     const originalOuter = controller.getOriginalOuterLatLngs();
     const donutValidation = controller.getDonutValidation();
     const restore = () => {
@@ -13625,6 +13592,8 @@ class PolygonInteractionManager {
     if (this.saveHistoryState) {
       this.saveHistoryState("donut");
     }
+    const featureMetadataState = this.getFeatureMetadataState(featureGroup);
+    const targetLayerId = (_a2 = this.layerManager) == null ? void 0 : _a2.getLayerForFeatureGroup(featureGroup);
     this.cleanupFeatureGroup(featureGroup);
     this.removeFeatureGroup(featureGroup);
     this.emitPolygonUpdated({
@@ -13632,7 +13601,14 @@ class PolygonInteractionManager {
       polygon: donutValidation.polygon,
       allowMerge: donutValidation.allowMerge,
       optimizationLevel,
-      originalOptimizationLevel
+      originalOptimizationLevel,
+      featureId: featureMetadataState.featureId,
+      featureMetadata: featureMetadataState.metadata,
+      sourceFeatureIds: featureMetadataState.sourceFeatureIds,
+      featureInteractionOverride: featureMetadataState.interactionOverride,
+      featureStyleOverrides: featureMetadataState.styleOverrides,
+      targetLayerId,
+      featureCreatedAt: featureMetadataState.createdAt
     });
   }
   dispose() {
@@ -13716,7 +13692,7 @@ class PolygonInteractionManager {
         var _a2, _b2;
         if (this.isDraggingMarker) {
           (_b2 = (_a2 = e.originalEvent) == null ? void 0 : _a2.stopPropagation) == null ? void 0 : _b2.call(_a2);
-          L.DomEvent.stopPropagation(e);
+          leafletAdapter.domEvent.stopPropagation(e);
         }
       });
       marker.on("dragstart", () => {
@@ -13744,7 +13720,7 @@ class PolygonInteractionManager {
           this.markerDragEnd(fg);
         }
         this._activeMarker = null;
-        L.DomEvent.stopPropagation(e);
+        leafletAdapter.domEvent.stopPropagation(e);
         setTimeout(() => {
           this.isDraggingMarker = false;
         }, 10);
@@ -13882,7 +13858,7 @@ class PolygonInteractionManager {
       }
       marker.on("mousedown", (e) => {
         if (!this.modeManager.isInOffMode()) {
-          L.DomEvent.stopPropagation(e);
+          leafletAdapter.domEvent.stopPropagation(e);
           this.map.fire("mousedown", e);
         }
         this._activeMarker = marker;
@@ -13986,7 +13962,7 @@ class PolygonInteractionManager {
         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);
+          leafletAdapter.domEvent.stopPropagation(e);
         }
       });
       marker.on("dragstart", () => {
@@ -14014,7 +13990,7 @@ class PolygonInteractionManager {
           this.markerDragEnd(fg);
         }
         this._activeMarker = null;
-        L.DomEvent.stopPropagation(e);
+        leafletAdapter.domEvent.stopPropagation(e);
         setTimeout(() => {
           this.isDraggingMarker = false;
         }, 10);
@@ -14127,7 +14103,7 @@ class PolygonInteractionManager {
       }
       marker.on("mousedown", (e) => {
         if (!this.modeManager.isInOffMode()) {
-          L.DomEvent.stopPropagation(e);
+          leafletAdapter.domEvent.stopPropagation(e);
           this.map.fire("mousedown", e);
         }
         this._activeMarker = marker;
@@ -14329,6 +14305,9 @@ class PolygonInteractionManager {
     }
     const existingDragData = polygon2._polydrawDragData;
     if (this.currentDragPolygon === polygon2 && (existingDragData == null ? void 0 : existingDragData.isDragging)) {
+      if (options.attachTouchListeners) {
+        this.attachDragTouchListeners();
+      }
       return true;
     }
     const isCloneMode = this.modeManager.getCurrentMode() === DrawMode.Clone;
@@ -14384,22 +14363,27 @@ class PolygonInteractionManager {
       });
     };
     const listeners = {
-      mousedown: (event) => startFromNativeEvent(event),
-      pointerdown: (event) => startFromNativeEvent(event),
+      pointerdown: (event) => {
+        if (LeafletVersionDetector.isV1() && event.pointerType === "mouse") return;
+        startFromNativeEvent(event);
+      },
       touchstart: (event) => startFromNativeEvent(event)
     };
     this.polygonNativeStartListeners.set(polygon2, listeners);
     const attach = () => {
       const el = polygon2._path;
       if (!el) return;
-      el.addEventListener("mousedown", listeners.mousedown, { capture: true });
+      if (!this.polygonTouchActionValues.has(polygon2)) {
+        this.polygonTouchActionValues.set(polygon2, el.style.touchAction);
+      }
+      el.style.touchAction = "none";
       el.addEventListener("pointerdown", listeners.pointerdown, { capture: true });
       el.addEventListener("touchstart", listeners.touchstart, { capture: true, passive: false });
     };
     if (polygon2._path) {
       attach();
     } else {
-      polygon2.once("add", attach);
+      polygon2.once("add", () => requestAnimationFrame(attach));
     }
   }
   /**
@@ -14414,9 +14398,10 @@ class PolygonInteractionManager {
       startLatLngs: null,
       originalOpacity: polygon2.options.fillOpacity
     };
-    polygon2.on("mousedown", (e) => {
+    polygon2.on("mousedown", (event) => {
+      const e = event;
       if (!this.isPolygonDragModeActive()) {
-        L.DomEvent.stopPropagation(e);
+        leafletAdapter.domEvent.stopPropagation(e);
         this.map.fire("mousedown", e);
         return;
       }
@@ -14456,7 +14441,7 @@ class PolygonInteractionManager {
       if (polygon2._path) {
         attachTouch();
       } else {
-        polygon2.once("add", attachTouch);
+        polygon2.once("add", () => requestAnimationFrame(attachTouch));
       }
     }
     this.attachPolygonNativeStartListeners(polygon2);
@@ -14683,7 +14668,7 @@ class PolygonInteractionManager {
       } catch {
       }
     }
-    L.DomEvent.stopPropagation(e);
+    leafletAdapter.domEvent.stopPropagation(e);
   }
   highlightEdgeOnHover(edgePolyline, isHovering) {
     if (isHovering) {
@@ -15172,10 +15157,11 @@ class PolygonInteractionManager {
     if (!listeners) return;
     const el = polygon2._path;
     if (el) {
-      el.removeEventListener("mousedown", listeners.mousedown, { capture: true });
       el.removeEventListener("pointerdown", listeners.pointerdown, { capture: true });
       el.removeEventListener("touchstart", listeners.touchstart, { capture: true });
+      el.style.touchAction = this.polygonTouchActionValues.get(polygon2) ?? "";
     }
+    this.polygonTouchActionValues.delete(polygon2);
     this.polygonNativeStartListeners.delete(polygon2);
   }
   attachDragCancelHandlers() {
@@ -16659,6 +16645,7 @@ class PolygonInteractionManager {
     }
   }
   handleTransformControllerResult(controller, featureGroup, mode, confirmed) {
+    var _a2;
     if (this.transformControllers.get(featureGroup) === controller) {
       this.transformControllers.delete(featureGroup);
     }
@@ -16687,6 +16674,7 @@ class PolygonInteractionManager {
     }
     const newGeoJSON = polygonLayer.toGeoJSON();
     const featureMetadataState = this.getFeatureMetadataState(featureGroup);
+    const targetLayerId = (_a2 = this.layerManager) == null ? void 0 : _a2.getLayerForFeatureGroup(featureGroup);
     this.cleanupFeatureGroup(featureGroup);
     this.removeFeatureGroup(featureGroup);
     this.emitPolygonUpdated({
@@ -16700,6 +16688,7 @@ class PolygonInteractionManager {
       sourceFeatureIds: featureMetadataState.sourceFeatureIds,
       featureInteractionOverride: featureMetadataState.interactionOverride,
       featureStyleOverrides: featureMetadataState.styleOverrides,
+      targetLayerId,
       featureCreatedAt: featureMetadataState.createdAt
     });
   }
@@ -17147,7 +17136,7 @@ class PolygonMutationManager {
    * Handle menu actions from interaction manager
    */
   async handleMenuAction(data) {
-    var _a2, _b2, _c, _d;
+    var _a2, _b2, _c, _d, _e;
     if (!(data == null ? void 0 : data.featureGroup)) {
       return;
     }
@@ -17166,6 +17155,7 @@ class PolygonMutationManager {
     }
     const { level: optimizationLevel, original: originalOptimizationLevel } = this.getOptimizationMetadataFromFeatureGroup(data.featureGroup);
     const sourceMetadata = this.getFeatureMetadataStateFromFeatureGroup(data.featureGroup);
+    const sourceLayerId = (_a2 = this.layerManager) == null ? void 0 : _a2.getLayerForFeatureGroup(data.featureGroup);
     let result;
     let shouldSaveHistory = true;
     switch (data.action) {
@@ -17203,8 +17193,8 @@ class PolygonMutationManager {
         this.saveHistoryState(data.action);
       }
       this.removeFeatureGroupInternal(data.featureGroup);
-      const bezierLevel = data.action === "bezier" ? ((_a2 = this.config.polygonTools.bezier) == null ? void 0 : _a2.visualOptimizationLevel) ?? 10 : optimizationLevel;
-      const bezierOriginal = data.action === "bezier" ? ((_b2 = this.config.polygonTools.bezier) == null ? void 0 : _b2.visualOptimizationLevel) ?? 10 : originalOptimizationLevel;
+      const bezierLevel = data.action === "bezier" ? ((_b2 = this.config.polygonTools.bezier) == null ? void 0 : _b2.visualOptimizationLevel) ?? 10 : optimizationLevel;
+      const bezierOriginal = data.action === "bezier" ? ((_c = this.config.polygonTools.bezier) == null ? void 0 : _c.visualOptimizationLevel) ?? 10 : originalOptimizationLevel;
       const noMerge = result.allowMerge === false;
       const shouldSimplify = result.simplify === true;
       const resultMetadata = result.metadata ?? sourceMetadata.metadata;
@@ -17218,11 +17208,12 @@ class PolygonMutationManager {
         sourceFeatureIds: sourceMetadata.sourceFeatureIds,
         featureInteractionOverride: sourceMetadata.interactionOverride,
         featureStyleOverrides: sourceMetadata.styleOverrides,
+        targetLayerId: sourceLayerId,
         featureCreatedAt: sourceMetadata.createdAt
       });
-      if (data.action === "bezier" && ((_c = this.config.polygonTools.bezier) == null ? void 0 : _c.ghostMarkers)) {
+      if (data.action === "bezier" && ((_d = this.config.polygonTools.bezier) == null ? void 0 : _d.ghostMarkers)) {
         const ghostOpacity = 1e-3;
-        (_d = addResult.featureGroups) == null ? void 0 : _d.forEach((featureGroup) => {
+        (_e = addResult.featureGroups) == null ? void 0 : _e.forEach((featureGroup) => {
           featureGroup.eachLayer((layer) => {
             if (layer instanceof L.Polygon) {
               const polygon2 = layer;
@@ -19456,12 +19447,14 @@ function createLayerPanel(layerManager, eventManager, initialState = "expanded",
     layerEditorBackdrop = null;
   };
   const openLayerEditor = (layer) => {
-    var _a2;
+    var _a2, _b2;
     closeLayerEditor();
     const initialColor = normalizeHexColor(layer.color, "#50622b");
     let selectedColor = initialColor;
     let mergeMode = false;
     let selectedTargetLayerId = null;
+    let createNewMergeTarget = false;
+    const canCreateMergeTarget = layer.role === "reference";
     const targetLayers = layerManager.getAllLayers().filter((candidate) => candidate.role === "draw" && candidate.id !== layer.id);
     const backdrop = document.createElement("div");
     backdrop.className = "polydraw-layer-dialog-backdrop";
@@ -19531,7 +19524,7 @@ function createLayerPanel(layerManager, eventManager, initialState = "expanded",
     commands.className = "polydraw-layer-dialog-commands";
     const sourceFeatureCount = layerManager.getFeatureGroupsForLayer(layer.id).length;
     const canMergeSource = layer.role === "draw" || layer.role === "reference" && allowReferenceMergeSources;
-    if (canMergeSource && sourceFeatureCount > 0 && targetLayers.length > 0) {
+    if (canMergeSource && sourceFeatureCount > 0 && (targetLayers.length > 0 || canCreateMergeTarget)) {
       const mergeButton = document.createElement("button");
       mergeButton.type = "button";
       mergeButton.className = "polydraw-layer-dialog-merge";
@@ -19577,6 +19570,33 @@ function createLayerPanel(layerManager, eventManager, initialState = "expanded",
       mergeOptions.appendChild(option);
       return option;
     });
+    if (canCreateMergeTarget) {
+      const newLayerOption = document.createElement("button");
+      newLayerOption.type = "button";
+      newLayerOption.className = "polygon-layer-option polygon-layer-option-new polydraw-layer-merge-option polydraw-layer-merge-option-new";
+      newLayerOption.setAttribute("role", "radio");
+      newLayerOption.setAttribute("aria-checked", "false");
+      newLayerOption.dataset.createNewLayer = "true";
+      const label = document.createElement("span");
+      label.className = "polygon-layer-option-label";
+      label.textContent = "+ New editable layer";
+      newLayerOption.appendChild(label);
+      mergeOptions.appendChild(newLayerOption);
+      mergeOptionButtons.push(newLayerOption);
+    }
+    const newLayerNameField = document.createElement("label");
+    newLayerNameField.className = "polygon-layer-new-name polydraw-layer-merge-new-name";
+    newLayerNameField.hidden = true;
+    const newLayerNameLabel = document.createElement("span");
+    newLayerNameLabel.textContent = "Layer name";
+    const newLayerNameInput = document.createElement("input");
+    newLayerNameInput.type = "text";
+    newLayerNameInput.className = "polygon-layer-new-name-input polydraw-layer-new-name-input";
+    newLayerNameInput.value = ((_a2 = layer.label) == null ? void 0 : _a2.trim()) || layer.id;
+    newLayerNameInput.placeholder = "Optional";
+    newLayerNameInput.maxLength = 80;
+    newLayerNameInput.autocomplete = "off";
+    newLayerNameField.append(newLayerNameLabel, newLayerNameInput);
     const targetStyleChoice = document.createElement("label");
     targetStyleChoice.className = "polydraw-layer-merge-style-choice";
     const targetStyleCheckbox = document.createElement("input");
@@ -19589,7 +19609,11 @@ function createLayerPanel(layerManager, eventManager, initialState = "expanded",
     targetStyleDescription.textContent = "Otherwise individual colors and opacity are preserved.";
     targetStyleText.append(targetStyleLabel, targetStyleDescription);
     targetStyleChoice.append(targetStyleCheckbox, targetStyleText);
-    mergePanel.append(mergeOptions, targetStyleChoice);
+    mergePanel.appendChild(mergeOptions);
+    if (canCreateMergeTarget) {
+      mergePanel.appendChild(newLayerNameField);
+    }
+    mergePanel.appendChild(targetStyleChoice);
     const actions = document.createElement("div");
     actions.className = "polydraw-layer-dialog-actions";
     const cancelButton = document.createElement("button");
@@ -19640,16 +19664,22 @@ function createLayerPanel(layerManager, eventManager, initialState = "expanded",
     cancelButton.addEventListener("click", closeWithoutApply);
     mergeCancelButton.addEventListener("click", closeWithoutApply);
     backButton.addEventListener("click", showSettings);
-    (_a2 = commands.querySelector(".polydraw-layer-dialog-merge")) == null ? void 0 : _a2.addEventListener("click", showMergeTargets);
+    (_b2 = commands.querySelector(".polydraw-layer-dialog-merge")) == null ? void 0 : _b2.addEventListener("click", showMergeTargets);
     mergeOptionButtons.forEach((option) => {
       option.addEventListener("click", () => {
-        selectedTargetLayerId = option.dataset.layerId || null;
+        createNewMergeTarget = option.dataset.createNewLayer === "true";
+        selectedTargetLayerId = createNewMergeTarget ? null : option.dataset.layerId || null;
         mergeOptionButtons.forEach((candidate) => {
           const selected = candidate === option;
           candidate.classList.toggle("selected", selected);
           candidate.setAttribute("aria-checked", String(selected));
         });
-        mergeApplyButton.disabled = selectedTargetLayerId === null;
+        newLayerNameField.hidden = !createNewMergeTarget;
+        targetStyleChoice.hidden = createNewMergeTarget;
+        mergeApplyButton.disabled = !createNewMergeTarget && selectedTargetLayerId === null;
+        if (createNewMergeTarget) {
+          newLayerNameInput.focus();
+        }
       });
     });
     if (mergeOptionButtons.length === 1) {
@@ -19660,11 +19690,13 @@ function createLayerPanel(layerManager, eventManager, initialState = "expanded",
       mergeApplyButton.disabled = selectedTargetLayerId === null;
     }
     mergeApplyButton.addEventListener("click", () => {
-      if (!selectedTargetLayerId) return;
+      if (!createNewMergeTarget && !selectedTargetLayerId) return;
       eventManager.emit("polydraw:layer:merge-requested", {
         sourceLayerId: layer.id,
-        targetLayerId: selectedTargetLayerId,
-        useTargetStyle: targetStyleCheckbox.checked
+        targetLayerId: selectedTargetLayerId ?? void 0,
+        createNewLayer: createNewMergeTarget,
+        newLayerLabel: createNewMergeTarget ? newLayerNameInput.value.trim() || void 0 : void 0,
+        useTargetStyle: createNewMergeTarget ? false : targetStyleCheckbox.checked
       });
       closeLayerEditor();
     });
@@ -19990,10 +20022,10 @@ function createLayerPanel(layerManager, eventManager, initialState = "expanded",
       );
     }
   };
-  const LayerPanelControlClass = L.Control.extend({
-    options: {
-      position: "topright"
-    },
+  class LayerPanelControlClass extends L.Control {
+    constructor() {
+      super({ position: "topright" });
+    }
     onAdd(leafletMap) {
       map = leafletMap;
       container = L.DomUtil.create("div", "leaflet-bar polydraw-layer-panel");
@@ -20008,7 +20040,7 @@ function createLayerPanel(layerManager, eventManager, initialState = "expanded",
       renderPanel();
       map.on("resize", updateAvailableHeight);
       return container;
-    },
+    }
     onRemove() {
       if (!container) {
         return;
@@ -20026,12 +20058,11 @@ function createLayerPanel(layerManager, eventManager, initialState = "expanded",
       draggedLayerId = null;
       pendingRenderWhileDragging = false;
     }
-  });
-  const panel = new LayerPanelControlClass();
-  panel.refresh = (options) => {
-    renderPanel(options);
-  };
-  return panel;
+    refresh(options) {
+      renderPanel(options);
+    }
+  }
+  return new LayerPanelControlClass();
 }
 function injectDynamicStyles(config) {
   const style = document.createElement("style");
@@ -20141,19 +20172,17 @@ class CoordinateUtils {
    */
   static convertToCoords(latlngs, turfHelper) {
     const coords = [];
+    const toRing = (ring) => L.GeoJSON.latLngsToCoords(ring);
     if (latlngs.length > 1 && latlngs.length < 3) {
       const coordinates = [];
-      const within = turfHelper.isWithin(
-        L.GeoJSON.latLngsToCoords(latlngs[latlngs.length - 1]),
-        L.GeoJSON.latLngsToCoords(latlngs[0])
-      );
+      const within = turfHelper.isWithin(toRing(latlngs[latlngs.length - 1]), toRing(latlngs[0]));
       if (within) {
         latlngs.forEach((polygon2) => {
-          coordinates.push(L.GeoJSON.latLngsToCoords(polygon2));
+          coordinates.push(toRing(polygon2));
         });
       } else {
         latlngs.forEach((polygon2) => {
-          coords.push([L.GeoJSON.latLngsToCoords(polygon2)]);
+          coords.push([toRing(polygon2)]);
         });
       }
       if (coordinates.length >= 1) {
@@ -20162,23 +20191,20 @@ class CoordinateUtils {
     } else if (latlngs.length > 2) {
       const coordinates = [];
       for (let index = 1; index < latlngs.length - 1; index++) {
-        const within = turfHelper.isWithin(
-          L.GeoJSON.latLngsToCoords(latlngs[index]),
-          L.GeoJSON.latLngsToCoords(latlngs[0])
-        );
+        const within = turfHelper.isWithin(toRing(latlngs[index]), toRing(latlngs[0]));
         if (within) {
           latlngs.forEach((polygon2) => {
-            coordinates.push(L.GeoJSON.latLngsToCoords(polygon2));
+            coordinates.push(toRing(polygon2));
           });
           coords.push(coordinates);
         } else {
           latlngs.forEach((polygon2) => {
-            coords.push([L.GeoJSON.latLngsToCoords(polygon2)]);
+            coords.push([toRing(polygon2)]);
           });
         }
       }
     } else {
-      coords.push([L.GeoJSON.latLngsToCoords(latlngs[0])]);
+      coords.push([toRing(latlngs[0])]);
     }
     return coords;
   }
@@ -20691,6 +20717,18 @@ class Polydraw extends L.Control {
     __publicField(this, "_boundPointerUp");
     __publicField(this, "_boundPointerCancel");
     __publicField(this, "_boundContextMenu");
+    __publicField(this, "_mapMouseDown", (event) => {
+      this.mouseDown(event);
+    });
+    __publicField(this, "_mapMouseMove", (event) => {
+      this.mouseMove(event);
+    });
+    __publicField(this, "_mapMouseUp", (event) => {
+      void this.mouseUpLeave(event);
+    });
+    __publicField(this, "_mapDoubleClick", (event) => {
+      this.handleDoubleClick(event);
+    });
     __publicField(this, "_lastTapTime", 0);
     __publicField(this, "_lastTapLatLng", null);
     __publicField(this, "_tapTimeout", null);
@@ -20845,7 +20883,7 @@ class Polydraw extends L.Control {
    */
   onAdd(_map) {
     const extendedMap = _map;
-    const browser = L.Browser;
+    const browser = leafletAdapter.getBrowser();
     extendedMap._onResize = () => {
     };
     if (browser.touch && browser.mobile) {
@@ -21398,6 +21436,7 @@ class Polydraw extends L.Control {
    */
   createDrawLayer(input = {}) {
     const id = (input.id || this.getNextDrawLayerName()).trim();
+    const firstReferenceIndex = this.layerManager.getAllLayers().findIndex((candidate) => candidate.role === "reference");
     const layer = this.createLayer({
       ...input,
       id,
@@ -21408,6 +21447,9 @@ class Polydraw extends L.Control {
       panel: input.panel ?? "visible",
       visibility: input.visibility ?? true
     });
+    if (firstReferenceIndex >= 0) {
+      this.layerManager.moveLayerToIndex(layer.id, firstReferenceIndex);
+    }
     this.layerManager.setActiveLayer(layer.id);
     this.updateLayerPanel();
     this.updateMarkerDraggableState();
@@ -21741,6 +21783,41 @@ class Polydraw extends L.Control {
       "layerMove",
       this.layerManager
     );
+    return this.mergeLayerIntoWithSnapshot(
+      normalizedSourceId,
+      normalizedTargetId,
+      options,
+      historySnapshot
+    );
+  }
+  async mergeLayerIntoNewDrawLayer(sourceLayerId, label) {
+    var _a2;
+    const normalizedSourceId = (sourceLayerId || "").trim();
+    const sourceLayer = this.layerManager.getLayer(normalizedSourceId);
+    if (!sourceLayer || sourceLayer.role !== "reference" || ((_a2 = this.config.layerPanel.merge) == null ? void 0 : _a2.allowReferenceSources) !== true || this.layerManager.getFeatureGroupsForLayer(normalizedSourceId).length === 0) {
+      return false;
+    }
+    const historySnapshot = this.historyManager.captureState(
+      this.arrayOfFeatureGroups,
+      "layerMove",
+      this.layerManager
+    );
+    try {
+      const targetLayer = this.createDrawLayer({ label: (label == null ? void 0 : label.trim()) || void 0 });
+      return await this.mergeLayerIntoWithSnapshot(
+        normalizedSourceId,
+        targetLayer.id,
+        { useTargetStyle: false },
+        historySnapshot
+      );
+    } catch (error) {
+      await this.restoreFromSnapshot(historySnapshot);
+      console.warn("Failed to create a draw layer for merge; restored the previous state.", error);
+      return false;
+    }
+  }
+  async mergeLayerIntoWithSnapshot(normalizedSourceId, normalizedTargetId, options, historySnapshot) {
+    const sourceFeatureGroups = this.layerManager.getFeatureGroupsForLayer(normalizedSourceId);
     const sourceWasActive = this.layerManager.getActiveLayerId() === normalizedSourceId;
     try {
       for (const featureGroup of sourceFeatureGroups) {
@@ -22258,6 +22335,11 @@ class Polydraw extends L.Control {
       void this.moveFeatureGroupToDrawLayer(data.featureGroup, targetLayer.id);
     });
     this.addCoreEventListener("polydraw:layer:merge-requested", (data) => {
+      if (data.createNewLayer) {
+        void this.mergeLayerIntoNewDrawLayer(data.sourceLayerId, data.newLayerLabel);
+        return;
+      }
+      if (!data.targetLayerId) return;
       void this.mergeLayerInto(data.sourceLayerId, data.targetLayerId, {
         useTargetStyle: data.useTargetStyle
       });
@@ -22772,6 +22854,10 @@ class Polydraw extends L.Control {
     var _a2;
     (_a2 = this.tracer) == null ? void 0 : _a2.setLatLngs([]);
   }
+  toggleMapEvent(type, handler, enabled) {
+    const evented = this.map;
+    evented[enabled ? "on" : "off"](type, handler);
+  }
   /**
    * 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.
@@ -22782,10 +22868,9 @@ class Polydraw extends L.Control {
     }
     this.drawEventsAttached = onoff;
     const usePointerEvents = this.pointerEventsHandled;
-    const onoroff = onoff ? "on" : "off";
     if (!usePointerEvents) {
-      this.map[onoroff]("mousemove", this.mouseMove, this);
-      this.map[onoroff]("mouseup", this.mouseUpLeave, this);
+      this.toggleMapEvent("mousemove", this._mapMouseMove, onoff);
+      this.toggleMapEvent("mouseup", this._mapMouseUp, onoff);
     }
     if (onoff) {
       if (!this._boundMouseMove) {
@@ -22861,11 +22946,10 @@ class Polydraw extends L.Control {
     }
     this.mapEventsAttached = onoff;
     const usePointerEvents = this.pointerEventsHandled;
-    const onoroff = onoff ? "on" : "off";
     if (!usePointerEvents) {
-      this.map[onoroff]("mousedown", this.mouseDown, this);
+      this.toggleMapEvent("mousedown", this._mapMouseDown, onoff);
     }
-    this.map[onoroff]("dblclick", this.handleDoubleClick, this);
+    this.toggleMapEvent("dblclick", this._mapDoubleClick, onoff);
     if (onoff) {
       if (!this._boundContextMenu) {
         this._boundContextMenu = (e) => e.preventDefault();