@panoramax/web-viewer 4.1.0-develop-616eda58 → 4.1.0-develop-c921ed43

package/package.json

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

package/src/components/core/Editor.js

@@ -131,6 +131,7 @@ export default class Editor extends Basic {
 		}
 		super.connectedCallback();
 
+		this._moveChildToGrid();
 		window.addEventListener("DOMContentLoaded", () => {
 			this._moveChildToGrid();
 		}, { once: true });

package/src/components/core/PhotoViewer.js

@@ -199,6 +199,7 @@ export default class PhotoViewer extends Basic {
 
 		this.onceAPIReady().then(this._postAPIInit.bind(this));
 
+		this._moveChildToGrid();
 		window.addEventListener("DOMContentLoaded", () => {
 			this._moveChildToGrid();
 		}, { once: true });

package/src/components/core/Viewer.js

@@ -4,7 +4,7 @@ import "./Viewer.css";
 import { linkMapAndPhoto, saveMapParamsToLocalStorage, getMapParamsFromLocalStorage } from "../../utils/map";
 import PhotoViewer, {KEYBOARD_SKIP_FOCUS_WIDGETS} from "./PhotoViewer";
 import MapMore from "../ui/MapMore";
-import { initMapKeyboardHandler } from "../../utils/map";
+import { initMapKeyboardHandler, mapFiltersFormValues } from "../../utils/map";
 import { isNullId, isInIframe } from "../../utils/utils";
 import { createWebComp } from "../../utils/widgets";
 import { fa } from "../../utils/widgets";
@@ -569,35 +569,8 @@ export default class Viewer extends PhotoViewer {
 	 */
 	_onMapFiltersChange() {
 		const mapFiltersMenu = querySelectorDeep("#pnx-map-filters-menu");
-		const fMinDate = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-date-from");
-		const fMaxDate = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-date-end");
-		const fTypes = mapFiltersMenu?.shadowRoot.querySelectorAll("input[name='pnx-filter-type']");
 		const fMapTheme = querySelectorDeep("#pnx-map-theme");
-
-		let type = "";
-		for(let fTypeId = 0 ; fTypeId < fTypes.length; fTypeId++) {
-			const fType = fTypes[fTypeId];
-			if(fType.checked) {
-				type = fType.value;
-				break;
-			}
-		}
-
-		let qualityscore = [];
-		if(this.map?._hasQualityScore()) {
-			const fScore = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-qualityscore");
-			qualityscore = (fScore?.grade || "").split(",").map(v => parseInt(v)).filter(v => !isNaN(v));
-			if(qualityscore.length == 5) { qualityscore = []; }
-		}
-
-		const values = {
-			minDate: fMinDate?.value,
-			maxDate: fMaxDate?.value,
-			pic_type: type,
-			theme: fMapTheme?.value,
-			qualityscore,
-		};
-
+		const values = mapFiltersFormValues(mapFiltersMenu, fMapTheme, this.map?._hasQualityScore());
 		this.map.setFilters(values);
 	}
 }

package/src/components/menus/MapFilters.js

@@ -284,6 +284,20 @@ export default class MapFilters extends LitElement {
 
 		if(dateToField) { dateToField.value = ""; }
 	}
+
+	/** @private */
+	_onMeUserSearch() {
+		const userAccount = getUserAccount();
+		if(!userAccount) { return; }
+
+		const userField = this.shadowRoot.getElementById("pnx-filter-search-user");
+		if(!this._parent?.map.getVisibleUsers().includes(userAccount.id)) {
+			userField?._onResultClick({title: userAccount.name, data: {id: userAccount.id }});
+		}
+		else {
+			userField?._onResultClick();
+		}
+	}
 	
 	/** @private */
 	render() {
@@ -386,7 +400,9 @@ export default class MapFilters extends LitElement {
 					<h4>${fa(faUser)} ${this._parent?._t.pnx.filter_user}</h4>
 					${userAccount ? html`
 						<div class="pnx-input-shortcuts">
-							<button>${this._parent?._t.pnx.filter_user_mypics}</button>
+							<button @click=${this._onMeUserSearch}>
+								${this._parent?._t.pnx.filter_user_mypics}
+							</button>
 						</div>
 					` : nothing}
 					<pnx-search-bar

package/src/components/ui/MapMore.js

@@ -1,13 +1,6 @@
 import Map from "./Map";
 import { COLORS, QUALITYSCORE_VALUES } from "../../utils/utils";
-import { TILES_PICTURES_ZOOM, MAP_EXPR_QUALITYSCORE, switchCoefValue } from "../../utils/map";
-
-const MAP_THEMES = {
-	DEFAULT: "default",
-	AGE: "age",
-	TYPE: "type",
-	SCORE: "score",
-};
+import { MAP_EXPR_QUALITYSCORE, switchCoefValue, MAP_THEMES, mapFiltersToLayersFilters } from "../../utils/map";
 
 export const MAP_FILTERS = [ "minDate", "maxDate", "pic_type", "camera", "theme", "qualityscore"];
 
@@ -198,80 +191,6 @@ export default class MapMore extends Map {
 		return s;
 	}
 
-	/** @private */
-	_mapFiltersToLayersFilters(filters) {
-		let mapFilters = {};
-		let mapSeqFilters = [];
-		let mapPicFilters = [];
-		let reloadMapStyle = false;
-
-		if(filters.minDate && filters.minDate !== "") {
-			mapFilters.minDate = filters.minDate;
-			mapSeqFilters.push([">=", ["get", "date"], filters.minDate]);
-			mapPicFilters.push([">=", ["get", "ts"], filters.minDate]);
-		}
-
-		if(filters.maxDate && filters.maxDate !== "") {
-			mapFilters.maxDate = filters.maxDate;
-			mapSeqFilters.push(["<=", ["get", "date"], filters.maxDate]);
-
-			// Get tomorrow date for pictures filtering
-			// (because ts is date+time, so comparing date only string would fail otherwise)
-			let d = new Date(filters.maxDate);
-			d.setDate(d.getDate() + 1);
-			d = d.toISOString().split("T")[0];
-			mapPicFilters.push(["<=", ["get", "ts"], d]);
-		}
-
-		if(filters.pic_type && filters.pic_type !== "") {
-			mapFilters.pic_type = filters.pic_type === "flat" ? "flat" : "equirectangular";
-			mapSeqFilters.push(["==", ["get", "type"], mapFilters.pic_type]);
-			mapPicFilters.push(["==", ["get", "type"], mapFilters.pic_type]);
-		}
-		if(this._hasGridStats()) {
-			reloadMapStyle = true;
-		}
-
-		if(filters.camera && filters.camera !== "") {
-			mapFilters.camera = filters.camera;
-			// low/high model hack : to enable fuzzy filtering of camera make and model
-			const lowModel = filters.camera.toLowerCase().trim() + "                    ";
-			const highModel = filters.camera.toLowerCase().trim() + "zzzzzzzzzzzzzzzzzzzz";
-			const collator = ["collator", { "case-sensitive": false, "diacritic-sensitive": false } ];
-			mapSeqFilters.push([">=", ["get", "model"], lowModel, collator]);
-			mapSeqFilters.push(["<=", ["get", "model"], highModel, collator]);
-			mapPicFilters.push([">=", ["get", "model"], lowModel, collator]);
-			mapPicFilters.push(["<=", ["get", "model"], highModel, collator]);
-		}
-
-		if(filters.qualityscore && filters.qualityscore.length > 0) {
-			mapFilters.qualityscore = filters.qualityscore;
-			mapSeqFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", mapFilters.qualityscore]]);
-			mapPicFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", mapFilters.qualityscore]]);
-		}
-
-		if(filters.theme && Object.values(MAP_THEMES).includes(filters.theme)) {
-			mapFilters.theme = filters.theme;
-			reloadMapStyle = true;
-		}
-
-		if(mapSeqFilters.length == 0) { mapSeqFilters = null; }
-		else {
-			mapSeqFilters.unshift("all");
-		}
-
-		if(mapPicFilters.length == 0) { mapPicFilters = null; }
-		else {
-			mapPicFilters.unshift("all");
-			mapPicFilters = ["step", ["zoom"],
-				true,
-				TILES_PICTURES_ZOOM, mapPicFilters
-			];
-		}
-
-		return { mapFilters, mapSeqFilters, mapPicFilters, reloadMapStyle };
-	}
-
 	/**
 	 * Change the map filters
 	 * @param {object} filters Filtering values
@@ -285,7 +204,7 @@ export default class MapMore extends Map {
 	 * @memberof Panoramax.components.core.MapMore#
 	 */
 	setFilters(filters, skipZoomIn = false) {
-		let { mapFilters, mapSeqFilters, mapPicFilters, reloadMapStyle } = this._mapFiltersToLayersFilters(filters);
+		let { mapFilters, mapSeqFilters, mapPicFilters, reloadMapStyle } = mapFiltersToLayersFilters(filters, this._hasGridStats());
 
 		this._mapFilters = mapFilters;
 		if(reloadMapStyle) {
@@ -340,7 +259,7 @@ export default class MapMore extends Map {
 		await super.setVisibleUsers(visibleIds);
 		
 		// Force reload of styles & filters
-		let { mapSeqFilters, mapPicFilters, reloadMapStyle } = this._mapFiltersToLayersFilters(this._mapFilters);
+		let { mapSeqFilters, mapPicFilters, reloadMapStyle } = mapFiltersToLayersFilters(this._mapFilters, this._hasGridStats());
 
 		if(reloadMapStyle) {
 			this.reloadLayersStyles();

package/src/components/ui/widgets/MapFiltersButton.js

@@ -70,7 +70,7 @@ export default class MapFiltersButton extends LitElement {
 	/** @private */
 	render() {
 		const isSmall = this._parent?.isWidthSmall();
-		const resetIcon = fa(faXmark);
+		const resetIcon = fa(faXmark, {styles: {"pointer-events": "auto"}});
 		resetIcon.addEventListener("click", e => {
 			e.stopPropagation();
 			this.shadowRoot.querySelector("pnx-map-filters-menu")._onReset();

package/src/components/ui/widgets/MapLayersButton.js

@@ -46,7 +46,7 @@ export default class MapLayersButton extends LitElement {
 	/** @private */
 	render() {
 		const isSmall = this._parent?.isWidthSmall();
-		const resetIcon = fa(faXmark);
+		const resetIcon = fa(faXmark, {styles: {"pointer-events": "auto"}});
 		resetIcon.addEventListener("click", e => {
 			e.stopPropagation();
 			const menu = this.shadowRoot.querySelector("pnx-map-layers-menu");

package/src/utils/InitParameters.js

@@ -289,13 +289,34 @@ export function xyzParamToPSVPosition(str) {
  * @private
  */
 function xywhParamToPSVPosition(str, picmeta) {
-	const loc = (str || "").split(",");
+	let loc = (str || "").split(",");
 	if (loc.length === 4 && !loc.some(v => isNaN(v))) {
-		const size = picmeta?.properties?.["pers:interior_orientation"]?.sensor_array_dimensions;
+		let [ locX, locY, locW, locH ] = loc.map(v => parseFloat(v));
+		let basePanoData = picmeta.panorama.basePanoData;
+		if(typeof basePanoData === "function") {
+			const size = picmeta?.properties?.["pers:interior_orientation"]?.sensor_array_dimensions;
+			if(size && size.length == 2) { basePanoData = basePanoData({width: size[0], height: size[1]}); }
+			else { basePanoData = null; }
+		}
+
+		if(!basePanoData?.fullWidth || !basePanoData?.fullHeight) { return null; }
+
+		const croppedX = basePanoData?.croppedX || 0;
+		const croppedY = basePanoData?.croppedY || 0;
+
+		// Compute offset from texture center
+		const xOffsetPx = croppedX + locX + locW / 2 - basePanoData.fullWidth / 2;
+		const yOffsetPx = -(croppedY + locY + locH / 2 - basePanoData.fullHeight / 2);
+		const xOffsetPct = xOffsetPx / basePanoData.fullWidth;
+		const yOffsetPct = yOffsetPx / basePanoData.fullHeight;
+		const xSizePct = locW / basePanoData.fullWidth;
+		const ySizePct = locH / basePanoData.fullHeight;
+		const sizePct = (xSizePct + ySizePct) / 2;
+
 		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,
+			yaw: xOffsetPct * 2 * Math.PI,
+			pitch: yOffsetPct * Math.PI,
+			z: (1 - sizePct) * 100
 		};
 
 		return res;

package/src/utils/map.js

@@ -62,6 +62,13 @@ export const VECTOR_STYLES = {
 	}
 };
 
+export const MAP_THEMES = {
+	DEFAULT: "default",
+	AGE: "age",
+	TYPE: "type",
+	SCORE: "score",
+};
+
 
 // See MapLibre docs for explanation of expressions magic: https://maplibre.org/maplibre-style-spec/expressions/
 const MAP_EXPR_QUALITYSCORE_RES_360  = ["case", ["has", "h_pixel_density"], ["step", ["get", "h_pixel_density"], ...QUALITYSCORE_RES_360_VALUES], 1];
@@ -362,6 +369,122 @@ export function getMissingLayerStyles(sources = {}, layers = []) {
 	return newLayers;
 }
 
+/**
+ * Get comprehensive values from map filters form
+ * @param {Element} mapFiltersMenu The MapFilters DOM Element
+ * @param {Element} mapThemeSelect The Map Theme select DOM Element
+ * @param {boolean} hasQualityScore Set to true if vector tiles embed quality score data
+ * @return {object} The map filters as JSON
+ */
+export function mapFiltersFormValues(mapFiltersMenu, mapThemeSelect, hasQualityScore) {
+	const fMinDate = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-date-from");
+	const fMaxDate = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-date-end");
+	const fTypes = mapFiltersMenu?.shadowRoot.querySelectorAll("input[name='pnx-filter-type']");
+
+	let type = "";
+	for(let fTypeId = 0 ; fTypeId < fTypes.length; fTypeId++) {
+		const fType = fTypes[fTypeId];
+		if(fType.checked) {
+			type = fType.value;
+			break;
+		}
+	}
+
+	let qualityscore = [];
+	if(hasQualityScore) {
+		const fScore = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-qualityscore");
+		qualityscore = (fScore?.grade || "").split(",").map(v => parseInt(v)).filter(v => !isNaN(v));
+		if(qualityscore.length == 5) { qualityscore = []; }
+	}
+
+	return {
+		minDate: fMinDate?.value,
+		maxDate: fMaxDate?.value,
+		pic_type: type,
+		theme: mapThemeSelect?.value,
+		qualityscore,
+	};
+}
+
+/**
+ * Transforms map filters into MapLibre-like JSON filters
+ * @param {object} filters Filters returned by MapFilters widgets
+ * @param {boolean} [hasGridStats=false] Set to true if vector tiles offer grid statistics
+ * @returns {object} Set of variables { mapFilters, mapSeqFilters, mapPicFilters, reloadMapStyle }
+ */
+export function mapFiltersToLayersFilters(filters, hasGridStats = false) {
+	let mapFilters = {};
+	let mapSeqFilters = [];
+	let mapPicFilters = [];
+	let reloadMapStyle = false;
+
+	if(filters.minDate && filters.minDate !== "") {
+		mapFilters.minDate = filters.minDate;
+		mapSeqFilters.push([">=", ["get", "date"], filters.minDate]);
+		mapPicFilters.push([">=", ["get", "ts"], filters.minDate]);
+	}
+
+	if(filters.maxDate && filters.maxDate !== "") {
+		mapFilters.maxDate = filters.maxDate;
+		mapSeqFilters.push(["<=", ["get", "date"], filters.maxDate]);
+
+		// Get tomorrow date for pictures filtering
+		// (because ts is date+time, so comparing date only string would fail otherwise)
+		let d = new Date(filters.maxDate);
+		d.setDate(d.getDate() + 1);
+		d = d.toISOString().split("T")[0];
+		mapPicFilters.push(["<=", ["get", "ts"], d]);
+	}
+
+	if(filters.pic_type && filters.pic_type !== "") {
+		mapFilters.pic_type = filters.pic_type === "flat" ? "flat" : "equirectangular";
+		mapSeqFilters.push(["==", ["get", "type"], mapFilters.pic_type]);
+		mapPicFilters.push(["==", ["get", "type"], mapFilters.pic_type]);
+	}
+	if(hasGridStats) {
+		reloadMapStyle = true;
+	}
+
+	if(filters.camera && filters.camera !== "") {
+		mapFilters.camera = filters.camera;
+		// low/high model hack : to enable fuzzy filtering of camera make and model
+		const lowModel = filters.camera.toLowerCase().trim() + "                    ";
+		const highModel = filters.camera.toLowerCase().trim() + "zzzzzzzzzzzzzzzzzzzz";
+		const collator = ["collator", { "case-sensitive": false, "diacritic-sensitive": false } ];
+		mapSeqFilters.push([">=", ["get", "model"], lowModel, collator]);
+		mapSeqFilters.push(["<=", ["get", "model"], highModel, collator]);
+		mapPicFilters.push([">=", ["get", "model"], lowModel, collator]);
+		mapPicFilters.push(["<=", ["get", "model"], highModel, collator]);
+	}
+
+	if(filters.qualityscore && filters.qualityscore.length > 0) {
+		mapFilters.qualityscore = filters.qualityscore;
+		mapSeqFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", mapFilters.qualityscore]]);
+		mapPicFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", mapFilters.qualityscore]]);
+	}
+
+	if(filters.theme && Object.values(MAP_THEMES).includes(filters.theme)) {
+		mapFilters.theme = filters.theme;
+		reloadMapStyle = true;
+	}
+
+	if(mapSeqFilters.length == 0) { mapSeqFilters = null; }
+	else {
+		mapSeqFilters.unshift("all");
+	}
+
+	if(mapPicFilters.length == 0) { mapPicFilters = null; }
+	else {
+		mapPicFilters.unshift("all");
+		mapPicFilters = ["step", ["zoom"],
+			true,
+			TILES_PICTURES_ZOOM, mapPicFilters
+		];
+	}
+
+	return { mapFilters, mapSeqFilters, mapPicFilters, reloadMapStyle };
+}
+
 /**
  * Get cleaned-up layer ID for a specific user.
  * @param {string} userId The user UUID (or "geovisio" for general layer)