@panoramax/web-viewer 3.2.3-develop-d7e5a16d → 3.2.3-develop-6257391e

package/src/components/core/Basic.js

@@ -0,0 +1,258 @@
+import { LitElement, html } from "lit";
+import API from "../../utils/API";
+import { getTranslations } from "../../utils/i18n";
+import { DEFAULT_TILES } from "../../utils/map";
+import { createWebComp } from "../../utils/widgets";
+import { isInternetFast } from "../../utils/utils";
+import PACKAGE_JSON from "../../../package.json";
+import "./Basic.css";
+
+/**
+ * Event for overlaying menu opening
+ * @event Panoramax.components.core.Basic#menu-opened
+ * @type {CustomEvent}
+ * @property {Element} detail.menu The opened menu
+ */
+
+/**
+ * Basic core component is a basic container for common functions through all core components.
+ * It is not intended to be used directly, it's only to be extended by other core components.
+ * @class Panoramax.components.core.Basic
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @fires Panoramax.components.core.Basic#select
+ * @fires Panoramax.components.core.Basic#ready
+ * @fires Panoramax.components.core.Basic#broken
+ * @fires Panoramax.components.core.Basic#menu-opened
+ * @property {Panoramax.components.ui.Loader} loader The loader screen
+ * @property {Panoramax.utils.API} api The API manager
+ */
+export default class Basic extends LitElement {
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.core.Basic#
+	 * @type {Object}
+	 * @mixin
+	 * @property {string} [picture] The picture ID to display
+	 * @property {string} [sequence] The sequence ID of the picture displayed
+	 * @property {object} [fetchOptions] Set custom options for fetch calls made against API ([same syntax as fetch options parameter](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters))
+	 * @property {string[]} [users=[geovisio]] List of users IDs to use for map display (defaults to general map, identified as "geovisio")
+	 * @property {string|object} [style] The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification](https://maplibre.org/maplibre-gl-js-docs/style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles.
+	 * @property {string} [lang] To override language used for labels. Defaults to using user's preferred languages.
+	 * @property {string} endpoint URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md))
+	 */
+	static properties = {
+		picture: {type: String, reflect: true},
+		sequence: {type: String, reflect: true},
+		fetchOptions: {type: Object, attribute: false},
+		users: {type: Array, reflect: true},
+		style: {type: Object},
+		lang: {type: String},
+		endpoint: {type: String},
+	};
+
+	constructor(testing = false) {
+		super();
+
+		// Some defaults
+		this.users = ["geovisio"];
+		this.style = DEFAULT_TILES;
+		this.lang = this.getAttribute("lang") || null;
+		this.endpoint = this.getAttribute("endpoint") || null; // No default
+		this.picture = null;
+		this.sequence = null;
+
+		// Display version in logs
+		console.info(`📷 Panoramax ${this.getClassName()} - Version ${PACKAGE_JSON.version} (${__COMMIT_HASH__})
+
+🆘 Issues can be reported at ${PACKAGE_JSON.repository.url}`);
+
+		// Translations
+		this._t = getTranslations(this.lang);
+
+		if(testing) { return; }
+		
+		// Show loader
+		this.loader = createWebComp("pnx-loader", {_parent: this});
+
+		// Internet speed check
+		this._isInternetFast = null;
+		isInternetFast().then(isFast => this._isInternetFast = isFast);
+
+		if(this.endpoint) { this._setupAPI(this.endpoint); }
+	}
+
+	/**
+	 * Creates API and wait for initial loading
+	 * @private
+	 */
+	_setupAPI(endpoint) {
+		// Loader init
+		this.loader = this.loader || createWebComp("pnx-loader", {_parent: this});
+
+		if(!this.endpoint) {
+			console.warn("No endpoint is defined");
+			return;
+		}
+
+		// API init)
+		try {
+			this.api = new API(endpoint, {
+				users: this.users,
+				fetch: this.fetchOptions,
+				style: this.style,
+			});
+			this.api.onceReady()
+				.then(() => {
+					let unavailable = this.api.getUnavailableFeatures();
+					let available = this.api.getAvailableFeatures();
+					available = unavailable.length === 0 ? "✅ All features available" : "✅ Available features: "+available.join(", ");
+					unavailable = unavailable.length === 0 ? "" : "🚫 Unavailable features: "+unavailable.join(", ");
+					console.info(`🌐 Connected to API "${this.api._metadata.name}" (${this.api._endpoint})
+ℹ️ API runs STAC ${this.api._metadata.stac_version} ${this.api._metadata.geovisio_version ? "& GeoVisio "+this.api._metadata.geovisio_version : ""}
+   ${available}
+   ${unavailable}
+`.trim());
+				})
+				.catch(e => this.loader.dismiss(e, this._t.pnx.error_api));
+		}
+		catch(e) {
+			if(this.loader?.dismiss) {
+				this.loader.dismiss(e, this._t.pnx.error_api);
+			}
+			else {
+				console.error(e);
+			}
+		}
+	}
+	
+	/**
+	 * Waits for component to have its first loading done.
+	 * 
+	 * Each inheriting class must override this method.
+	 * @memberof Panoramax.components.core.Basic#
+	 * @returns {Promise}
+	 * @fulfil {null} When initialization is complete.
+	 * @reject {string} Error message
+	 */
+	onceReady() {
+		throw new Error("You must override this method on sub-class");
+	}
+
+	/**
+	 * Waits for initial API setup.
+	 * @memberof Panoramax.components.core.Basic#
+	 * @returns {Promise}
+	 * @fulfil {null} When API is ready.
+	 * @reject {string} Error message
+	 */
+	onceAPIReady() {
+		if(this.api) {
+			return this.api.onceReady();
+		}
+		else {
+			return new Promise(resolve => setTimeout(resolve, 100)).then(this.onceAPIReady.bind(this));
+		}
+	}
+
+	/** @private */
+	createRenderRoot() {
+		return this;
+	}
+
+	/** @private */
+	attributeChangedCallback(name, _old, value) {
+		super.attributeChangedCallback(name, _old, value);
+		
+		if(name === "endpoint") {
+			if(!this.api || this.api._endpoint !== value) { this._setupAPI(value); }
+		}
+		if(["picture", "sequence"].includes(name)) {
+			let seqId, picId, prevSeqId, prevPicId;
+
+			if(name === "picture") {
+				seqId = this.sequence;
+				prevSeqId = this.sequence;
+				picId = value;
+				prevPicId = _old;
+			}
+			else {
+				seqId = value;
+				prevSeqId = _old;
+				picId = this.picture;
+				prevPicId = this.picture;
+			}
+
+			/**
+			 * Event for sequence/picture selection
+			 * @event Panoramax.components.core.Basic#select
+			 * @type {CustomEvent}
+			 * @property {string} detail.seqId The selected sequence ID
+			 * @property {string} detail.picId The selected picture ID (or null if not a precise picture clicked)
+			 * @property {string} [detail.prevSeqId] The previously selected sequence ID (or null if none)
+			 * @property {string} [detail.prevPicId] The previously selected picture ID (or null if none)
+			 */
+			this.dispatchEvent(new CustomEvent("select", {
+				bubbles: true,
+				composed: true,
+				detail: {
+					seqId,
+					picId,
+					prevSeqId,
+					prevPicId,
+				}
+			}));
+		}
+	}
+
+	/**
+	 * This allows to retrieve an always correct class name.
+	 * This is crap, but avoids issues with Webpack & so on.
+	 * 
+	 * Each inheriting class must override this method.
+	 * @returns {string} The class name (for example "Basic")
+	 * @memberof Panoramax.components.core.Basic#
+	 */
+	getClassName() {
+		return "Basic";
+	}
+
+	/**
+	 * Change the currently picture and/or sequence.
+	 * Calling the method without parameters unselects.
+	 * @param {string} [seqId] The sequence UUID
+	 * @param {string} [picId] The picture UUID
+	 * @param {boolean} [force=false] Force select even if already selected
+	 * @memberof Panoramax.components.core.Basic#
+	 */
+	select(seqId = null, picId = null, force = false) {
+		if(force) {
+			this.picture = null;
+			this.sequence = null;
+		}
+		this.picture = picId;
+		this.sequence = seqId;
+	}
+
+	/**
+	 * Is the view running in a small container (small embed or smartphone)
+	 * @returns {boolean} True if container is small
+	 * @memberof Panoramax.components.core.Basic#
+	 */
+	isWidthSmall() {
+		return this?.offsetWidth < 576;
+	}
+
+	/**
+	 * Is the view running in a small-height container (small embed or smartphone)
+	 * @returns {boolean} True if container height is small
+	 * @memberof Panoramax.components.core.Basic#
+	 */
+	isHeightSmall() {
+		return this?.offsetHeight < 400;
+	}
+
+	/** @private */
+	render() {
+		return html`<p>Should not be used directly, use Viewer/CoverageMap/Editor instead</p>`;
+	}
+}

package/src/components/core/CoverageMap.css

@@ -0,0 +1,9 @@
+pnx-coverage-map {
+	display: block;
+}
+
+pnx-coverage-map .maplibregl-map {
+	position: absolute;
+	inset: 0;
+	background-color: white;
+}

package/src/components/core/CoverageMap.js

@@ -0,0 +1,105 @@
+import Basic from "./Basic";
+import Map from "../ui/Map";
+import { getUserLayerId } from "../../utils/map";
+import { NavigationControl } from "!maplibre-gl"; // DO NOT REMOVE THE "!": bundled builds breaks otherwise !!!
+import "./CoverageMap.css";
+
+
+/**
+ * Coverage Map is a basic map showing Panoramax coverage.
+ * @class Panoramax.components.core.CoverageMap
+ * @element pnx-coverage-map
+ * @extends Panoramax.components.core.Basic
+ * @fires Panoramax.components.core.Basic#select
+ * @fires Panoramax.components.core.Basic#ready
+ * @fires Panoramax.components.core.Basic#broken
+ * @property {Panoramax.components.ui.Loader} loader The loader screen
+ * @property {Panoramax.utils.API} api The API manager
+ * @property {Panoramax.components.ui.Map} map The MapLibre GL map itself
+ * @example
+ * ```html
+ * <pnx-coverage-map
+ *   endpoint="https://panoramax.openstreetmap.fr/"
+ * />
+ * ```
+ */
+export default class CoverageMap extends Basic {
+	constructor() {
+		super();
+
+		this._mapContainer = document.createElement("div");
+		this.onceAPIReady().then(() => this._initMap());
+
+		// Events handlers
+		this.addEventListener("select", this._onSelect.bind(this));
+	}
+
+	getClassName() {
+		return "CoverageMap";
+	}
+
+	onceReady() {
+		if(this.map && this.map.waitForEnoughMapLoaded) {
+			return this.map.waitForEnoughMapLoaded();
+		}
+		else {
+			return new Promise(resolve => setTimeout(resolve, 100)).then(this.onceReady.bind(this));
+		}
+	}
+
+	/** @private */
+	render() {
+		return [this.loader, this._mapContainer];
+	}
+
+	/**
+	 * Creates map object
+	 * @private
+	 */
+	_initMap() {
+		const mapOptions = { hash: true };
+
+		// Override to avoid display of pictures symbols
+		class MyMap extends Map {
+			_getLayerStyleProperties(layer) {
+				if(layer === "pictures_symbols") {
+					return { layout: { visibility: "none" } };
+				}
+				else {
+					return super._getLayerStyleProperties(layer);
+				}
+			}
+		}
+		
+		this.map = new MyMap(this, this._mapContainer, mapOptions);
+		this.map.addControl(new NavigationControl({ showCompass: false }));
+		this.map.waitForEnoughMapLoaded().then(() => {
+			this.map.reloadLayersStyles();
+			this.loader.dismiss();
+		});
+		this.map.on("picture-click", e => this.select(e.seqId, e.picId));
+		this.map.on("sequence-click", e => this.select(e.seqId));
+	}
+
+	/**
+	 * Select event handler
+	 * @private
+	 * @param {object} e Event details
+	 */
+	_onSelect(e) {
+		// Move thumbnail to match selected element
+		if(e.detail.picId || e.detail.seqId) {
+			const layer = e.detail.picId ? "pictures" : "sequences";
+			const features = this.map.queryRenderedFeatures({
+				layers: [...this.map._userLayers].map(l => getUserLayerId(l, layer)),
+				filter: ["==", ["get", "id"], e.detail.picId || e.detail.seqId]
+			});
+
+			if(features.length >= 0 && features[0] != null) {
+				this.map._attachPreviewToPictures({ features }, layer);
+			}
+		}
+	}
+}
+
+customElements.define("pnx-coverage-map", CoverageMap);

package/src/components/core/Editor.css

@@ -0,0 +1,23 @@
+/* General layout */
+pnx-editor {
+	display: flex;
+	flex-direction: column;
+}
+
+pnx-editor .pnx-map,
+pnx-editor .pnx-psv {
+	height: 50%;
+}
+
+/* Map background widget */
+pnx-editor pnx-map-background {
+	position: absolute;
+	padding: 7px;
+	z-index: 120;
+	border-radius: 10px;
+	border: 1px solid var(--widget-border-div);
+	background-color: var(--widget-bg);
+  	color: var(--widget-font);
+	bottom: 10px;
+	left: 10px;
+}