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

package/build/components/menus/SemanticsMetadata.js

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

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

@@ -1,22 +0,0 @@
-/**
- * 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

@@ -1,11 +0,0 @@
-// 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";