@panoramax/web-viewer 4.0.3-develop-05bbd331 → 4.0.3-develop-e6a52885

package/docs/reference/components/core/PhotoViewer.md

@@ -106,6 +106,7 @@ Component properties. All of [Basic properties](Basic.md/#Panoramax.components.c
 | [fetchOptions] | <code>object</code> |  | Set custom options for fetch calls made against API ([same syntax as fetch options parameter](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters)) |
 | [lang] | <code>string</code> |  | To override language used for labels. Defaults to using user's preferred languages. |
 | [url-parameters] | <code>string</code> | <code>true</code> | Should the component add and update URL query parameters to save viewer state ? |
+| [keyboard-shortcuts] | <code>string</code> | <code>true</code> | Should keyboard shortcuts be enabled ? Set to "false" to fully disable any keyboard shortcuts. |
 
 <a name="Panoramax.components.core.PhotoViewer+onceReady"></a>
 

package/docs/reference/components/core/Viewer.md

@@ -114,6 +114,7 @@ Component properties. All of [Basic properties](Basic.md/#Panoramax.components.c
 | [map] | <code>object</code> |  | An object with [any map option available in Map or MapMore class](../ui/MapMore.md/#Panoramax.components.ui.MapMore).<br />Example: `map="{'background': 'aerial', 'theme': 'age'}"` |
 | [psv] | <code>object</code> |  | [Any option to pass to Photo component](../ui/Photo.md/#Panoramax.components.ui.Photo) as an object.<br />Example: `psv="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"` |
 | [url-parameters] | <code>string</code> | <code>true</code> | Should the component add and update URL query parameters to save viewer state ? |
+| [keyboard-shortcuts] | <code>string</code> | <code>true</code> | Should keyboard shortcuts be enabled ? Set to "false" to fully disable any keyboard shortcuts. |
 | [focus] | <code>string</code> | <code>&quot;pic&quot;</code> | The component showing up as main component (pic, map) |
 | [geocoder] | <code>string</code> | <code>&quot;nominatim&quot;</code> | The geocoder engine to use (nominatim, ban, or URL to a standard [GeocodeJSON-compliant](https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md) API) |
 | [widgets] | <code>string</code> | <code>true</code> | Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like. |

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

@@ -20,6 +20,7 @@
     * [.displayPictureMarker(lon, lat, heading, [skipCenter])](#Panoramax.components.ui.Map+displayPictureMarker)
     * [.reloadLayersStyles()](#Panoramax.components.ui.Map+reloadLayersStyles)
     * [.addEventListener(type, listener)](#Panoramax.components.ui.Map+addEventListener)
+    * [.setVisibleUsers(visibleIds)](#Panoramax.components.ui.Map+setVisibleUsers)
     * ["ready"](#Panoramax.components.ui.Map+event_ready)
     * ["background-changed"](#Panoramax.components.ui.Map+event_background-changed)
     * ["users-changed"](#Panoramax.components.ui.Map+event_users-changed)
@@ -180,6 +181,17 @@ This is a binder to [`on`](https://maplibre.org/maplibre-gl-js/docs/API/classes/
 | listener | <code>function</code> |  | The event handler |
 | [options.once] | <code>boolean</code> | <code>false</code> | Set to true to only listen to first event. |
 
+<a name="Panoramax.components.ui.Map+setVisibleUsers"></a>
+
+### map.setVisibleUsers(visibleIds)
+Make given user layers visible on map, and hide all others (if any)
+
+**Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| visibleIds | <code>string</code> \| <code>Array.&lt;string&gt;</code> | The user layers IDs to display |
+
 <a name="Panoramax.components.ui.Map+event_ready"></a>
 
 ### "ready"

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

@@ -128,6 +128,7 @@ Wait for a given map layer to be really available.
 Make given user layers visible on map, and hide all others (if any)
 
 **Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+**Overrides**: [<code>setVisibleUsers</code>](Map.md/#Panoramax.components.ui.Map+setVisibleUsers)  
 
 | Param | Type | Description |
 | --- | --- | --- |

package/package.json

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

package/src/components/core/PhotoViewer.js

@@ -85,11 +85,13 @@ export default class PhotoViewer extends Basic {
 	 * @property {object} [fetchOptions] Set custom options for fetch calls made against API ([same syntax as fetch options parameter](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters))
 	 * @property {string} [lang] To override language used for labels. Defaults to using user's preferred languages.
 	 * @property {string} [url-parameters=true] Should the component add and update URL query parameters to save viewer state ?
+	 * @property {string} [keyboard-shortcuts=true] Should keyboard shortcuts be enabled ? Set to "false" to fully disable any keyboard shortcuts.
 	 */
 	static properties = {
 		psv: {converter: Basic.GetJSONConverter()},
 		widgets: {type: String},
 		"url-parameters": {type: String},
+		"keyboard-shortcuts": {type: String},
 		...Basic.properties
 	};
 
@@ -99,6 +101,7 @@ export default class PhotoViewer extends Basic {
 		// Defaults
 		this.psv = {};
 		this["url-parameters"] = this.getAttribute("url-parameters") || true;
+		this["keyboard-shortcuts"] = this.getAttribute("keyboard-shortcuts") || true;
 		this.widgets = this.getAttribute("widgets") || "true";
 
 		// Init DOM containers
@@ -266,7 +269,10 @@ export default class PhotoViewer extends Basic {
 		this._initPSV();
 		this._initWidgets();
 		alterPhotoViewerState(this, myPostInitParams);
-		this._handleKeyboardManagement();
+		
+		if(myPostInitParams.keyboardShortcuts) {
+			this._handleKeyboardManagement();
+		}
 		
 		if(myPostInitParams.picture) {
 			this.psv.addEventListener("picture-loaded", () => this.loader.dismiss(), {once: true});

package/src/components/core/Viewer.js

@@ -95,6 +95,7 @@ export default class Viewer extends PhotoViewer {
 	 * @property {object} [map] An object with [any map option available in Map or MapMore class](#Panoramax.components.ui.MapMore).<br />Example: `map="{'background': 'aerial', 'theme': 'age'}"`
 	 * @property {object} [psv] [Any option to pass to Photo component](#Panoramax.components.ui.Photo) as an object.<br />Example: `psv="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"`
 	 * @property {string} [url-parameters=true] Should the component add and update URL query parameters to save viewer state ?
+	 * @property {string} [keyboard-shortcuts=true] Should keyboard shortcuts be enabled ? Set to "false" to fully disable any keyboard shortcuts.
 	 * @property {string} [focus=pic] The component showing up as main component (pic, map)
 	 * @property {string} [geocoder=nominatim] The geocoder engine to use (nominatim, ban, or URL to a standard [GeocodeJSON-compliant](https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md) API)
 	 * @property {string} [widgets=true] Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like.
@@ -321,7 +322,10 @@ export default class Viewer extends PhotoViewer {
 		this._moveChildToGrid();
 
 		alterViewerState(this, myPostInitParams);
-		this._handleKeyboardManagement();
+		
+		if(myPostInitParams.keyboardShortcuts) {
+			this._handleKeyboardManagement();
+		}
 		
 		if(myPostInitParams.picture) {
 			this.psv.addEventListener("picture-loaded", () => {

package/src/components/ui/Map.js

@@ -379,6 +379,9 @@ export default class Map extends maplibregl.Map {
 			});
 		});
 
+		// Force style reload
+		this.reloadLayersStyles();
+
 		/**
 		 * Event for visible users changes
 		 *

package/src/components/ui/MapMore.js

@@ -198,32 +198,21 @@ export default class MapMore extends Map {
 		return s;
 	}
 
-	/**
-	 * Change the map filters
-	 * @param {object} filters Filtering values
-	 * @param {string} [filters.minDate] Start date for pictures (format YYYY-MM-DD)
-	 * @param {string} [filters.maxDate] End date for pictures (format YYYY-MM-DD)
-	 * @param {string} [filters.pic_type] Type of picture to keep (flat, equirectangular)
-	 * @param {string} [filters.camera] Camera make and model to keep
-	 * @param {string} [filters.theme] Map theme to use
-	 * @param {number[]} [filters.qualityscore] QualityScore values, as a list of 1 to 5 grades
-	 * @param {boolean} [skipZoomIn=false] If true, doesn't force zoom in to map level >= 7
-	 * @memberof Panoramax.components.core.MapMore#
-	 */
-	setFilters(filters, skipZoomIn = false) {
+	/** @private */
+	_mapFiltersToLayersFilters(filters) {
+		let mapFilters = {};
 		let mapSeqFilters = [];
 		let mapPicFilters = [];
 		let reloadMapStyle = false;
-		this._mapFilters = {};
 
 		if(filters.minDate && filters.minDate !== "") {
-			this._mapFilters.minDate = filters.minDate;
+			mapFilters.minDate = filters.minDate;
 			mapSeqFilters.push([">=", ["get", "date"], filters.minDate]);
 			mapPicFilters.push([">=", ["get", "ts"], filters.minDate]);
 		}
 
 		if(filters.maxDate && filters.maxDate !== "") {
-			this._mapFilters.maxDate = filters.maxDate;
+			mapFilters.maxDate = filters.maxDate;
 			mapSeqFilters.push(["<=", ["get", "date"], filters.maxDate]);
 
 			// Get tomorrow date for pictures filtering
@@ -235,16 +224,16 @@ export default class MapMore extends Map {
 		}
 
 		if(filters.pic_type && filters.pic_type !== "") {
-			this._mapFilters.pic_type = filters.pic_type === "flat" ? "flat" : "equirectangular";
-			mapSeqFilters.push(["==", ["get", "type"], this._mapFilters.pic_type]);
-			mapPicFilters.push(["==", ["get", "type"], this._mapFilters.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 !== "") {
-			this._mapFilters.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";
@@ -256,13 +245,13 @@ export default class MapMore extends Map {
 		}
 
 		if(filters.qualityscore && filters.qualityscore.length > 0) {
-			this._mapFilters.qualityscore = filters.qualityscore;
-			mapSeqFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", this._mapFilters.qualityscore]]);
-			mapPicFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", this._mapFilters.qualityscore]]);
+			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)) {
-			this._mapFilters.theme = filters.theme;
+			mapFilters.theme = filters.theme;
 			reloadMapStyle = true;
 		}
 
@@ -280,6 +269,25 @@ export default class MapMore extends Map {
 			];
 		}
 
+		return { mapFilters, mapSeqFilters, mapPicFilters, reloadMapStyle };
+	}
+
+	/**
+	 * Change the map filters
+	 * @param {object} filters Filtering values
+	 * @param {string} [filters.minDate] Start date for pictures (format YYYY-MM-DD)
+	 * @param {string} [filters.maxDate] End date for pictures (format YYYY-MM-DD)
+	 * @param {string} [filters.pic_type] Type of picture to keep (flat, equirectangular)
+	 * @param {string} [filters.camera] Camera make and model to keep
+	 * @param {string} [filters.theme] Map theme to use
+	 * @param {number[]} [filters.qualityscore] QualityScore values, as a list of 1 to 5 grades
+	 * @param {boolean} [skipZoomIn=false] If true, doesn't force zoom in to map level >= 7
+	 * @memberof Panoramax.components.core.MapMore#
+	 */
+	setFilters(filters, skipZoomIn = false) {
+		let { mapFilters, mapSeqFilters, mapPicFilters, reloadMapStyle } = this._mapFiltersToLayersFilters(filters);
+
+		this._mapFilters = mapFilters;
 		if(reloadMapStyle) {
 			this.reloadLayersStyles();
 		}
@@ -291,9 +299,10 @@ export default class MapMore extends Map {
 				7, mapSeqFilters
 			];
 		}
-		
+
 		this.filterUserLayersContent("sequences", mapSeqFilters);
 		this.filterUserLayersContent("pictures", mapPicFilters);
+
 		if(
 			!skipZoomIn
 			&& (
@@ -321,4 +330,31 @@ export default class MapMore extends Map {
 		 */
 		this.fire("filters-changed", Object.assign({}, this._mapFilters));
 	}
+
+	/**
+	 * Make given user layers visible on map, and hide all others (if any)
+	 * @memberof Panoramax.components.ui.Map#
+	 * @param {string|string[]} visibleIds The user layers IDs to display
+	 */
+	async setVisibleUsers(visibleIds = []) {
+		await super.setVisibleUsers(visibleIds);
+		
+		// Force reload of styles & filters
+		let { mapSeqFilters, mapPicFilters, reloadMapStyle } = this._mapFiltersToLayersFilters(this._mapFilters);
+
+		if(reloadMapStyle) {
+			this.reloadLayersStyles();
+		}
+
+		const allUsers = visibleIds.includes("geovisio");
+		if(mapSeqFilters && allUsers) {
+			mapSeqFilters = ["step", ["zoom"],
+				true,
+				7, mapSeqFilters
+			];
+		}
+
+		this.filterUserLayersContent("sequences", mapSeqFilters);
+		this.filterUserLayersContent("pictures", mapPicFilters);
+	}
 }

package/src/components/ui/Photo.js

@@ -953,7 +953,7 @@ export default class Photo extends PSViewer {
 		if(!visible) { this._myMarkers.clearMarkers(); }
 		else {
 			let annotations = meta.properties.annotations;
-			if(annotations.length === 0) { console.warn("No annotation available on picture", meta.id); }
+			if(annotations?.length === 0) { console.warn("No annotation available on picture", meta.id); }
 
 			const picBData = this.state.textureData.panoData?.baseData;
 

package/src/utils/InitParameters.js

@@ -15,7 +15,7 @@ const MAPLIBRE_OPTIONS = [
 	"boxZoom", "clickTolerance", "collectResourceTiming",
 	"cooperativeGestures", "crossSourceCollisions", "doubleClickZoom", "dragPan",
 	"dragRotate", "fadeDuration", "failIfMajorPerformanceCaveat", "fitBoundsOptions",
-	"hash", "interactive", "keyboard", "localIdeographFontFamily", "locale", "logoPosition",
+	"hash", "interactive", "localIdeographFontFamily", "locale", "logoPosition",
 	"maplibreLogo", "maxBounds", "maxCanvasSize", "maxPitch", "maxTileCacheSize",
 	"maxTileCacheZoomLevels", "maxZoom", "minPitch", "minZoom", "pitch", "pitchWithRotate",
 	"pixelRatio", "preserveDrawingBuffer", "refreshExpiredTiles", "renderWorldCopies",
@@ -80,6 +80,7 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 		let map_raster = componentMap.raster;
 		let map_attribution = componentMap.attributionControl;
 		let map_others = filterMapLibreOptions(componentMap);
+		let keyboardShortcuts = componentAttrs["keyboard-shortcuts"];
 
 		//  - URL only
 		let psv_xyz = urlParams.xyz;
@@ -108,13 +109,14 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 
 		// Put all attributes in appropriate container
 		this._parentInit = { map, users, fetchOptions, style, lang, endpoint };
-		this._parentPostInit = { focus, picture, sequence, geocoder, widgets, forceFocus: true };
+		this._parentPostInit = { focus, picture, sequence, geocoder, widgets, forceFocus: true, keyboardShortcuts: true };
 
 		this._psvInit = Object.fromEntries(
 			Object.entries(componentPsv).filter(
 				([k,]) => !["transitionDuration", "picturesNavigation"].includes(k)
 			)
 		);
+
 		this._psvAny = {
 			transitionDuration: psv_speed,
 			picturesNavigation: psv_nav,
@@ -126,6 +128,7 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 			attributionControl: map_attribution,
 			...map_others
 		};
+
 		this._mapAny = {
 			theme: map_theme,
 			background: map_background,
@@ -142,6 +145,13 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 			camera: map_camera,
 			pic_score: map_pic_score,
 		};
+
+		if(keyboardShortcuts === "false") {
+			this._psvInit.keyboard = false;
+			this._psvInit.keyboardActions = {};
+			this._mapInit.keyboard = false;
+			this._parentPostInit.keyboardShortcuts = false;
+		}
 	}
 
 	/**

package/tests/components/ui/__snapshots__/Map.test.js.snap

@@ -736,5 +736,169 @@ Array [
     "visibility",
     "none",
   ],
+  Array [
+    "geovisio_blabla_pictures",
+    "circle-sort-key",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "hidden",
+        ],
+        true,
+      ],
+      90,
+      10,
+    ],
+  ],
+  Array [
+    "geovisio_pictures",
+    "circle-sort-key",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "hidden",
+        ],
+        true,
+      ],
+      90,
+      10,
+    ],
+  ],
+  Array [
+    "geovisio_blabla_pictures_symbols",
+    "icon-image",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "id",
+        ],
+        undefined,
+      ],
+      "",
+      Array [
+        "==",
+        Array [
+          "get",
+          "type",
+        ],
+        "equirectangular",
+      ],
+      "pnx-arrow-360",
+      "pnx-arrow-flat",
+    ],
+  ],
+  Array [
+    "geovisio_blabla_pictures_symbols",
+    "symbol-sort-key",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "hidden",
+        ],
+        true,
+      ],
+      90,
+      10,
+    ],
+  ],
+  Array [
+    "geovisio_pictures_symbols",
+    "icon-image",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "id",
+        ],
+        undefined,
+      ],
+      "",
+      Array [
+        "==",
+        Array [
+          "get",
+          "type",
+        ],
+        "equirectangular",
+      ],
+      "pnx-arrow-360",
+      "pnx-arrow-flat",
+    ],
+  ],
+  Array [
+    "geovisio_pictures_symbols",
+    "symbol-sort-key",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "hidden",
+        ],
+        true,
+      ],
+      90,
+      10,
+    ],
+  ],
+  Array [
+    "geovisio_blabla_sequences",
+    "line-sort-key",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "hidden",
+        ],
+        true,
+      ],
+      90,
+      10,
+    ],
+  ],
+  Array [
+    "geovisio_blabla_sequences",
+    "line-cap",
+    "square",
+  ],
+  Array [
+    "geovisio_sequences",
+    "line-sort-key",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "hidden",
+        ],
+        true,
+      ],
+      90,
+      10,
+    ],
+  ],
+  Array [
+    "geovisio_sequences",
+    "line-cap",
+    "square",
+  ],
 ]
 `;

package/tests/utils/InitParameters.test.js

@@ -66,6 +66,7 @@ describe("InitParameters", () => {
 			geocoder: true,
 			widgets: true,
 			forceFocus: true,
+			keyboardShortcuts: true,
 		});
 		expect(initParams._psvInit).toEqual({});
 		expect(initParams._psvAny).toEqual({
@@ -111,6 +112,7 @@ describe("InitParameters", () => {
 			geocoder: true,
 			widgets: true,
 			forceFocus: true,
+			keyboardShortcuts: true,
 		});
 	});
 
@@ -161,6 +163,7 @@ describe("InitParameters", () => {
 			geocoder: true,
 			widgets: true,
 			forceFocus: true,
+			keyboardShortcuts: true,
 		});
 	});
 
@@ -243,6 +246,15 @@ describe("InitParameters", () => {
 		expect(initParams._mapAny.background).toBe("streets");
 		expect(console.warn).toHaveBeenCalledWith("Parameter background can't be 'aerial' as no aerial imagery is available");
 	});
+
+	it("should handle keyboardShortcuts=false", () => {
+		componentAttrs["keyboard-shortcuts"] = "false";
+		const initParams = new InitParameters(componentAttrs, urlParams);
+		expect(initParams._mapInit.keyboard).toBe(false);
+		expect(initParams._parentPostInit.keyboardShortcuts).toBe(false);
+		expect(initParams._psvInit.keyboard).toBe(false);
+		expect(initParams._psvInit.keyboardActions).toEqual({});
+	});
 });
 
 describe("getMapPositionFromString", () => {