@panoramax/web-viewer 3.2.3-develop-7f50ae7f → 3.2.3-develop-17bc8da1

package/docs/reference/utils/InitParameters.md

@@ -4,7 +4,7 @@
 **Kind**: static class of <code>Panoramax.utils</code>  
 
 * [.InitParameters](#Panoramax.utils.InitParameters)
-    * [new InitParameters([componentAttrs], [urlParams])](#new_Panoramax.utils.InitParameters_new)
+    * [new InitParameters([componentAttrs], [urlParams], [browserStorage])](#new_Panoramax.utils.InitParameters_new)
     * [.getParentInit()](#Panoramax.utils.InitParameters+getParentInit)
     * [.getParentPostInit()](#Panoramax.utils.InitParameters+getParentPostInit)
     * [.getPSVInit()](#Panoramax.utils.InitParameters+getPSVInit)
@@ -14,7 +14,7 @@
 
 <a name="new_Panoramax.utils.InitParameters_new"></a>
 
-### new InitParameters([componentAttrs], [urlParams])
+### new InitParameters([componentAttrs], [urlParams], [browserStorage])
 Merges all URL parameters and component attributes into a single set of coherent settings.
 
 
@@ -22,6 +22,7 @@ Merges all URL parameters and component attributes into a single set of coherent
 | --- | --- | --- |
 | [componentAttrs] | <code>object</code> | HTML attributes from parent component |
 | [urlParams] | <code>object</code> | Parameters extracted from URL |
+| [browserStorage] | <code>object</code> | Parameters read from local/session storage |
 
 <a name="Panoramax.utils.InitParameters+getParentInit"></a>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.2.3-develop-7f50ae7f",
+  "version": "3.2.3-develop-17bc8da1",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/core/Viewer.js

@@ -3,7 +3,7 @@
 import "./Viewer.css";
 import { SYSTEM as PSSystem, DEFAULTS as PSDefaults } from "@photo-sphere-viewer/core";
 import URLHandler from "../../utils/URLHandler";
-import { linkMapAndPhoto } from "../../utils/map";
+import { linkMapAndPhoto, saveMapParamsToLocalStorage, getMapParamsFromLocalStorage } from "../../utils/map";
 import Basic from "./Basic";
 import Photo, { PSV_DEFAULT_ZOOM, PSV_ANIM_DURATION } from "../ui/Photo";
 import MapMore from "../ui/MapMore";
@@ -139,7 +139,8 @@ export default class Viewer extends Basic {
 			this.loader.setAttribute("value", 30);
 			this._initParams = new InitParameters(
 				InitParameters.GetComponentProperties(Viewer, this),
-				Object.assign({}, this.urlHandler?.currentURLParams(), this.urlHandler?.currentURLParams(true))
+				Object.assign({}, this.urlHandler?.currentURLParams(), this.urlHandler?.currentURLParams(true)),
+				{ map: getMapParamsFromLocalStorage() },
 			);
 
 			const myInitParams = this._initParams.getParentInit();
@@ -296,9 +297,14 @@ export default class Viewer extends Basic {
 	 * @memberof Panoramax.components.core.Viewer#
 	 */
 	onceFirstPicLoaded() {
-		return this.oncePSVReady().then(() => new Promise(resolve => {
-			this.psv.addEventListener("picture-loaded", resolve, {once: true});
-		}));
+		return this.oncePSVReady().then(() => {
+			if(this.psv.getPictureMetadata()) { return Promise.resolve(); }
+			else {
+				return new Promise(resolve => {
+					this.psv.addEventListener("picture-loaded", resolve, {once: true});
+				});
+			}
+		});
 	}
 
 	/** @private */
@@ -354,6 +360,7 @@ export default class Viewer extends Basic {
 	async _initMap() {
 		await new Promise(resolve => {
 			this.map = new MapMore(this, this.mapContainer, this._initParams.getMapInit());
+			saveMapParamsToLocalStorage(this.map);
 			this.map.once("users-changed", () => {
 				this.loader.setAttribute("value", 75);
 				resolve();

package/src/components/menus/PictureLegend.js

@@ -49,6 +49,8 @@ export default class PictureLegend extends LitElement {
 	connectedCallback() {
 		super.connectedCallback();
 
+		this._prevSearches = {};
+
 		this._parent.onceReady().then(() => {
 			this._onPicChange(this._parent.psv.getPictureMetadata());
 			this._parent.psv.addEventListener("picture-loaded", () => {
@@ -63,15 +65,21 @@ export default class PictureLegend extends LitElement {
 		this._caption = picMeta?.caption;
 		
 		if(picMeta) {
-			this._addrTimer1 = setTimeout(() => {
-				this._addrTimer2 = setTimeout(() => this._addr = "", 500);
-
-				reverseGeocodingNominatim(picMeta.gps[1], picMeta.gps[0])
-					.then(addr => {
-						clearTimeout(this._addrTimer2);
-						this._addr = addr;
-					});
-			}, 500);
+			const coordsHash = `${picMeta.gps[0]}/${picMeta.gps[1]}`;
+			if(this._prevSearches[coordsHash]) {
+				this._addr = this._prevSearches[coordsHash];
+			}
+			else {
+				this._addrTimer2 = setTimeout(() => this._addr = "", 250);
+				this._addrTimer1 = setTimeout(() => {
+					reverseGeocodingNominatim(picMeta.gps[1], picMeta.gps[0])
+						.then(addr => {
+							clearTimeout(this._addrTimer2);
+							this._addr = addr;
+							this._prevSearches[coordsHash] = addr;
+						});
+				}, 750);
+			}
 		}
 		else {
 			this._addr = "";

package/src/components/ui/SearchBar.js

@@ -246,7 +246,7 @@ export default class SearchBar extends LitElement {
 	}
 
 	/**
-	 * Limit search calls to every 250ms
+	 * Limit search calls to every 500ms
 	 * @private
 	 */
 	_throttledSearch() {
@@ -255,7 +255,7 @@ export default class SearchBar extends LitElement {
 			delete this._throttler;
 		}
 
-		this._throttler = setTimeout(this._search.bind(this), 250);
+		this._throttler = setTimeout(this._search.bind(this), 500);
 	}
 
 	/**
@@ -277,6 +277,8 @@ export default class SearchBar extends LitElement {
 		this._results = null;
 
 		this.searcher(this.value).then(data => {
+			if(this._icon !== "loading") { return; }
+
 			this._icon = "empty";
 			if(!data || data.length == 0) {
 				this._results = [];

package/src/utils/InitParameters.js

@@ -16,9 +16,10 @@ const MAP_NONE = ["none", "null", "false", false];
  * @class Panoramax.utils.InitParameters
  * @param {object} [componentAttrs] HTML attributes from parent component
  * @param {object} [urlParams] Parameters extracted from URL
+ * @param {object} [browserStorage] Parameters read from local/session storage
  */
 export default class InitParameters { // eslint-disable-line import/no-unused-modules
-	constructor(componentAttrs = {}, urlParams = {}) {
+	constructor(componentAttrs = {}, urlParams = {}, browserStorage = {}) {
 		// Skip URL parameters if disabled by component
 		if(componentAttrs["url-parameters"] === "false") { urlParams = {}; }
 
@@ -29,6 +30,8 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 		// Sanitize Map parameters
 		let componentMap = {};
 		if(typeof componentAttrs?.map === "object") { componentMap = componentAttrs.map; }
+		let browserMap = {};
+		if(typeof browserStorage?.map === "object") { browserMap = browserStorage.map; }
 
 		// Extract map position from URL
 		let urlMap = urlParams.map && urlParams.map !== "none" ? getMapPositionFromString(urlParams.map) : null;
@@ -41,10 +44,10 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 		let users = urlParams.users || componentAttrs.users;
 		let psv_speed = urlParams.speed || componentPsv?.transitionDuration;
 		let psv_nav = urlParams.nav || componentPsv?.picturesNavigation;
-		let map_theme = urlParams.theme || componentMap.theme;
-		let map_background = urlParams.background || componentMap.background;
-		let map_center = urlMap?.center || componentMap.center;
-		let map_zoom = urlMap?.zoom || componentMap.zoom;
+		let map_theme = urlParams.theme || browserMap?.theme || componentMap.theme;
+		let map_background = urlParams.background || browserMap?.background || componentMap.background;
+		let map_center = urlMap?.center || browserMap?.center || componentMap.center;
+		let map_zoom = urlMap?.zoom || browserMap?.zoom || componentMap.zoom;
 		let map_pitch = urlMap?.pitch || componentMap.pitch;
 		let map_bearing = urlMap?.bearing || componentMap.bearing;
 		

package/src/utils/geocoder.js

@@ -18,6 +18,67 @@ function geocoderParamsToURLString(params) {
 	return new URLSearchParams(p).toString();
 }
 
+/**
+ * Transforms Nominatim search result into a nice-to-display address.
+ * @param {object} addr The Nominatim API "address" property
+ * @returns {string} The clean-up string for display
+ * @private
+ */
+function nominatimAddressToPlaceName(addr) {
+	// API format @ https://nominatim.org/release-docs/develop/api/Output/#addressdetails
+	if(!addr || typeof addr != "object") { return ""; }
+
+	let res = "";
+
+	// House n°-like
+	if(addr.house_number) { res = addr.house_number; }
+	else if(addr.house_name) { res = addr.house_name; }
+	else {
+		const potentialNames = [
+			"emergency", "historic", "military", "natural", "landuse", "place", "railway", "man_made",
+			"aerialway", "boundary", "amenity", "aeroway", "club", "craft", "leisure", "office",
+			"mountain_pass", "shop", "tourism", "bridge", "tunnel", "waterway", "park"
+		];
+		for(let pn of potentialNames) {
+			if(addr[pn]) {
+				res = addr[pn];
+				break;
+			}
+		}
+	}
+
+	// Street-like
+	let street;
+	if(addr.road && addr.road.length > 6) { street = addr.road; }
+	else {
+		const potentialNames = [
+			// Hamlet-like
+			"hamlet", "croft", "isolated_dwelling",
+			// Zone Indus-like
+			"farm", "farmyard", "industrial", "commercial", "retail", "city_block", "residential",
+			// Quarter-like
+			"neighbourhood", "allotments", "quarter"
+		];
+		for(let pn of potentialNames) {
+			if(addr[pn]) {
+				street = addr[pn];
+				break;
+			}
+		}
+	}
+
+	if(street && res.length > 0) { res += (addr.house_number ? " " : ", ")+street; }
+	else if(street) { res = street; }
+
+	// City
+	if(addr.village || addr.town || addr.city || addr.municipality) {
+		if(res.length > 0) { res += ", "; }
+		res += addr.village || addr.town || addr.city || addr.municipality;
+	}
+
+	return res;
+}
+
 /**
  * Nominatim (OSM) geocoder, ready to use for our Map
  * @private
@@ -37,13 +98,14 @@ export function forwardGeocodingNominatim(config) {
 			const finalRes = { features: [] };
 			const listedNames = [];
 			res.features.forEach(f => {
-				if(!listedNames.includes(f.properties.display_name)) {
+				const plname = nominatimAddressToPlaceName(f.properties.address) || f.properties.display_name;
+				if(!listedNames.includes(plname)) {
 					finalRes.features.push({
 						place_type: ["place"],
-						place_name: f.properties.display_name,
+						place_name: plname,
 						bounds: new maplibregl.LngLatBounds(f.bbox),
 					});
-					listedNames.push(f.properties.display_name);
+					listedNames.push(plname);
 				}
 			});
 			return finalRes;
@@ -53,35 +115,7 @@ export function forwardGeocodingNominatim(config) {
 export function reverseGeocodingNominatim(lat, lon) {
 	return fetch(`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&zoom=18&format=jsonv2`)
 		.then(res => res.json())
-		.then(res => {
-			let addr = "";
-
-			if(res?.address) {
-				if(res.address.house_number) { addr = res.address.house_number; }
-
-				// Street/place/hamlet
-				let street;
-				if(res.address.road && res.address.road.length > 6) {
-					street = res.address.road;
-				}
-				else if(res.address.hamlet) {
-					street = res.address.hamlet;
-				}
-				else if(res.address.isolated_dwelling) {
-					street = res.address.isolated_dwelling;
-				}
-				if(street && addr.length > 0) { addr += " "+street; }
-				else if(street) { addr = street; }
-
-				// City
-				if(res.address.village || res.address.town || res.address.city) {
-					if(addr.length > 0) { addr += ", "; }
-					addr += res.address.village || res.address.town || res.address.city;
-				}
-			}
-
-			return addr;
-		});
+		.then(res => nominatimAddressToPlaceName(res?.address));
 }
 
 /**

package/src/utils/map.js

@@ -602,4 +602,44 @@ export function initMapKeyboardHandler(parent) {
 			}
 		};
 	}.bind(parent.map.keyboard);
-}
+}
+
+const MAP_PARAMS_STORAGE = "pnx-map-parameters";
+
+/**
+ * Reads map parameters from localStorage
+ * @private
+ */
+export function getMapParamsFromLocalStorage() {
+	const params = localStorage.getItem(MAP_PARAMS_STORAGE);
+	if(!params) { return {}; }
+	try {
+		return JSON.parse(params);
+	}
+	catch(e) {
+		console.warn("Can't read map parameters stored in localStorage", e);
+		return {};
+	}
+}
+
+/**
+ * Save map parameters into localStorage.
+ * @private
+ */
+export function saveMapParamsToLocalStorage(map) {
+	// Save map state in localStorage
+	const save = () => localStorage.setItem(MAP_PARAMS_STORAGE, JSON.stringify({
+		center: Object.fromEntries(Object.entries(map.getCenter()).map(([k,v]) => ([k,v.toFixed(7)]))),
+		zoom: map.getZoom().toFixed(1),
+		background: map.getBackground(),
+		theme: map._mapFilters.theme
+	}));
+
+	// Add events to know when to rewrite info
+	map.on("background-changed", save);
+	map.on("filters-changed", save);
+	map.on("moveend", save);
+	map.on("zoomend", save);
+	map.on("dragend", save);
+	map.on("boxzoomend", save);
+}

package/tests/utils/InitParameters.test.js

@@ -4,8 +4,7 @@ import {
 } from "../../src/utils/InitParameters";
 
 describe("InitParameters", () => {
-	let componentAttrs;
-	let urlParams;
+	let componentAttrs, urlParams, browserStorage;
 
 	beforeEach(() => {
 		console.warn = jest.fn();
@@ -41,12 +40,16 @@ describe("InitParameters", () => {
 			camera: "cam1",
 			pic_score: "high",
 		};
+
+		browserStorage = {
+			map: { theme: "qualityscore", background: "aerial", center: [-10, -20], zoom: 19 },
+		};
 	});
 
 	afterEach(() => jest.clearAllMocks());
 
 	it("should initialize with componentAttrs and urlParams", () => {
-		const initParams = new InitParameters(componentAttrs, urlParams);
+		const initParams = new InitParameters(componentAttrs, urlParams, browserStorage);
 
 		expect(initParams._parentInit).toEqual({
 			map: true,
@@ -111,6 +114,20 @@ describe("InitParameters", () => {
 		});
 	});
 
+	it("uses browserStorage parameters if no URL parameter is available", () => {
+		componentAttrs.map.raster = {};
+		const initParams = new InitParameters(componentAttrs, undefined, browserStorage);
+		expect(initParams._mapAny).toEqual({
+			theme: "qualityscore",
+			background: "aerial",
+			center: [-10,-20],
+			zoom: 19,
+			pitch: undefined,
+			bearing: undefined,
+			users: "user1,user2",
+		});
+	});
+
 	it("should sanitize objects correctly", () => {
 		const initParams = new InitParameters(componentAttrs, urlParams);
 		const obj = { a: 1, b: undefined, c: 3 };

package/tests/utils/__snapshots__/geocoder.test.js.snap

@@ -38,7 +38,7 @@ Object {
           "lng": -1.7,
         },
       },
-      "place_name": "Paris, Île-de-France, France métropolitaine, France",
+      "place_name": "Paris",
       "place_type": Array [
         "place",
       ],

package/tests/utils/__snapshots__/map.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`getMapParamsFromLocalStorage should return parsed params if they exist in localStorage 1`] = `
+Array [
+  Array [
+    "pnx-map-parameters",
+  ],
+]
+`;
+
+exports[`saveMapParamsToLocalStorage should save map parameters to localStorage 1`] = `Array []`;

package/tests/utils/map.test.js

@@ -12,30 +12,30 @@ describe("getThumbGif", () => {
 });
 
 describe("isLabelLayer", () => {
-    it("works with just text-field", () => {
-        const layer = { type: "symbol", layout: { "text-field": "Label" } };
-        expect(map.isLabelLayer(layer)).toBe(true);
-    });
-
-    it("works with text-field + minzoom < 15", () => {
-        const layer = { type: "symbol", layout: { "text-field": "Label" }, minzoom: 10 };
-        expect(map.isLabelLayer(layer)).toBe(true);
-    });
-
-    it("works with text-field + minzoom >= 15", () => {
-        const layer = { type: "symbol", layout: { "text-field": "Label" }, minzoom: 15 };
-        expect(map.isLabelLayer(layer)).toBe(false);
-    });
-
-    it("works with non-symbol layer", () => {
-        const layer = { type: "fill", layout: { "text-field": "Label" } };
-        expect(map.isLabelLayer(layer)).toBe(false);
-    });
-
-    it("works without text-field", () => {
-        const layer = { type: "symbol", layout: {} };
-        expect(map.isLabelLayer(layer)).toBe(false);
-    });
+	it("works with just text-field", () => {
+		const layer = { type: "symbol", layout: { "text-field": "Label" } };
+		expect(map.isLabelLayer(layer)).toBe(true);
+	});
+
+	it("works with text-field + minzoom < 15", () => {
+		const layer = { type: "symbol", layout: { "text-field": "Label" }, minzoom: 10 };
+		expect(map.isLabelLayer(layer)).toBe(true);
+	});
+
+	it("works with text-field + minzoom >= 15", () => {
+		const layer = { type: "symbol", layout: { "text-field": "Label" }, minzoom: 15 };
+		expect(map.isLabelLayer(layer)).toBe(false);
+	});
+
+	it("works with non-symbol layer", () => {
+		const layer = { type: "fill", layout: { "text-field": "Label" } };
+		expect(map.isLabelLayer(layer)).toBe(false);
+	});
+
+	it("works without text-field", () => {
+		const layer = { type: "symbol", layout: {} };
+		expect(map.isLabelLayer(layer)).toBe(false);
+	});
 });
 
 describe("getUserLayerId", () => {
@@ -65,3 +65,62 @@ describe("switchCoefValue", () => {
 		expect(res).toEqual({id: "bla", paint: { "circle-radius": ["bla", ["get", "coef_360"]]}, layout: {"circle-sort": "coef_360"}})
 	});
 });
+
+
+Object.defineProperty(window, "localStorage", { value: {
+	setItem: jest.fn(),
+	getItem: jest.fn(),
+} });
+
+describe("getMapParamsFromLocalStorage", () => {
+	it("should return an empty object if no params are stored", () => {
+		localStorage.getItem.mockReturnValue(null);
+		const result = map.getMapParamsFromLocalStorage();
+		expect(result).toEqual({});
+	});
+
+	it("should return parsed params if they exist in localStorage", () => {
+		const params = { center: { lat: "48.8566000", lng: "2.3522000" }, zoom: "10.0", background: "aerial", theme: "age" };
+		localStorage.getItem.mockReturnValue(JSON.stringify(params));
+		const result = map.getMapParamsFromLocalStorage();
+		expect(localStorage.getItem.mock.calls).toMatchSnapshot();
+		expect(result).toEqual(params);
+	});
+
+	it("should return an empty object if JSON parsing fails", () => {
+		console.warn = jest.fn();
+		localStorage.getItem.mockReturnValue("invalid-json");
+		const result = map.getMapParamsFromLocalStorage();
+		expect(result).toEqual({});
+		expect(console.warn.mock.calls[0][0]).toEqual("Can't read map parameters stored in localStorage");
+	});
+});
+
+describe("saveMapParamsToLocalStorage", () => {
+	const mockMap = {
+		getCenter: jest.fn().mockReturnValue({ lat: 48.8566, lng: 2.3522 }),
+		getZoom: jest.fn().mockReturnValue(10),
+		getBackground: jest.fn().mockReturnValue("streets"),
+		_mapFilters: { theme: "qualityscore" },
+		on: jest.fn(),
+	};
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it("should add event listeners to the map", () => {
+		map.saveMapParamsToLocalStorage(mockMap);
+		expect(mockMap.on).toHaveBeenCalledWith("background-changed", expect.any(Function));
+		expect(mockMap.on).toHaveBeenCalledWith("filters-changed", expect.any(Function));
+		expect(mockMap.on).toHaveBeenCalledWith("moveend", expect.any(Function));
+		expect(mockMap.on).toHaveBeenCalledWith("zoomend", expect.any(Function));
+		expect(mockMap.on).toHaveBeenCalledWith("dragend", expect.any(Function));
+		expect(mockMap.on).toHaveBeenCalledWith("boxzoomend", expect.any(Function));
+	});
+
+	it("should save map parameters to localStorage", () => {
+		map.saveMapParamsToLocalStorage(mockMap);
+		expect(localStorage.setItem.mock.calls).toMatchSnapshot();
+	});
+});