@panoramax/web-viewer 4.0.3 → 4.1.0-develop-55fdf56c

package/src/translations/zh_Hant.json

@@ -190,7 +190,34 @@
         "metadata_exif_doc_title": "請參閱 Exiv2 文件以取得 EXIF 和 XMP 標籤定義的完整說明",
         "metadata_location_coordinates": "座標 (經度, 緯度)",
         "metadata_location_copy": "複製 {v}",
-        "metadata_location_copy_more": "更多座標複製選項"
+        "metadata_location_copy_more": "更多座標複製選項",
+        "semantics_title": "標籤",
+        "semantics_tags": "{nb} 個標籤",
+        "semantics_show_annotations": "顯示相片標註",
+        "semantics_show_all_tags": "顯示所有標籤",
+        "semantics_key": "索引鍵",
+        "semantics_annotation_tooltip": "點擊查看詳情",
+        "semantics_features_default_title": "特徵 #{nb}",
+        "semantics_features_subtitle": "{nb} 個關聯的屬性",
+        "semantics_hide_all_tags": "隱藏所有標籤",
+        "semantics_features_none": "此相片尚未檢測到或註釋任何特徵。",
+        "semantics_value": "值",
+        "semantics_tags_picture_none": "此相片尚未加上任何標籤。",
+        "semantics_tags_picture": "相片標籤",
+        "whats_panoramax": "Panoramax 是各地相片的地理共享資源。",
+        "semantics_features": "偵測到的特徵",
+        "semantics_key_doc": "深入了解此索引鍵",
+        "semantics_value_doc": "深入了解此標籤",
+        "semantics_qualifiers": "限定條件",
+        "semantics_hide_annotations": "隱藏相片標註",
+        "semantics_zero_annotations": "此相片尚未加上任何標註",
+        "semantics_hashtags": "相片主題標籤",
+        "semantics_wikidata_properties": {
+            "P31": "隸屬於",
+            "P279": "上級分類",
+            "P361": "所屬實體"
+        },
+        "panoramax": "Panoramax"
     },
     "map": {
         "loading": "正在載入…",
@@ -198,7 +225,7 @@
         "thumbnail": "遊標懸停相片的縮圖",
         "slow_loading": "地圖載入速度緩慢而且可能出現損壞",
         "more_panoramax": "深入了解 Panoramax",
-        "map_data": "地圖資料:"
+        "map_data": "地圖資料: {m}"
     },
     "psv": {
         "ctrlZoom": "使用 CTRL + 滑鼠滾輪縮放圖片",

package/src/utils/API.js

@@ -369,6 +369,22 @@ export default class API extends EventTarget {
 		}
 	}
 
+	/**
+	 * Get the withCredentials function for PhotoSphereViewer to handle fetch credentials parameter.
+	 * @memberOf Panoramax.utils.API#
+	 * @private
+	 * @returns {function} The withCredentials function
+	 */
+	_getPSVWithCredentials() {
+		const fetchOpts = this._getFetchOptions();
+		if(fetchOpts.credentials === "include") {
+			return (url) => url.startsWith(this._endpoint);
+		}
+		else {
+			return undefined;
+		}
+	}
+
 	/**
 	 * Get sequence GeoJSON representation
 	 * @memberOf Panoramax.utils.API#
@@ -738,7 +754,7 @@ export default class API extends EventTarget {
 		return fetch(this._endpoints.user_search.replace(/\/search$/, `/${userId}`), this._getFetchOptions())
 			.then(res => res.json())
 			.then(res => {
-				return res?.name || null;
+				return res?.label || res?.name || null;
 			});
 	}
 

package/src/utils/InitParameters.js

@@ -15,7 +15,7 @@ const MAPLIBRE_OPTIONS = [
 	"boxZoom", "clickTolerance", "collectResourceTiming",
 	"cooperativeGestures", "crossSourceCollisions", "doubleClickZoom", "dragPan",
 	"dragRotate", "fadeDuration", "failIfMajorPerformanceCaveat", "fitBoundsOptions",
-	"hash", "interactive", "keyboard", "localIdeographFontFamily", "locale", "logoPosition",
+	"hash", "interactive", "localIdeographFontFamily", "locale", "logoPosition",
 	"maplibreLogo", "maxBounds", "maxCanvasSize", "maxPitch", "maxTileCacheSize",
 	"maxTileCacheZoomLevels", "maxZoom", "minPitch", "minZoom", "pitch", "pitchWithRotate",
 	"pixelRatio", "preserveDrawingBuffer", "refreshExpiredTiles", "renderWorldCopies",
@@ -64,7 +64,7 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 		let psv_nav = urlParams.nav || componentPsv?.picturesNavigation;
 		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_center = urlMap?.center || (!picture && (browserMap?.center || componentMap.center)) || [0,0];
 		let map_zoom = urlMap?.zoom || browserMap?.zoom || componentMap.zoom;
 		let map_pitch = urlMap?.pitch || componentMap.pitch;
 		let map_bearing = urlMap?.bearing || componentMap.bearing;
@@ -80,6 +80,7 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 		let map_raster = componentMap.raster;
 		let map_attribution = componentMap.attributionControl;
 		let map_others = filterMapLibreOptions(componentMap);
+		let keyboardShortcuts = componentAttrs["keyboard-shortcuts"];
 
 		//  - URL only
 		let psv_xyz = urlParams.xyz;
@@ -88,6 +89,7 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 		let map_pic_type = urlParams.pic_type;
 		let map_camera = urlParams.camera;
 		let map_pic_score = urlParams.pic_score;
+		let psv_xywh = urlParams.xywh;
 
 		// Check coherence
 		if(!["map", "pic"].includes(focus)) {
@@ -108,24 +110,26 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 
 		// Put all attributes in appropriate container
 		this._parentInit = { map, users, fetchOptions, style, lang, endpoint };
-		this._parentPostInit = { focus, picture, sequence, geocoder, widgets, forceFocus: true };
+		this._parentPostInit = { focus, picture, sequence, geocoder, widgets, forceFocus: true, keyboardShortcuts: true };
 
 		this._psvInit = Object.fromEntries(
 			Object.entries(componentPsv).filter(
 				([k,]) => !["transitionDuration", "picturesNavigation"].includes(k)
 			)
 		);
+
 		this._psvAny = {
 			transitionDuration: psv_speed,
 			picturesNavigation: psv_nav,
 		};
-		this._psvPostInit = { xyz: psv_xyz };
+		this._psvPostInit = { xyz: psv_xyz, xywh: psv_xywh };
 
 		this._mapInit = {
 			raster: map_raster,
 			attributionControl: map_attribution,
 			...map_others
 		};
+
 		this._mapAny = {
 			theme: map_theme,
 			background: map_background,
@@ -142,6 +146,13 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 			camera: map_camera,
 			pic_score: map_pic_score,
 		};
+
+		if(keyboardShortcuts === "false") {
+			this._psvInit.keyboard = false;
+			this._psvInit.keyboardActions = {};
+			this._mapInit.keyboard = false;
+			this._parentPostInit.keyboardShortcuts = false;
+		}
 	}
 
 	/**
@@ -270,6 +281,28 @@ export function xyzParamToPSVPosition(str) {
 	else { return null; }
 }
 
+/**
+ * Extracts from string xywh position
+ * @param {string} str The xywh position as hash string
+ * @param {object} [picmeta] The current picture metadata, used to compute zoom based on image size
+ * @returns {object} { textureX, textureY, z }
+ * @private
+ */
+function xywhParamToPSVPosition(str, picmeta) {
+	const loc = (str || "").split(",");
+	if (loc.length === 4 && !loc.some(v => isNaN(v))) {
+		const size = picmeta?.properties?.["pers:interior_orientation"]?.sensor_array_dimensions;
+		const res = {
+			textureX: +loc[0] + loc[2] / 2,
+			textureY: +loc[1] + loc[3] / 2,
+			z: size && size.length == 2 ? (1 - (((loc[2] / size[0]) + (loc[3] / size[1])) / 2)) * 75 : null,
+		};
+
+		return res;
+	}
+	else { return null; }
+}
+
 /**
  * Extracts from hash parsed keys all map filters values
  * @param {*} vals Hash keys
@@ -305,6 +338,15 @@ export function alterPSVState(psv, params) {
 		}, {once: true});
 	}
 
+	// Change xywh position
+	if(params.xywh) {
+		psv.addEventListener("picture-loaded", () => {
+			const coords = xywhParamToPSVPosition(params.xywh, psv.getPictureMetadata());
+			psv.rotate(coords);
+			psv.zoom(coords.z);
+		}, {once: true});
+	}
+
 	// Change transitionDuration
 	let td = params.transitionDuration || params.speed;
 	if(td !== undefined) {

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,41 @@ export function listenForMenuClosure(me, callback) {
 		me._parent.legend?.addEventListener("click", () => callback());
 	});
 }
+
+/** @private */
+function lookForParent(comp) {
+	if(comp._parent) {
+		return comp._parent;
+	}
+	else if(comp === document.body) {
+		return null;
+	}
+	else if(comp.parentNode) {
+		return lookForParent(comp.parentNode);
+	}
+	else if(comp.host) {
+		return lookForParent(comp.host);
+	}
+}
+
+/**
+ * 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(() => {
+				const p = lookForParent(comp);
+				if(p) {
+					comp._parent = p;
+					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",
+  ],
 ]
 `;