@panoramax/web-viewer 3.2.3-develop-f219e404 → 3.2.3-develop-6257391e

package/src/components/index.js

@@ -0,0 +1,13 @@
+/* eslint-disable import/no-unused-modules */
+
+/**
+ * Graphical components
+ * @module Panoramax:components
+ */
+
+import * as core from "./core";
+import * as layout from "./layout";
+import * as menus from "./menus";
+import * as ui from "./ui";
+
+export {core, layout, menus, ui};

package/src/components/layout/CorneredGrid.js

@@ -0,0 +1,109 @@
+import { LitElement, html, css } from "lit";
+
+/**
+ * CorneredGrid layout offers a convenient way to display overlay widgets on top of a background component.
+ * This is useful for showing buttons in corners over a map or picture display.
+ * Grid layout is organised through many slots (background and corners) : two rows (top, bottom) and three columns (right, middle, left).
+ * @class Panoramax.components.layout.CorneredGrid
+ * @element pnx-cornered-grid
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @slot `bg` The full size background component
+ * @slot `top-left` The top-left corner
+ * @slot `top` The top middle corner
+ * @slot `top-right` The top-right corner
+ * @slot `bottom-left` The bottom-left corner
+ * @slot `bottom` The bottom middle corner
+ * @slot `bottom-right` The bottom-right corner
+ * @example
+ * ```html
+ * <pnx-cornered-grid>
+ *   <pnx-map slot="bg" />
+ *   <pnx-button slot="top-left" />
+ *   <pnx-button slot="top-left" />
+ *   <pnx-legend slot="bottom" />
+ * </pnx-cornered-grid>
+ * ```
+ */
+export default class CorneredGrid extends LitElement {
+	/** @private */
+	static styles = css`
+		:host {
+			position: relative;
+			width: 100%;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			gap: 5px;
+			flex-wrap: no-wrap;
+		}
+
+		.bg {
+			position: absolute;
+			inset: 0;
+			z-index: 0;
+		}
+
+		.row {
+			display: flex;
+			flex-direction: row;
+			flex: 1 1 50%;
+			pointer-events: none;
+		}
+
+		.corner {
+			position: relative;
+			flex: 1 1 33%;
+			display: flex;
+			gap: 10px;
+		}
+
+		.corner slot {
+			pointer-events: auto;
+			position: relative;
+			z-index: 120;
+		}
+
+		.row.bottom .corner:not(.middle) { flex-direction: column; }
+		.row.bottom .corner.left { justify-content: flex-end; align-items: flex-start; }
+		.row.bottom .corner.middle { justify-content: center; align-items: flex-end; }
+		.row.bottom .corner.right { justify-content: flex-end; align-items: flex-end; }
+
+		.row.top .corner { flex-direction: row; }
+		.row.top .corner.left { justify-content: flex-start; align-items: flex-start; }
+		.row.top .corner.middle { justify-content: center; }
+		.row.top .corner.right { justify-content: flex-end; align-items: flex-start; }
+	`;
+
+	/** @private */
+	render() {
+		return html`
+			<div class="bg">
+				<slot name="bg"></slot>
+			</div>
+			<div class="row top">
+				<div class="corner left" part="corner-top-left">
+					<slot name="top-left"></slot>
+				</div>
+				<div class="corner middle" part="corner-top">
+					<slot name="top"></slot>
+				</div>
+				<div class="corner right" part="corner-top-right">
+					<slot name="top-right"></slot>
+				</div>
+			</div>
+			<div class="row bottom">
+				<div class="corner left" part="corner-bottom-left">
+					<slot name="bottom-left"></slot>
+				</div>
+				<div class="corner middle" part="corner-bottom">
+					<slot name="bottom"></slot>
+				</div>
+				<div class="corner right" part="corner-bottom-right">
+					<slot name="bottom-right"></slot>
+				</div>
+			</div>
+		`;
+	}
+}
+
+customElements.define("pnx-cornered-grid", CorneredGrid);

package/src/components/layout/Mini.js

@@ -0,0 +1,117 @@
+import { LitElement, html, css } from "lit";
+import SwitchBig from "../../img/switch_big.svg";
+import SwitchMini from "../../img/switch_mini.svg";
+
+/**
+ * Mini layout allows to show a reduced or collapsed component in a corner of a main component.
+ * For example, show a reduced map on top of a photo display.
+ * @class Panoramax.components.layout.Mini
+ * @element pnx-mini
+ * @slot `default` The component to display.
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @fires Panoramax.components.layout.Mini#expand
+ * @example
+ * ```html
+ * <pnx-mini icon=${fa(faMap)} ._parent=${viewer}>
+ *   <pnx-map />
+ * </pnx-mini>
+ * ```
+ */
+export default class Mini extends LitElement {
+	/** @private */
+	static styles = css`
+		:host {
+			display: block;
+			position: absolute;
+			inset: 0;
+			pointer-events: none;
+		}
+
+		slot {
+			z-index: 120;
+			pointer-events: auto;
+		}
+
+		pnx-button {
+			z-index: 121;
+			position: absolute;
+			pointer-events: auto;
+		}
+
+		pnx-button img {
+			height: 20px;
+		}
+
+		pnx-button:not([size="xxl"])::part(btn) {
+			border-top-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+	`;
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.layout.Mini#
+	 * @type {Object}
+	 * @property {string} [icon] The icon to use in collapsed button.
+	 * @property {boolean} [collapsed=false] Collapsed displays only a simple button.
+	 */
+	static properties = {
+		icon: {type: String},
+		collapsed: {type: Boolean, reflect: true},
+	};
+
+	constructor() {
+		super();
+
+		this.collapsed = false;
+		this.icon = null;
+	}
+
+	/** @private */
+	render() {
+		const isSmall = this._parent?.isWidthSmall() || this._parent?.isHeightSmall();
+
+		/**
+		 * Event when user ask for component expand
+		 * @event Panoramax.components.layout.Mini#expand
+		 * @type {Event}
+		 */
+		const onExpand = () => this.dispatchEvent(new Event("expand", {bubbles: true, composed: true}));
+		
+		if(this.collapsed || isSmall) {
+			const click = isSmall ? onExpand : () => this.collapsed = false;
+			return html`<pnx-button
+				kind="flat"
+				size="xxl"
+				style="bottom: 0"
+				@click=${click}
+			>${this.icon}</pnx-button>`;
+		}
+		else {
+			return html`
+				<slot></slot>
+
+				<pnx-button
+					kind="superflat"
+					title=${this._parent?._t.pnx.expand_info}
+					style="top: 0; right: 0"
+					@click=${onExpand}
+				>
+					<img src=${SwitchBig} alt="" />
+					${this._parent?._t.pnx.expand}
+				</pnx-button>
+
+				<pnx-button
+					kind="flat"
+					title=${this._parent?._t.pnx.minimize}
+					style="bottom: 0; left: 0"
+					@click=${() => this.collapsed = true}
+				>
+					<img src=${SwitchMini} alt="" />
+				</pnx-button>
+			`;
+		}
+	}
+}
+
+customElements.define("pnx-mini", Mini);

package/src/components/layout/index.js

@@ -0,0 +1,7 @@
+/**
+ * General layout components
+ * @module Panoramax:components:layout
+ */
+
+export {default as CorneredGrid} from "./CorneredGrid";
+export {default as Mini} from "./Mini";

package/src/components/menus/MapBackground.js

@@ -0,0 +1,106 @@
+import { LitElement, html, css } from "lit";
+import BackgroundAerial from "../../img/bg_aerial.jpg";
+import BackgroundStreets from "../../img/bg_streets.jpg";
+
+/**
+ * Map Background menu allows user to select background.
+ * @class Panoramax.components.menus.MapBackground
+ * @element pnx-map-background
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-map-background size="sm" _parent=${viewer} />
+ * ```
+ */
+export default class MapBackground extends LitElement {
+	/** @private */
+	static styles = [ css`
+		:host {
+			justify-content: space-evenly;
+			box-sizing: border-box;
+			display: flex;
+			gap: 10px;
+		}
+		input { display: none; }
+		label { cursor: pointer; }
+
+		img {
+			width: 40px;
+			border-radius: 5px;
+			vertical-align: middle;
+			margin-right: 5px;
+			border: 2px solid var(--widget-bg);
+		}
+
+		img.sm {
+			width: 32px;
+		}
+
+		input:checked + label img {
+			outline: 3px solid var(--widget-border-btn);
+		}
+	` ];
+
+	/**
+     * Component properties.
+	 * @memberof Panoramax.components.menus.MapBackground#
+     * @type {Object}
+     * @property {string} [size=md] The size of the button (sm, md)
+     */
+	static properties = {
+		bg: {state: true},
+		size: {type: String},
+	};
+
+	constructor() {
+		super();
+		this.size = "md";
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		this._parent?.map?.on("background-changed", e => {
+			this.bg = e.background;
+		});
+		this.bg = this._parent?.map?.getBackground();
+	}
+
+	/** @private */
+	_onBgSelect(e) {
+		this.bg = e.target.value;
+		this._parent?.map?.setBackground(this.bg);
+	}
+
+	/** @private */
+	render() {
+		return html`
+			<input
+				type="radio"
+				id="bg-streets"
+				name="bg"
+				value="streets"
+				@change=${this._onBgSelect}
+				.checked=${this.bg == "streets"}
+			/>
+			<label for="bg-streets">
+				<img src=${BackgroundStreets} class=${this.size} alt="" />
+				${this._parent?._t.pnx.map_background_streets}
+			</label>
+			<input
+				type="radio"
+				id="bg-aerial"
+				name="bg"
+				value="aerial"
+				@change=${this._onBgSelect}
+				.checked=${this.bg == "aerial"}
+			/>
+			<label for="bg-aerial">
+				<img src=${BackgroundAerial} class=${this.size} alt="" />
+				${this._parent?._t.pnx.map_background_aerial}
+			</label>
+		`;
+	}
+}
+
+customElements.define("pnx-map-background", MapBackground);