@panoramax/web-viewer 4.0.3-develop-5497573e → 4.0.3-develop-b8d837b4

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/docs/reference/components/ui/SemanticsEditor.md

@@ -10,6 +10,7 @@
     * [new SemanticsEditor()](#new_Panoramax.components.ui.SemanticsEditor_new)
     * [.properties](#Panoramax.components.ui.SemanticsEditor+properties) : <code>Object</code>
     * [.getDiff()](#Panoramax.components.ui.SemanticsEditor+getDiff) ⇒ <code>Array.&lt;object&gt;</code>
+    * [.checkValidity()](#Panoramax.components.ui.SemanticsEditor+checkValidity) ⇒ <code>boolean</code>
     * ["change"](#Panoramax.components.ui.SemanticsEditor+event_change)
 
 <a name="new_Panoramax.components.ui.SemanticsEditor_new"></a>
@@ -62,6 +63,13 @@ Get current delta between initial tags and user changes.
 
 **Kind**: instance method of [<code>SemanticsEditor</code>](#Panoramax.components.ui.SemanticsEditor)  
 **Returns**: <code>Array.&lt;object&gt;</code> - The list of tag changes (in API format)  
+<a name="Panoramax.components.ui.SemanticsEditor+checkValidity"></a>
+
+### semanticsEditor.checkValidity() ⇒ <code>boolean</code>
+Check if input is having a valid value.
+
+**Kind**: instance method of [<code>SemanticsEditor</code>](#Panoramax.components.ui.SemanticsEditor)  
+**Returns**: <code>boolean</code> - True if it's valid  
 <a name="Panoramax.components.ui.SemanticsEditor+event_change"></a>
 
 ### "change"

package/package.json

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

package/src/components/core/Basic.js

@@ -341,7 +341,9 @@ export default class Basic extends LitElement {
 	static GetJSONConverter() {
 		return {
 			fromAttribute: (value) => {
-				return typeof value === "object" || Array.isArray(value) ? value : JSON5.parse(value);
+				if(value === null || value === "") { return null; }
+				else if(typeof value === "object" || Array.isArray(value)) { return value; }
+				else { return JSON5.parse(value); }
 			},
 			toAttribute: (value) => JSON.stringify(value)
 		};

package/src/components/ui/SemanticsEditor.js

@@ -83,6 +83,15 @@ export default class SemanticsEditor extends LitElement {
 		return computeDiffTags(this._firstSemantics || [], this.semantics);
 	}
 
+	/**
+	 * Check if input is having a valid value.
+	 * @memberof Panoramax.components.ui.SemanticsEditor#
+	 * @returns {boolean} True if it's valid
+	 */
+	checkValidity() {
+		return this._valid;
+	}
+	
 	/** @private */
 	_onInput(e) {
 		const tarea = e.target;

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