@panoramax/web-viewer 4.0.2 → 4.0.3-develop-d59993ce

package/src/utils/widgets.js

@@ -1,5 +1,6 @@
-// Every single icon imported separately to reduce bundle size
 import { icon } from "@fortawesome/fontawesome-svg-core";
+import { setCustomIconLoader } from "iconify-icon";
+import { TemakiIconURL } from "./services";
 
 
 /**
@@ -13,6 +14,22 @@ export function fa(i, o) {
 	return icon(i, o).node[0];
 }
 
+/**
+ * Register more icons providers for Iconify
+ * @private
+ */
+export function moreIcons() {
+	setCustomIconLoader(async (name) => {
+		const response = await fetch(TemakiIconURL(name));
+		if (!response.ok) {
+			return null;
+		}
+		return {
+			body: await response.text()
+		};
+	}, "temaki");
+}
+
 /**
  * Create a web component with its initial properties
  * @private

package/tests/components/core/__snapshots__/PhotoViewer.test.js.snap

@@ -23,6 +23,12 @@ exports[`_initWidgets should handle widgets if width is not small 1`] = `
         slot="top-left"
       />,
     ],
+    Array [
+      <pnx-hashtags
+        class="pnx-only-psv pnx-print-hidden"
+        slot="top-right"
+      />,
+    ],
   ],
   "results": Array [
     Object {
@@ -37,6 +43,10 @@ exports[`_initWidgets should handle widgets if width is not small 1`] = `
       "type": "return",
       "value": undefined,
     },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
   ],
 }
 `;

package/tests/components/core/__snapshots__/Viewer.test.js.snap

@@ -16,6 +16,12 @@ exports[`_initWidgets should handle widgets if width is not small 1`] = `
         slot="top-left"
       />,
     ],
+    Array [
+      <pnx-hashtags
+        class="pnx-only-psv pnx-print-hidden"
+        slot="top-right"
+      />,
+    ],
     Array [
       <pnx-widget-player
         class="pnx-only-psv pnx-print-hidden"
@@ -68,6 +74,10 @@ exports[`_initWidgets should handle widgets if width is not small 1`] = `
       "type": "return",
       "value": undefined,
     },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
   ],
 }
 `;

package/tests/data/Map_geocoder_nominatim.json

@@ -1,56 +1,41 @@
 {
   "type": "FeatureCollection",
-  "licence": "Data © OpenStreetMap contributors, ODbL 1.0. https://osm.org/copyright",
+  "geocoding": {
+    "version": "0.1.0",
+    "attribution": "Data © OpenStreetMap contributors, ODbL 1.0. http://osm.org/copyright",
+    "licence": "ODbL",
+    "query": "paris"
+  },
   "features": [
     {
       "type": "Feature",
       "properties": {
-        "place_id": 297417241,
-        "osm_type": "relation",
-        "osm_id": 7444,
-        "display_name": "Paris, Île-de-France, France métropolitaine, France",
-        "place_rank": 15,
-        "category": "boundary",
-        "type": "administrative",
-        "importance": 0.9317101715588673,
-        "icon": "https://nominatim.openstreetmap.org/ui/mapicons/poi_boundary_administrative.p.20.png",
-        "address": {
-          "suburb": "Paris",
-          "city_district": "Paris",
-          "city": "Paris",
-          "ISO3166-2-lvl6": "FR-75",
+        "geocoding": {
+          "place_id": 88066702,
+          "osm_type": "relation",
+          "osm_id": 71525,
+          "osm_key": "boundary",
+          "osm_value": "administrative",
+          "type": "city",
+          "label": "Paris, Île-de-France, France métropolitaine, France",
+          "name": "Paris",
           "state": "Île-de-France",
-          "ISO3166-2-lvl4": "FR-IDF",
-          "region": "France métropolitaine",
           "country": "France",
-          "country_code": "fr"
+          "country_code": "fr",
+          "admin": {
+            "level6": "Paris",
+            "level4": "Île-de-France",
+            "level3": "France métropolitaine"
+          }
         }
       },
-      "bbox": [
-        2.224122,
-        48.8155755,
-        2.4697602,
-        48.902156
-      ],
       "geometry": {
-        "type": "Polygon",
+        "type": "Point",
         "coordinates": [
-          [
-            [
-              2.224122,
-              48.854199
-            ],
-            [
-              2.224125,
-              48.85402
-            ],
-            [
-              2.224125,
-              48.853869
-            ]
-          ]
+          2.3483915,
+          48.8534951
         ]
       }
     }
   ]
-}
+}

package/tests/utils/PresetsManager.test.js

@@ -0,0 +1,123 @@
+import PresetsManager from "../../src/utils/PresetsManager";
+
+const mockPresets = {
+	"osm_traffic_sign": {
+		"icon": "fas-directions",
+		"tags": {
+			"osm|traffic_sign": "*"
+		},
+		"geometry": [
+			"point",
+			"vertex"
+		]
+	},
+	"osm_traffic_calming": {
+		"icon": "temaki-diamond",
+		"tags": {
+			"osm|traffic_calming": "*"
+		},
+		"geometry": [
+			"vertex"
+		]
+	},
+	"osm_shop": {
+		"icon": "maki-shop",
+		"tags": {
+			"osm|shop": "*"
+		},
+		"geometry": [
+			"point",
+			"area"
+		]
+	},
+};
+
+// Mock des appels fetch
+global.fetch = jest.fn(() =>
+	Promise.resolve({
+		ok: true,
+		json: () => Promise.resolve({}),
+	})
+);
+
+beforeEach(() => {
+	fetch.mockClear();
+});
+
+it("should initialize with default values", () => {
+	const presetsManager = new PresetsManager(null, true);
+	expect(presetsManager._ready).toBe(false);
+	expect(presetsManager._presets).toBe(null);
+	expect(presetsManager._translations).toEqual({});
+});
+
+it("should load translations and presets", async () => {
+	const mockTranslationsEN = { en: { presets: { preset1: { name: "Preset 1" } } } };
+	const mockTranslationsFR = { fr: { presets: { preset1: { name: "Préréglage 1" } } } };
+
+	fetch.mockImplementationOnce(() =>
+		Promise.resolve({
+			ok: true,
+			json: () => Promise.resolve(mockTranslationsEN),
+		})
+	).mockImplementationOnce(() =>
+		Promise.resolve({
+			ok: true,
+			json: () => Promise.resolve(mockTranslationsFR),
+		})
+	).mockImplementationOnce(() =>
+		Promise.resolve({
+			ok: true,
+			json: () => Promise.resolve(mockPresets),
+		})
+	);
+
+	const presetsManager = new PresetsManager("fr");
+	await presetsManager.onceReady();
+  
+	expect(presetsManager._translations.en).toEqual(mockTranslationsEN.en.presets);
+	expect(presetsManager._translations.fr).toEqual(mockTranslationsFR.fr.presets);
+	expect(presetsManager._presets).toEqual(mockPresets);
+	expect(presetsManager._ready).toBe(true);
+});
+
+it("should handle errors during load", async () => {
+	global.console = { error: jest.fn() };
+
+	fetch.mockImplementation(() =>
+		Promise.resolve({
+			ok: false,
+		})
+	);
+
+	const presetsManager = new PresetsManager();
+	await expect(presetsManager.onceReady()).rejects.toBeUndefined();
+	expect(presetsManager._ready).toBe(-1);
+});
+
+it("should find the best matching preset", async () => {
+	fetch.mockImplementationOnce(() =>
+		Promise.resolve({
+			ok: true,
+			json: () => Promise.resolve({}),
+		})
+	).mockImplementationOnce(() =>
+		Promise.resolve({
+			ok: true,
+			json: () => Promise.resolve({}),
+		})
+	).mockImplementationOnce(() =>
+		Promise.resolve({
+			ok: true,
+			json: () => Promise.resolve(mockPresets),
+		})
+	);
+
+	const presetsManager = new PresetsManager();
+	await presetsManager.onceReady();
+
+	const feature = { semantics: [{ key: "key1", value: "value1" }, { key: "key2", value: "value2" }] };
+	const bestPreset = await presetsManager.getPreset(feature);
+
+	expect(bestPreset).toEqual(mockPresets.preset2);
+});

package/tests/utils/URLHandler.test.js

@@ -243,6 +243,48 @@ describe("currentURLParams", () => {
 		const uh = new URLHandler(v);
 		expect(uh.currentURLParams()).toStrictEqual({});
 	});
+
+	it("works with shortlinks", () => {
+		delete window.location;
+		window.location = { search: "?s=fp;s2;pa0270208-d79d-49a9-85c7-a352bb96962e;c282.09/9.34/30;m17/43.107492/5.868459;va;bs" };
+		const v = { addEventListener: jest.fn() };
+		const uh = new URLHandler(v);
+		expect(uh.currentURLParams()).toStrictEqual({
+			"focus": "pic",
+			"speed": 200,
+			"pic": "a0270208-d79d-49a9-85c7-a352bb96962e",
+			"xyz": "282.09/9.34/30",
+			"map": "17/43.107492/5.868459",
+			"theme": "age",
+			"background": "streets",
+			"camera": undefined,
+			"date_from": undefined,
+			"date_to": undefined,
+			"pic_score": undefined,
+			"users": undefined
+		});
+	});
+
+	it("works with shortlinks urlEncoded", () => {
+		delete window.location;
+		window.location = { search: "?s=fp%3Bs2%3Bpa0270208-d79d-49a9-85c7-a352bb96962e%3Bc282.09/9.34/30%3Bm17/43.107492/5.868459%3Bva%3Bbs" };
+		const v = { addEventListener: jest.fn() };
+		const uh = new URLHandler(v);
+		expect(uh.currentURLParams()).toStrictEqual({
+			"focus": "pic",
+			"speed": 200,
+			"pic": "a0270208-d79d-49a9-85c7-a352bb96962e",
+			"xyz": "282.09/9.34/30",
+			"map": "17/43.107492/5.868459",
+			"theme": "age",
+			"background": "streets",
+			"camera": undefined,
+			"date_from": undefined,
+			"date_to": undefined,
+			"pic_score": undefined,
+			"users": undefined
+		});
+	});
 });
 
 describe("currentMapString", () => {

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",
 }
 `;
 
@@ -28,20 +22,15 @@ exports[`forwardGeocodingNominatim works 1`] = `
 Object {
   "features": Array [
     Object {
-      "bounds": Object {
-        "ne": Object {
-          "lat": 47.8,
-          "lng": -1.7,
-        },
-        "sw": Object {
-          "lat": 47.8,
-          "lng": -1.7,
-        },
+      "center": Object {
+        "lat": 47.8,
+        "lng": -1.7,
       },
-      "place_name": "Paris",
+      "place_name": "Paris, Île-de-France",
       "place_type": Array [
         "place",
       ],
+      "zoom": 12,
     },
   ],
 }

package/tests/utils/geocoder.test.js

@@ -13,7 +13,7 @@ describe("forwardGeocodingNominatim", () => {
 		const cfg = { query: "bla", limit: 5, bbox: "17.7,-45.2,17.8,-45.1" };
 
 		return geocoder.forwardGeocodingNominatim(cfg).then(res => {
-			expect(global.fetch.mock.calls).toEqual([["https://nominatim.openstreetmap.org/search?q=bla&limit=5&viewbox=17.7%2C-45.2%2C17.8%2C-45.1&format=geojson&polygon_geojson=1&addressdetails=1"]]);
+			expect(global.fetch.mock.calls).toEqual([["https://nominatim.openstreetmap.org/search?q=bla&limit=5&viewbox=17.7%2C-45.2%2C17.8%2C-45.1&format=geocodejson&addressdetails=1"]]);
 			expect(res).toMatchSnapshot();
 		});
 	});

package/tests/utils/semantics.test.js

@@ -0,0 +1,125 @@
+import { decodeKey, decodeBasicTag, groupByPrefix } from "../../src/utils/semantics";
+
+describe("decodeBasicTag", () => {
+	test("should return null if no equal sign is present", () => {
+		expect(decodeBasicTag("key")).toBeNull();
+	});
+
+	test("should correctly decode a tag with an equal sign", () => {
+		expect(decodeBasicTag("key=value")).toEqual({
+			key: { prefix: "", subkey: "key", qualifies: null },
+			value: "value"
+		});
+	});
+
+	test("should correctly decode a tag with a prefix", () => {
+		expect(decodeBasicTag("osm|key=value")).toEqual({
+			key: { prefix: "osm", subkey: "key", qualifies: null },
+			value: "value"
+		});
+	});
+});
+
+describe("decodeKey", () => {
+	test("should return default structure if key does not match regex", () => {
+		expect(decodeKey("panoKey")).toEqual({
+			prefix: "",
+			subkey: "panoKey",
+			qualifies: null
+		});
+	});
+
+	test("should correctly decode a key with a prefix", () => {
+		expect(decodeKey("osm|traffic_sign")).toEqual({
+			prefix: "osm",
+			subkey: "traffic_sign",
+			qualifies: null
+		});
+	});
+
+	test("should correctly decode a key with qualifiers", () => {
+		expect(decodeKey("detection_model[camera_mount=pole]")).toEqual({
+			prefix: "",
+			subkey: "detection_model",
+			qualifies: { key: { prefix: "", subkey: "camera_mount", qualifies: null }, value: "pole" }
+		});
+	});
+
+	test("should correctly decode a key with a prefix and qualifiers", () => {
+		expect(decodeKey("osm|source[osm|traffic_sign=stop]")).toEqual({
+			prefix: "osm",
+			subkey: "source",
+			qualifies: { key: { prefix: "osm", subkey: "traffic_sign", qualifies: null }, value: "stop" }
+		});
+	});
+});
+
+describe("groupByPrefix", () => {
+	test("should group tags by prefix", () => {
+		const tags = [
+			{ key: "osm|highway", value: "residential" },
+			{ key: "wd|P31", value: "Q5" },
+			{ key: "exif|model", value: "CameraModel" }
+		];
+
+		const expected = [
+			{
+				prefix: "osm",
+				title: "OpenStreetMap",
+				tags: [{ key: "highway", value: "residential" }],
+				key_transform: expect.any(Function),
+				logo: "osm.svg",
+				value_transform: expect.any(Function)
+			},
+			{
+				prefix: "wd",
+				title: "Wikidata",
+				tags: [{ key: "P31", value: "Q5" }],
+				key_transform: expect.any(Function),
+				logo: "wd.svg",
+				value_transform: expect.any(Function)
+			},
+			{
+				prefix: "exif",
+				title: "EXIF",
+				tags: [{ key: "model", value: "CameraModel" }]
+			}
+		];
+
+		expect(groupByPrefix(tags)).toEqual(expected);
+	});
+
+	test("should handle qualifiers correctly", () => {
+		const tags = [
+			{ key: "osm|highway", value: "residential" },
+			{ key: "osm|source[osm|highway=residential]", value: "opendata" }
+		];
+
+		const expected = [{
+			prefix: "osm",
+			title: "OpenStreetMap",
+			tags: [{
+				key: "highway",
+				value: "residential",
+				qualifiers: [{ key: "osm|source[osm|highway=residential]", prefix: "osm", subkey: "source", value: "opendata" }]
+			}],
+			key_transform: expect.any(Function),
+			logo: "osm.svg",
+			value_transform: expect.any(Function)
+		}];
+
+		expect(groupByPrefix(tags)).toEqual(expected);
+	});
+
+	test("should handle unknown prefixes", () => {
+		const tags = [ { key: "unknown|key", value: "value" } ];
+
+		const expected = [{
+			prefix: "unknown",
+			title: "unknown",
+			tags: [{ key: "key", value: "value" }]
+		}];
+
+		expect(groupByPrefix(tags)).toEqual(expected);
+	});
+});