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

package/build/components/menus/MapLayers.js

@@ -1,238 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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);