@edugis-org/webmapx 0.1.7 → 0.1.8

package/dist-lib/webmapx-draw-tool-DxQgUF1Q.js

@@ -0,0 +1,2117 @@
+import { t as e } from "./decorate-DnZTfaod.js";
+import { a as t, i as n, t as r } from "./zip.js-DVhmtjxZ.js";
+import { t as i } from "./webmapx-modal-tool-Cs7LRrgW.js";
+import { r as a } from "./map-layer-registry-2cmkiRDK.js";
+import { LitElement as o, css as s, html as c } from "lit";
+import { customElement as l, property as u, query as d, state as f } from "lit/decorators.js";
+import "@shoelace-style/shoelace/dist/components/button/button.js";
+import "@shoelace-style/shoelace/dist/components/icon/icon.js";
+import "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
+import "@shoelace-style/shoelace/dist/components/input/input.js";
+import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
+import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
+import "@shoelace-style/shoelace/dist/components/radio-group/radio-group.js";
+import "@shoelace-style/shoelace/dist/components/radio/radio.js";
+import "@shoelace-style/shoelace/dist/components/select/select.js";
+import "@shoelace-style/shoelace/dist/components/option/option.js";
+import "@shoelace-style/shoelace/dist/components/color-picker/color-picker.js";
+//#region src/components/webmapx-draw-layer-dialog.ts
+var p = {
+	Point: [
+		"string",
+		"number",
+		"longitude",
+		"latitude",
+		"linkURL",
+		"imageURL",
+		"create-time",
+		"update-time"
+	],
+	LineString: [
+		"string",
+		"number",
+		"length",
+		"linkURL",
+		"imageURL",
+		"create-time",
+		"update-time"
+	],
+	Polygon: [
+		"string",
+		"number",
+		"area",
+		"perimeter",
+		"longitude",
+		"latitude",
+		"linkURL",
+		"imageURL",
+		"create-time",
+		"update-time"
+	]
+}, m = [{
+	name: "id",
+	type: "number"
+}, {
+	name: "name",
+	type: "string"
+}], h = {
+	Point: "#0f62fe",
+	LineString: "#0f62fe",
+	Polygon: "#0f62fe"
+};
+function g(e) {
+	return {
+		id: `layer-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
+		name: "",
+		type: e,
+		color: h[e],
+		properties: m.map((e) => ({ ...e }))
+	};
+}
+var _ = class extends o {
+	constructor(...e) {
+		super(...e), this.geometryType = "Point", this.existingLayers = [], this.mapLayers = [], this.step = "select", this.selectedId = "new", this.layer = g("Point"), this.nameError = !1, this.newPropName = "", this.newPropType = "string", this.allowedAttributes = null;
+	}
+	static {
+		this.styles = s`
+        :host { display: block; }
+
+        sl-dialog::part(panel) {
+            min-width: min(420px, 90vw);
+        }
+
+        .layer-list {
+            display: flex;
+            flex-direction: column;
+            gap: 0.25rem;
+            max-height: 220px;
+            overflow-y: auto;
+            margin-bottom: 1rem;
+        }
+
+        .layer-option {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.4rem 0.6rem;
+            border-radius: 4px;
+            cursor: pointer;
+            border: 1px solid transparent;
+            font-size: 0.9rem;
+        }
+
+        .layer-option:hover { background: var(--sl-color-neutral-100); }
+
+        .layer-option.selected {
+            background: var(--sl-color-primary-100);
+            border-color: var(--sl-color-primary-400);
+        }
+
+        .color-dot {
+            width: 12px; height: 12px;
+            border-radius: 50%;
+            flex-shrink: 0;
+        }
+
+        .new-icon { color: var(--sl-color-neutral-500); font-size: 1rem; }
+
+        .prop-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 0.85rem;
+            margin-top: 0.5rem;
+        }
+
+        .prop-table th {
+            text-align: left;
+            background: var(--sl-color-neutral-100);
+            padding: 0.25rem 0.4rem;
+            border-bottom: 1px solid var(--sl-color-neutral-200);
+        }
+
+        .prop-table td {
+            padding: 0.2rem 0.4rem;
+            border-bottom: 1px solid var(--sl-color-neutral-100);
+            vertical-align: middle;
+        }
+
+        .prop-table tr:last-child td { border-bottom: none; }
+
+        .prop-row-auto td { color: var(--sl-color-neutral-400); font-style: italic; }
+
+        .type-computed { color: var(--sl-color-primary-600); font-size: 0.75rem; }
+
+        .add-row td { background: var(--sl-color-neutral-50); }
+
+        .add-row sl-input,
+        .add-row sl-select { font-size: 0.85rem; }
+
+        .name-input-row {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 0.75rem;
+        }
+
+        .color-swatch {
+            width: 32px; height: 32px;
+            border-radius: 4px;
+            border: 1px solid var(--sl-color-neutral-300);
+            cursor: pointer;
+            flex-shrink: 0;
+        }
+
+        .footer {
+            display: flex;
+            justify-content: flex-end;
+            gap: 0.5rem;
+            margin-top: 1rem;
+        }
+
+        .error-msg {
+            color: var(--sl-color-danger-600);
+            font-size: 0.8rem;
+            margin-top: 0.25rem;
+        }
+    `;
+	}
+	open() {
+		this.step = "select", this.selectedId = this.existingLayers.length === 0 ? "new" : this.existingLayers[0].id, this.layer = g(this.geometryType), this.newPropName = "", this.newPropType = "string", this.nameError = !1, this.dialog?.show();
+	}
+	close() {
+		this.dialog?.hide();
+	}
+	selectOption(e) {
+		this.selectedId = e;
+	}
+	goToDetail() {
+		if (this.selectedId === "new") this.layer = g(this.geometryType), this.allowedAttributes = null;
+		else {
+			let e = this.existingLayers.find((e) => e.id === this.selectedId);
+			if (e) this.layer = {
+				...e,
+				properties: e.properties.map((e) => ({ ...e }))
+			}, this.allowedAttributes = null;
+			else {
+				let e = this.mapLayers.find((e) => e.layerId === this.selectedId);
+				this.layer = {
+					...g(this.geometryType),
+					name: e?.label ?? this.selectedId,
+					properties: e?.properties?.map((e) => ({ ...e })) ?? m.map((e) => ({ ...e })),
+					borrowedSourceId: e?.sourceId
+				}, this.allowedAttributes = e?.allowedAttributes ?? null;
+			}
+		}
+		this.step = "detail", this.updateComplete.then(() => this.renderRoot.querySelector("sl-input[name=\"layername\"]")?.focus());
+	}
+	goBack() {
+		this.step = "select";
+	}
+	addProperty() {
+		this.newPropName.trim() && (this.layer = {
+			...this.layer,
+			properties: [...this.layer.properties, {
+				name: this.newPropName.trim(),
+				type: this.newPropType
+			}]
+		}, this.newPropName = "", this.newPropType = "string");
+	}
+	removeProperty(e) {
+		let t = [...this.layer.properties];
+		t.splice(e, 1), this.layer = {
+			...this.layer,
+			properties: t
+		};
+	}
+	confirm() {
+		let e = this.renderRoot.querySelector("sl-input[name=\"layername\"]")?.value?.trim() ?? this.layer.name;
+		if (!e) {
+			this.nameError = !0, this.requestUpdate();
+			return;
+		}
+		this.nameError = !1;
+		let t = this.newPropName.trim(), n = t ? [...this.layer.properties, {
+			name: t,
+			type: this.newPropType
+		}] : [...this.layer.properties], r = {
+			...this.layer,
+			name: e,
+			properties: n
+		};
+		this.dispatchEvent(new CustomEvent("webmapx-draw-layer-confirm", {
+			detail: r,
+			bubbles: !0,
+			composed: !0
+		})), this.dialog.hide();
+	}
+	cancel() {
+		this.dispatchEvent(new CustomEvent("webmapx-draw-layer-cancel", {
+			bubbles: !0,
+			composed: !0
+		})), this.dialog.hide();
+	}
+	renderSelectStep() {
+		let e = this.geometryType === "LineString" ? "Line" : this.geometryType;
+		return c`
+            <div class="layer-list">
+                <div class="layer-option ${this.selectedId === "new" ? "selected" : ""}"
+                     @click=${() => this.selectOption("new")}
+                     @dblclick=${() => {
+			this.selectOption("new"), this.goToDetail();
+		}}>
+                    <span class="new-icon">＋</span>
+                    <span>New ${e} layer</span>
+                </div>
+                ${this.existingLayers.map((e) => c`
+                    <div class="layer-option ${this.selectedId === e.id ? "selected" : ""}"
+                         @click=${() => this.selectOption(e.id)}
+                         @dblclick=${() => {
+			this.selectOption(e.id), this.goToDetail();
+		}}>
+                        <span class="color-dot" style="background:${e.color}"></span>
+                        <span>${e.name}</span>
+                    </div>
+                `)}
+                ${this.mapLayers.length > 0 ? c`
+                    <div style="font-size:0.72rem;color:var(--sl-color-neutral-500);padding:0.4rem 0.2rem 0.1rem;text-transform:uppercase;letter-spacing:0.05em">Map layers</div>
+                    ${this.mapLayers.map((e) => c`
+                        <div class="layer-option ${this.selectedId === e.layerId ? "selected" : ""}"
+                             @click=${() => this.selectOption(e.layerId)}
+                             @dblclick=${() => {
+			this.selectOption(e.layerId), this.goToDetail();
+		}}>
+                            <span class="new-icon" style="color:var(--sl-color-warning-600)">✎</span>
+                            <span>${e.label}</span>
+                            <span style="font-size:0.7rem;color:var(--sl-color-neutral-400);margin-left:auto">map layer</span>
+                        </div>
+                    `)}
+                ` : ""}
+            </div>
+            <div class="footer">
+                <sl-button @click=${this.cancel}>Cancel</sl-button>
+                <sl-button autofocus variant="primary" @click=${this.goToDetail}>Next →</sl-button>
+            </div>
+        `;
+	}
+	renderDetailStep() {
+		let e = p[this.geometryType], t = {
+			longitude: "longitude (auto)",
+			latitude: "latitude (auto)",
+			area: "area (auto)",
+			perimeter: "perimeter (auto)",
+			length: "length (auto)",
+			linkURL: "link URL",
+			imageURL: "image URL",
+			"create-time": "create-time (auto)",
+			"update-time": "update-time (auto)"
+		};
+		return c`
+            <div class="name-input-row">
+                <sl-input name="layername"
+                    style="flex:1"
+                    placeholder="Layer name"
+                    aria-label="Layer name"
+                    value=${this.layer.name}
+                    @keydown=${(e) => e.key === "Enter" && this.renderRoot.querySelector("#new-prop-name")?.focus()}
+                ></sl-input>
+                <div class="color-swatch"
+                     style="background:${this.layer.color}"
+                     title="Layer color"
+                     @click=${() => this.renderRoot.querySelector("input[type=color]")?.click()}>
+                </div>
+                <input type="color" style="display:none" .value=${this.layer.color}
+                    @input=${(e) => {
+			this.layer = {
+				...this.layer,
+				color: e.target.value
+			};
+		}}>
+            </div>
+            ${this.nameError ? c`<div class="error-msg">Enter a layer name.</div>` : ""}
+
+            <table class="prop-table">
+                <thead>
+                    <tr><th>Property</th><th>Type</th><th style="width:2rem"></th></tr>
+                </thead>
+                <tbody>
+                    ${this.layer.properties.map((e, t) => c`
+                        <tr class="${e.name === "id" ? "prop-row-auto" : ""}">
+                            <td>${e.name}</td>
+                            <td class="${[
+			"string",
+			"number",
+			"linkURL",
+			"imageURL"
+		].includes(e.type) ? "" : "type-computed"}">${e.type}${e.name === "id" ? " (auto)" : ""}</td>
+                            <td>
+                                ${t === 0 ? "" : c`
+                                    <sl-icon-button name="x" @click=${() => this.removeProperty(t)}></sl-icon-button>
+                                `}
+                            </td>
+                        </tr>
+                    `)}
+                    <tr class="add-row">
+                        <td>
+                            ${this.allowedAttributes ? c`
+                                <sl-select id="new-prop-name" size="small" aria-label="Property name"
+                                    .value=${this.newPropName}
+                                    @sl-change=${(e) => this.newPropName = e.target.value}>
+                                    <sl-option value="">— select —</sl-option>
+                                    ${this.allowedAttributes.filter((e) => !this.layer.properties.find((t) => t.name === e)).map((e) => c`<sl-option value=${e}>${e}</sl-option>`)}
+                                </sl-select>
+                            ` : c`
+                                <sl-input id="new-prop-name" size="small" placeholder="property name" aria-label="Property name"
+                                    .value=${this.newPropName}
+                                    @sl-input=${(e) => this.newPropName = e.target.value}
+                                    @keydown=${(e) => e.key === "Enter" && this.addProperty()}>
+                                </sl-input>
+                            `}
+                        </td>
+                        <td>
+                            <sl-select id="new-prop-type" size="small" .value=${this.newPropType}
+                                @sl-change=${(e) => this.newPropType = e.target.value}>
+                                ${e.map((e) => c`<sl-option value=${e}>${t[e] ?? e}</sl-option>`)}
+                            </sl-select>
+                        </td>
+                        <td>
+                            <sl-icon-button name="plus" @click=${this.addProperty}></sl-icon-button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <div class="footer">
+                <sl-button @click=${this.goBack}>← Back</sl-button>
+                <sl-button @click=${this.cancel}>Cancel</sl-button>
+                <sl-button variant="primary" @click=${this.confirm}>OK</sl-button>
+            </div>
+        `;
+	}
+	render() {
+		let e = this.geometryType === "LineString" ? "Line" : this.geometryType;
+		return c`
+            <sl-dialog label="${this.step === "select" ? `Select ${e} layer` : `Configure ${e} layer`}"
+                       @sl-request-close=${(e) => {
+			e.detail?.source === "overlay" && this.cancel();
+		}}>
+                ${this.step === "select" ? this.renderSelectStep() : this.renderDetailStep()}
+            </sl-dialog>
+        `;
+	}
+};
+e([u({ type: String })], _.prototype, "geometryType", void 0), e([u({ attribute: !1 })], _.prototype, "existingLayers", void 0), e([u({ attribute: !1 })], _.prototype, "mapLayers", void 0), e([f()], _.prototype, "step", void 0), e([f()], _.prototype, "selectedId", void 0), e([f()], _.prototype, "layer", void 0), e([f()], _.prototype, "nameError", void 0), e([f()], _.prototype, "newPropName", void 0), e([f()], _.prototype, "newPropType", void 0), e([f()], _.prototype, "allowedAttributes", void 0), e([d("sl-dialog")], _.prototype, "dialog", void 0), _ = e([l("webmapx-draw-layer-dialog")], _);
+//#endregion
+//#region src/utils/snap-utils.ts
+function v(e) {
+	return e.type === "Point" ? [e.coordinates] : e.type === "MultiPoint" || e.type === "LineString" ? e.coordinates : e.type === "MultiLineString" || e.type === "Polygon" ? e.coordinates.flat() : e.type === "MultiPolygon" ? e.coordinates.flat(2) : [];
+}
+function y(e) {
+	let t = [], n = (e) => {
+		for (let n = 0; n < e.length - 1; n++) t.push([e[n], e[n + 1]]);
+	};
+	return e.type === "LineString" ? n(e.coordinates) : e.type === "MultiLineString" ? e.coordinates.forEach((e) => n(e)) : e.type === "Polygon" ? e.coordinates.forEach((e) => n(e)) : e.type === "MultiPolygon" && e.coordinates.forEach((e) => e.forEach((e) => n(e))), t;
+}
+function b(e, t, n, r = {}) {
+	let i = r.threshold ?? 16, a = r.edgePenalty ?? 8, o = null, s = i;
+	for (let r of t) {
+		for (let t of v(r)) {
+			let r = n(t), i = Math.hypot(r[0] - e[0], r[1] - e[1]);
+			i < s && (s = i, o = t);
+		}
+		for (let [t, i] of y(r)) {
+			let r = n(t), c = n(i), l = c[0] - r[0], u = c[1] - r[1], d = l * l + u * u;
+			if (d === 0) continue;
+			let f = Math.max(0, Math.min(1, ((e[0] - r[0]) * l + (e[1] - r[1]) * u) / d)), p = Math.hypot(r[0] + f * l - e[0], r[1] + f * u - e[1]);
+			p + a < s && (s = p + a, o = [t[0] + f * (i[0] - t[0]), t[1] + f * (i[1] - t[1])]);
+		}
+	}
+	return o;
+}
+//#endregion
+//#region src/components/webmapx-draw-tool.ts
+var x = "webmapx-draw-rubber-source", S = "webmapx-draw-rubber-line", C = "webmapx-draw-vertex-source", w = "webmapx-draw-vertex-layer";
+function T(e) {
+	return `webmapx-draw-src-${e}`;
+}
+function E(e) {
+	return `${e}-map`;
+}
+var D = "#888888", O = "#ff3b30", k = 10, A = "webmapx-draw-sel-source", j = "webmapx-draw-sel-point", M = "webmapx-draw-draft-source", N = "webmapx-draw-draft-points", P = "webmapx-draw-edit-vert-source", F = "webmapx-draw-edit-vert", I = "webmapx-draw-edit-mid-source", L = "webmapx-draw-edit-mid", R = "webmapx-draw-sel-vert-source", z = "webmapx-draw-sel-vert", B = 12, V = "webmapx-draw-snap-source", H = "webmapx-draw-snap-layer", U = 16, W = class extends i {
+	constructor(...e) {
+		super(...e), this.toolId = "draw", this.mode = "select", this.drawLayers = [], this.features = [], this.selectedFeatureId = null, this.helpText = "", this.pendingMode = null, this.uiVersion = 0, this.draftPoints = [], this.draftRedoStack = [], this.cursorPos = null, this.activeLayerIds = {}, this.history = [], this.historyIndex = -1, this.sharedLayersCreated = !1, this.createdDrawLayerIds = /* @__PURE__ */ new Set(), this.touchMQ = window.matchMedia("(pointer: coarse)"), this.isTouchDevice = this.touchMQ.matches, this.onTouchMQChange = (e) => {
+			this.isTouchDevice = e.matches;
+		}, this.snapEnabled = !0, this.altActive = !1, this.snapPos = null, this.lastCursorPx = null, this.editState = "none", this.editHandles = [], this.hoveredHandle = null, this.dragging = null, this.selectedHandle = null, this.featureDrag = null, this.unsubClick = null, this.unsubMove = null, this.unsubCtx = null, this.unsubDown = null, this.unsubUp = null, this.exportFilename = "draw-export", this.exportMode = "combined", this.onKeyDown = (e) => {
+			if (this.isRelevantTarget(e)) {
+				if (e.key === "Alt") {
+					e.preventDefault(), this.altActive || (this.altActive = !0, this.snapPos = null, this.updateRubberband(), this.updateSnapIndicator());
+					return;
+				}
+				if (!this.isTypingTarget(e)) {
+					if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "z") {
+						e.preventDefault(), this.undoOrDraftBack();
+						return;
+					}
+					if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "y") {
+						e.preventDefault(), this.redoOrDraftForward();
+						return;
+					}
+					(e.key === "Delete" || e.key === "Backspace") && (this.draftPoints.length > 0 ? (e.preventDefault(), this.removeLastDraftPoint()) : this.selectedHandle ? (e.preventDefault(), this.deleteSelectedVertex()) : this.selectedFeatureId && (e.preventDefault(), this.deleteSelected()));
+				}
+			}
+		}, this.onWindowBlur = () => {
+			this.altActive && (this.altActive = !1, (this.mode === "draw-point" || this.mode === "draw-line" || this.mode === "draw-polygon") && this.updateRubberband());
+		}, this.onKeyUp = (e) => {
+			e.key === "Alt" && (this.altActive = !1, (this.mode === "draw-point" || this.mode === "draw-line" || this.mode === "draw-polygon") && this.updateRubberband());
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.touchMQ.addEventListener("change", this.onTouchMQChange);
+	}
+	get effectiveSnap() {
+		return this.snapEnabled && !this.altActive;
+	}
+	static {
+		this.styles = s`
+        :host {
+            display: flex;
+            flex-direction: column;
+            padding: var(--webmapx-tool-padding, 0);
+            min-width: 200px;
+            max-height: var(--webmapx-draw-tool-max-height, 100%);
+            overflow: hidden;
+        }
+
+        .scroll-content {
+            flex: 1;
+            overflow-y: auto;
+            min-height: 0;
+        }
+
+        .toolbar {
+            display: flex;
+            gap: 0.25rem;
+            flex-wrap: wrap;
+            margin-bottom: 0.5rem;
+            flex-shrink: 0;
+        }
+
+        sl-icon-button[active]::part(base) {
+            color: var(--sl-color-primary-600);
+            background: var(--sl-color-primary-100);
+            border-radius: 4px;
+        }
+
+        .help {
+            font-size: 0.8rem;
+            color: var(--sl-color-neutral-600);
+            margin-bottom: 0.5rem;
+            min-height: 2.5em;
+        }
+
+        .layers-section {
+            margin-top: 0.5rem;
+        }
+
+        .section-label {
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            letter-spacing: 0.06em;
+            color: var(--sl-color-neutral-500);
+            margin-bottom: 0.25rem;
+        }
+
+        .layer-row {
+            display: flex;
+            align-items: center;
+            gap: 0.4rem;
+            padding: 0.2rem 0.4rem;
+            border-radius: 4px;
+            font-size: 0.85rem;
+            cursor: pointer;
+        }
+
+        .layer-row:hover {
+            background: var(--sl-color-neutral-100);
+        }
+
+        .remove-layer-btn {
+            font-size: 0.75rem;
+            opacity: 0;
+            transition: opacity 0.1s;
+        }
+
+        .layer-row:hover .remove-layer-btn {
+            opacity: 1;
+        }
+
+        .color-dot {
+            width: 10px; height: 10px;
+            border-radius: 50%;
+            flex-shrink: 0;
+        }
+
+        .layer-name { flex: 1; }
+
+        .layer-type {
+            font-size: 0.7rem;
+            color: var(--sl-color-neutral-500);
+        }
+
+        .features-section {
+            margin-top: 0.25rem;
+            max-height: 180px;
+            overflow-y: auto;
+        }
+
+        .feature-row {
+            display: flex;
+            align-items: center;
+            gap: 0.4rem;
+            padding: 0.2rem 0.6rem;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 0.82rem;
+        }
+
+        .feature-row:hover { background: var(--sl-color-neutral-100); }
+        .feature-row.selected { background: var(--sl-color-primary-100); }
+
+        .divider {
+            width: 1px; height: 1.2rem;
+            background: var(--sl-color-neutral-200);
+            margin: 0 0.1rem;
+        }
+
+        .prop-row { display: flex; gap: 0.4rem; align-items: center; font-size: 0.82rem; margin-bottom: 0.2rem; }
+        .prop-label { width: 80px; color: var(--sl-color-neutral-500); flex-shrink: 0; }
+        .prop-value { flex: 1; min-width: 0; }
+        .prop-link { display: block; width: 100%; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        .prop-img { max-width: 100%; max-height: 80px; border-radius: 3px; object-fit: cover; }
+        .prop-img-error { font-size: 0.75rem; color: var(--sl-color-danger-600, #c0392b); font-style: italic; }
+        .prop-url-wrap { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.2rem; }
+    `;
+	}
+	onActivate() {
+		if (this.adapter?.store.getState().mapLoaded) this.createSharedLayers();
+		else {
+			let e = this.adapter?.store.subscribe((t) => {
+				t.mapLoaded && (e?.(), this.createSharedLayers());
+			});
+		}
+		for (let e of this.drawLayers) this.createdDrawLayerIds.has(e.id) || (this.addMapLayersForDrawLayer(e), this.refreshDrawLayerSource(e.id)), e.borrowedSourceId && this.adapter?.getSource(e.borrowedSourceId)?.setData({
+			type: "FeatureCollection",
+			features: []
+		});
+		this.bindEvents(), window.addEventListener("keydown", this.onKeyDown, !0), window.addEventListener("keyup", this.onKeyUp), window.addEventListener("blur", this.onWindowBlur), this.setModeInternal("select");
+	}
+	onDeactivate() {
+		this.unbindEvents(), window.removeEventListener("keydown", this.onKeyDown, !0), window.removeEventListener("keyup", this.onKeyUp), window.removeEventListener("blur", this.onWindowBlur), this.altActive = !1;
+		for (let e of this.drawLayers) e.borrowedSourceId && this.restoreBorrowedLayer(e), this.suspendDrawLayerFromMap(e);
+		this.draftPoints = [], this.cursorPos = null, this.snapPos = null, this.lastCursorPx = null, this.dragging = null, this.featureDrag = null, this.selectedFeatureId = null, this.editState = "none", this.editHandles = [], this.hoveredHandle = null, this.adapter?.setPanEnabled(!0), this.adapter?.setDoubleClickZoomEnabled(!0), this.updateSelectedSource(), this.removeSharedLayers(), this.adapter?.setCursor("");
+	}
+	disconnectedCallback() {
+		this.touchMQ.removeEventListener("change", this.onTouchMQChange), this.removeAllMapLayers(), super.disconnectedCallback();
+	}
+	onMapAttached(e) {
+		super.onMapAttached(e);
+	}
+	onMapDetached() {
+		this.removeAllMapLayers(), super.onMapDetached();
+	}
+	createSharedLayers() {
+		if (!this.sharedLayersCreated) {
+			this.dispatch("webmapx-add-source", {
+				id: x,
+				config: {
+					type: "geojson",
+					data: {
+						type: "FeatureCollection",
+						features: []
+					}
+				}
+			}), this.dispatch("webmapx-add-source", {
+				id: C,
+				config: {
+					type: "geojson",
+					data: {
+						type: "FeatureCollection",
+						features: []
+					}
+				}
+			}), this.dispatch("webmapx-add-layer", {
+				id: S,
+				type: "line",
+				source: x,
+				metadata: {
+					isToolLayer: !0,
+					hideFromLegend: !0
+				},
+				paint: {
+					"line-color": "#0f62fe",
+					"line-width": 2,
+					"line-dasharray": [4, 4]
+				}
+			}), this.dispatch("webmapx-add-layer", {
+				id: w,
+				type: "circle",
+				source: C,
+				metadata: {
+					isToolLayer: !0,
+					hideFromLegend: !0
+				},
+				paint: {
+					"circle-radius": 8,
+					"circle-color": "transparent",
+					"circle-stroke-width": 2,
+					"circle-stroke-color": "#ff6600"
+				}
+			}), this.dispatch("webmapx-add-source", {
+				id: A,
+				config: {
+					type: "geojson",
+					data: {
+						type: "FeatureCollection",
+						features: []
+					}
+				}
+			}), this.dispatch("webmapx-add-layer", {
+				id: j,
+				type: "circle",
+				source: A,
+				metadata: {
+					isToolLayer: !0,
+					hideFromLegend: !0
+				},
+				paint: {
+					"circle-radius": k,
+					"circle-color": this.cssVar("--webmapx-draw-selected-color", O)
+				}
+			}), this.dispatch("webmapx-add-source", {
+				id: M,
+				config: {
+					type: "geojson",
+					data: {
+						type: "FeatureCollection",
+						features: []
+					}
+				}
+			}), this.dispatch("webmapx-add-layer", {
+				id: N,
+				type: "circle",
+				source: M,
+				metadata: {
+					isToolLayer: !0,
+					hideFromLegend: !0
+				},
+				paint: {
+					"circle-radius": 5,
+					"circle-color": "#fff",
+					"circle-stroke-width": 2,
+					"circle-stroke-color": "#0f62fe"
+				}
+			}), this.dispatch("webmapx-add-source", {
+				id: P,
+				config: {
+					type: "geojson",
+					data: {
+						type: "FeatureCollection",
+						features: []
+					}
+				}
+			}), this.dispatch("webmapx-add-layer", {
+				id: F,
+				type: "circle",
+				source: P,
+				metadata: {
+					isToolLayer: !0,
+					hideFromLegend: !0
+				},
+				paint: {
+					"circle-radius": 6,
+					"circle-color": "#fff",
+					"circle-stroke-width": 2,
+					"circle-stroke-color": "#0f62fe"
+				}
+			}), this.dispatch("webmapx-add-source", {
+				id: I,
+				config: {
+					type: "geojson",
+					data: {
+						type: "FeatureCollection",
+						features: []
+					}
+				}
+			}), this.dispatch("webmapx-add-layer", {
+				id: L,
+				type: "circle",
+				source: I,
+				metadata: {
+					isToolLayer: !0,
+					hideFromLegend: !0
+				},
+				paint: {
+					"circle-radius": 4,
+					"circle-color": "#fff",
+					"circle-stroke-width": 1.5,
+					"circle-stroke-color": "#0f62fe",
+					"circle-opacity": .7
+				}
+			}), this.dispatch("webmapx-add-source", {
+				id: R,
+				config: {
+					type: "geojson",
+					data: {
+						type: "FeatureCollection",
+						features: []
+					}
+				}
+			}), this.dispatch("webmapx-add-layer", {
+				id: z,
+				type: "circle",
+				source: R,
+				metadata: {
+					isToolLayer: !0,
+					hideFromLegend: !0
+				},
+				paint: {
+					"circle-radius": k,
+					"circle-color": this.cssVar("--webmapx-draw-selected-color", O),
+					"circle-stroke-width": 2,
+					"circle-stroke-color": "#fff"
+				}
+			}), this.dispatch("webmapx-add-source", {
+				id: V,
+				config: {
+					type: "geojson",
+					data: {
+						type: "FeatureCollection",
+						features: []
+					}
+				}
+			}), this.dispatch("webmapx-add-layer", {
+				id: H,
+				type: "circle",
+				source: V,
+				metadata: {
+					isToolLayer: !0,
+					hideFromLegend: !0
+				},
+				paint: {
+					"circle-radius": 7,
+					"circle-color": "#ffdd00",
+					"circle-stroke-width": 2,
+					"circle-stroke-color": "#fff",
+					"circle-opacity": .9
+				}
+			}), this.sharedLayersCreated = !0;
+			for (let e of this.drawLayers) this.addMapLayersForDrawLayer(e), this.refreshDrawLayerSource(e.id);
+		}
+	}
+	addMapLayersForDrawLayer(e) {
+		if (this.createdDrawLayerIds.has(e.id)) return;
+		let t = T(e.id);
+		this.dispatch("webmapx-add-source", {
+			id: t,
+			config: {
+				type: "geojson",
+				data: {
+					type: "FeatureCollection",
+					features: []
+				}
+			}
+		}), e.type === "Polygon" ? (this.dispatch("webmapx-add-layer", {
+			id: e.id,
+			type: "fill",
+			source: t,
+			title: e.name,
+			metadata: {
+				label: e.name,
+				legendRole: "overlay",
+				hideFromLegend: !0
+			},
+			paint: {
+				"fill-color": e.color,
+				"fill-opacity": .35
+			}
+		}), this.dispatch("webmapx-add-layer", {
+			id: `${e.id}-outline`,
+			type: "line",
+			source: t,
+			title: e.name,
+			metadata: {
+				label: e.name,
+				legendRole: "overlay",
+				hideFromLegend: !0
+			},
+			paint: {
+				"line-color": e.color,
+				"line-width": 2
+			}
+		})) : e.type === "LineString" ? this.dispatch("webmapx-add-layer", {
+			id: e.id,
+			type: "line",
+			source: t,
+			title: e.name,
+			metadata: {
+				label: e.name,
+				legendRole: "overlay",
+				hideFromLegend: !0
+			},
+			paint: {
+				"line-color": e.color,
+				"line-width": 2
+			}
+		}) : this.dispatch("webmapx-add-layer", {
+			id: e.id,
+			type: "circle",
+			source: t,
+			title: e.name,
+			metadata: {
+				label: e.name,
+				legendRole: "overlay",
+				hideFromLegend: !0
+			},
+			paint: {
+				"circle-radius": 6,
+				"circle-color": e.color,
+				"circle-stroke-width": 2,
+				"circle-stroke-color": "#fff"
+			}
+		}), this.createdDrawLayerIds.add(e.id), e.type === "Polygon" && this.createdDrawLayerIds.add(`${e.id}-outline`);
+	}
+	removeMapLayersForDrawLayer(e) {
+		e.type === "Polygon" && this.dispatch("webmapx-remove-layer", `${e.id}-outline`), this.dispatch("webmapx-remove-layer", e.id), this.dispatch("webmapx-remove-source", T(e.id)), this.adapter?.store && a(this.adapter.store, e.id), this.createdDrawLayerIds.delete(e.id), e.type === "Polygon" && this.createdDrawLayerIds.delete(`${e.id}-outline`);
+	}
+	removeSharedLayers() {
+		for (let e of [
+			S,
+			w,
+			j,
+			N,
+			F,
+			L,
+			z,
+			H
+		]) this.dispatch("webmapx-remove-layer", e);
+		for (let e of [
+			x,
+			C,
+			A,
+			M,
+			P,
+			I,
+			R,
+			V
+		]) this.dispatch("webmapx-remove-source", e);
+		this.sharedLayersCreated = !1;
+	}
+	removeAllMapLayers() {
+		this.removeSharedLayers();
+		for (let e of this.drawLayers) this.removeMapLayersForDrawLayer(e);
+		this.createdDrawLayerIds.clear();
+	}
+	refreshDrawLayerSource(e) {
+		let t = this.features.filter((t) => t.layerId === e).map((e) => ({
+			type: "Feature",
+			id: e.id,
+			geometry: {
+				type: e.type,
+				coordinates: e.coordinates
+			},
+			properties: e.properties
+		}));
+		this.dispatch("webmapx-set-source-data", {
+			id: T(e),
+			data: {
+				type: "FeatureCollection",
+				features: t
+			}
+		});
+	}
+	cssVar(e, t) {
+		return getComputedStyle(this).getPropertyValue(e).trim() || t;
+	}
+	get modKey() {
+		return /Mac|iPhone|iPad/.test(navigator.platform) ? "Cmd" : "Ctrl";
+	}
+	isTypingTarget(e) {
+		let t = e.composedPath()[0], n = t?.tagName?.toLowerCase();
+		return n === "input" || n === "textarea" || n === "sl-input" || n === "sl-textarea" || t?.isContentEditable === !0;
+	}
+	isRelevantTarget(e) {
+		let t = e.composedPath(), n = this.mapHost;
+		if (t.includes(this) || n && t.includes(n)) return !0;
+		let r = t[0];
+		return r === document.body || r === document.documentElement;
+	}
+	bindEvents() {
+		this.adapter && (this.unsubClick = this.adapter.events.on("click", (e) => this.handleClick(e)), this.unsubMove = this.adapter.events.on("pointer-move", (e) => this.handlePointerMove(e)), this.unsubCtx = this.adapter.events.on("contextmenu", (e) => this.handleContextMenu(e)), this.unsubDown = this.adapter.events.on("pointer-down", (e) => this.handlePointerDown(e)), this.unsubUp = this.adapter.events.on("pointer-up", (e) => this.handlePointerUp(e)));
+	}
+	unbindEvents() {
+		this.unsubClick?.(), this.unsubClick = null, this.unsubMove?.(), this.unsubMove = null, this.unsubCtx?.(), this.unsubCtx = null, this.unsubDown?.(), this.unsubDown = null, this.unsubUp?.(), this.unsubUp = null;
+	}
+	async requestDrawMode(e) {
+		let t = G(e);
+		if (!t) {
+			this.setModeInternal(e);
+			return;
+		}
+		if (this.activeLayerIds[t]) {
+			this.setModeInternal(e);
+			return;
+		}
+		await this.openLayerDialog(e);
+	}
+	async openLayerDialog(e) {
+		let t = G(e);
+		if (!t) return;
+		this.pendingMode = e;
+		let n = this.drawLayers.filter((e) => e.type === t && !e.borrowedSourceId), r = this.adapter ? await this.getEditableMapLayers(t) : [], i = this.activeLayerIds[t], a = this.drawLayers.find((e) => e.id === i && e.borrowedSourceId), o = a?.borrowedSourceId, s = o ? r.find((e) => e.sourceId === o)?.layerId : void 0;
+		if (a && s) {
+			let e = r.find((e) => e.layerId === s);
+			e && (e.properties = a.properties.map((e) => ({ ...e })));
+		}
+		this.layerDialog.geometryType = t, this.layerDialog.existingLayers = n, this.layerDialog.mapLayers = r, this.layerDialog.open(), s && (this.layerDialog.selectedId = s);
+	}
+	async getEditableMapLayers(e) {
+		if (!this.adapter) return [];
+		let t = this.adapter.store.getState().mapLayers ?? {}, n = /* @__PURE__ */ new Set(), r = [], i = this.activeLayerIds[e], a = new Set(this.drawLayers.filter((e) => e.borrowedSourceId && e.id !== i).map((e) => e.borrowedSourceId));
+		for (let [i, o] of Object.entries(t)) {
+			if (o.isToolLayer || this.createdDrawLayerIds.has(i)) continue;
+			let t = typeof o.sourceId == "string" ? o.sourceId : null;
+			if (!t || n.has(t) || a.has(t)) continue;
+			let s = this.adapter.getSourceData(t);
+			if (!s) continue;
+			let c = await this.resolveFeatureCollection(s);
+			if (typeof s == "string") {
+				let a = c?.features[0]?.geometry?.type, s = a ? this.geometryFamilyForGeoJSONType(a) : null, l = this.geometryFamilyForLayerType(o.layerType);
+				if ((s ?? l) !== e) continue;
+				n.add(t), r.push({
+					layerId: i,
+					sourceId: t,
+					label: o.label ?? i,
+					properties: o.properties ?? (c ? this.inferPropertyDefs(c) : void 0),
+					allowedAttributes: o.attributes?.allowedAttributes ?? void 0
+				});
+				continue;
+			}
+			let l = s.features[0]?.geometry?.type, u = l ? this.geometryFamilyForGeoJSONType(l) : null, d = this.geometryFamilyForLayerType(o.layerType);
+			(u ?? d) === e && (n.add(t), r.push({
+				layerId: i,
+				sourceId: t,
+				label: o.label ?? i,
+				properties: o.properties ?? this.inferPropertyDefs(s),
+				allowedAttributes: o.attributes?.allowedAttributes ?? void 0
+			}));
+		}
+		return r;
+	}
+	async resolveFeatureCollection(e) {
+		if (typeof e != "string") return e;
+		try {
+			let t = await fetch(e);
+			return t.ok ? await t.json() : null;
+		} catch {
+			return null;
+		}
+	}
+	geometryFamilyForGeoJSONType(e) {
+		return e === "Point" || e === "MultiPoint" ? "Point" : e === "LineString" || e === "MultiLineString" ? "LineString" : e === "Polygon" || e === "MultiPolygon" ? "Polygon" : null;
+	}
+	geometryFamilyForLayerType(e) {
+		return e === "circle" ? "Point" : e === "line" ? "LineString" : e === "fill" ? "Polygon" : null;
+	}
+	inferPropertyDefs(e) {
+		let t = e.features.find((e) => e.properties && Object.keys(e.properties).length > 0)?.properties;
+		return t ? Object.entries(t).map(([e, t]) => ({
+			name: e,
+			type: typeof t == "number" ? "number" : "string"
+		})) : [{
+			name: "id",
+			type: "number"
+		}, {
+			name: "name",
+			type: "string"
+		}];
+	}
+	setModeInternal(e) {
+		switch (this.mode = e, this.draftPoints = [], this.cursorPos = null, this.snapPos = null, this.lastCursorPx = null, this.updateRubberband(), e) {
+			case "select":
+				this.adapter?.setDoubleClickZoomEnabled(!0), this.adapter?.setCursor(""), this.editState = "none", this.editHandles = [], this.updateEditHandles(), this.helpText = "Click a feature to select it.";
+				break;
+			case "draw-point":
+			case "draw-line":
+			case "draw-polygon":
+				this.adapter?.setDoubleClickZoomEnabled(!1), this.editState = "none", this.editHandles = [], this.hoveredHandle = null, this.selectedFeatureId = null, this.updateEditHandles(), this.updateSelectedSource(), this.adapter?.setCursor("crosshair"), this.helpText = this.mode === "draw-point" ? "Click to place a point." : this.mode === "draw-line" ? "Click to add vertices. Right-click or double-click to finish." : "Click to add vertices. Click first point or double-click to close.";
+				break;
+		}
+	}
+	async handleLayerConfirm(e) {
+		let t = e.detail, n = this.activeLayerIds[t.type];
+		if (n && n !== t.id) {
+			let e = this.drawLayers.find((e) => e.id === n);
+			e && this.releaseLayer(e);
+		}
+		let r = this.drawLayers.findIndex((e) => e.id === t.id);
+		if (r >= 0) this.drawLayers = this.drawLayers.map((e, n) => n === r ? t : e);
+		else if (t.borrowedSourceId || (t = {
+			...t,
+			borrowedSourceId: this.createPermLayer(t)
+		}), this.drawLayers = [...this.drawLayers, t], this.addMapLayersForDrawLayer(t), t.borrowedSourceId && this.adapter) {
+			let e = this.adapter.getSourceData(t.borrowedSourceId), n = e ? await this.resolveFeatureCollection(e) : null;
+			if (n) {
+				let e = [];
+				for (let r of n.features) {
+					if (!r.geometry || !K(r.geometry.type)) continue;
+					let n = { ...r.properties };
+					e.push({
+						id: this.newId(),
+						layerId: t.id,
+						type: r.geometry.type,
+						coordinates: r.geometry.coordinates,
+						properties: n
+					});
+				}
+				if (this.features = [...this.features, ...e], t.properties.length <= 2) {
+					let e = this.inferPropertyDefs(n);
+					t = {
+						...t,
+						properties: e
+					}, this.drawLayers = this.drawLayers.map((e) => e.id === t.id ? t : e);
+				}
+			}
+			this.adapter.getSource(t.borrowedSourceId)?.setData({
+				type: "FeatureCollection",
+				features: []
+			});
+		}
+		this.activeLayerIds[t.type] = t.id, this.refreshDrawLayerSource(t.id);
+		let i = E(t.id);
+		if (this.adapter?.store) {
+			let e = this.adapter.store.getState().mapLayers ?? {}, n = e[i];
+			n && this.adapter.store.dispatch({ mapLayers: {
+				...e,
+				[i]: {
+					...n,
+					properties: t.properties
+				}
+			} }, "MAP");
+		}
+		this.pendingMode &&= (this.setModeInternal(this.pendingMode), null);
+	}
+	restoreBorrowedLayer(e) {
+		if (!e.borrowedSourceId || !this.adapter) return;
+		let t = this.features.filter((t) => t.layerId === e.id).map((e) => ({
+			type: "Feature",
+			geometry: {
+				type: e.type,
+				coordinates: e.coordinates
+			},
+			properties: { ...e.properties }
+		}));
+		this.adapter.getSource(e.borrowedSourceId)?.setData({
+			type: "FeatureCollection",
+			features: t
+		});
+	}
+	createPermLayer(e) {
+		let t = `webmapx-perm-src-${e.id}`;
+		this.dispatch("webmapx-add-source", {
+			id: t,
+			config: {
+				type: "geojson",
+				data: {
+					type: "FeatureCollection",
+					features: []
+				}
+			}
+		});
+		let n = E(e.id);
+		return e.type === "Polygon" ? (this.dispatch("webmapx-add-layer", {
+			id: n,
+			type: "fill",
+			source: t,
+			title: e.name,
+			metadata: {
+				label: e.name,
+				legendRole: "overlay",
+				properties: e.properties
+			},
+			paint: {
+				"fill-color": D,
+				"fill-opacity": .35
+			}
+		}), this.dispatch("webmapx-add-layer", {
+			id: `${n}-outline`,
+			type: "line",
+			source: t,
+			title: e.name,
+			metadata: {
+				label: e.name,
+				legendRole: "overlay",
+				hideFromLegend: !0,
+				properties: e.properties
+			},
+			paint: {
+				"line-color": D,
+				"line-width": 2
+			}
+		})) : e.type === "LineString" ? this.dispatch("webmapx-add-layer", {
+			id: n,
+			type: "line",
+			source: t,
+			title: e.name,
+			metadata: {
+				label: e.name,
+				legendRole: "overlay",
+				properties: e.properties
+			},
+			paint: {
+				"line-color": D,
+				"line-width": 2
+			}
+		}) : this.dispatch("webmapx-add-layer", {
+			id: n,
+			type: "circle",
+			source: t,
+			title: e.name,
+			metadata: {
+				label: e.name,
+				legendRole: "overlay",
+				properties: e.properties
+			},
+			paint: {
+				"circle-radius": 5,
+				"circle-color": D,
+				"circle-stroke-width": 1,
+				"circle-stroke-color": "#555"
+			}
+		}), t;
+	}
+	releaseBorrowedLayer(e) {
+		if (e.borrowedSourceId) {
+			this.restoreBorrowedLayer(e), this.removeMapLayersForDrawLayer(e), this.features = this.features.filter((t) => t.layerId !== e.id), this.drawLayers = this.drawLayers.filter((t) => t.id !== e.id);
+			for (let [t, n] of Object.entries(this.activeLayerIds)) n === e.id && delete this.activeLayerIds[t];
+		}
+	}
+	suspendDrawLayerFromMap(e) {
+		e.type === "Polygon" && this.dispatch("webmapx-remove-layer", `${e.id}-outline`), this.dispatch("webmapx-remove-layer", e.id), this.dispatch("webmapx-remove-source", T(e.id)), this.adapter?.store && a(this.adapter.store, e.id), this.createdDrawLayerIds.delete(e.id), e.type === "Polygon" && this.createdDrawLayerIds.delete(`${e.id}-outline`);
+	}
+	releaseLayer(e) {
+		this.releaseBorrowedLayer(e);
+	}
+	removeFromEditing(e) {
+		let t = this.activeLayerIds[e.type] === e.id;
+		this.releaseLayer(e), t && this.setModeInternal("select");
+	}
+	handleLayerCancel() {
+		this.pendingMode = null;
+	}
+	handleClick(e) {
+		let t = this.effectiveSnap && this.snapPos ? this.snapPos : e.coords, n = G(this.mode), r = n ? this.activeLayerIds[n] : null;
+		if (!(!r && this.mode !== "select")) {
+			if (this.mode === "draw-point") {
+				this.commitFeature({
+					id: this.newId(),
+					layerId: r,
+					type: "Point",
+					coordinates: t,
+					properties: this.defaultProperties(r)
+				});
+				return;
+			}
+			if (this.mode === "draw-line" || this.mode === "draw-polygon") {
+				if (this.draftPoints.length >= 2) {
+					let e = this.draftPoints[this.draftPoints.length - 1];
+					if (this.withinPixelThreshold(t, e, 10) || this.mode === "draw-polygon" && this.withinPixelThreshold(t, this.draftPoints[0], 14)) {
+						this.finishDraft(r);
+						return;
+					}
+				}
+				this.draftPoints.length === 0 && this.selectedFeatureId && (this.selectedFeatureId = null, this.editState = "none", this.editHandles = [], this.updateSelectedSource(), this.updateEditHandles()), this.draftPoints.push(t), this.draftRedoStack = [], this.uiVersion++, this.updateRubberband(), this.updateHelpTextDuring();
+				return;
+			}
+			if (this.mode === "select") {
+				let e = this.adapter.project(t), n = [e[0], e[1]], r = this.findFeatureAt(n, t);
+				r && r.id === this.selectedFeatureId && this.editState === "selected" && (J(r.type) || Y(r.type)) ? this.enterEditMode(r.id) : r && r.id === this.selectedFeatureId && this.editState === "editing" || (r ? (this.selectedFeatureId = r.id, this.editState = q(r.type) ? "editing" : "selected", this.editState === "selected" ? this.helpText = "Click again to edit vertices." : q(r.type) && (this.helpText = "Drag to move point."), this.updateSelectedSource(), this.updateEditHandles(), this.requestUpdate()) : this.editState === "editing" ? (this.editState = "selected", this.updateEditHandles(), this.requestUpdate()) : (this.selectedFeatureId = null, this.editState = "none", this.updateSelectedSource(), this.updateEditHandles(), this.requestUpdate()));
+			}
+		}
+	}
+	handlePointerMove(e) {
+		if (this.cursorPos = e.coords, this.featureDrag) {
+			let t = this.features.find((e) => e.id === this.featureDrag.featureId);
+			if (t) {
+				let n = e.coords[0] - this.featureDrag.startCoords[0], r = e.coords[1] - this.featureDrag.startCoords[1];
+				t.coordinates = this.translateCoordsGeoPreserving(this.featureDrag.origCoords, t.type, n, r, this.featureDrag.origCentroidLng, this.featureDrag.origCentroidLat), this.refreshDrawLayerSource(t.layerId), this.updateEditHandles(), this.updateSelectedSource();
+			}
+			return;
+		}
+		if (this.dragging) {
+			let t = this.features.find((e) => e.id === this.dragging.handle.featureId);
+			if (t) {
+				let n = e.coords;
+				if (this.effectiveSnap && this.features.length > 0) {
+					let r = this.adapter.project(e.coords), i = this.computeSnapExcluding([r[0], r[1]], this.dragging.handle.featureId, q(t.type));
+					this.snapPos = i, i && (n = i);
+				} else this.snapPos = null;
+				this.applyDragMove(t, this.dragging.handle, n), this.dragging.lastCoords = e.coords, this.refreshDrawLayerSource(t.layerId), this.updateEditHandles(), this.updateSelectedSource(), this.updateSnapIndicator();
+				let r = this.dragging.handle;
+				this.selectedHandle && r.kind === "vertex" && this.selectedHandle.featureId === r.featureId && this.selectedHandle.partIdx === r.partIdx && this.selectedHandle.ringIdx === r.ringIdx && this.selectedHandle.vertIdx === r.vertIdx && (this.selectedHandle.coords = r.coords, this.updateSelectedVertexSource());
+			}
+			return;
+		}
+		if (this.mode === "draw-point" || this.mode === "draw-line" || this.mode === "draw-polygon") {
+			if (this.effectiveSnap && this.features.length > 0) {
+				let t = this.adapter.project(e.coords), n = [t[0], t[1]];
+				(!this.lastCursorPx || Math.hypot(n[0] - this.lastCursorPx[0], n[1] - this.lastCursorPx[1]) > .5) && (this.lastCursorPx = n, this.snapPos = this.computeSnap(n));
+			} else this.snapPos = null;
+			this.updateRubberband();
+			return;
+		}
+		if (this.mode === "select") {
+			let t = this.adapter.project(e.coords), n = this.findFeatureAt([t[0], t[1]], e.coords);
+			this.editState === "selected" && this.selectedFeatureId ? this.adapter?.setCursor(n?.id === this.selectedFeatureId ? "grab" : "") : this.editState === "none" && this.adapter?.setCursor(n ? "pointer" : "");
+		}
+		if (this.mode === "select" && this.editState === "editing" && this.editHandles.length > 0) {
+			let t = this.adapter.project(e.coords), n = this.findHandleAt([t[0], t[1]]);
+			n !== this.hoveredHandle && (this.hoveredHandle = n, this.adapter?.setCursor(n ? "grab" : ""));
+		}
+	}
+	handlePointerDown(e) {
+		if (e.button !== 0) return;
+		if (this.editState === "selected" && this.selectedFeatureId) {
+			let t = [e.pixel[0], e.pixel[1]], n = this.findFeatureAt(t, e.coords);
+			if (n && n.id === this.selectedFeatureId) {
+				let t = this.centroid(n);
+				this.featureDrag = {
+					featureId: n.id,
+					startCoords: e.coords,
+					origCoords: JSON.parse(JSON.stringify(n.coordinates)),
+					origCentroidLat: t[1],
+					origCentroidLng: t[0]
+				}, this.adapter?.setPanEnabled(!1), this.adapter?.setCursor("grabbing");
+			}
+			return;
+		}
+		if (this.editState !== "editing") return;
+		let t = [e.pixel[0], e.pixel[1]], n = this.findHandleAt(t);
+		if (!n) {
+			this.selectedHandle && (this.selectedHandle = null, this.updateSelectedVertexSource());
+			return;
+		}
+		if (this.selectedHandle = n.kind === "vertex" ? n : null, this.updateSelectedVertexSource(), this.dragging = {
+			handle: n,
+			lastCoords: e.coords
+		}, this.adapter?.setPanEnabled(!1), this.adapter?.setCursor("grabbing"), n.kind === "midpoint") {
+			let t = this.features.find((e) => e.id === n.featureId);
+			if (t) {
+				this.insertVertex(t, n);
+				let r = n.afterVertIdx + 1, i = {
+					kind: "vertex",
+					featureId: n.featureId,
+					partIdx: n.partIdx,
+					ringIdx: n.ringIdx,
+					vertIdx: r,
+					coords: n.coords
+				};
+				this.dragging = {
+					handle: i,
+					lastCoords: e.coords
+				}, this.selectedHandle = i, this.updateSelectedVertexSource(), this.refreshDrawLayerSource(t.layerId), this.updateEditHandles();
+			}
+		}
+	}
+	handlePointerUp(e) {
+		if (this.featureDrag) {
+			let e = this.features.find((e) => e.id === this.featureDrag.featureId);
+			if (e) {
+				let t = this.drawLayers.find((t) => t.id === e.layerId);
+				t && this.computeSpecialProperties(e, t), this.pushHistory({
+					type: "update",
+					features: [{ ...e }]
+				}), this.features = [...this.features], this.refreshDrawLayerSource(e.layerId);
+			}
+			this.featureDrag = null, this.adapter?.setPanEnabled(!0), this.adapter?.setCursor("");
+			return;
+		}
+		if (!this.dragging) return;
+		this.snapPos = null, this.updateSnapIndicator(), this.adapter?.setPanEnabled(!0), this.adapter?.setCursor(this.hoveredHandle ? "grab" : "");
+		let t = this.features.find((e) => e.id === this.dragging.handle.featureId);
+		if (t) {
+			let e = this.drawLayers.find((e) => e.id === t.layerId);
+			e && this.computeSpecialProperties(t, e), this.pushHistory({
+				type: "update",
+				features: [{ ...t }]
+			}), this.features = [...this.features], this.refreshDrawLayerSource(t.layerId);
+		}
+		this.dragging = null;
+	}
+	handleContextMenu(e) {
+		let t = G(this.mode), n = t ? this.activeLayerIds[t] : null;
+		n && (this.mode === "draw-line" || this.mode === "draw-polygon") && this.finishDraft(n);
+	}
+	defaultProperties(e) {
+		let t = this.drawLayers.find((t) => t.id === e);
+		return t ? Object.fromEntries(t.properties.map((e) => [e.name, null])) : {};
+	}
+	finishDraft(e) {
+		let t = this.draftPoints;
+		if (this.mode === "draw-line" && t.length >= 2) this.commitFeature({
+			id: this.newId(),
+			layerId: e,
+			type: "LineString",
+			coordinates: t.map((e) => [e[0], e[1]]),
+			properties: this.defaultProperties(e)
+		}, t);
+		else if (this.mode === "draw-polygon" && t.length >= 3) {
+			let n = [...t.map((e) => [e[0], e[1]]), [t[0][0], t[0][1]]];
+			this.commitFeature({
+				id: this.newId(),
+				layerId: e,
+				type: "Polygon",
+				coordinates: [n],
+				properties: this.defaultProperties(e)
+			}, t);
+		}
+		this.draftPoints = [], this.draftRedoStack = [], this.cursorPos = null, this.updateRubberband();
+	}
+	computeSnap(e) {
+		return this.computeSnapExcluding(e, null, this.mode === "draw-point");
+	}
+	computeSnapExcluding(e, t, n) {
+		return this.adapter ? b(e, this.features.filter((e) => e.id !== t && !(n && q(e.type))), (e) => {
+			let t = this.adapter.project(e);
+			return [t[0], t[1]];
+		}, {
+			threshold: U,
+			edgePenalty: 8
+		}) : null;
+	}
+	updateSnapIndicator() {
+		if (!this.sharedLayersCreated) return;
+		let e = this.effectiveSnap && this.snapPos ? [{
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: this.snapPos
+			},
+			properties: {}
+		}] : [];
+		this.dispatch("webmapx-set-source-data", {
+			id: V,
+			data: {
+				type: "FeatureCollection",
+				features: e
+			}
+		});
+	}
+	updateRubberband() {
+		if (!this.sharedLayersCreated) return;
+		let e = [], t = [], n = this.mode === "draw-point" || this.mode === "draw-line" || this.mode === "draw-polygon", r = this.effectiveSnap && this.snapPos ? this.snapPos : this.cursorPos;
+		if (n && this.draftPoints.length > 0 && r) {
+			let n = [...this.draftPoints.map((e) => [e[0], e[1]]), [r[0], r[1]]];
+			e.push({
+				type: "Feature",
+				geometry: {
+					type: "LineString",
+					coordinates: n
+				},
+				properties: {}
+			});
+			for (let e of this.draftPoints) t.push({
+				type: "Feature",
+				geometry: {
+					type: "Point",
+					coordinates: [e[0], e[1]]
+				},
+				properties: {}
+			});
+		}
+		this.dispatch("webmapx-set-source-data", {
+			id: x,
+			data: {
+				type: "FeatureCollection",
+				features: e
+			}
+		}), this.dispatch("webmapx-set-source-data", {
+			id: M,
+			data: {
+				type: "FeatureCollection",
+				features: t
+			}
+		});
+		let i = n && this.effectiveSnap && this.snapPos ? [{
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: this.snapPos
+			},
+			properties: {}
+		}] : [];
+		this.dispatch("webmapx-set-source-data", {
+			id: V,
+			data: {
+				type: "FeatureCollection",
+				features: i
+			}
+		});
+	}
+	updateSelectedSource() {
+		if (!this.sharedLayersCreated) return;
+		let e = this.features.find((e) => e.id === this.selectedFeatureId), t = e && q(e.type) ? [{
+			type: "Feature",
+			id: e.id,
+			geometry: {
+				type: e.type,
+				coordinates: e.coordinates
+			},
+			properties: {}
+		}] : [];
+		this.dispatch("webmapx-set-source-data", {
+			id: A,
+			data: {
+				type: "FeatureCollection",
+				features: t
+			}
+		});
+	}
+	enterEditMode(e) {
+		this.editState = "editing", this.helpText = "Drag points to move. Drag midpoints to add a point. Click a point and press Delete to remove it. Click empty to exit.", this.updateEditHandles(), this.adapter?.setCursor("default"), this.requestUpdate();
+	}
+	computeHandles(e) {
+		let t = [];
+		if (e.type === "Point") return t.push({
+			kind: "vertex",
+			featureId: e.id,
+			partIdx: 0,
+			ringIdx: 0,
+			vertIdx: 0,
+			coords: e.coordinates
+		}), t;
+		if (e.type === "MultiPoint") return e.coordinates.forEach((n, r) => {
+			t.push({
+				kind: "vertex",
+				featureId: e.id,
+				partIdx: r,
+				ringIdx: 0,
+				vertIdx: 0,
+				coords: n
+			});
+		}), t;
+		let n = (n, r, i, a) => {
+			let o = a ? n.length - 1 : n.length;
+			for (let s = 0; s < o; s++) {
+				if (t.push({
+					kind: "vertex",
+					featureId: e.id,
+					partIdx: r,
+					ringIdx: i,
+					vertIdx: s,
+					coords: n[s]
+				}), !a && s === o - 1) continue;
+				let c = (s + 1) % o, l = [(n[s][0] + n[c][0]) / 2, (n[s][1] + n[c][1]) / 2];
+				t.push({
+					kind: "midpoint",
+					featureId: e.id,
+					partIdx: r,
+					ringIdx: i,
+					afterVertIdx: s,
+					coords: l
+				});
+			}
+		};
+		return e.type === "LineString" ? n(e.coordinates, 0, 0, !1) : e.type === "MultiLineString" ? e.coordinates.forEach((e, t) => n(e, t, 0, !1)) : e.type === "Polygon" ? e.coordinates.forEach((e, t) => n(e, 0, t, !0)) : e.type === "MultiPolygon" && e.coordinates.forEach((e, t) => {
+			e.forEach((e, r) => n(e, t, r, !0));
+		}), t;
+	}
+	updateEditHandles() {
+		if (!this.sharedLayersCreated) return;
+		let e = this.selectedFeatureId ? this.features.find((e) => e.id === this.selectedFeatureId) : null;
+		if (!e) {
+			this.editHandles = [], this.selectedHandle = null, this.updateSelectedVertexSource(), this.dispatch("webmapx-set-source-data", {
+				id: P,
+				data: {
+					type: "FeatureCollection",
+					features: []
+				}
+			}), this.dispatch("webmapx-set-source-data", {
+				id: I,
+				data: {
+					type: "FeatureCollection",
+					features: []
+				}
+			});
+			return;
+		}
+		this.selectedHandle && this.selectedHandle.featureId !== e.id && (this.selectedHandle = null, this.updateSelectedVertexSource()), this.editHandles = this.computeHandles(e);
+		let t = this.editState === "editing", n = this.editHandles.filter((e) => e.kind === "vertex").map((e) => ({
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: e.coords
+			},
+			properties: {}
+		})), r = t ? this.editHandles.filter((e) => e.kind === "midpoint").map((e) => ({
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: e.coords
+			},
+			properties: {}
+		})) : [];
+		this.dispatch("webmapx-set-source-data", {
+			id: P,
+			data: {
+				type: "FeatureCollection",
+				features: n
+			}
+		}), this.dispatch("webmapx-set-source-data", {
+			id: I,
+			data: {
+				type: "FeatureCollection",
+				features: r
+			}
+		});
+	}
+	findHandleAt(e) {
+		let t = null, n = B;
+		for (let r of this.editHandles) {
+			let i = this.adapter.project(r.coords), a = Math.hypot(e[0] - i[0], e[1] - i[1]);
+			a < n && (n = a, t = r);
+		}
+		return t;
+	}
+	applyDragMove(e, t, n) {
+		let r = JSON.parse(JSON.stringify(e.coordinates));
+		if (t.kind !== "vertex") return;
+		let { partIdx: i, ringIdx: a, vertIdx: o } = t;
+		if (e.type === "Point") {
+			e.coordinates = [n[0], n[1]], t.coords = n;
+			return;
+		} else if (e.type === "MultiPoint") r[i] = [n[0], n[1]];
+		else if (e.type === "LineString") r[o] = [n[0], n[1]];
+		else if (e.type === "MultiLineString") r[i][o] = [n[0], n[1]];
+		else if (e.type === "Polygon") {
+			r[a][o] = [n[0], n[1]];
+			let e = r[a];
+			o === 0 && (e[e.length - 1] = e[0]);
+		} else if (e.type === "MultiPolygon") {
+			r[i][a][o] = [n[0], n[1]];
+			let e = r[i][a];
+			o === 0 && (e[e.length - 1] = e[0]);
+		}
+		e.coordinates = r, t.coords = n;
+	}
+	translateCoordsGeoPreserving(e, t, n, r, i, a) {
+		if (!isFinite(a) || !isFinite(i)) return this.translateCoords(e, t, n, r);
+		let o = a + r, s = Math.cos(a * Math.PI / 180), c = Math.cos(o * Math.PI / 180), l = c > 1e-6 ? s / c : 1, u = i + n, d = (e) => [u + (e[0] - i) * l, e[1] + r];
+		return t === "Point" ? d(e) : t === "MultiPoint" || t === "LineString" ? e.map(d) : t === "MultiLineString" ? e.map((e) => e.map(d)) : t === "Polygon" ? e.map((e) => e.map(d)) : t === "MultiPolygon" ? e.map((e) => e.map((e) => e.map(d))) : e;
+	}
+	translateCoords(e, t, n, r) {
+		let i = (e) => [e[0] + n, e[1] + r];
+		return t === "Point" ? i(e) : t === "MultiPoint" || t === "LineString" ? e.map(i) : t === "MultiLineString" ? e.map((e) => e.map(i)) : t === "Polygon" ? e.map((e) => e.map(i)) : t === "MultiPolygon" ? e.map((e) => e.map((e) => e.map(i))) : e;
+	}
+	insertVertex(e, t) {
+		let n = JSON.parse(JSON.stringify(e.coordinates)), { partIdx: r, ringIdx: i, afterVertIdx: a } = t;
+		e.type === "LineString" ? n.splice(a + 1, 0, [t.coords[0], t.coords[1]]) : e.type === "MultiLineString" ? n[r].splice(a + 1, 0, [t.coords[0], t.coords[1]]) : e.type === "Polygon" ? n[i].splice(a + 1, 0, [t.coords[0], t.coords[1]]) : e.type === "MultiPolygon" && n[r][i].splice(a + 1, 0, [t.coords[0], t.coords[1]]), e.coordinates = n, this.pushHistory({
+			type: "update",
+			features: [{ ...e }]
+		});
+	}
+	updateSelectedVertexSource() {
+		if (this.uiVersion++, !this.sharedLayersCreated) return;
+		let e = this.selectedHandle ? [{
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: this.selectedHandle.coords
+			},
+			properties: {}
+		}] : [];
+		this.dispatch("webmapx-set-source-data", {
+			id: R,
+			data: {
+				type: "FeatureCollection",
+				features: e
+			}
+		});
+	}
+	deleteSelectedVertex() {
+		let e = this.selectedHandle;
+		if (!e) return;
+		let t = this.features.find((t) => t.id === e.featureId);
+		if (!t) return;
+		let n = JSON.parse(JSON.stringify(t.coordinates)), { partIdx: r, ringIdx: i, vertIdx: a } = e;
+		if (t.type === "LineString") {
+			if (n.length <= 2) return;
+			n.splice(a, 1);
+		} else if (t.type === "MultiLineString") {
+			if (n[r].length <= 2) return;
+			n[r].splice(a, 1);
+		} else if (t.type === "Polygon") {
+			let e = n[i];
+			if (e.length - 1 <= 3) return;
+			a === 0 || a === e.length - 1 ? (e.splice(e.length - 1, 1), e.splice(0, 1), e.push([...e[0]])) : e.splice(a, 1);
+		} else if (t.type === "MultiPolygon") {
+			let e = n[r][i];
+			if (e.length - 1 <= 3) return;
+			a === 0 || a === e.length - 1 ? (e.splice(e.length - 1, 1), e.splice(0, 1), e.push([...e[0]])) : e.splice(a, 1);
+		} else if (t.type === "MultiPoint") {
+			if (n.length <= 1) return;
+			n.splice(r, 1);
+		} else return;
+		t.coordinates = n;
+		let o = this.drawLayers.find((e) => e.id === t.layerId);
+		o && this.computeSpecialProperties(t, o), this.pushHistory({
+			type: "update",
+			features: [{ ...t }]
+		}), this.features = [...this.features], this.refreshDrawLayerSource(t.layerId), this.selectedHandle = null, this.updateSelectedVertexSource(), this.updateEditHandles();
+	}
+	commitFeature(e, t) {
+		let n = this.features.filter((t) => t.layerId === e.layerId).reduce((e, t) => {
+			let n = parseInt(String(t.properties.id ?? 0), 10);
+			return isNaN(n) ? e : Math.max(e, n);
+		}, 0);
+		e.properties.id = n + 1;
+		let r = this.drawLayers.find((t) => t.id === e.layerId);
+		if (r && this.computeSpecialProperties(e, r), r) for (let t of r.properties) t.type === "create-time" && (e.properties[t.name] = Date.now());
+		this.pushHistory(t ? {
+			type: "finish",
+			features: [e],
+			draftPoints: t.map((e) => [e[0], e[1]])
+		} : {
+			type: "add",
+			features: [e]
+		}), this.features = [...this.features, e], this.refreshDrawLayerSource(e.layerId), this.setModeInternal(this.mode), this.selectedFeatureId = e.id, this.editState = q(e.type) ? "editing" : "selected", this.updateSelectedSource(), this.updateEditHandles();
+	}
+	deleteSelected() {
+		if (!this.selectedFeatureId) return;
+		let e = this.features.filter((e) => e.id === this.selectedFeatureId);
+		this.pushHistory({
+			type: "delete",
+			features: e
+		}), this.features = this.features.filter((e) => e.id !== this.selectedFeatureId), new Set(e.map((e) => e.layerId)).forEach((e) => this.refreshDrawLayerSource(e)), this.selectedFeatureId = null, this.editState = "none", this.editHandles = [], this.adapter?.setCursor(""), this.updateSelectedSource(), this.updateEditHandles();
+	}
+	pushHistory(e) {
+		this.history = this.history.slice(0, this.historyIndex + 1), this.history.push(e), this.historyIndex = this.history.length - 1, this.uiVersion++;
+	}
+	removeLastDraftPoint() {
+		this.draftRedoStack.push(this.draftPoints.pop()), this.uiVersion++, this.updateRubberband(), this.updateHelpTextDuring();
+	}
+	undoOrDraftBack() {
+		this.draftPoints.length > 0 ? this.removeLastDraftPoint() : this.undo();
+	}
+	redoOrDraftForward() {
+		this.draftRedoStack.length > 0 ? (this.draftPoints.push(this.draftRedoStack.pop()), this.uiVersion++, this.updateRubberband(), this.updateHelpTextDuring()) : this.redo();
+	}
+	undo() {
+		if (this.historyIndex < 0) return;
+		let e = this.history[this.historyIndex--];
+		this.uiVersion++;
+		let t = /* @__PURE__ */ new Set();
+		if (e.type === "add" || e.type === "finish") {
+			let n = new Set(e.features.map((e) => e.id));
+			this.features = this.features.filter((e) => !n.has(e.id)), e.features.forEach((e) => t.add(e.layerId));
+		} else e.type === "delete" ? (this.features = [...this.features, ...e.features], e.features.forEach((e) => t.add(e.layerId))) : e.type === "update" && (this.features = this.features.map((n) => {
+			let r = e.features.find((e) => e.id === n.id);
+			return r ? (t.add(n.layerId), {
+				...n,
+				coordinates: r.coordinates
+			}) : n;
+		}));
+		if (this.selectedFeatureId = null, this.editState = "none", this.updateSelectedSource(), this.updateEditHandles(), t.forEach((e) => this.refreshDrawLayerSource(e)), e.type === "finish" && e.draftPoints) {
+			let t = e.features[0];
+			this.mode = t.type === "LineString" ? "draw-line" : "draw-polygon", this.draftPoints = e.draftPoints.map((e) => [e[0], e[1]]), this.draftRedoStack = [], this.cursorPos = this.draftPoints[this.draftPoints.length - 1], this.updateRubberband(), this.updateHelpTextDuring();
+		}
+	}
+	redo() {
+		if (this.historyIndex >= this.history.length - 1) return;
+		let e = this.history[++this.historyIndex];
+		this.uiVersion++;
+		let t = /* @__PURE__ */ new Set();
+		if (e.type === "add" || e.type === "finish") this.features = [...this.features, ...e.features], e.features.forEach((e) => t.add(e.layerId));
+		else if (e.type === "delete") {
+			let n = new Set(e.features.map((e) => e.id));
+			this.features = this.features.filter((e) => !n.has(e.id)), e.features.forEach((e) => t.add(e.layerId));
+		} else e.type === "update" && (this.features = this.features.map((n) => {
+			let r = e.features.find((e) => e.id === n.id);
+			return r ? (t.add(n.layerId), {
+				...n,
+				coordinates: r.coordinates
+			}) : n;
+		}));
+		if (t.forEach((e) => this.refreshDrawLayerSource(e)), e.type === "finish") {
+			let t = e.features[0];
+			this.draftPoints = [], this.draftRedoStack = [], this.cursorPos = null, this.selectedFeatureId = t.id, this.editState = q(t.type) ? "editing" : "selected", this.updateSelectedSource(), this.updateEditHandles(), this.updateRubberband();
+		}
+	}
+	exportGeoJSON() {
+		this.exportFilename = "draw-export", this.exportMode = "combined", this.exportDialog.show();
+	}
+	async doExport() {
+		this.exportDialog.hide();
+		let e = this.exportFilename.trim() || "draw-export";
+		if (this.drawLayers.length <= 1 || this.exportMode === "combined") {
+			let t = {
+				type: "FeatureCollection",
+				features: this.features.map((e) => ({
+					type: "Feature",
+					id: e.id,
+					geometry: {
+						type: e.type,
+						coordinates: e.coordinates
+					},
+					properties: {
+						...e.properties,
+						_layer: this.drawLayers.find((t) => t.id === e.layerId)?.name ?? e.layerId
+					}
+				}))
+			};
+			this.downloadBlob(new Blob([JSON.stringify(t, null, 2)], { type: "application/json" }), `${e}.geojson`);
+		} else {
+			let i = new r(new n("application/zip"));
+			for (let e of this.drawLayers) {
+				let n = {
+					type: "FeatureCollection",
+					features: this.features.filter((t) => t.layerId === e.id).map((e) => ({
+						type: "Feature",
+						id: e.id,
+						geometry: {
+							type: e.type,
+							coordinates: e.coordinates
+						},
+						properties: { ...e.properties }
+					}))
+				}, r = e.name.replace(/[/\\?%*:|"<>]/g, "_");
+				await i.add(`${r}.geojson`, new t(JSON.stringify(n, null, 2)));
+			}
+			this.downloadBlob(await i.close(), `${e}.zip`);
+		}
+	}
+	downloadBlob(e, t) {
+		let n = URL.createObjectURL(e), r = document.createElement("a");
+		r.href = n, r.download = t, r.click(), URL.revokeObjectURL(n);
+	}
+	newId() {
+		return `draw-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+	}
+	computeSpecialProperties(e, t) {
+		for (let n of t.properties) switch (n.type) {
+			case "longitude":
+			case "latitude": {
+				let t = e.type === "Point" ? e.coordinates : this.centroid(e);
+				e.properties[n.name] = n.type === "longitude" ? t[0] : t[1];
+				break;
+			}
+			case "area":
+				e.properties[n.name] = e.type === "Polygon" ? this.polygonArea(e.coordinates) : null;
+				break;
+			case "perimeter":
+			case "length":
+				e.properties[n.name] = e.type === "Polygon" ? this.ringLength(e.coordinates[0]) : e.type === "LineString" ? this.ringLength(e.coordinates, !1) : null;
+				break;
+			case "update-time":
+				e.properties[n.name] = Date.now();
+				break;
+		}
+	}
+	centroid(e) {
+		let t;
+		switch (e.type) {
+			case "Point":
+				t = [e.coordinates];
+				break;
+			case "MultiPoint":
+				t = e.coordinates;
+				break;
+			case "LineString":
+				t = e.coordinates;
+				break;
+			case "MultiLineString":
+				t = e.coordinates.flat();
+				break;
+			case "Polygon":
+				t = e.coordinates[0];
+				break;
+			case "MultiPolygon":
+				t = e.coordinates.flat(2);
+				break;
+			default: t = [];
+		}
+		if (t.length === 0) return [0, 0];
+		let n = t.reduce((e, t) => [e[0] + t[0], e[1] + t[1]], [0, 0]);
+		return [n[0] / t.length, n[1] / t.length];
+	}
+	haversineKm(e, t) {
+		let n = (t[1] - e[1]) * Math.PI / 180, r = (t[0] - e[0]) * Math.PI / 180, i = Math.sin(n / 2) ** 2 + Math.cos(e[1] * Math.PI / 180) * Math.cos(t[1] * Math.PI / 180) * Math.sin(r / 2) ** 2;
+		return 6371 * 2 * Math.atan2(Math.sqrt(i), Math.sqrt(1 - i));
+	}
+	ringLength(e, t = !0) {
+		let n = 0, r = e.length - 1;
+		for (let t = 0; t < r; t++) n += this.haversineKm(e[t], e[t + 1]);
+		return Math.round(n * 1e3);
+	}
+	polygonArea(e) {
+		let t = e[0], n = 0;
+		for (let e = 0, r = t.length - 1; e < t.length; r = e++) n += (t[r][0] + t[e][0]) * (t[r][1] - t[e][1]);
+		let r = Math.abs(n / 2), i = t[0][1] * Math.PI / 180;
+		return Math.round(111320 * Math.cos(i) * r * 111320);
+	}
+	withinPixelThreshold(e, t, n) {
+		if (!this.adapter) return !1;
+		let r = this.adapter.project(e), i = this.adapter.project(t);
+		return Math.hypot(r[0] - i[0], r[1] - i[1]) < n;
+	}
+	findFeatureAt(e, t) {
+		for (let n of [...this.features].reverse()) if (n.type === "Point") {
+			let t = this.adapter.project(n.coordinates);
+			if (Math.hypot(t[0] - e[0], t[1] - e[1]) < 10) return n;
+		} else if (n.type === "MultiPoint") for (let t of n.coordinates) {
+			let r = this.adapter.project(t);
+			if (Math.hypot(r[0] - e[0], r[1] - e[1]) < 10) return n;
+		}
+		else if (n.type === "LineString") {
+			if (this.pixelNearPolyline(e, n.coordinates, 10)) return n;
+		} else if (n.type === "MultiLineString") {
+			if (n.coordinates.some((t) => this.pixelNearPolyline(e, t, 10))) return n;
+		} else if (n.type === "Polygon") {
+			if (this.pointInRing(t, n.coordinates[0]) || this.pixelNearPolyline(e, n.coordinates[0], 10)) return n;
+		} else if (n.type === "MultiPolygon") for (let r of n.coordinates) {
+			let i = r[0];
+			if (i && (this.pointInRing(t, i) || this.pixelNearPolyline(e, i, 10))) return n;
+		}
+		return null;
+	}
+	pixelNearPolyline(e, t, n) {
+		for (let r = 0; r < t.length - 1; r++) {
+			let i = this.adapter.project(t[r]), a = this.adapter.project(t[r + 1]);
+			if (this.distToSegment(e, i, a) < n) return !0;
+		}
+		return !1;
+	}
+	distToSegment(e, t, n) {
+		let r = n[0] - t[0], i = n[1] - t[1];
+		if (r === 0 && i === 0) return Math.hypot(e[0] - t[0], e[1] - t[1]);
+		let a = Math.max(0, Math.min(1, ((e[0] - t[0]) * r + (e[1] - t[1]) * i) / (r * r + i * i)));
+		return Math.hypot(e[0] - (t[0] + a * r), e[1] - (t[1] + a * i));
+	}
+	pointInRing(e, t) {
+		let n = !1;
+		for (let r = 0, i = t.length - 1; r < t.length; i = r++) {
+			let a = t[r][0], o = t[r][1], s = t[i][0], c = t[i][1];
+			o > e[1] != c > e[1] && e[0] < (s - a) * (e[1] - o) / (c - o) + a && (n = !n);
+		}
+		return n;
+	}
+	dispatch(e, t) {
+		this.dispatchEvent(new CustomEvent(e, {
+			detail: t,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	updateHelpTextDuring() {
+		let e = this.draftPoints.length;
+		this.mode === "draw-line" ? this.helpText = `${e} pt${e === 1 ? "" : "s"}. Double-click or right-click to finish.` : this.mode === "draw-polygon" && (this.helpText = e >= 3 ? `${e} pts. Click first point, double-click, or right-click to close.` : `${e} pt${e === 1 ? "" : "s"}. Need at least 3 to close.`);
+	}
+	render() {
+		let e = this.features.find((e) => e.id === this.selectedFeatureId), t = e ? this.drawLayers.find((t) => t.id === e.layerId) : null;
+		return c`
+            <div class="toolbar">
+                <sl-tooltip content="Select">
+                    <sl-icon-button name="cursor"
+                        ?active=${this.mode === "select"}
+                        @click=${() => this.requestDrawMode("select")}>
+                    </sl-icon-button>
+                </sl-tooltip>
+                <sl-tooltip content="Draw point">
+                    <sl-icon-button name="geo-fill"
+                        ?active=${this.mode === "draw-point"}
+                        @click=${() => this.requestDrawMode("draw-point")}>
+                    </sl-icon-button>
+                </sl-tooltip>
+                <sl-tooltip content="Draw line">
+                    <sl-icon-button name="slash-lg"
+                        ?active=${this.mode === "draw-line"}
+                        @click=${() => this.requestDrawMode("draw-line")}>
+                    </sl-icon-button>
+                </sl-tooltip>
+                <sl-tooltip content="Draw polygon">
+                    <sl-icon-button name="pentagon"
+                        ?active=${this.mode === "draw-polygon"}
+                        @click=${() => this.requestDrawMode("draw-polygon")}>
+                    </sl-icon-button>
+                </sl-tooltip>
+
+                <div class="divider"></div>
+
+                <sl-tooltip content="Snap to points and edges (${this.snapEnabled ? "on" : "off"}) — hold Alt to toggle">
+                    <sl-icon-button name="magnet"
+                        ?active=${this.effectiveSnap}
+                        @click=${() => {
+			this.snapEnabled = !this.snapEnabled, this.snapEnabled || (this.snapPos = null, this.updateRubberband());
+		}}>
+                    </sl-icon-button>
+                </sl-tooltip>
+
+                <div class="divider"></div>
+
+                <sl-tooltip content="Undo (${this.modKey}+Z)">
+                    <sl-icon-button name="arrow-counterclockwise"
+                        ?disabled=${this.historyIndex < 0 && this.draftPoints.length === 0}
+                        @click=${() => this.undoOrDraftBack()}>
+                    </sl-icon-button>
+                </sl-tooltip>
+                <sl-tooltip content="Redo (${this.modKey}+Y)">
+                    <sl-icon-button name="arrow-clockwise"
+                        ?disabled=${this.historyIndex >= this.history.length - 1 && this.draftRedoStack.length === 0}
+                        @click=${() => this.redoOrDraftForward()}>
+                    </sl-icon-button>
+                </sl-tooltip>
+
+                <div class="divider"></div>
+
+                <sl-tooltip content=${this.draftPoints.length > 0 ? "Remove last point" : this.selectedHandle ? "Delete selected point" : "Delete selected"}>
+                    <sl-icon-button name="trash"
+                        ?disabled=${this.draftPoints.length === 0 && !this.selectedFeatureId && !this.selectedHandle}
+                        @click=${() => this.draftPoints.length > 0 ? this.removeLastDraftPoint() : this.selectedHandle ? this.deleteSelectedVertex() : this.deleteSelected()}>
+                    </sl-icon-button>
+                </sl-tooltip>
+                <sl-tooltip content="Export GeoJSON">
+                    <sl-icon-button name="download"
+                        ?disabled=${this.features.length === 0}
+                        @click=${() => this.exportGeoJSON()}>
+                    </sl-icon-button>
+                </sl-tooltip>
+            </div>
+
+            <div class="scroll-content">
+            <div class="help">${this.helpText}</div>
+
+            ${this.isTouchDevice && (this.mode === "draw-line" || this.mode === "draw-polygon") && this.draftPoints.length >= (this.mode === "draw-line" ? 2 : 3) ? c`
+                <sl-button size="small" variant="primary" style="margin-bottom:.4rem;width:100%"
+                    @click=${() => {
+			let e = G(this.mode), t = e ? this.activeLayerIds[e] : null;
+			t && this.finishDraft(t);
+		}}>
+                    Finish
+                </sl-button>
+            ` : ""}
+
+            ${this.drawLayers.length > 0 ? c`
+                <div class="layers-section">
+                    <div class="section-label">Editing</div>
+                    ${this.drawLayers.map((e) => c`
+                        <div class="layer-row" title="Click to change layer"
+                             @click=${() => this.openLayerDialog(e.type === "Point" ? "draw-point" : e.type === "LineString" ? "draw-line" : "draw-polygon")}>
+                            <span class="color-dot" style="background:${e.color}"></span>
+                            <span class="layer-name">${e.name}</span>
+                            <span class="layer-type">${e.type === "LineString" ? "Line" : e.type}</span>
+                            <small style="color:var(--sl-color-neutral-400);font-size:.7rem">${this.features.filter((t) => t.layerId === e.id).length}</small>
+                            ${this.drawLayers.length > 1 ? c`
+                                <sl-tooltip content="Stop editing">
+                                    <sl-icon-button name="x" class="remove-layer-btn"
+                                        @click=${(t) => {
+			t.stopPropagation(), this.removeFromEditing(e);
+		}}>
+                                    </sl-icon-button>
+                                </sl-tooltip>
+                            ` : ""}
+                        </div>
+                    `)}
+                </div>
+            ` : ""}
+
+            ${e && t ? c`
+                <div class="section-label" style="margin-top:.5rem">Selected: ${t.name}</div>
+                ${t.properties.map((n) => c`
+                    <div class="prop-row">
+                        <span class="prop-label">${n.name}</span>
+                        ${n.name === "id" || [
+			"longitude",
+			"latitude",
+			"area",
+			"perimeter",
+			"length",
+			"create-time",
+			"update-time"
+		].includes(n.type) ? c`<span class="prop-value" style="color:var(--sl-color-neutral-400);font-style:italic;padding:0 0.3rem">${["create-time", "update-time"].includes(n.type) ? e.properties[n.name] ? new Date(e.properties[n.name]).toLocaleString() : "—" : e.properties[n.name] ?? "—"}</span>` : n.type === "imageURL" ? c`<div class="prop-url-wrap">
+                                        <sl-input size="small"
+                                            .value=${String(e.properties[n.name] ?? "")}
+                                            placeholder="image URL"
+                                            @sl-change=${(r) => {
+			e.properties[n.name] = r.target.value, t && this.computeSpecialProperties(e, t), this.features = [...this.features], this.refreshDrawLayerSource(e.layerId);
+		}}></sl-input>
+                                        ${e.properties[n.name] ? c`<img class="prop-img" src=${String(e.properties[n.name])} @error=${(e) => {
+			let t = e.target, n = document.createElement("span");
+			n.className = "prop-img-error", n.textContent = "⚠ invalid image", t.replaceWith(n);
+		}}>` : ""}
+                                       </div>` : n.type === "linkURL" ? c`<div class="prop-url-wrap">
+                                            <sl-input size="small"
+                                                .value=${String(e.properties[n.name] ?? "")}
+                                                placeholder="link URL"
+                                                @sl-change=${(r) => {
+			e.properties[n.name] = r.target.value, t && this.computeSpecialProperties(e, t), this.features = [...this.features], this.refreshDrawLayerSource(e.layerId);
+		}}></sl-input>
+                                            ${e.properties[n.name] ? c`<a class="prop-link" href=${String(e.properties[n.name])} target="_blank" rel="noopener noreferrer">${e.properties[n.name]}</a>` : ""}
+                                           </div>` : c`<sl-input size="small" class="prop-value"
+                                            .value=${String(e.properties[n.name] ?? "")}
+                                            @sl-change=${(r) => {
+			e.properties[n.name] = r.target.value, t && this.computeSpecialProperties(e, t), this.features = [...this.features], this.refreshDrawLayerSource(e.layerId);
+		}}></sl-input>`}
+                    </div>
+                `)}
+            ` : ""}
+            </div>
+
+            <webmapx-draw-layer-dialog
+                @webmapx-draw-layer-confirm=${this.handleLayerConfirm}
+                @webmapx-draw-layer-cancel=${this.handleLayerCancel}>
+            </webmapx-draw-layer-dialog>
+
+            <sl-dialog id="export-dialog" label="Export GeoJSON">
+                <div class="prop-row">
+                    <span class="prop-label">Filename</span>
+                    <sl-input class="prop-value" size="small"
+                        .value=${this.exportFilename}
+                        @sl-input=${(e) => {
+			this.exportFilename = e.target.value;
+		}}>
+                        <span slot="suffix">${this.exportMode === "separate" ? ".zip" : ".geojson"}</span>
+                    </sl-input>
+                </div>
+                ${this.drawLayers.length > 1 ? c`
+                    <div style="margin-top:.6rem">
+                        <sl-radio-group label="Export as" .value=${this.exportMode}
+                            @sl-change=${(e) => {
+			this.exportMode = e.target.value;
+		}}>
+                            <sl-radio value="combined">Single GeoJSON file (all layers combined)</sl-radio>
+                            <sl-radio value="separate">Separate files per layer (ZIP archive)</sl-radio>
+                        </sl-radio-group>
+                    </div>
+                ` : ""}
+                <sl-button slot="footer" variant="primary" autofocus @click=${() => this.doExport()}>Download</sl-button>
+                <sl-button slot="footer" variant="default" @click=${() => this.exportDialog.hide()}>Cancel</sl-button>
+            </sl-dialog>
+        `;
+	}
+};
+e([f()], W.prototype, "mode", void 0), e([f()], W.prototype, "drawLayers", void 0), e([f()], W.prototype, "features", void 0), e([f()], W.prototype, "selectedFeatureId", void 0), e([f()], W.prototype, "helpText", void 0), e([f()], W.prototype, "pendingMode", void 0), e([f()], W.prototype, "uiVersion", void 0), e([f()], W.prototype, "isTouchDevice", void 0), e([f()], W.prototype, "snapEnabled", void 0), e([f()], W.prototype, "altActive", void 0), e([f()], W.prototype, "editState", void 0), e([d("webmapx-draw-layer-dialog")], W.prototype, "layerDialog", void 0), e([d("#export-dialog")], W.prototype, "exportDialog", void 0), e([f()], W.prototype, "exportFilename", void 0), e([f()], W.prototype, "exportMode", void 0), W = e([l("webmapx-draw-tool")], W);
+function G(e) {
+	return e === "draw-point" ? "Point" : e === "draw-line" ? "LineString" : e === "draw-polygon" ? "Polygon" : null;
+}
+function K(e) {
+	return e === "Point" || e === "MultiPoint" || e === "LineString" || e === "MultiLineString" || e === "Polygon" || e === "MultiPolygon";
+}
+function q(e) {
+	return e === "Point" || e === "MultiPoint";
+}
+function J(e) {
+	return e === "LineString" || e === "MultiLineString";
+}
+function Y(e) {
+	return e === "Polygon" || e === "MultiPolygon";
+}
+//#endregion
+export { W as WebmapxDrawTool };