@edugis-org/webmapx 0.1.0

package/dist-lib/webmapx-truearea-tool-CMB4Orm-.js

@@ -0,0 +1,615 @@
+import { r as e, t } from "./decorate-CWgUV1hU.js";
+import { i as n, o as r } from "./decorators-B35AgiCU.js";
+import { t as i } from "./esm-CTuscnN5.js";
+import { t as a } from "./webmapx-modal-tool-eF6Naluv.js";
+import { css as o, html as s } from "lit";
+//#region node_modules/@turf/bearing/node_modules/@turf/helpers/dist/esm/index.js
+var c = 6371008.8;
+c * 100, c * 100, 360 / (2 * Math.PI), c * 3.28084, c * 39.37, c / 1e3, c / 1e3, c / 1609.344, c * 1e3, c * 1e3, c / 1852, c * 1.0936;
+function l(e) {
+	return e % (2 * Math.PI) * 180 / Math.PI;
+}
+function u(e) {
+	return e % 360 * Math.PI / 180;
+}
+//#endregion
+//#region node_modules/@turf/bearing/node_modules/@turf/invariant/dist/esm/index.js
+function d(e) {
+	if (!e) throw Error("coord is required");
+	if (!Array.isArray(e)) {
+		if (e.type === "Feature" && e.geometry !== null && e.geometry.type === "Point") return [...e.geometry.coordinates];
+		if (e.type === "Point") return [...e.coordinates];
+	}
+	if (Array.isArray(e) && e.length >= 2 && !Array.isArray(e[0]) && !Array.isArray(e[1])) return [...e];
+	throw Error("coord must be GeoJSON Point or an Array of numbers");
+}
+//#endregion
+//#region node_modules/@turf/bearing/dist/esm/index.js
+function f(e, t, n = {}) {
+	if (n.final === !0) return p(e, t);
+	let r = d(e), i = d(t), a = u(r[0]), o = u(i[0]), s = u(r[1]), c = u(i[1]), f = Math.sin(o - a) * Math.cos(c), m = Math.cos(s) * Math.sin(c) - Math.sin(s) * Math.cos(c) * Math.cos(o - a);
+	return l(Math.atan2(f, m));
+}
+function p(e, t) {
+	let n = f(t, e);
+	return n = (n + 180) % 360, n;
+}
+var m = f, h = 6371008.8, g = {
+	centimeters: h * 100,
+	centimetres: h * 100,
+	degrees: 360 / (2 * Math.PI),
+	feet: h * 3.28084,
+	inches: h * 39.37,
+	kilometers: h / 1e3,
+	kilometres: h / 1e3,
+	meters: h,
+	metres: h,
+	miles: h / 1609.344,
+	millimeters: h * 1e3,
+	millimetres: h * 1e3,
+	nauticalmiles: h / 1852,
+	radians: 1,
+	yards: h * 1.0936
+};
+function _(e, t, n = {}) {
+	let r = { type: "Feature" };
+	return (n.id === 0 || n.id) && (r.id = n.id), n.bbox && (r.bbox = n.bbox), r.properties = t || {}, r.geometry = e, r;
+}
+function v(e, t, n = {}) {
+	if (!e) throw Error("coordinates is required");
+	if (!Array.isArray(e)) throw Error("coordinates must be an Array");
+	if (e.length < 2) throw Error("coordinates must be at least 2 numbers long");
+	if (!S(e[0]) || !S(e[1])) throw Error("coordinates must contain numbers");
+	return _({
+		type: "Point",
+		coordinates: e
+	}, t, n);
+}
+function y(e, t = "kilometers") {
+	let n = g[t];
+	if (!n) throw Error(t + " units is invalid");
+	return e / n;
+}
+function b(e) {
+	return e % (2 * Math.PI) * 180 / Math.PI;
+}
+function x(e) {
+	return e % 360 * Math.PI / 180;
+}
+function S(e) {
+	return !isNaN(e) && e !== null && !Array.isArray(e);
+}
+//#endregion
+//#region node_modules/@turf/destination/node_modules/@turf/invariant/dist/esm/index.js
+function C(e) {
+	if (!e) throw Error("coord is required");
+	if (!Array.isArray(e)) {
+		if (e.type === "Feature" && e.geometry !== null && e.geometry.type === "Point") return [...e.geometry.coordinates];
+		if (e.type === "Point") return [...e.coordinates];
+	}
+	if (Array.isArray(e) && e.length >= 2 && !Array.isArray(e[0]) && !Array.isArray(e[1])) return [...e];
+	throw Error("coord must be GeoJSON Point or an Array of numbers");
+}
+//#endregion
+//#region node_modules/@turf/destination/dist/esm/index.js
+function w(e, t, n, r = {}) {
+	let i = C(e), a = x(i[0]), o = x(i[1]), s = x(n), c = y(t, r.units), l = Math.asin(Math.sin(o) * Math.cos(c) + Math.cos(o) * Math.sin(c) * Math.cos(s)), u = b(a + Math.atan2(Math.sin(s) * Math.sin(c) * Math.cos(o), Math.cos(c) - Math.sin(o) * Math.sin(l))), d = b(l);
+	return i[2] === void 0 ? v([u, d], r.properties) : v([
+		u,
+		d,
+		i[2]
+	], r.properties);
+}
+var T = w, E = [
+	"#e63946",
+	"#2a9d8f",
+	"#e9c46a",
+	"#457b9d",
+	"#f4a261",
+	"#6a4c93",
+	"#06d6a0",
+	"#ff6b6b"
+], D = "truearea", O = `${D}:data`, k = "truearea-ghost", A = `${k}:data`;
+function j(e) {
+	let t = [];
+	if (e.type === "Polygon" ? t = e.coordinates[0] : e.type === "MultiPolygon" ? t = e.coordinates.flat(2) : e.type === "LineString" ? t = e.coordinates : e.type === "MultiLineString" ? t = e.coordinates.flat() : e.type === "Point" && (t = [e.coordinates]), 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];
+}
+function M(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;
+}
+function N(e, t) {
+	return t.type === "Polygon" ? M(e, t.coordinates[0]) && !t.coordinates.slice(1).some((t) => M(e, t)) : t.type === "MultiPolygon" ? t.coordinates.some((t) => M(e, t[0]) && !t.slice(1).some((t) => M(e, t))) : !1;
+}
+function P(e, t) {
+	if (t.type === "Polygon") return j(t);
+	if (t.type === "MultiPolygon") {
+		let n = t.coordinates.find((t) => M(e, t[0]) && !t.slice(1).some((t) => M(e, t)));
+		if (n) {
+			let e = n[0], t = e.reduce((e, t) => [e[0] + t[0], e[1] + t[1]], [0, 0]);
+			return [t[0] / e.length, t[1] / e.length];
+		}
+	}
+	return j(t);
+}
+function F(e, t, n) {
+	let r = {
+		type: "Feature",
+		geometry: {
+			type: "Point",
+			coordinates: n
+		},
+		properties: {}
+	}, a = (e) => {
+		let n = {
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: e
+			},
+			properties: {}
+		}, a = m(r, n);
+		return T(r, i(r, n, { units: "kilometers" }), a + t, { units: "kilometers" }).geometry.coordinates;
+	}, o = (e) => e.map(a);
+	return e.type === "Polygon" ? {
+		type: "Polygon",
+		coordinates: e.coordinates.map(o)
+	} : e.type === "MultiPolygon" ? {
+		type: "MultiPolygon",
+		coordinates: e.coordinates.map((e) => e.map(o))
+	} : e;
+}
+function I(e, t, n, r) {
+	let i = r + t, a = Math.PI / 180, o = (e) => {
+		let t = Math.cos(e[1] * a), o = e[1] + n, s = Math.cos(o * a), c = s > 1e-6 ? t / s : 1;
+		return [i + (e[0] - r) * c, o];
+	}, s = (e) => e.map(o);
+	return e.type === "Polygon" ? {
+		type: "Polygon",
+		coordinates: e.coordinates.map(s)
+	} : e.type === "MultiPolygon" ? {
+		type: "MultiPolygon",
+		coordinates: e.coordinates.map((e) => e.map(s))
+	} : e;
+}
+function L(e, t) {
+	let n = {
+		type: "Feature",
+		geometry: {
+			type: "Point",
+			coordinates: t
+		},
+		properties: {}
+	}, r = (e) => e.map((e) => ({
+		bearing: m(n, {
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: e
+			},
+			properties: {}
+		}),
+		distance: i(n, {
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: e
+			},
+			properties: {}
+		}, { units: "kilometers" })
+	}));
+	return e.type === "Polygon" ? e.coordinates.map(r) : e.type === "MultiPolygon" ? e.coordinates.flat().map(r) : [];
+}
+function R(e, t, n) {
+	let r = {
+		type: "Feature",
+		geometry: {
+			type: "Point",
+			coordinates: t
+		},
+		properties: {}
+	}, i = 0, a = () => (n[i++] ?? []).map(({ bearing: e, distance: t }) => T(r, t, e, { units: "kilometers" }).geometry.coordinates);
+	return e.type === "Polygon" ? {
+		type: "Polygon",
+		coordinates: e.coordinates.map(() => a())
+	} : e.type === "MultiPolygon" ? {
+		type: "MultiPolygon",
+		coordinates: e.coordinates.map((e) => e.map(() => a()))
+	} : e;
+}
+var z = class extends a {
+	constructor(...e) {
+		super(...e), this.toolId = "truearea", this.mapElement = null, this.availableLayers = [], this.selectedLayerId = "", this.copies = [], this.dragging = !1, this.lastTouchedCopyId = null, this.rotationDeg = 0, this.geodesic = !0, this.copyMeta = /* @__PURE__ */ new Map(), this.features = [], this.colorIdx = 0, this.unsubEvents = [], this.dragState = null;
+	}
+	onActivate() {
+		this.adapter && this.adapter.setTouchCaptureEnabled(!1), this.bindEvents();
+	}
+	onDeactivate() {
+		this.cleanupEvents(), this.adapter && (this.adapter.setPanEnabled(!0), this.adapter.setTouchCaptureEnabled(!0)), this.dragState = null, this.dragging = !1, this.clearGhost(), this.copies.length === 0 && this.cleanupLayers();
+	}
+	static {
+		this.styles = o`
+        :host { display: none; padding: var(--webmapx-tool-padding, 0); font-size: 0.875rem; min-width: 200px; }
+        :host([active]) { display: block; }
+        label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
+        select { width: 100%; margin-bottom: 0.75rem; padding: 0.25rem; box-sizing: border-box; }
+        .hint { color: var(--sl-color-neutral-500, #888); font-style: italic; margin-bottom: 0.5rem; font-size: 0.8rem; }
+        .copy-item { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
+        .copy-swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
+        .copy-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        .copy-remove { cursor: pointer; color: var(--sl-color-danger-600, #c00); border: none; background: none; padding: 0 2px; font-size: 0.9rem; }
+        .clear-btn { width: 100%; padding: 0.3rem; cursor: pointer; }
+        .no-copies { color: var(--sl-color-neutral-500, #888); font-style: italic; font-size: 0.8rem; margin-bottom: 0.5rem; margin-top: 0.25rem; }
+        .dragging-hint { color: var(--sl-color-primary-600, #3b82f6); font-size: 0.8rem; margin-bottom: 0.4rem; }
+        .method-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; font-size: 0.8rem; color: var(--sl-color-neutral-600, #555); }
+        .method-row input { cursor: pointer; }
+        .method-row label { cursor: pointer; }
+        .rotation-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
+        .rotation-row input[type=range] {
+            flex: 1;
+            -webkit-appearance: none;
+            appearance: none;
+            height: 4px;
+            background: var(--sl-color-neutral-300, #ccc);
+            border-radius: 2px;
+            outline: none;
+        }
+        .rotation-row input[type=range]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: var(--sl-color-primary-600, #3b82f6);
+            cursor: pointer;
+        }
+        .rotation-row input[type=range]::-moz-range-thumb {
+            width: 14px;
+            height: 14px;
+            border: none;
+            border-radius: 50%;
+            background: var(--sl-color-primary-600, #3b82f6);
+            cursor: pointer;
+        }
+        .rotation-reset { border: none; background: none; cursor: pointer; padding: 0 2px; font-size: 1rem; line-height: 1; color: var(--sl-color-neutral-600, #555); }
+        .rotation-reset:hover { color: var(--sl-color-primary-600, #3b82f6); }
+        .rotation-value { font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: right; font-size: 0.8rem; color: var(--sl-color-neutral-600, #555); }
+    `;
+	}
+	onMapAttached(t) {
+		super.onMapAttached(t), this.mapElement = e(this), this.refreshLayers(t.store.getState()), this.active && (t.setTouchCaptureEnabled(!1), this.bindEvents());
+	}
+	onMapDetached() {
+		this.cleanupEvents(), this.cleanupLayers(), this.dragState = null, this.dragging = !1, this.features = [], this.copies = [], this.copyMeta.clear(), this.availableLayers = [], this.mapElement = null, super.onMapDetached();
+	}
+	onStateChanged(e) {
+		this.refreshLayers(e);
+	}
+	refreshLayers(e) {
+		let t = e.mapLayers ?? {}, n = [];
+		for (let [e, r] of Object.entries(t)) {
+			if (e === D || e.startsWith("truearea-")) continue;
+			let t = r.sourceData;
+			if (!t || !this.hasPolygonFeatures(t)) continue;
+			let i = r.label ?? e;
+			n.push({
+				id: e,
+				label: String(i),
+				sourceId: e
+			});
+		}
+		this.availableLayers = n, this.selectedLayerId && !n.find((e) => e.id === this.selectedLayerId) && (this.selectedLayerId = n[0]?.id ?? ""), !this.selectedLayerId && n.length > 0 && (this.selectedLayerId = n[0].id);
+	}
+	hasPolygonFeatures(e) {
+		return e.features.some((e) => e.geometry?.type === "Polygon" || e.geometry?.type === "MultiPolygon");
+	}
+	async setupLayers() {
+		!this.adapter || !this.mapElement || (this.adapter.hasLayer(D) || await this.mapElement.addLayerRequest({
+			id: D,
+			type: "style",
+			version: 8,
+			metadata: {
+				label: "TrueArea copies",
+				legendRole: "overlay",
+				attribution: "<a href=\"https://thetruesize.com\">The True Size Of</a>"
+			},
+			sources: { data: {
+				type: "geojson",
+				data: {
+					type: "FeatureCollection",
+					features: []
+				}
+			} },
+			layers: [{
+				id: "truearea-fill",
+				type: "fill",
+				source: "data",
+				paint: {
+					"fill-color": ["get", "color"],
+					"fill-opacity": .35
+				}
+			}, {
+				id: "truearea-line",
+				type: "line",
+				source: "data",
+				paint: {
+					"line-color": ["get", "color"],
+					"line-width": 2
+				}
+			}]
+		}), this.adapter.hasLayer(k) || await this.mapElement.addLayerRequest({
+			id: k,
+			type: "style",
+			version: 8,
+			metadata: { hideFromLegend: !0 },
+			sources: { data: {
+				type: "geojson",
+				data: {
+					type: "FeatureCollection",
+					features: []
+				}
+			} },
+			layers: [{
+				id: "truearea-ghost-fill",
+				type: "fill",
+				source: "data",
+				paint: {
+					"fill-color": ["get", "color"],
+					"fill-opacity": .2
+				}
+			}, {
+				id: "truearea-ghost-line",
+				type: "line",
+				source: "data",
+				paint: {
+					"line-color": ["get", "color"],
+					"line-width": 2,
+					"line-dasharray": [4, 3]
+				},
+				hideFromLegend: !0
+			}]
+		}));
+	}
+	cleanupLayers() {
+		!this.adapter || !this.mapElement || [k, D].forEach((e) => {
+			this.adapter.hasLayer(e) && this.mapElement.removeInlineLayer(e);
+		});
+	}
+	bindEvents() {
+		if (!this.adapter) return;
+		this.cleanupEvents();
+		let e = this.adapter.events.on("pointer-down", (e) => this.onPointerDown(e)), t = this.adapter.events.on("pointer-move", (e) => this.onDrag(e)), n = this.adapter.events.on("pointer-up", (e) => this.onDragEnd(e)), r = this.adapter.events.on("pointer-cancel", () => this.onDragCancel());
+		this.unsubEvents = [
+			e,
+			t,
+			n,
+			r
+		];
+	}
+	cleanupEvents() {
+		this.unsubEvents.forEach((e) => e()), this.unsubEvents = [];
+	}
+	getSelectedSource() {
+		let e = this.availableLayers.find((e) => e.id === this.selectedLayerId);
+		return e ? {
+			sourceId: e.sourceId,
+			label: e.label
+		} : null;
+	}
+	async onPointerDown(e) {
+		if (!this.adapter) return;
+		await this.setupLayers();
+		let t = e.coords, n = this.features.find((e) => e.geometry && N(t, e.geometry));
+		if (n) {
+			let e = n.properties?.copyId, r = this.copies.find((t) => t.id === e), i = n.properties?.color ?? E[0], a = r?.label ?? e;
+			this.features = this.features.filter((t) => t.properties?.copyId !== e), this.updateTrueAreaSource();
+			let o = P(t, n.geometry), s = L(n.geometry, o);
+			if (this.dragState = {
+				feature: n,
+				centroid: o,
+				startCoords: t,
+				color: i,
+				label: a,
+				existingCopyId: e,
+				bearingDistances: s
+			}, this.dragging = !0, e !== this.lastTouchedCopyId) {
+				this.lastTouchedCopyId = e, this.rotationDeg = n.properties?.rotation ?? 0;
+				let t = this.copyMeta.get(e);
+				t && (this.geodesic = t.geodesic);
+			}
+			this.adapter.setPanEnabled(!1), this.updateGhost(t);
+			return;
+		}
+		let r = this.getSelectedSource();
+		if (!r) return;
+		let i = (this.adapter.store.getState().mapLayers ?? {})[r.sourceId]?.sourceData;
+		if (!i) return;
+		let a = i.features.find((e) => e.geometry && N(t, e.geometry));
+		if (!a) return;
+		let o = P(t, a.geometry), s = L(a.geometry, o), c = E[this.colorIdx % E.length], l = String(a.properties?.name ?? a.properties?.label ?? a.properties?.id ?? `Copy ${this.copies.length + 1}`);
+		this.dragState = {
+			feature: a,
+			centroid: o,
+			startCoords: t,
+			color: c,
+			label: l,
+			bearingDistances: s
+		}, this.dragging = !0, this.adapter.setPanEnabled(!1), this.updateGhost(t);
+	}
+	onDrag(e) {
+		this.dragState && this.updateGhost(e.coords);
+	}
+	updateGhost(e) {
+		if (!this.dragState || !this.adapter) return;
+		let { centroid: t, startCoords: n, color: r, bearingDistances: i, feature: a } = this.dragState, o = e[0] - n[0], s = e[1] - n[1], c = [t[0] + o, t[1] + s], l = {
+			type: "FeatureCollection",
+			features: [{
+				type: "Feature",
+				geometry: this.geodesic ? R(a.geometry, c, i) : I(a.geometry, o, s, t[0]),
+				properties: { color: r }
+			}]
+		};
+		this.adapter.getSource(A)?.setData(l);
+	}
+	onDragCancel() {
+		this.adapter && (this.adapter.setPanEnabled(!0), this.dragState?.existingCopyId && (this.features = [...this.features, this.dragState.feature], this.updateTrueAreaSource()), this.dragState = null, this.dragging = !1, this.clearGhost());
+	}
+	onDragEnd(e) {
+		if (!this.adapter) {
+			this.dragState = null, this.dragging = !1;
+			return;
+		}
+		if (this.adapter.setPanEnabled(!0), !this.dragState) return;
+		let { feature: t, centroid: n, startCoords: r, color: i, label: a, bearingDistances: o } = this.dragState, s = e.coords[0] - r[0], c = e.coords[1] - r[1], { existingCopyId: l } = this.dragState;
+		if (Math.abs(s) < 1e-6 && Math.abs(c) < 1e-6) {
+			l && (this.features = [...this.features, t], this.updateTrueAreaSource()), this.dragState = null, this.dragging = !1, this.clearGhost();
+			return;
+		}
+		let u = [n[0] + s, n[1] + c], d = this.geodesic ? R(t.geometry, u, o) : I(t.geometry, s, c, n[0]), f = l ?? `copy-${Date.now()}`, p = l ? this.lastTouchedCopyId === l ? this.rotationDeg : t.properties?.rotation ?? 0 : 0;
+		if (l) {
+			let e = this.copyMeta.get(l);
+			if (e) {
+				let t = [e.placedCentroid[0] + s, e.placedCentroid[1] + c];
+				this.copyMeta.set(l, {
+					...e,
+					placedCentroid: t,
+					geodesic: this.geodesic
+				});
+			}
+		} else this.copyMeta.set(f, {
+			origGeom: t.geometry,
+			origCentroid: n,
+			placedCentroid: u,
+			bearingDistances: o,
+			geodesic: this.geodesic
+		});
+		this.features = [...this.features, {
+			type: "Feature",
+			geometry: d,
+			properties: {
+				...t.properties,
+				color: i,
+				copyId: f,
+				rotation: p
+			}
+		}];
+		let m = {
+			type: "FeatureCollection",
+			features: this.features
+		};
+		this.adapter.getSource(O)?.setData(m), l || (this.copies = [...this.copies, {
+			id: f,
+			label: a,
+			color: i
+		}], this.colorIdx++, this.lastTouchedCopyId = f, this.rotationDeg = 0), this.dragState = null, this.dragging = !1, this.clearGhost();
+	}
+	clearGhost() {
+		this.adapter && this.adapter.getSource(A)?.setData({
+			type: "FeatureCollection",
+			features: []
+		});
+	}
+	recomputeLastCopy() {
+		if (!this.lastTouchedCopyId) return;
+		let e = this.copyMeta.get(this.lastTouchedCopyId);
+		if (!e) return;
+		let { origGeom: t, origCentroid: n, placedCentroid: r, bearingDistances: i } = e;
+		this.copyMeta.set(this.lastTouchedCopyId, {
+			...e,
+			geodesic: this.geodesic
+		});
+		let a = r[0] - n[0], o = r[1] - n[1], s = this.geodesic ? R(t, r, i) : I(t, a, o, n[0]), c = this.rotationDeg, l = c === 0 ? s : F(s, c, r), u = this.lastTouchedCopyId;
+		this.features = this.features.map((e) => e.properties?.copyId === u ? {
+			...e,
+			geometry: l,
+			properties: {
+				...e.properties,
+				rotation: c
+			}
+		} : e), this.updateTrueAreaSource();
+	}
+	removeCopy(e) {
+		if (this.copies = this.copies.filter((t) => t.id !== e), this.features = this.features.filter((t) => t.properties?.copyId !== e), this.copyMeta.delete(e), this.lastTouchedCopyId === e) if (this.lastTouchedCopyId = this.copies[this.copies.length - 1]?.id ?? null, this.lastTouchedCopyId) {
+			this.rotationDeg = this.features.find((e) => e.properties?.copyId === this.lastTouchedCopyId)?.properties?.rotation ?? 0;
+			let e = this.copyMeta.get(this.lastTouchedCopyId);
+			e && (this.geodesic = e.geodesic);
+		} else this.rotationDeg = 0;
+		this.updateTrueAreaSource();
+	}
+	rotateLastCopy(e) {
+		if (!this.lastTouchedCopyId) return;
+		let t = this.features.find((e) => e.properties?.copyId === this.lastTouchedCopyId);
+		if (!t?.geometry) return;
+		let n = e - (t.properties?.rotation ?? 0), r = this.copyMeta.get(this.lastTouchedCopyId), i = r ? r.placedCentroid : j(t.geometry), a = F(t.geometry, n, i);
+		this.features = this.features.map((t) => t.properties?.copyId === this.lastTouchedCopyId ? {
+			...t,
+			geometry: a,
+			properties: {
+				...t.properties,
+				rotation: e
+			}
+		} : t), this.rotationDeg = e, this.updateTrueAreaSource();
+	}
+	clearAll() {
+		this.copies = [], this.features = [], this.copyMeta.clear(), this.lastTouchedCopyId = null, this.rotationDeg = 0, this.updateTrueAreaSource();
+	}
+	updateTrueAreaSource() {
+		this.adapter && this.adapter.getSource(O)?.setData({
+			type: "FeatureCollection",
+			features: this.features
+		});
+	}
+	render() {
+		return s`
+            <label>Source layer</label>
+            ${this.availableLayers.length === 0 ? s`<div class="hint">No visible polygon layers on map.</div>` : s`
+                    <select @change=${(e) => {
+			this.selectedLayerId = e.target.value;
+		}}>
+                        ${this.availableLayers.map((e) => s`
+                            <option value=${e.id} ?selected=${e.id === this.selectedLayerId}>${e.label}</option>
+                        `)}
+                    </select>
+                    ${this.dragging ? s`<div class="dragging-hint">Drag to target location, release to place.</div>` : s`<div class="hint">Click and drag a polygon to compare sizes.</div>`}
+                `}
+
+            ${(() => {
+			let e = this.copies.find((e) => e.id === this.lastTouchedCopyId);
+			return !e && this.availableLayers.length === 0 ? "" : e ? s`
+                    <div class="copy-item">
+                        <div class="copy-swatch" style="background:${e.color}"></div>
+                        <span class="copy-label" title=${e.label}>${e.label}</span>
+                        <button class="copy-remove" @click=${() => this.removeCopy(e.id)} title="Remove">✕</button>
+                    </div>
+                    <div class="rotation-row">
+                        <input type="range" min="-180" max="180" step="1"
+                            .value=${String(this.rotationDeg)}
+                            @input=${(e) => this.rotateLastCopy(Number(e.target.value))}
+                        />
+                        <button class="rotation-reset" title="Reset to 0°" @click=${() => this.rotateLastCopy(0)}>↺</button>
+                        <span class="rotation-value">${this.rotationDeg}°</span>
+                    </div>
+                    <div class="method-row">
+                        <input type="checkbox" id="geodesic-toggle" .checked=${this.geodesic}
+                            @change=${(e) => {
+				this.geodesic = e.target.checked, this.recomputeLastCopy();
+			}}
+                        />
+                        <label for="geodesic-toggle">Geodesic (shape-accurate, may rotate borders)</label>
+                    </div>
+
+                    ${this.copies.length > 0 ? s`<button class="clear-btn" @click=${() => this.clearAll()}>Clear all</button>` : ""}
+                ` : s`<div class="no-copies">No copy selected. Click a polygon on the map.</div>`;
+		})()}
+        `;
+	}
+};
+t([n()], z.prototype, "availableLayers", void 0), t([n()], z.prototype, "selectedLayerId", void 0), t([n()], z.prototype, "copies", void 0), t([n()], z.prototype, "dragging", void 0), t([n()], z.prototype, "lastTouchedCopyId", void 0), t([n()], z.prototype, "rotationDeg", void 0), t([n()], z.prototype, "geodesic", void 0), z = t([r("webmapx-truearea-tool")], z);
+//#endregion
+export { z as WebmapxTrueAreaTool };