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

package/build/components/menus/MapLayers.js

@@ -0,0 +1,238 @@
+import { LitElement, css, html, nothing } from "lit";
+import { fa, onceParentAvailable } from "../../utils/widgets.js";
+import { faSvg, select, titles } from "../styles.js";
+import { COLORS, GPS_VALUES } from "../../utils/utils.js";
+import { faEarthEurope, faInfoCircle, faPalette } from "@fortawesome/free-solid-svg-icons";
+import { MAP_THEMES_STYLES } from "../../utils/map.js";
+import { DISABLED_LEVEL, initIndoorEqualOnMap } from "../../utils/indoor.js";
+import { BASEMAPS_DEFAULT_IDS } from "../../utils/MapStyleComposer.js";
+
+/**
+ * Map Layers menu allows user to select background and map theme.
+ * @class Panoramax.components.menus.MapLayers
+ * @element pnx-map-layers-menu
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-map-layers-menu _parent=${viewer} />
+ * ```
+ */
+export default class MapLayers extends LitElement {
+	/** @private */
+	static styles = [ faSvg, titles, select, css`
+		.legend {
+			display: flex;
+			flex-wrap: wrap;
+			margin-top: 5px;
+			justify-content: space-evenly;
+		}
+
+		.legend-entry {
+			margin: 10px 8px 5px 0px;
+			line-height: 12px;
+			display: flex;
+			align-items: center;
+			font-size: 1.0em;
+		}
+
+		.legend-color {
+			display: inline-block;
+			width: 15px;
+			height: 15px;
+			border-radius: 3px;
+			margin-right: 5px;
+		}
+
+		.legend-score {
+			justify-content: center;
+			gap: 0;
+		}
+	` ];
+
+	/** @private */
+	static properties = {
+		theme: {state: true},
+	};
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		onceParentAvailable(this).then(() => this._parent?.onceMapReady?.().then(() => {
+			this.theme = this._parent.mapStyleComposer.panoramaxTheme;
+			this._parent.mapStyleComposer.addEventListener("theme-changed", e => this.theme = e.detail.theme);
+			this._parent.mapStyleComposer.addEventListener("panoramax-changed", () => this.requestUpdate()); // Don't bind(this) on requestUpdate, doesnt work
+			this._parent.mapStyleComposer.addEventListener("basemap-changed", () => this.requestUpdate());
+			this._parent.map.indoorEqual?.on("levelschange", () => this.requestUpdate());
+			this._parent.map.indoorEqual?.on("levelchange", () => this.requestUpdate());
+		}));
+	}
+
+	/** @private */
+	_onIndoorSwitchChange(e) {
+		if(this._parent?.map?.indoorEqual) {
+			this._parent.map.indoorEqual.setLevel(e.target.checked ? "0" : DISABLED_LEVEL);
+		}
+		else {
+			initIndoorEqualOnMap(this._parent.map, true);
+		}
+	}
+
+	/** @private */
+	_onThemeSelect(e) {
+		this.theme = e.target.value;
+		this._parent?.mapStyleComposer.setPanoramaxTheme(this.theme);
+	}
+
+	/** @private */
+	_onBgChange(e) {
+		this._parent?.mapStyleComposer.switchBasemap(e.target.value || "streets");
+	}
+
+	/** @private */
+	render() {
+		const parts = [];
+		const hasIndoor = this._parent?.map?.indoorEqual || this._parent?.map?._options?.indoor?.visible === false;
+
+		// Background selector
+		if(this._parent?.mapStyleComposer?.hasManyBasemaps?.()) {
+			parts.push(html`
+				<h4>${fa(faEarthEurope)} ${this._parent?._t.pnx.map_background}</h4>
+			`);
+
+			if(this._parent.mapStyleComposer.hasStreetsAerialBasemaps()) {
+				parts.push(html`
+					<pnx-map-background ._parent=${this._parent} style="margin-bottom: 10px"></pnx-map-background>
+				`);
+			}
+			if(this._parent.mapStyleComposer.hasComplementaryBasemaps()) {
+				const defaultOpt = html`
+					<option value="" .selected=${BASEMAPS_DEFAULT_IDS.includes(this._parent.mapStyleComposer.basemap)}>
+						${this._parent.mapStyleComposer.hasStreetsAerialBasemaps()
+							? this._parent?._t.pnx.map_background_more
+							: this._parent?._t.pnx.map_background_default
+						}
+					</option>
+				`;
+				const layers = Object
+					.entries(this._parent.mapStyleComposer.layerRanges.basemaps)
+					.filter(([bid,]) => !BASEMAPS_DEFAULT_IDS.includes(bid))
+					.map(([bid, b]) => html`
+						<option value="${bid}" .selected=${this._parent.mapStyleComposer.basemap === bid}>
+							${b.layers[0]?.metadata?.name || bid}
+						</option>
+					`);
+				parts.push(html`
+					<select id="pnx-map-bg-more" style="width: 100%;" @change=${this._onBgChange}>
+						${defaultOpt}
+						${layers}
+					</select>
+				`);
+			}
+		}
+
+		// Level selector for indoor=
+		if(hasIndoor) {
+			const ieq = this._parent.map.indoorEqual;
+			parts.push(html`
+				<pnx-switch
+					.checked=${ieq && ieq.level !== DISABLED_LEVEL}
+					.disabled=${ieq && ieq.levels.length === 0}
+					@change=${this._onIndoorSwitchChange.bind(this)}
+					style="display: block; margin: 15px 0;"
+					name="pnx-level-switch"
+				>
+					${this._parent?._t.pnx.indoor_switch}
+				</pnx-switch>
+			`);
+		}
+
+		// Map theme selector
+		parts.push(html`
+			<h4>${fa(faPalette)} ${this._parent?._t.pnx.map_theme}</h4>
+			<select id="pnx-map-theme" style="width: 100%;" @change=${this._onThemeSelect}>
+				<option value=${MAP_THEMES_STYLES.default.id} .selected=${this.theme === MAP_THEMES_STYLES.default.id}>${this._parent?._t.pnx.map_theme_default}</option>
+				<option value=${MAP_THEMES_STYLES.age.id} .selected=${this.theme === MAP_THEMES_STYLES.age.id}>${this._parent?._t.pnx.map_theme_age}</option>
+				<option value=${MAP_THEMES_STYLES.type.id} .selected=${this.theme === MAP_THEMES_STYLES.type.id}>${this._parent?._t.pnx.map_theme_type}</option>
+				${this._parent?.map?._hasQualityScore?.() && html`
+					<option value=${MAP_THEMES_STYLES.score.id} .selected=${this.theme === MAP_THEMES_STYLES.score.id}>${this._parent?._t.pnx.map_theme_score}</option>
+					<option value=${MAP_THEMES_STYLES.gps.id} .selected=${this.theme === MAP_THEMES_STYLES.gps.id}>${this._parent?._t.pnx.map_theme_gps}</option>
+				`}
+			</select>
+		`);
+
+		// Map legend
+		parts.push(html`<div class="legend">
+			${this.theme === MAP_THEMES_STYLES.age.id ? html`
+				<div>
+					<div class="legend-entry">
+						<span class="legend-color" style="background-color: ${COLORS["PALETTE_4"]}"></span>
+						${this._parent?._t.pnx["map_theme_age_4"]}
+					</div>
+					<div class="legend-entry">
+						<span class="legend-color" style="background-color: ${COLORS["PALETTE_3"]}"></span>
+						${this._parent?._t.pnx["map_theme_age_3"]}
+					</div>
+				</div>
+				<div>
+					<div class="legend-entry">
+						<span class="legend-color" style="background-color: ${COLORS["PALETTE_2"]}"></span>
+						${this._parent?._t.pnx["map_theme_age_2"]}
+					</div>
+					<div class="legend-entry">
+						<span class="legend-color" style="background-color: ${COLORS["PALETTE_1"]}"></span>
+						${this._parent?._t.pnx["map_theme_age_1"]}
+					</div>
+				</div>` : nothing}
+
+			${this.theme === MAP_THEMES_STYLES.type.id ? html`
+			 	<div class="legend-entry">
+			 		<span class="legend-color" style="background-color: ${COLORS.QUALI_1}"></span>
+			 		${this._parent?._t.pnx.picture_360}
+			 	</div>
+			 	<div class="legend-entry">
+			 		<span class="legend-color" style="background-color: ${COLORS.QUALI_2}"></span>
+			 		${this._parent?._t.pnx.picture_flat}
+			 	</div>` : nothing}
+
+			${this.theme === MAP_THEMES_STYLES.score.id ? html`<div>
+				<pnx-quality-score></pnx-quality-score>
+				<pnx-button
+					title="${this._parent?._t.pnx.metadata_quality_help}"
+					kind="superinline"
+					@click=${() => this._parent?._showQualityScoreDoc()}
+				>
+					${fa(faInfoCircle)}
+				</pnx-button></div>` : nothing}
+
+			${this.theme === MAP_THEMES_STYLES.gps.id ? html`
+				<div>
+					<div class="legend-entry">
+						<span class="legend-color" style="background-color: ${GPS_VALUES[0].color}"></span>
+						${GPS_VALUES[0].label}
+					</div>
+					<div class="legend-entry">
+						<span class="legend-color" style="background-color: ${GPS_VALUES[2].color}"></span>
+						${GPS_VALUES[2].label}
+					</div>
+					<div class="legend-entry">
+						<span class="legend-color" style="background-color: ${GPS_VALUES[4].color}"></span>
+						${GPS_VALUES[4].label}
+					</div>
+				</div>
+				<div>
+					<div class="legend-entry">
+						<span class="legend-color" style="background-color: ${GPS_VALUES[1].color}"></span>
+						${GPS_VALUES[1].label}
+					</div>
+					<div class="legend-entry">
+						<span class="legend-color" style="background-color: ${GPS_VALUES[3].color}"></span>
+						${GPS_VALUES[3].label}
+					</div>
+			</div>` : nothing}
+		</div>`);
+
+		return parts;
+	}
+}
+
+customElements.define("pnx-map-layers-menu", MapLayers);

package/build/components/menus/MapLegend.js

@@ -0,0 +1,68 @@
+import {LitElement, css, html, nothing} from "lit";
+import {onceParentAvailable} from "../../utils/widgets.js";
+
+/**
+ * Map legend displays information about map sources.
+ * @class Panoramax.components.menus.MapLegend
+ * @element pnx-map-legend
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-map-legend ._parent=${viewer} />
+ * ```
+ */
+export default class MapLegend extends LitElement {
+	/** @private */
+	static styles = css`
+		:host {
+			font-size: 0.7em;
+		}
+		small {
+			font-size: 1em;
+		}
+		.maplibregl-ctrl-attrib-inner {
+			display: inline-block;
+		}
+	`;
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.menus.MapLegend#
+	 * @type {Object}
+	 * @property {boolean} [light=false] Lighter version (for iframes)
+	 */
+	static properties = {
+		light: {type: Boolean},
+	};
+
+	constructor() {
+		super();
+		this.light = false;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		onceParentAvailable(this).then(() => this.requestUpdate());
+		onceParentAvailable(this).then(() => this._parent.onceMapReady?.().then(() => {
+			this._parent.map.on("styledata", () => this.requestUpdate());
+			this.requestUpdate();
+		}));
+	}
+
+	/** @private */
+	render() {
+		const mapAttrib = this._parent?.map?._attribution?._innerContainer;
+		const mapLabelParts = this._parent?._t.map.map_data.split("{m}");
+
+		return this.light ?
+			(mapAttrib && mapAttrib.innerHTML.length > 0 ? mapAttrib : nothing)
+			: html`
+				${mapAttrib && mapAttrib.innerHTML.length > 0
+					? html`${mapLabelParts.shift()}${mapAttrib}${mapLabelParts.shift()}`
+					: nothing}
+			`;
+	}
+}
+
+customElements.define("pnx-map-legend", MapLegend);

package/build/components/menus/MiniPictureLegend.js

@@ -0,0 +1,73 @@
+import { LitElement, css, html, nothing } from "lit";
+import { onceParentAvailable } from "../../utils/widgets.js";
+import { panel } from "../styles.js";
+
+/**
+ * Mini picture legend shows info about picture capture date, when seen in mini component of viewer.
+ * @class Panoramax.components.menus.MiniPictureLegend
+ * @element pnx-mini-picture-legend
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-mini-picture-legend ._parent=${viewer} />
+ * ```
+ */
+export default class MiniPictureLegend extends LitElement {
+	/** @private */
+	static styles = [panel, css`
+		.pnx-panel {
+			bottom: 0;
+			right: 0;
+			width: unset;
+			min-width: unset;
+			border-radius: 10px;
+			border-top-right-radius: 0;
+			border-bottom-left-radius: 0;
+			border-right: none;
+			border-bottom: none;
+			padding: 2px 5px;
+			font-size: 0.7em;
+		}
+	`];
+
+	/** @private */
+	static properties = {
+		_caption: {state: true},
+	};
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		onceParentAvailable(this)
+			.then(() => this._parent.onceReady())
+			.then(() => {
+				this._onPicChange(this._parent.psv.getPictureMetadata());
+				this._parent.psv.addEventListener("picture-loaded", () => {
+					this._onPicChange(this._parent.psv.getPictureMetadata());
+				});
+				this._parent.psv.addEventListener("sequence-stopped", () => {
+					this._onPicChange(this._parent.psv.getPictureMetadata());
+				});
+			});
+	}
+
+	/** @private */
+	_onPicChange(picMeta) {
+		this._caption = picMeta?.caption;
+	}
+
+	/** @private */
+	render() {
+		return this._caption?.date ?
+			html`<div class="pnx-panel">${
+				this._caption.date.toLocaleDateString(
+					this._parent?.lang || window.navigator.language,
+					{ year: "numeric", month: "long", day: "numeric" }
+				)
+			}</div>`
+			: nothing;
+	}
+}
+
+customElements.define("pnx-mini-picture-legend", MiniPictureLegend);