@panoramax/web-viewer 4.0.2-develop-e389d775 → 4.0.2-develop-4d3bf829

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

@@ -3,7 +3,7 @@
 ## Panoramax.components.ui.Photo ⇐ <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code>
 **Kind**: static class of <code>Panoramax.components.ui</code>  
 **Extends**: <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code>  
-**Emits**: [<code>picture-loading</code>](#Panoramax.components.ui.Photo+event_picture-loading), [<code>picture-preview-started</code>](#Panoramax.components.ui.Photo+event_picture-preview-started), [<code>picture-preview-stopped</code>](#Panoramax.components.ui.Photo+event_picture-preview-stopped), [<code>view-rotated</code>](#Panoramax.components.ui.Photo+event_view-rotated), [<code>picture-loaded</code>](#Panoramax.components.ui.Photo+event_picture-loaded), [<code>picture-tiles-loaded</code>](#Panoramax.components.ui.Photo+event_picture-tiles-loaded), [<code>transition-duration-changed</code>](#Panoramax.components.ui.Photo+event_transition-duration-changed), [<code>sequence-playing</code>](#Panoramax.components.ui.Photo+event_sequence-playing), [<code>sequence-stopped</code>](#Panoramax.components.ui.Photo+event_sequence-stopped), [<code>pictures-navigation-changed</code>](#Panoramax.components.ui.Photo+event_pictures-navigation-changed), [<code>ready</code>](#Panoramax.components.ui.Photo+event_ready), [<code>annotations-toggled</code>](#Panoramax.components.ui.Photo+event_annotations-toggled)  
+**Emits**: [<code>picture-loading</code>](#Panoramax.components.ui.Photo+event_picture-loading), [<code>picture-preview-started</code>](#Panoramax.components.ui.Photo+event_picture-preview-started), [<code>picture-preview-stopped</code>](#Panoramax.components.ui.Photo+event_picture-preview-stopped), [<code>view-rotated</code>](#Panoramax.components.ui.Photo+event_view-rotated), [<code>picture-loaded</code>](#Panoramax.components.ui.Photo+event_picture-loaded), [<code>picture-tiles-loaded</code>](#Panoramax.components.ui.Photo+event_picture-tiles-loaded), [<code>transition-duration-changed</code>](#Panoramax.components.ui.Photo+event_transition-duration-changed), [<code>sequence-playing</code>](#Panoramax.components.ui.Photo+event_sequence-playing), [<code>sequence-stopped</code>](#Panoramax.components.ui.Photo+event_sequence-stopped), [<code>pictures-navigation-changed</code>](#Panoramax.components.ui.Photo+event_pictures-navigation-changed), [<code>ready</code>](#Panoramax.components.ui.Photo+event_ready), [<code>annotations-toggled</code>](#Panoramax.components.ui.Photo+event_annotations-toggled), [<code>annotation-click</code>](#Panoramax.components.ui.Photo+event_annotation-click), [<code>annotations-unfocused</code>](#Panoramax.components.ui.Photo+event_annotations-unfocused)  
 
 * [.Photo](#Panoramax.components.ui.Photo) ⇐ <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code>
     * [new Photo(parent, container, [options])](#new_Panoramax.components.ui.Photo_new)
@@ -39,12 +39,14 @@
     * ["picture-preview-stopped"](#Panoramax.components.ui.Photo+event_picture-preview-stopped)
     * ["view-rotated"](#Panoramax.components.ui.Photo+event_view-rotated)
     * ["picture-loaded"](#Panoramax.components.ui.Photo+event_picture-loaded)
+    * ["annotation-click"](#Panoramax.components.ui.Photo+event_annotation-click)
     * ["picture-tiles-loaded"](#Panoramax.components.ui.Photo+event_picture-tiles-loaded)
     * ["transition-duration-changed"](#Panoramax.components.ui.Photo+event_transition-duration-changed)
     * ["sequence-playing"](#Panoramax.components.ui.Photo+event_sequence-playing)
     * ["sequence-stopped"](#Panoramax.components.ui.Photo+event_sequence-stopped)
     * ["pictures-navigation-changed"](#Panoramax.components.ui.Photo+event_pictures-navigation-changed)
     * ["annotations-toggled"](#Panoramax.components.ui.Photo+event_annotations-toggled)
+    * ["annotations-unfocused"](#Panoramax.components.ui.Photo+event_annotations-unfocused)
 
 <a name="new_Panoramax.components.ui.Photo_new"></a>
 
@@ -375,6 +377,18 @@ Event for picture load (low-resolution image is loaded)
 | detail.z | <code>number</code> | New z position (0-100) |
 | detail.first | <code>boolean</code> | True if first picture loaded |
 
+<a name="Panoramax.components.ui.Photo+event_annotation-click"></a>
+
+### "annotation-click"
+Event launched on annotation click over picture
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.annotationId | <code>string</code> | The annotation UUID |
+
 <a name="Panoramax.components.ui.Photo+event_picture-tiles-loaded"></a>
 
 ### "picture-tiles-loaded"
@@ -435,3 +449,9 @@ Event for pictures annotation visibility change
 | --- | --- | --- |
 | detail.visible | <code>boolean</code> | True if they are visible |
 
+<a name="Panoramax.components.ui.Photo+event_annotations-unfocused"></a>
+
+### "annotations-unfocused"
+Event for pictures annotation unfocus
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  

package/package.json

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

package/src/components/menus/AnnotationsList.js

@@ -44,10 +44,14 @@ export default class AnnotationsList extends LitElement {
 		this._onPicChange();
 		this._parent?.psv?.addEventListener("picture-loaded", this._onPicChange.bind(this));
 
-		this._parent?.psv?._myMarkers?.addEventListener("select-marker", ({ marker }) => {
-			const aPos = this._meta.properties?.annotations?.findIndex(a => a.id === marker.data.id);
+		this._parent?.psv?.addEventListener("annotation-click", e => {
+			const aPos = this._meta.properties?.annotations?.findIndex(a => a.id === e.detail.annotationId);
 			if(aPos >= 0) { this._onListItemClick(Object.assign({nb: aPos+1}, this._meta.properties.annotations[aPos])); }
 		});
+
+		this._parent?.psv?.addEventListener("annotations-unfocused", () => {
+			this._onListItemClick(null);
+		});
 	}
 
 	/** @private */

package/src/components/menus/PictureLegend.js

@@ -146,6 +146,9 @@ export default class PictureLegend extends LitElement {
 			this._parent.psv.addEventListener("sequence-stopped", () => {
 				this._onPicChange(this._parent.psv.getPictureMetadata());
 			});
+			this._parent.psv.addEventListener("annotation-click", () => {
+				this._expanded = true;
+			});
 		});
 	}
 

package/src/components/menus/PictureMetadata.js

@@ -82,8 +82,14 @@ export default class PictureMetadata extends LitElement {
 		super.connectedCallback();
 
 		this._meta = this._parent?.psv?.getPictureMetadata();
-		this._parent?.psv?.addEventListener("picture-loaded", () => {
-			this._meta = this._parent?.psv?.getPictureMetadata();
+		this._parent?.oncePSVReady?.().then(() => {
+			this._parent.psv.addEventListener("picture-loaded", () => {
+				this._meta = this._parent.psv.getPictureMetadata();
+			});
+			this._parent.psv.addEventListener("annotation-click", () => {
+				const tabs = this.shadowRoot.querySelector("pnx-tabs");
+				if(tabs) { tabs.setAttribute("activeTabIndex", 4); }
+			});
 		});
 	}
 

package/src/components/ui/Photo.js

@@ -79,6 +79,8 @@ PSViewer.useNewAnglesOrder = true;
  * @fires Panoramax.components.ui.Photo#pictures-navigation-changed
  * @fires Panoramax.components.ui.Photo#ready
  * @fires Panoramax.components.ui.Photo#annotations-toggled
+ * @fires Panoramax.components.ui.Photo#annotation-click
+ * @fires Panoramax.components.ui.Photo#annotations-unfocused
  * @example
  * const psv = new Panoramax.components.ui.Photo(viewer, psvNode, {transitionDuration: 500})
  */
@@ -141,8 +143,10 @@ export default class Photo extends PSViewer {
 		this._myVTour.addEventListener("enter-arrow", this._onEnterArrow.bind(this));
 		this._myVTour.addEventListener("leave-arrow", this._onLeaveArrow.bind(this));
 		this._myVTour.addEventListener("node-changed", this._onNodeChanged.bind(this));
+		this._myMarkers.addEventListener("select-marker", this._onSelectMarker.bind(this));
 		this.addEventListener("position-updated", this._onPositionUpdated.bind(this));
 		this.addEventListener("zoom-updated", this._onZoomUpdated.bind(this));
+		this.addEventListener("dblclick", this._onDoubleClick.bind(this));
 		this._parent.addEventListener("select", this._onSelect.bind(this));
 
 		// Fix for loader circle background not showing up
@@ -415,6 +419,14 @@ export default class Photo extends PSViewer {
 		this._onTilesStartLoading();
 	}
 
+	/**
+	 * Event handler for double click
+	 * @private
+	 */
+	_onDoubleClick() {
+		this.unfocusAnnotation();
+	}
+
 	/**
 	 * Event handler for node change in PSV.
 	 * Allows to send a custom "picture-loaded" event.
@@ -478,6 +490,25 @@ export default class Photo extends PSViewer {
 		this._onTilesStartLoading();
 	}
 
+	/**
+	 * Event handler for marker select
+	 * @memberof Panoramax.components.ui.Photo#
+	 * @private
+	 */
+	_onSelectMarker(e) {
+		if(!e.marker) { return; }
+		if(e.marker.id?.startsWith("annotation-")) {
+			/**
+			 * Event launched on annotation click over picture
+			 * @event Panoramax.components.ui.Photo#annotation-click
+			 * @type {CustomEvent}
+			 * @property {string} detail.annotationId The annotation UUID
+			 */
+			const event = new CustomEvent("annotation-click", { detail: { annotationId: e.marker.data.id }});
+			this.dispatchEvent(event);
+		}
+	}
+
 	/**
 	 * Event handler for loading a new range of tiles
 	 * @memberof Panoramax.components.ui.Photo#
@@ -1000,6 +1031,9 @@ export default class Photo extends PSViewer {
 				stroke: "var(--red)",
 				strokeWidth: "3px",
 				fill: "var(--red-transparent)",
+			},
+			data: {
+				selected: true,
 			}
 		});
 		this._myMarkers.gotoMarker(annotationId, 0);
@@ -1011,18 +1045,31 @@ export default class Photo extends PSViewer {
 	 * @memberof Panoramax.components.ui.Photo#
 	 */
 	unfocusAnnotation() {
-		Object.keys(this._myMarkers.markers)
-			.filter(id => id.startsWith("annotation-"))
-			.forEach(id => {
+		const selectedAnnotations = Object.keys(this._myMarkers.markers)
+			.filter(id => id.startsWith("annotation-") && this._myMarkers.markers[id]?.config?.data?.selected);
+		
+		if(selectedAnnotations.length > 0) {
+			selectedAnnotations.forEach(id => {
 				this._myMarkers.updateMarker({
 					id,
 					svgStyle: {
 						stroke: "var(--orange)",
 						strokeWidth: "3px",
 						fill: "var(--orange-transparent)",
+					},
+					data: {
+						selected: false,
 					}
 				});
 			});
+
+			/**
+			 * Event for pictures annotation unfocus
+			 * @event Panoramax.components.ui.Photo#annotations-unfocused
+			 * @type {Event}
+			 */
+			this.dispatchEvent(new Event("annotations-unfocused"));
+		}
 	}
 
 	/**

package/src/translations/zh_Hant.json

@@ -185,7 +185,12 @@
         "geo_uri": "外部程式",
         "contribute_id": "透過 iD 編輯器來貢獻 OpenStreetMap",
         "filter_date_6months": "6 個月",
-        "picture_all": "全部"
+        "picture_all": "全部",
+        "metadata_exif_doc": "EXIF 標籤文件",
+        "metadata_exif_doc_title": "請參閱 Exiv2 文件以取得 EXIF 和 XMP 標籤定義的完整說明",
+        "metadata_location_coordinates": "座標 (經度, 緯度)",
+        "metadata_location_copy": "複製 {v}",
+        "metadata_location_copy_more": "更多座標複製選項"
     },
     "map": {
         "loading": "正在載入…",