@panoramax/web-viewer 4.0.0 → 4.0.1-develop-1e9682f2

package/docs/03_URL_settings.md

@@ -31,7 +31,7 @@ By default, picture is shown wide.
 
 ### :simple-speedtest: `speed`: sequence play speed
 
-The duration of stay on a picture during sequence play (excluding image dowloading time), in milliseconds. Authorized values are between 0 and 3000. Example:
+The duration of stay on a picture during sequence play (excluding image downloading time), in milliseconds. Authorized values are between 0 and 3000. Example:
 
 ```urlencoded
 speed=1000

package/docs/09_Develop.md

@@ -14,7 +14,7 @@ The current code is split between various elements:
 
 - __Core components__: a single functional entry, like [Viewer](./reference/components/core/Viewer.md) (map + picture), [Photo Viewer](./reference/components/core/PhotoViewer.md) (picture only), [Coverage Map](./reference/components/core/CoverageMap.md) or [Editor](./reference/components/core/Editor.md). They share parts of code in [Basic](./reference/components/core/Basic.md) class. They specialized the behaviour of components depending on the needs.
 - __UI components, menus & widgets__: reusable web components, like [Map](./reference/components/ui/Map.md), [Photo](./reference/components/ui/Photo.md) or [Loader](./reference/components/ui/Loader.md). They are used in some views depending of the context.
-- __Utils__: utility functions, splitted in various files for clarity.
+- __Utils__: utility functions, split into various files for clarity.
 
 ![Class diagram of Panoramax web viewer](./images/class_diagram.jpg)
 

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

@@ -289,7 +289,7 @@ Event for picture preview
 | --- | --- | --- |
 | detail.picId | <code>string</code> | The picture ID |
 | detail.coordinates | <code>Array.&lt;number&gt;</code> | [x,y] coordinates |
-| detail.direction | <code>number</code> | The theorical picture orientation |
+| detail.direction | <code>number</code> | The theoretical picture orientation |
 
 <a name="Panoramax.components.ui.Photo+event_picture-preview-stopped"></a>
 

package/docs/reference/utils/API.md

@@ -39,7 +39,7 @@ API contains various utility functions to communicate with Panoramax/STAC API
 
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
-| endpoint | <code>string</code> |  | The endpoint. It corresponds to the <a href="https://github.com/radiantearth/stac-api-spec/blob/main/overview.md#example-landing-page">STAC landing page</a>, with all links describing the API capabilites. |
+| endpoint | <code>string</code> |  | The endpoint. It corresponds to the <a href="https://github.com/radiantearth/stac-api-spec/blob/main/overview.md#example-landing-page">STAC landing page</a>, with all links describing the API capabilities. |
 | [options] | <code>object</code> |  | Options |
 | [options.style] | <code>string</code> \| <code>object</code> |  | General map style |
 | [options.tiles] | <code>string</code> |  | API route serving pictures & sequences vector tiles |

package/docs/tutorials/migrate_v4.md

@@ -68,7 +68,7 @@ Many stuff was moved around, and have a bit different naming. Main classes shoul
 
 A new main component is available, named __Photo Viewer__ (`<pnx-photo-viewer>`) for showing up only picture (without map).
 
-And source code is splitted in more packages:
+And source code is split into more packages:
 
 * `Panoramax.components` : everything you can see graphically
     * `.core` : Viewer, Editor, Coverage Map and Basic (common code)

package/docs/tutorials/synced_coverage.md

@@ -32,7 +32,7 @@ coverage.addEventListener("ready", () => {
 		console.log("Selected sequence", e.detail.seqId, "picture", e.detail.picId);
 	});
 
-	// You can also programatically change selection on map
+	// You can also programmatically change selection on map
 	coverage.select(
 		"c463d190-06b0-47fb-98a8-b4a775a39ad6", // A sequence ID
 		"bdea1eb4-4496-46da-a4d5-b22b16e75fa8"  // A picture ID (can be null if unknown)

package/package.json

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

package/src/components/core/PhotoViewer.js

@@ -323,7 +323,11 @@ export default class PhotoViewer extends Basic {
 		for(let cn of this.grid.childNodes) {
 			if(cn.getAttribute("slot") !== "bg") {
 				cn.addEventListener("focusin", () => keytonone());
-				cn.addEventListener("focusout", () => keytopsv());
+				cn.addEventListener("focusout", () => {
+					if(this.popup.getAttribute("visible") === null) {
+						keytopsv();
+					}
+				});
 			}
 		}
 	}

package/src/components/core/Viewer.js

@@ -336,11 +336,11 @@ export default class Viewer extends PhotoViewer {
 		};
 		const keytopsv = () => {
 			this.psv.startKeyboardControl();
-			this.map?.keyboard?.disable();
+			this.map.keyboard.disable();
 		};
 		const keytonone = () => {
 			this.psv.stopKeyboardControl();
-			this.map?.keyboard?.disable();
+			this.map.keyboard.disable();
 		};
 		const keytofocused = () => {
 			if(this.map && this.isMapWide()) { keytomap(); }
@@ -350,6 +350,7 @@ export default class Viewer extends PhotoViewer {
 		// General focus change
 		this.addEventListener("focus-changed", e => {
 			if(e.detail.focus === "map") { keytomap(); }
+			if(this.popup.getAttribute("visible")) { keytonone(); }
 			else { keytopsv(); }
 		});
 
@@ -361,7 +362,11 @@ export default class Viewer extends PhotoViewer {
 		for(let cn of this.grid.childNodes) {
 			if(cn.getAttribute("slot") !== "bg") {
 				cn.addEventListener("focusin", () => keytonone());
-				cn.addEventListener("focusout", () => keytofocused());
+				cn.addEventListener("focusout", () => {
+					if(this.popup.getAttribute("visible") === null) {
+						keytofocused();
+					}
+				});
 			}
 		}
 	}

package/src/components/menus/PictureLegend.js

@@ -152,7 +152,6 @@ export default class PictureLegend extends LitElement {
 	_onPicChange(picMeta) {
 		clearTimeout(this._addrTimer1);
 		this._caption = picMeta?.caption;
-		this._expanded = this._expanded && this.collapsable;
 		
 		if(picMeta) {
 			const coordsHash = `${picMeta.gps[0]}/${picMeta.gps[1]}`;
@@ -178,7 +177,12 @@ export default class PictureLegend extends LitElement {
 
 	/** @private */
 	_onBackClick() {
-		this._parent._setFocus?.("map");
+		if(this._parent.isWidthSmall() && this._parent.focus === "map") {
+			this._parent.select();
+		}
+		else {
+			this._parent._setFocus?.("map");
+		}
 	}
 
 	/** @private */

package/src/components/ui/Photo.js

@@ -338,7 +338,7 @@ export default class Photo extends PSViewer {
 		 * @type {CustomEvent}
 		 * @property {string} detail.picId The picture ID
 		 * @property {number[]} detail.coordinates [x,y] coordinates
-		 * @property {number} detail.direction The theorical picture orientation
+		 * @property {number} detail.direction The theoretical picture orientation
 		 */
 		const event = new CustomEvent("picture-preview-started", { detail: {
 			picId: fromLink.nodeId,

package/src/utils/API.js

@@ -8,7 +8,7 @@ import { isNullId } from "./utils";
  * @typicalname api
  * @fires Panoramax.utils.API#ready
  * @fires Panoramax.utils.API#broken
- * @param {string} endpoint The endpoint. It corresponds to the <a href="https://github.com/radiantearth/stac-api-spec/blob/main/overview.md#example-landing-page">STAC landing page</a>, with all links describing the API capabilites.
+ * @param {string} endpoint The endpoint. It corresponds to the <a href="https://github.com/radiantearth/stac-api-spec/blob/main/overview.md#example-landing-page">STAC landing page</a>, with all links describing the API capabilities.
  * @param {object} [options] Options
  * @param {string|object} [options.style] General map style
  * @param {string} [options.tiles] API route serving pictures & sequences vector tiles