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

package/build/components/ui/SearchBar.js

@@ -0,0 +1,374 @@
+import { LitElement, css, html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { map } from "lit/directives/map.js";
+import { fa, listenForMenuClosure } from "../../utils/widgets.js";
+import { faSvg } from "../styles.js";
+import {
+	faCircleExclamation, faCircleNotch, faMagnifyingGlass, faXmark
+} from "@fortawesome/free-solid-svg-icons";
+
+
+/**
+ * Search Bar Element displays an interactive search widget.
+ * @class Panoramax.components.ui.SearchBar
+ * @element pnx-search-bar
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @fires Panoramax.components.ui.SearchBar#result
+ * @example
+ * ```html
+ * <pnx-search-bar
+ *   id="my-search-bar"
+ *   placeholder="Search something..."
+ *   .searcher=${mysearchfct}
+ *   ._parent=${viewer}
+ *   reduceable="false"
+ *   reduced="false"
+ *   size="xxl" @result=${e => console.log(e.detail)}
+ * >
+ *   <!-- Optional icon for display on left-side of search bar -->
+ * </pnx-search-bar>
+ * ```
+ */
+export default class SearchBar extends LitElement {
+	/** @private */
+	static styles = [ faSvg, css`
+		/* Container */
+		.sb {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 5px;
+			border: 1px solid var(--widget-border-div);
+			border-radius: 5px;
+			background-color: var(--widget-bg);
+			color: var(--widget-font);
+			height: 30px;
+			border-radius: 20px;
+			position: relative;
+			padding: 0 0 0 10px;
+			width: fit-content;
+			max-width: 100%;
+			box-sizing: border-box;
+			font-family: var(--font-family);
+		}
+		.sb.sb-xxl {
+			height: 40px;
+			line-height: 40px;
+		}
+		.sb.sb-reduceable {
+			width: 360px;
+		}
+		.sb.sb-reduceable.sb-reduced {
+			width: fit-content;
+			padding: 0;
+			gap: 0;
+		}
+
+		/* Text field */
+		.sb input {
+			background: none;
+			border: none !important;
+			outline: none;
+			height: 20px;
+			width: 100%;
+			font-family: var(--font-family);
+		}
+		.sb.sb-xxl input {
+			font-size: 1.1em;
+		}
+		.sb.sb-reduceable.sb-reduced input {
+			display: none;
+		}
+
+		/* Status icon */
+		.sb-icon {
+			cursor: pointer;
+			height: 30px;
+			line-height: 30px;
+			width: 30px;
+			min-width: 30px;
+			text-align: center;
+		}
+		.sb.sb-xxl .sb-icon {
+			height: 40px;
+			line-height: 40px;
+			width: 40px;
+			min-width: 40px;
+		}
+		.sb-icon svg {
+			pointer-events: none;
+			width: 14px;
+			height: 14px;
+		}
+
+		/* Search results */
+		.sb-results {
+			position: absolute;
+			top: 35px;
+			list-style: none;
+			margin: 0;
+			padding: 0;
+			max-width: calc(100% - 20px);
+			border: 1px solid var(--widget-border-div);
+			border-radius: 10px;
+			background-color: var(--widget-bg);
+			color: var(--widget-font);
+			z-index: 130;
+			font-size: 1.05em;
+  			line-height: normal;
+			font-family: var(--font-family);
+			max-height: 50vh;
+			overflow-y: auto;
+		}
+		.sb.sb-xxl .sb-results {
+			top: 45px;
+		}
+		.sb-result,
+		.sb-empty {
+			display: block;
+			padding: 5px 15px;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			cursor: pointer;
+			border-radius: 0;
+		}
+		.sb-result:hover {
+			background-color: var(--widget-bg-hover);
+		}
+		.sb-result:first-child {
+			border-top-right-radius: 10px;
+			border-top-left-radius: 10px;
+			padding-top: 15px;
+		}
+		.sb-result:last-child {
+			border-bottom-right-radius: 10px;
+			border-bottom-left-radius: 10px;
+			padding-bottom: 15px;
+		}
+	` ];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.SearchBar#
+	 * @type {Object}
+	 * @property {string} [id] The ID attribute set on component and prefix for input as well
+	 * @property {string} [placeholder] Default text to display on empty field
+	 * @property {boolean} [reduceable=false] Can the search bar be collapsed (for mobile view)
+	 * @property {boolean} [reduced=false] Is the search bar currently collapsed ?
+	 * @property {string} [value] The default input value
+	 * @property {string} [size=md] The component sizing (md, xxl)
+	 * @property {function} [searcher] Search callback, function that takes as parameter the input text value, and resolves on list of results ({title, subtitle} and any other data you'd like to get on validation)
+	 * @property {boolean} [no-menu-closure=false] Set to true to ignore menu closure events
+	 */
+	static properties = {
+		id: {type: String},
+		placeholder: {type: String},
+		reduceable: {type: Boolean, reflect: true},
+		reduced: {type: Boolean, reflect: true},
+		value: {type: String},
+		size: {type: String},
+		_icon: {state: true},
+		_results: {state: true},
+		searcher: {type: Function},
+		"no-menu-closure": {type: Boolean},
+	};
+
+	constructor() {
+		super();
+
+		// State properties
+		this.reduceable = false;
+		this.reduced = false;
+		this.placeholder = nothing;
+		this.size = "md";
+		this._icon = "search";
+		this._results = null;
+		this["no-menu-closure"] = false;
+
+		// Other properties
+		this._throttler = null;
+		delete this._lastSearch;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		if(!this["no-menu-closure"]) { listenForMenuClosure(this, this.reset.bind(this)); }
+	}
+
+	/** @private */
+	attributeChangedCallback(name, _old, value) {
+		super.attributeChangedCallback(name, _old, value);
+
+		if(name === "value") {
+			if([null, undefined, "", "null"].includes(value)) {
+				this._icon = "search";
+			}
+			else {
+				this._icon = "empty";
+			}
+		}
+	}
+
+	/** @private */
+	_onIconClick() {
+		if(["empty", "warn"].includes(this._icon)) {
+			this.reset();
+		}
+		if(this.reduceable && this._icon == "search") {
+			this.reduced = !this.reduced;
+		}
+	}
+
+	/** @private */
+	_onInputChange(e) {
+		this.value = e.target.value;
+		this._throttledSearch();
+	}
+
+	/** @private */
+	_onResultClick(item) {
+		/**
+		 * Event for search result clicked
+		 * @event Panoramax.components.ui.SearchBar#result
+		 * @type {CustomEvent}
+		 * @property {object|null} detail The data associated to clicked item (format based on searcher function results), or null on reset
+		 */
+		this.dispatchEvent(new CustomEvent("result", {bubbles: true, composed: true, detail: item}));
+
+		this._results = null;
+		if(this._throttler) {
+			clearTimeout(this._throttler);
+			this._throttler = null;
+		}
+
+		if(!this.reduceable && item) {
+			this.value = item?.title;
+			this._icon = "empty";
+		}
+		else {
+			this.value = "";
+			this._icon = "search";
+			if(this.reduceable) { this.reduced = true; }
+		}
+	}
+
+	/**
+	 * Limit search calls to every 500ms
+	 * @private
+	 */
+	_throttledSearch() {
+		if(this._throttler) {
+			clearTimeout(this._throttler);
+			delete this._throttler;
+		}
+
+		this._throttler = setTimeout(this._search.bind(this), 500);
+	}
+
+	/**
+	 * Perform real search
+	 * @private
+	 */
+	_search() {
+		if(!this.value || this.value.length == 0) {
+			this.reset();
+			return;
+		}
+
+		if(!this.searcher) {
+			console.warn("No search handler defined");
+			return;
+		}
+
+		this._icon = "loading";
+		this._results = null;
+
+		this.searcher(this.value).then(data => {
+			if(this._icon !== "loading") { return; }
+
+			this._icon = "empty";
+			if(!data || data.length == 0) {
+				this._results = [];
+			}
+			else if(data === true) {
+				this._results = null;
+			}
+			else {
+				this._results = data;
+				if(!this["no-menu-closure"]) {
+					this._parent?.dispatchEvent(new CustomEvent("menu-opened", { detail: { menu: this }}));
+				}
+			}
+		}).catch(e => {
+			console.error(e);
+			this._icon = "warn";
+		});
+	}
+
+	/**
+	 * Empty results list and reset search bar content.
+	 */
+	reset() {
+		this._onResultClick(null);
+	}
+
+	/** @private */
+	render() {
+		const classes = {
+			sb: true,
+			"sb-xxl": this.size === "xxl",
+			"sb-reduceable": this.reduceable,
+			"sb-reduced": this.reduced,
+		};
+
+		return html`<div
+			id=${this.id}
+			class=${classMap(classes)}
+			part="container"
+		>
+			<slot name="pre" class=${classMap({"sb-reduced": this.reduced})}></slot>
+
+			<input
+				id="${this.id}-input"
+				type="text"
+				placeholder=${this.placeholder}
+				autocomplete="off"
+				@change=${this._onInputChange.bind(this)}
+				@keypress=${this._onInputChange.bind(this)}
+				@paste=${this._onInputChange.bind(this)}
+				@input=${this._onInputChange.bind(this)}
+				.value=${this.value || ""}
+				part="input"
+			/>
+
+			<span
+				class="sb-icon"
+				@click=${this._onIconClick.bind(this)}
+			>
+				${this._icon == "search" ? fa(faMagnifyingGlass) : nothing}
+				${this._icon == "loading" ? fa(faCircleNotch, { classes: ["fa-spin"] }) : nothing}
+				${this._icon == "empty" ? fa(faXmark) : nothing}
+				${this._icon == "warn" ? fa(faCircleExclamation) : nothing}
+			</span>
+
+			${!this.reduced && this._results ? html`
+				<div class="sb-results">
+					${this._results.length === 0 ? html`
+						<div class="sb-empty">${this._parent?._t?.pnx.search_empty}</div>
+					` : nothing}
+
+					${map(this._results, i => html`
+						<div class="sb-result" @click=${() => this._onResultClick(i)}>
+							${i.title}
+							${i.subtitle && i.subtitle != "" ? html`<br /><small>${i.subtitle}</small>` : nothing}
+						</div>
+					`)}
+				</div>
+			` : nothing}
+		</div>`;
+	}
+}
+
+customElements.define("pnx-search-bar", SearchBar);

package/build/components/ui/SemanticsEditor.js

@@ -0,0 +1,191 @@
+import { LitElement, css, html } from "lit";
+import Basic from "../core/Basic.js";
+import { computeDiffTags, parseSemanticsString, semanticsToString } from "../../utils/semantics.js";
+import { textarea } from "../styles.js";
+import JSON5 from "json5";
+
+/**
+ * Semantics Editor offer an easy-to-use input for adding or editing semantics tags.
+ *
+ * It manipulates list of `{key: "mypanokey", value: "myvalue"}` entries through `semantics` attribute.
+ *
+ * @class Panoramax.components.ui.SemanticsEditor
+ * @element pnx-semantics-editor
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @fires Panoramax.components.ui.SemanticsEditor#change
+ * @example
+ * ```html
+ * <!-- Basic example -->
+ * <pnx-semantics-editor
+ *    id="editor"
+ *    semantics=${mypic.semantics}
+ *    ._t=${viewer._t}
+ *    onchange=${e => console.log(e.detail.semantics)}
+ * />
+ *
+ * <!-- You can access editor and check its validity through native web browser functions -->
+ * <script>
+ *    const editor = document.getElementById("editor");
+ *    console.log(editor.checkValidity()); // True if input is valid
+ * </script>
+ *
+ * <!-- You can change specifically style of textarea -->
+ * <style>
+ *   pnx-semantics-editor::part(text) {
+ *      color: blue;
+ *   }
+ * </style>
+ * ```
+ */
+export default class SemanticsEditor extends LitElement {
+	static styles = [textarea, css`
+		textarea:invalid {
+			border: 2px solid var(--red);
+			background-color:var(--beige);
+		}
+	`];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.SemanticsEditor#
+	 * @type {Object}
+	 * @property {object} [semantics] The `semantics` field of a picture or annotation feature. It is updated when field changes, but reflect the whole list of new tags (not delta needed by API). If you want delta, please use getDiff function.
+	 * @property {number} [rows=3] The amount of rows shown for textarea
+	 */
+	static properties = {
+		semantics: {converter: Basic.GetJSONConverter(), reflect: true},
+		rows: {type: Number},
+		_valid: {state: true},
+		_t: {converter: Basic.GetJSONConverter()},
+		_firstSemantics: {state: true},
+	};
+
+	constructor() {
+		super();
+		this.semantics = null;
+		this._valid = true;
+		this._firstSemantics = null;
+		this.rows = 3;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		this._firstSemantics = this.semantics === null ? [] : JSON5.parse(JSON5.stringify(this.semantics));
+	}
+
+	/**
+	 * Get current delta between initial tags and user changes.
+	 * @memberof Panoramax.components.ui.SemanticsEditor#
+	 * @returns {object[]} The list of tag changes (in API format)
+	 */
+	getDiff() {
+		return computeDiffTags(this._firstSemantics || [], this.semantics);
+	}
+
+	/**
+	 * Check if input is having a valid value.
+	 * @memberof Panoramax.components.ui.SemanticsEditor#
+	 * @returns {boolean} True if it's valid
+	 */
+	checkValidity() {
+		return this._valid;
+	}
+
+	/**
+	 * Force display of invalid input
+	 * @memberof Panoramax.components.ui.SemanticsEditor#
+	 */
+	reportValidity() {
+		this.renderRoot.querySelector("textarea")?.reportValidity();
+	}
+
+	/**
+	 * Forces Editor to goes back to its empty, initial state.
+	 * @param {object} [baseSemantics=null] Initial existing semantics you want to show in editor. This is useful for getting a diff of only new semantic entries. Leave empty if no tags pre-exist.
+	 * @memberof Panoramax.components.ui.SemanticsEditor#
+	 */
+	reset(baseSemantics = null) {
+		this.semantics = null;
+		this._valid = true;
+
+		const txt = this.renderRoot.querySelector("textarea");
+		txt?.setCustomValidity("");
+		txt?.reportValidity();
+
+		this._firstSemantics = baseSemantics;
+		this.semantics = baseSemantics;
+	}
+
+	/**
+	 * Forces Editor to save current text and parse semantics.
+	 * @memberof Panoramax.components.ui.SemanticsEditor#
+	 */
+	forceInput() {
+		const target = this.renderRoot.querySelector("textarea");
+		this._onInput({ target });
+		this._onBlur({ target });
+	}
+
+	/** @private */
+	_onInput(e) {
+		const tarea = e.target;
+		try {
+			this.semantics = parseSemanticsString(tarea.value) || [];
+			this._valid = true;
+		} catch (err) {
+			if(err.message !== "Invalid tags") { console.error(err); }
+			this._valid = false;
+		}
+	}
+
+	/** @private */
+	_onBlur(e) {
+		const prevValidity = e.target.checkValidity();
+
+		if(this._valid) {
+			e.target.setCustomValidity("");
+
+			/**
+			 * Event for value change.
+			 *
+			 * Note that this event is launched only on valid input.
+			 *
+			 * @event Panoramax.components.ui.SemanticsEditor#change
+			 * @type {CustomEvent}
+			 * @property {object[]} detail.semantics The new tags list (in API semantics property format)
+			 * @property {object[]} detail.delta The delta between old and current tags (expected by API)
+			 */
+			this.dispatchEvent(new CustomEvent("change", {
+				detail: {
+					semantics: this.semantics || [],
+					delta: computeDiffTags(this._firstSemantics || [], this.semantics),
+				}
+			}));
+		}
+		else if(prevValidity) { // Do not call again if already shows up, to fix Chrome issue
+			e.target.setCustomValidity(this._t?.pnx.semantics_editor_error || "Invalid syntax");
+			e.target.reportValidity();
+		}
+	}
+
+	/** @private */
+	render() {
+		return html`
+			<textarea
+				part="text"
+				autocomplete="off"
+				autocorrect="off"
+				autocapitalize="off"
+				spellcheck="false"
+				placeholder=${this._t?.pnx.semantics_editor_example || "key1=value1\nprefix|key2=value2"}
+				@input=${this._onInput}
+  				@blur=${this._onBlur}
+				rows=${this.rows}
+				.value=${semanticsToString(this.semantics)}
+			></textarea>
+		`;
+	}
+}
+
+customElements.define("pnx-semantics-editor", SemanticsEditor);

package/build/components/ui/SemanticsTable.js

@@ -0,0 +1,88 @@
+import { LitElement, css, html, nothing } from "lit";
+import { table } from "../styles.js";
+import { groupByPrefix } from "../../utils/semantics.js";
+
+/**
+ * Semantics Tables display all semantics tags from either a picture or an annotation.
+ *
+ * @class Panoramax.components.ui.SemanticsTable
+ * @element pnx-semantics-table
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-semantics-table source=${picture.properties} ._t=${viewer._t} />
+ * ```
+ */
+export default class SemanticsTable extends LitElement {
+	/** @private */
+	static styles = [ table, css`
+		:host { display: block; }
+		th:first-child, td:first-child { width: 40%; }
+		td { vertical-align: top; }
+
+		td small { color: var(--grey-semi-dark); }
+		td a small { color: unset; }
+		.qualifiers { margin-top: 5px; }
+		.qualifiers > b { margin: 8px 0; }
+		.qualifiers ul {
+			list-style: none;
+			margin: 0px 0px 0px 15px;
+			padding: 0;
+		}
+
+		img.prefix-logo {
+			max-width: 15px;
+			max-height: 15px;
+			aspect-ratio: 1;
+			vertical-align: middle;
+		}
+	` ];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.SemanticsTable#
+	 * @type {Object}
+	 * @property {object} [source] The picture or annotation feature (having a `semantics` property)
+	 */
+	static properties = {
+		source: {type: Object},
+	};
+
+	render() {
+		if(!this.source) { return nothing; }
+
+		const groups = groupByPrefix(this.source.semantics);
+
+		return html`<table>
+			<thead>
+				<tr><th>${this._t.pnx.semantics_key}</th><th>${this._t.pnx.semantics_value}</th></tr>
+			</thead>
+			<tbody>
+				${groups.map(g => g.tags.map(tag => html`
+					<tr>
+						<td>
+							${g.prefix != ""
+								? (g.logo
+									? html`<img src=${g.logo} class="prefix-logo" alt=${g.prefix} title=${g.title} />`
+									: html`<small>(${g.prefix})</small>`)
+								: nothing
+							}
+							${g.key_transform ? g.key_transform(tag, this._t) : tag.key}
+						</td>
+						<td>
+							${g.value_transform ? g.value_transform(tag, this._t) : tag.value}
+							${tag.qualifiers ? html`<div class="qualifiers">
+								<b>${this._t.pnx.semantics_qualifiers}</b>
+								<ul>
+									${tag.qualifiers.map(q => html`<li>${q.subkey} = ${q.value}</li>`)}
+								</ul>
+							</div>` : nothing}
+						</td>
+					</tr>
+				`))}
+			</tbody>
+		</table>`;
+	}
+}
+
+customElements.define("pnx-semantics-table", SemanticsTable);