@panoramax/web-viewer 4.0.3 → 4.1.0

package/src/components/ui/HashTags.js

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