@panoramax/web-viewer 3.2.3-develop-d7e5a16d → 3.2.3-develop-6257391e

package/src/components/core/Viewer.js

@@ -0,0 +1,707 @@
+/* eslint-disable no-unused-vars */
+
+import "./Viewer.css";
+import { SYSTEM as PSSystem, DEFAULTS as PSDefaults } from "@photo-sphere-viewer/core";
+import URLHandler from "../../utils/URLHandler";
+import { linkMapAndPhoto } from "../../utils/map";
+import Basic from "./Basic";
+import Photo, { PSV_DEFAULT_ZOOM, PSV_ANIM_DURATION } from "../ui/Photo";
+import MapMore from "../ui/MapMore";
+import { initMapKeyboardHandler } from "../../utils/map";
+import { createWebComp } from "../../utils/widgets";
+import { fa } from "../../utils/widgets";
+import { faPanorama } from "@fortawesome/free-solid-svg-icons/faPanorama";
+import { faMap } from "@fortawesome/free-solid-svg-icons/faMap";
+import { querySelectorDeep } from "query-selector-shadow-dom";
+import { default as InitParameters, alterPSVState, alterMapState, alterViewerState } from "../../utils/InitParameters";
+
+
+export const PSV_ZOOM_DELTA = 20;
+const PSV_MOVE_DELTA = Math.PI / 6;
+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.
+ * @class Panoramax.components.core.Viewer
+ * @element pnx-viewer
+ * @extends Panoramax.components.core.Basic
+ * @property {Panoramax.components.ui.Loader} loader The loader screen
+ * @property {Panoramax.utils.API} api The API manager
+ * @property {Panoramax.components.ui.MapMore} [map] The MapLibre GL map itself (if map is enabled)
+ * @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 (if map is enabled)
+ * @property {Panoramax.components.ui.Popup} popup The popup container
+ * @property {Panoramax.utils.URLHandler} urlHandler The URL query parameters 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
+ * @example
+ * ```html
+ * <!-- Basic example -->
+ * <pnx-viewer
+ *   endpoint="https://panoramax.openstreetmap.fr/"
+ * />
+ * 
+ * <!-- With slotted widgets -->
+ * <pnx-viewer
+ *   endpoint="https://panoramax.openstreetmap.fr/"
+ * >
+ *   <p slot="top-right">My custom text</p>
+ * </pnx-viewer>
+ * 
+ * <!-- With only your custom widgets -->
+ * <pnx-viewer
+ *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   widgets="false"
+ *   map="false"
+ * >
+ *   <p slot="top-right">My custom text</p>
+ * </pnx-viewer>
+ * ```
+ */
+export default class Viewer extends Basic {
+	/**
+	 * Component properties. All of [Basic properties](#Panoramax.components.core.Basic+properties) are available as well.
+	 * @memberof Panoramax.components.core.Viewer#
+	 * @mixes Panoramax.components.core.Basic#properties
+	 * @type {Object}
+	 * @property {boolean|object} [map=true] Should map be used (true/false), or an object with [any map option available in Map class](#Panoramax.components.ui.MapMore)
+	 * @property {object} [psv] [Any option to pass to Photo component](#Panoramax.components.ui.Photo) as an object
+	 * @property {string} [url-parameters=true] Should the component add and update URL query parameters to save viewer state ?
+	 * @property {string} [focus=pic] The component showing up as main component (pic, map)
+	 * @property {string} [geocoder=nominatim] The geocoder engine to use (nominatim, ban)
+	 * @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.
+	 */
+	static properties = {
+		map: {type: Object},
+		psv: {type: Object},
+		"url-parameters": {type: String},
+		focus: {type: String, reflect: true},
+		geocoder: {type: String},
+		widgets: {type: String},
+		...Basic.properties
+	};
+
+	constructor() {
+		super();
+
+		// Defaults
+		this.map = true;
+		this.psv = {};
+		this["url-parameters"] = this.getAttribute("url-parameters") || true;
+		this.geocoder = this.getAttribute("geocoder") || "nominatim";
+		this.widgets = this.getAttribute("widgets") || "true";
+
+		// Set variables
+		this._prevSequence = null;
+
+		// Init DOM containers
+		this.grid = createWebComp("pnx-cornered-grid");
+		this.mini = createWebComp("pnx-mini", {
+			slot: "bottom-left",
+			_parent: this,
+			onexpand: this._onMiniExpand.bind(this),
+			collapsed: this.picture ? undefined : true
+		});
+		this.mini.addEventListener("expand", this._toggleFocus.bind(this));
+		this.grid.appendChild(this.mini);
+		this.psvContainer = document.createElement("div");
+		this.mapContainer = document.createElement("div");
+		this.popup = createWebComp("pnx-popup", {_parent: this, onclose: this._onPopupClose.bind(this)});
+
+		if(this["url-parameters"] && this["url-parameters"] !== "false") {
+			this.urlHandler = new URLHandler(this);
+			this.onceReady().then(() => {
+				this.urlHandler.listenToChanges();
+				this.urlHandler._onParentChange();
+			});
+		}
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		this._moveChildToGrid();
+
+		this.onceAPIReady().then(async () => {
+			this._initParams = new InitParameters(
+				InitParameters.GetComponentProperties(Viewer, this),
+				this.urlHandler?.currentURLParams()
+			);
+
+			const myInitParams = this._initParams.getParentInit();
+			const myPostInitParams = this._initParams.getParentPostInit();
+
+			this._initPSV();
+			if(myInitParams.map) { await this._initMap(); }
+			else {
+				this.grid.removeChild(this.mini);
+				this.psvContainer.setAttribute("slot", "bg");
+				this.grid.appendChild(this.psvContainer);
+			}
+
+			// Init various widgets
+			if(myInitParams.widgets !== "false") {
+				this.grid.appendChild(createWebComp("pnx-widget-zoom", {slot: "bottom-right", class: "pnx-print-hidden", _parent: this}));
+				this.grid.appendChild(createWebComp("pnx-widget-share", {slot: "bottom-right", class: "pnx-print-hidden", _parent: this}));
+
+				if(this.map) {
+					this.grid.appendChild(createWebComp("pnx-widget-geosearch", {
+						slot: this.isWidthSmall() ? "top-right" : "top-left",
+						_parent: this,
+						class: "pnx-only-map pnx-print-hidden",
+						geocoder: myPostInitParams.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,
+						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" }));
+				}
+				
+				this.legend = createWebComp("pnx-widget-legend", {
+					slot: this.isWidthSmall() ? "top" : "top-left",
+					_parent: this,
+					focus: myPostInitParams.focus
+				});
+				this.grid.appendChild(this.legend);
+				this.grid.appendChild(createWebComp("pnx-widget-player", {slot: "top", _parent: this, class: "pnx-only-psv pnx-print-hidden"}));
+			}
+
+			alterViewerState(this, myPostInitParams);
+			this._handleKeyboardManagement();
+			if(myPostInitParams.picture) {
+				this.psv.addEventListener("picture-loaded", () => this.loader.dismiss(), {once: true});
+			}
+			else {
+				this.loader.dismiss();
+			}
+		});
+	}
+
+	getClassName() {
+		return "Viewer";
+	}
+
+	/**
+	 * 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().picture && !this.psv.getPictureMetadata()) { return this.onceFirstPicLoaded(); }
+				else { return Promise.resolve(); }
+			});
+	}
+
+	/** @private */
+	attributeChangedCallback(name, old, value) {
+		super.attributeChangedCallback(name, old, value);
+
+		// First pic load : show map in mini component
+		if(name === "picture" && old === null && value !== null) {
+			this.mini.removeAttribute("collapsed");
+		}
+		if(name === "focus") {
+			this._setFocus(value);
+		}
+	}
+
+	/** @private */
+	render() {
+		return [this.loader, this.grid, this.popup, this.slot];
+	}
+
+	/**
+	 * Waiting for Photo Sphere Viewer to be available.
+	 * @returns {Promise} When PSV is ready to use
+	 * @memberof Panoramax.components.core.Viewer#
+	 */
+	oncePSVReady() {
+		let waiter;
+		return new Promise(resolve => {
+			waiter = setInterval(() => {
+				if(typeof this.psv === "object") {
+					if(this.psv.container) {
+						clearInterval(waiter);
+						resolve();
+					}
+					else if(this.psv.addEventListener) {
+						this.psv.addEventListener("ready", () => {
+							clearInterval(waiter);
+							resolve();
+						}, {once: true});
+					}
+				}
+			}, 250);
+		});
+	}
+
+	/**
+	 * Waiting for map to be available.
+	 * @returns {Promise} When map is ready to use
+	 * @memberof Panoramax.components.core.Viewer#
+	 */
+	onceMapReady() {
+		if(!this.map) { 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);
+		});
+	}
+
+	/**
+	 * Waits for first picture to display on PSV.
+	 * @returns {Promise}
+	 * @fulfil {undefined} When picture is shown
+	 * @memberof Panoramax.components.core.Viewer#
+	 */
+	onceFirstPicLoaded() {
+		return this.oncePSVReady().then(() => new Promise(resolve => {
+			this.psv.addEventListener("picture-loaded", resolve, {once: true});
+		}));
+	}
+
+	/** @private */
+	_initPSV() {
+		try {
+			this.psv = new Photo(this, this.psvContainer, {
+				shouldGoFast: this._psvShouldGoFast.bind(this),
+				keyboard: "always",
+				keyboardActions: {
+					...PSDefaults.keyboardActions,
+					"8": "ROTATE_UP",
+					"2": "ROTATE_DOWN",
+					"4": "ROTATE_LEFT",
+					"6": "ROTATE_RIGHT",
+
+					"PageUp": () => this.psv.goToNextPicture(),
+					"9": () => this.psv.goToNextPicture(),
+
+					"PageDown": () => this.psv.goToPrevPicture(),
+					"3": () => this.psv.goToPrevPicture(),
+
+					"5": () => this.moveCenter(),
+					"*": () => this.moveCenter(),
+
+					"Home": () => this._toggleFocus(),
+					"7": () => this._toggleFocus(),
+
+					"End": () => this.mini.toggleAttribute("collapsed"),
+					"1": () => this.mini.toggleAttribute("collapsed"),
+
+					" ": () => this.psv.toggleSequencePlaying(),
+					"0": () => this.psv.toggleSequencePlaying(),
+				},
+				...this._initParams.getPSVInit()
+			});
+			this.oncePSVReady().then(() => alterPSVState(this.psv, this._initParams.getPSVPostInit()));
+		}
+		catch(e) {
+			let err = !PSSystem.isWebGLSupported ? this._t.pnx.error_webgl : this._t.pnx.error_psv;
+			this.loader.dismiss(e, err);
+		}
+	}
+
+	/**
+	 * Inits MapLibre GL component
+	 *
+	 * @private
+	 * @returns {Promise} Resolves when map is ready
+	 */
+	async _initMap() {
+		await new Promise(resolve => {
+			this.map = new MapMore(this, this.mapContainer, this._initParams.getMapInit());
+			this.map.once("users-changed", resolve);
+		});
+
+		alterMapState(this.map, this._initParams.getMapPostInit());
+		initMapKeyboardHandler(this);
+		linkMapAndPhoto(this);
+	}
+
+	/** @private */
+	_handleKeyboardManagement() {
+		// Switchers
+		const keytomap = () => {
+			this.psv.stopKeyboardControl();
+			this.map.keyboard.enable();
+		};
+		const keytopsv = () => {
+			this.psv.startKeyboardControl();
+			this.map?.keyboard?.disable();
+		};
+		const keytonone = () => {
+			this.psv.stopKeyboardControl();
+			this.map?.keyboard?.disable();
+		};
+		const keytofocused = () => {
+			if(this.map && this.isMapWide()) { keytomap(); }
+			else { keytopsv(); }
+		};
+
+		// General focus change
+		this.addEventListener("focus-changed", e => {
+			if(e.detail.focus === "map") { keytomap(); }
+			else { keytopsv(); }
+		});
+
+		// Popup
+		this.popup.addEventListener("open", () => keytonone());
+		this.popup.addEventListener("close", () => keytofocused());
+
+		// Widgets
+		for(let cn of this.grid.childNodes) {
+			if(cn.getAttribute("slot") !== "bg") {
+				cn.addEventListener("focusin", () => keytonone());
+				cn.addEventListener("focusout", () => keytofocused());
+			}
+		}
+	}
+
+	/**
+	 * Given context, should tiles be loaded in PSV.
+	 * @private
+	 */
+	_psvShouldGoFast() {
+		return (this.psv._sequencePlaying && this.psv.getTransitionDuration() < 1000)
+			|| (this.map && this.isMapWide());
+	}
+
+	/** @private */
+	_moveChildToGrid() {
+		for(let i=0; i < this.childNodes.length; i++) {
+			let n = this.childNodes[i];
+			if(n.getAttribute?.("slot")) {
+				// Add parent + translation for our components
+				if(n.tagName?.toLowerCase().startsWith("pnx-")) {
+					n._parent = this;
+					n._t = this._t;
+				}
+				this.grid.appendChild(n);
+			}
+		}
+	}
+
+	/**
+	 * Change full-page popup visibility and content
+	 * @memberof Panoramax.components.core.Viewer#
+	 * @param {boolean} visible True to make it appear
+	 * @param {string|Element[]} [content] The new popup content
+	 */
+	setPopup(visible, content = null) {
+		if(visible) { this.popup.setAttribute("visible", ""); }
+		else { this.popup.removeAttribute("visible"); }
+		
+		this.popup.innerHTML = "";
+		if(typeof content === "string") { this.popup.innerHTML = content; }
+		else if(Array.isArray(content)) { content.forEach(c => this.popup.appendChild(c)); }
+	}
+
+	/** @private */
+	_onPopupClose() {
+		this.dispatchEvent(new CustomEvent("focus-changed", { detail: { focus: this.map && this.isMapWide() ? "map" : "pic" } }));
+	}
+
+	/** @private */
+	_showQualityScoreDoc() {
+		this.setPopup(true, [createWebComp("pnx-quality-score-doc", {_t: this._t})]);
+	}
+
+	/** @private */
+	_showReportForm() {
+		if(!this.psv.getPictureMetadata()) { throw new Error("No picture currently selected"); }
+		this.setPopup(true, [createWebComp("pnx-report-form", {_parent: this})]);
+		this.dispatchEvent(new CustomEvent("focus-changed", { detail: { focus: "meta" } }));
+	}
+
+	/** @private */
+	_showPictureMetadata() {
+		if(!this.psv.getPictureMetadata()) { throw new Error("No picture currently selected"); }
+		this.setPopup(true, [createWebComp("pnx-picture-metadata", {_parent: this})]);
+		this.dispatchEvent(new CustomEvent("focus-changed", { detail: { focus: "meta" } }));
+	}
+
+	/**
+	 * 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 {
+			this._psvAnimate({
+				speed: PSV_ANIM_DURATION,
+				yaw: 0,
+				pitch: 0,
+				zoom: PSV_DEFAULT_ZOOM
+			});
+		}
+	}
+
+	/**
+	 * Moves the view of main component slightly to the left.
+	 * @memberof Panoramax.components.core.Viewer#
+	 */
+	moveLeft() {
+		this._moveToDirection("left");
+	}
+
+	/**
+	 * Moves the view of main component slightly to the right.
+	 * @memberof Panoramax.components.core.Viewer#
+	 */
+	moveRight() {
+		this._moveToDirection("right");
+	}
+
+	/**
+	 * Moves the view of main component slightly to the top.
+	 * @memberof Panoramax.components.core.Viewer#
+	 */
+	moveUp() {
+		this._moveToDirection("up");
+	}
+
+	/**
+	 * Moves the view of main component slightly to the bottom.
+	 * @memberof Panoramax.components.core.Viewer#
+	 */
+	moveDown() {
+		this._moveToDirection("down");
+	}
+
+	/**
+	 * 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 {
+			let pos = this.psv.getPosition();
+			switch(dir) {
+			case "up":
+				pos.pitch += PSV_MOVE_DELTA;
+				break;
+			case "left":
+				pos.yaw -= PSV_MOVE_DELTA;
+				break;
+			case "down":
+				pos.pitch -= PSV_MOVE_DELTA;
+				break;
+			case "right":
+				pos.yaw += PSV_MOVE_DELTA;
+				break;
+			}
+			this._psvAnimate({ speed: PSV_ANIM_DURATION, ...pos });
+		}
+	}
+
+	/**
+	 * Overrided PSV animate function to ensure a single animation plays at once.
+	 * @param {object} options PSV animate options
+	 * @private
+	 */
+	_psvAnimate(options) {
+		if(this._lastPsvAnim) { this._lastPsvAnim.cancel(); }
+		this._lastPsvAnim = this.psv.animate(options);
+	}
+
+	/**
+	 * 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
+	 * @throws {Error} If map is not enabled
+	 */
+	isMapWide() {
+		if(!this.map) { throw new Error("Map is not enabled"); }
+		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);
+			
+			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);
+			}
+
+			// Add PSV to grid
+			this.psvContainer.setAttribute("slot", "bg");
+			this.grid.appendChild(this.psvContainer);
+			
+			// Add map to mini
+			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#
+	 * @throws {Error} If map is not enabled
+	 * @private
+	 */
+	_toggleFocus() {
+		if(!this.map) { throw new Error("Map is not enabled"); }
+		this._setFocus(this.isMapWide() ? "pic" : "map");
+	}
+
+	/** @private */
+	_onMiniExpand() {
+		this.map.resize();
+		this.psv.autoSize();
+	}
+
+	/**
+	 * Send viewer new map filters values.
+	 * @private
+	 */
+	_onMapFiltersChange() {
+		const mapFiltersMenu = querySelectorDeep("#pnx-map-filters-menu");
+		const fMinDate = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-date-from");
+		const fMaxDate = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-date-end");
+		const fTypeFlat = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-type-flat");
+		const fType360 = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-type-360");
+		const fMapTheme = querySelectorDeep("#pnx-map-theme");
+
+		let type = "";
+		if(fType360?.checked && !fTypeFlat?.checked) { type = "equirectangular"; }
+		if(!fType360?.checked && fTypeFlat?.checked) { type = "flat"; }
+
+		let qualityscore = [];
+		if(this.map?._hasQualityScore()) {
+			const fScore = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-qualityscore");
+			qualityscore = (fScore?.grade || "").split(",").map(v => parseInt(v)).filter(v => !isNaN(v));
+			if(qualityscore.length == 5) { qualityscore = []; }
+		}
+
+		const values = {
+			minDate: fMinDate?.value,
+			maxDate: fMaxDate?.value,
+			pic_type: type,
+			theme: fMapTheme?.value,
+			qualityscore,
+		};
+
+		this.map.setFilters(values);
+	}
+}
+
+customElements.define("pnx-viewer", Viewer);

package/src/components/core/index.js

@@ -0,0 +1,11 @@
+/* eslint-disable import/no-unused-modules */
+
+/**
+ * Core graphical components
+ * @module Panoramax:components:core
+ */
+
+export {default as Basic} from "./Basic";
+export {default as CoverageMap} from "./CoverageMap";
+export {default as Editor} from "./Editor";
+export {default as Viewer} from "./Viewer";