leaflet-anvil 0.1.1 → 0.2.0

package/dist/index.mjs

@@ -5,6 +5,29 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 // src/index.ts
 import * as L22 from "leaflet";
 
+// src/types.ts
+var AnvilMode = /* @__PURE__ */ ((AnvilMode2) => {
+  AnvilMode2["Polygon"] = "polygon";
+  AnvilMode2["Polyline"] = "polyline";
+  AnvilMode2["Marker"] = "marker";
+  AnvilMode2["Rectangle"] = "rectangle";
+  AnvilMode2["Square"] = "square";
+  AnvilMode2["Triangle"] = "triangle";
+  AnvilMode2["Circle"] = "circle";
+  AnvilMode2["Freehand"] = "freehand";
+  AnvilMode2["Cut"] = "cut";
+  AnvilMode2["Split"] = "split";
+  AnvilMode2["Drag"] = "drag";
+  AnvilMode2["Scale"] = "scale";
+  AnvilMode2["Rotate"] = "rotate";
+  AnvilMode2["Union"] = "union";
+  AnvilMode2["Subtract"] = "subtract";
+  AnvilMode2["Edit"] = "edit";
+  AnvilMode2["Delete"] = "delete";
+  AnvilMode2["Off"] = "off";
+  return AnvilMode2;
+})(AnvilMode || {});
+
 // src/events.ts
 var ANVIL_EVENTS = {
   CREATED: "anvil:created",
@@ -54,6 +77,7 @@ import * as L3 from "leaflet";
 import * as L from "leaflet";
 function getSnapLatLng(map, latlng, store, options, additionalPoints = [], skipLayer) {
   if (!options.snapping) return latlng;
+  const verifiedAdditionalPoints = Array.isArray(additionalPoints) ? additionalPoints : [];
   const snapDistance = options.snapDistance || 10;
   const basePoint = map.latLngToContainerPoint(latlng);
   let closestPoint = null;
@@ -90,7 +114,7 @@ function getSnapLatLng(map, latlng, store, options, additionalPoints = [], skipL
       }
     });
   });
-  additionalPoints.forEach((p) => {
+  verifiedAdditionalPoints.forEach((p) => {
     const containerPoint = map.latLngToContainerPoint(p);
     const dist = basePoint.distanceTo(containerPoint);
     if (dist < minDistance) {
@@ -362,7 +386,7 @@ var DrawMarkerMode = class {
   }
   onClick(e) {
     const latlng = this.store ? getSnapLatLng(this.map, e.latlng, this.store, this.options) : e.latlng;
-    const marker4 = L5.marker(latlng).addTo(this.map);
+    const marker4 = L5.marker(latlng, this.options.vertexOptions).addTo(this.map);
     this.map.fire(ANVIL_EVENTS.CREATED, { layer: marker4 });
   }
 };
@@ -1029,27 +1053,41 @@ var DragMode = class {
     this.map = map;
     this.store = store;
     this.options = options;
+    __publicField(this, "isEnabled", false);
     __publicField(this, "draggingLayer", null);
     __publicField(this, "startLatLng", null);
     __publicField(this, "initialLatLngs", null);
+    this.store.getGroup().on("layeradd", (e) => {
+      if (this.isEnabled) {
+        this.addLayerListener(e.layer);
+      }
+    });
   }
   enable() {
+    this.isEnabled = true;
     this.store.getGroup().eachLayer((layer) => {
-      if (layer instanceof L13.Path || layer instanceof L13.Marker) {
-        layer.on("mousedown", this.onMouseDown, this);
-        layer.getElement()?.style.setProperty("cursor", "move");
-      }
+      this.addLayerListener(layer);
     });
   }
   disable() {
+    this.isEnabled = false;
     this.store.getGroup().eachLayer((layer) => {
-      if (layer instanceof L13.Path || layer instanceof L13.Marker) {
-        layer.off("mousedown", this.onMouseDown, this);
-        layer.getElement()?.style.setProperty("cursor", "");
-      }
+      this.removeLayerListener(layer);
     });
     this.stopDragging();
   }
+  addLayerListener(layer) {
+    if (layer instanceof L13.Path || layer instanceof L13.Marker) {
+      layer.on("mousedown", this.onMouseDown, this);
+      layer.getElement()?.style.setProperty("cursor", "move");
+    }
+  }
+  removeLayerListener(layer) {
+    if (layer instanceof L13.Path || layer instanceof L13.Marker) {
+      layer.off("mousedown", this.onMouseDown, this);
+      layer.getElement()?.style.setProperty("cursor", "");
+    }
+  }
   onMouseDown(e) {
     L13.DomEvent.stopPropagation(e);
     const layer = e.target;
@@ -1834,23 +1872,37 @@ var DeleteMode = class {
   constructor(map, store) {
     this.map = map;
     this.store = store;
+    __publicField(this, "isEnabled", false);
+    this.store.getGroup().on("layeradd", (e) => {
+      if (this.isEnabled) {
+        this.addLayerListener(e.layer);
+      }
+    });
   }
   enable() {
+    this.isEnabled = true;
     this.store.getGroup().eachLayer((layer) => {
-      layer.on("click", this.onClick, this);
-      if (layer instanceof L19.Path || layer instanceof L19.Marker) {
-        layer.getElement()?.style.setProperty("cursor", "pointer");
-      }
+      this.addLayerListener(layer);
     });
   }
   disable() {
+    this.isEnabled = false;
     this.store.getGroup().eachLayer((layer) => {
-      layer.off("click", this.onClick, this);
-      if (layer instanceof L19.Path || layer instanceof L19.Marker) {
-        layer.getElement()?.style.setProperty("cursor", "");
-      }
+      this.removeLayerListener(layer);
     });
   }
+  addLayerListener(layer) {
+    layer.on("click", this.onClick, this);
+    if (layer instanceof L19.Path || layer instanceof L19.Marker) {
+      layer.getElement()?.style.setProperty("cursor", "pointer");
+    }
+  }
+  removeLayerListener(layer) {
+    layer.off("click", this.onClick, this);
+    if (layer instanceof L19.Path || layer instanceof L19.Marker) {
+      layer.getElement()?.style.setProperty("cursor", "");
+    }
+  }
   onClick(e) {
     L19.DomEvent.stopPropagation(e);
     const layer = e.target;
@@ -1879,50 +1931,8 @@ var LayerStore = class {
   getGroup() {
     return this.group;
   }
-};
-
-// src/anvil.ts
-var Anvil = class {
-  constructor(map, options) {
-    this.map = map;
-    __publicField(this, "modeManager");
-    __publicField(this, "store");
-    __publicField(this, "options");
-    this.options = { snapping: false, snapDistance: 10, preventSelfIntersection: false, ...options };
-    this.store = new LayerStore(map, this.options.layerGroup);
-    this.modeManager = new ModeManager(map);
-    this.modeManager.addMode("draw:polygon", new DrawPolygonMode(this.map, this.options, this.store));
-    this.modeManager.addMode("draw:polyline", new DrawPolylineMode(this.map, this.options, this.store));
-    this.modeManager.addMode("draw:marker", new DrawMarkerMode(this.map, this.options, this.store));
-    this.modeManager.addMode("draw:rectangle", new DrawRectangleMode(this.map, this.options, this.store));
-    this.modeManager.addMode("draw:square", new DrawSquareMode(this.map, this.options, this.store));
-    this.modeManager.addMode("draw:triangle", new DrawTriangleMode(this.map, this.options, this.store));
-    this.modeManager.addMode("draw:circle", new DrawCircleMode(this.map, this.options, this.store));
-    this.modeManager.addMode("draw:freehand", new FreehandMode(this.map, this.store, this.options));
-    this.modeManager.addMode("cut", new CutMode(map, this.store, this.options));
-    this.modeManager.addMode("split", new SplitMode(map, this.store, this.options));
-    this.modeManager.addMode("union", new UnionMode(map, this.store, this.options));
-    this.modeManager.addMode("subtract", new SubtractMode(map, this.store, this.options));
-    this.modeManager.addMode("drag", new DragMode(map, this.store, this.options));
-    this.modeManager.addMode("scale", new ScaleMode(map, this.store, this.options));
-    this.modeManager.addMode("rotate", new RotateMode(map, this.store, this.options));
-    this.modeManager.addMode("edit", new EditMode(this.map, this.store, this.options));
-    this.modeManager.addMode("delete", new DeleteMode(map, this.store));
-    this.map.on(ANVIL_EVENTS.CREATED, (e) => {
-      this.store.addLayer(e.layer);
-    });
-    this.map.on(ANVIL_EVENTS.DELETED, (e) => {
-      this.store.removeLayer(e.layer);
-    });
-  }
-  enable(mode) {
-    this.modeManager.enable(mode);
-  }
-  disable() {
-    this.modeManager.disable();
-  }
-  getLayerGroup() {
-    return this.store.getGroup();
+  getLayers() {
+    return this.group.getLayers();
   }
 };
 
@@ -1931,101 +1941,133 @@ import * as L21 from "leaflet";
 var SVG_ATTRS = 'xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
 var ICONS = {
   // Marker: Map-Pin mit Punkt in der Mitte
-  "draw:marker": `<svg ${SVG_ATTRS}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>`,
+  ["marker" /* Marker */]: `<svg ${SVG_ATTRS}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>`,
   // Polyline: Kurvige Route mit Endpunkten
-  "draw:polyline": `<svg ${SVG_ATTRS}><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"/><circle cx="18" cy="5" r="3"/><circle cx="6" cy="19" r="3"/></svg>`,
+  ["polyline" /* Polyline */]: `<svg ${SVG_ATTRS}><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"/><circle cx="18" cy="5" r="3"/><circle cx="6" cy="19" r="3"/></svg>`,
   // Polygon: Klassische unregelmäßige 5-Eck-Form
-  "draw:polygon": `<svg ${SVG_ATTRS}><path d="m12 2 10 7-3 12H5l-3-12Z"/></svg>`,
+  ["polygon" /* Polygon */]: `<svg ${SVG_ATTRS}><path d="m12 2 10 7-3 12H5l-3-12Z"/></svg>`,
   // Rectangle: Horizontales Rechteck
-  "draw:rectangle": `<svg ${SVG_ATTRS}><rect width="20" height="12" x="2" y="6" rx="2"/></svg>`,
+  ["rectangle" /* Rectangle */]: `<svg ${SVG_ATTRS}><rect width="20" height="12" x="2" y="6" rx="2"/></svg>`,
   // Square: Quadratisches Rechteck (1:1)
-  "draw:square": `<svg ${SVG_ATTRS}><rect width="18" height="18" x="3" y="3" rx="2"/></svg>`,
+  ["square" /* Square */]: `<svg ${SVG_ATTRS}><rect width="18" height="18" x="3" y="3" rx="2"/></svg>`,
   // Triangle: Gleichschenkliges Dreieck
-  "draw:triangle": `<svg ${SVG_ATTRS}><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>`,
+  ["triangle" /* Triangle */]: `<svg ${SVG_ATTRS}><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>`,
   // Circle: Klassischer Kreis
-  "draw:circle": `<svg ${SVG_ATTRS}><circle cx="12" cy="12" r="10"/></svg>`,
+  ["circle" /* Circle */]: `<svg ${SVG_ATTRS}><circle cx="12" cy="12" r="10"/></svg>`,
   // Freehand: Geschwungene Signatur-Linie
-  "draw:freehand": `<svg ${SVG_ATTRS}><path d="m3 16 2 2 16-16"/><path d="M7 21h14"/><path d="M3 11c0 2 2 2 2 2z"/></svg>`,
+  ["freehand" /* Freehand */]: `<svg ${SVG_ATTRS}><path d="m3 16 2 2 16-16"/><path d="M7 21h14"/><path d="M3 11c0 2 2 2 2 2z"/></svg>`,
   // Cut: Offene Schere
-  "cut": `<svg ${SVG_ATTRS}><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M20 4 8.12 15.88"/><path d="M14.47 14.48 20 20"/><path d="M8.12 8.12 12 12"/></svg>`,
+  ["cut" /* Cut */]: `<svg ${SVG_ATTRS}><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M20 4 8.12 15.88"/><path d="M14.47 14.48 20 20"/><path d="M8.12 8.12 12 12"/></svg>`,
   // Split: Linie, die eine Form teilt
-  "split": `<svg ${SVG_ATTRS}><path d="M3 12h18"/><path d="M8 3v18"/><path d="M16 3v18"/><rect width="18" height="18" x="3" y="3" rx="2" stroke-dasharray="4 4" opacity="0.5"/></svg>`,
+  ["split" /* Split */]: `<svg ${SVG_ATTRS}><path d="M3 12h18"/><path d="M8 3v18"/><path d="M16 3v18"/><rect width="18" height="18" x="3" y="3" rx="2" stroke-dasharray="4 4" opacity="0.5"/></svg>`,
   // Union: Zwei verschmolzene Rechtecke
-  "union": `<svg ${SVG_ATTRS}><path d="M8 4H4v4"/><path d="M4 12v4a2 2 0 0 0 2 2h4"/><path d="M14 18h4v-4"/><path d="M20 10V6a2 2 0 0 0-2-2h-4"/><path d="M14 10h-4v4" stroke-dasharray="2 2"/></svg>`,
+  ["union" /* Union */]: `<svg ${SVG_ATTRS}><path d="M8 4H4v4"/><path d="M4 12v4a2 2 0 0 0 2 2h4"/><path d="M14 18h4v-4"/><path d="M20 10V6a2 2 0 0 0-2-2h-4"/><path d="M14 10h-4v4" stroke-dasharray="2 2"/></svg>`,
   // Subtract: Hauptform mit "ausgeschnittenem" Bereich (Minus-Metapher)
-  "subtract": `<svg ${SVG_ATTRS}><path d="M4 4h16v16H4z"/><path d="M10 10h10v10H10z" stroke-dasharray="2 2" opacity="0.7"/><path d="M15 6h-6"/></svg>`,
+  ["subtract" /* Subtract */]: `<svg ${SVG_ATTRS}><path d="M4 4h16v16H4z"/><path d="M10 10h10v10H10z" stroke-dasharray="2 2" opacity="0.7"/><path d="M15 6h-6"/></svg>`,
   // Drag: Vier-Wege-Pfeil (Move-Metapher)
-  "drag": `<svg ${SVG_ATTRS}><path d="m5 9-3 3 3 3"/><path d="m9 5 3-3 3 3"/><path d="m15 19 3 3 3-3"/><path d="m19 9 3 3-3 3"/><path d="M2 12h20"/><path d="M12 2v20"/></svg>`,
+  ["drag" /* Drag */]: `<svg ${SVG_ATTRS}><path d="m5 9-3 3 3 3"/><path d="m9 5 3-3 3 3"/><path d="m15 19 3 3 3-3"/><path d="m19 9 3 3-3 3"/><path d="M2 12h20"/><path d="M12 2v20"/></svg>`,
   // Scale: Diagonal-Pfeile (Maximize-Metapher)
-  "scale": `<svg ${SVG_ATTRS}><path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="M21 3 14 10"/><path d="M3 21l7-7"/></svg>`,
+  ["scale" /* Scale */]: `<svg ${SVG_ATTRS}><path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="M21 3 14 10"/><path d="M3 21l7-7"/></svg>`,
   // Rotate: Kreispfeil mit Ziel-Icon
-  "rotate": `<svg ${SVG_ATTRS}><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>`,
+  ["rotate" /* Rotate */]: `<svg ${SVG_ATTRS}><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>`,
   // Edit: Stift, der über einen Pfad zeichnet
-  "edit": `<svg ${SVG_ATTRS}><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>`,
+  ["edit" /* Edit */]: `<svg ${SVG_ATTRS}><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>`,
   // Delete: Mülleimer mit Deckel und Schlitzen
-  "delete": `<svg ${SVG_ATTRS}><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
+  ["delete" /* Delete */]: `<svg ${SVG_ATTRS}><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
   // Off: Durchgestrichener Kreis (Power-Off/Disable Metapher)
-  "off": `<svg ${SVG_ATTRS}><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`
+  ["off" /* Off */]: `<svg ${SVG_ATTRS}><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`
 };
 var AnvilControl = class extends L21.Control {
   constructor(anvil, options) {
     super(L21.Util.extend({ position: "topleft" }, options));
     __publicField(this, "_btns", {});
     __publicField(this, "_anvil");
+    __publicField(this, "_options");
     this._anvil = anvil;
+    this._options = { ...options };
   }
   onAdd(map) {
     console.log("AnvilControl: triggering onAdd");
-    const container = L21.DomUtil.create("div", "leaflet-bar anvil-toolbar");
-    container.style.backgroundColor = "white";
+    const container = L21.DomUtil.create("div", "anvil-toolbar-container");
     container.style.display = "flex";
     container.style.flexDirection = "column";
-    const modes = [
-      { id: "draw:marker", title: "Marker" },
-      { id: "draw:polyline", title: "Line" },
-      { id: "draw:polygon", title: "Polygon" },
-      { id: "draw:rectangle", title: "Rectangle" },
-      { id: "draw:square", title: "Square" },
-      { id: "draw:triangle", title: "Triangle" },
-      { id: "draw:circle", title: "Circle" },
-      { id: "draw:freehand", title: "Freehand" },
-      { id: "cut", title: "Cut" },
-      { id: "split", title: "Split" },
-      { id: "union", title: "Union" },
-      { id: "subtract", title: "Subtract" },
-      { id: "drag", title: "Drag" },
-      { id: "scale", title: "Scale" },
-      { id: "rotate", title: "Rotate" },
-      { id: "edit", title: "Edit" },
-      { id: "delete", title: "Delete" },
-      { id: "off", title: "Turn Off" }
+    container.style.gap = "10px";
+    const allModeConfigs = [
+      { id: "marker" /* Marker */, title: "Marker" },
+      { id: "polyline" /* Polyline */, title: "Line" },
+      { id: "polygon" /* Polygon */, title: "Polygon" },
+      { id: "rectangle" /* Rectangle */, title: "Rectangle" },
+      { id: "square" /* Square */, title: "Square" },
+      { id: "triangle" /* Triangle */, title: "Triangle" },
+      { id: "circle" /* Circle */, title: "Circle" },
+      { id: "freehand" /* Freehand */, title: "Freehand" },
+      { id: "cut" /* Cut */, title: "Cut" },
+      { id: "split" /* Split */, title: "Split" },
+      { id: "union" /* Union */, title: "Union" },
+      { id: "subtract" /* Subtract */, title: "Subtract" },
+      { id: "drag" /* Drag */, title: "Drag" },
+      { id: "scale" /* Scale */, title: "Scale" },
+      { id: "rotate" /* Rotate */, title: "Rotate" },
+      { id: "edit" /* Edit */, title: "Edit" },
+      { id: "delete" /* Delete */, title: "Delete" }
     ];
-    modes.forEach((mode) => {
-      const btn = L21.DomUtil.create("a", "anvil-control-btn", container);
-      btn.innerHTML = ICONS[mode.id] || mode.title;
-      btn.href = "#";
-      btn.title = mode.title;
-      btn.style.display = "flex";
-      btn.style.alignItems = "center";
-      btn.style.justifyContent = "center";
-      btn.style.width = "30px";
-      btn.style.height = "30px";
-      btn.style.color = "#333";
-      btn.style.cursor = "pointer";
-      L21.DomEvent.disableClickPropagation(btn);
-      L21.DomEvent.on(btn, "click", (e) => {
-        L21.DomEvent.preventDefault(e);
-        if (mode.id === "off") {
-          this._anvil.disable();
-        } else {
-          this._anvil.enable(mode.id);
-        }
+    const modesInput = this._options.modes || allModeConfigs.map((m) => m.id);
+    const blocks = Array.isArray(modesInput[0]) ? modesInput : [modesInput];
+    blocks.forEach((block, index) => {
+      const group = L21.DomUtil.create("div", "leaflet-bar anvil-toolbar-group", container);
+      group.style.display = "flex";
+      group.style.flexDirection = "column";
+      group.style.backgroundColor = "white";
+      block.forEach((modeId) => {
+        const config = allModeConfigs.find((c) => c.id === modeId);
+        if (!config && modeId !== "off" /* Off */) return;
+        const id = modeId;
+        const title = config ? config.title : "Turn Off";
+        const btn = L21.DomUtil.create("a", "anvil-control-btn", group);
+        btn.innerHTML = ICONS[id] || title;
+        btn.href = "#";
+        btn.title = title;
+        btn.style.display = "flex";
+        btn.style.alignItems = "center";
+        btn.style.justifyContent = "center";
+        btn.style.width = "30px";
+        btn.style.height = "30px";
+        btn.style.color = "#333";
+        btn.style.cursor = "pointer";
+        L21.DomEvent.disableClickPropagation(btn);
+        L21.DomEvent.on(btn, "click", (e) => {
+          L21.DomEvent.preventDefault(e);
+          if (id === "off" /* Off */) {
+            this._anvil.disable();
+          } else {
+            this._anvil.enable(id);
+          }
+        });
+        this._btns[id] = btn;
       });
-      this._btns[mode.id] = btn;
+      if (index === blocks.length - 1 && !this._btns["off" /* Off */]) {
+        const offBtn = L21.DomUtil.create("a", "anvil-control-btn", group);
+        offBtn.innerHTML = ICONS["off" /* Off */];
+        offBtn.href = "#";
+        offBtn.title = "Turn Off";
+        offBtn.style.display = "flex";
+        offBtn.style.alignItems = "center";
+        offBtn.style.justifyContent = "center";
+        offBtn.style.width = "30px";
+        offBtn.style.height = "30px";
+        offBtn.style.color = "#333";
+        offBtn.style.cursor = "pointer";
+        L21.DomEvent.disableClickPropagation(offBtn);
+        L21.DomEvent.on(offBtn, "click", (e) => {
+          L21.DomEvent.preventDefault(e);
+          this._anvil.disable();
+        });
+        this._btns["off" /* Off */] = offBtn;
+      }
     });
     const updateFn = (m) => {
       for (const id in this._btns) {
-        const active = id === m || id === "off" && !m;
+        const active = id === m || id === "off" /* Off */ && !m;
         this._btns[id].style.backgroundColor = active ? "#eee" : "#fff";
       }
     };
@@ -2038,6 +2080,99 @@ function anvilControl(anvil, options) {
   return new AnvilControl(anvil, options);
 }
 
+// src/anvil.ts
+var Anvil = class {
+  constructor(map, options) {
+    this.map = map;
+    __publicField(this, "modeManager");
+    __publicField(this, "store");
+    __publicField(this, "options");
+    __publicField(this, "control");
+    this.options = {
+      snapping: false,
+      snapDistance: 10,
+      preventSelfIntersection: false,
+      controlPosition: "topleft",
+      ...options
+    };
+    this.store = new LayerStore(map, this.options.layerGroup);
+    this.modeManager = new ModeManager(map);
+    const modesFromOptions = this.options.modes || Object.values(AnvilMode);
+    const flattenedModes = modesFromOptions.flat();
+    if (flattenedModes.includes("polygon" /* Polygon */)) {
+      this.modeManager.addMode("polygon" /* Polygon */, new DrawPolygonMode(this.map, this.options, this.store));
+    }
+    if (flattenedModes.includes("polyline" /* Polyline */)) {
+      this.modeManager.addMode("polyline" /* Polyline */, new DrawPolylineMode(this.map, this.options, this.store));
+    }
+    if (flattenedModes.includes("marker" /* Marker */)) {
+      this.modeManager.addMode("marker" /* Marker */, new DrawMarkerMode(this.map, this.options, this.store));
+    }
+    if (flattenedModes.includes("rectangle" /* Rectangle */)) {
+      this.modeManager.addMode("rectangle" /* Rectangle */, new DrawRectangleMode(this.map, this.options, this.store));
+    }
+    if (flattenedModes.includes("square" /* Square */)) {
+      this.modeManager.addMode("square" /* Square */, new DrawSquareMode(this.map, this.options, this.store));
+    }
+    if (flattenedModes.includes("triangle" /* Triangle */)) {
+      this.modeManager.addMode("triangle" /* Triangle */, new DrawTriangleMode(this.map, this.options, this.store));
+    }
+    if (flattenedModes.includes("circle" /* Circle */)) {
+      this.modeManager.addMode("circle" /* Circle */, new DrawCircleMode(this.map, this.options, this.store));
+    }
+    if (flattenedModes.includes("freehand" /* Freehand */)) {
+      this.modeManager.addMode("freehand" /* Freehand */, new FreehandMode(this.map, this.store, this.options));
+    }
+    if (flattenedModes.includes("cut" /* Cut */)) {
+      this.modeManager.addMode("cut" /* Cut */, new CutMode(map, this.store, this.options));
+    }
+    if (flattenedModes.includes("split" /* Split */)) {
+      this.modeManager.addMode("split" /* Split */, new SplitMode(map, this.store, this.options));
+    }
+    if (flattenedModes.includes("union" /* Union */)) {
+      this.modeManager.addMode("union" /* Union */, new UnionMode(map, this.store, this.options));
+    }
+    if (flattenedModes.includes("subtract" /* Subtract */)) {
+      this.modeManager.addMode("subtract" /* Subtract */, new SubtractMode(map, this.store, this.options));
+    }
+    if (flattenedModes.includes("drag" /* Drag */)) {
+      this.modeManager.addMode("drag" /* Drag */, new DragMode(map, this.store, this.options));
+    }
+    if (flattenedModes.includes("scale" /* Scale */)) {
+      this.modeManager.addMode("scale" /* Scale */, new ScaleMode(map, this.store, this.options));
+    }
+    if (flattenedModes.includes("rotate" /* Rotate */)) {
+      this.modeManager.addMode("rotate" /* Rotate */, new RotateMode(map, this.store, this.options));
+    }
+    if (flattenedModes.includes("edit" /* Edit */)) {
+      this.modeManager.addMode("edit" /* Edit */, new EditMode(this.map, this.store, this.options));
+    }
+    if (flattenedModes.includes("delete" /* Delete */)) {
+      this.modeManager.addMode("delete" /* Delete */, new DeleteMode(map, this.store));
+    }
+    this.map.on(ANVIL_EVENTS.CREATED, (e) => {
+      this.store.addLayer(e.layer);
+    });
+    this.map.on(ANVIL_EVENTS.DELETED, (e) => {
+      this.store.removeLayer(e.layer);
+    });
+    this.control = anvilControl(this, {
+      position: this.options.controlPosition,
+      modes: modesFromOptions
+    });
+    this.control?.addTo(this.map);
+  }
+  enable(mode) {
+    this.modeManager.enable(mode);
+  }
+  disable() {
+    this.modeManager.disable();
+  }
+  getLayerGroup() {
+    return this.store.getGroup();
+  }
+};
+
 // src/index.ts
 var leaflet = L22;
 leaflet.Anvil = Anvil;
@@ -2050,5 +2185,6 @@ export {
   ANVIL_EVENTS,
   Anvil,
   AnvilControl,
+  AnvilMode,
   anvilControl
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leaflet-anvil",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A minimal drawing and editing toolkit for Leaflet.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",