@panoramax/web-viewer 4.0.3 → 4.1.0

package/src/utils/URLHandler.js

@@ -5,7 +5,7 @@ import {
 // List of supported parameters
 const MANAGED_PARAMETERS = [
 	"speed", "nav", "focus", "pic", "xyz", "map",
-	"background", "users", "pic_score", "s"
+	"background", "users", "pic_score", "s", "xywh",
 ].concat(Object.values(MAP_FILTERS_JS2URL));
 
 // Events to listen on parent and PSV
@@ -45,6 +45,14 @@ export default class URLHandler extends EventTarget {
 		}
 	}
 
+	/**
+	 * Call this function to stop listening to global events.
+	 * @memberof Panoramax.utils.URLHandler#
+	 */
+	destroy() {
+		window.removeEventListener("popstate", this._onURLChange);
+	}
+
 	/**
 	 * Compute next values to insert in URL
 	 * @returns {object} Query parameters

package/src/utils/map.js

@@ -95,6 +95,17 @@ export function getThumbGif(lang) {
 	return thumbGif;
 }
 
+export function isNullCoordinates(c) {
+	return (
+		c === null
+		|| c === undefined
+		|| (Array.isArray(c) && (
+			(c.length === 2 && c[0] === 0 && c[1] === 0)
+			|| c.length < 2
+		))
+	);
+}
+
 /**
  * Is given layer a label layer.
  * 
@@ -220,6 +231,11 @@ export function combineStyles(parent, options) {
 		style.layers.push(capitalLayer);
 	}
 
+	// Fix for maxzoom on IGN tiles
+	if(style?.sources?.plan_ign) {
+		style.sources.plan_ign.maxzoom = 18;
+	}
+
 	return style;
 }
 
@@ -408,7 +424,14 @@ export function linkMapAndPhoto(parent) {
 			}
 		}
 		else {
-			parent.map.displayPictureMarker(e.detail.lon, e.detail.lat, parent.psv.getXY().x, e.detail.first);
+			parent.map.displayPictureMarker(
+				e.detail.lon,
+				e.detail.lat,
+				parent.psv.getXY().x,
+				e.detail.first && !isNullCoordinates(parent._initParams?.getMapPostInit()?.center), // Skip centering if precise coordinates are set from URL
+				e.detail.picId
+			);
+
 			if(parent?.isMapWide?.()) {
 				parent?.mini?.removeAttribute("collapsed");
 			}

package/src/utils/semantics.js

@@ -79,7 +79,7 @@ const KNOWN_PREFIXES = {
  * @private
  */
 export function decodeBasicTag(tag) {
-	const firstEqual = (tag || "").indexOf("=");
+	const firstEqual = (tag || "").lastIndexOf("=");
 	if(firstEqual < 0) { return null; }
 	return {
 		key: decodeKey(tag.substring(0, firstEqual)),
@@ -99,6 +99,7 @@ export function decodeKey(key = "") {
 
 	const [, prefix, subkey, qualifies ] = match;
 	return {
+		key: key,
 		prefix: prefix || "",
 		subkey,
 		qualifies: decodeBasicTag(qualifies),
@@ -106,6 +107,57 @@ export function decodeKey(key = "") {
 }
 
 
+/**
+ * Transforms a string containing a list of tags in a ready-to-use parsed object list.
+ * @param {string} str The string to read (each tag separated by newline `\n`)
+ * @returns {object[]} List of API-formatted tags
+ */
+export function parseSemanticsString(str) {
+	const parsedTags = str.split("\n").map(t => {
+		const parts = decodeBasicTag(t);
+		if(
+			parts
+			&& parts.key.key.length <= 256
+			&& parts.value.length <= 2048
+		) {
+			return { key: parts.key.key, value: parts.value };
+		} else { return null; }
+	});
+
+	if(parsedTags.findIndex(v => !v) >= 0) {
+		if(str.trim().length === 0 && parsedTags.length === 1) { return []; }
+		throw new Error("Invalid tags");
+	}
+
+	return parsedTags;
+}
+
+
+/**
+ * Computes the difference between two set of API tags.
+ * API expects a delta between old & new, so result contains only
+ * added and deleted tags.
+ * @param {object[]} prev The previous set of tags
+ * @param {object[]} next The new set of tags
+ * @returns {object[]} The new set of tags, with only added/deleted tags
+ */
+export function computeDiffTags(prev = [], next = []) {
+	const res = [];
+
+	// Look for new values
+	(next || [])
+		.filter(nt => prev.find(pt => pt.key == nt.key && pt.value == nt.value) === undefined)
+		.forEach(t => res.push({key: t.key, value: t.value, action: "add"}));
+
+	// Look for prev values missing in next
+	(prev || [])
+		.filter(pt => next.find(nt => pt.key == nt.key && pt.value == nt.value) === undefined)
+		.forEach(t => res.push({key: t.key, value: t.value, action: "delete"}));
+
+	return res;
+}
+
+
 /**
  * Transforms raw API semantics properties into ready-to-display container.
  * @param {object[]} tags The API semantics tags

package/src/utils/services.js

@@ -4,6 +4,14 @@
  */
 
 
+/**
+ * Panoramax website URL
+ * @returns {string} The website URL
+ */
+export function PanoramaxWebsiteURL() {
+	return "https://panoramax.fr";
+}
+
 /**
  * Panoramax Presets URL
  * @returns {string} The presets URL
@@ -12,6 +20,14 @@ export function PanoramaxPresetsURL() {
 	return "https://presets.panoramax.fr";
 }
 
+/**
+ * Panoramax meta-catalog URL
+ * @returns {string} The metacatalog URL
+ */
+export function PanoramaxMetaCatalogURL() {
+	return "https://explore.panoramax.fr";
+}
+
 /**
  * Temaki icons URL
  * @param {string} [iconName] The icon name to insert in URL

package/src/utils/widgets.js

@@ -70,3 +70,23 @@ export function listenForMenuClosure(me, callback) {
 		me._parent.legend?.addEventListener("click", () => callback());
 	});
 }
+
+/**
+ * Wait for parent availability
+ * @private
+ */
+export function onceParentAvailable(comp) {
+	if(comp._parent) {
+		return Promise.resolve(comp._parent);
+	}
+	else {
+		return new Promise(resolve => {
+			const itv = setInterval(() => {
+				if(comp._parent) {
+					clearInterval(itv);
+					resolve(comp._parent);
+				}
+			}, 100);
+		});
+	}
+}

package/tests/components/core/Editor.test.js

@@ -15,6 +15,6 @@ describe("getClassName", () => {
 
 describe("getSubComponentsNames", () => {
 	it("works", () => {
-		expect(comp.getSubComponentsNames()).toEqual(["loader", "api", "map", "psv"]);
+		expect(comp.getSubComponentsNames()).toEqual(["loader", "api", "map", "psv", "grid"]);
 	});
 });

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

@@ -10,6 +10,13 @@ exports[`_initWidgets should handle widgets if width is not small 1`] = `
         slot="top"
       />,
     ],
+    Array [
+      <pnx-annotations-switch
+        class="pnx-only-psv pnx-print-hidden"
+        size="xl"
+        slot="top"
+      />,
+    ],
     Array [
       <pnx-widget-zoom
         class="pnx-print-hidden"
@@ -23,12 +30,6 @@ 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 {
@@ -61,6 +62,13 @@ exports[`_initWidgets should handle widgets if width is small 1`] = `
         slot="top"
       />,
     ],
+    Array [
+      <pnx-annotations-switch
+        class="pnx-only-psv pnx-print-hidden"
+        size="xl"
+        slot="top"
+      />,
+    ],
     Array [
       <pnx-bottom-drawer
         slot="bottom"
@@ -78,6 +86,10 @@ exports[`_initWidgets should handle widgets if width is small 1`] = `
       "type": "return",
       "value": undefined,
     },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
   ],
 }
 `;

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

@@ -17,13 +17,14 @@ exports[`_initWidgets should handle widgets if width is not small 1`] = `
       />,
     ],
     Array [
-      <pnx-hashtags
+      <pnx-widget-player
         class="pnx-only-psv pnx-print-hidden"
-        slot="top-right"
+        size="xl"
+        slot="top"
       />,
     ],
     Array [
-      <pnx-widget-player
+      <pnx-annotations-switch
         class="pnx-only-psv pnx-print-hidden"
         size="xl"
         slot="top"
@@ -105,6 +106,13 @@ exports[`_initWidgets should handle widgets if width is small 1`] = `
         slot="top"
       />,
     ],
+    Array [
+      <pnx-annotations-switch
+        class="pnx-only-psv pnx-print-hidden"
+        size="xl"
+        slot="top"
+      />,
+    ],
     Array [
       <pnx-widget-geosearch
         class="pnx-only-map pnx-print-hidden"
@@ -150,6 +158,10 @@ exports[`_initWidgets should handle widgets if width is small 1`] = `
       "type": "return",
       "value": undefined,
     },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
   ],
 }
 `;

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

@@ -10,6 +10,7 @@ const createParent = () => ({
 	_t: { pnx: {} },
 	api: {
 		_getFetchOptions: jest.fn(),
+		_getPSVWithCredentials: () => false,
 		getPictureMetadataUrl: (picId, seqId) => `https://geovisio.fr/api/collections/${seqId}/items/${picId}`
 	},
 });

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

@@ -736,5 +736,169 @@ Array [
     "visibility",
     "none",
   ],
+  Array [
+    "geovisio_blabla_pictures",
+    "circle-sort-key",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "hidden",
+        ],
+        true,
+      ],
+      90,
+      10,
+    ],
+  ],
+  Array [
+    "geovisio_pictures",
+    "circle-sort-key",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "hidden",
+        ],
+        true,
+      ],
+      90,
+      10,
+    ],
+  ],
+  Array [
+    "geovisio_blabla_pictures_symbols",
+    "icon-image",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "id",
+        ],
+        undefined,
+      ],
+      "",
+      Array [
+        "==",
+        Array [
+          "get",
+          "type",
+        ],
+        "equirectangular",
+      ],
+      "pnx-arrow-360",
+      "pnx-arrow-flat",
+    ],
+  ],
+  Array [
+    "geovisio_blabla_pictures_symbols",
+    "symbol-sort-key",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "hidden",
+        ],
+        true,
+      ],
+      90,
+      10,
+    ],
+  ],
+  Array [
+    "geovisio_pictures_symbols",
+    "icon-image",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "id",
+        ],
+        undefined,
+      ],
+      "",
+      Array [
+        "==",
+        Array [
+          "get",
+          "type",
+        ],
+        "equirectangular",
+      ],
+      "pnx-arrow-360",
+      "pnx-arrow-flat",
+    ],
+  ],
+  Array [
+    "geovisio_pictures_symbols",
+    "symbol-sort-key",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "hidden",
+        ],
+        true,
+      ],
+      90,
+      10,
+    ],
+  ],
+  Array [
+    "geovisio_blabla_sequences",
+    "line-sort-key",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "hidden",
+        ],
+        true,
+      ],
+      90,
+      10,
+    ],
+  ],
+  Array [
+    "geovisio_blabla_sequences",
+    "line-cap",
+    "square",
+  ],
+  Array [
+    "geovisio_sequences",
+    "line-sort-key",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "hidden",
+        ],
+        true,
+      ],
+      90,
+      10,
+    ],
+  ],
+  Array [
+    "geovisio_sequences",
+    "line-cap",
+    "square",
+  ],
 ]
 `;

package/tests/utils/InitParameters.test.js

@@ -66,6 +66,7 @@ describe("InitParameters", () => {
 			geocoder: true,
 			widgets: true,
 			forceFocus: true,
+			keyboardShortcuts: true,
 		});
 		expect(initParams._psvInit).toEqual({});
 		expect(initParams._psvAny).toEqual({
@@ -111,11 +112,13 @@ describe("InitParameters", () => {
 			geocoder: true,
 			widgets: true,
 			forceFocus: true,
+			keyboardShortcuts: true,
 		});
 	});
 
 	it("uses browserStorage parameters if no URL parameter is available", () => {
 		componentAttrs.map.raster = {};
+		componentAttrs.picture = undefined;
 		const initParams = new InitParameters(componentAttrs, undefined, browserStorage);
 		expect(initParams._mapAny).toEqual({
 			theme: "qualityscore",
@@ -128,6 +131,20 @@ describe("InitParameters", () => {
 		});
 	});
 
+	it("uses browserStorage parameters if no URL parameter is available, except map coords if picture is set", () => {
+		componentAttrs.map.raster = {};
+		const initParams = new InitParameters(componentAttrs, undefined, browserStorage);
+		expect(initParams._mapAny).toEqual({
+			theme: "qualityscore",
+			background: "aerial",
+			center: [0,0],
+			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 };
@@ -161,6 +178,7 @@ describe("InitParameters", () => {
 			geocoder: true,
 			widgets: true,
 			forceFocus: true,
+			keyboardShortcuts: true,
 		});
 	});
 
@@ -243,6 +261,15 @@ describe("InitParameters", () => {
 		expect(initParams._mapAny.background).toBe("streets");
 		expect(console.warn).toHaveBeenCalledWith("Parameter background can't be 'aerial' as no aerial imagery is available");
 	});
+
+	it("should handle keyboardShortcuts=false", () => {
+		componentAttrs["keyboard-shortcuts"] = "false";
+		const initParams = new InitParameters(componentAttrs, urlParams);
+		expect(initParams._mapInit.keyboard).toBe(false);
+		expect(initParams._parentPostInit.keyboardShortcuts).toBe(false);
+		expect(initParams._psvInit.keyboard).toBe(false);
+		expect(initParams._psvInit.keyboardActions).toEqual({});
+	});
 });
 
 describe("getMapPositionFromString", () => {

package/tests/utils/map.test.js

@@ -11,6 +11,18 @@ describe("getThumbGif", () => {
 	});
 });
 
+describe("isNullCoordinates", () =>  {
+	it.each([
+		[undefined, true],
+		[null, true],
+		[[0,0], true],
+		[[48.7, -1.5], false],
+		[[], true],
+	])("works with %s", (input, expected) => {
+		expect(map.isNullCoordinates(input)).toBe(expected);
+	});
+});
+
 describe("isLabelLayer", () => {
 	it("works with just text-field", () => {
 		const layer = { type: "symbol", layout: { "text-field": "Label" } };

package/tests/utils/semantics.test.js

@@ -1,4 +1,6 @@
-import { decodeKey, decodeBasicTag, groupByPrefix } from "../../src/utils/semantics";
+import {
+	decodeKey, decodeBasicTag, computeDiffTags, groupByPrefix
+} from "../../src/utils/semantics";
 
 describe("decodeBasicTag", () => {
 	test("should return null if no equal sign is present", () => {
@@ -7,14 +9,14 @@ describe("decodeBasicTag", () => {
 
 	test("should correctly decode a tag with an equal sign", () => {
 		expect(decodeBasicTag("key=value")).toEqual({
-			key: { prefix: "", subkey: "key", qualifies: null },
+			key: { key: "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 },
+			key: { key: "osm|key", prefix: "osm", subkey: "key", qualifies: null },
 			value: "value"
 		});
 	});
@@ -23,6 +25,7 @@ describe("decodeBasicTag", () => {
 describe("decodeKey", () => {
 	test("should return default structure if key does not match regex", () => {
 		expect(decodeKey("panoKey")).toEqual({
+			key: "panoKey",
 			prefix: "",
 			subkey: "panoKey",
 			qualifies: null
@@ -31,6 +34,7 @@ describe("decodeKey", () => {
 
 	test("should correctly decode a key with a prefix", () => {
 		expect(decodeKey("osm|traffic_sign")).toEqual({
+			key: "osm|traffic_sign",
 			prefix: "osm",
 			subkey: "traffic_sign",
 			qualifies: null
@@ -39,21 +43,46 @@ describe("decodeKey", () => {
 
 	test("should correctly decode a key with qualifiers", () => {
 		expect(decodeKey("detection_model[camera_mount=pole]")).toEqual({
+			key: "detection_model[camera_mount=pole]",
 			prefix: "",
 			subkey: "detection_model",
-			qualifies: { key: { prefix: "", subkey: "camera_mount", qualifies: null }, value: "pole" }
+			qualifies: { key: { key: "camera_mount", 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({
+			key: "osm|source[osm|traffic_sign=stop]",
 			prefix: "osm",
 			subkey: "source",
-			qualifies: { key: { prefix: "osm", subkey: "traffic_sign", qualifies: null }, value: "stop" }
+			qualifies: { key: { key: "osm|traffic_sign", prefix: "osm", subkey: "traffic_sign", qualifies: null }, value: "stop" }
 		});
 	});
 });
 
+describe("computeDiffTags", () => {
+	it("should return new set of tags when no tag is missing in next", () => {
+		const prev = [{key: "tag1", value: "value1"}, {key: "tag2", value: "value2"}];
+		const next = [{key: "tag1", value: "value1"}, {key: "tag2", value: "value2"}, {key: "tag3", value: "value3"}];
+		
+		expect(computeDiffTags(prev, next)).toEqual([{key: "tag3", value: "value3", action: "add"}]);
+	});
+	
+	it("should return new set of tags with missing tags marked as delete when some tag is missing in next", () => {
+		const prev = [{key: "tag1", value: "value1"}, {key: "tag2", value: "value2"}];
+		const next = [{key: "tag1", value: "value1"}];
+		
+		expect(computeDiffTags(prev, next)).toEqual([{key: "tag2", value: "value2", action: "delete"}]);
+	});
+	
+	it("should return new set of tags with all tags marked as delete when all tags are missing in next", () => {
+		const prev = [{key: "tag1", value: "value1"}, {key: "tag2", value: "value2"}];
+		const next = [];
+		
+		expect(computeDiffTags(prev, next)).toEqual([{key: "tag1", value: "value1", action: "delete"}, {key: "tag2", value: "value2", action: "delete"}]);
+	});
+});
+
 describe("groupByPrefix", () => {
 	test("should group tags by prefix", () => {
 		const tags = [

package/docs/reference/components/ui/HashTags.md

@@ -1,15 +0,0 @@
-<a name="Panoramax.components.ui.HashTags"></a>
-
-## Panoramax.components.ui.HashTags ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
-**Kind**: static class of <code>Panoramax.components.ui</code>  
-**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
-**Element**: pnx-hashtags  
-<a name="new_Panoramax.components.ui.HashTags_new"></a>
-
-### new HashTags()
-HashTags component shows the list of hashtags associated to a picture.
-
-**Example**  
-```html
-<pnx-hashtags ._parent=${viewer} />
-```