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

package/build/utils/PanoraMapProtocol.js

@@ -0,0 +1,49 @@
+import Protobuf from "pbf";
+import {VectorTile} from "@mapbox/vector-tile";
+import {fromVectorTileJs} from "@maplibre/vt-pbf";
+
+// Minimum amount of pictures in a tile to consider it "crowded"
+const CROWDED_TILE_SIZE = 5000;
+
+/**
+ * PanoraMap Protocol adds a new URI scheme "panora://" (or "panoras://") to MapLibre.
+ * It allows adding custom information on top of existing Panoramax Vector Tiles.
+ * @class Panoramax.utils.PanoraMapProtocol
+ * @typicalname panoraMapProtocol
+ */
+export default class PanoraMapProtocol {
+	/**
+	 * Get a single tile
+	 * @param {object} params MapLibre parameters 
+	 * @param {AbortController} abort The abort signal handler
+	 * @returns {object} The tile, as expected by MapLibre
+	 * @memberof Panoramax.utils.PanoraMapProtocol#
+	 */
+	tile() {
+		return (params, abort) => {
+			abort = abort || new AbortController();
+			const url = params.url.replace(/^panora/, "http");
+			return fetch(url, { signal: abort.signal })
+				.then((response) => response.arrayBuffer())
+				.then((data) => new VectorTile(new Protobuf(data)))
+				.then((tile) => {
+					// Skip process if pictures are not available
+					if(!tile.layers.pictures || tile.layers.pictures.length >= CROWDED_TILE_SIZE) { return tile; }
+					
+					Object.values(tile.layers).forEach(layer => {
+						const oldFeat = layer.feature.bind(layer);
+						layer.feature = (index) => {
+							const feature = oldFeat(index);
+							// Mark tile as "uncrowded"
+							feature.properties.uncrowded = true;
+							return feature;
+						};
+					});
+					
+					return tile;
+				})
+				.then((tile) => fromVectorTileJs(tile).buffer)
+				.then((data) => ({ data }));
+		};
+	}
+}

package/build/utils/PhotoAdapter.js

@@ -0,0 +1,49 @@
+import { EquirectangularTilesAdapter } from "@photo-sphere-viewer/equirectangular-tiles-adapter";
+
+/**
+ * Override of PSV EquirectangularTilesAdapter for fine-tweaking.
+ * @class Panoramax.utils.PhotoAdapter
+ * @private
+ */
+export default class PhotoAdapter extends EquirectangularTilesAdapter {
+	constructor(viewer, config) {
+		super(viewer, config);
+		this._shouldGoFast = config.shouldGoFast || (() => true);
+	}
+
+	/**
+	 * Override to skip loading SD images according to shouldGoFast option.
+	 */
+	loadTexture(panorama, loader) {
+		if(!panorama.origBaseUrl) { panorama.origBaseUrl = panorama.baseUrl; }
+		else { panorama.baseUrl = panorama.origBaseUrl; }
+		
+		// Fast mode + thumbnail available + no HD image loaded yet + flat picture
+		if(
+			this._shouldGoFast()
+			&& panorama.thumbUrl
+			&& !panorama.hdLoaded
+			// eslint-disable-next-line eqeqeq
+			&& panorama.rows == 1
+		) {
+			panorama.baseUrl = panorama.thumbUrl;
+		}
+
+		return super.loadTexture(panorama, loader).then(data => {
+			if(panorama.baseUrl === panorama.origBaseUrl) {
+				panorama.hdLoaded = true;
+			}
+			return data;
+		}).catch(e => {
+			console.error("Can't load texture", e);
+		});
+	}
+
+	/**
+	 * Override to skip loading tiles according to shouldGoFast option.
+	 * @private
+	 */
+	__loadTiles(tiles) {
+		if(!this._shouldGoFast()) { super.__loadTiles(tiles); }
+	}
+}

package/build/utils/PresetsManager.js

@@ -0,0 +1,148 @@
+import { PanoramaxPresetsURL } from "./services.js";
+
+// Iconify aliases for whole collections
+const ICON_COLLECTIONS_SUB = {
+	"fas": "fa7-solid"
+};
+
+// Iconify aliases for specific icons
+const ICON_SUBS = {
+	// "fa6-solid:directions": "fa6-solid:diamond-turn-right"
+};
+
+/**
+ * Presets Manager handle retrieval of presets against dedicated endpoint.
+ * It allows an easily search between all presets, and handles translations.
+ *
+ * @class Panoramax.utils.PresetsManager
+ * @typicalname presetsManager
+ * @param {string} [lang] The user prefered language. Defaults to web browser preferences.
+ * @param {boolean} [skipLoad=false] Set to true to disable automatic load of API data
+ */
+export default class PresetManager {
+	constructor(lang = null, skipLoad = false) {
+		this._ready = false;
+		this._presets = null;
+		this._translations = {};
+		if(!skipLoad) { this._load(lang); }
+	}
+
+	/**
+	 * Downloads various JSON file against presets API.
+	 * @private
+	 */
+	async _load(lang) {
+		lang = lang?.substring(0, 2) || window.navigator.languages[0]?.substring(0, 2);
+
+		try {
+			const [translationsENRes, translationsLangRes, presetsRes] = await Promise.all([
+				fetch(`${PanoramaxPresetsURL()}/translations/en.min.json`),
+				lang ? fetch(`${PanoramaxPresetsURL()}/translations/${lang}.min.json`) : Promise.resolve({ok: true}),
+				fetch(`${PanoramaxPresetsURL()}/presets.min.json`),
+			]);
+
+			if (
+				!translationsENRes || !translationsLangRes || !presetsRes
+				|| !translationsENRes.ok || !translationsLangRes.ok || !presetsRes.ok
+			) {
+				this._ready = -1;
+				throw new Error("Presets service is not available");
+			}
+
+			this._presets = await presetsRes.json();
+			this._translations.en = (await translationsENRes.json())?.en?.presets;
+			if(lang) {
+				this._translations[lang] = (await translationsLangRes.json())?.[lang]?.presets;
+			}
+
+			// Post-process presets
+			Object.entries(this._presets).forEach(([pid,p]) => {
+				// Add labels
+				if(this._translations[lang]?.presets?.[pid]?.name) {
+					p.name = this._translations[lang].presets[pid].name;
+				}
+				else if(this._translations.en?.presets?.[pid]?.name) {
+					p.name = this._translations.en.presets[pid].name;
+				}
+
+				// Create iconify-compatible icon
+				if(p.icon) {
+					const iconColl = p.icon.split("-")[0];
+					const iconCollSub = ICON_COLLECTIONS_SUB[iconColl];
+					p.iconify = iconCollSub ? p.icon.replace(iconColl+"-", iconCollSub+":") : p.icon.split("-")[0]+":"+p.icon.split("-").slice(1).join("-");
+					if(ICON_SUBS[p.iconify]) { p.iconify = ICON_SUBS[p.iconify]; }
+				}
+			});
+
+			this._ready = true;
+		} catch (error) {
+			console.error("Presets service throws an error:", error);
+			this._ready = -1;
+		}
+	}
+
+	/**
+	 * Resolves when the all necessary data was downloaded.
+	 * @memberOf Panoramax.utils.PresetsManager#
+	 * @returns {Promise}
+	 */
+	async onceReady() {
+		if(!this._ready) {
+			await new Promise(resolve => setTimeout(resolve, 250));
+			return this.onceReady();
+		}
+		else if(this._ready === -1) { return Promise.reject(); }
+		else { return Promise.resolve(); }
+	}
+
+	/**
+	 * Find the best matching preset for a given STAC feature.
+	 * @memberOf Panoramax.utils.PresetsManager#
+	 * @returns {Promise}
+	 * @fulfil {object|null} The preset JSON that best matches, or null if no matches
+	 */
+	async getPreset(f) {
+		return await this.getPresets(f).then(res => res.shift());
+	}
+
+	/**
+	 * Find all matching presets for a given STAC feature.
+	 * @memberOf Panoramax.utils.PresetsManager#
+	 * @returns {Promise}
+	 * @fulfil {object[]|null} The all JSON presets that best matches, or null if no matches
+	 */
+	async getPresets(f) {
+		return await this.onceReady().then(() => {
+			const candidatePresets = Object.values(this._presets).filter(p => {
+				if(Object.keys(p.tags).length === 0) { return false; }
+
+				// Check if every tag on preset exists in feature
+				for(let pk in p.tags) {
+					const pv = p.tags[pk];
+					if(!f.semantics.find(s => s.action !== "delete" && s.key === pk && (pv === "*" || pv === s.value))) {
+						return false;
+					}
+				}
+				return true;
+			});
+
+			// Sort by best matching
+			candidatePresets.sort((a,b) => {
+				const nbTagsA = Object.keys(a.tags).length;
+				const nbTagsB = Object.keys(b.tags).length;
+
+				if(nbTagsA > nbTagsB) { return -1; }
+				else if(nbTagsA === nbTagsB) {
+					const nbTagsStarA = Object.values(a.tags).filter(v => v === "*").length;
+					const nbTagsStarB = Object.values(b.tags).filter(v => v === "*").length;
+					if(nbTagsStarA < nbTagsStarB) { return -1; }
+					else if(nbTagsStarA > nbTagsStarB) { return 1; }
+					else { return 0; }
+				}
+				else { return 1; }
+			});
+
+			return candidatePresets;
+		});
+	}
+}

package/build/utils/SemanticsMapProtocol.js

@@ -0,0 +1,144 @@
+import geojsonvt from "geojson-vt";
+import { fromGeojsonVt } from "@maplibre/vt-pbf";
+
+export const SEMANTICS_OVERLAY_MINZOOM = 15;
+export const SEMANTICS_OVERLAY_MAXZOOM = 19;
+const LIMIT_PER_ZOOM = { 15: 100, 16: 300, 17: 500, 18: 800, 19: 1000 };
+
+/**
+ * Semantics Map Protocol adds a new URI scheme "sem://" to MapLibre.
+ * It allows loading tile per tile metadata from semantics API, seamlessly.
+ * You can use them with URI like:
+ * - `sem:///"semantics.osm|traffic_sign" IS NOT NULL/{z}/{x}/{y}`
+ * - `sem:///"semantics.osm|traffic_sign"='yes'/{z}/{x}/{y}`
+ * @class Panoramax.utils.SemanticsMapProtocol
+ * @param {Panoramax.components.core.Basic} parent The parent component
+ * @typicalname semMapProtocol
+ */
+export default class SemanticsMapProtocol {
+	constructor(parent) {
+		this.tiles = new Map();
+		this._parent = parent;
+	}
+
+	/**
+	 * Removes all previously stored tiles in cache.
+	 * @memberof Panoramax.utils.SemanticsMapProtocol#
+	 */
+	clearCache() {
+		this.tiles = new Map();
+	}
+
+	/**
+	 * Transforms a XYZ tile coordinates into GPS bounding box coordinates
+	 * @private 
+	 */
+	_tileToBbox(x, y, z) {
+		const n = Math.pow(2, z);
+		const lon1 = x / n * 360 - 180;
+		const lon2 = (x + 1) / n * 360 - 180;
+		const lat1 = Math.atan(Math.sinh(Math.PI * (1 - 2 * y / n))) * 180 / Math.PI;
+		const lat2 = Math.atan(Math.sinh(Math.PI * (1 - 2 * (y + 1) / n))) * 180 / Math.PI;
+		return [lon1, lat2, lon2, lat1];
+	}
+
+	/**
+	 * Merge and override semantics attribute to get a flat tags object.
+	 * @private
+	 */
+	_semanticsToBasicProps(f) {
+		const tags = {};
+
+		// Set or append function
+		const setOrAppend = kv => {
+			if(tags[kv.key]) {
+				tags[kv.key].add(kv.value);
+			}
+			else {
+				tags[kv.key] = new Set([kv.value]);
+			}
+		};
+
+		// Read all level of semantics
+		(f.properties?.collection?.semantics || []).forEach(setOrAppend);
+		(f.properties?.semantics || []).forEach(setOrAppend);
+		(f.properties?.annotations || []).forEach(a => a.semantics.forEach(setOrAppend));
+
+		Object.keys(tags).forEach(k => tags[k] = [...tags[k]].join(";"));
+
+		// Add Panoramax IDs as well
+		tags.picid = f.id;
+		tags.seqid = f.collection;
+
+		return tags;
+	}
+
+	/**
+	 * Get a single tile
+	 * @param {object} params MapLibre parameters 
+	 * @param {AbortController} abort The abort signal handler
+	 * @returns {object} The tile, as expected by MapLibre
+	 * @memberof Panoramax.utils.SemanticsMapProtocol#
+	 */
+	tile() {
+		return (params, abort) => {
+			abort = abort || new AbortController();
+			const match = params.url.match(/^sem:\/\/\/(.+)\/(\d+)\/(\d+)\/(\d+)/);
+			if (!match) {throw new Error("Invalid URL");}
+
+			// Look for cache
+			if(this.tiles.has(params.url)) {
+				return { data: this.tiles.get(params.url).buffer.slice(0) };
+			}
+		
+			const [, f, z, x, y] = match;
+		
+			// Download from API
+			const bbox = this._tileToBbox(parseInt(x), parseInt(y), parseInt(z));
+			const url = `${this._parent.getAPI()._endpoint}/search?bbox=${bbox.join(",")}&limit=${LIMIT_PER_ZOOM[parseInt(z)]}&sortby=id&filter=${encodeURIComponent(f)}`;
+			return fetch(url, { signal: abort.signal })
+				.then(res => res.json())
+				.then(geojson => {
+					if(geojson.features) {
+						geojson.type = "FeatureCollection";
+
+						// Handle empty results
+						if(geojson.features.length === 0) {
+							const mvt = new Uint8Array();
+							this.tiles.set(params.url, mvt);
+							return { data: mvt.buffer.slice(0) };
+						}
+
+						// Remove useless stuff
+						geojson.features = geojson.features
+							.filter(f => {
+								let keep = f.properties?.semantics?.length > 0 || f.properties?.annotations?.length > 0;
+
+								// Look if sequence has indoor level
+								if(!keep) {
+									if(f.properties?.collection?.semantics?.find(s => s.key === "osm|level")) {
+										keep = true;
+									}
+								
+								}
+								return keep;
+							})
+							.map(f => ({
+								type: f.type,
+								geometry: f.geometry,
+								id: f.id,
+								properties: this._semanticsToBasicProps(f)
+							}));
+					}
+
+					// Transform GeoJSON into MVT
+					const tileIndex = geojsonvt(geojson, {minZoom: SEMANTICS_OVERLAY_MINZOOM, maxZoom: SEMANTICS_OVERLAY_MAXZOOM});
+					const tile = tileIndex.getTile(z, x, y);
+					if(!tile) { throw new Error("Can't create tile"); }
+					const mvt = fromGeojsonVt({ layer: tile }, { version: 2 });
+					this.tiles.set(params.url, mvt);
+					return { data: mvt.buffer.slice(0) };
+				});
+		};
+	}
+}