@panoramax/web-viewer 4.0.2 → 4.0.3-develop-54221cf0

package/src/components/menus/AnnotationsList.js

@@ -0,0 +1,151 @@
+import { LitElement, html, css, nothing } from "lit";
+import { faSvg, iconify } from "../styles";
+import { fa, moreIcons } from "../../utils/widgets";
+import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight";
+import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
+import "iconify-icon";
+
+/**
+ * Annotations list shows listing of tagged picture areas.
+ * It uses the parent component currently selected picture.
+ * 
+ * @class Panoramax.components.menus.AnnotationsList
+ * @element pnx-annotations-list
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-annotations-list _parent=${viewer} />
+ * ```
+ */
+export default class AnnotationsList extends LitElement {
+	/** @private */
+	static styles = [ faSvg, iconify, css`
+		.annotation { background: var(--white); }
+	` ];
+
+	/** @private */
+	static properties = {
+		_meta: {state: true},
+		_selectedAnnotation: {state: true},
+		_presets: {state: true},
+	};
+
+	constructor() {
+		super();
+		this._selectedAnnotation = null;
+		this._presets = {};
+		moreIcons();
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		this._onPicChange();
+		this._parent?.psv?.addEventListener("picture-loaded", this._onPicChange.bind(this));
+
+		this._parent?.psv?.addEventListener("annotation-click", e => {
+			const aPos = this._meta.properties?.annotations?.findIndex(a => a.id === e.detail.annotationId);
+			if(aPos >= 0) { this._onListItemClick(Object.assign({nb: aPos+1}, this._meta.properties.annotations[aPos])); }
+		});
+
+		this._parent?.psv?.addEventListener("annotations-unfocused", () => {
+			this._onListItemClick(null);
+		});
+	}
+
+	/** @private */
+	_onPicChange() {
+		this._meta = this._parent?.psv?.getPictureMetadata();
+		delete this._prevPsvView;
+		this._selectedAnnotation = null;
+
+		// Load presets for annotations
+		if(this._meta && this._parent?.presetsManager) {
+			this._presets = {};
+			if(this._meta.properties?.annotations?.length > 0) {
+				this._meta.properties.annotations.map(a => this._parent.presetsManager.getPreset(a).then(p => {
+					this._presets[a.id] = p;
+					this.requestUpdate();
+				}));
+			}
+		}
+	}
+
+	/** @private */
+	_onListItemHover(a) {
+		if(a) {
+			// Save position before hover to allow reset after
+			if(!this._prevPsvView) { this._prevPsvView = [this._parent.psv.getZoomLevel(), this._parent.psv.getPosition()]; }
+
+			this._parent.psv.focusOnAnnotation(a.id);
+		}
+		else {
+			this._parent.psv.unfocusAnnotation();
+
+			// Restore previous PSV position
+			if(this._prevPsvView) {
+				this._parent.psv.zoom(this._prevPsvView[0]);
+				this._parent.psv.rotate(this._prevPsvView[1]);
+				delete this._prevPsvView;
+			}
+		}
+	}
+
+	/** @private */
+	_onListItemClick(a) {
+		this._selectedAnnotation = a;
+		this._onListItemHover(a);
+	}
+
+	/** @private */
+	render() {
+		/* eslint-disable indent */
+		if(!this._meta) { return nothing; }
+
+		return this._selectedAnnotation === null
+			? html`<div class="list">
+				${this._meta.properties.annotations.map((a,i) => html`
+					<pnx-list-item
+						title=${
+							this._presets[a.id]?.name
+							|| this._parent?._t.pnx.semantics_features_default_title.replace("{nb}", i+1)
+						}
+						subtitle=${this._parent?._t.pnx.semantics_features_subtitle.replace("{nb}", a.semantics.length)}
+						@click=${() => this._onListItemClick(Object.assign({nb: i+1}, a))}
+						@mouseover=${() => this._onListItemHover(Object.assign({nb: i+1}, a))}
+						@mouseout=${() => this._onListItemHover(null)}
+					>
+						<iconify-icon
+							slot="icon"
+							icon=${this._presets[a.id]?.iconify || "fa6-solid:cube"}
+							style="font-size: 1.5em"
+						></iconify-icon>
+						${fa(faChevronRight, {transform: {size: 24}, attributes: {slot: "action"}})}
+					</pnx-list-item>
+				`)}
+			</div>`
+			: html`<div class="annotation">
+				<pnx-list-item
+					title=${
+						this._presets[this._selectedAnnotation.id]?.name
+						|| this._parent?._t.pnx.semantics_features_default_title.replace("{nb}", this._selectedAnnotation.nb)
+					}
+					@click=${() => this._onListItemClick(null)}
+				>
+					${fa(faArrowLeft, {transform: {size: 24}, attributes: {slot: "icon"}})}
+					<iconify-icon
+						slot="icon"
+						icon=${this._presets[this._selectedAnnotation.id]?.iconify || "fa6-solid:cube"}
+						style="font-size: 1.5em"
+					></iconify-icon>
+				</pnx-list-item>
+				<pnx-semantics-table
+					._t=${this._parent?._t}
+					.source=${this._selectedAnnotation}
+				/>
+			</div>`;
+	}
+}
+
+customElements.define("pnx-annotations-list", AnnotationsList);

package/src/components/menus/PictureLegend.js

@@ -8,7 +8,7 @@ import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
 import { faCalendarAlt } from "@fortawesome/free-solid-svg-icons/faCalendarAlt";
 import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
 import { faShareNodes } from "@fortawesome/free-solid-svg-icons/faShareNodes";
-import { placeholder, panel } from "../styles";
+import { placeholder, panel, hidden } from "../styles";
 import { reverseGeocodingNominatim } from "../../utils/geocoder";
 
 /**
@@ -24,7 +24,7 @@ import { reverseGeocodingNominatim } from "../../utils/geocoder";
  */
 export default class PictureLegend extends LitElement {
 	/** @private */
-	static styles = [placeholder, panel, css`
+	static styles = [placeholder, panel, hidden, css`
 		:host {
 			overflow-y: auto;
 			overflow-x: hidden;
@@ -38,8 +38,6 @@ export default class PictureLegend extends LitElement {
 			pnx-picture-metadata { width: 30vw; }
 		}
 
-		.pnx-hidden { display: none !important; }
-
 		/* Top bar */
 		.headline {
 			display: flex;
@@ -148,6 +146,9 @@ export default class PictureLegend extends LitElement {
 			this._parent.psv.addEventListener("sequence-stopped", () => {
 				this._onPicChange(this._parent.psv.getPictureMetadata());
 			});
+			this._parent.psv.addEventListener("annotation-click", () => {
+				this._expanded = true;
+			});
 		});
 	}
 
@@ -225,7 +226,7 @@ export default class PictureLegend extends LitElement {
 
 				${this._caption.date ? html`<div class="info-block">
 					${fa(faCalendarAlt)}
-					${this._caption.date.toLocaleDateString(undefined, { year: "numeric", month: "long" })}
+					${this._caption.date.toLocaleDateString(this._parent?.lang || window.navigator.language, { year: "numeric", month: "long" })}
 				</div>` : nothing}
 			</div>
 

package/src/components/menus/PictureMetadata.js

@@ -9,7 +9,10 @@ import { faImages } from "@fortawesome/free-solid-svg-icons/faImages";
 import { faScroll } from "@fortawesome/free-solid-svg-icons/faScroll";
 import { faQuestion } from "@fortawesome/free-solid-svg-icons/faQuestion";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
-import { titles, textarea } from "../styles";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
+import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
+import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
+import { faSvg, titles, textarea, hidden } from "../styles";
 import { createWebComp } from "../../utils/widgets";
 import { getGPSPrecision } from "../../utils/picture";
 import {
@@ -31,7 +34,7 @@ const missing = () => fa(faQuestion, {styles: {height: "16px"}});
  */
 export default class PictureMetadata extends LitElement {
 	/** @private */
-	static styles = [ titles, textarea, css`
+	static styles = [ faSvg, titles, textarea, hidden, css`
 		div[slot="content"] {
 			padding: 5px 10px;
 			background-color: #ededed;
@@ -56,20 +59,37 @@ export default class PictureMetadata extends LitElement {
 		.data-block div {
 			font-size: 0.8em;
 		}
+
+		pnx-semantics-table {
+			overflow-x: auto;
+  			display: block;
+		}
 	` ];
 
 	/** @private */
 	static properties = {
 		_meta: {state: true},
+		_semanticsPicShowAll: {state: true},
 	};
 
+	constructor() {
+		super();
+		this._semanticsPicShowAll = false;
+	}
+
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
 
 		this._meta = this._parent?.psv?.getPictureMetadata();
-		this._parent?.psv?.addEventListener("picture-loaded", () => {
-			this._meta = this._parent?.psv?.getPictureMetadata();
+		this._parent?.oncePSVReady?.().then(() => {
+			this._parent.psv.addEventListener("picture-loaded", () => {
+				this._meta = this._parent.psv.getPictureMetadata();
+			});
+			this._parent.psv.addEventListener("annotation-click", () => {
+				const tabs = this.shadowRoot.querySelector("pnx-tabs");
+				if(tabs) { tabs.setAttribute("activeTabIndex", 4); }
+			});
 		});
 	}
 
@@ -99,6 +119,8 @@ export default class PictureMetadata extends LitElement {
 		/* eslint-disable indent */
 		if(!this._meta) { return nothing; }
 
+		const lang = this._parent?.lang || window.navigator.language;
+
 		// Generic information
 		const persOrient = this._meta?.properties?.["pers:interior_orientation"];
 		const makeModel = [persOrient.camera_manufacturer, persOrient.camera_model].filter(v => v).join(" ");
@@ -127,11 +149,11 @@ export default class PictureMetadata extends LitElement {
 			this._meta?.caption?.date && {
 				title: this._parent?._t.pnx.metadata_general_date,
 				content: html`
-					<strong>${new Intl.DateTimeFormat(undefined, {
+					<strong>${new Intl.DateTimeFormat(lang, {
 						timeZone: this._meta.caption.tz,
 						dateStyle: "short"
 					}).format(this._meta.caption.date)}</strong>
-					<br />${new Intl.DateTimeFormat(undefined, {
+					<br />${new Intl.DateTimeFormat(lang, {
 						timeZone: this._meta.caption.tz,
 						hour: "numeric",
 						minute: "numeric",
@@ -205,6 +227,51 @@ export default class PictureMetadata extends LitElement {
 			];
 		}
 
+		// Semantics data
+		const hasSemantics = (
+			(this._meta.properties.semantics || []).length > 0
+			|| (this._meta.properties.annotations || []).length > 0
+		);
+		let semanticsData = [];
+		if(hasSemantics) {
+			// Full list of picture tags
+			semanticsData.push({
+				title: this._parent?._t.pnx.semantics_tags_picture,
+				style: "width: 100%",
+				content: html`${this._meta.properties.semantics?.length > 0
+					? html`
+						<pnx-button
+							kind="outline"
+							size="sm"
+							style="width: 100%"
+							@click=${() => this._semanticsPicShowAll = !this._semanticsPicShowAll}
+						>
+							${this._semanticsPicShowAll ? fa(faChevronUp) : fa(faChevronDown)}
+							${this._semanticsPicShowAll ? this._parent?._t.pnx.semantics_hide_all_tags : this._parent?._t.pnx.semantics_show_all_tags}
+						</pnx-button>
+						<pnx-semantics-table
+							._t=${this._parent?._t}
+							.source=${this._meta.properties}
+							style="margin-top: 5px"
+							class=${this._semanticsPicShowAll ? "":"pnx-hidden"}
+						/>
+					`
+					: this._parent?._t.pnx.semantics_tags_picture_none
+				}`
+			});
+
+			// Annotations (features in picture)
+			semanticsData.push({
+				title: this._parent?._t.pnx.semantics_features,
+				style: "width: 100%",
+				content: html`
+					${this._meta.properties.annotations?.length > 0
+					? html`<pnx-annotations-list ._parent=${this._parent} />`
+					: this._parent?._t.pnx.semantics_features_none}
+				`
+			});
+		}
+
 		// EXIF data
 		const exifData = Object.entries(this._meta.properties.exif)
 			.sort()
@@ -247,8 +314,8 @@ export default class PictureMetadata extends LitElement {
 			this._meta?.caption?.date && {
 				title: this._parent?._t.pnx.metadata_general_date,
 				content: html`
-					<strong>${new Intl.DateTimeFormat(undefined, {timeZone: this._meta.caption.tz, dateStyle: "long"}).format(this._meta.caption.date)}</strong>
-					<br />${new Intl.DateTimeFormat(undefined, {timeZone: this._meta.caption.tz, hour: "numeric",minute:"numeric"}).format(this._meta.caption.date)}
+					<strong>${new Intl.DateTimeFormat(lang, {timeZone: this._meta.caption.tz, dateStyle: "long"}).format(this._meta.caption.date)}</strong>
+					<br />${new Intl.DateTimeFormat(lang, {timeZone: this._meta.caption.tz, hour: "numeric",minute:"numeric"}).format(this._meta.caption.date)}
 				`
 			},
 			// Camera
@@ -327,6 +394,11 @@ export default class PictureMetadata extends LitElement {
 				qualityData
 			) : nothing}
 
+			${hasSemantics ? this._toTab( // Semantics
+				html`${fa(faTags)} ${this._parent?._t.pnx.semantics_title}`,
+				semanticsData
+			) : nothing}
+
 			${this._meta.properties?.exif ? this._toTab( // EXIF
 				html`${fa(faScroll)} ${this._parent?._t.pnx.metadata_exif}`,
 				exifData

package/src/components/menus/index.js

@@ -3,6 +3,7 @@
  * @module Panoramax:components:menus
  */
 
+export {default as AnnotationsList} from "./AnnotationsList";
 export {default as MapFilters} from "./MapFilters";
 export {default as MapLayers} from "./MapLayers";
 export {default as MapBackground} from "./MapBackground";

package/src/components/styles.js

@@ -27,6 +27,11 @@ export const panel = css`
 	}
 `;
 
+// Hidden
+export const hidden = css`
+	.pnx-hidden { display: none !important; }
+`;
+
 // Font Awesome SVG
 export const faSvg = css`
 	.svg-inline--fa {
@@ -442,3 +447,32 @@ export const noprint = css`
 		.pnx-print-hidden { display: none !important; }
 	}
 `;
+
+// Data table
+export const table = css`
+	table {
+		border-collapse: collapse;
+		font-size: 0.9rem;
+		width: 100%;
+		max-width: 100%;
+		font-family: var(--font-family);
+		background: var(--white);
+	}
+
+	th, td {
+		padding: 10px;
+		text-align: left;
+		border-bottom: 1px solid #ddd;
+	}
+
+	th { font-weight: 600; }
+`;
+
+// Iconify icons
+export const iconify = css`
+	iconify-icon {
+		display: inline-block;
+		width: 1em;
+		height: 1em;
+	}
+`;

package/src/components/ui/HashTags.js

@@ -0,0 +1,98 @@
+import { LitElement, html, css, nothing } from "lit";
+import { getHashTags, hasAnnotations } from "../../utils/picture";
+import { fa } from "../../utils/widgets";
+import { faDrawPolygon } from "@fortawesome/free-solid-svg-icons/faDrawPolygon";
+
+/**
+ * HashTags component shows the list of hashtags associated to a picture.
+ * @class Panoramax.components.ui.HashTags
+ * @element pnx-hashtags
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-hashtags ._parent=${viewer} />
+ * ```
+ */
+export default class HashTags extends LitElement {
+	/** @private */
+	static styles = css`
+		div {
+			background: linear-gradient(to bottom left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
+			margin-top: -10px;
+			margin-right: -10px;
+			padding: 5px 10px;
+			border-bottom-left-radius: 10px;
+			font-family: var(--font-family);
+			color: white;
+			font-size: 0.8em;
+		}
+	`;
+
+	/** @private */
+	static properties = {
+		_tags: {state: true},
+		_visible: {state: true},
+		_annotationsToggled: {state: true},
+	};
+
+	constructor() {
+		super();
+		this._tags = [];
+		this._visible = false;
+		this._annotationsToggled = false;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		this._parent.onceReady().then(() => {
+			this._tags = getHashTags(this._parent?.psv?.getPictureMetadata?.());
+
+			// Component visibility : only if seen at least one pic with semantics
+			if(
+				!this._visible && (
+					this._tags.length > 0
+					|| hasAnnotations(this._parent?.psv?.getPictureMetadata?.())
+				)
+			) {
+				this._visible = true;
+				this._parent.psv.toggleAllAnnotations(true);
+			}
+
+			this._parent.psv.addEventListener("picture-loaded", () => {
+				this._tags = getHashTags(this._parent.psv.getPictureMetadata());
+				if(
+					!this._visible && (
+						this._tags.length > 0 ||
+						hasAnnotations(this._parent.psv.getPictureMetadata())
+					)
+				) {
+					this._visible = true;
+					this._parent.psv.toggleAllAnnotations(true);
+				}
+			});
+
+			this._annotationsToggled = this._parent.psv.areAnnotationsVisible() || false;
+			this._parent.psv.addEventListener("annotations-toggled", e => {
+				this._annotationsToggled = e.detail.visible;
+			});
+		});
+	}
+
+	/** @private */
+	render() {
+		return this._visible ? html`<div>
+			${this._tags.join(" ")}
+			<pnx-button
+				kind="outline"
+				style="vertical-align: middle"
+				title=${this._annotationsToggled ? this._parent._t?.pnx.semantics_hide_annotations : this._parent._t?.pnx.semantics_show_annotations}
+				active=${this._annotationsToggled ? "" : nothing}
+				@click=${() => this._parent.psv.toggleAllAnnotations(!this._annotationsToggled)}
+			>${fa(faDrawPolygon)}</pnx-button>
+		</div>` : nothing;
+	}
+}
+
+customElements.define("pnx-hashtags", HashTags);

package/src/components/ui/ListItem.js

@@ -0,0 +1,83 @@
+import { LitElement, html, css } from "lit";
+
+/**
+ * ListItem is a list entry, in a Material Design fashion.
+ * @class Panoramax.components.ui.ListItem
+ * @element pnx-list-item
+ * @slot `icon` The left icon (symbol for this item)
+ * @slot `action` The right icon (symbol for an interactive action)
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-list-item title="My feature" subtitle="It is very cool">
+ *   <img src="..." slot="icon" />
+ *   <img src="..." slot="action" />
+ * </pnx-list-item>
+ * ```
+ */
+export default class ListItem extends LitElement {
+	/** @private */
+	static styles = css`
+		.list-item {
+			display: flex;
+			align-items: center;
+			padding: 8px 16px;
+			cursor: pointer;
+			border-bottom: 1px solid #ddd;
+			font-family: var(--font-family);
+			background: var(--white);
+			min-height: 50px;
+			box-sizing: border-box;
+		}
+		.list-item:hover { background: var(--widget-bg-hover); }
+		.icon {
+			margin-right: 16px;
+			display: flex;
+			align-items: center;
+			gap: 10px;
+		}
+		.action { margin-left: 16px; }
+		.content {
+			flex: 1;
+		}
+		.title {
+			font-weight: 600;
+		}
+		.subtitle {
+			font-size: 0.9em;
+			color: var(--grey-dark);
+		}
+	`;
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.ListItem#
+	 * @type {Object}
+	 * @property {string} title The item title
+	 * @property {string} [subtitle] The item subtitle
+	 */
+	static properties = {
+		title: { type: String },
+		subtitle: { type: String },
+	};
+
+	/** @private */
+	render() {
+		return html`
+			<div class="list-item">
+				<div class="icon">
+					<slot name="icon"></slot>
+				</div>
+				<div class="content">
+					<div class="title">${this.title}</div>
+					<div class="subtitle">${this.subtitle}</div>
+				</div>
+				<div class="action">
+					<slot name="action"></slot>
+				</div>
+			</div>
+		`;
+	}
+}
+
+customElements.define("pnx-list-item", ListItem);