@panoramax/web-viewer 4.0.1 → 4.0.2-develop-9d664bb8

package/src/utils/services.js

@@ -0,0 +1,57 @@
+/*
+ * Settings that may be useful to change for special cases (e.g. offline implementation).
+ * Most users will be fine with the defaults.
+ */
+
+
+/**
+ * OpenStreetMap iD editor URL
+ * @returns {string} The editor URL
+ */
+export function IdEditorURL() {
+	return "https://www.openstreetmap.org/edit?editor=id";
+}
+
+
+/* -----------------------------------------------------
+ * Internet speed tests
+ */
+
+/**
+ * Get the threshold fast internet speed value.
+ *
+ * @returns {number} the minimum speed in MBps for internet to be considered "fast"
+ */
+export function InternetFastThreshold() {
+	return 10;
+}
+
+/**
+ * Get the fast internet speed test file.
+ *
+ * @returns {string} URL for the file to use for internet speed testing.
+ */
+export function InternetFastTestFile() {
+	return "https://panoramax.openstreetmap.fr/images/05/ca/2c/98/0111-4baf-b6f3-587bb8847d2e.jpg";
+}
+
+
+/* -----------------------------------------------------
+ * Geocoding-related settings
+ */
+
+/**
+ * Get the Base Adresse Nationale URL for geocoding API.
+ * @returns {string} The Base Adresse Nationale URL (must support /search calls).
+ */
+export function AdresseDataGouvBaseURL() {
+	return "https://data.geopf.fr/geocodage/search";
+}
+
+/**
+ * Get the Nominatim base URL for geocoding API.
+ * @returns {string} The Nominatim URL (must support /search & /reverse calls).
+ */
+export function NominatimBaseUrl() {
+	return "https://nominatim.openstreetmap.org";
+}

package/src/utils/utils.js

@@ -1,3 +1,5 @@
+import { InternetFastTestFile, InternetFastThreshold } from "./services";
+
 export const BASE_PANORAMA_ID = "geovisio-fake-id-0";
 
 export const COLORS = {
@@ -209,6 +211,19 @@ export function xyzToPosition(x, y, z) {
 	};
 }
 
+/**
+ * Transforms decimal degrees into degrees/minutes/seconds format.
+ * @param {number} degrees The decimal degrees value
+ * @returns {object} Coordinate as {d,m,s} object
+ */
+export function degToDms(degrees) {
+	const d = degrees < 0 ? Math.ceil(degrees) : Math.floor(degrees);
+	const rm = Math.abs(degrees - d) * 60;
+	const m = Math.floor(rm);
+	const s = parseFloat(((rm - m) * 60).toFixed(3));
+	return { d, m, s };
+}
+
 /**
  * Get the query string for JOSM to load current picture area
  * @returns {string} The query string, or null if not available
@@ -245,9 +260,7 @@ export function isInIframe() {
 }
 
 
-const INTERNET_FAST_THRESHOLD = 10; // MBit/s
 const INTERNET_FAST_STORAGE = "pnx-internet-fast";
-const INTERNET_FAST_TESTFILE = "https://panoramax.openstreetmap.fr/images/05/ca/2c/98/0111-4baf-b6f3-587bb8847d2e.jpg";
 
 /**
  * Check if Internet connection is high-speed or not.
@@ -258,7 +271,7 @@ export function isInternetFast() {
 	// Check if downlink property is available
 	try {
 		const speed = navigator.connection.downlink; // MBit/s
-		return Promise.resolve(speed >= INTERNET_FAST_THRESHOLD);
+		return Promise.resolve(speed >= InternetFastThreshold());
 	}
 	// Fallback for other browsers
 	catch(e) {
@@ -271,14 +284,14 @@ export function isInternetFast() {
 
 			// Run download testing
 			const startTime = (new Date()).getTime();
-			return fetch(INTERNET_FAST_TESTFILE+"?nocache="+startTime)
+			return fetch(`${InternetFastTestFile()}?nocache=${startTime}`)
 				.then(async res => [res, await res.blob()])
 				.then(([res, blob]) => {
 					const size = parseInt(res.headers.get("Content-Length") || blob.size); // Bytes
 					const endTime = (new Date()).getTime();
 					const duration = (endTime - startTime) / 1000; // Transfer time in seconds
 					const speed = (size * 8 / 1024 / 1024) / duration; // MBits/s
-					const isFast = speed >= INTERNET_FAST_THRESHOLD;
+					const isFast = speed >= InternetFastThreshold();
 					sessionStorage.setItem(INTERNET_FAST_STORAGE, isFast ? "true" : "false");
 					return isFast;
 				})

package/tests/components/ui/Map.test.js

@@ -81,6 +81,7 @@ describe("getBackground", () => {
 		const p = createParent();
 		const c = document.createElement("div");
 		const m = new Map(p, c);
+		m.getLayer = () => undefined;
 		expect(m.getBackground()).toBe("streets");
 	});
 });
@@ -99,7 +100,7 @@ describe("setBackground", () => {
 				resolve();
 			});
 			m.setBackground("aerial");
-		})
+		});
 	});
 
 	it("skips if setting streets and no raster available", () => {
@@ -107,6 +108,7 @@ describe("setBackground", () => {
 		const c = document.createElement("div");
 		const m = new Map(p, c);
 		m.setLayoutProperty = jest.fn();
+		m.getLayer = () => undefined;
 		m.setBackground("streets");
 		expect(m.setLayoutProperty.mock.calls.length).toBe(0);
 	});
@@ -115,6 +117,7 @@ describe("setBackground", () => {
 		const p = createParent();
 		const c = document.createElement("div");
 		const m = new Map(p, c);
+		m.getLayer = () => undefined;
 		expect(() => m.setBackground("aerial")).toThrowError("No aerial imagery available");
 	});
 });
@@ -138,9 +141,10 @@ describe("setVisibleUsers", () => {
 		const c = document.createElement("div");
 		const m = new Map(p, c);
 		m._createPicturesTilesLayer = (url, id) => m._userLayers.add(id);
-		m.setLayoutProperty = jest.fn();
+		m._addedLayers = [];
+		m.addLayer = jest.fn();
 		await m.setVisibleUsers(["blabla"]);
-		expect(m.setLayoutProperty.mock.calls).toMatchSnapshot();
+		expect(m.addLayer.mock.calls).toMatchSnapshot();
 		expect(p.dispatchEvent.mock.calls).toMatchSnapshot();
 	});
 

package/tests/utils/InitParameters.test.js

@@ -372,47 +372,47 @@ describe("alterMapState", () => {
 
 	afterEach(() => jest.clearAllMocks());
 
-	it("should jump to map position when map param is provided", () => {
+	it("should jump to map position when map param is provided", async () => {
 		const params = { map: "10/20/30" };
 		const mapOpts = { center: [30,20], zoom: 10, pitch: 0 };
 
-		alterMapState(map, params);
+		await alterMapState(map, params);
 		expect(map.jumpTo).toHaveBeenCalledWith(mapOpts);
 	});
 
-	it("should set visible users when users param is provided", () => {
+	it("should set visible users when users param is provided", async () => {
 		const params = { users: "user1,user2" };
-		alterMapState(map, params);
+		await alterMapState(map, params);
 		expect(map.setVisibleUsers).toHaveBeenCalledWith(["user1", "user2"]);
 	});
 
-	it("should set default visible user when users param is empty", () => {
+	it("should set default visible user when users param is empty", async () => {
 		const params = { users: "" };
-		alterMapState(map, params);
+		await alterMapState(map, params);
 		expect(map.setVisibleUsers).toHaveBeenCalledWith(["geovisio"]);
 	});
 
-	it("should set map filters when params are provided", () => {
+	it("should set map filters when params are provided", async () => {
 		const params = { "date_from": "2024-01-01", "pic_score": "ABC" };
 		const filters = { "minDate": "2024-01-01", "qualityscore": [5,4,3] };
-
-		alterMapState(map, params);
+		await alterMapState(map, params);
 		expect(map.setFilters).toHaveBeenCalledWith(filters);
 	});
 
-	it("should set map background when background param is valid", () => {
+	it("should set map background when background param is valid", async () => {
 		const params = { background: "aerial" };
-		alterMapState(map, params);
+		map.setVisibleUsers = () => Promise.resolve();
+		await alterMapState(map, params);
 		expect(map.setBackground).toHaveBeenCalledWith("aerial");
 	});
 
-	it("should not set map background when background param is invalid", () => {
+	it("should not set map background when background param is invalid", async () => {
 		const params = { background: "invalid" };
-		alterMapState(map, params);
+		await alterMapState(map, params);
 		expect(map.setBackground).not.toHaveBeenCalled();
 	});
 
-	it("should handle multiple params correctly", () => {
+	it("should handle multiple params correctly", async () => {
 		const params = {
 			map: "15/7/6",
 			users: "user1,user2",
@@ -422,7 +422,7 @@ describe("alterMapState", () => {
 		const mapOpts = { center: [6, 7], zoom: 15, pitch: 0 };
 		const filters = { camera: "value1" };
 
-		alterMapState(map, params);
+		await alterMapState(map, params);
 		expect(map.jumpTo).toHaveBeenCalledWith(mapOpts);
 		expect(map.setVisibleUsers).toHaveBeenCalledWith(["user1", "user2"]);
 		expect(map.setFilters).toHaveBeenCalledWith(filters);

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

@@ -2,7 +2,6 @@
 
 exports[`forwardGeocodingBAN works 1`] = `
 Object {
-  "attribution": "BAN",
   "features": Array [
     Object {
       "center": Object {
@@ -16,11 +15,6 @@ Object {
       "zoom": 20,
     },
   ],
-  "licence": "ODbL 1.0",
-  "limit": 1,
-  "query": "8 bd du port",
-  "type": "FeatureCollection",
-  "version": "draft",
 }
 `;
 

package/tests/utils/geocoder.test.js

@@ -30,7 +30,7 @@ describe("forwardGeocodingBAN", () => {
 		const cfg = { query: "bla", limit: 5, proximity: "17.7,-45.2" };
 
 		return geocoder.forwardGeocodingBAN(cfg).then(res => {
-			expect(global.fetch.mock.calls).toEqual([["https://api-adresse.data.gouv.fr/search/?q=bla&limit=5&lat=17.7&lon=-45.2"]]);
+			expect(global.fetch.mock.calls).toEqual([["https://data.geopf.fr/geocodage/search/?q=bla&limit=5&lat=17.7&lon=-45.2"]]);
 			expect(res).toMatchSnapshot();
 		});
 	});

package/tests/utils/utils.test.js

@@ -8,18 +8,18 @@ jest.mock("../../src/utils/map", () => ({
 
 describe("getGrade", () => {
 	it("works with null-like", () => {
-        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, null)).toBeNull();
-        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, undefined)).toBeNull();
-        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, "")).toBeNull();
-    });
+		expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, null)).toBeNull();
+		expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, undefined)).toBeNull();
+		expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, "")).toBeNull();
+	});
 
 	it("works with grade values", () => {
-        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 0)).toBe(1);
-        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 5)).toBe(1);
-        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 12)).toBe(2);
-        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 25)).toBe(3);
-        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 40)).toBe(4);
-    });
+		expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 0)).toBe(1);
+		expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 5)).toBe(1);
+		expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 12)).toBe(2);
+		expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 25)).toBe(3);
+		expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 40)).toBe(4);
+	});
 });
 
 describe("getDistance", () => {
@@ -32,25 +32,25 @@ describe("getDistance", () => {
 });
 
 describe("svgToPSVLink", () => {
-    it("works", () => {
-        const base64Svg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxjaXJjbGUgY3g9JzUnIGN5PSc1JyByPSc1JyBmaWxsPScjMDAwJy8+PC9zdmc+";
-        const fillColor = "red";
-        const result = utils.svgToPSVLink(base64Svg, fillColor);
-        
-        expect(result).toBeInstanceOf(HTMLButtonElement);
-        expect(result.classList.contains("pnx-psv-tour-arrows")).toBe(true);
-        expect(result.style.color).toBe(fillColor);
-        expect(result.querySelector("svg")).not.toBeNull();
-    });
-
-    it("works with invalid input", () => {
-        const invalidBase64Svg = "http://test.net/invalid_string";
-        const result = utils.svgToPSVLink(invalidBase64Svg, "blue");
-        
-        expect(result).toBeInstanceOf(HTMLImageElement);
-        expect(result.src).toBe(invalidBase64Svg);
-        expect(result.alt).toBe("");
-    });
+	it("works", () => {
+		const base64Svg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxjaXJjbGUgY3g9JzUnIGN5PSc1JyByPSc1JyBmaWxsPScjMDAwJy8+PC9zdmc+";
+		const fillColor = "red";
+		const result = utils.svgToPSVLink(base64Svg, fillColor);
+		
+		expect(result).toBeInstanceOf(HTMLButtonElement);
+		expect(result.classList.contains("pnx-psv-tour-arrows")).toBe(true);
+		expect(result.style.color).toBe(fillColor);
+		expect(result.querySelector("svg")).not.toBeNull();
+	});
+
+	it("works with invalid input", () => {
+		const invalidBase64Svg = "http://test.net/invalid_string";
+		const result = utils.svgToPSVLink(invalidBase64Svg, "blue");
+		
+		expect(result).toBeInstanceOf(HTMLImageElement);
+		expect(result.src).toBe(invalidBase64Svg);
+		expect(result.alt).toBe("");
+	});
 });
 
 describe("getAzimuth", () => {
@@ -197,92 +197,119 @@ describe("xyzToPosition", () => {
 	});
 });
 
+describe("degToDms", () => {
+	it("converts positive decimal degrees to DMS correctly", () => {
+		const result = utils.degToDms(45.7896541);
+		expect(result).toEqual({ d: 45, m: 47, s: 22.755 });
+	});
+
+	it("converts negative decimal degrees to DMS correctly 1", () => {
+		const result = utils.degToDms(-12.751234);
+		expect(result).toEqual({ d: -12, m: 45, s: 4.442 });
+	});
+
+	it("converts negative decimal degrees to DMS correctly 2", () => {
+		const result = utils.degToDms(-21.007598);
+		expect(result).toEqual({ d: -21, m: 0, s: 27.353 });
+	});
+
+	it("converts zero degrees to DMS correctly", () => {
+		const result = utils.degToDms(0);
+		expect(result).toEqual({ d: 0, m: 0, s: 0 });
+	});
+
+	it("handles integer degrees correctly", () => {
+		const result = utils.degToDms(90);
+		expect(result).toEqual({ d: 90, m: 0, s: 0 });
+	});
+});
+
 describe("josmBboxParameters", () => {
 	it("works with null-like", () => {
-        expect(utils.josmBboxParameters(null)).toBeNull();
-        expect(utils.josmBboxParameters(undefined)).toBeNull();
-    });
-
-    it("works without azimuth", () => {
-        const meta = { gps: [2.3522, 48.8566] };
-        const result = utils.josmBboxParameters(meta);
-        expect(result).toBe("left=2.3522&right=2.3522&top=48.8566&bottom=48.8566&changeset_source=Panoramax");
-    });
-
-    it("works with azimuth = 0", () => {
-        const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 0 } };
-        const result = utils.josmBboxParameters(meta);
-        expect(result).toBe("left=2.3522&right=2.3524&top=48.8568&bottom=48.8566&changeset_source=Panoramax");
-    });
-
-    it("works with azimuth = 180", () => {
-        const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 180 } };
-        const result = utils.josmBboxParameters(meta);
-        expect(result).toBe("left=2.352&right=2.3524&top=48.8566&bottom=48.8564&changeset_source=Panoramax");
-    });
-
-    it("works with azimuth = 90", () => {
-        const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 90 } };
-        const result = utils.josmBboxParameters(meta);
-        expect(result).toBe("left=2.3522&right=2.3524&top=48.8568&bottom=48.8564&changeset_source=Panoramax");
-    });
-
-    it("works with azimuth = 270", () => {
-        const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 270 } };
-        const result = utils.josmBboxParameters(meta);
-        expect(result).toBe("left=2.352&right=2.3522&top=48.8568&bottom=48.8564&changeset_source=Panoramax");
-    });
+		expect(utils.josmBboxParameters(null)).toBeNull();
+		expect(utils.josmBboxParameters(undefined)).toBeNull();
+	});
+
+	it("works without azimuth", () => {
+		const meta = { gps: [2.3522, 48.8566] };
+		const result = utils.josmBboxParameters(meta);
+		expect(result).toBe("left=2.3522&right=2.3522&top=48.8566&bottom=48.8566&changeset_source=Panoramax");
+	});
+
+	it("works with azimuth = 0", () => {
+		const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 0 } };
+		const result = utils.josmBboxParameters(meta);
+		expect(result).toBe("left=2.3522&right=2.3524&top=48.8568&bottom=48.8566&changeset_source=Panoramax");
+	});
+
+	it("works with azimuth = 180", () => {
+		const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 180 } };
+		const result = utils.josmBboxParameters(meta);
+		expect(result).toBe("left=2.352&right=2.3524&top=48.8566&bottom=48.8564&changeset_source=Panoramax");
+	});
+
+	it("works with azimuth = 90", () => {
+		const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 90 } };
+		const result = utils.josmBboxParameters(meta);
+		expect(result).toBe("left=2.3522&right=2.3524&top=48.8568&bottom=48.8564&changeset_source=Panoramax");
+	});
+
+	it("works with azimuth = 270", () => {
+		const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 270 } };
+		const result = utils.josmBboxParameters(meta);
+		expect(result).toBe("left=2.352&right=2.3522&top=48.8568&bottom=48.8564&changeset_source=Panoramax");
+	});
 });
 
 describe("getCookie", () => {
-    it("should return the value of the specified cookie", () => {
-        jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=abc123");
-        expect(utils.getCookie("session")).toBe("abc123");
-    });
-
-    it("should return null if the cookie is not found", () => {
-        jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=abc123");
-        expect(utils.getCookie("user_id")).toBeUndefined();
-    });
-
-    it("should return the correct value when multiple cookies are set", () => {
-        jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=abc123; user_id=789; user_name=John");
-        expect(utils.getCookie("user_id")).toBe("789");
-    });
-
-    it("should return null if cookie with the specified name has no value", () => {
-        jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=; user_id=789");
-        expect(utils.getCookie("session")).toBe("");
-    });
-
-    it("should return the correct value when the cookie contains =", () => {
-        jest.spyOn(document, "cookie", "get").mockReturnValueOnce("custom_cookie=abc=123");
-        expect(utils.getCookie("custom_cookie")).toBe("abc=123");
-    });
+	it("should return the value of the specified cookie", () => {
+		jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=abc123");
+		expect(utils.getCookie("session")).toBe("abc123");
+	});
+
+	it("should return null if the cookie is not found", () => {
+		jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=abc123");
+		expect(utils.getCookie("user_id")).toBeUndefined();
+	});
+
+	it("should return the correct value when multiple cookies are set", () => {
+		jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=abc123; user_id=789; user_name=John");
+		expect(utils.getCookie("user_id")).toBe("789");
+	});
+
+	it("should return null if cookie with the specified name has no value", () => {
+		jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=; user_id=789");
+		expect(utils.getCookie("session")).toBe("");
+	});
+
+	it("should return the correct value when the cookie contains =", () => {
+		jest.spyOn(document, "cookie", "get").mockReturnValueOnce("custom_cookie=abc=123");
+		expect(utils.getCookie("custom_cookie")).toBe("abc=123");
+	});
 });
 
 describe("getUserAccount", () => {
-    it("should return an object with user id and name when all cookies are present", () => {
-        jest.spyOn(document, "cookie", "get").mockReturnValue("session=abc123; user_id=789; user_name=John");
-        expect(utils.getUserAccount()).toEqual({ id: "789", name: "John" });
-    });
-
-    it("should return null if session cookie is missing", () => {
-        jest.spyOn(document, "cookie", "get").mockReturnValue("user_id=789; user_name=John");
-        expect(utils.getUserAccount()).toBeNull();
-    });
-
-    it("should return null if user_id cookie is missing", () => {
-        jest.spyOn(document, "cookie", "get").mockReturnValue("session=abc123; user_name=John");
-        expect(utils.getUserAccount()).toBeNull();
-    });
-
-    it("should return null if user_name cookie is missing", () => {
-        jest.spyOn(document, "cookie", "get").mockReturnValue("session=abc123; user_id=789");
-        expect(utils.getUserAccount()).toBeNull();
-    });
-
-    it("should return null if all cookies are missing", () => {
-        expect(utils.getUserAccount()).toBeNull();
-    });
+	it("should return an object with user id and name when all cookies are present", () => {
+		jest.spyOn(document, "cookie", "get").mockReturnValue("session=abc123; user_id=789; user_name=John");
+		expect(utils.getUserAccount()).toEqual({ id: "789", name: "John" });
+	});
+
+	it("should return null if session cookie is missing", () => {
+		jest.spyOn(document, "cookie", "get").mockReturnValue("user_id=789; user_name=John");
+		expect(utils.getUserAccount()).toBeNull();
+	});
+
+	it("should return null if user_id cookie is missing", () => {
+		jest.spyOn(document, "cookie", "get").mockReturnValue("session=abc123; user_name=John");
+		expect(utils.getUserAccount()).toBeNull();
+	});
+
+	it("should return null if user_name cookie is missing", () => {
+		jest.spyOn(document, "cookie", "get").mockReturnValue("session=abc123; user_id=789");
+		expect(utils.getUserAccount()).toBeNull();
+	});
+
+	it("should return null if all cookies are missing", () => {
+		expect(utils.getUserAccount()).toBeNull();
+	});
 });