@panoramax/web-viewer 3.2.3-develop-54fea60b → 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-54fea60b",
+  "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();
@@ -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/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();
+	});
+});