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

package/build/components/core/Viewer.js

@@ -1,711 +0,0 @@
-import { getMapParamsFromLocalStorage, linkMapAndPhoto, saveMapParamsToLocalStorage, initMapKeyboardHandler } from "../../utils/map.js";
-import PhotoViewer, {KEYBOARD_SKIP_FOCUS_WIDGETS} from "./PhotoViewer.js";
-import MapMore from "../ui/MapMore.js";
-import { DISABLE_ANNOTATIONS_PARAM, isInIframe, isNullId } from "../../utils/utils.js";
-import { createWebComp, fa } from "../../utils/widgets.js";
-import { PanoramaxMetaCatalogURL, MapTiles } from "../../utils/services.js";
-import { faMap, faPanorama } from "@fortawesome/free-solid-svg-icons";
-import { default as InitParameters, alterMapState, alterViewerState } from "../../utils/InitParameters.js";
-import MapStyleComposer from "../../utils/MapStyleComposer.js";
-import API from "../../utils/API.js";
-import ViewerStyles from "./Viewer.css" with { type: "css" };
-document.adoptedStyleSheets.push(ViewerStyles);
-
-
-const MAP_MOVE_DELTA = 100;
-
-
-/**
- * Viewer is the main component of Panoramax JS library, showing pictures and map.
- *
- * This component has a [CorneredGrid](#Panoramax.components.layout.CorneredGrid) layout, you can use directly any slot element to pass custom widgets.
- *
- * If you need a viewer without map, checkout [Photo Viewer component](#Panoramax.components.core.PhotoViewer).
- *
- * Make sure to set width/height through CSS for proper display.
- * @class Panoramax.components.core.Viewer
- * @element pnx-viewer
- * @extends Panoramax.components.core.PhotoViewer
- * @property {Panoramax.components.ui.Loader} loader The loader screen
- * @property {Panoramax.utils.API} api The API manager (local instance)
- * @property {Panoramax.utils.API} apiMC The API manager for metacatalog
- * @property {Panoramax.components.ui.MapMore} map The MapLibre GL map itself
- * @property {Panoramax.utils.MapStyleComposer} mapStyleComposer The map style helper
- * @property {Panoramax.components.ui.Photo} psv The Photo Sphere Viewer component itself
- * @property {Panoramax.components.layout.CorneredGrid} grid The grid layout manager
- * @property {Panoramax.components.layout.Mini} mini The reduced/collapsed map/photo component
- * @property {Panoramax.components.ui.Popup} popup The popup container
- * @property {Panoramax.utils.URLHandler} urlHandler The URL query parameters manager
- * @property {Panoramax.utils.PresetsManager} presetsManager The semantics presets manager
- * @fires Panoramax.components.core.Basic#select
- * @fires Panoramax.components.core.Basic#ready
- * @fires Panoramax.components.core.Basic#broken
- * @fires Panoramax.components.core.Viewer#focus-changed
- * @slot `top-left` The top-left corner
- * @slot `top` The top middle corner
- * @slot `top-right` The top-right corner
- * @slot `bottom-left` The bottom-left corner
- * @slot `bottom` The bottom middle corner
- * @slot `bottom-right` The bottom-right corner
- * @slot `editors` External links to map editors, or any tool that may be helpful. Defaults to OSM tools (iD & JOSM).
- * @example
- * ```html
- * <!-- Basic example (embeds metacatalog) -->
- * <pnx-viewer
- *   endpoint="https://panoramax.openstreetmap.fr/"
- *   style="width: 300px; height: 250px"
- * />
- *
- * <!-- Basic example (without metacatalog) -->
- * <pnx-viewer
- *   endpoint="https://panoramax.openstreetmap.fr/"
- *   metacatalog="false"
- *   style="width: 300px; height: 250px"
- * />
- *
- * <!-- With slotted widgets -->
- * <pnx-viewer
- *   endpoint="https://panoramax.openstreetmap.fr/"
- *   style="width: 300px; height: 250px"
- * >
- *   <p slot="top-right">My custom text</p>
- *   <p slot="editors"><a href="https://my.own.tool/">Edit in my own tool</a></p>
- * </pnx-viewer>
- *
- * <!-- With only your custom widgets -->
- * <pnx-viewer
- *   endpoint="https://panoramax.openstreetmap.fr/"
- *   style="width: 300px; height: 250px"
- *   widgets="false"
- * >
- *   <p slot="top-right">My custom text</p>
- * </pnx-viewer>
- *
- * <!-- With map options -->
- * <pnx-viewer
- *   endpoint="https://panoramax.openstreetmap.fr/"
- *   style="width: 300px; height: 250px"
- *   map-options="{'maxZoom': 15, 'background': 'aerial', 'raster': '...'}"
- * />
- * ```
- */
-export default class Viewer extends PhotoViewer {
-	/**
-	 * Component properties. All of [Basic properties](#Panoramax.components.core.Basic+properties) are available as well.
-	 * @memberof Panoramax.components.core.Viewer#
-	 * @mixes Panoramax.components.core.PhotoViewer#properties
-	 * @type {Object}
-	 * @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 {object} [map-options] An object with [any map option available in Map or MapMore class](#Panoramax.components.ui.MapMore).<br />Example: `map-options="{'background': 'aerial', 'theme': 'age'}"`
-	 * @property {object} [psv-options] [Any option to pass to Photo component](#Panoramax.components.ui.Photo) as an object.<br />Example: `psv-options="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"`
-	 * @property {string} [url-parameters=true] Should the component add and update URL query parameters to save viewer state ?
-	 * @property {string} [keyboard-shortcuts=true] Should keyboard shortcuts be enabled ? Set to "false" to fully disable any keyboard shortcuts.
-	 * @property {string} [focus=pic] The component showing up as main component (pic, map)
-	 * @property {string} [geocoder=nominatim] The geocoder engine to use (nominatim, ban, or URL to a standard [GeocodeJSON-compliant](https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md) API)
-	 * @property {string} [widgets=true] Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like.
-	 * @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 {string} [skip-tags-menu-opening=false] Should the "Tags" menu automatically open when you toggle Annotations switch ? Set true to avoid auto-opening.
-	 * @property {string} [share-base-url] Override the default base URL (current page) for the Share widget. Useful to lead to a public page when viewer is used in a closed tool.
-	 * @property {string} [metacatalog] The URL to access Panoramax federated catalog. Defaults to "https://explore.panoramax.fr". Set to "false" to not display pictures from federated catalog on map.
-	 * @property {string} [endpoint-to-use] Selects the default Panoramax endpoint to use. Either "default" (specific endpoint), "metacatalog" (if defined), any user UUID (available on default endpoint), or user UUID prefixed with "metacatalog_" for a metacatalog user.
-	 */
-	static properties = {
-		"map-options": {converter: PhotoViewer.GetJSONConverter()},
-		"map-style": {type: String},
-		focus: {type: String, reflect: true},
-		geocoder: {type: String},
-		tabindex: {type: Number},
-		metacatalog: {type: String},
-		"endpoint-to-use": {type: String},
-		...PhotoViewer.properties
-	};
-
-	constructor() {
-		super();
-
-		// Defaults
-		this["map-options"] = true;
-		this["map-style"] = this.getAttribute("map-style") || MapTiles();
-		this.geocoder = this.getAttribute("geocoder") || "nominatim";
-
-		// Check if mapstyle is not a unparsed JSON
-		try {
-			this["map-style"] = JSON.parse(this["map-style"]);
-		} catch(e) { /* Empty */ }
-
-		// Init DOM containers
-		this.mini = createWebComp("pnx-mini", {
-			slot: "bottom-left",
-			_parent: this,
-			onexpand: this._onMiniExpand.bind(this),
-			collapsed: isNullId(this.picture) ? true : undefined
-		});
-		this.mini.addEventListener("expand", this._toggleFocus.bind(this));
-		this.grid.appendChild(this.mini);
-		this.mapContainer = document.createElement("div");
-		this.tabindex = 0;
-	}
-
-	/** @private */
-	connectedCallback() {
-		super.connectedCallback();
-
-		this.metacatalog = this.getAttribute("metacatalog");
-		if([null, undefined, ""].includes(this.metacatalog)) { this.metacatalog = PanoramaxMetaCatalogURL(); }
-		this["endpoint-to-use"] = this.getAttribute("endpoint-to-use");
-
-		// Setup map styles and sources
-		this.mapStyleComposer = new MapStyleComposer(this);
-		this.mapStyleComposer.addBasemap("streets", this["map-style"], true);
-	}
-
-	/** @private */
-	_createInitParamsHandler() {
-		this._initParams = new InitParameters(
-			InitParameters.GetComponentProperties(Viewer, this),
-			Object.assign({}, this.urlHandler?.currentURLParams(), this.urlHandler?.currentURLParams(true)),
-			{
-				map: getMapParamsFromLocalStorage(),
-				disableAnnotations: localStorage.getItem(DISABLE_ANNOTATIONS_PARAM)
-			},
-		);
-	}
-
-	/** @private */
-	_initWidgets() {
-		if(this._initParams.getParentPostInit().widgets !== "false") {
-			this.grid.appendChild(createWebComp("pnx-widget-zoom", {
-				slot: this.isWidthSmall() ? "top-left" : "bottom-right",
-				class: this.isWidthSmall() ? "pnx-only-map pnx-print-hidden" : "pnx-print-hidden",
-				_parent: this
-			}));
-
-			if(isInIframe()) {
-				this.legend = createWebComp("pnx-widget-legend", {
-					slot: "bottom-right",
-					light: true,
-					_parent: this,
-					focus: this._initParams.getParentPostInit().focus,
-					picture: this._initParams.getParentPostInit().picture,
-				});
-				this.grid.appendChild(this.legend);
-			}
-			else if(!this.isWidthSmall()) {
-				this.legend = createWebComp("pnx-widget-legend", {
-					slot: this.isWidthSmall() ? "top" : "top-left",
-					_parent: this,
-					focus: this._initParams.getParentPostInit().focus,
-					picture: this._initParams.getParentPostInit().picture,
-				});
-				this._miniPicLegend = createWebComp("pnx-mini-picture-legend", { _parent: this });
-				this.grid.appendChild(this.legend);
-			}
-			else {
-				this.legend = createWebComp("pnx-picture-legend", { _parent: this });
-				this.bottomDrawer = createWebComp("pnx-bottom-drawer", {
-					slot: "bottom",
-					_parent: this,
-					class: this._initParams.getParentPostInit().willLoadPicture ? undefined: "pnx-hidden",
-				});
-				this.bottomDrawer.appendChild(this.legend);
-				this.grid.appendChild(this.bottomDrawer);
-				this.addEventListener("select", e => {
-					if(isNullId(e.detail.picId)) { this.bottomDrawer.classList.add("pnx-hidden"); }
-					else { this.bottomDrawer.classList.remove("pnx-hidden"); }
-				});
-			}
-
-			if(!isInIframe()) {
-				this.grid.appendChild(createWebComp("pnx-widget-player", {
-					slot: this.isWidthMedium() ? "top-right": "top",
-					_parent: this,
-					class: "pnx-only-psv pnx-print-hidden",
-					size: this.isHeightSmall() || this.isWidthMedium() ? "md": "xl",
-				}));
-
-				this.grid.appendChild(createWebComp("pnx-annotations-switch", {
-					slot: this.isWidthMedium() ? "top-right": "top",
-					_parent: this,
-					class: "pnx-only-psv pnx-print-hidden",
-					size: this.isHeightSmall() || this.isWidthMedium() ? "md": "xl",
-				}));
-
-				this.grid.appendChild(createWebComp("pnx-widget-geosearch", {
-					slot: this.isWidthSmall() ? "top-right" : "top-left",
-					_parent: this,
-					class: "pnx-only-map pnx-print-hidden",
-					geocoder: this._initParams.getParentPostInit().geocoder,
-				}));
-
-				this.grid.appendChild(createWebComp("pnx-widget-mapfilters", {
-					slot: this.isWidthSmall() ? "top-right" : "top-left",
-					_parent: this,
-					"user-search": this.api._endpoints.user_search !== null && this.api._endpoints.user_tiles !== null,
-					"quality-score": this.map?._hasQualityScore?.() || false,
-					"no-source": !this.hasTwoAPIs(),
-					class: "pnx-only-map pnx-print-hidden",
-				}));
-
-				this.grid.appendChild(createWebComp("pnx-widget-semantics-filters", {
-					slot: this.isWidthSmall() ? "top-right" : "top-left",
-					_parent: this,
-					class: "pnx-only-map pnx-print-hidden",
-				}));
-
-				this.grid.appendChild(createWebComp("pnx-widget-maplayers", { slot: "top-right", _parent: this, class: "pnx-only-map pnx-print-hidden" }));
-			}
-		}
-	}
-
-	/** @private */
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.map?.destroy();
-	}
-
-	// eslint-disable-next-line class-methods-use-this
-	getClassName() {
-		return "Viewer";
-	}
-
-	getSubComponentsNames() {
-		return super.getSubComponentsNames().concat(["mini", "map", "mapStyleComposer"]);
-	}
-
-	/**
-	 * Waits for Viewer to be completely ready (map & PSV loaded, first picture also if one is wanted)
-	 * @returns {Promise} When viewer is ready
-	 * @memberof Panoramax.components.core.Viewer#
-	 */
-	onceReady() {
-		return Promise.all([this.oncePSVReady(), this.onceMapReady()])
-			.then(() => {
-				if(this._initParams.getParentPostInit().willLoadPicture && !this.psv.getPictureMetadata()) { return this.onceFirstPicLoaded(); }
-				else { return Promise.resolve(); }
-			});
-	}
-
-	/**
-	 * 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));
-		}
-	}
-
-	/**
-	 * Waits for all APIs setup.
-	 * This is useful for two-APIs setup.
-	 * @memberof Panoramax.components.core.Viewer#
-	 * @returns {Promise}
-	 * @fulfil {null} When two APIs are ready.
-	 * @reject {string} Error message
-	 */
-	onceAllAPIsReady() {
-		if(this.getAPI()) {
-			return this.getAPI().onceReady();
-		}
-		else {
-			return new Promise(resolve => setTimeout(resolve, 250)).then(this.onceAllAPIsReady.bind(this));
-		}
-	}
-
-	/** @private */
-	attributeChangedCallback(name, old, value) {
-		super.attributeChangedCallback(name, old, value);
-
-		if(name === "picture") {
-			this.legend?.setAttribute?.("picture", value);
-
-			// First pic load : show map in mini component
-			if(isNullId(old) && !isNullId(value)) {
-				this.mini.removeAttribute("collapsed");
-			}
-
-			// Unselect -> show map wide instead
-			if(isNullId(value)) {
-				if(this.map && this.isMapWide()) { this.mini.classList.add("pnx-hidden"); }
-				else if(this.map && !this.isMapWide()) { this._setFocus("map"); }
-			}
-			// Check if it's not first load from seq=* URL parameter
-			else if(
-				isNullId(old)
-				// eslint-disable-next-line eqeqeq
-				&& this.sequence == this._initParams.getParentPostInit().sequence
-				&& !this._initParams.getParentPostInit().picture
-			) {
-				this.mini.classList.remove("pnx-hidden");
-				this.mini.removeAttribute("collapsed");
-				if(this.bottomDrawer?.getAttribute?.("openness") === "closed") {
-					this.bottomDrawer.setAttribute("openness", "half-opened");
-				}
-			}
-			// Select after none selected -> show pic wide
-			else {
-				this.mini.classList.remove("pnx-hidden");
-				if(isNullId(old)) {
-					this._setFocus("pic");
-					if(this.bottomDrawer?.getAttribute?.("openness") === "closed") {
-						this.bottomDrawer.setAttribute("openness", "half-opened");
-					}
-				}
-			}
-		}
-
-		if(name === "focus") {
-			this._setFocus(value);
-		}
-	}
-
-	/**
-	 * Waiting for map to be available.
-	 * @returns {Promise} When map is ready to use
-	 * @memberof Panoramax.components.core.Viewer#
-	 */
-	onceMapReady() {
-		if(!this["map-options"]) { return Promise.resolve(); }
-
-		let waiter;
-		return new Promise(resolve => {
-			waiter = setInterval(() => {
-				if(typeof this.map === "object") {
-					if(this.map?.loaded?.()) {
-						clearInterval(waiter);
-						resolve();
-					}
-					else if(this.map?.once) {
-						this.map.once("render", () => {
-							clearInterval(waiter);
-							resolve();
-						});
-					}
-				}
-			}, 250);
-		});
-	}
-
-	/**
-	 * Inits MapLibre GL component
-	 *
-	 * @private
-	 * @returns {Promise} Resolves when map is ready
-	 */
-	async _initMap() {
-		await new Promise(resolve => {
-			const mapInitOpts = this._initParams.getMapInit();
-			if(mapInitOpts.raster) { this.mapStyleComposer._createRasterBasemap(mapInitOpts.raster); }
-			this.map = new MapMore(this, this.mapContainer, mapInitOpts);
-			saveMapParamsToLocalStorage(this.map);
-			this.map.waitForEnoughMapLoaded().then(() => {
-				this.loader.setAttribute("value", Math.max(75, parseInt(this.loader.getAttribute("value"))));
-			});
-			resolve();
-		});
-
-		await alterMapState(this.map, this._initParams.getMapPostInit());
-		initMapKeyboardHandler(this);
-		linkMapAndPhoto(this);
-	}
-
-	/**
-	 * Is the viewer using both metacatalog and local API ?
-	 * @returns {boolean} True if using two APIs
-	 * @memberof Panoramax.components.core.Viewer#
-	 */
-	hasTwoAPIs() {
-		// eslint-disable-next-line eqeqeq
-		return (this.apiMC != undefined && this.api != undefined) || this.metacatalog !== "false";
-	}
-
-	/**
-	 * Returns the API manager, from current Panoramax endpoint.
-	 * @returns {API} The API manager
-	 * @memberof Panoramax.components.core.Viewer#
-	 */
-	getAPI() {
-		let apiToUse = this.mapStyleComposer.panoramax || this._initParams.getParentPostInit().users || (this.hasTwoAPIs() ? "metacatalog" : "default");
-		if(apiToUse === "metacatalog" && this.metacatalog === "false") { apiToUse = "default"; }
-		return apiToUse?.startsWith("metacatalog") ? this.apiMC : this.api;
-	}
-
-	/** @private */
-	async _postAPIInit() {
-		this.loader.setAttribute("value", 30);
-		this._createInitParamsHandler();
-
-		const myPostInitParams = this._initParams.getParentPostInit();
-
-		// Load Panoramax endpoints in map style
-		const loadDefault = [null, undefined, "", "default"].includes(myPostInitParams.users);
-		await this._lookForMetacatalog(!loadDefault);
-		this.mapStyleComposer._createPanoramaxEndpointFromAPI("default", this.api, loadDefault);
-
-		this._initPSV();
-		await this._initMap();
-		this._initWidgets();
-
-		// Re-launch slot move (for those depending on widgets)
-		this._moveChildToGrid();
-
-		alterViewerState(this, myPostInitParams);
-
-		if(myPostInitParams.keyboardShortcuts) {
-			this._handleKeyboardManagement();
-		}
-
-		if(myPostInitParams.willLoadPicture) {
-			this.psv.addEventListener("picture-loaded", () => {
-				alterViewerState(this, myPostInitParams); // Do it again for forcing focus
-				this.loader.dismiss();
-			}, {once: true});
-		}
-		else {
-			this.map.waitForEnoughMapLoaded().then(() => {
-				this.loader.dismiss();
-			});
-		}
-	}
-
-	/** @private */
-	async _lookForMetacatalog(switchOn) {
-		if(this.hasTwoAPIs()) {
-			this.apiMC = new API(this.metacatalog+"/api");
-			await this.apiMC.onceReady();
-			this.mapStyleComposer._createPanoramaxEndpointFromAPI("metacatalog", this.apiMC, switchOn);
-		}
-	}
-
-	/** @private */
-	_enableKeyboard() {
-		if(this.map && this.isMapWide()) { this._enableKeyboardMap(); }
-		else { this._enableKeyboardPSV(); }
-	}
-
-	/** @private */
-	_enableKeyboardMap() {
-		this.psv.stopKeyboardControl();
-		this.map.keyboard.enable();
-	}
-
-	/** @private */
-	_enableKeyboardPSV() {
-		this.psv.startKeyboardControl();
-		this.map.keyboard.disable();
-	}
-
-	/** @private */
-	_disableKeyboard() {
-		this.psv.stopKeyboardControl();
-		this.map.keyboard.disable();
-	}
-
-	/** @private */
-	_handleKeyboardManagement() {
-		// General
-		window.addEventListener("click", e => this._toggleKeyboardBasedOnFocus(e));
-		window.addEventListener("keypress", this._toggleKeyboardBasedOnFocus.bind(this));
-		this.addEventListener("focus-changed", e => {
-			if(this.popup.getAttribute("visible")) { this._disableKeyboard(); }
-			else if(e.detail.focus === "map") { this._enableKeyboardMap(); }
-			else { this._enableKeyboardPSV(); }
-		});
-
-		// Popup
-		this.popup.addEventListener("open", this._disableKeyboard.bind(this));
-		this.popup.addEventListener("close", this._enableKeyboard.bind(this));
-		this.psv.addEventListener("click", this._enableKeyboardPSV.bind(this));
-
-		// Widgets
-		for(let cn of this.grid.childNodes) {
-			if(
-				cn.getAttribute("slot") !== "bg"
-				&& !KEYBOARD_SKIP_FOCUS_WIDGETS.includes(cn.tagName.toLowerCase())
-			) {
-				cn.addEventListener("focusin", this._disableKeyboard.bind(this));
-				cn.addEventListener("focusout", () => {
-					if(this.popup.getAttribute("visible") === null) {
-						this._enableKeyboard();
-					}
-				});
-			}
-		}
-	}
-
-	/**
-	 * Move the view of main component to its center.
-	 * For map, center view on selected picture.
-	 * For picture, center view on image center.
-	 * @memberof Panoramax.components.core.Viewer#
-	 */
-	moveCenter() {
-		const meta = this.psv.getPictureMetadata();
-		if(!meta) { return; }
-
-		if(this.map && this.isMapWide()) {
-			this.map.flyTo({ center: meta.gps, zoom: 20 });
-		}
-		else {
-			super.moveCenter();
-		}
-	}
-
-	/**
-	 * Moves map or picture viewer to given direction.
-	 * @param {string} dir Direction to move to (up, left, down, right)
-	 * @private
-	 */
-	_moveToDirection(dir) {
-		if(this.map && this.isMapWide()) {
-			let pan;
-			switch(dir) {
-			case "up":
-				pan = [0, -MAP_MOVE_DELTA];
-				break;
-			case "left":
-				pan = [-MAP_MOVE_DELTA, 0];
-				break;
-			case "down":
-				pan = [0, MAP_MOVE_DELTA];
-				break;
-			case "right":
-				pan = [MAP_MOVE_DELTA, 0];
-				break;
-			}
-			this.map.panBy(pan);
-		}
-		else {
-			super._moveToDirection(dir);
-		}
-	}
-
-	/**
-	 * Is the map shown as main element instead of viewer (wide map mode) ?
-	 * @memberof Panoramax.components.core.Viewer#
-	 * @returns {boolean} True if map is wider than viewer
-	 */
-	isMapWide() {
-		return this.mapContainer.parentNode === this.grid;
-	}
-
-	/**
-	 * Change the viewer focus (either on picture or map)
-	 * @memberof Panoramax.components.core.Viewer#
-	 * @param {string} focus The object to focus on (map, pic)
-	 * @param {boolean} [skipEvent=false] True to not send focus-changed event
-	 * @param {boolean} [skipDupCheck=false] True to avoid duplicate calls check
-	 * @private
-	 */
-	_setFocus(focus, skipEvent = false, skipDupCheck = false) {
-		if(focus === "map" && !this.map) { throw new Error("Map is not enabled"); }
-		if(!["map", "pic"].includes(focus)) { throw new Error("Invalid focus value (should be pic or map)"); }
-
-		this.focus = focus;
-
-		if(!skipDupCheck && (
-			(focus === "map" && this.map && this.isMapWide())
-			|| (focus === "pic" && (!this.map || !this.isMapWide()))
-		)) { return; }
-
-		if(focus === "map") {
-			// Remove PSV from grid
-			if(this.psvContainer.parentNode === this.grid) {
-				this.grid.removeChild(this.psvContainer);
-				this.psvContainer.removeAttribute("slot");
-			}
-
-			// Remove map from mini
-			if(this.mapContainer.parentNode === this.mini) {
-				this.mini.removeChild(this.mapContainer);
-			}
-
-			// Add map to grid
-			this.mapContainer.setAttribute("slot", "bg");
-			this.grid.appendChild(this.mapContainer);
-
-			// Add PSV to mini
-			this.mini.appendChild(this.psvContainer);
-			this.mini.icon = fa(faPanorama);
-			if(this._miniPicLegend) { this.mini.appendChild(this._miniPicLegend); }
-
-			// Hide mini icon if no picture selected
-			if(isNullId(this.picture)) { this.mini.classList.add("pnx-hidden"); }
-			else { this.mini.classList.remove("pnx-hidden"); }
-
-			this.map.getCanvas().focus();
-		}
-		else {
-			// Remove map from grid
-			if(this.mapContainer.parentNode === this.grid) {
-				this.grid.removeChild(this.mapContainer);
-				this.mapContainer.removeAttribute("slot");
-			}
-
-			// Remove PSV from mini
-			if(this.psvContainer.parentNode === this.mini) {
-				this.mini.removeChild(this.psvContainer);
-				if(this._miniPicLegend) { this.mini.removeChild(this._miniPicLegend); }
-			}
-
-			// Add PSV to grid
-			this.psvContainer.setAttribute("slot", "bg");
-			this.grid.appendChild(this.psvContainer);
-
-			// Add map to mini
-			this.mini.classList.remove("pnx-hidden");
-			this.mini.appendChild(this.mapContainer);
-			this.mini.icon = fa(faMap);
-
-			this.psvContainer.focus();
-		}
-
-		this?.map?.resize?.();
-		this.psv.autoSize();
-		this.psv.forceRefresh();
-		this.legend?.setAttribute?.("focus", this.focus);
-
-		if(!skipEvent) {
-			/**
-			 * Event for focus change (either map or picture is shown wide)
-			 * @event Panoramax.components.core.Viewer#focus-changed
-			 * @type {CustomEvent}
-			 * @property {string} detail.focus Component now focused on (map, pic)
-			 */
-			const event = new CustomEvent("focus-changed", { detail: { focus } });
-			this.dispatchEvent(event);
-		}
-	}
-
-	/**
-	 * Toggle the viewer focus (either on picture or map)
-	 * @memberof Panoramax.components.core.Viewer#
-	 * @private
-	 */
-	_toggleFocus() {
-		this._setFocus(this.isMapWide() ? "pic" : "map");
-	}
-
-	/** @private */
-	_onMiniExpand() {
-		this.map.resize();
-		this.psv.autoSize();
-	}
-
-	/** @private */
-	_showLocationPrecisionDoc() {
-		this.setPopup(true, [createWebComp("pnx-location-precision-doc", {_t: this._t})]);
-	}
-}
-
-customElements.define("pnx-viewer", Viewer);