@panoramax/web-viewer 4.0.3-develop-d8c835a2 → 4.0.3-develop-c7e38842

package/docs/03_URL_settings.md

@@ -75,6 +75,27 @@ Example:
 xyz=10/25/50
 ```
 
+### :material-tag-arrow-right: `xywh`: picture position (annotation format)
+
+The position to show on picture at first load, in common annotation format.
+
+```
+x,y,w,h
+```
+
+With:
+
+- `x`: the horizontal offset compared to original picture left border (in pixels)
+- `y`: the vertical offset compared to original picture top border (in pixels)
+- `w`: the area width (in pixels)
+- `h`: the area height (in pixels)
+
+Example:
+
+```urlencoded
+xywh=3520,1264,96,112
+```
+
 ## :map: Map settings
 
 ### :fontawesome-solid-location-dot: `map`: map position and visibility

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.0.3-develop-d8c835a2",
+  "version": "4.0.3-develop-c7e38842",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/translations/nl.json

@@ -80,7 +80,7 @@
             "🎨 Interface herontwerpen",
             "📅 Fotomappingparty's plannen",
             "🧀 Kazen laten rijpen",
-            null,
+            "🌄 Prachtige zonneschijn berekenen",
             "🌊 Meten van het hoogwater"
         ],
         "share_rss_title": "RSS-feed van nieuwe reeksen in het nu zichtbare kaartgebied",
@@ -215,7 +215,8 @@
         "picture_all": "Alles",
         "semantics_zero_annotations": "Geen annotatie op deze afbeelding",
         "semantics_hashtags": "Foto-hashtags",
-        "panoramax": "Panoramax"
+        "panoramax": "Panoramax",
+        "semantics_editor_error": "De syntax is ongeldig. Je tags moeten eruit zien als:\nsleutel=waarde\nprefix|sleutel=waarde\nprefix|sleutel[qualif_sleutel=qualif_waarde]=waarde\n\nMaximale lengte van de sleutel: 256 karakters, maximale lengte van de waarde: 2048 karakters."
     },
     "psv": {
         "twoFingers": "Gebruik twee vingers om te navigeren",

package/src/utils/InitParameters.js

@@ -89,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)) {
@@ -121,7 +122,7 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 			transitionDuration: psv_speed,
 			picturesNavigation: psv_nav,
 		};
-		this._psvPostInit = { xyz: psv_xyz };
+		this._psvPostInit = { xyz: psv_xyz, xywh: psv_xywh };
 
 		this._mapInit = {
 			raster: map_raster,
@@ -280,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
@@ -315,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