@panoramax/web-viewer 3.2.3 → 4.0.0-develop-9f9cf858

package/src/components/CoreView.css

@@ -1,70 +0,0 @@
-/* Main container */
-.gvs {
-	container-type: inline-size;
-	box-sizing: border-box;
-}
-
-.gvs * { box-sizing: border-box; }
-
-/* Colors */
-:root {
-	--white: #ffffff;
-	--black: #181818;
-	--black-pale: #1b1a17;
-	--red: #f70000;
-	--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-pale: #fffafa;
-	--green: #7ec636;
-	--green-pale: #f0ffee;
-}
-
-/* Titles */
-.gvs h3 {
-	font-size: 1.1em;
-	line-height: 1.1em;
-	font-weight: 500;
-	margin: 10px 0 10px 0;
-}
-
-.gvs h4 {
-	font-size: 1.0em;
-	line-height: 1.0em;
-	font-weight: 500;
-	margin: 15px 0;
-}
-
-.gvs h4:first-of-type { margin-top: 0; }
-
-.gvs h4 svg {
-	height: 18px;
-	vertical-align: sub;
-	margin-right: 2px;
-}
-
-.gvs h4 a svg {
-	height: 16px;
-	vertical-align: sub;
-	margin-left: 2px;
-}
-
-/* Hidden elements on mobile */
-@container (max-width: 576px) {
-	.gvs-mobile-hidden { display: none !important; }
-}
-
-/* Hidden elements on print */
-@media print {
-	.gvs-print-hidden { display: none !important; }
-}

package/src/components/CoreView.js

@@ -1,175 +0,0 @@
-import "./CoreView.css";
-import API from "../utils/API";
-import { getTranslations } from "../utils/I18n";
-import { DEFAULT_TILES } from "../utils/Map";
-import { BASE_PANORAMA_ID, isInIframe, isInternetFast } from "../utils/Utils";
-import PACKAGE_JSON from "../../package.json";
-import Loader from "./Loader";
-
-
-/**
- * Core view is an abstract class used for setting up any of the main Panoramax JS view components.
- * 
- * It is used to prepare API, internationalization, options checks... for Viewer, StandaloneMap and Editor classes.
- * 
- * @param {string|Element} container The DOM element to create viewer into
- * @param {string} endpoint URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md))
- * @param {object} [options] View options.
- * @param {string} [options.selectedSequence] The ID of sequence to highlight on load (defaults to none)
- * @param {string} [options.selectedPicture] The ID of picture to highlight on load (defaults to none)
- * @param {object} [options.fetchOptions=null] 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))
- * @param {string|string[]} [options.users] List of user IDs to default use for display. Defaults to all users.
- * @param {string|object} [options.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 OSMFR vector tiles.
- * 
- * @property {object} _t The translations labels
- * @property {string} _selectedSeqId The selected sequence ID
- * @property {string} _selectedPicId The selected picture ID
- * @property {API} _api The API handler
- * @property {Loader} _loader The initial loader message
- * @property {object} _options The stored options
- * @property {Element} container The DOM container
- */
-export default class CoreView extends EventTarget {
-	constructor(container, endpoint, options = {}) {
-		super();
-
-		this._options = options;
-		if(this._options == null) { this._options = {}; }
-		if(!this._options.users) { this._options.users = ["geovisio"]; }
-		if(typeof this._options.users === "string") { this._options.users = [this._options.users]; }
-		if(!this._options.style) { this._options.style = DEFAULT_TILES; }
-
-		if(!this._options.testing) {
-			// 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._options.lang);
-
-		// Internet speed check
-		this._isInternetFast = null;
-		isInternetFast().then(isFast => this._isInternetFast = isFast);
-
-		// Selected IDs
-		this._selectedSeqId = this._options.selectedSequence || null;
-		this._selectedPicId = this._options.selectedPicture || null;
-
-		// Container init
-		this.container = typeof container === "string" ? document.getElementById(container) : container;
-		if(!(this.container instanceof Element)) { throw new Error("Container is not a valid HTML element, does it exist in your page ?"); }
-		this.container.classList.add("gvs", `gvs-${this.getClassName().toLocaleLowerCase()}`);
-		if(isInIframe()) { this.container.classList.add("gvs-iframed"); }
-
-		// Loader init
-		this.loaderContainer = document.createElement("div");
-		this.container.appendChild(this.loaderContainer);
-		this._loader = new Loader(this, this.loaderContainer);
-
-		// API init)
-		endpoint = (endpoint || "").replace("/api/search", "/api");
-		try {
-			this._api = new API(endpoint, {
-				users: this._options.users,
-				fetch: this._options?.fetchOptions,
-				style: this._options.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.gvs.error_api));
-		}
-		catch(e) {
-			this._loader.dismiss(e, this._t.gvs.error_api);
-		}
-	}
-
-	/**
-	 * 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.
-	 */
-	getClassName() {
-		return "CoreView";
-	}
-
-	/**
-	 * Ends all form of life in this object.
-	 * 
-	 * This is useful for Single Page Applications (SPA), to remove various event listeners.
-	 */
-	destroy() {
-		delete this._options;
-		delete this._t;
-		delete this._api;
-		delete this._loader;
-		this.loaderContainer.remove();
-		delete this.loaderContainer;
-	}
-
-	/**
-	 * Is the view running in a small container (small embed or smartphone)
-	 * @returns {boolean} True if container is small
-	 */
-	isWidthSmall() {
-		return this.container?.offsetWidth < 576;
-	}
-
-	/**
-	 * Is the view running in a small-height container (small embed or smartphone)
-	 * @returns {boolean} True if container height is small
-	 */
-	isHeightSmall() {
-		return this.container?.offsetHeight < 400;
-	}
-	
-	/**
-	 * 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
-	 */
-	select(seqId = null, picId = null, force = false) {
-		if(picId === BASE_PANORAMA_ID) { picId = null; }
-		const prevSeqId = this._selectedSeqId || null;
-		const prevPicId = this._selectedPicId || null;
-		if(!force && prevPicId == picId && prevSeqId == seqId) { return; } // Avoid running if already selected
-
-		this._selectedSeqId = seqId;
-		this._selectedPicId = picId;
-
-		/**
-		 * Event for sequence/picture selection
-		 *
-		 * @event select
-		 * @memberof CoreView
-		 * @type {object}
-		 * @property {object} detail Event information
-		 * @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", {
-			detail: {
-				seqId,
-				picId,
-				prevSeqId,
-				prevPicId,
-			}
-		}));
-	}
-}

package/src/components/Loader.css

@@ -1,74 +0,0 @@
-.gvs .gvs-loader {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	z-index: 0;
-}
-
-.gvs .gvs-loader.gvs-loader-visible {
-	visibility: visible;
-	opacity: 1;
-}
-
-/* Loader overlay */
-.gvs .gvs-loader {
-	visibility: hidden;
-	position: absolute;
-	top: 0;
-	right: 0;
-	left: 0;
-	bottom: 0;
-	opacity: 0;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	gap: 20px;
-	align-items: center;
-	background: #37474F;
-	z-index: 9000;
-	transition: all 0.5s;
-	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-	font-weight: 550;
-	color: white;
-	font-size: 1.4em;
-	text-align: center;
-}
-
-.gvs .gvs-loader a {
-	color: white !important;
-}
-
-/* Flashing text */
-.gvs .gvs-loader > div > span {
-	animation: blinker 2s linear infinite;
-}
-@keyframes blinker { 50% { opacity: 0.3; } }
-
-/* Rotating logo */
-.gvs .gvs-loader .gvs-loader-img {
-	width: 150px;
-	animation: rotating 1.4s linear infinite;
-}
-
-@keyframes rotating {
-	from { transform: rotate(0deg); }
-	to { transform: rotate(360deg); }
-}
-
-/* Call to action button */
-.gvs .gvs-loader .gvs-loader-cta {
-	border: none;
-	border-radius: 7px;
-	font-weight: 500;
-	font-size: 1.0em;
-	color: white;
-	background-color: #EF6C00;
-	cursor: pointer;
-	margin: 10px;
-	padding: 5px 30px;
-	box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
-}
-
-.gvs .gvs-loader .gvs-loader-cta:hover {
-	background-color: #F57C00;
-}

package/src/components/Loader.js

@@ -1,120 +0,0 @@
-import "./Loader.css";
-import LogoDead from "../img/logo_dead.svg";
-import LoaderImg from "../img/marker.svg";
-
-/**
- * Loader is a full-screen loading message.
- * @private
- * 
- * @param {CoreView} parent The parent view
- * @param {Element} container The DOM element to create loader into
- */
-export default class Loader {
-	constructor(parent, container) {
-		this._parent = parent;
-		this.container = container;
-		this.container.classList.add("gvs-loader", "gvs-loader-visible");
-
-		// Logo
-		const logo = document.createElement("img");
-		logo.src = LoaderImg;
-		logo.alt = "";
-		logo.title = this._parent._t.map.loading;
-		logo.classList.add("gvs-loader-img");
-		this.container.appendChild(logo);
-
-		// Label (1 serious, then fun ones)
-		const labelWrapper = document.createElement("div");
-		const label = document.createElement("span");
-		const nextLabelFun = () => (
-			this._parent._t.gvs.loading_labels_fun[
-				Math.floor(Math.random() * this._parent._t.gvs.loading_labels_fun.length)
-			]
-		);
-		label.innerHTML = this._parent._t.gvs.loading_labels_serious[
-			Math.floor(Math.random() * this._parent._t.gvs.loading_labels_serious.length)
-		];
-		const nextLabelFct = () => setTimeout(() => {
-			label.innerHTML = nextLabelFun();
-			this._loaderLabelChanger = nextLabelFct();
-		}, 500 + Math.random() * 1000);
-		this._loaderLabelChanger = nextLabelFct();
-		labelWrapper.appendChild(label);
-
-		this.container.appendChild(labelWrapper);
-	}
-
-	/**
-	 * Is the loader visible ?
-	 * @returns {boolean} True if visible
-	 */
-	isVisible() {
-		return this.container.classList.contains("gvs-loader-visible");
-	}
-
-	/**
-	 * Dismiss loader, or show error
-	 * @param {object} [err] Optional error object to show in browser console
-	 * @param {str} [errMeaningful] Optional error message to show to user
-	 * @param {fct} [next] Optional function to run after loader dismiss
-	 */
-	dismiss(err = null, errMeaningful = null, next = null) {
-		clearTimeout(this._loaderLabelChanger);
-
-		if(!err) {
-			this.container.classList.remove("gvs-loader-visible");
-			setTimeout(() => this.container.remove(), 2000);
-
-			/**
-			 * Event for viewer being ready to use (API loaded)
-			 *
-			 * @event ready
-			 * @memberof CoreView
-			 */
-			const readyEvt = new CustomEvent("ready");
-			this._parent.dispatchEvent(readyEvt);
-
-			if(next) { next(); }
-		}
-		else {
-			if(err !== true) { console.error(err); }
-
-			// Change content
-			this.container.children[0].src = LogoDead;
-			this.container.children[0].style.width = "200px";
-			this.container.children[0].style.animation = "unset";
-
-			let errHtml;
-			if(next) {
-				errHtml = `<button class="gvs-loader-cta">${this._parent._t.gvs.error_click}</button>`;
-			}
-			else {
-				errHtml = `<small>${this._parent._t.gvs.error_retry}</small>`;
-			}
-
-			if(errMeaningful) { errHtml = errMeaningful + "<br />" + errHtml; }
-			this.container.children[1].innerHTML = `${this._parent._t.gvs.error}<br />${errHtml}`;
-			if(next) {
-				this.container.addEventListener("click", next);
-			}
-			const errLabel = errMeaningful || "Panoramax JS had a blocking exception";
-
-			/**
-			 * Event for viewer failing to initially load
-			 *
-			 * @event broken
-			 * @memberof CoreView
-			 * @type {object}
-			 * @property {object} detail Event information
-			 * @property {string} detail.error The user-friendly error message to display
-			 */
-			const brokenEvt = new CustomEvent("broken", {
-				detail: { error: errLabel }
-			});
-			this._parent.dispatchEvent(brokenEvt);
-
-			// Throw error
-			throw new Error(errLabel);
-		}
-	}
-}

package/src/utils/Exif.js

@@ -1,193 +0,0 @@
-/**
- * Read float value from EXIF tags (to handle fractions & all)
- * @param {*} val The input EXIF tag value
- * @returns {number|undefined} The parsed value, or undefined if value is not readable
- * @private
- */
-export function getExifFloat(val) {
-	// Null-like values
-	if(
-		[null, undefined, ""].includes(val)
-		|| typeof val === "string" && val.trim() === ""
-	) {
-		return undefined;
-	}
-	// Already valid number
-	else if(typeof val === "number") {
-		return val;
-	}
-	// String
-	else if(typeof val === "string") {
-		// Check if looks like a fraction
-		if(/^-?\d+(\.\d+)?\/-?\d+(\.\d+)?$/.test(val)) {
-			const parts = val.split("/").map(p => parseFloat(p));
-			return parts[0] / parts[1];
-		}
-
-		// Try a direct cast to float
-		try { return parseFloat(val); }
-		catch(e) {} // eslint-disable-line no-empty
-
-		// Unrecognized
-		return undefined;
-	}
-	else { return undefined; }
-}
-
-/**
- * Find in picture metadata the GPS precision.
- * @param {object} picture The GeoJSON picture feature
- * @returns {string} The precision value (poor, fair, moderate, good, excellent, ideal, unknown)
- * @private
- */
-export function getGPSPrecision(picture) {
-	let quality = "❓";
-	const gpsHPosError = picture?.properties?.["quality:horizontal_accuracy"] || getExifFloat(picture?.properties?.exif?.["Exif.GPSInfo.GPSHPositioningError"]);
-	const gpsDop = getExifFloat(picture?.properties?.exif?.["Exif.GPSInfo.GPSDOP"]);
-	
-	if(gpsHPosError !== undefined) {
-		quality = `${gpsHPosError} m`;
-	}
-	else if(gpsDop !== undefined) {
-		if(gpsDop < 1) { quality = "ideal"; }
-		else if(gpsDop < 2) { quality = "excellent"; }
-		else if(gpsDop < 5) { quality = "good"; }
-		else if(gpsDop < 10) { quality = "moderate"; }
-		else if(gpsDop < 20) { quality = "fair"; }
-		else { quality = "poor"; }
-	}
-
-	return quality;
-}
-
-/**
- * Compute PSV sphere correction based on picture metadata & EXIF tags.
- * @param {object} picture The GeoJSON picture feature
- * @returns {object} The PSV sphereCorrection value
- * @private
- */
-export function getSphereCorrection(picture) {
-	// Photo direction
-	let dir = picture.properties?.["view:azimuth"];
-	if(dir === undefined) {
-		const v = getExifFloat(picture.properties?.exif?.["Exif.GPSInfo.GPSImgDirection"]);
-		if(v !== undefined) {
-			dir = v;
-		}
-	}
-	dir = dir || 0;
-
-	// Yaw
-	let yaw = picture.properties?.["pers:yaw"];
-	let exifFallbacks = ["Xmp.GPano.PoseHeadingDegrees", "Xmp.Camera.Yaw", "Exif.MpfInfo.MPFYawAngle"];
-	if(yaw === undefined) {
-		for(let exif of exifFallbacks) {
-			const v = getExifFloat(picture.properties?.exif?.[exif]);
-			if(v !== undefined) {
-				yaw = v;
-				break;
-			}
-		}
-	}
-	yaw = yaw || 0;
-
-	// Check if yaw is applicable: different from photo direction
-	if(Math.round(dir) === Math.round(yaw) && yaw > 0) {
-		console.warn("Picture with UUID", picture.id, "has same GPS Image direction and Yaw, could cause rendering issues");
-		// yaw = 0;
-	}
-
-	// Pitch
-	let pitch = picture.properties?.["pers:pitch"];
-	exifFallbacks = ["Xmp.GPano.PosePitchDegrees", "Xmp.Camera.Pitch", "Exif.MpfInfo.MPFPitchAngle"];
-	if(pitch === undefined) {
-		for(let exif of exifFallbacks) {
-			const v = getExifFloat(picture.properties?.exif?.[exif]);
-			if(v !== undefined) {
-				pitch = v;
-				break;
-			}
-		}
-	}
-	pitch = pitch || 0;
-
-	// Roll
-	let roll = picture.properties?.["pers:roll"];
-	exifFallbacks = ["Xmp.GPano.PoseRollDegrees", "Xmp.Camera.Roll", "Exif.MpfInfo.MPFRollAngle"];
-	if(roll === undefined) {
-		for(let exif of exifFallbacks) {
-			const v = getExifFloat(picture.properties?.exif?.[exif]);
-			if(v !== undefined) {
-				roll = v;
-				break;
-			}
-		}
-	}
-	roll = roll || 0;
-
-	// Send result
-	return pitch !== 0 && roll !== 0 ? {
-		pan:  yaw * Math.PI / 180,
-		tilt: pitch * Math.PI / 180,
-		roll: roll * Math.PI / 180,
-	} : {};
-}
-
-/**
- * Compute PSV panoData for cropped panorama based on picture metadata & EXIF tags.
- * @param {object} picture The GeoJSON picture feature
- * @returns {object} The PSV panoData values
- * @private
- */
-export function getCroppedPanoData(picture) {
-	let res;
-
-	if(picture.properties?.["pers:interior_orientation"]) {
-		if(
-			picture.properties["pers:interior_orientation"]?.["visible_area"]
-			&& picture.properties["pers:interior_orientation"]?.["sensor_array_dimensions"]
-		) {
-			const va = picture.properties["pers:interior_orientation"]["visible_area"];
-			const sad = picture.properties["pers:interior_orientation"]["sensor_array_dimensions"];
-			try {
-				res = {
-					fullWidth: parseInt(sad[0]),
-					fullHeight: parseInt(sad[1]),
-					croppedX: parseInt(va[0]),
-					croppedY: parseInt(va[1]),
-					croppedWidth: parseInt(sad[0]) - parseInt(va[2]) - parseInt(va[0]),
-					croppedHeight: parseInt(sad[1]) - parseInt(va[3]) - parseInt(va[1]),
-				};
-			}
-			catch(e) {
-				console.warn("Invalid pers:interior_orientation values for cropped panorama "+picture.id);
-			}
-		}
-	}
-
-	if(!res && picture.properties?.exif) {
-		try {
-			res = {
-				fullWidth: parseInt(picture.properties.exif?.["Xmp.GPano.FullPanoWidthPixels"]),
-				fullHeight: parseInt(picture.properties.exif?.["Xmp.GPano.FullPanoHeightPixels"]),
-				croppedX: parseInt(picture.properties.exif?.["Xmp.GPano.CroppedAreaLeftPixels"]),
-				croppedY: parseInt(picture.properties.exif?.["Xmp.GPano.CroppedAreaTopPixels"]),
-				croppedWidth: parseInt(picture.properties.exif?.["Xmp.GPano.CroppedAreaImageWidthPixels"]),
-				croppedHeight: parseInt(picture.properties.exif?.["Xmp.GPano.CroppedAreaImageHeightPixels"]),
-			};
-		}
-		catch(e) {
-			console.warn("Invalid XMP.GPano values for cropped panorama "+picture.id);
-		}
-	}
-
-	// Check if crop is really necessary
-	if(res) {
-		res = Object.fromEntries(Object.entries(res || {}).filter(e => !isNaN(e[1])));
-		if(res.fullWidth == res.croppedWidth && res.fullHeight == res.croppedHeight) {
-			res = {};
-		}
-	}
-
-	return res || {};
-}