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

package/build/components/menus/SemanticsMetadata.js

@@ -0,0 +1,368 @@
+import { LitElement, css, html, nothing } from "lit";
+import { fa, onceParentAvailable } from "../../utils/widgets.js";
+import {
+	faEraser, faFloppyDisk, faInfoCircle, faPlusSquare, faTimes
+} from "@fortawesome/free-solid-svg-icons";
+import { dataBlocks, hidden } from "../styles.js";
+import { getUserAccount } from "../../utils/utils.js";
+
+/**
+ * Semantics metadata displays detailed info about semantic attributes of a single picture.
+ * @class Panoramax.components.menus.SemanticsMetadata
+ * @element pnx-semantics-metadata
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-semantics-metadata ._parent=${viewer}></pnx-semantics-metadata>
+ * ```
+ */
+export default class SemanticsMetadata extends LitElement {
+	/** @private */
+	static styles = [ hidden, dataBlocks, css`
+		.top-btns, pnx-semantics-list {
+			font-size: 0.8em;
+		}
+		.top-btns {
+			display: flex;
+			margin: 5px 0;
+			gap: 5px;
+		}
+		.top-btns > * {
+			overflow: hidden;
+		}
+		.top-btns > *::part(btn) {
+			height: unset;
+		}
+		.data-block {
+			width: 100%;
+		}
+		.data-block h5 {
+			justify-content: space-between;
+		}
+	` ];
+
+	/** @private */
+	static properties = {
+		_meta: {state: true},
+		_prevPSVPicNav: {state: true},
+		_authUrl: {state: true},
+		_showLinks: {state: true},
+
+		_addTag: {state: true},
+		_editTag: {state: true},
+		_addTagGeom: {state: true},
+		_editTagSem: {state: true},
+	};
+
+	constructor() {
+		super();
+		this._meta = {};
+		this._prevPSVPicNav = null;
+		this._authUrl = null;
+		this._showLinks = true;
+
+		this._addTag = false;
+		this._editTag = null;
+		this._addTagGeom = null;
+		this._editTagSem = null;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		onceParentAvailable(this).then(() => {
+			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-focused", () => {
+					const tabs = this.shadowRoot.querySelector("pnx-tabs");
+					if(tabs) { tabs.setAttribute("activeTabIndex", 4); }
+				});
+			});
+
+			this._parent.getAPI().getAuthURL().then(res => this._authUrl = res);
+		});
+	}
+
+	/** @private */
+	_blockPicChange(block) {
+		this._parent?.legend?.renderRoot.querySelector("pnx-picture-legend")?.blockOnEditing(block);
+		if(this._parent?.mini) { this._parent.mini.style.display = block ? "none" : null; }
+		const answ = this._parent.renderRoot.querySelector("pnx-annotations-switch");
+		if(answ) { answ.style.display = block ? "none": null; }
+
+		if(block) {
+			this._prevPSVPicNav = this._parent.psv.getPicturesNavigation();
+			this._parent.psv.setPicturesNavigation("pic");
+			this._parent._disableKeyboard();
+			window.addEventListener("beforeunload", this._onBrowserQuit);
+		}
+		else {
+			this._parent.psv.setPicturesNavigation(this._prevPSVPicNav);
+			this._parent._enableKeyboard();
+			window.removeEventListener("beforeunload", this._onBrowserQuit);
+		}
+	}
+
+	/** @private */
+	_onBrowserQuit(e) {
+		e.preventDefault();
+		e.returnValue = true;
+	}
+
+	/** @private */
+	_checkCanEdit() {
+		const isFromLocalInstance = !this._meta.origInstance || this._parent?.api?._endpoint.startsWith(this._meta.origInstance.href);
+		if(isFromLocalInstance && getUserAccount() !== null) {
+			return true;
+		}
+		else {
+			if(!isFromLocalInstance && confirm((this._parent?._t.pnx.semantics_login_needed || "").replace("{n}", this._meta.origInstance.instance_name || this._meta.origInstance.href))) {
+				window.location.href = this._meta.origInstance.href + window.location.search.replace(/&?nav=pic/, "");
+			}
+			else if(isFromLocalInstance && confirm((this._parent?._t.pnx.semantics_login_needed || "").replace("{n}", this._parent.getAPI()._metadata.name))) {
+				window.location.href = this._authUrl.replace("<CBURL>", encodeURIComponent(window.location.href));
+			}
+			else {
+				return false;
+			}
+		}
+	}
+
+	/** @private */
+	_startAddTag() {
+		if(!this._checkCanEdit()) { return; }
+
+		this._blockPicChange(true);
+		this._addTag = true;
+		this._editTag = false;
+		this._addTagGeom = null;
+		this._editTagSem = null;
+
+		this._addTagGeomListener = e => {
+			this.renderRoot.querySelector("#pnx-sem-editor")?.forceInput();
+			this._addTagGeom = e.detail.shape;
+		};
+		this._parent.psv.addEventListener("annotation-drawn", this._addTagGeomListener);
+		this._parent.psv.startDrawAnnotation();
+	}
+
+	/** @private */
+	_onTagSemChange(e) {
+		this._editTagSem = e.detail;
+	}
+
+	/** @private */
+	_onSaveTag() {
+		const field = this.renderRoot.querySelector("#pnx-sem-editor");
+
+		// Check field validity
+		if(!field || !field.checkValidity() || !this._editTagSem || !this._editTagSem.delta || this._editTagSem.delta.length === 0) {
+			field.reportValidity();
+			return;
+		}
+
+		// Edit an annotation
+		if(this._editTag?.type === "annotation") {
+			this._parent?.api.editPictureAnnotation(this._editTag.annotation.id, this._editTagSem.delta).then(newAnnot => {
+				const annotPos = this._meta.properties.annotations.findIndex(a => a.id === newAnnot.id);
+				this._meta.properties.annotations[annotPos] = newAnnot;
+				this._onCancelEditTag(newAnnot);
+			}).catch(e => {
+				console.error("Can't send annotation", e);
+				this._onCancelEditTag(this._editTag.annotation);
+				alert(this._parent?._t.pnx.semantics_send_fail);
+			});
+		}
+		// Create annotation if a geom exists
+		else if(this._addTag && this._addTagGeom) {
+			this._parent.psv.fixDrawAnnotation();
+			this._parent?.api.createPictureAnnotation(this._meta, this._addTagGeom, this._editTagSem.delta).then(newAnnot => {
+				this._meta.properties.annotations.push(newAnnot);
+				this._onCancelEditTag(newAnnot, true);
+			}).catch(e => {
+				console.error("Can't send annotation", e);
+				alert(this._parent?._t.pnx.semantics_send_fail);
+				this._onCancelEditTag();
+			});
+		}
+		// Create picture tag or edit a tag group
+		else if(this._addTag || (this._editTag && this._editTag.type !== "annotation")) {
+			this._parent?.api.sendPictureSemantics(this._meta, this._editTagSem.delta).then(newPic => {
+				this._meta.properties.semantics = newPic.properties.semantics;
+				this._onCancelEditTag(this._editTagSem.delta);
+			}).catch(e => {
+				alert(this._parent?._t.pnx.semantics_send_fail);
+				console.error("Can't send semantics", e);
+				this._onCancelEditTag();
+			});
+		}
+	}
+
+	/** @private */
+	_onEraseDrawnAnnotation() {
+		this._parent.psv.stopDrawAnnotation();
+		this._addTagGeom = null;
+		this._parent.psv.startDrawAnnotation();
+	}
+
+	/** @private */
+	_onEditTag(e) {
+		if(!this._checkCanEdit()) { return; }
+
+		this._blockPicChange(true);
+		this._addTag = false;
+		this._addTagGeom = null;
+		this._editTagSem = e.detail.item?.type === "annotation" ? { semantics: e.detail.item.annotation.semantics } : e.detail.item.tagGroup;
+		this._editTag = e.detail.item;
+
+		if(e.detail.item?.type === "annotation") {
+			this._parent.psv.focusOnAnnotation(e.detail.item.annotation.id, true);
+		}
+	}
+
+	/** @private */
+	_onCancelEditTag(item = null, skipStopDraw = false) {
+		// Force hiding of report status on tag editor
+		this.renderRoot.querySelector("#pnx-sem-editor").reset();
+
+		this._addTag = false;
+		this._addTagGeom = null;
+		this._editTag = null;
+		if(!skipStopDraw) { this._parent.psv.stopDrawAnnotation(); }
+		this._blockPicChange(false);
+
+		// Select back item in list
+		this.getUpdateComplete().then(() => {
+			const list = this.renderRoot.querySelector("#pnx-sem-list");
+			if(item && list) {
+				if(item.id) { list.showAnnotation(item.id); }
+				else { list.showTagsGroup(item); }
+			}
+		});
+	}
+
+	/** @private */
+	_onDeleteTag(e) {
+		if(!this._checkCanEdit()) { return; }
+
+		if(confirm(this._parent?._t.pnx.semantics_delete_annotation_confirm)) {
+			const item = e.detail.item;
+			// Annotation deleting
+			if(item?.type === "annotation") {
+				this._parent?.api.deletePictureAnnotation(item.annotation.id).then(() => {
+					// Remove from current metadata
+					const newMeta = Object.assign({}, this._meta);
+					newMeta.properties.annotations = this._meta.properties.annotations.filter(a => a.id != item.annotation.id);
+					this._meta = newMeta;
+
+					// Remove from PSV
+					this._parent.psv.toggleAllAnnotations(true);
+
+					// Remove from annotations list
+					this.renderRoot.querySelector("pnx-semantics-list")?._onPicChange();
+				}).catch(e => {
+					console.error("Can't send annotation", e);
+					alert(this._parent?._t.pnx.semantics_send_fail);
+				});
+			}
+			// Tag group deletion
+			else {
+				const semDiff = item.tagGroup.semantics.map(t => Object.assign({action: "delete"}, t));
+				this._parent?.api.sendPictureSemantics(this._meta, semDiff).then(newPic => {
+					this._meta.properties.semantics = newPic.properties.semantics;
+					this.renderRoot.querySelector("pnx-semantics-list")?._onPicChange();
+				}).catch(e => {
+					alert(this._parent?._t.pnx.semantics_send_fail);
+					console.error("Can't send semantics", e);
+				});
+			}
+		}
+	}
+
+	/** @private */
+	render() {
+		if(!this._meta?.properties) { return; }
+
+		const canEdit = !this._meta.origInstance && (this._authUrl || getUserAccount() !== null);
+
+		return html`
+			${(this._addTag || this._editTag) ? html`
+				<div class="data-block">
+					<h5>
+						${this._addTag ? this._parent?._t.pnx.semantics_add_annotation : this._parent?._t.pnx.semantics_edit}
+
+						<pnx-button-group>
+							<pnx-button
+								kind="fullsuccess"
+								style="margin-right: 3px"
+								title=${this._parent?._t.pnx.semantics_save}
+								@click=${this._onSaveTag}
+							>
+								${fa(faFloppyDisk)}
+							</pnx-button>
+							<pnx-button
+								kind="fullwarn"
+								title=${this._parent?._t.pnx.semantics_undo}
+								@click=${() => this._onCancelEditTag(this._editTag?.annotation || this._editTag)}
+							>
+								${fa(faTimes)}
+							</pnx-button>
+						</pnx-button-group>
+					</h5>
+					<div>
+						${this._addTag ? this._parent?._t.pnx.semantics_draw_annotation : nothing}
+						${this._addTag && this._addTagGeom ? html`<pnx-button
+								kind="full"
+								style="margin-top: 5px; width: 100%"
+								@click=${this._onEraseDrawnAnnotation}
+							>
+							${fa(faEraser)} ${this._parent?._t.pnx.semantics_erase_annotation}
+						</pnx-button>` : nothing}
+
+						<pnx-semantics-editor
+							id="pnx-sem-editor"
+							style="display: block; margin-top: 5px"
+							.semantics=${this._editTagSem?.semantics || []}
+							._t=${this._parent._t}
+							@change=${this._onTagSemChange}
+						></pnx-semantics-editor>
+					</div>
+				</div>
+			` : html`
+				${this._showLinks ? html `
+					<div class="top-btns">
+						<pnx-button
+							kind="full"
+							size="md"
+							style="flex: 2 1"
+							@click=${this._startAddTag}
+						>
+							${fa(faPlusSquare)} ${this._parent?._t.pnx.semantics_add_annotation}
+						</pnx-button>
+						<pnx-button
+							kind="full"
+							size="md"
+							style="flex: 1 1"
+							@click=${() => this._parent?._showSemanticsDoc()}
+						>${fa(faInfoCircle)} ${this._parent?._t.pnx.semantics_doc}</pnx-button>
+					</div>
+				` : nothing}
+
+				<pnx-semantics-list
+					id="pnx-sem-list"
+					.editable=${canEdit}
+					@select=${e => this._showLinks = e.detail.item == null}
+					@edit-click=${this._onEditTag}
+					@delete-click=${this._onDeleteTag}
+					._parent=${this._parent}
+				/>
+			`}
+		`;
+	}
+}
+
+customElements.define("pnx-semantics-metadata", SemanticsMetadata);

package/build/components/menus/Share.js

@@ -0,0 +1,105 @@
+import { LitElement, css, html } from "lit";
+import { fa, onceParentAvailable } from "../../utils/widgets.js";
+import { faSvg, input, textarea, titles } from "../styles.js";
+import {
+	faCircleInfo, faLink, faMap, faShareAlt
+} from "@fortawesome/free-solid-svg-icons";
+
+/**
+ * Share Menu displays links for quick picture sharing.
+ * @class Panoramax.components.menus.ShareMenu
+ * @element pnx-share-menu
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-share-menu ._parent=${viewer} />
+ * ```
+ */
+export default class ShareMenu extends LitElement {
+	/** @private */
+	static styles = [ faSvg, input, textarea, titles, css`
+		div[slot="content"] {
+			margin-top: 10px;
+		}
+		.links {
+			display: flex;
+			gap: 5px;
+		}
+		.embed {
+			display: flex;
+			gap: 5px;
+			align-items: center;
+			flex-direction: column;
+		}
+	` ];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.menus.ShareMenu#
+	 * @type {Object}
+	 * @property {string} [base-url] Override the default base URL (current page)
+	 */
+	static properties = {
+		_url: {state: true},
+		"base-url": {type: String},
+	};
+
+	constructor() {
+		super();
+		this._onUrlChange();
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		onceParentAvailable(this).then(() => this._parent.onceReady()).then(() => {
+			this._onUrlChange();
+			this._parent.urlHandler.addEventListener("url-changed", this._onUrlChange.bind(this));
+		});
+	}
+
+	/** @private */
+	_onUrlChange() {
+		const baseUrl = (this["base-url"] || window.location.href).replace(/\/$/, "");
+		this._url = this._parent?.urlHandler?.nextShortLink(baseUrl) || baseUrl;
+	}
+
+	/** @private */
+	render() {
+		const iframe = `<iframe src="${this._url}" style="border: none; width: 500px; height: 300px"></iframe>`;
+
+		return html`
+			<h4>${fa(faShareAlt)} ${this._parent?._t.pnx.share}</h4>
+			<pnx-tabs>
+				<h4 slot="title">${fa(faLink)} ${this._parent?._t.pnx.share_page}</h4>
+				<div slot="content">
+					<div class="links">
+						<input type="text" readonly value=${this._url} style="flex: 2" />
+						<pnx-copy-button ._t=${this._parent?._t} text=${this._url}></pnx-copy-button>
+					</div>
+				</div>
+
+				<h4 slot="title">${fa(faMap)} ${this._parent?._t.pnx.share_embed}</h4>
+				<div slot="content">
+					<div class="embed">
+						<pnx-link-button
+							href="https://docs.panoramax.fr/web-viewer/03_URL_settings/"
+							target="_blank"
+							kind="superinline"
+							size="sm"
+						>
+							${fa(faCircleInfo)} ${this._parent?._t.pnx.share_embed_docs}
+						</pnx-link-button>
+						<textarea readonly .value=${iframe}></textarea>
+						<pnx-copy-button
+							._t=${this._parent?._t}
+							text=${iframe}
+							style="width: 100%"
+						></pnx-copy-button>
+					</div>
+				</div>
+			</pnx-tabs>`;
+	}
+}
+
+customElements.define("pnx-share-menu", ShareMenu);

package/build/components/menus/index.js

@@ -0,0 +1,22 @@
+/**
+ * Complex menus components
+ * @module Panoramax:components:menus
+ */
+
+export {default as LocationPrecisionDoc} from "./LocationPrecisionDoc.js";
+export {default as MapBackground} from "./MapBackground.js";
+export {default as MapFilters} from "./MapFilters.js";
+export {default as MapLayers} from "./MapLayers.js";
+export {default as MapLegend} from "./MapLegend.js";
+export {default as MiniPictureLegend} from "./MiniPictureLegend.js";
+export {default as PictureLegend} from "./PictureLegend.js";
+export {default as PictureMetadata} from "./PictureMetadata.js";
+export {default as PlayerOptions} from "./PlayerOptions.js";
+export {default as QualityScoreDoc} from "./QualityScoreDoc.js";
+export {default as ReportForm} from "./ReportForm.js";
+export {default as SemanticsDoc} from "./SemanticsDoc.js";
+export {default as SemanticsDownload} from "./SemanticsDownload.js";
+export {default as SemanticsFilters} from "./SemanticsFilters.js";
+export {default as SemanticsList} from "./SemanticsList.js";
+export {default as SemanticsMetadata} from "./SemanticsMetadata.js";
+export {default as Share} from "./Share.js";

package/build/components/menus/index_photoviewer.js

@@ -0,0 +1,11 @@
+// Lightweight export for PhotoViewer
+export {default as PictureLegend} from "./PictureLegend.js";
+export {default as PictureMetadata} from "./PictureMetadata.js";
+export {default as PlayerOptions} from "./PlayerOptions.js";
+export {default as QualityScoreDoc} from "./QualityScoreDoc.js";
+export {default as ReportForm} from "./ReportForm.js";
+export {default as SemanticsDoc} from "./SemanticsDoc.js";
+export {default as SemanticsDownload} from "./SemanticsDownload.js";
+export {default as SemanticsList} from "./SemanticsList.js";
+export {default as SemanticsMetadata} from "./SemanticsMetadata.js";
+export {default as Share} from "./Share.js";