@panoramax/web-viewer 4.0.3-develop-bcecb20b → 4.0.3-develop-2c5cb935

package/docs/reference/components/core/Editor.md

@@ -5,6 +5,12 @@
 **Extends**: [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)  
 **Emits**: [<code>select</code>](Basic.md/#Panoramax.components.core.Basic+event_select), [<code>ready</code>](Basic.md/#Panoramax.components.core.Basic+event_ready), [<code>broken</code>](Basic.md/#Panoramax.components.core.Basic+event_broken)  
 **Element**: pnx-editor  
+**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  
 **Properties**
 
 | Name | Type | Description |
@@ -13,6 +19,7 @@
 | api | [<code>API</code>](../../utils/API.md/#Panoramax.utils.API) | The API manager |
 | map | [<code>Map</code>](../ui/Map.md/#Panoramax.components.ui.Map) | The MapLibre GL map itself |
 | psv | [<code>Photo</code>](../ui/Photo.md/#Panoramax.components.ui.Photo) | The Photo Sphere Viewer component itself |
+| grid | [<code>CorneredGrid</code>](../layout/CorneredGrid.md/#Panoramax.components.layout.CorneredGrid) | The grid layout manager |
 
 
 * [.Editor](#Panoramax.components.core.Editor) ⇐ [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)
@@ -40,12 +47,23 @@ It shows both picture and map.
 
 Make sure to set width/height through CSS for proper display.
 
+This component has a [CorneredGrid](../layout/CorneredGrid.md/#Panoramax.components.layout.CorneredGrid) layout, you can use directly any slot element to pass custom widgets.
+
 **Example**  
 ```html
+<!-- Basic example -->
 <pnx-editor
   endpoint="https://panoramax.openstreetmap.fr/"
   style="width: 300px; height: 250px"
 />
+
+<!-- With slotted widgets -->
+<pnx-editor
+  endpoint="https://panoramax.openstreetmap.fr/"
+  style="width: 300px; height: 250px"
+>
+  <p slot="top-right">My custom text</p>
+</pnx-editor>
 ```
 <a name="Panoramax.components.core.Editor+properties"></a>
 

package/docs/reference/components/ui/Map.md

@@ -51,7 +51,7 @@ A shorthand `addEventListener` function is added for simpler usage.
 | [options.raster] | <code>object</code> |  | The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition](https://maplibre.org/maplibre-style-spec/sources/#raster). |
 | [options.background] | <code>string</code> | <code>&quot;streets&quot;</code> | Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street. |
 | [options.attributionControl.customAttribution] | <code>string</code> |  | To override default map attribution. |
-| [options.picMarkerDraggable] | boolean | false | To make the picture marker draggable, default to false. |
+| [options.picMarkerDraggable] | <code>boolean</code> |  | To make the picture marker draggable, default to false. |
 
 **Example**  
 ```js
@@ -160,6 +160,7 @@ Shows on map a picture position and heading.
 | lat | <code>number</code> |  | The latitude |
 | heading | <code>number</code> |  | The heading |
 | [skipCenter] | <code>boolean</code> | <code>false</code> | Set to true to avoid map centering on marker |
+| [picId] | <code>string</code> | <code>null</code> | The picture Id |
 
 <a name="Panoramax.components.ui.Map+reloadLayersStyles"></a>
 

package/docs/reference/components/ui/MapMore.md

@@ -159,6 +159,7 @@ Shows on map a picture position and heading.
 | lat | <code>number</code> |  | The latitude |
 | heading | <code>number</code> |  | The heading |
 | [skipCenter] | <code>boolean</code> | <code>false</code> | Set to true to avoid map centering on marker |
+| [picId] | <code>string</code> | <code>null</code> | The picture Id |
 
 <a name="Panoramax.components.ui.Map+reloadLayersStyles"></a>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.0.3-develop-bcecb20b",
+  "version": "4.0.3-develop-2c5cb935",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/core/Editor.css

@@ -20,4 +20,5 @@ pnx-editor pnx-map-background {
   	color: var(--widget-font);
 	bottom: 10px;
 	left: 10px;
+	font-family: var(--font-family);
 }

package/src/components/core/Editor.js

@@ -3,13 +3,10 @@ import "./Editor.css";
 import Basic from "./Basic";
 import Map from "../ui/Map";
 import Photo from "../ui/Photo";
-import BackgroundAerial from "../../img/bg_aerial.jpg";
-import BackgroundStreets from "../../img/bg_streets.jpg";
 import { apiFeatureToPSVNode } from "../../utils/picture";
 import { linkMapAndPhoto } from "../../utils/map";
 import { VECTOR_STYLES } from "../../utils/map";
 import { SYSTEM as PSSystem } from "@photo-sphere-viewer/core";
-import { css } from "lit";
 import { createWebComp } from "../../utils/widgets";
 
 const LAYER_HEADING_ID = "sequence-headings";
@@ -19,6 +16,8 @@ const LAYER_HEADING_ID = "sequence-headings";
  * It shows both picture and map.
  * 
  * Make sure to set width/height through CSS for proper display.
+ * 
+ * This component has a [CorneredGrid](#Panoramax.components.layout.CorneredGrid) layout, you can use directly any slot element to pass custom widgets.
  * @class Panoramax.components.core.Editor
  * @element pnx-editor
  * @extends Panoramax.components.core.Basic
@@ -29,12 +28,28 @@ const LAYER_HEADING_ID = "sequence-headings";
  * @property {Panoramax.utils.API} api The API manager
  * @property {Panoramax.components.ui.Map} map The MapLibre GL map itself
  * @property {Panoramax.components.ui.Photo} psv The Photo Sphere Viewer component itself
+ * @property {Panoramax.components.layout.CorneredGrid} grid The grid layout manager
+ * @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
+ * <!-- Basic example -->
  * <pnx-editor
  *   endpoint="https://panoramax.openstreetmap.fr/"
  *   style="width: 300px; height: 250px"
  * />
+ * 
+ * <!-- With slotted widgets -->
+ * <pnx-editor
+ *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
+ * >
+ *   <p slot="top-right">My custom text</p>
+ * </pnx-editor>
  * ```
  */
 export default class Editor extends Basic {
@@ -67,7 +82,13 @@ export default class Editor extends Basic {
 
 		// Create sub-containers
 		this._psvContainer = document.createElement("div");
+		this._psvContainer.setAttribute("slot", "bg");
 		this._mapContainer = document.createElement("div");
+		this._mapContainer.setAttribute("slot", "bg");
+
+		this.grid = createWebComp("pnx-cornered-grid");
+		this.grid.appendChild(this._psvContainer);
+		this.grid.appendChild(this._mapContainer);
 
 		this.onceAPIReady().then(() => {
 			this.loader.setAttribute("value", 30);
@@ -111,6 +132,12 @@ export default class Editor extends Basic {
 		super.connectedCallback();
 	}
 
+	/** @private */
+	firstUpdated() {
+		super.firstUpdated();
+		this._moveChildToGrid();		
+	}
+
 	attributeChangedCallback(name, old, value) {
 		if(name === "users" && Array.isArray(value) && value.length > 0) {
 			console.warn("Parameters users can't be changed in Editor, only selected sequence can be visible");
@@ -122,11 +149,11 @@ export default class Editor extends Basic {
 
 	/** @private */
 	render() {
-		return [this.loader, this._psvContainer, this._mapContainer];
+		return [this.loader, this.grid];
 	}
 
 	getSubComponentsNames() {
-		return super.getSubComponentsNames().concat(["map", "psv"]);
+		return super.getSubComponentsNames().concat(["map", "psv", "grid"]);
 	}
 
 	/** @private */
@@ -321,8 +348,23 @@ export default class Editor extends Basic {
 	 */
 	_addMapBackgroundWidget() {
 		// Container
-		const pnlLayers = createWebComp("pnx-map-background", {_parent: this, size: "sm"});
-		this._mapContainer.appendChild(pnlLayers);
+		const pnlLayers = createWebComp("pnx-map-background", {_parent: this, size: "sm", slot: "bottom-left"});
+		this.grid.appendChild(pnlLayers);
+	}
+
+	/** @private */
+	_moveChildToGrid() {
+		const slotContent = Array.from(this.querySelectorAll("[slot]"));
+
+		slotContent.forEach(n => {
+			// Add parent + translation for our components
+			if(n.tagName?.toLowerCase().startsWith("pnx-")) {
+				n._parent = this;
+				n._t = this._t;
+			}
+
+			this.grid.appendChild(n);
+		});
 	}
 
 	/**

package/src/components/menus/PictureLegend.js

@@ -28,14 +28,17 @@ export default class PictureLegend extends LitElement {
 		:host {
 			overflow-y: auto;
 			overflow-x: hidden;
-			display: block;
+			display: flex;
+			flex-direction: column;
 			margin: 0;
 			font-family: var(--font-family);
 		}
 
 		@media screen and (min-width: 576px) {
-			:host { max-height: 70vh; }
-			pnx-picture-metadata { width: 30vw; }
+			:host {
+				max-height: 70vh;
+				width: 30vw;
+			}
 		}
 
 		/* Top bar */
@@ -59,6 +62,9 @@ export default class PictureLegend extends LitElement {
 			margin-bottom: 2px;
 			flex-grow: 5;
 			font-weight: 800;
+			text-overflow: ellipsis;
+			overflow: hidden;
+  			white-space: nowrap;
 		}
 
 		#pic-legend-addr span {
@@ -212,7 +218,7 @@ export default class PictureLegend extends LitElement {
 					</pnx-button>
 				` : nothing}
 
-				<div id="pic-legend-addr">
+				<div id="pic-legend-addr" title=${this._addr || ""}>
 					${this._addr?.length > 0 ? this._addr : html`<span class="pnx-placeholder-loading">&nbsp;</span>`}
 				</div>
 

package/src/components/ui/Map.js

@@ -422,7 +422,7 @@ export default class Map extends maplibregl.Map {
 	 * @param {number} lat The latitude
 	 * @param {number} heading The heading
 	 * @param {boolean} [skipCenter=false] Set to true to avoid map centering on marker
-	 * @param {string} picId The picture Id
+	 * @param {string} [picId=null] The picture Id
 	 */
 	displayPictureMarker(lon, lat, heading, skipCenter = false, picId = null) {
 		this._picMarkerPreview.remove();

package/tests/components/core/Editor.test.js

@@ -15,6 +15,6 @@ describe("getClassName", () => {
 
 describe("getSubComponentsNames", () => {
 	it("works", () => {
-		expect(comp.getSubComponentsNames()).toEqual(["loader", "api", "map", "psv"]);
+		expect(comp.getSubComponentsNames()).toEqual(["loader", "api", "map", "psv", "grid"]);
 	});
 });