@panoramax/web-viewer 4.0.3-develop-b409e7cf → 4.0.3-develop-fc3c6115

package/config/jest/mocks.js

@@ -152,6 +152,12 @@ jest.mock("@photo-sphere-viewer/core", () => ({
 				}
 			};
 			this.receivedEvents = [];
+			this.container = {
+				classList: {
+					add: jest.fn(),
+					remove: jest.fn(),
+				},
+			};
 		}
 		addEventListener(t, h) {
 			this.receivedEvents.push([t, h]);

package/docs/reference/components/ui/Map.md

@@ -152,6 +152,8 @@ Filter the visible data content in all visible map layers
 ### map.displayPictureMarker(lon, lat, heading, [skipCenter], [picId])
 Shows on map a picture position and heading.
 
+If no longitude & latitude are set, marker is removed from map.
+
 **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map)  
 
 | Param | Type | Default | Description |

package/docs/reference/components/ui/MapMore.md

@@ -151,6 +151,8 @@ Filter the visible data content in all visible map layers
 ### mapMore.displayPictureMarker(lon, lat, heading, [skipCenter], [picId])
 Shows on map a picture position and heading.
 
+If no longitude & latitude are set, marker is removed from map.
+
 **Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
 
 | Param | Type | Default | Description |

package/package.json

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

package/src/components/core/PhotoViewer.css

@@ -46,3 +46,10 @@ pnx-photo-viewer pnx-cornered-grid::part(corner-bottom-right) {
 		top: 10px;
 	}
 }
+
+/* Hidden widgets on sequence play */
+pnx-photo-viewer.pnx-playing pnx-bottom-drawer,
+pnx-photo-viewer.pnx-playing pnx-widget-legend,
+pnx-photo-viewer.pnx-playing pnx-widget-zoom {
+	display: none;
+}

package/src/components/core/PhotoViewer.js

@@ -327,6 +327,10 @@ export default class PhotoViewer extends Basic {
 				this.loader.setAttribute("value", 50);
 				alterPSVState(this.psv, this._initParams.getPSVPostInit());
 			});
+
+			// Show class when PSV is playing sequence
+			this.psv.addEventListener("sequence-playing", () => this.classList.add("pnx-playing"));
+			this.psv.addEventListener("sequence-stopped", () => this.classList.remove("pnx-playing"));
 		}
 		catch(e) {
 			let err = !PSSystem.isWebGLSupported ? this._t.pnx.error_webgl : this._t.pnx.error_psv;

package/src/components/core/Viewer.css

@@ -95,4 +95,12 @@ pnx-viewer .pnx-map .maplibregl-ctrl-attrib {
 		width: 250px;
 		max-width: 40vw;
 	}
-}
+}
+
+/* Hidden widgets on sequence play */
+pnx-viewer.pnx-playing pnx-bottom-drawer,
+pnx-viewer.pnx-playing pnx-mini,
+pnx-viewer.pnx-playing pnx-widget-legend,
+pnx-viewer.pnx-playing pnx-widget-zoom {
+	display: none;
+}

package/src/components/menus/PictureLegend.js

@@ -106,7 +106,6 @@ export default class PictureLegend extends LitElement {
 		pnx-picture-metadata {
 			margin: 5px 10px 10px;
 			display: block;
-			max-width: 450px;
 			box-sizing: border-box;
 		}
 

package/src/components/ui/Map.js

@@ -1,7 +1,7 @@
 import "./Map.css";
 import {
 	VECTOR_STYLES, TILES_PICTURES_ZOOM, getThumbGif, RASTER_LAYER_ID, combineStyles,
-	getMissingLayerStyles, isLabelLayer, getUserLayerId, getUserSourceId,
+	getMissingLayerStyles, isLabelLayer, getUserLayerId, getUserSourceId, isNullCoordinates,
 } from "../../utils/map";
 import { COLORS } from "../../utils/utils";
 import MarkerBaseSVG from "../../img/marker.svg";
@@ -206,7 +206,7 @@ export default class Map extends maplibregl.Map {
 	 */
 	_initMapPosition() {
 		if(
-			(!this._options.center || this._options.center == [0,0])
+			isNullCoordinates(this._options.center)
 			&& (!this._options.zoom || this._options.zoom === 0)
 			&& (!this._options.hash)
 		) {
@@ -417,6 +417,8 @@ export default class Map extends maplibregl.Map {
 
 	/**
 	 * Shows on map a picture position and heading.
+	 * 
+	 * If no longitude & latitude are set, marker is removed from map.
 	 * @memberof Panoramax.components.ui.Map#
 	 * @param {number} lon The longitude
 	 * @param {number} lat The latitude

package/src/components/ui/Photo.css

@@ -39,6 +39,10 @@
 	filter: drop-shadow(0 0 15px var(--blue));
 }
 
+.pnx-psv-playing .pnx-psv-tour-arrows {
+	display: none;
+}
+
 /* No virtual tour arrows if photo is reduced */
 pnx-mini .psv-virtual-tour-arrows {
 	display: none;

package/src/components/ui/Photo.js

@@ -803,6 +803,7 @@ export default class Photo extends PSViewer {
 	 */
 	playSequence() {
 		this._sequencePlaying = true;
+		this.container.classList.add("pnx-psv-playing");
 
 		/**
 		 * Event for sequence starting to play
@@ -841,6 +842,7 @@ export default class Photo extends PSViewer {
 	 */
 	stopSequence() {
 		this._sequencePlaying = false;
+		this.container.classList.remove("pnx-psv-playing");
 
 		// Next picture timer is pending
 		if(this._playTimer) {

package/src/utils/InitParameters.js

@@ -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;

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.
  * 
@@ -413,7 +424,14 @@ export function linkMapAndPhoto(parent) {
 			}
 		}
 		else {
-			parent.map.displayPictureMarker(e.detail.lon, e.detail.lat, parent.psv.getXY().x, e.detail.first, e.detail.picId);
+			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/tests/utils/InitParameters.test.js

@@ -118,6 +118,7 @@ describe("InitParameters", () => {
 
 	it("uses browserStorage parameters if no URL parameter is available", () => {
 		componentAttrs.map.raster = {};
+		componentAttrs.picture = undefined;
 		const initParams = new InitParameters(componentAttrs, undefined, browserStorage);
 		expect(initParams._mapAny).toEqual({
 			theme: "qualityscore",
@@ -130,6 +131,20 @@ describe("InitParameters", () => {
 		});
 	});
 
+	it("uses browserStorage parameters if no URL parameter is available, except map coords if picture is set", () => {
+		componentAttrs.map.raster = {};
+		const initParams = new InitParameters(componentAttrs, undefined, browserStorage);
+		expect(initParams._mapAny).toEqual({
+			theme: "qualityscore",
+			background: "aerial",
+			center: [0,0],
+			zoom: 19,
+			pitch: undefined,
+			bearing: undefined,
+			users: "user1,user2",
+		});
+	});
+
 	it("should sanitize objects correctly", () => {
 		const initParams = new InitParameters(componentAttrs, urlParams);
 		const obj = { a: 1, b: undefined, c: 3 };

package/tests/utils/map.test.js

@@ -11,6 +11,18 @@ describe("getThumbGif", () => {
 	});
 });
 
+describe("isNullCoordinates", () =>  {
+	it.each([
+		[undefined, true],
+		[null, true],
+		[[0,0], true],
+		[[48.7, -1.5], false],
+		[[], true],
+	])("works with %s", (input, expected) => {
+		expect(map.isNullCoordinates(input)).toBe(expected);
+	});
+});
+
 describe("isLabelLayer", () => {
 	it("works with just text-field", () => {
 		const layer = { type: "symbol", layout: { "text-field": "Label" } };