panoIcon sharing

Author: ondras

components/pano-app.js

@@ -14,8 +14,15 @@ export default class PanoApp extends HTMLElement {
 			this.show(e.detail.item, {center:false, popup:false});
 		});
 
+		this.#scene.addEventListener("pano-click", e => {
+			this.show(e.detail.item, {center:true, popup:true});
+		});
+
 		this.#map.addEventListener("pano-over", e => this.#highlight(e.detail.item));
 		this.#map.addEventListener("pano-out", e => this.#highlight(null));
+
+		this.#scene.addEventListener("pano-over", e => this.#highlight(e.detail.item));
+		this.#scene.addEventListener("pano-out", e => this.#highlight(null));
 	}
 
 	connectedCallback() {
@@ -25,7 +32,8 @@ export default class PanoApp extends HTMLElement {
 
 	show(item, options) {
 		this.#map.activate(item, options);
-		this.#scene.show(item, this.#items);
+		let panoIcon = this.#map.getIcon(item);
+		this.#scene.show(item, this.#items, panoIcon);
 	}
 
 	#highlight(item) {

components/pano-icon.css

@@ -1,6 +1,9 @@
 pano-icon {
 	display: block;
 	position: relative;
+	--color: dodgerblue;
+	&.active { --color: orange; }
+	transition: opacity 300ms;
 
 	.fov {
 		position: absolute;
@@ -14,13 +17,13 @@ pano-icon {
 	}
 
 	.icon {
-		position: relative;
 		display: block;
 		path {
-			stroke: rgba(0, 0, 0, 0.75);
-			fill: dodgerblue;
+			stroke: #000;
+			fill: var(--color);
+			transition: all 300ms;
 		}
 	}
 
-	&.active .icon path { fill: orange; }
+	&:not(.highlight):not(.active) { opacity: 0.7; }
 }

components/pano-map.js

@@ -64,6 +64,8 @@ export default class PanoMap extends HTMLElement {
 		}
 	}
 
+	getIcon(item) { return this.#panoIcons.get(item); }
+
 	activate(item, options) {
 		if (options.center) { this.#map.setView([item["GPSLatitude"], item["GPSLongitude"]], 17); }
 
@@ -115,7 +117,6 @@ export default class PanoMap extends HTMLElement {
 		let icon = L.divIcon({html:panoIcon, popupAnchor, iconSize, className:""});
 		let marker = L.marker([item["GPSLatitude"], item["GPSLongitude"]], {title:item["ImageDescription"] || "", icon});
 
-		item.panoIcon = panoIcon;
 		marker.bindPopup(() => this.#buildPopup(item));
 
 		panoIcon.addEventListener("mouseenter", _ => this.#dispatch("pano-over", item));

components/pano-near.css

@@ -3,15 +3,16 @@ pano-near {
 	position: absolute;
 	translate: -50% -50%;
 	cursor: pointer;
+	--color: dodgerblue;
+	transition: opacity 300ms;
 
 	.icon {
 		display: block;
 		path {
-			stroke: rgba(0, 0, 0, 0.75);
-			fill: dodgerblue;
-			.leaflet-marker-icon.active & { fill: orange; }
+			stroke: #000;
+			fill: var(--color);
 		}
 	}
 
-	&:hover .icon path { fill: orange; }
+	&:not(.highlight):not(.active) { opacity: 0.7; }
 }

components/pano-scene.js

@@ -7,17 +7,19 @@ const NEAR_LIMIT = 5000;
 export default class PanoScene extends HTMLElement {
 	#lp;
 	#item;
+	#panoIcon;
 	#near = new Map();
 
 	constructor() {
 		super();
 		new ResizeObserver(_ => this.#lp && this.#syncSize()).observe(this);
 	}
 
-	show(item, allItems) {
+	show(item, allItems, panoIcon) {
 		let littlePlanet = document.createElement("little-planet");
 		littlePlanet.src = item["SourceFile"];
 		this.#lp = littlePlanet;
+		this.#panoIcon = panoIcon;
 
 		// fixme odebrat
 		littlePlanet.addEventListener("change", e => this.#onPanoChange(e));
@@ -46,18 +48,18 @@ export default class PanoScene extends HTMLElement {
 		this.#syncSize();
 	}
 
-	#syncSize() { // fixme resizeobserver
-		const lp = this.#lp;
-		lp.width = lp.clientWidth * DPR;
-		lp.height = lp.clientHeight * DPR;
-	}
-
 	highlight(item) {
 		for (let [i, near] of this.#near.entries()) {
 			near.classList.toggle("highlight", i == item);
 		}
 	}
 
+	#syncSize() {
+		const lp = this.#lp;
+		lp.width = lp.clientWidth * DPR;
+		lp.height = lp.clientHeight * DPR;
+	}
+
 	#dispatch(type, item) {
 		let event = new CustomEvent(type, {detail:{item}});
 		this.dispatchEvent(event);
@@ -71,11 +73,11 @@ export default class PanoScene extends HTMLElement {
 		switch (mode) {
 			case "pano":
 				let angle = camera.lon + Number(this.#item["FlightYawDegree"]);
-				this.#item.panoIcon.drawFov(angle, camera.fov);
+				this.#panoIcon.drawFov(angle, camera.fov);
 			break;
 
 			case "planet":
-				this.#item.panoIcon.hideFov();
+				this.#panoIcon.hideFov();
 			break;
 		}