@panoramax/web-viewer 3.2.3-develop-54fea60b → 3.2.3-develop-d3aad6f3

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-54fea60b",
+  "version": "3.2.3-develop-d3aad6f3",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",
@@ -89,6 +89,7 @@
     "workbox-webpack-plugin": "^6.5.4"
   },
   "dependencies": {
+    "@fontsource/atkinson-hyperlegible-next": "^5.2.2",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",

package/src/components/core/Basic.css

@@ -1,5 +1,5 @@
 /* Colors */
-:root {
+:root, :host {
 	--white: #ffffff;
 	--black: #181818;
 	--black-pale: #1b1a17;
@@ -31,6 +31,7 @@
 	--widget-font: var(--grey-dark);
 	--widget-font-active: var(--white);
 	--widget-font-direct: var(--blue);
+	--font-family: "Atkinson Hyperlegible Next", sans-serif;
 }
 
 .pnx-hidden { display: none !important; }

package/src/components/core/Basic.js

@@ -5,6 +5,7 @@ import { DEFAULT_TILES } from "../../utils/map";
 import { createWebComp } from "../../utils/widgets";
 import { isInIframe, isInternetFast } from "../../utils/utils";
 import PACKAGE_JSON from "../../../package.json";
+import "@fontsource/atkinson-hyperlegible-next";
 import "./Basic.css";
 
 /**

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();
@@ -359,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/MapFilters.js

@@ -48,7 +48,7 @@ export default class MapFilters extends LitElement {
 			z-index: 131;
 			background-color: rgba(255,255,255,0.8);
 			text-align: center;
-			font-weight: bold;
+			font-weight: 800;
 			position: absolute;
 			top: 0;
 			right: 0;
@@ -80,6 +80,7 @@ export default class MapFilters extends LitElement {
 			color: var(--widget-font);
 			border: 1px solid var(--widget-border-div);
 			border-radius: 20px;
+			font-family: var(--font-family);
 		}
 
 		/* Input shortcuts */
@@ -91,13 +92,14 @@ export default class MapFilters extends LitElement {
 			border: none;
 			height: 20px;
 			line-height: 20px;
-			font-size: 11px;
+			font-size: 0.8em;
 			padding: 0 8px;
 			vertical-align: middle;
 			background-color: var(--grey-pale);
 			color: var(--black);
 			border-radius: 10px;
 			cursor: pointer;
+			font-family: var(--font-family);
 		}
 		.pnx-input-shortcuts button:hover {
 			background-color: #d9dcd9;

package/src/components/menus/MapLegend.js

@@ -17,7 +17,7 @@ export default class MapLegend extends LitElement {
 	/** @private */
 	static styles = css`
 		:host {
-			font-size: 0.8em;
+			font-size: 0.9em;
 		}
 		small {
 			font-size: 1em;

package/src/components/menus/PictureLegend.js

@@ -30,7 +30,7 @@ export default class PictureLegend extends LitElement {
 		}
 
 		.context {
-			font-size: 0.8em;
+			font-size: 0.9em;
 			display: flex;
 			align-items: center;
 			justify-content: space-between;

package/src/components/menus/PlayerOptions.js

@@ -84,7 +84,6 @@ export default class PlayerOptions extends LitElement {
 				id="pnx-player-contrast"
 				title="${this._parent?._t.pnx.contrast}"
 				kind="outline"
-				style="width: 26px;"
 				@click=${this._onContrastClick}
 			>
 				${fa(faLightbulb)}

package/src/components/menus/Share.js

@@ -78,10 +78,13 @@ export default class ShareMenu extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._onUrlChange();
-		this._parent?.addEventListener("ready", this._onUrlChange.bind(this), { once: true });
-		this._parent?.urlHandler?.addEventListener("url-changed", this._onUrlChange.bind(this));
-		this._parent?.oncePSVReady().then(() => this._parent.psv.addEventListener("picture-loaded", this._onPictureLoad.bind(this)));
+		this._parent?.onceReady().then(() => {
+			this._onUrlChange();
+			this._parent.urlHandler.addEventListener("url-changed", this._onUrlChange.bind(this));
+			
+			this._parent.onceFirstPicLoaded().then(this._onPictureLoad.bind(this));
+			this._parent.psv.addEventListener("picture-loaded", this._onPictureLoad.bind(this));
+		});
 	}
 
 	/** @private */

package/src/components/styles.js

@@ -13,7 +13,7 @@ export const panel = css`
 		color: var(--widget-font);
 		min-width: 250px;
 		box-sizing: border-box;
-		font-family: sans-serif;
+		font-family: var(--font-family);
 	}
 
 	.pnx-panel.pnx-hidden {
@@ -58,6 +58,7 @@ export const textarea = css`
 		padding: 5px;
 		width: 100%;
 		box-sizing: border-box;
+		font-family: var(--font-family);
 	}
 `;
 
@@ -70,6 +71,7 @@ export const select = css`
 		border-radius: 20px;
 		font-size: 16px;
 		padding: 2px 10px;
+		font-family: var(--font-family);
 	}
 
 	select.pnx-100w {
@@ -87,6 +89,7 @@ export const input = css`
 		border-radius: 20px;
 		font-size: 16px;
 		padding: 2px 10px;
+		font-family: var(--font-family);
 	}
 
 	input.pnx-100w {
@@ -98,14 +101,14 @@ export const input = css`
 // Buttons
 export const btn = css`
 	:host {
-		display: inline-block;
+		display: inline-flex;
 	}
 	
 	/* Common properties */
 	.pnx-btn {
 		white-space: nowrap;
-		font-size: 0.9em;
-		font-family: sans-serif;
+		font-size: 1em;
+		font-family: var(--font-family);
 		flex-grow: 1;
 		flex-shrink: 1;
 		text-align: center;
@@ -155,7 +158,7 @@ export const btn = css`
 		height: 40px;
 		line-height: 40px;
 		font-size: 16px;
-		font-weight: 400;
+		font-weight: 500;
 		min-width: 40px;
 		padding: 0 10px;
 		gap: 8px;
@@ -232,6 +235,10 @@ export const btn = css`
 
 // Titles
 export const titles = css`
+	h1, h2, h3, h4, h5, h6 {
+		font-family: var(--font-family);
+	}
+	
 	h3 {
 		font-size: 1.1em;
 		line-height: 1.1em;

package/src/components/ui/ButtonGroup.css

@@ -1,3 +1,7 @@
+pnx-button-group > pnx-button {
+	display: inline-block;
+}
+
 /* Togglable in group */
 pnx-button-group > pnx-togglable-group > pnx-button {
 	width: 100%;

package/src/components/ui/Loader.js

@@ -28,7 +28,7 @@ export default class Loader extends LitElement {
 			background-size: cover;
 			background-position: center; 
 			z-index: 200;
-			font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+			font-family: var(--font-family);
 			font-weight: 550;
 			color: var(--black);
 			font-size: 1.4em;

package/src/components/ui/QualityScore.js

@@ -32,14 +32,14 @@ export default class QualityScore extends LitElement {
 			font-size: 18px;
 			width: 25px;
 			height: 30px;
-			line-height: 26px;
+			line-height: 28px;
 			display: inline-block;
 			border: 1px solid white;
 			text-align: center;
 			background-color: gray;
 			color: rgba(255,255,255,0.9);
-			font-family: sans-serif;
-			font-weight: bold;
+			font-family: var(--font-family);
+			font-weight: 800;
 			vertical-align: middle;
 		}
 
@@ -58,7 +58,7 @@ export default class QualityScore extends LitElement {
 		.selected, input[type="checkbox"]:checked + label {
 			width: 30px;
 			height: 42px;
-			line-height: 37px;
+			line-height: 41px;
 			border-radius: 8px;
 			font-size: 27px;
 			color: white;
@@ -71,7 +71,7 @@ export default class QualityScore extends LitElement {
 		label:hover {
 			width: 28px;
 			height: 35px;
-			line-height: 30px;
+			line-height: 34px;
 			border-radius: 3px;
 			font-size: 22px;
 			color: white;

package/src/components/ui/SearchBar.js

@@ -50,6 +50,7 @@ export default class SearchBar extends LitElement {
 			width: fit-content;
 			max-width: 100%;
 			box-sizing: border-box;
+			font-family: var(--font-family);
 		}
 		.sb.sb-xxl {
 			height: 40px;
@@ -113,9 +114,9 @@ export default class SearchBar extends LitElement {
 			background-color: var(--widget-bg);
 			color: var(--widget-font);
 			z-index: 130;
-			font-size: 1em;
+			font-size: 1.05em;
   			line-height: normal;
-			font-family: sans;
+			font-family: var(--font-family);
 		}
 		.sb.sb-xxl .sb-results {
 			top: 45px;

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/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__/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();
+	});
+});