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

package/build/utils/InitParameters.js

@@ -1,521 +0,0 @@
-import { isPanoramaxEndpointSingleUser } from "./map.js";
-
-export const MAP_FILTERS_JS2URL = {
-	"minDate": "date_from",
-	"maxDate": "date_to",
-	"pic_type": "pic_type",
-	"camera": "camera",
-	"theme": "theme",
-	"qualityscore": "pic_score",
-	"gps": "gps"
-};
-
-const MAP_FILTERS_URL2JS = Object.fromEntries(Object.entries(MAP_FILTERS_JS2URL).map(v => [v[1], v[0]]));
-const MAP_NONE = ["none", "null", "false", false];
-
-const MAPLIBRE_OPTIONS = [
-	"antialias", "bearing", "bearingSnap", "bounds",
-	"boxZoom", "clickTolerance", "collectResourceTiming",
-	"cooperativeGestures", "crossSourceCollisions", "doubleClickZoom", "dragPan",
-	"dragRotate", "fadeDuration", "failIfMajorPerformanceCaveat", "fitBoundsOptions",
-	"hash", "interactive", "localIdeographFontFamily", "locale", "logoPosition",
-	"maplibreLogo", "maxBounds", "maxCanvasSize", "maxPitch", "maxTileCacheSize",
-	"maxTileCacheZoomLevels", "maxZoom", "minPitch", "minZoom", "pitch", "pitchWithRotate",
-	"pixelRatio", "preserveDrawingBuffer", "refreshExpiredTiles", "renderWorldCopies",
-	"scrollZoom", "touchPitch", "touchZoomRotate", "trackResize",
-	"transformCameraUpdate", "transformRequest", "validateStyle"
-];
-
-function filterMapLibreOptions(opts) {
-	return Object.fromEntries(Object.entries(opts).filter(([key]) => MAPLIBRE_OPTIONS.includes(key)));
-}
-
-
-/**
- * Merges all URL parameters and component attributes into a single set of coherent settings.
- *
- * @class Panoramax.utils.InitParameters
- * @param {object} [componentAttrs] HTML attributes from parent component
- * @param {object} [urlParams] Parameters extracted from URL
- * @param {object} [browserStorage] Parameters read from local/session storage
- */
-export default class InitParameters {
-	constructor(componentAttrs = {}, urlParams = {}, browserStorage = {}) {
-		// Skip URL parameters if disabled by component
-		if(componentAttrs["url-parameters"] === "false") { urlParams = {}; }
-
-		// Sanitize PSV parameters
-		let componentPsv = {};
-		if(typeof componentAttrs?.["psv-options"] === "object") { componentPsv = componentAttrs["psv-options"]; }
-
-		// Sanitize Map parameters
-		let componentMap = {};
-		if(typeof componentAttrs?.["map-options"] === "object") { componentMap = componentAttrs["map-options"]; }
-		let browserMap = {};
-		if(typeof browserStorage?.map === "object") { browserMap = browserStorage.map; }
-
-		// Extract map position from URL
-		let urlMap = urlParams.map && urlParams.map !== "none" ? getMapPositionFromString(urlParams.map) : null;
-
-		// Parse and prioritize all parameters
-		//  - Overlapping between URL & component
-		let map = MAP_NONE.includes(urlParams.map) || MAP_NONE.includes(componentAttrs["map-options"]) ? false : true;
-		let focus = urlParams.focus || componentAttrs.focus;
-		let picture = urlParams.pic || componentAttrs.picture;
-		let sequence = urlParams.seq || componentAttrs.sequence;
-		let users = urlParams.users || componentAttrs["endpoint-to-use"] || browserMap.endpoint;
-		let psv_speed = urlParams.speed || componentPsv?.transitionDuration;
-		let psv_nav = urlParams.nav || componentPsv?.picturesNavigation;
-		let map_theme = urlParams.theme || componentMap.theme || browserMap?.theme;
-		let map_background = urlParams.background || componentMap.background || browserMap?.background;
-		let map_center = urlMap?.center || (!picture && (componentMap.center || browserMap?.center)) || [0,0];
-		let map_zoom = urlMap?.zoom || componentMap.zoom || browserMap?.zoom;
-		let map_pitch = urlMap?.pitch || componentMap.pitch;
-		let map_bearing = urlMap?.bearing || componentMap.bearing;
-		let map_indoor_level = urlParams.level || componentMap.indoor?.level;
-
-		//  - Component only
-		let geocoder = componentAttrs.geocoder;
-		let widgets = componentAttrs.widgets;
-		let fetchOptions = componentAttrs["fetch-options"];
-		let style = componentAttrs.style;
-		let lang = componentAttrs.lang;
-		let endpoint = componentAttrs.endpoint;
-		let map_raster = componentMap.raster;
-		let map_basemaps = componentMap.basemaps;
-		let map_indoor = componentMap.indoor;
-		let map_attribution = componentMap.attributionControl;
-		let map_others = filterMapLibreOptions(componentMap);
-		let keyboardShortcuts = componentAttrs["keyboard-shortcuts"];
-		let skipTagsMenuOpening = componentAttrs["skip-tags-menu-opening"];
-
-		//  - Overlapping between browser storage & component
-		let psv_displayAnnotations = browserStorage?.disableAnnotations === "false" || componentPsv?.displayAnnotations || false;
-
-		//  - URL only
-		let psv_xyz = urlParams.xyz;
-		let map_date_from = urlParams.date_from;
-		let map_date_to = urlParams.date_to;
-		let map_pic_type = urlParams.pic_type;
-		let map_camera = urlParams.camera;
-		let map_pic_score = urlParams.pic_score;
-		let map_gps = urlParams.gps;
-		let map_overlay = urlParams.overlay;
-		let psv_xywh = urlParams.xywh;
-		let psv_annot = urlParams.annot;
-
-		// Check coherence
-		if(map && !picture && !sequence) {
-			focus = "map";
-		}
-		else if(!["map", "pic"].includes(focus)) {
-			console.warn("Invalid value for parameter focus:", focus);
-			focus = map && (!picture && !sequence) ? "map" : "pic";
-		}
-		else if(focus === "map" && !map) {
-			console.warn("Parameter focus can't be 'map' as map is disabled");
-			focus = "pic";
-		}
-
-		if(map_background === "aerial" && !map_raster) {
-			console.warn("Parameter background can't be 'aerial' as no aerial imagery is available");
-			map_background = "streets";
-		}
-		if(map_indoor_level && !map_indoor) {
-			console.error("Can't set indoor level if indoor= plugin is not available");
-		}
-		if(!psv_displayAnnotations && psv_annot) {
-			psv_displayAnnotations = true;
-		}
-		if(psv_annot && !picture) {
-			// Related to https://gitlab.com/panoramax/clients/web-viewer/-/issues/347
-			console.error("Parameter annot can only be used in combination with 'picture'");
-		}
-
-		// Put all attributes in appropriate container
-		this._parentInit = { map, fetchOptions, style, lang, endpoint };
-		this._parentPostInit = {
-			focus, picture, sequence, geocoder, widgets, users,
-			forceFocus: true, keyboardShortcuts: true,
-			willLoadPicture: (picture || sequence) !== undefined,
-			skipTagsMenuOpening: skipTagsMenuOpening === "true"
-		};
-
-		this._psvInit = Object.assign(
-			Object.fromEntries(
-				Object.entries(componentPsv).filter(
-					([k,]) => !["transitionDuration", "picturesNavigation", "displayAnnotations"].includes(k)
-				)
-			),
-			{
-				displayAnnotations: psv_displayAnnotations
-			}
-		);
-
-		this._psvAny = {
-			transitionDuration: psv_speed,
-			picturesNavigation: psv_nav,
-		};
-		this._psvPostInit = { xyz: psv_xyz, xywh: psv_xywh, annotation: psv_annot };
-
-		this._mapInit = {
-			raster: map_raster,
-			indoor: map_indoor,
-			attributionControl: map_attribution,
-			basemaps: map_basemaps,
-			...map_others
-		};
-
-		this._mapAny = {
-			theme: map_theme,
-			background: map_background,
-			center: map_center,
-			zoom: map_zoom,
-			pitch: map_pitch,
-			bearing: map_bearing,
-			level: map_indoor_level,
-		};
-		this._mapPostInit = {
-			date_from: map_date_from,
-			date_to: map_date_to,
-			pic_type: map_pic_type,
-			camera: map_camera,
-			pic_score: map_pic_score,
-			gps: map_gps,
-			overlay: map_overlay,
-		};
-
-		if(keyboardShortcuts === "false") {
-			this._psvInit.keyboard = false;
-			this._psvInit.keyboardActions = {};
-			this._mapInit.keyboard = false;
-			this._parentPostInit.keyboardShortcuts = false;
-		}
-	}
-
-	/**
-	 * Cleans out undefined values from object.
-	 * @param {object} obj The input object
-	 * @returns {object} Clean object without undefined values
-	 * @private
-	 */
-	_sanitize(obj) {
-		return Object.fromEntries(Object.entries(obj).filter(([,v]) => v !== undefined));
-	}
-
-	/**
-	 * Get core component initialization parameters.
-	 * They must be passed as soon as possible.
-	 * @memberof Panoramax.utils.InitParameters#
-	 */
-	getParentInit() {
-		return this._sanitize(this._parentInit);
-	}
-
-	/**
-	 * Get core component post-initialization parameters.
-	 * They must be passed after first rendering or init.
-	 * @memberof Panoramax.utils.InitParameters#
-	 */
-	getParentPostInit() {
-		return this._sanitize(this._parentPostInit);
-	}
-
-	/**
-	 * Get Photo Sphere Viewer initialization parameters.
-	 * They must be passed as soon as possible.
-	 * @memberof Panoramax.utils.InitParameters#
-	 */
-	getPSVInit() {
-		return this._sanitize(Object.assign({}, this._psvInit, this._psvAny));
-	}
-
-	/**
-	 * Get Photo Sphere Viewer post-initialization parameters.
-	 * They must be passed after first rendering or init.
-	 * @memberof Panoramax.utils.InitParameters#
-	 */
-	getPSVPostInit() {
-		return this._sanitize(Object.assign({}, this._psvPostInit, this._psvAny));
-	}
-
-	/**
-	 * Get MapLibre GL initialization parameters.
-	 * They must be passed as soon as possible.
-	 * @memberof Panoramax.utils.InitParameters#
-	 */
-	getMapInit() {
-		return this._sanitize(Object.assign({}, this._mapInit, this._mapAny));
-	}
-
-	/**
-	 * Get MapLibre GL post-initialization parameters.
-	 * They must be passed after first rendering or init.
-	 * @memberof Panoramax.utils.InitParameters#
-	 */
-	getMapPostInit() {
-		return this._sanitize(Object.assign({}, this._mapPostInit, this._mapAny));
-	}
-
-	/**
-	 * Reads public properties from LitElement and returns a classic key-value object.
-	 * @param {class} compClass The component class (with static `properties` definition)
-	 * @param {LitElement} comp The component itself
-	 */
-	static GetComponentProperties(compClass, comp) {
-		const props = {};
-		for(let classK in compClass.properties) {
-			let classV = compClass.properties[classK];
-			// eslint-disable-next-line eqeqeq
-			if(!classV.state && comp[classK] != null) {
-				props[classK] = comp[classK];
-			}
-		}
-		return props;
-	}
-}
-
-/**
- * Extracts map center, zoom & more from formatted string.
- * @param {string} str The map position as hash string
- * @param {Panoramax.components.ui.Map} [map] The current map
- * @returns {object} { center, zoom, pitch, bearing }
- * @private
- */
-export function getMapPositionFromString(str, map) {
-	const loc = (str || "").split("/");
-	if (loc.length >= 3 && !loc.some(v => isNaN(v))) {
-		const res = {
-			center: [+loc[2], +loc[1]],
-			zoom: +loc[0],
-			pitch: +(loc[4] || 0)
-		};
-
-		if(map) {
-			res.bearing = map.dragRotate.isEnabled() && map.touchZoomRotate.isEnabled() ? +(loc[3] || 0) : map.getBearing();
-		}
-
-		return res;
-	}
-	else { return null; }
-}
-
-/**
- * Extracts from string xyz position
- * @param {string} str The xyz position as hash string
- * @returns {object} { x, y, z }
- * @private
- */
-export function xyzParamToPSVPosition(str) {
-	const loc = (str || "").split("/");
-	if (loc.length === 3 && !loc.some(v => isNaN(v))) {
-		const res = {
-			x: +loc[0],
-			y: +loc[1],
-			z: +loc[2]
-		};
-
-		return res;
-	}
-	else { return null; }
-}
-
-/**
- * Extracts from string xywh position
- * @param {string} str The xywh position as hash string
- * @param {object} [picmeta] The current picture metadata, used to compute zoom based on image size
- * @returns {object} { yaw, pitch, z }
- * @private
- */
-export function xywhParamToPSVPosition(str, picmeta) {
-	let loc = (str || "").split(",");
-	if (loc.length === 4 && !loc.some(v => isNaN(v))) {
-		let [ locX, locY, locW, locH ] = loc.map(v => parseFloat(v));
-		let basePanoData = picmeta.panorama.basePanoData;
-		if(typeof basePanoData === "function") {
-			const size = picmeta?.properties?.["pers:interior_orientation"]?.sensor_array_dimensions;
-			if(size && size.length === 2) { basePanoData = basePanoData({width: size[0], height: size[1]}); }
-			else { basePanoData = null; }
-		}
-
-		if(!basePanoData?.fullWidth || !basePanoData?.fullHeight) { return null; }
-
-		const croppedX = basePanoData?.croppedX || 0;
-		const croppedY = basePanoData?.croppedY || 0;
-
-		// Compute offset from texture center
-		const xOffsetPx = croppedX + locX + locW / 2 - basePanoData.fullWidth / 2;
-		const yOffsetPx = -(croppedY + locY + locH / 2 - basePanoData.fullHeight / 2);
-		const xOffsetPct = xOffsetPx / basePanoData.fullWidth;
-		const yOffsetPct = yOffsetPx / basePanoData.fullHeight;
-		const xSizePct = locW / basePanoData.fullWidth;
-		const ySizePct = locH / basePanoData.fullHeight;
-		const sizePct = (xSizePct + ySizePct) / 2;
-
-		const res = {
-			yaw: xOffsetPct * 2 * Math.PI,
-			pitch: yOffsetPct * Math.PI,
-			z: (1 - sizePct) * 100
-		};
-
-		return res;
-	}
-	else { return null; }
-}
-
-/**
- * Extracts from hash parsed keys all map filters values
- * @param {*} vals Hash keys
- * @returns {object} Map filters
- * @private
- */
-export function paramsToMapFilters(vals) {
-	const newMapFilters = {};
-	for(let k in MAP_FILTERS_URL2JS) {
-		if(vals[k]) {
-			newMapFilters[MAP_FILTERS_URL2JS[k]] = vals[k];
-		}
-	}
-	if(newMapFilters.qualityscore) {
-		let values = newMapFilters.qualityscore.split("");
-		const mapping = {"A": 5, "B": 4, "C": 3, "D": 2, "E": 1};
-		newMapFilters.qualityscore = values.map(v => mapping[v]);
-	}
-	return newMapFilters;
-}
-
-/**
- * Change PSV current state based on standardized parameters.
- * @param {Photo} psv The Photo Sphere Viewer component to change.
- * @param {object} params The parameters to apply.
- */
-export function alterPSVState(psv, params) {
-	// Change xyz position
-	if(params.xyz) {
-		psv.addEventListener("picture-loaded", () => {
-			const coords = xyzParamToPSVPosition(params.xyz);
-			psv.setXYZ(coords.x, coords.y, coords.z);
-		}, {once: true});
-	}
-
-	// Change xywh position
-	if(params.xywh) {
-		psv.addEventListener("picture-loaded", () => {
-			const coords = xywhParamToPSVPosition(params.xywh, psv.getPictureMetadata());
-			psv.rotate(coords);
-			psv.zoom(coords.z);
-		}, {once: true});
-	}
-
-	// Select focused annotation
-	if(params.annotation) {
-		if(psv.getPictureMetadata()) {
-			psv.focusOnAnnotation(params.annotation);
-		}
-		else {
-			psv.addEventListener("picture-loaded", () => {
-				psv.focusOnAnnotation(params.annotation);
-			}, {once: true});
-		}
-	}
-
-	// Change transitionDuration
-	let td = params.transitionDuration || params.speed;
-	if(td !== undefined) {
-		psv.setTransitionDuration(td);
-	}
-
-	// Change pictures navigation mode
-	let nav = params.picturesNavigation || params.nav;
-	if(["none", "pic", "any", "seq"].includes(nav)) {
-		psv.setPicturesNavigation(nav);
-	}
-}
-
-/**
- * Change MapLibre GL current state based on standardized parameters.
- * @param {Map} map The MapLibre component to change.
- * @param {object} params The parameters to apply.
- */
-export function alterMapState(map, params) {
-	// Map position
-	const mapOpts = getMapPositionFromString(params.map, map);
-	if(mapOpts) {
-		map.jumpTo(mapOpts);
-	}
-
-	// Change map filters
-	map.setFilters?.(paramsToMapFilters(params));
-
-	// Change map background
-	if(map._parent?.mapStyleComposer?.layerRanges.basemaps[params.background]) {
-		map._parent.mapStyleComposer.switchBasemap(params.background);
-	}
-
-	// Change overlays
-	if(params.overlay) {
-		params.overlay.split(",").forEach(o => map._parent.mapStyleComposer.switchDataOverlayVisibility("sem-"+o, true));
-	}
-}
-
-/**
- * Change PhotoViewer current state based on standardized parameters.
- * @param {PhotoViewer} viewer The PhotoViewer component to change.
- * @param {object} params The parameters to apply.
- */
-export function alterPhotoViewerState(viewer, params) {
-	// Restore selected picture
-	let pic = params.picture || params.pic;
-	let seq = params.sequence || params.seq || null;
-	if(pic) {
-		const picIds = pic.split(";"); // Handle multiple IDs coming from OSM
-		if(picIds.length > 1) {
-			console.warn("Multiple picture IDs passed in URL, only first one kept");
-		}
-
-		viewer.select(
-			picIds.length === 1 ? seq : null,
-			picIds[0],
-			true
-		);
-	}
-	else if(seq) {
-		viewer.select(seq, null, true);
-	}
-	else {
-		viewer.select();
-	}
-}
-
-/**
- * Change Viewer current state based on standardized parameters.
- * @param {Viewer} viewer The Viewer component to change.
- * @param {object} params The parameters to apply.
- */
-export function alterViewerState(viewer, params) {
-	alterPhotoViewerState(viewer, params);
-
-	// Change focus
-	if(params.focus === "map" && viewer?.map) {
-		viewer.setPopup(false);
-		viewer._setFocus("map", null, params.forceFocus);
-	}
-	else if(params.focus === "pic" && viewer?.mini) {
-		viewer.setPopup(false);
-		viewer._setFocus("pic", null, params.forceFocus);
-	}
-	else if(params.focus && params.focus === "meta" && viewer?.mini) {
-		viewer._setFocus("pic", null, params.forceFocus);
-	}
-
-	// Change users
-	// eslint-disable-next-line eqeqeq
-	if(params.users != null) {
-		if(isPanoramaxEndpointSingleUser(params.users)) {
-			viewer.mapStyleComposer._createPanoramaxEndpointForUser(params.users);
-		}
-		else {
-			viewer.mapStyleComposer.switchPanoramaxEndpoint(params.users);
-		}
-	}
-}