@panoramax/web-viewer 3.2.3-develop-b76f2545 → 3.2.3-develop-6f02288e

package/package.json

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

package/src/components/core/PhotoViewer.js

@@ -105,14 +105,6 @@ export default class PhotoViewer extends Basic {
 		this.psvContainer.setAttribute("slot", "bg");
 		this.grid.appendChild(this.psvContainer);
 		this.popup = createWebComp("pnx-popup", {_parent: this, onclose: this._onPopupClose.bind(this)});
-
-		if(this["url-parameters"] && this["url-parameters"] !== "false") {
-			this.urlHandler = new URLHandler(this);
-			this.onceReady().then(() => {
-				this.urlHandler.listenToChanges();
-				this.urlHandler._onParentChange();
-			});
-		}
 	}
 
 	/** @private */
@@ -168,26 +160,22 @@ export default class PhotoViewer extends Basic {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._moveChildToGrid();
 
-		this.onceAPIReady().then(async () => {
-			this.loader.setAttribute("value", 30);
-			this._createInitParamsHandler();
+		if(this["url-parameters"] && this["url-parameters"] !== "false") {
+			this.urlHandler = new URLHandler(this);
+			this.onceReady().then(() => {
+				this.urlHandler.listenToChanges();
+				this.urlHandler._onParentChange();
+			});
+		}
 
-			const myPostInitParams = this._initParams.getParentPostInit();
+		this.onceAPIReady().then(this._postAPIInit.bind(this));
+	}
 
-			this._initPSV();
-			this._initWidgets();
-			alterPhotoViewerState(this, myPostInitParams);
-			this._handleKeyboardManagement();
-			
-			if(myPostInitParams.picture) {
-				this.psv.addEventListener("picture-loaded", () => this.loader.dismiss(), {once: true});
-			}
-			else {
-				this.loader.dismiss();
-			}
-		});
+	/** @private */
+	firstUpdated() {
+		super.firstUpdated();
+		this._moveChildToGrid();		
 	}
 
 	getClassName() {
@@ -208,7 +196,7 @@ export default class PhotoViewer extends Basic {
 
 	/** @private */
 	render() {
-		return [this.loader, this.grid, this.popup, this.slot];
+		return [this.loader, this.grid, this.popup];
 	}
 
 	getSubComponentsNames() {
@@ -257,6 +245,26 @@ export default class PhotoViewer extends Basic {
 		});
 	}
 
+	/** @private */
+	async _postAPIInit() {
+		this.loader.setAttribute("value", 30);
+		this._createInitParamsHandler();
+
+		const myPostInitParams = this._initParams.getParentPostInit();
+
+		this._initPSV();
+		this._initWidgets();
+		alterPhotoViewerState(this, myPostInitParams);
+		this._handleKeyboardManagement();
+		
+		if(myPostInitParams.picture) {
+			this.psv.addEventListener("picture-loaded", () => this.loader.dismiss(), {once: true});
+		}
+		else {
+			this.loader.dismiss();
+		}
+	}
+
 	/** @private */
 	_initPSV() {
 		try {
@@ -330,26 +338,24 @@ export default class PhotoViewer extends Basic {
 
 	/** @private */
 	_moveChildToGrid() {
-		let i = 0;
-		while(i < this.childNodes.length) {
-			let n = this.childNodes[i];
-			if(n.getAttribute?.("slot")) {
-				// Add parent + translation for our components
-				if(n.tagName?.toLowerCase().startsWith("pnx-")) {
-					n._parent = this;
-					n._t = this._t;
-				}
-				// Editors slot -> legend
-				if(n.getAttribute("slot") === "editors") {
-					this.onceReady().then(() => this.legend.appendChild(n));
-				}
-				// Add to grid for other cases
-				else {
-					this.grid.appendChild(n);
-				}
+		const slotContent = Array.from(this.querySelectorAll("[slot]"));
+
+		slotContent.forEach(n => {
+			// Add parent + translation for our components
+			if(n.tagName?.toLowerCase().startsWith("pnx-")) {
+				n._parent = this;
+				n._t = this._t;
 			}
-			else { i++; }
-		}
+
+			// Editors slot -> legend
+			if(n.getAttribute("slot") === "editors") {
+				this.onceReady().then(() => this.legend?.appendChild(n));
+			}
+			// Add to grid else
+			else {
+				this.grid.appendChild(n);
+			}
+		});
 	}
 
 	/**

package/src/components/core/Viewer.js

@@ -196,35 +196,6 @@ export default class Viewer extends PhotoViewer {
 		}
 	}
 
-	/** @private */
-	connectedCallback() {
-		Basic.prototype.connectedCallback.call(this);
-		this._moveChildToGrid();
-
-		this.onceAPIReady().then(async () => {
-			this.loader.setAttribute("value", 30);
-			this._createInitParamsHandler();
-
-			const myPostInitParams = this._initParams.getParentPostInit();
-
-			this._initPSV();
-			await this._initMap();
-			this._initWidgets();
-			alterViewerState(this, myPostInitParams);
-			this._handleKeyboardManagement();
-			
-			if(myPostInitParams.picture) {
-				this.psv.addEventListener("picture-loaded", () => {
-					alterViewerState(this, myPostInitParams); // Do it again for forcing focus
-					this.loader.dismiss();
-				}, {once: true});
-			}
-			else {
-				this.loader.dismiss();
-			}
-		});
-	}
-
 	getClassName() {
 		return "Viewer";
 	}
@@ -328,6 +299,34 @@ export default class Viewer extends PhotoViewer {
 		linkMapAndPhoto(this);
 	}
 
+	/** @private */
+	async _postAPIInit() {
+		this.loader.setAttribute("value", 30);
+		this._createInitParamsHandler();
+
+		const myPostInitParams = this._initParams.getParentPostInit();
+
+		this._initPSV();
+		await this._initMap();
+		this._initWidgets();
+
+		// Re-launch slot move (for those depending on widgets)
+		this._moveChildToGrid();
+
+		alterViewerState(this, myPostInitParams);
+		this._handleKeyboardManagement();
+		
+		if(myPostInitParams.picture) {
+			this.psv.addEventListener("picture-loaded", () => {
+				alterViewerState(this, myPostInitParams); // Do it again for forcing focus
+				this.loader.dismiss();
+			}, {once: true});
+		}
+		else {
+			this.loader.dismiss();
+		}
+	}
+
 	/** @private */
 	_handleKeyboardManagement() {
 		// Switchers

package/src/components/ui/Photo.js

@@ -210,15 +210,16 @@ export default class Photo extends PSViewer {
 		const sameSequence = fromNode && toNode.sequence.id === fromNode.sequence.id;
 		const fromNodeHeading = (fromNode?.properties?.["view:azimuth"] || 0) * (Math.PI / 180);
 		const toNodeHeading = (toNode?.properties?.["view:azimuth"] || 0) * (Math.PI / 180);
+		const toNodeRelHeading = getRelativeHeading(toNode) * (Math.PI / 180);
 
 		this.setOption("maxFov", Math.min(toNode.horizontalFov * 3/4, 90));
 
-		const centerNoAnim = {
+		const forwardNoAnim = {
 			showLoader: false,
 			effect: "none",
 			speed: 0,
 			rotation: false,
-			rotateTo: { pitch: 0, yaw: 0 },
+			rotateTo: { pitch: 0, yaw: -toNodeRelHeading },
 			zoomTo: PSV_DEFAULT_ZOOM
 		};
 
@@ -226,13 +227,13 @@ export default class Photo extends PSViewer {
 		if(toNode.horizontalFov == 360) {
 			// No previous sequence -> Point to center + no animation
 			if(!fromNode) {
-				nodeTransition = centerNoAnim;
+				nodeTransition = forwardNoAnim;
 			}
 			// Has a previous sequence
 			else {
 				// Far away sequences -> Point to center + no animation
 				if(getDistance(fromNode.gps, toNode.gps) >= 0.001) {
-					nodeTransition = centerNoAnim;
+					nodeTransition = forwardNoAnim;
 				}
 				// Nearby sequences -> Keep orientation
 				else {
@@ -265,7 +266,7 @@ export default class Photo extends PSViewer {
 			}
 			// Different sequence -> Point to center + no animation
 			else {
-				nodeTransition = centerNoAnim;
+				nodeTransition = forwardNoAnim;
 			}
 		}