@edugis-org/webmapx 0.1.0

package/dist-lib/webmapx-config-edit-tool-DCTyxqTk.js

@@ -0,0 +1,389 @@
+import { r as e, t } from "./decorate-CWgUV1hU.js";
+import { i as n, o as r } from "./decorators-B35AgiCU.js";
+import "./icon-CEOgWlro.js";
+import "./button-DFdGkRPQ.js";
+import "./checkbox-QoR4S8tV.js";
+import "./input-CeGntPlT.js";
+import "./divider-CPm675yY.js";
+import { LitElement as i, css as a, html as o } from "lit";
+//#region src/utils/dynamic-layout.ts
+var s = [
+	{
+		id: "search",
+		label: "Search",
+		icon: "search"
+	},
+	{
+		id: "layerTree",
+		label: "Catalog",
+		icon: "layers"
+	},
+	{
+		id: "measure",
+		label: "Measure",
+		icon: "rulers"
+	},
+	{
+		id: "info",
+		label: "Feature info",
+		icon: "info-circle"
+	},
+	{
+		id: "draw",
+		label: "Draw",
+		icon: "pencil"
+	},
+	{
+		id: "geolocation",
+		label: "Geolocation",
+		icon: "crosshair"
+	},
+	{
+		id: "view-mode",
+		label: "View mode",
+		icon: "globe"
+	},
+	{
+		id: "3d",
+		label: "3D",
+		icon: "box"
+	},
+	{
+		id: "importLayer",
+		label: "Import layer",
+		icon: "file-earmark-arrow-up"
+	},
+	{
+		id: "layerOverview",
+		label: "Legend",
+		icon: "card-list"
+	},
+	{
+		id: "maplanguage",
+		label: "Map language",
+		icon: "translate"
+	},
+	{
+		id: "print",
+		label: "Print",
+		icon: "printer"
+	},
+	{
+		id: "truearea",
+		label: "True Area",
+		icon: "bounding-box-circles"
+	},
+	{
+		id: "settings",
+		label: "Settings",
+		icon: "gear"
+	},
+	{
+		id: "navigation",
+		label: "Navigation",
+		icon: "compass"
+	},
+	{
+		id: "scale",
+		label: "Scale bar",
+		icon: "rulers"
+	},
+	{
+		id: "coordinates",
+		label: "Coordinates",
+		icon: "crosshair2"
+	},
+	{
+		id: "fullscreen",
+		label: "Fullscreen",
+		icon: "fullscreen"
+	},
+	{
+		id: "zoomLevel",
+		label: "Zoom level",
+		icon: "zoom-in"
+	},
+	{
+		id: "attribution",
+		label: "Attribution",
+		icon: "info-circle"
+	},
+	{
+		id: "insetMap",
+		label: "Inset map",
+		icon: "map"
+	}
+], c = new Set([
+	"configedit",
+	"config-edit",
+	"settings"
+]), l = {
+	layers: "layerTree",
+	catalog: "layerTree",
+	datacatalog: "layerTree",
+	"import-layer": "importLayer",
+	legend: "layerOverview",
+	geolocate: "geolocation"
+};
+function u(e) {
+	return l[e] ?? e;
+}
+function d(e, t) {
+	let n = e.tools ?? {};
+	for (let [e, r] of Object.entries(n)) if (u(e) === t) return r?.enabled !== !1;
+	for (let e of Object.values(n)) {
+		let n = e?.items;
+		if (Array.isArray(n)) for (let e of n) {
+			let n = e;
+			if (u(String(n.id ?? n.type ?? "")) === t) return n.enabled !== !1;
+		}
+	}
+	return null;
+}
+function f(e, t, n, r, i, a, o, s, l) {
+	let d = /* @__PURE__ */ new Set(), f = null, p = {};
+	for (let [n, r] of Object.entries(e.tools ?? {})) {
+		let e = r ?? {}, i = u(n);
+		if (c.has(n) || c.has(i)) p[n] = {
+			...e,
+			enabled: !1
+		}, d.add(i);
+		else if (Array.isArray(e.items)) {
+			f ||= n;
+			let r = e.items.map((e) => {
+				let n = e, r = u(String(n.id ?? n.type ?? ""));
+				return c.has(r) ? (d.add(r), {
+					...n,
+					enabled: !1
+				}) : t.has(r) ? (d.add(r), {
+					...n,
+					enabled: t.get(r)
+				}) : e;
+			});
+			p[n] = {
+				...e,
+				items: r
+			};
+		} else t.has(i) ? (d.add(i), p[n] = {
+			...e,
+			enabled: t.get(i)
+		}) : p[n] = r;
+	}
+	let m = Array.from(t.entries()).filter(([e, t]) => t === !0 && !d.has(e) && !c.has(e));
+	if (m.length > 0 && f) {
+		let e = p[f], t = [...e.items ?? []];
+		for (let [e] of m) t.push({
+			id: e,
+			type: e,
+			enabled: !0
+		});
+		p[f] = {
+			...e,
+			items: t
+		};
+	}
+	let h = l ?? /* @__PURE__ */ new Set(), g = h.size > 0 ? (() => {
+		let t = (e.layerData?.layers ?? []).filter((e) => !h.has(e.id)), n = new Set(t.map((e) => e.source).filter(Boolean)), r = (e.layerData?.sources ?? []).filter((e) => n.has(e.id));
+		return {
+			...e.layerData,
+			layers: t,
+			sources: r
+		};
+	})() : e.layerData, _ = e.project, v = s?.trim() ? {
+		..._,
+		title: s.trim(),
+		id: s.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "") || "config"
+	} : _, y = a ? {
+		...e.map,
+		center: a.center,
+		zoom: Math.round(a.zoom * 100) / 100,
+		...a.bearing === 0 ? { bearing: void 0 } : { bearing: Math.round(a.bearing * 10) / 10 },
+		...a.pitch === 0 ? { pitch: void 0 } : { pitch: Math.round(a.pitch * 10) / 10 },
+		...o && o !== "mercator" ? { projection: o } : { projection: void 0 }
+	} : e.map, b = [...i && !h.has(i) ? [i] : [], ...r.filter((e) => !h.has(e))], x = {
+		...e.state,
+		activeLayers: b.map((e) => ({
+			ref: e,
+			visible: !0
+		})),
+		...i ? { activeBackground: i } : {}
+	};
+	if (!n) return {
+		...e,
+		project: v,
+		map: y,
+		layerData: g,
+		tools: p,
+		state: x
+	};
+	let S = new Set(r);
+	i && S.add(i);
+	let C = (e.layerData?.layers ?? []).filter((e) => S.has(e.id)), w = new Set(C.map((e) => e.source).filter(Boolean)), T = (e.layerData?.sources ?? []).filter((e) => w.has(e.id)), E = {
+		...e.layerData,
+		layers: C,
+		sources: T
+	}, D = (e) => {
+		let t = [];
+		for (let n of e) {
+			let e = n;
+			if (e.layerId) S.has(e.layerId) && !h.has(e.layerId) && t.push(n);
+			else if (Array.isArray(e.children)) {
+				let n = D(e.children);
+				n.length > 0 && t.push({
+					...e,
+					children: n
+				});
+			}
+		}
+		return t;
+	}, O = {};
+	for (let [e, t] of Object.entries(p)) {
+		let n = t;
+		Array.isArray(n?.items) ? O[e] = {
+			...n,
+			items: n.items.map((e) => {
+				let t = e;
+				return Array.isArray(t.tree) ? {
+					...t,
+					tree: D(t.tree)
+				} : e;
+			})
+		} : O[e] = t;
+	}
+	return {
+		...e,
+		project: v,
+		map: y,
+		tools: O,
+		layerData: E,
+		state: x
+	};
+}
+var p = class extends i {
+	constructor(...e) {
+		super(...e), this.toolEnabled = /* @__PURE__ */ new Map(), this.onlyActiveLayers = !1, this.removeUnsupported = !1, this.projectTitle = "", this.filename = "config.json";
+	}
+	static {
+		this.styles = a`
+        :host { display: block; padding: 0.75rem; box-sizing: border-box; min-width: 220px; }
+        h4 { margin: 0 0 0.6rem; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
+        .section-label { font-size: 0.78rem; font-weight: 600; color: var(--sl-color-neutral-600); margin: 0.6rem 0 0.3rem; }
+        .tool-list { display: flex; flex-direction: column; gap: 0.15rem; }
+        sl-checkbox::part(label) { font-size: 0.82rem; }
+        sl-input { margin-top: 0.6rem; }
+        sl-button { margin-top: 0.5rem; width: 100%; }
+    `;
+	}
+	get mapElement() {
+		return e(this);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.loadFromConfig();
+	}
+	loadFromConfig() {
+		let e = this.mapElement?.config, t = /* @__PURE__ */ new Map();
+		for (let { id: n } of s) c.has(n) || t.set(n, d(e ?? {}, n));
+		this.toolEnabled = t;
+		let n = e?.project;
+		this.projectTitle = typeof n?.title == "string" ? n.title : "";
+		let r = (typeof n?.id == "string" ? n.id : "config").toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "") || "config";
+		this.filename = `${r}.json`;
+	}
+	handleTitleInput(e) {
+		this.projectTitle = e.target.value;
+		let t = this.projectTitle.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "") || "config";
+		this.filename = `${t}.json`;
+	}
+	toggle(e, t) {
+		this.toolEnabled = new Map(this.toolEnabled).set(e, t);
+	}
+	async handleDownload() {
+		let e = this.mapElement, t = e?.config;
+		if (!t) return;
+		let n = e?.adapter, r = n?.store?.getState?.()?.mapLayers ?? {}, i = n?.getViewportState?.(), a = n?.getProjection?.()?.name ?? null, o = [], s;
+		for (let [e, t] of Object.entries(r)) t?.visible !== !1 && (t?.legendRole === "background" ? s = e : o.push(e));
+		let c = /* @__PURE__ */ new Set(), l;
+		if (this.removeUnsupported) {
+			let n = (t) => e?.isCatalogLayerSupported?.(t) ?? Promise.resolve(!0), r = await Promise.all((t.layerData?.layers ?? []).map(async (e) => {
+				let t = e.id;
+				return await n(t) ? null : t;
+			}));
+			if (c = new Set(r.filter((e) => e !== null)), s && c.has(s)) {
+				let e = (t.layerData?.layers ?? []).find((e) => e.id === s)?.singleGroup;
+				if (e) for (let n of t.layerData?.layers ?? []) {
+					let t = n;
+					if (t.singleGroup === e && !c.has(t.id)) {
+						l = t.id;
+						break;
+					}
+				}
+				if (!l) {
+					let { showToast: e } = await import("./toast-Cm28o9U6.js").then((e) => e.n);
+					e("<strong>No supported background layer available</strong><br>All background layers are unsupported by the current engine. Uncheck \"Remove engine-unsupported layers\" or switch engine.", { variant: "danger" });
+					return;
+				}
+			}
+		}
+		let u = /* @__PURE__ */ new Map();
+		for (let [e, t] of this.toolEnabled) t !== null && u.set(e, t);
+		let d = s && c.has(s) ? l : s, p = f(t, u, this.onlyActiveLayers, o, d, i, a, this.projectTitle, c), m = new Blob([JSON.stringify(p, null, 2)], { type: "application/json" }), h = URL.createObjectURL(m);
+		Object.assign(document.createElement("a"), {
+			href: h,
+			download: this.filename || "config.json"
+		}).click(), URL.revokeObjectURL(h);
+	}
+	render() {
+		let e = s.filter((e) => !c.has(e.id));
+		return o`
+            <h4><sl-icon name="pencil-square"></sl-icon> Edit config</h4>
+
+            <sl-input size="small" label="Project title" required
+                ?invalid=${!this.projectTitle.trim()}
+                help-text=${this.projectTitle.trim() ? "" : "Title is required"}
+                .value=${this.projectTitle}
+                @sl-input=${this.handleTitleInput}>
+            </sl-input>
+
+            <sl-checkbox
+                ?checked=${this.onlyActiveLayers}
+                @sl-change=${(e) => {
+			this.onlyActiveLayers = e.target.checked;
+		}}>
+                Only active layers
+            </sl-checkbox>
+            <sl-checkbox
+                ?checked=${this.removeUnsupported}
+                @sl-change=${(e) => {
+			this.removeUnsupported = e.target.checked;
+		}}>
+                Remove engine-unsupported layers
+            </sl-checkbox>
+
+            <div class="section-label">Visible tools:</div>
+            <div class="tool-list">
+                ${e.map((e) => o`
+                    <sl-checkbox
+                        ?checked=${this.toolEnabled.get(e.id) === !0}
+                        @sl-change=${(t) => this.toggle(e.id, t.target.checked)}>
+                        ${e.label}
+                    </sl-checkbox>
+                `)}
+            </div>
+
+            <sl-input size="small" label="Filename"
+                .value=${this.filename}
+                @sl-input=${(e) => {
+			this.filename = e.target.value;
+		}}>
+            </sl-input>
+
+            <sl-button variant="primary" ?disabled=${!this.projectTitle.trim()} @click=${this.handleDownload}>
+                <sl-icon slot="prefix" name="download"></sl-icon>
+                Download config
+            </sl-button>
+        `;
+	}
+};
+t([n()], p.prototype, "toolEnabled", void 0), t([n()], p.prototype, "onlyActiveLayers", void 0), t([n()], p.prototype, "removeUnsupported", void 0), t([n()], p.prototype, "projectTitle", void 0), t([n()], p.prototype, "filename", void 0), p = t([r("webmapx-config-edit-tool")], p);
+//#endregion
+export { p as WebmapxConfigEditTool };