@edugis-org/webmapx 0.1.0

package/dist-lib/webmapx-search-tool-Cv8BrYvY.js

@@ -0,0 +1,437 @@
+import { r as e, t } from "./decorate-CWgUV1hU.js";
+import { t as n } from "./webmapx-base-tool-Dm9NAWLD.js";
+import { i as r, o as i } from "./decorators-B35AgiCU.js";
+import { css as a, html as o } from "lit";
+//#region src/components/webmapx-search-tool.ts
+var s, c = class extends n {
+	static {
+		s = this;
+	}
+	constructor(...e) {
+		super(...e), this.active = !1, this.mapElement = null, this.searchInputName = "wmx-7f3a9c1", this.query = "", this.results = null, this.searching = !1, this.selectedIndex = -1, this.previewSourceId = "search-preview", this.previewLayerIds = [
+			"search-preview-fill",
+			"search-preview-line",
+			"search-preview-point"
+		], this.previewLayersAdded = !1, this.persistCounter = 0, this.persistedMap = /* @__PURE__ */ new WeakMap(), this.cfg = {
+			endpoint: "https://nominatim.openstreetmap.org/search",
+			params: {
+				format: "geojson",
+				polygon_geojson: 1,
+				addressdetails: 1
+			},
+			maxResults: 15,
+			defaultZoom: 14,
+			marker: !1,
+			persistOnSelect: !1,
+			provider: "nominatim",
+			attribution: ""
+		};
+	}
+	randomColorHex() {
+		let e = Math.floor(Math.random() * 360) / 360, t = 50 / 100, n = (e, t, n) => (n < 0 && (n += 1), n > 1 && --n, n < 1 / 6 ? e + (t - e) * 6 * n : n < 1 / 2 ? t : n < 2 / 3 ? e + (t - e) * (2 / 3 - n) * 6 : e), r = 0, i = 0, a = 0;
+		{
+			let o = 1.2 - t * .7, s = 2 * t - o;
+			r = n(s, o, e + 1 / 3), i = n(s, o, e), a = n(s, o, e - 1 / 3);
+		}
+		let o = Math.round(r * 255), s = Math.round(i * 255), c = Math.round(a * 255), l = (e) => e.toString(16).padStart(2, "0");
+		return `#${l(o)}${l(s)}${l(c)}`;
+	}
+	static {
+		this.KNOWN_PROVIDERS = new Set(["nominatim"]);
+	}
+	isKnownProvider(e) {
+		return s.KNOWN_PROVIDERS.has(e.toLowerCase());
+	}
+	static {
+		this.styles = a`
+    :host { display: block; width: 100%; pointer-events: auto; }
+    :host([hidden]) { display: none !important; }
+    .container { width: 100%; max-width: 100%; color: var(--webmapx-search-color, var(--color-text-primary)); box-sizing: border-box; padding: var(--webmapx-tool-padding, 0); }
+    .searchbox { display:flex; gap:6px; align-items:center; }
+    input { flex:1; padding:6px; min-width:0; }
+    button { flex:0 0 auto; }
+    .results { margin-top:8px; max-height:50%; overflow:auto; }
+    .results ul { list-style: none; margin: 0; padding: 0; }
+    .result-item { padding:6px; border-bottom:1px solid rgba(0,0,0,0.05); cursor:pointer; display:flex; align-items:center; gap:8px; }
+    .result-item:hover, .result-item[selected] { background: rgba(0,0,0,0.03); }
+    .meta { font-size: small; color: var(--color-text-secondary); }
+  `;
+	}
+	onMapAttached(t) {
+		super.onMapAttached(t), this.adapter = t, this.mapElement = e(this), this.subscribeToConfig();
+	}
+	onMapDetached() {
+		this.adapter = null, this.mapElement = null, this.unsubscribeFromConfig(), super.onMapDetached();
+	}
+	onConfigReady(e) {
+		let t = e?.tools?.search;
+		t && (this.cfg = {
+			...this.cfg,
+			...t
+		}), this.cfg.provider && !this.isKnownProvider(this.cfg.provider) && console.warn(`webmapx-search-tool: unknown provider "${this.cfg.provider}"`), !this.cfg.attribution && this.cfg.provider?.toLowerCase() === "nominatim" && (this.cfg.attribution = "&copy; OpenStreetMap contributors | &copy; Nominatim");
+	}
+	activate() {
+		this.active = !0, this.hidden = !1, setTimeout(() => {
+			(this.renderRoot?.querySelector("input"))?.focus();
+		}, 0), this.dispatchEvent(new CustomEvent("webmapx-search-opened", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	deactivate() {
+		this.active = !1, this.results = null, this.query = "", this.selectedIndex = -1, this.hidden = !0, this.dispatchEvent(new CustomEvent("webmapx-search-closed", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	onStateChanged(e) {}
+	async doSearch() {
+		let e = this.query.trim();
+		if (!e || e.length < 1) {
+			this.results = null;
+			return;
+		}
+		let t = new URLSearchParams();
+		Object.entries(this.cfg.params || {}).forEach(([e, n]) => t.set(e, String(n))), t.set("q", e), t.set("limit", String(this.cfg.maxResults || 15));
+		let n = `${this.cfg.endpoint}?${t.toString()}`;
+		this.searching = !0;
+		try {
+			let e = await fetch(n);
+			if (!e.ok) console.error("search failed:", e.statusText), this.results = {
+				type: "FeatureCollection",
+				features: []
+			};
+			else {
+				let t = await e.json();
+				this.results = t;
+			}
+		} catch (e) {
+			console.error("search error", e), this.results = {
+				type: "FeatureCollection",
+				features: []
+			};
+		} finally {
+			this.searching = !1, this.dispatchEvent(new CustomEvent("webmapx-search-result", {
+				detail: this.results,
+				bubbles: !0,
+				composed: !0
+			}));
+		}
+	}
+	async handleKey(e) {
+		e.key === "Enter" ? await this.doSearch() : e.key === "ArrowDown" ? this.selectedIndex = Math.min((this.results?.features?.length ?? 0) - 1, Math.max(0, this.selectedIndex + 1)) : e.key === "ArrowUp" && (this.selectedIndex = Math.max(0, this.selectedIndex - 1));
+	}
+	getFeatureTitle(e) {
+		return (e.properties && (e.properties.display_name || e.properties.name)) ?? JSON.stringify(e.geometry?.type ?? "");
+	}
+	centerFeature(e) {
+		let t = null, n = e.bbox;
+		if (n && n.length === 4 && this.adapter) {
+			t = [(n[0] + n[2]) / 2, (n[1] + n[3]) / 2];
+			try {
+				if (typeof this.adapter.fitBounds == "function") {
+					this.adapter.fitBounds(n);
+					return;
+				}
+			} catch (e) {
+				console.warn("adapter fitBounds failed", e);
+			}
+		}
+		if (e.geometry?.type === "Point") {
+			let n = e.geometry.coordinates;
+			t = [n[0], n[1]];
+		}
+		let r = e.properties && (e.properties.zoom || this.cfg.defaultZoom) || this.cfg.defaultZoom;
+		if (t && this.adapter) try {
+			this.adapter.setViewport(t, r);
+		} catch (e) {
+			console.warn("setViewport failed", e);
+		}
+	}
+	handleSelect(e) {
+		this.centerFeature(e);
+		let t = e.bbox ?? null;
+		this.dispatchEvent(new CustomEvent("webmapx-search-selected", {
+			detail: {
+				feature: e,
+				bbox: t,
+				center: null
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	persistedChanged(e, t) {
+		this.dispatchEvent(new CustomEvent("webmapx-search-persist-change", {
+			detail: {
+				feature: e,
+				persisted: t
+			},
+			bubbles: !0,
+			composed: !0
+		})), this.requestUpdate();
+	}
+	isPersisted(e) {
+		return this.persistedMap.has(e);
+	}
+	addPersistedFeature(e) {
+		if (!this.adapter || !this.mapElement) return;
+		this.adapter;
+		let t = this.mapElement, n = null;
+		e.properties && (e.properties.osm_id || e.properties.osm_type) && (n = `search-persist-osm-${e.properties.osm_type ?? ""}-${e.properties.osm_id ?? ""}`), n ||= `search-persist-${Date.now()}-${this.persistCounter++}`;
+		let r = {
+			type: "FeatureCollection",
+			features: [e]
+		};
+		try {
+			let i = this.randomColorHex(), a = {
+				type: "geojson",
+				data: r
+			};
+			this.cfg.attribution && (a.attribution = this.cfg.attribution);
+			let o = { [n]: a }, s = e.geometry?.type, c = `${n}-fill`, l = `${n}-line`, u = `${n}-point`, d = this.getFeatureTitle(e);
+			s === "Polygon" || s === "MultiPolygon" ? t.addLayerRequest({
+				id: c,
+				type: "style",
+				sources: o,
+				layers: [{
+					id: "fill",
+					type: "fill",
+					source: n,
+					paint: {
+						"fill-color": i,
+						"fill-opacity": .25
+					}
+				}, {
+					id: "line",
+					type: "line",
+					source: n,
+					paint: {
+						"line-color": i,
+						"line-width": 2
+					}
+				}],
+				metadata: {
+					label: d,
+					hideFromLegend: !1
+				}
+			}) : s === "LineString" || s === "MultiLineString" ? t.addLayerRequest({
+				id: l,
+				type: "line",
+				source: n,
+				sources: o,
+				metadata: {
+					label: d,
+					hideFromLegend: !1
+				},
+				paint: {
+					"line-color": i,
+					"line-width": 3
+				}
+			}) : t.addLayerRequest({
+				id: u,
+				type: "circle",
+				source: n,
+				sources: o,
+				metadata: {
+					label: d,
+					hideFromLegend: !1
+				},
+				paint: {
+					"circle-color": i,
+					"circle-radius": 6
+				}
+			}), this.persistedMap.set(e, {
+				sourceId: n,
+				color: i
+			});
+		} catch (e) {
+			console.error("Failed to persist feature", e);
+		}
+	}
+	removePersistedFeature(e) {
+		if (!this.adapter || !this.mapElement) return;
+		let t = this.adapter, n = this.mapElement, r = this.persistedMap.get(e);
+		if (!r) return;
+		let i = r.sourceId;
+		try {
+			try {
+				n.removeInlineLayer(`${i}-fill`);
+			} catch {}
+			try {
+				n.removeInlineLayer(`${i}-line`);
+			} catch {}
+			try {
+				n.removeInlineLayer(`${i}-point`);
+			} catch {}
+			try {
+				t.removeSource(i);
+			} catch {}
+		} catch (e) {
+			console.warn("Error removing persisted feature", e);
+		}
+		this.persistedMap.delete(e);
+	}
+	async showPreviewLayers(e, t) {
+		if (!this.adapter || !this.mapElement) return;
+		let n = this.adapter, r = this.mapElement;
+		try {
+			let t = n.getSource(this.previewSourceId);
+			t && typeof t.setData == "function" ? t.setData(e) : n.addSource(this.previewSourceId, {
+				type: "geojson",
+				data: e
+			});
+		} catch (e) {
+			console.warn("preview source update failed", e);
+		}
+		for (let e of this.previewLayerIds) n.hasLayer(e) && r.removeInlineLayer(e);
+		try {
+			await r.addLayerRequest({
+				id: this.previewLayerIds[0],
+				type: "fill",
+				source: this.previewSourceId,
+				filter: [
+					"in",
+					"$type",
+					"Polygon"
+				],
+				metadata: {
+					hideFromLegend: !0,
+					label: "Search preview fill"
+				},
+				paint: {
+					"fill-color": t?.fill ?? "#f1c40f",
+					"fill-opacity": .25
+				}
+			}), await r.addLayerRequest({
+				id: this.previewLayerIds[1],
+				type: "line",
+				source: this.previewSourceId,
+				filter: [
+					"in",
+					"$type",
+					"LineString",
+					"Polygon"
+				],
+				metadata: {
+					hideFromLegend: !0,
+					label: "Search preview line"
+				},
+				paint: {
+					"line-color": t?.line ?? "#f39c12",
+					"line-width": 3
+				}
+			}), await r.addLayerRequest({
+				id: this.previewLayerIds[2],
+				type: "circle",
+				source: this.previewSourceId,
+				filter: [
+					"==",
+					"$type",
+					"Point"
+				],
+				metadata: {
+					hideFromLegend: !0,
+					label: "Search preview point"
+				},
+				paint: {
+					"circle-color": t?.point ?? "#e67e22",
+					"circle-radius": 6
+				}
+			}), this.previewLayersAdded = !0;
+		} catch (e) {
+			console.warn("preview layers update failed", e);
+		}
+	}
+	darkenHex(e, t = .15) {
+		let n = e.replace("#", "");
+		n.length === 3 && (n = n.split("").map((e) => e + e).join(""));
+		let r = parseInt(n.substring(0, 2), 16), i = parseInt(n.substring(2, 4), 16), a = parseInt(n.substring(4, 6), 16), o = (e) => Math.max(0, Math.min(255, Math.round(e * (1 - t)))), s = o(r), c = o(i), l = o(a), u = (e) => e.toString(16).padStart(2, "0");
+		return `#${u(s)}${u(c)}${u(l)}`;
+	}
+	clearPreview() {
+		if (!this.adapter || !this.mapElement) return;
+		let e = this.adapter, t = this.mapElement;
+		for (let n of this.previewLayerIds) e.hasLayer(n) && t.removeInlineLayer(n);
+		try {
+			e.removeSource(this.previewSourceId);
+		} catch {}
+		this.previewLayersAdded = !1;
+	}
+	showPreviewForFeature(e) {
+		let t = {
+			type: "FeatureCollection",
+			features: [e]
+		}, n = this.persistedMap.get(e), r = n?.color ? (() => {
+			let e = this.darkenHex(n.color, .18);
+			return {
+				fill: e,
+				line: e,
+				point: e
+			};
+		})() : void 0;
+		this.showPreviewLayers(t, r);
+	}
+	onResultCheckboxChange(e, t) {
+		try {
+			t.stopPropagation();
+		} catch {}
+		let n = t, r = !1;
+		r = n?.detail && typeof n.detail.checked == "boolean" ? n.detail.checked : !!t.target?.checked, r ? this.isPersisted(e) || (this.clearPreview(), this.addPersistedFeature(e), this.persistedChanged(e, !0)) : this.isPersisted(e) && (this.removePersistedFeature(e), this.persistedChanged(e, !1)), this.requestUpdate();
+	}
+	render() {
+		return o`
+      <div class="container tool-content">
+        <div class="title">Search</div>
+        <div class="searchbox">
+          <input
+            type="text"
+            name="${this.searchInputName}"
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
+            spellcheck="false"
+            placeholder="Search places and addresses"
+            .value="${this.query}"
+            @input="${(e) => {
+			this.query = e.target.value;
+		}}"
+            @keyup="${(e) => this.handleKey(e)}"
+          />
+          <button @click="${() => this.doSearch()}">Go</button>
+        </div>
+
+        <div class="results">
+          ${this.searching ? o`<div>Searching...</div>` : ""}
+          ${this.results ? o`
+            <div style="display:flex; align-items:center; gap:8px; padding:2px 6px; font-size:11px; color:var(--color-text-secondary); border-bottom:1px solid var(--color-border);">
+              <span style="flex:0 0 auto; min-width:1.5rem; text-align:center;" title="Check to add result as a permanent layer on the map">📌</span>
+              <span>hover to preview · click to zoom</span>
+            </div>
+            <ul>
+              ${(this.results.features || []).map((e, t) => o`
+                <li class="result-item" ?selected=${t === this.selectedIndex}
+                    @mouseenter=${() => this.showPreviewForFeature(e)}
+                    @mouseleave=${() => this.clearPreview()}>
+                  <sl-checkbox
+                    .checked=${this.isPersisted(e)}
+                    @sl-change=${(t) => this.onResultCheckboxChange(e, t)}
+                    @click=${(e) => e.stopPropagation()}
+                    style="flex:0 0 auto;">
+                  </sl-checkbox>
+                  <div @click=${() => this.handleSelect(e)} style="flex:1; display:flex; justify-content:space-between; align-items:center; cursor:pointer;">
+                    <strong>${this.getFeatureTitle(e)}</strong>
+                    <span style="font-size:12px; color:var(--color-text-secondary);">${e.properties && (e.properties.type || e.properties.category) || ""}</span>
+                  </div>
+                </li>
+              `)}
+            </ul>
+          ` : o``}
+        </div>
+      </div>
+    `;
+	}
+};
+t([r()], c.prototype, "query", void 0), t([r()], c.prototype, "results", void 0), t([r()], c.prototype, "searching", void 0), t([r()], c.prototype, "selectedIndex", void 0), c = s = t([i("webmapx-search-tool")], c);
+//#endregion
+export { c as WebmapxSearchTool };