@panoramax/web-viewer 3.2.3-develop-eb68a0ea → 3.2.3-develop-7a7f14f4

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

@@ -1,14 +1,22 @@
 import {LitElement, html, css} from "lit";
 import { panel } from "../../styles";
+import { fa } from "../../../utils/widgets";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
+import PanoramaxImg from "../../../img/panoramax.svg";
 
 /**
  * Legend widget, handling switch between map and photo components.
+ * Also displays a default "About Panoramax" message.
  * @class Panoramax.components.ui.widgets.Legend
  * @element pnx-widget-legend
  * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
  * @example
  * ```html
- * <pnx-widget-legend _parent=${viewer} />
+ * <pnx-widget-legend
+ *   _parent=${viewer}
+ *   focus="map"
+ *   picture="PICTURE-ID-IF-ANY"
+ * />
  * ```
  */
 export default class Legend extends LitElement {
@@ -22,6 +30,15 @@ export default class Legend extends LitElement {
 			max-width: 80vh;
 			z-index: 120;
 		}
+		.presentation {
+			font-size: 0.9em;
+			display: flex;
+			gap: 5px;
+			align-items: center;
+		}
+		.logo {
+			width: 45px;
+		}
 	`];
 
 	/**
@@ -29,13 +46,27 @@ export default class Legend extends LitElement {
 	 * @memberof Panoramax.components.ui.widgets.Legend#
 	 * @type {Object}
 	 * @property {string} [focus] The focused main component (map, pic)
+	 * @property {string} [picture] The picture ID
 	 */
 	static properties = {
 		focus: {type: String},
+		picture: {type: String},
 	};
 
 	render() {
 		return html`<div class="pnx-panel pnx-padded" part="panel">
+			<div
+				class="presentation"
+				style=${this.focus != "map" && this.picture ? "display: none": ""}
+			>
+				<img class="logo" src=${PanoramaxImg} alt="" />
+				<div>
+					Panoramax est le géocommun des photos de rues.
+					<pnx-link-button title=${this._parent?._t.map.more_panoramax} kind="outline" href="https://panoramax.fr" target="_blank">
+						${fa(faInfoCircle, { styles: {height: "12px", "margin-inline": "3px"}})}
+					</pnx-link-button>
+				</div>
+			</div>
 			<pnx-picture-legend
 				._parent=${this._parent}
 				style=${this.focus == "map" ? "display: none": ""}

package/src/index.js

@@ -5,3 +5,4 @@ export * as utils from "./utils";
 export {default as Viewer} from "./components/core/Viewer";
 export {default as CoverageMap} from "./components/core/CoverageMap";
 export {default as Editor} from "./components/core/Editor";
+export {default as PhotoViewer} from "./components/core/PhotoViewer";

package/src/utils/API.js

@@ -1,5 +1,5 @@
 import { TILES_PICTURES_ZOOM } from "./map";
-import { BASE_PANORAMA_ID } from "./utils";
+import { isNullId } from "./utils";
 
 /**
  * API contains various utility functions to communicate with Panoramax/STAC API
@@ -772,7 +772,7 @@ export default class API {
 	 * @throws {Error} If not valid
 	 */
 	static isIdValid(id) {
-		if(!id || typeof id !== "string" || id.length === 0 || id === BASE_PANORAMA_ID) {
+		if(isNullId(id)) {
 			throw new Error("id should be a valid picture unique identifier");
 		}
 		return true;

package/src/utils/InitParameters.js

@@ -10,6 +10,24 @@ export const MAP_FILTERS_JS2URL = {
 const MAP_FILTERS_URL2JS = Object.fromEntries(Object.entries(MAP_FILTERS_JS2URL).map(v => [v[1], v[0]]));
 const MAP_NONE = ["none", "null", "false", false];
 
+const MAPLIBRE_OPTIONS = [
+	"antialias", "bearing", "bearingSnap", "bounds",
+	"boxZoom", "clickTolerance", "collectResourceTiming",
+	"cooperativeGestures", "crossSourceCollisions", "doubleClickZoom", "dragPan",
+	"dragRotate", "fadeDuration", "failIfMajorPerformanceCaveat", "fitBoundsOptions",
+	"hash", "interactive", "keyboard", "localIdeographFontFamily", "locale", "logoPosition",
+	"maplibreLogo", "maxBounds", "maxCanvasSize", "maxPitch", "maxTileCacheSize",
+	"maxTileCacheZoomLevels", "maxZoom", "minPitch", "minZoom", "pitch", "pitchWithRotate",
+	"pixelRatio", "preserveDrawingBuffer", "refreshExpiredTiles", "renderWorldCopies",
+	"scrollZoom", "touchPitch", "touchZoomRotate", "trackResize",
+	"transformCameraUpdate", "transformRequest", "validateStyle"
+];
+
+function filterMapLibreOptions(opts) {
+	return Object.fromEntries(Object.entries(opts).filter(([key]) => MAPLIBRE_OPTIONS.includes(key)));
+}
+
+
 /**
  * Merges all URL parameters and component attributes into a single set of coherent settings.
  * 
@@ -61,6 +79,7 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 		let endpoint = componentAttrs.endpoint;
 		let map_raster = componentMap.raster;
 		let map_attribution = componentMap.attributionControl;
+		let map_others = filterMapLibreOptions(componentMap);
 
 		//  - URL only
 		let psv_xyz = urlParams.xyz;
@@ -102,7 +121,11 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 		};
 		this._psvPostInit = { xyz: psv_xyz };
 
-		this._mapInit = { raster: map_raster, attributionControl: map_attribution };
+		this._mapInit = {
+			raster: map_raster,
+			attributionControl: map_attribution,
+			...map_others
+		};
 		this._mapAny = {
 			theme: map_theme,
 			background: map_background,
@@ -283,13 +306,15 @@ export function alterPSVState(psv, params) {
 	}
 
 	// Change transitionDuration
-	if(params.transitionDuration !== undefined) {
-		psv.setTransitionDuration(params.transitionDuration);
+	let td = params.transitionDuration || params.speed;
+	if(td !== undefined) {
+		psv.setTransitionDuration(td);
 	}
 
 	// Change pictures navigation mode
-	if(["none", "pic", "any", "seq"].includes(params.picturesNavigation)) {
-		psv.setPicturesNavigation(params.picturesNavigation);
+	let nav = params.picturesNavigation || params.nav;
+	if(["none", "pic", "any", "seq"].includes(nav)) {
+		psv.setPicturesNavigation(nav);
 	}
 }
 
@@ -311,7 +336,7 @@ export function alterMapState(map, params) {
 	map.setVisibleUsers(vu);
 
 	// Change map filters
-	map.setFilters(paramsToMapFilters(params));
+	map.setFilters?.(paramsToMapFilters(params));
 
 	// Change map background
 	if(["aerial", "streets"].includes(params.background)) {
@@ -320,39 +345,50 @@ export function alterMapState(map, params) {
 }
 
 /**
- * Change Viewer current state based on standardized parameters.
- * @param {Viewer} viewer The Viewer component to change.
+ * Change PhotoViewer current state based on standardized parameters.
+ * @param {PhotoViewer} viewer The PhotoViewer component to change.
  * @param {object} params The parameters to apply.
  */
-export function alterViewerState(viewer, params) {
+export function alterPhotoViewerState(viewer, params) {
 	// Restore selected picture
-	if(params.picture) {
-		const picIds = params.picture.split(";"); // Handle multiple IDs coming from OSM
+	let pic = params.picture || params.pic;
+	if(pic) {
+		const picIds = pic.split(";"); // Handle multiple IDs coming from OSM
 		if(picIds.length > 1) {
 			console.warn("Multiple picture IDs passed in URL, only first one kept");
 		}
 
-		// Post-load changes
-		if(params.focus && params.focus == "meta") {
-			viewer.psv.addEventListener("picture-loaded", () => viewer._showPictureMetadata(), { once: true });
-		}
-
 		viewer.select(null, picIds[0]);
 	}
 	else {
 		viewer.select();
 	}
+}
+
+/**
+ * Change Viewer current state based on standardized parameters.
+ * @param {Viewer} viewer The Viewer component to change.
+ * @param {object} params The parameters to apply.
+ */
+export function alterViewerState(viewer, params) {
+	alterPhotoViewerState(viewer, params);
+
+	// Restore selected picture
+	let pic = params.picture || params.pic;
+	if(pic && params.focus && params.focus == "meta") {
+		viewer.psv.addEventListener("picture-loaded", () => viewer._showPictureMetadata(), { once: true });
+	}
 
 	// Change focus
 	if(params.focus === "map" && viewer?.map) {
 		viewer.setPopup(false);
 		viewer._setFocus("map", null, params.forceFocus);
 	}
-	else if(params.focus === "pic") {
+	else if(params.focus === "pic" && viewer?.mini) {
 		viewer.setPopup(false);
 		viewer._setFocus("pic", null, params.forceFocus);
 	}
-	else if(params.focus && params.focus === "meta") {
+	else if(params.focus && params.focus === "meta" && viewer?.mini) {
 		viewer._setFocus("pic", null, params.forceFocus);
 	}
 }

package/src/utils/URLHandler.js

@@ -1,6 +1,7 @@
 import {
-	alterPSVState, MAP_FILTERS_JS2URL, alterMapState, alterViewerState
+	alterPSVState, MAP_FILTERS_JS2URL, alterMapState, alterViewerState, alterPhotoViewerState
 } from "./InitParameters";
+import Viewer from "../components/core/Viewer";
 
 // List of supported parameters
 const MANAGED_PARAMETERS = [
@@ -61,9 +62,11 @@ export default class URLHandler extends EventTarget {
 			hashParts.nav = this._parent.psv.getPicturesNavigation();
 		}
 
+		if(this._parent.psv.getPictureId()) {
+			hashParts.pic = this._parent.psv.getPictureId();
+		}
 		const picMeta = this._parent.psv.getPictureMetadata();
 		if (picMeta) {
-			hashParts.pic = picMeta.id;
 			hashParts.xyz = this.currentPSVString();
 		}
 
@@ -93,7 +96,7 @@ export default class URLHandler extends EventTarget {
 				}
 			}
 		}
-		else {
+		else if(this._parent instanceof Viewer) {
 			hashParts.map = "none";
 		}
 		return hashParts;
@@ -256,7 +259,10 @@ export default class URLHandler extends EventTarget {
 	 */
 	_onURLChange() {
 		let vals = this.currentURLParams();
-		alterViewerState(this._parent, vals);
+
+		if(this._parent instanceof Viewer) { alterViewerState(this._parent, vals); }
+		else { alterPhotoViewerState(this._parent, vals); }
+		
 		alterPSVState(this._parent.psv, vals);
 		if(this._parent.map) { alterMapState(this._parent.map, vals); }
 	}
@@ -329,7 +335,7 @@ export default class URLHandler extends EventTarget {
 			if(prevUrl.search == nextUrl.search) { return; }
 
 			const prevPic = this.currentURLParams().pic || "";
-			const nextPic = this._parent?.psv?.getPictureMetadata()?.id || "";
+			const nextPic = this._parent?.psv?.getPictureId?.() || "";
 
 			const prevFocus = this.currentURLParams().focus || "";
 			const nextFocus = nextUrl.search.includes("focus=meta") ? "meta" : (nextUrl.search.includes("focus=map") ? "map" : "pic");

package/src/utils/map.js

@@ -1,7 +1,7 @@
 import LoaderImg from "../img/marker.svg";
 import { COLORS, QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_RES_360_VALUES, QUALITYSCORE_GPS_VALUES, QUALITYSCORE_POND_RES, QUALITYSCORE_POND_GPS } from "./utils";
 import { autoDetectLocale } from "./i18n";
-import { BASE_PANORAMA_ID } from "./utils";
+import { isNullId } from "./utils";
 
 export const DEFAULT_TILES = "https://panoramax.openstreetmap.fr/pmtiles/basic.json";
 export const RASTER_LAYER_ID = "pnx-aerial";
@@ -398,7 +398,7 @@ export function switchCoefValue(expr, newCoefVal) {
 export function linkMapAndPhoto(parent) {
 	// Switched picture
 	const onPicLoad = e => {
-		if(!e.detail.picId || e.detail.picId === BASE_PANORAMA_ID) {
+		if(isNullId(e.detail.picId)) {
 			parent.map.displayPictureMarker();
 			if(parent?.isMapWide?.()) {
 				parent?.mini?.setAttribute("collapsed", "");

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

@@ -66,8 +66,8 @@ describe("getPictureMetadata", () => {
 		const p = createParent();
 		const c = document.createElement("div");
 		const ph = new Photo(p, c);
-		ph._myVTour.state.currentNode = { bla: "bla" };
-		expect(ph.getPictureMetadata()).toStrictEqual({ bla: "bla" });
+		ph._myVTour.state.currentNode = { id: "1234", bla: "bla" };
+		expect(ph.getPictureMetadata()).toStrictEqual({ id: "1234", bla: "bla" });
 	});
 
 	it("nulls when no pic is selected", () => {
@@ -111,7 +111,7 @@ describe("goToNextPicture", () => {
 		const p = createParent();
 		const c = document.createElement("div");
 		const ph = new Photo(p, c);
-		ph._myVTour = { state: { currentNode: { sequence: { id: "seq", nextPic: "idnext" } } } };
+		ph._myVTour = { state: { currentNode: { id: "bla", sequence: { id: "seq", nextPic: "idnext" } } } };
 		ph.goToNextPicture();
 		expect(p.select.mock.calls).toEqual([["seq", "idnext"]]);
 	});
@@ -120,7 +120,7 @@ describe("goToNextPicture", () => {
 		const p = createParent();
 		const c = document.createElement("div");
 		const ph = new Photo(p, c);
-		ph._myVTour = { state: { currentNode: { sequence: {} } } };
+		ph._myVTour = { state: { currentNode: { id: "bla", sequence: {} } } };
 		expect(() => ph.goToNextPicture()).toThrow(new Error("No next picture available"));
 	});
 });
@@ -138,7 +138,7 @@ describe("goToPrevPicture", () => {
 		const p = createParent();
 		const c = document.createElement("div");
 		const ph = new Photo(p, c);
-		ph._myVTour = { state: { currentNode: { sequence: { id: "seq", prevPic: "idprev" } } } };
+		ph._myVTour = { state: { currentNode: { id: "bla", sequence: { id: "seq", prevPic: "idprev" } } } };
 		ph.goToPrevPicture();
 		expect(p.select.mock.calls).toEqual([["seq", "idprev"]]);
 	});
@@ -147,7 +147,7 @@ describe("goToPrevPicture", () => {
 		const p = createParent();
 		const c = document.createElement("div");
 		const ph = new Photo(p, c);
-		ph._myVTour = { state: { currentNode: { sequence: {} } } };
+		ph._myVTour = { state: { currentNode: { id: "bla", sequence: {} } } };
 		expect(() => ph.goToPrevPicture()).toThrow(new Error("No previous picture available"));
 	});
 });

package/tests/utils/InitParameters.test.js

@@ -443,6 +443,7 @@ describe("alterViewerState", () => {
 			setPopup: jest.fn(),
 			_setFocus: jest.fn(),
 			_showPictureMetadata: jest.fn(),
+			mini: {},
 		};
 	});
 

package/tests/utils/URLHandler.test.js

@@ -31,10 +31,11 @@ describe("nextURLString", () => {
 				getPicturesNavigation: () => null,
 				getTransitionDuration: () => null,
 				getPictureMetadata: () => null,
+				getPictureId: () => null,
 			},
 		};
 		const uh = new URLHandler(v);
-		expect(uh.nextURLString()).toBe("?map=none");
+		expect(uh.nextURLString()).toBe("?");
 	});
 
 	it("works with picture metadata", () => {
@@ -43,12 +44,13 @@ describe("nextURLString", () => {
 			psv: {
 				getPicturesNavigation: () => null,
 				getTransitionDuration: () => null,
-				getPictureMetadata: () => ({ "id": "cbfc3add-8173-4464-98c8-de2a43c6a50f" })
+				getPictureMetadata: () => ({}),
+				getPictureId: () => "cbfc3add-8173-4464-98c8-de2a43c6a50f",
 			},
 		};
 		const uh = new URLHandler(v);
 		uh.currentPSVString = () => "0/1/2";
-		expect(uh.nextURLString()).toBe("?map=none&pic=cbfc3add-8173-4464-98c8-de2a43c6a50f&xyz=0/1/2");
+		expect(uh.nextURLString()).toBe("?pic=cbfc3add-8173-4464-98c8-de2a43c6a50f&xyz=0/1/2");
 	});
 
 	it("works with map started + wide", () => {
@@ -58,6 +60,7 @@ describe("nextURLString", () => {
 				getPicturesNavigation: () => null,
 				getTransitionDuration: () => null,
 				getPictureMetadata: () => null,
+				getPictureId: () => null,
 			},
 			map: {
 				getVisibleUsers: () => ["geovisio"],
@@ -78,7 +81,8 @@ describe("nextURLString", () => {
 			psv: {
 				getPicturesNavigation: () => null,
 				getTransitionDuration: () => null,
-				getPictureMetadata: () => ({ "id": "cbfc3add-8173-4464-98c8-de2a43c6a50f" }),
+				getPictureMetadata: () => ({}),
+				getPictureId: () => "cbfc3add-8173-4464-98c8-de2a43c6a50f",
 			},
 			map: {
 				getVisibleUsers: () => ["geovisio"],
@@ -101,6 +105,7 @@ describe("nextURLString", () => {
 				getPicturesNavigation: () => null,
 				getTransitionDuration: () => null,
 				getPictureMetadata: () => null,
+				getPictureId: () => null,
 			},
 			map: {
 				getVisibleUsers: () => ["geovisio"],
@@ -129,10 +134,11 @@ describe("nextURLString", () => {
 				getPicturesNavigation: () => null,
 				getTransitionDuration: () => 250,
 				getPictureMetadata: () => null,
+				getPictureId: () => null,
 			},
 		};
 		const uh = new URLHandler(v);
-		expect(uh.nextURLString()).toBe("?map=none&speed=250");
+		expect(uh.nextURLString()).toBe("?speed=250");
 	});
 
 	it("works with popup", () => {
@@ -142,6 +148,7 @@ describe("nextURLString", () => {
 				getPicturesNavigation: () => null,
 				getTransitionDuration: () => null,
 				getPictureMetadata: () => null,
+				getPictureId: () => null,
 			},
 			map: {
 				getVisibleUsers: () => ["geovisio"],
@@ -163,10 +170,11 @@ describe("nextURLString", () => {
 				getPicturesNavigation: () => "pic",
 				getTransitionDuration: () => null,
 				getPictureMetadata: () => null,
+				getPictureId: () => null,
 			},
 		};
 		const uh = new URLHandler(v);
-		expect(uh.nextURLString()).toBe("?map=none&nav=pic");
+		expect(uh.nextURLString()).toBe("?nav=pic");
 	});
 });
 
@@ -312,6 +320,7 @@ describe("currentPSVString", () => {
 			addEventListener: jest.fn(),
 			psv: {
 				getXYZ: () => ({ x: 12.123456, y: 50.789456, z: 75 }),
+				getPictureId: () => null,
 			},
 		};
 		const uh = new URLHandler(v);
@@ -323,6 +332,7 @@ describe("currentPSVString", () => {
 			addEventListener: jest.fn(),
 			psv: {
 				getXYZ: () => ({ x: 12, y: 50 }),
+				getPictureId: () => null,
 			},
 		};
 		const uh = new URLHandler(v);