@edugis-org/webmapx 0.1.0

package/dist-lib/webmapx-plugin-tool-D2Hghf9n.js

@@ -0,0 +1,45 @@
+import { t as e } from "./decorate-CWgUV1hU.js";
+import { a as t, o as n } from "./decorators-B35AgiCU.js";
+import { LitElement as r, html as i } from "lit";
+//#region src/components/webmapx-plugin-tool.ts
+var a = class extends r {
+	constructor(...e) {
+		super(...e), this.toolId = "", this.pluginElement = null, this.configReadyHandler = (e) => this.handleConfigReady(e);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		let e = this.closest("webmapx-map");
+		if (!e) return;
+		let t = e.toolsConfig;
+		if (t && this.toolId) {
+			this.mountPlugin(t[this.toolId]);
+			return;
+		}
+		e.addEventListener("webmapx-config-ready", this.configReadyHandler);
+	}
+	disconnectedCallback() {
+		this.closest("webmapx-map")?.removeEventListener("webmapx-config-ready", this.configReadyHandler), this.pluginElement = null, super.disconnectedCallback();
+	}
+	handleConfigReady(e) {
+		let t = e.detail?.config?.tools;
+		!t || !this.toolId || this.mountPlugin(t[this.toolId]);
+	}
+	mountPlugin(e) {
+		if (!e?.enabled || !e.element || this.pluginElement) return;
+		let t = document.createElement(e.element);
+		for (let [n, r] of Object.entries(e)) n === "enabled" || n === "element" || (t[n] = r);
+		this.pluginElement = t, this.requestUpdate();
+	}
+	render() {
+		return this.pluginElement ? i`<slot></slot>` : i``;
+	}
+	updated() {
+		this.pluginElement && !this.contains(this.pluginElement) && this.appendChild(this.pluginElement);
+	}
+};
+e([t({
+	type: String,
+	attribute: "tool-id"
+})], a.prototype, "toolId", void 0), a = e([n("webmapx-plugin-tool")], a);
+//#endregion
+export { a as t };

package/dist-lib/webmapx-print-tool-ob1bOsR5.js

@@ -0,0 +1,348 @@
+import { r as e, t } from "./decorate-CWgUV1hU.js";
+import { i as n, o as r } from "./decorators-B35AgiCU.js";
+import "./button-DFdGkRPQ.js";
+import "./checkbox-QoR4S8tV.js";
+import "./input-CeGntPlT.js";
+import "./spinner-DysxdNG9.js";
+import { i, r as a, t as o } from "./attribution-format-B4f05_u0.js";
+import { t as s } from "./webmapx-modal-tool-eF6Naluv.js";
+import "./option-CBxl1mZP.js";
+import { css as c, html as l } from "lit";
+//#region src/components/webmapx-print-tool.ts
+var u = 210, d = 297, f = 40, p = 10, m = 50, h = 12, g = 6, _ = 96 / 25.4;
+function v(e) {
+	return e * _;
+}
+function y(e) {
+	return e.startsWith("landscape");
+}
+function b(e) {
+	return e.endsWith("_with_legend");
+}
+function x(e) {
+	return {
+		w: (y(e) ? d : u) - 2 * p - (b(e) ? m : 0),
+		h: (y(e) ? u : d) - 2 * p
+	};
+}
+var S = class extends s {
+	constructor(...e) {
+		super(...e), this.toolId = "print", this.mapTitle = "", this.format = "portrait", this.addLink = !1, this.printing = !1, this.errorMsg = "", this.zoomDelta = 0, this.printBoxEl = null, this.resizeObserver = null;
+	}
+	static {
+		this.styles = c`
+        :host { display: block; font-size: var(--sl-font-size-small); }
+        .tool-content {
+            padding: var(--webmapx-tool-panel-padding, 12px);
+            display: flex; flex-direction: column; gap: 12px; min-width: 220px;
+        }
+        .description { color: var(--sl-color-neutral-600); margin: 0; line-height: 1.4; }
+        .field { display: flex; flex-direction: column; gap: 4px; }
+        .field label { font-weight: var(--sl-font-weight-semibold); font-size: var(--sl-font-size-small); }
+        .error { color: var(--sl-color-danger-600); font-size: var(--sl-font-size-x-small); margin: 0; }
+        .warning {
+            font-size: var(--sl-font-size-x-small);
+            color: var(--sl-color-warning-800, #854d0e);
+            background: var(--sl-color-warning-50, #fefce8);
+            border: 1px solid var(--sl-color-warning-200, #fef08a);
+            border-radius: var(--sl-border-radius-small);
+            padding: 6px 8px;
+            margin: 0;
+            line-height: 1.4;
+        }
+        .busy { display: flex; align-items: center; gap: 8px; color: var(--sl-color-neutral-600); }
+    `;
+	}
+	onActivate() {
+		let t = e(this);
+		if (!t) return;
+		this.printBoxEl = document.createElement("div"), this.printBoxEl.className = "webmapx-print-box", Object.assign(this.printBoxEl.style, {
+			position: "absolute",
+			boxSizing: "border-box",
+			backgroundImage: [
+				"repeating-linear-gradient(90deg, #fff 0, #fff 6px, #000 6px, #000 12px)",
+				"repeating-linear-gradient(90deg, #fff 0, #fff 6px, #000 6px, #000 12px)",
+				"repeating-linear-gradient(0deg,  #fff 0, #fff 6px, #000 6px, #000 12px)",
+				"repeating-linear-gradient(0deg,  #fff 0, #fff 6px, #000 6px, #000 12px)"
+			].join(","),
+			backgroundSize: "12px 2px, 12px 2px, 2px 12px, 2px 12px",
+			backgroundPosition: "0 0, 0 100%, 0 0, 100% 0",
+			backgroundRepeat: "repeat-x, repeat-x, repeat-y, repeat-y",
+			boxShadow: "0 0 0 9999px rgba(0,0,0,0.35)",
+			pointerEvents: "none"
+		});
+		let n = t.querySelector("webmapx-layout");
+		t.insertBefore(this.printBoxEl, n ?? t.firstChild), this.resizeObserver = new ResizeObserver(() => this.updateBox()), this.resizeObserver.observe(t), this.updateBox();
+	}
+	onDeactivate() {
+		this.printBoxEl?.remove(), this.printBoxEl = null, this.resizeObserver?.disconnect(), this.resizeObserver = null;
+	}
+	onStateChanged() {
+		this.updateBox();
+	}
+	updateBox() {
+		let t = e(this);
+		if (!this.printBoxEl || !t) return;
+		let n = t.clientWidth, r = t.clientHeight, i = n - 2 * f, a = r - 2 * f, o = x(this.format), s = v(o.w), c = v(o.h) - (this.mapTitle.trim() ? v(h) : 0) - (this.addLink ? v(g) : 0), l, u;
+		if (s <= i && c <= a) l = s, u = c, this.zoomDelta = 0;
+		else {
+			let e = Math.min(i / s, a / c);
+			l = s * e, u = c * e, this.zoomDelta = Math.log2(s / l);
+		}
+		Object.assign(this.printBoxEl.style, {
+			left: `${(n - l) / 2}px`,
+			top: `${(r - u) / 2}px`,
+			width: `${l}px`,
+			height: `${u}px`
+		});
+	}
+	async handlePrint() {
+		this.printing = !0, this.errorMsg = "";
+		try {
+			await this.renderAndPrint();
+		} catch (e) {
+			this.errorMsg = e instanceof Error ? e.message : "Print failed", console.error("[print-tool]", e);
+		} finally {
+			this.printing = !1;
+		}
+	}
+	async renderAndPrint() {
+		let t = this.adapter;
+		if (!t) throw Error("No map adapter available.");
+		let n = e(this), r = this.format, i = y(r), a = b(r), o = v(i ? d : u), s = v(i ? u : d), c = v(p), l = this.mapTitle.trim() ? v(h) : 0, f = this.addLink ? v(g) : 0, _ = a ? v(m) : 0, S = x(r), C = v(S.w), w = v(S.h) - l - f, T = n.getBoundingClientRect(), E = this.printBoxEl.getBoundingClientRect(), D = E.left - T.left, O = E.top - T.top, k = E.width, A = t.engineId === "maplibre", j = document.createElement("div");
+		if (j.id = "webmapx-print-overlay", Object.assign(j.style, {
+			position: "fixed",
+			top: "-99999px",
+			left: "0",
+			width: o + "px",
+			height: s + "px",
+			background: A ? "white" : "transparent",
+			display: "flex",
+			flexDirection: "column",
+			padding: c + "px",
+			boxSizing: "border-box",
+			fontFamily: "sans-serif"
+		}), l) {
+			let e = document.createElement("div");
+			e.textContent = this.mapTitle.trim(), Object.assign(e.style, {
+				height: l + "px",
+				lineHeight: l + "px",
+				fontSize: "16px",
+				fontWeight: "bold",
+				flexShrink: "0",
+				background: "white"
+			}), j.appendChild(e);
+		}
+		let M = [], N = document.createElement("div");
+		Object.assign(N.style, {
+			display: "flex",
+			gap: a ? "8px" : "0",
+			height: w + "px",
+			flexShrink: "0"
+		});
+		let P = document.createElement("div");
+		if (Object.assign(P.style, {
+			width: C + "px",
+			height: w + "px",
+			flexShrink: "0",
+			overflow: "hidden",
+			background: "transparent"
+		}), N.appendChild(P), a) {
+			let e = document.createElement("div");
+			Object.assign(e.style, {
+				width: _ - 8 + "px",
+				height: w + "px",
+				flexShrink: "0",
+				overflow: "hidden",
+				paddingLeft: "6px",
+				borderLeft: "1px solid #ddd",
+				boxSizing: "border-box",
+				display: "flex",
+				flexDirection: "column",
+				background: "white"
+			});
+			let t = document.createElement("div");
+			t.textContent = "Legend", Object.assign(t.style, {
+				fontWeight: "600",
+				fontSize: "8px",
+				letterSpacing: "0.06em",
+				textTransform: "uppercase",
+				color: "#555",
+				marginBottom: "4px",
+				flexShrink: "0"
+			}), e.appendChild(t);
+			let n = this.store?.getState()?.mapLayers ?? {};
+			for (let [t, r] of Object.entries(n).reverse()) {
+				if (r.hideFromLegend === !0 || r.legendExpandMode === "collapsed" || r.visible === !1) continue;
+				let n = typeof r.label == "string" && r.label ? r.label : t, i = document.createElement("div");
+				i.textContent = n, Object.assign(i.style, {
+					fontSize: "13px",
+					fontWeight: "700",
+					color: "#111827",
+					marginTop: "4px",
+					marginBottom: "1px",
+					flexShrink: "0",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				}), e.appendChild(i);
+				let a = document.createElement("webmapx-layer-legend");
+				a.setAttribute("layer-id", t), a.collapsible = !1, Object.assign(a.style, {
+					display: "block",
+					marginBottom: "6px",
+					flexShrink: "0"
+				}), e.appendChild(a), M.push(a);
+			}
+			N.appendChild(e);
+		}
+		j.appendChild(N);
+		let F = this.buildAttributionText();
+		if (F) {
+			let e = document.createElement("div");
+			e.textContent = F, Object.assign(e.style, {
+				flexShrink: "0",
+				textAlign: "left",
+				fontSize: "7px",
+				lineHeight: "1.4",
+				color: "#444",
+				fontFamily: "sans-serif",
+				paddingTop: "3px"
+			}), j.appendChild(e);
+		}
+		if (f) {
+			let e = document.createElement("div"), t = document.createElement("a");
+			t.href = window.location.href, t.textContent = window.location.href, e.appendChild(t), Object.assign(e.style, {
+				height: f + "px",
+				lineHeight: f + "px",
+				fontSize: "9px",
+				flexShrink: "0",
+				background: "white"
+			}), j.appendChild(e);
+		}
+		document.body.appendChild(j), M.length > 0 && (await Promise.all(M.map((e) => e.updateComplete ?? Promise.resolve())), await Promise.all(M.map((e) => e.updateComplete ?? Promise.resolve())), await Promise.all(M.map((e) => {
+			let t = e.shadowRoot ?? e, n = Array.from(t.querySelectorAll("img"));
+			return Promise.all(n.map((e) => e.complete ? Promise.resolve() : new Promise((t) => {
+				e.onload = () => t(), e.onerror = () => t();
+			})));
+		})));
+		let I = () => {}, L;
+		if (A) {
+			let e = t.core?.mapInstance;
+			if (!e) throw Error("MapLibre map not initialised.");
+			let r = e.unproject([D + k / 2, O + E.height / 2]), i = e.getZoom() + Math.log2(C / k), { default: a } = await import("maplibre-gl"), o = new a.Map({
+				container: P,
+				style: e.getStyle(),
+				center: r,
+				zoom: i,
+				bearing: e.getBearing(),
+				pitch: e.getPitch(),
+				interactive: !1,
+				attributionControl: !1
+			});
+			await new Promise((e, t) => {
+				let n = setTimeout(() => t(/* @__PURE__ */ Error("Map render timed out (30 s)")), 3e4);
+				o.once("idle", () => {
+					clearTimeout(n), e();
+				});
+			}), I = () => o.remove(), L = `
+  body > * { display: none !important; }
+  #webmapx-print-overlay { display: flex !important; position: fixed !important; top: 0 !important; left: 0 !important; }
+  #${n.id} > .webmapx-print-box { display: none !important; }`;
+		} else {
+			let e = C / k, t = c, r = c + l, i = T.width, a = T.height, o = O, s = i - D - k, u = a - O - E.height, d = D;
+			L = `
+  body > * { visibility: hidden !important; }
+  #${n.id} {
+    visibility: visible !important;
+    position: fixed !important; top: 0 !important; left: 0 !important;
+    width: ${i}px !important; height: ${a}px !important;
+    transform-origin: 0 0 !important;
+    transform: translate(${t}px,${r}px) scale(${e}) translate(${-D}px,${-O}px) !important;
+    clip-path: inset(${o}px ${s}px ${u}px ${d}px) !important;
+  }
+  #${n.id} * { visibility: visible !important; }
+  #${n.id} > .webmapx-print-box { display: none !important; }
+  webmapx-layout { display: none !important; }
+  #webmapx-print-overlay { display: flex !important; visibility: visible !important; position: fixed !important; top: 0 !important; left: 0 !important; background: transparent !important; }
+  #webmapx-print-overlay * { visibility: visible !important; }`;
+		}
+		let R = document.createElement("style");
+		R.id = "webmapx-print-style", R.textContent = `
+@media print {
+  @page { size: A4 ${i ? "landscape" : "portrait"}; margin: 0; }
+  html, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: white !important; }
+  ${L}
+}`, document.head.appendChild(R), window.addEventListener("afterprint", () => {
+			R.remove(), I(), j.remove();
+		}, { once: !0 }), requestAnimationFrame(() => requestAnimationFrame(() => window.print()));
+	}
+	buildAttributionText() {
+		let e = this.layerDataConfig, t = this.store?.getState()?.mapLayers ?? {}, n = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
+		if (e) {
+			for (let t of e.sources ?? []) n.set(t.id, t);
+			for (let t of e.layers ?? []) r.set(t.id, t);
+		}
+		let s = /* @__PURE__ */ new Set(), c = [], l = (e) => {
+			if (e) for (let t of e.split("|")) {
+				let e = o(i(t)).trim();
+				e && !s.has(e) && (s.add(e), c.push(e));
+			}
+		};
+		for (let [e, i] of Object.entries(t)) {
+			if (i.visible === !1) continue;
+			let t = r.get(e);
+			if (t) l(a(t, n));
+			else {
+				let e = typeof i.sourceId == "string" ? i.sourceId : null;
+				e && l(this.adapter?.getSourceAttribution?.(e));
+			}
+		}
+		return c.join(" • ");
+	}
+	render() {
+		return l`
+            <div class="tool-content">
+                <p class="description">Position the map inside the box, then click Print to save as PDF.</p>
+                <div class="field">
+                    <label for="print-title">Title</label>
+                    <sl-input id="print-title" size="small" placeholder="Map title"
+                        .value=${this.mapTitle}
+                        @sl-input=${(e) => {
+			this.mapTitle = e.target.value, this.updateBox();
+		}}
+                    ></sl-input>
+                </div>
+                <div class="field">
+                    <label for="print-format">Format</label>
+                    <sl-select id="print-format" size="small" .value=${this.format}
+                        @sl-change=${(e) => {
+			this.format = e.target.value, this.updateBox();
+		}}
+                    >
+                        <sl-option value="portrait">Portrait</sl-option>
+                        <sl-option value="landscape">Landscape</sl-option>
+                        <sl-option value="portrait_with_legend">Portrait with legend</sl-option>
+                        <sl-option value="landscape_with_legend">Landscape with legend</sl-option>
+                    </sl-select>
+                </div>
+                <sl-checkbox size="small"
+                    ?checked=${this.addLink}
+                    @sl-change=${(e) => {
+			this.addLink = e.target.checked, this.updateBox();
+		}}
+                >Add viewer link</sl-checkbox>
+                ${Math.abs(this.zoomDelta) > .05 ? l`
+                    <p class="warning">
+                        <strong>Note:</strong> The print zoom differs from the screen zoom
+                        (${this.zoomDelta > 0 ? "+" : ""}${this.zoomDelta.toFixed(1)} levels).
+                        Labels and zoom-dependent layers may look different in the print.
+                    </p>` : ""}
+                ${this.printing ? l`<div class="busy"><sl-spinner></sl-spinner> Rendering map…</div>` : l`<sl-button variant="primary" size="small" @click=${this.handlePrint}>Print</sl-button>`}
+                ${this.errorMsg ? l`<p class="error">${this.errorMsg}</p>` : ""}
+            </div>
+        `;
+	}
+};
+t([n()], S.prototype, "mapTitle", void 0), t([n()], S.prototype, "format", void 0), t([n()], S.prototype, "addLink", void 0), t([n()], S.prototype, "printing", void 0), t([n()], S.prototype, "errorMsg", void 0), t([n()], S.prototype, "zoomDelta", void 0), S = t([r("webmapx-print-tool")], S);
+//#endregion
+export { S as WebmapxPrintTool };