@panoramax/web-viewer 5.0.0-develop-d26305dd → 5.0.0-develop-be5ba1a7

package/build/components/core/Basic.css

@@ -1,56 +0,0 @@
-/* Colors */
-:root, :host {
-	--white: #ffffff;
-	--black: #181818;
-	--black-pale: #1b1a17;
-	--red: #f70000;
-	--red-transparent: rgba(247, 0, 0, 0.3);
-	--red-pale: #ff726f;
-	--grey: #f5f5f5;
-	--grey-pale: #cfd2cf;
-	--grey-semi-dark: #808080;
-	--grey-dark: #3e3e3e;
-	--blue: #2954e9;
-	--blue-dark: #0a1f69;
-	--blue-semi: #d7dffc;
-	--blue-pale: #f2f5ff;
-	--blue-geovisio: #34495e;
-	--beige: #f5f3ec;
-	--yellow: #fec868;
-	--orange: #ff6f00;
-	--orange-transparent: rgba(255,111,0,0.3);
-	--orange-pale: #fffafa;
-	--green: #7ec636;
-	--green-pale: #f0ffee;
-	--widget-bg: var(--white);
-	--widget-bg-hover: var(--grey);
-	--widget-bg-active: var(--blue);
-	--widget-bg-inactive: var(--grey-pale);
-	--widget-bg-primary: var(--blue-semi);
-	--widget-bg-primary-hover: #e0e7ff;
-	--widget-bg-warn: #FFECB3;
-	--widget-bg-success: #C8E6C9;
-	--widget-border-div: var(--grey-pale);
-	--widget-border-btn: var(--blue);
-	--widget-font: var(--grey-dark);
-	--widget-font-active: var(--white);
-	--widget-font-direct: var(--blue);
-	--widget-font-warn: #BF360C;
-	--widget-font-success: #1B5E20;
-	--font-family: "Atkinson Hyperlegible Next", sans-serif;
-	--widget-option-left: #6A1B9A;
-	--widget-option-right: #0D47A1;
-	overscroll-behavior-y: contain;
-}
-
-.pnx-hidden { display: none !important; }
-
-/* Hidden elements on mobile */
-@container (max-width: 576px) {
-	.pnx-mobile-hidden { display: none !important; }
-}
-
-/* Hidden elements on print */
-@media print {
-	.pnx-print-hidden { display: none !important; }
-}

package/build/components/core/Basic.js

@@ -1,378 +0,0 @@
-import { LitElement, html } from "lit";
-import API from "../../utils/API.js";
-import { getTranslations } from "../../utils/i18n.js";
-import { createWebComp } from "../../utils/widgets.js";
-import { isInIframe, isInternetFast } from "../../utils/utils.js";
-import JSON5 from "json5";
-import PACKAGE_JSON from "../../../package.json" with { type: "json" };
-import AtkinsonStyles from "@fontsource/atkinson-hyperlegible-next/index.css" with { type: "css" };
-import BasicStyles from "./Basic.css" with { type: "css" };
-document.adoptedStyleSheets.push(AtkinsonStyles);
-document.adoptedStyleSheets.push(BasicStyles);
-
-const __COMMIT_HASH__ = "84355bd";
-
-/**
- * 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} endpoint URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md))
-	 * @property {string} [picture] The picture ID to display
-	 * @property {string} [sequence] The sequence ID of the picture displayed
-	 * @property {object} [fetch-options] 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} [lang] To override language used for labels. Defaults to using user's preferred languages.
-	 */
-	static properties = {
-		picture: {type: String, reflect: true},
-		sequence: {type: String, reflect: true},
-		"fetch-options": {converter: Basic.GetJSONConverter()},
-		lang: {type: String},
-		endpoint: {type: String},
-	};
-
-	constructor(testing = false) {
-		super();
-
-		// Some defaults
-		this.lang = this.getAttribute("lang") || null;
-		this.endpoint = this.getAttribute("endpoint") || null; // No default
-		this.picture = this.getAttribute("picture") || null;
-		this.sequence = this.getAttribute("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}`);
-
-		if(testing) { return; }
-
-		// Internet speed check
-		this._isInternetFast = null;
-		isInternetFast().then(isFast => this._isInternetFast = isFast);
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-
-		// Translations
-		this._t = getTranslations(this.lang);
-
-		// Show loader
-		this.loader = createWebComp("pnx-loader", {_parent: this, "no-label": isInIframe() });
-
-		if(
-			!(this._loadsAPI && this.endpoint && this._loadsAPI === this.endpoint)
-			&& !(this.api && this.api._endpoint === this.endpoint)
-			&& this.endpoint
-		) {
-			if(this._loadsAPI || this.api) {
-				delete this.api;
-				delete this._loadsAPI;
-			}
-			this._setupAPI();
-		}
-
-		// Warn for outdate attributes
-		Object
-			.entries({ map: "map-options", psv: "psv-options", fetchOptions: "fetch-options", mapstyle: "map-style"})
-			.forEach(([k, v]) => {
-				if(this.getAttribute(k)) {
-					console.error(`Component attribute "${k}" has been renamed into "${v}". Old attribute "${k}" is ignored.`);
-				}
-			});
-
-		if(isInIframe()) { this.classList.add("pnx-iframed"); }
-	}
-
-	/**
-	 * Creates API and wait for initial loading
-	 * @private
-	 */
-	_setupAPI() {
-		// Loader init
-		this.loader = this.loader || createWebComp("pnx-loader", {_parent: this});
-
-		if(!this.endpoint) {
-			console.warn("No endpoint is defined");
-			return;
-		}
-
-		this._loadsAPI = this.endpoint;
-		let myLoadAPI = this.endpoint;
-
-		// API init
-		try {
-			this.api = new API(this.endpoint, {
-				fetch: this["fetch-options"],
-			});
-			this.api.onceReady()
-				.then(() => {
-					if(myLoadAPI !== this._loadsAPI || !this.api) { return; }
-
-					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))
-				.finally(() => delete this._loadsAPI);
-		}
-		catch(e) {
-			delete this._loadsAPI;
-			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
-	 */
-	// eslint-disable-next-line class-methods-use-this
-	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, 250)).then(this.onceAPIReady.bind(this));
-		}
-	}
-
-	/** @private */
-	createRenderRoot() {
-		return this;
-	}
-
-	/** @private */
-	attributeChangedCallback(name, _old, value) {
-		super.attributeChangedCallback(name, _old, value);
-
-		if(name === "endpoint") {
-			if(
-				!(this._loadsAPI && value && this._loadsAPI === value)
-				&& !(this.api && this.api._endpoint === value)
-				&& value
-			) {
-				if(this._loadsAPI || this.api) {
-					delete this.api;
-					delete this._loadsAPI;
-				}
-				this._setupAPI();
-			}
-		}
-		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#
-	 */
-	// eslint-disable-next-line class-methods-use-this
-	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 medium container (576-768px)
-	 * @returns {boolean} True if container is medium
-	 * @memberof Panoramax.components.core.Basic#
-	 */
-	isWidthMedium() {
-		return this?.offsetWidth >= 576 && this?.offsetWidth < 768;
-	}
-
-	/**
-	 * 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 */
-	// eslint-disable-next-line class-methods-use-this
-	render() {
-		return html`<p>Should not be used directly, use Viewer/CoverageMap/Editor instead</p>`;
-	}
-
-	/**
-	 * List names of sub-components (like loader, api, map, psv) available in this component.
-	 * @returns {string[]} Sub-components names.
-	 * @memberof Panoramax.components.core.Basic#
-	 */
-	// eslint-disable-next-line class-methods-use-this
-	getSubComponentsNames() {
-		return ["loader", "api"];
-	}
-
-	/**
-	 * Returns the API manager.
-	 * Useful for some subclasses if you want to toggle between many API providers.
-	 * @returns {API} The API manager
-	 */
-	getAPI() {
-		return this.api;
-	}
-
-	/**
-	 * Listen to events from this components or one of its sub-components.
-	 *
-	 * For example, you can listen to `map` events using prefix `map:`.
-	 *
-	 * ```js
-	 * me.addEventListener("map:move", doSomething);
-	 * ```
-	 * @param {string} type The event type to listen for
-	 * @param {function} listener The event handler
-	 * @param {object} [options] [Any original addEventListener available options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options)
-	 * @memberof Panoramax.components.core.Basic#
-	 */
-	addEventListener(type, listener, options) {
-		// Check if listener is for sub-component
-		let prefix = type.split(":").shift();
-		if(prefix && this.getSubComponentsNames().includes(prefix)) {
-			const subType = type.substring(prefix.length+1);
-
-			// Add directly if available
-			if(this[prefix]?.addEventListener) {
-				this[prefix].addEventListener(subType, listener, options);
-			}
-			// Wait for addEventListener to be available
-			else {
-				setTimeout(() => this.addEventListener(type, listener, options), 50);
-			}
-		}
-		// Otherwise, reuse classic function
-		else {
-			super.addEventListener(type, listener, options);
-		}
-	}
-
-	/** @private */
-	static GetJSONConverter() {
-		return {
-			fromAttribute: (value) => {
-				if(value === null || value === undefined || value === "") { return null; }
-				else if(typeof value === "object" || Array.isArray(value)) { return value; }
-				else { return JSON5.parse(value); }
-			},
-			toAttribute: (value) => {
-				if(value === null || value === undefined || value === "") { return ""; }
-				else if(typeof value === "string") { return value; }
-				else { return JSON5.stringify(value); }
-			}
-		};
-	}
-}

package/build/components/core/CoverageMap.css

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

package/build/components/core/CoverageMap.js

@@ -1,169 +0,0 @@
-import Basic from "./Basic.js";
-import Map from "../ui/Map.js";
-import "maplibre-gl";
-import { default as InitParameters, alterMapState } from "../../utils/InitParameters.js";
-import { MapTiles } from "../../utils/services.js";
-import MapStyleComposer from "../../utils/MapStyleComposer.js";
-import CoverageMapStyles from "./CoverageMap.css" with { type: "css" };
-document.adoptedStyleSheets.push(CoverageMapStyles);
-
-/**
- * Coverage Map is a basic map showing Panoramax coverage.
- *
- * Make sure to set width/height through CSS for proper display.
- * @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
- * @property {Panoramax.utils.MapStyleComposer} mapStyleComposer The map style helper
- * @example
- * ```html
- * <pnx-coverage-map
- *   endpoint="https://panoramax.openstreetmap.fr/"
- *   map-options='{"bounds": [[-73.9876, 40.7661], [-73.9397, 40.8002]]}'
- *   style="width: 300px; height: 250px"
- * />
- * ```
- */
-export default class CoverageMap extends Basic {
-	/**
-	 * Component properties.
-	 * @memberof Panoramax.components.core.CoverageMap#
-	 * @type {Object}
-	 * @mixes Panoramax.components.core.Basic#properties
-	 * @property {string} endpoint URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md))
-	 * @property {string} [picture] The picture ID to display
-	 * @property {string} [sequence] The sequence ID of the picture displayed
-	 * @property {object} [fetch-options] 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|object} [map-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-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 {object} [map-options] [Any map option available in Map class](#Panoramax.components.ui.Map).<br />Example: `map-options='{"bounds": [[-73.9876, 40.7661], [-73.9397, 40.8002]]}'`
-	 * @property {string} [user] To filter on a specific user UUID
-	 */
-	static properties = {
-		"map-options": {converter: Basic.GetJSONConverter()},
-		"map-style": {type: String},
-		user: {type: String},
-		...Basic.properties
-	};
-
-	constructor() {
-		super();
-
-		this["map-style"] = this.getAttribute("map-style") || MapTiles();
-
-		// Check if mapstyle is not a unparsed JSON
-		try {
-			this["map-style"] = JSON.parse(this["map-style"]);
-		} catch(e) { /* Empty */ }
-
-		// Setup map styles and sources
-		this.mapStyleComposer = new MapStyleComposer(this);
-		this.mapStyleComposer.addBasemap("streets", this["map-style"], true);
-
-		this._mapContainer = document.createElement("div");
-		this.onceAPIReady().then(() => {
-			this.loader.setAttribute("value", 30);
-			this._initParams = new InitParameters(InitParameters.GetComponentProperties(CoverageMap, this));
-			// eslint-disable-next-line eqeqeq
-			const singleUser = this.user && this.user != "";
-			this.mapStyleComposer._createPanoramaxEndpointFromAPI("default", this.api, !singleUser);
-			if(singleUser) {
-				this.mapStyleComposer._createPanoramaxEndpointForUser(this.user);
-			}
-			this._initMap();
-		});
-	}
-
-	/** @private */
-	attributeChangedCallback(name, _old, value) {
-		super.attributeChangedCallback(name, _old, value);
-
-		if(name === "user" && this.api?._isReady === 1) {
-			// eslint-disable-next-line eqeqeq
-			if(value && value != "") {
-				this.mapStyleComposer._createPanoramaxEndpointForUser(value);
-			}
-			else {
-				this.mapStyleComposer.switchPanoramaxEndpoint("default");
-			}
-		}
-	}
-
-	/** @private */
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.map?.destroy();
-	}
-
-	// eslint-disable-next-line class-methods-use-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];
-	}
-
-	getSubComponentsNames() {
-		return super.getSubComponentsNames().concat(["map", "mapStyleComposer"]);
-	}
-
-	/**
-	 * Creates map object
-	 * @private
-	 */
-	_initMap() {
-		this.map = new Map(this, this._mapContainer, Object.assign({}, this._initParams.getMapInit(), { hash: true }));
-		// eslint-disable-next-line no-undef
-		this.map.addControl(new maplibregl.NavigationControl({ showCompass: false }));
-		this.loader.setAttribute("value", 70);
-
-		this.addEventListener("select", this._onSelect.bind(this));
-		this.map.on("picture-click", e => this.select(e.seqId, e.picId));
-		this.map.on("sequence-click", e => this.select(e.seqId));
-
-		this.map.waitForEnoughMapLoaded().then(() => {
-			alterMapState(this.map, this._initParams.getMapPostInit());
-			this.loader.dismiss();
-		});
-	}
-
-	/**
-	 * 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 = this.map.getLayersOrder().find(lid => lid.endsWith(e.detail.picId ? "pictures" : "sequences"));
-			const features = this.map.queryRenderedFeatures({
-				layers: [layer],
-				filter: ["==", ["get", "id"], e.detail.picId || e.detail.seqId]
-			});
-
-			// eslint-disable-next-line eqeqeq
-			if(features.length >= 0 && features[0] != null) {
-				this.map._attachPreviewToPictures({ features }, layer);
-			}
-		}
-	}
-}
-
-customElements.define("pnx-coverage-map", CoverageMap);

package/build/components/core/Editor.css

@@ -1,33 +0,0 @@
-/* General layout */
-pnx-editor {
-	display: flex;
-	flex-direction: column;
-	position: relative;
-}
-
-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;
-	font-family: var(--font-family);
-}
-
-/* Player widget */
-pnx-editor pnx-widget-player {
-	margin-top: 10px;
-}
-pnx-editor pnx-widget-player #pnx-player-play {
-	display: none;
-}