@edugis-org/webmapx 0.1.0

package/dist-lib/tooltip-Cucn1SiD.js

@@ -0,0 +1,197 @@
+import { a as e, n as t } from "./decorators-B35AgiCU.js";
+import { a as n, i as r, n as i, o as a, s as o, t as s } from "./chunk.AJ3ENQ5C-Ci7Gm2b6.js";
+import { d as c, f as l, l as u, u as d } from "./chunk.YHLNUJ7P-D-kanrCf.js";
+import { a as f } from "./chunk.NYIIDP5N-BikXIStD.js";
+import { t as p } from "./chunk.6CTB5ZDJ-DjZrBd6Y.js";
+import { t as m } from "./chunk.5JY5FUCG-DTXsslmx.js";
+import { css as h, html as g } from "lit";
+//#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.HF7GESMZ.js
+function _(e, t, n) {
+	return ((e) => Object.is(e, -0) ? 0 : e)(e < t ? t : e > n ? n : e);
+}
+//#endregion
+//#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.FW7UWQXB.js
+var v = h`
+  :host {
+    --max-width: 20rem;
+    --hide-delay: 0ms;
+    --show-delay: 150ms;
+
+    display: contents;
+  }
+
+  .tooltip {
+    --arrow-size: var(--sl-tooltip-arrow-size);
+    --arrow-color: var(--sl-tooltip-background-color);
+  }
+
+  .tooltip::part(popup) {
+    z-index: var(--sl-z-index-tooltip);
+  }
+
+  .tooltip[placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .tooltip[placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  .tooltip[placement^='left']::part(popup) {
+    transform-origin: right;
+  }
+
+  .tooltip[placement^='right']::part(popup) {
+    transform-origin: left;
+  }
+
+  .tooltip__body {
+    display: block;
+    width: max-content;
+    max-width: var(--max-width);
+    border-radius: var(--sl-tooltip-border-radius);
+    background-color: var(--sl-tooltip-background-color);
+    font-family: var(--sl-tooltip-font-family);
+    font-size: var(--sl-tooltip-font-size);
+    font-weight: var(--sl-tooltip-font-weight);
+    line-height: var(--sl-tooltip-line-height);
+    text-align: start;
+    white-space: normal;
+    color: var(--sl-tooltip-color);
+    padding: var(--sl-tooltip-padding);
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+`, y = class extends u {
+	constructor() {
+		super(), this.localize = new p(this), this.content = "", this.placement = "top", this.disabled = !1, this.distance = 8, this.open = !1, this.skidding = 0, this.trigger = "hover focus", this.hoist = !1, this.handleBlur = () => {
+			this.hasTrigger("focus") && this.hide();
+		}, this.handleClick = () => {
+			this.hasTrigger("click") && (this.open ? this.hide() : this.show());
+		}, this.handleFocus = () => {
+			this.hasTrigger("focus") && this.show();
+		}, this.handleDocumentKeyDown = (e) => {
+			e.key === "Escape" && (e.stopPropagation(), this.hide());
+		}, this.handleMouseOver = () => {
+			if (this.hasTrigger("hover")) {
+				let e = i(getComputedStyle(this).getPropertyValue("--show-delay"));
+				clearTimeout(this.hoverTimeout), this.hoverTimeout = window.setTimeout(() => this.show(), e);
+			}
+		}, this.handleMouseOut = () => {
+			if (this.hasTrigger("hover")) {
+				let e = i(getComputedStyle(this).getPropertyValue("--hide-delay"));
+				clearTimeout(this.hoverTimeout), this.hoverTimeout = window.setTimeout(() => this.hide(), e);
+			}
+		}, this.addEventListener("blur", this.handleBlur, !0), this.addEventListener("focus", this.handleFocus, !0), this.addEventListener("click", this.handleClick), this.addEventListener("mouseover", this.handleMouseOver), this.addEventListener("mouseout", this.handleMouseOut);
+	}
+	disconnectedCallback() {
+		var e;
+		super.disconnectedCallback(), (e = this.closeWatcher) == null || e.destroy(), document.removeEventListener("keydown", this.handleDocumentKeyDown);
+	}
+	firstUpdated() {
+		this.body.hidden = !this.open, this.open && (this.popup.active = !0, this.popup.reposition());
+	}
+	hasTrigger(e) {
+		return this.trigger.split(" ").includes(e);
+	}
+	async handleOpenChange() {
+		var e, t;
+		if (this.open) {
+			if (this.disabled) return;
+			this.emit("sl-show"), "CloseWatcher" in window ? ((e = this.closeWatcher) == null || e.destroy(), this.closeWatcher = new CloseWatcher(), this.closeWatcher.onclose = () => {
+				this.hide();
+			}) : document.addEventListener("keydown", this.handleDocumentKeyDown), await r(this.body), this.body.hidden = !1, this.popup.active = !0;
+			let { keyframes: t, options: n } = a(this, "tooltip.show", { dir: this.localize.dir() });
+			await s(this.popup.popup, t, n), this.popup.reposition(), this.emit("sl-after-show");
+		} else {
+			this.emit("sl-hide"), (t = this.closeWatcher) == null || t.destroy(), document.removeEventListener("keydown", this.handleDocumentKeyDown), await r(this.body);
+			let { keyframes: e, options: n } = a(this, "tooltip.hide", { dir: this.localize.dir() });
+			await s(this.popup.popup, e, n), this.popup.active = !1, this.body.hidden = !0, this.emit("sl-after-hide");
+		}
+	}
+	async handleOptionsChange() {
+		this.hasUpdated && (await this.updateComplete, this.popup.reposition());
+	}
+	handleDisabledChange() {
+		this.disabled && this.open && this.hide();
+	}
+	async show() {
+		if (!this.open) return this.open = !0, n(this, "sl-after-show");
+	}
+	async hide() {
+		if (this.open) return this.open = !1, n(this, "sl-after-hide");
+	}
+	render() {
+		return g`
+      <sl-popup
+        part="base"
+        exportparts="
+          popup:base__popup,
+          arrow:base__arrow
+        "
+        class=${f({
+			tooltip: !0,
+			"tooltip--open": this.open
+		})}
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? "fixed" : "absolute"}
+        flip
+        shift
+        arrow
+        hover-bridge
+      >
+        ${""}
+        <slot slot="anchor" aria-describedby="tooltip"></slot>
+
+        ${""}
+        <div part="body" id="tooltip" class="tooltip__body" role="tooltip" aria-live=${this.open ? "polite" : "off"}>
+          <slot name="content">${this.content}</slot>
+        </div>
+      </sl-popup>
+    `;
+	}
+};
+//#endregion
+//#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.URTPIBTY.js
+y.styles = [d, v], y.dependencies = { "sl-popup": m }, l([t("slot:not([name])")], y.prototype, "defaultSlot", 2), l([t(".tooltip__body")], y.prototype, "body", 2), l([t("sl-popup")], y.prototype, "popup", 2), l([e()], y.prototype, "content", 2), l([e()], y.prototype, "placement", 2), l([e({
+	type: Boolean,
+	reflect: !0
+})], y.prototype, "disabled", 2), l([e({ type: Number })], y.prototype, "distance", 2), l([e({
+	type: Boolean,
+	reflect: !0
+})], y.prototype, "open", 2), l([e({ type: Number })], y.prototype, "skidding", 2), l([e()], y.prototype, "trigger", 2), l([e({ type: Boolean })], y.prototype, "hoist", 2), l([c("open", { waitUntilFirstUpdate: !0 })], y.prototype, "handleOpenChange", 1), l([c([
+	"content",
+	"distance",
+	"hoist",
+	"placement",
+	"skidding"
+])], y.prototype, "handleOptionsChange", 1), l([c("disabled")], y.prototype, "handleDisabledChange", 1), o("tooltip.show", {
+	keyframes: [{
+		opacity: 0,
+		scale: .8
+	}, {
+		opacity: 1,
+		scale: 1
+	}],
+	options: {
+		duration: 150,
+		easing: "ease"
+	}
+}), o("tooltip.hide", {
+	keyframes: [{
+		opacity: 1,
+		scale: 1
+	}, {
+		opacity: 0,
+		scale: .8
+	}],
+	options: {
+		duration: 150,
+		easing: "ease"
+	}
+}), y.define("sl-tooltip");
+//#endregion
+export { _ as t };

package/dist-lib/webmapx-3d-tool-D4CTD2gB.js

@@ -0,0 +1,176 @@
+import { t as e } from "./decorate-CWgUV1hU.js";
+import { t } from "./webmapx-base-tool-Dm9NAWLD.js";
+import { i as n, o as r } from "./decorators-B35AgiCU.js";
+import { css as i, html as a } from "lit";
+//#region src/components/webmapx-3d-tool.ts
+var o, s = [
+	0,
+	30,
+	60
+], c = class extends t {
+	static {
+		o = this;
+	}
+	constructor(...e) {
+		super(...e), this.pitch = 0, this.terrainEnabled = !1, this.terrainSupported = !1, this.pitchSupported = !0;
+	}
+	static {
+		this.styles = i`
+        :host { display: block; padding: var(--webmapx-tool-padding, 0); font-size: 0.875rem; }
+        .unsupported { color: var(--sl-color-neutral-500, #888); font-style: italic; }
+        label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
+        .pitch-buttons { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
+        .pitch-buttons button {
+            flex: 1; padding: 0.35rem 0; border: 1px solid var(--color-border, #d7dce3);
+            border-radius: 4px; background: var(--color-background, #fff); cursor: pointer; font-size: 0.875rem;
+        }
+        .pitch-buttons button.active {
+            background: var(--color-primary, #0f62fe); color: #fff; border-color: var(--color-primary, #0f62fe);
+        }
+        .pitch-hint { font-size: 0.8rem; color: var(--sl-color-neutral-600, #555); margin-bottom: 0.5rem; line-height: 1.5; }
+        .terrain-row { display: flex; align-items: center; gap: 0.5rem; }
+    `;
+	}
+	onMapAttached() {
+		this.syncFromAdapter();
+	}
+	onStateChanged(e) {
+		this.syncFromAdapter();
+	}
+	syncFromAdapter() {
+		if (!this.adapter) return;
+		let e = this.adapter.getNavigationCapabilities();
+		this.pitchSupported = e?.pitch !== !1, this.pitch = this.adapter.getPitch();
+		let t = this.adapter.isTerrainEnabled();
+		this.terrainSupported = t !== null, this.terrainEnabled = t === !0;
+	}
+	setPitch(e) {
+		this.adapter && (this.adapter.setPitch(e), this.pitch = e);
+	}
+	getToolAttr(e) {
+		let t = this.getAttribute("tool-id"), n = this.toolsConfig ? Object.values(this.toolsConfig) : [];
+		for (let r of n) {
+			let n = Array.isArray(r?.items) ? r.items : [];
+			for (let r of n) if (r?.id === t && typeof r[e] == "string") return r[e];
+		}
+	}
+	getMaplibreTerrainSource() {
+		let e = this.layerDataConfig?.sources?.find((e) => e?.type === "raster-dem");
+		if (e) return e;
+		for (let e of this.layerDataConfig?.layers ?? []) {
+			let t = e?.sources;
+			if (!(!t || typeof t != "object")) {
+				for (let [n, r] of Object.entries(t)) if (r?.type === "raster-dem") {
+					let t = e?.id;
+					return {
+						...r,
+						id: t ? `${t}:${n}` : n
+					};
+				}
+			}
+		}
+		let t = this.getToolAttr("maplibre-terrain-fallback-url");
+		if (t) return {
+			type: "raster-dem",
+			tiles: [t],
+			tileSize: 256,
+			encoding: "terrarium",
+			maxzoom: 15
+		};
+	}
+	getCesiumTerrainUrl() {
+		let e = this.layerDataConfig?.layers?.find((e) => e?.type === "terrain" || e?.type === "cesium-terrain");
+		return e?.url ?? e?.source?.url ?? this.getToolAttr("cesium-terrain-fallback-url");
+	}
+	static {
+		this.TERRAIN_LAYER_ID = "webmapx-terrain-hillshade";
+	}
+	findActiveHillshadeSource() {
+		let e = this.store?.getState().mapLayers ?? {};
+		for (let [t, n] of Object.entries(e)) {
+			if (n?.layerType !== "hillshade") continue;
+			let e = n?.sourceId;
+			if (e) {
+				let t = this.layerDataConfig?.sources?.find((t) => t?.id === e);
+				if (t) return t;
+				if (this.adapter?.getSource(e)) return {
+					id: e,
+					type: "raster-dem"
+				};
+			}
+			let r = n?.sublayers;
+			if (r) for (let e of r) {
+				if (e?.type !== "hillshade") continue;
+				let n = `${t}:${typeof e.source == "string" ? e.source : "source"}`;
+				if (this.adapter?.getSource(n)) return {
+					id: n,
+					type: "raster-dem"
+				};
+			}
+		}
+	}
+	async toggleTerrain() {
+		if (!this.adapter) return;
+		if (this.mapConfig?.type === "cesium") {
+			let e = !this.terrainEnabled;
+			this.adapter.setTerrainEnabled(e, this.getCesiumTerrainUrl()) && (this.terrainEnabled = e);
+			return;
+		}
+		if (this.terrainEnabled) {
+			this.adapter.setTerrainEnabled(!1), this.terrainEnabled = !1;
+			return;
+		}
+		let e = this.findActiveHillshadeSource();
+		if (!e) {
+			let t = this.getMaplibreTerrainSource();
+			if (!t) return;
+			let n = t.id ?? "webmapx-terrain-source", r = this.layerDataConfig?.layers?.find((e) => e?.sources?.[n.split(":").pop() ?? ""]?.type === "raster-dem" || e?.id && n.startsWith(e.id))?.title ?? "Terrain (hillshade)", i = {
+				id: o.TERRAIN_LAYER_ID,
+				type: "hillshade",
+				source: n,
+				title: r,
+				paint: { "hillshade-exaggeration": .2 },
+				sources: { [n]: {
+					...t,
+					id: n
+				} }
+			};
+			if (!await this.adapter.addLayer(i)) return;
+			e = {
+				...t,
+				id: n
+			};
+		}
+		this.adapter.setTerrainEnabled(!0, e) && (this.terrainEnabled = !0);
+	}
+	render() {
+		if (!this.pitchSupported && !this.terrainSupported) return a`<div class="unsupported">3D view is not supported by this engine.</div>`;
+		let e = Math.round(this.pitch), t = s.includes(e) ? e : -1, n = t < 0 && e > 0 && e < 60 ? `${e}°` : "30°", r = t < 0 && e > 60 ? `${e}°` : "60°", i = t < 0 && e > 0 && e <= 60, o = t < 0 && e > 60;
+		return a`
+            ${this.pitchSupported ? a`
+                <label>3D terrain and viewing angle</label>
+                <div class="pitch-buttons">
+                    <button class=${t === 0 ? "active" : ""} @click=${() => this.setPitch(0)}>0°</button>
+                    <button class=${t === 30 || i ? "active" : ""} @click=${() => this.setPitch(30)}>${n}</button>
+                    <button class=${t === 60 || o ? "active" : ""} @click=${() => this.setPitch(60)}>${r}</button>
+                </div>
+                <div class="pitch-hint">
+                    Choose a different viewing angle above,<br>
+                    or use CTRL + mouse button,<br>
+                    or drag the compass needle at the bottom left of the map,<br>
+                    or use 2 fingers on a touch screen.
+                </div>
+            ` : ""}
+            ${this.terrainSupported ? a`
+                <div class="terrain-row">
+                    <input type="checkbox" id="webmapx-3d-terrain" .checked=${this.terrainEnabled}
+                        @change=${() => this.toggleTerrain()}>
+                    <label for="webmapx-3d-terrain" style="margin:0;font-weight:normal;">Show terrain in 3D</label>
+                </div>
+            ` : ""}
+        `;
+	}
+};
+e([n()], c.prototype, "pitch", void 0), e([n()], c.prototype, "terrainEnabled", void 0), e([n()], c.prototype, "terrainSupported", void 0), e([n()], c.prototype, "pitchSupported", void 0), c = o = e([r("webmapx-3d-tool")], c);
+//#endregion
+export { c as Webmapx3dTool };

package/dist-lib/webmapx-base-tool-Dm9NAWLD.js

@@ -0,0 +1,75 @@
+import { n as e, r as t } from "./decorate-CWgUV1hU.js";
+import { LitElement as n } from "lit";
+//#region src/components/webmapx-base-tool.ts
+var r = class extends n {
+	constructor(...e) {
+		super(...e), this.adapter = null, this.store = null, this.unsubscribe = null, this.configReadyHandler = null, this.mapReadyHandler = null, this.isSettingValue = !1;
+	}
+	connectedCallback() {
+		if (super.connectedCallback(), !this.hasAttribute("aria-label") && !this.hasAttribute("aria-labelledby")) {
+			let e = this.getAttribute("label") ?? this.label, t = this.toolId ?? this.getAttribute("tool-id") ?? void 0, n = e ?? (t ? t.replace(/-/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()) : void 0);
+			n && this.setAttribute("aria-label", n);
+		}
+		this.bindToMap();
+	}
+	disconnectedCallback() {
+		this.unsubscribeFromConfig(), this.releaseStore(), super.disconnectedCallback();
+	}
+	bindToMap() {
+		this.releaseStore();
+		let t = e(this);
+		if (!t) {
+			this.subscribeToMapReady();
+			return;
+		}
+		this.adapter = t, this.store = t.store, this.unsubscribe = this.store.subscribe(this.handleStateChange.bind(this)), this.onMapAttached(t), this.onStateChanged(this.store.getState());
+	}
+	releaseStore() {
+		this.unsubscribeFromMapReady(), this.unsubscribe &&= (this.unsubscribe(), null), this.store = null, this.adapter = null, this.onMapDetached();
+	}
+	subscribeToMapReady() {
+		if (this.mapReadyHandler) return;
+		let e = t(this);
+		e && (this.mapReadyHandler = () => {
+			this.unsubscribeFromMapReady(), this.bindToMap();
+		}, e.addEventListener("webmapx-map-ready", this.mapReadyHandler));
+	}
+	unsubscribeFromMapReady() {
+		this.mapReadyHandler &&= (t(this)?.removeEventListener("webmapx-map-ready", this.mapReadyHandler), null);
+	}
+	handleStateChange(e, t) {
+		t === "UI" && this.isSettingValue || this.onStateChanged(e);
+	}
+	onMapAttached(e) {}
+	onMapDetached() {}
+	get mapHost() {
+		return this.closest("webmapx-map");
+	}
+	get config() {
+		return this.mapHost?.config ?? null;
+	}
+	get mapConfig() {
+		return this.config?.map;
+	}
+	get layerDataConfig() {
+		return this.config?.layerData ?? this.config?.catalog;
+	}
+	get catalogConfig() {
+		return this.config?.catalog;
+	}
+	get toolsConfig() {
+		return this.config?.tools;
+	}
+	subscribeToConfig() {
+		this.unsubscribeFromConfig(), this.config && this.onConfigReady(this.config), this.configReadyHandler = (e) => {
+			let t = e.detail;
+			this.onConfigReady(t.config);
+		}, this.mapHost?.addEventListener("webmapx-config-ready", this.configReadyHandler);
+	}
+	unsubscribeFromConfig() {
+		this.configReadyHandler &&= (this.mapHost?.removeEventListener("webmapx-config-ready", this.configReadyHandler), null);
+	}
+	onConfigReady(e) {}
+};
+//#endregion
+export { r as t };