Skip to content

Commit af14cef

Browse files
ondrasondras
committed
wip komponentizace
1 parent dbccf46 commit af14cef

File tree

5 files changed

+85
-63
lines changed

5 files changed

+85
-63
lines changed

‎index.css

-7
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,6 @@ body {
2525
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background-color: rgba(0, 126, 255, 0.4); }
2626
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background-color: rgb(57, 140, 204, 0.6); }
2727

28-
#scene {
29-
flex: 2 1 0;
30-
min-width: 0;
31-
min-height: 0;
32-
position: relative;
33-
}
34-
3528
little-planet {
3629
display: block;
3730
width: 100%;

‎index.html

+4
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,20 @@
1414
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1/dist/MarkerCluster.Default.css" />
1515

1616
<link rel="stylesheet" href="index.css" />
17+
<link rel="stylesheet" href="pano-scene.css" />
1718
<link rel="stylesheet" href="pano-icon.css" />
1819
<link rel="stylesheet" href="pano-near.css" />
1920
<link rel="icon" href="https://emojimage.deno.dev/🌍" />
2021
</head>
2122

2223
<body>
2324
<div id="map"></div>
25+
<pano-scene></pano-scene>
26+
<!--
2427
<div id="scene">
2528
<little-planet></little-planet>
2629
</div>
30+
-->
2731
<script type="module" src="index.js"></script>
2832
</body>
2933
</html>

‎index.js

+5-56
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,14 @@
11
import { MAPTILER_KEY } from "./config.js";
22
import PanoIcon, { SIZE as ICON_SIZE } from "./pano-icon.js";
3-
import PanoNear from "./pano-near.js";
3+
import PanoScene from "./pano-scene.js";
44

55

6-
const DPR = devicePixelRatio;
76
const dateFormat = new Intl.DateTimeFormat([], {dateStyle:"medium", timeStyle:"short"});
8-
const littlePlanet = document.querySelector("little-planet");
9-
const scene = document.querySelector("#scene");
7+
const scene = document.querySelector("pano-scene");
108
const map = L.map("map");
119

12-
let currentItem = null;
1310
let allItems = [];
14-
let nearNodes = [];
1511

16-
function showPano(item) {
17-
littlePlanet.src = item["SourceFile"];
18-
19-
if (currentItem) {
20-
let { marker, panoIcon } = currentItem;
21-
if (marker._icon) { marker._icon.classList.remove("active"); }
22-
panoIcon.hideFov();
23-
}
24-
25-
nearNodes.forEach(node => node.remove());
26-
27-
currentItem = item;
28-
let { marker } = item;
29-
if (!marker._icon) { marker.__parent.spiderfy(); }
30-
if (marker._icon) { marker._icon.classList.add("active"); }
31-
32-
nearNodes = allItems
33-
.map(item => new PanoNear(item, currentItem))
34-
.filter(node => node.distance < 5*1000);
35-
nearNodes.forEach(node => {
36-
node.addEventListener("click", _ => showPano(node.target));
37-
});
38-
scene.append(...nearNodes);
39-
}
4012

4113
function buildPopup(item) {
4214
let frag = document.createDocumentFragment();
@@ -46,7 +18,7 @@ function buildPopup(item) {
4618
url.hash = item["SourceFile"];
4719
name.href = url.href;
4820
name.textContent = item["ImageDescription"] || "n/a";
49-
name.addEventListener("click", _ => showPano(item));
21+
name.addEventListener("click", _ => scene.show(item, allItems));
5022

5123
let date = document.createElement("div");
5224
date.append(dateFormat.format(new Date(item["CreateDate"] * 1000)));
@@ -71,8 +43,7 @@ function itemToMarker(item) {
7143
}
7244

7345
function syncSize() {
74-
littlePlanet.width = littlePlanet.clientWidth * DPR;
75-
littlePlanet.height = littlePlanet.clientHeight * DPR;
46+
scene.syncSize();
7647
map.invalidateSize();
7748
}
7849

@@ -85,7 +56,7 @@ function fromURL() {
8556

8657
map.setView([item["GPSLatitude"], item["GPSLongitude"]], 17);
8758
item.marker.openPopup();
88-
showPano(item);
59+
scene.show(item, allItems);
8960
}
9061

9162
function addLayers() {
@@ -117,26 +88,6 @@ function addLayers() {
11788
map.addLayer(topo);
11889
}
11990

120-
function onPanoChange(e) {
121-
if (!currentItem) { return; }
122-
if (!("FlightYawDegree" in currentItem)) { return; }
123-
124-
const { mode, camera } = e.target;
125-
126-
switch (mode) {
127-
case "pano":
128-
let angle = camera.lon + Number(currentItem["FlightYawDegree"]);
129-
currentItem.panoIcon.drawFov(angle, camera.fov);
130-
break;
131-
132-
case "planet":
133-
currentItem.panoIcon.hideFov();
134-
break;
135-
}
136-
137-
nearNodes.forEach(node => node.updatePosition(e.target));
138-
}
139-
14091
async function init() {
14192
window.addEventListener("resize", syncSize);
14293
syncSize();
@@ -156,8 +107,6 @@ async function init() {
156107
map.setView([0, 0], 2);
157108
}
158109

159-
littlePlanet.addEventListener("change", onPanoChange);
160-
161110
fromURL();
162111
}
163112

‎pano-scene.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
pano-scene {
2+
display: block;
3+
flex: 2 1 0;
4+
min-width: 0;
5+
min-height: 0;
6+
position: relative;
7+
}

‎pano-scene.js

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import PanoNear from "./pano-near.js";
2+
3+
4+
const DPR = devicePixelRatio;
5+
6+
export default class PanoScene extends HTMLElement {
7+
#lp;
8+
#item;
9+
#near = [];
10+
11+
show(item, allItems) {
12+
let littlePlanet = document.createElement("little-planet");
13+
littlePlanet.src = item["SourceFile"];
14+
this.#lp = littlePlanet;
15+
16+
littlePlanet.addEventListener("change", e => this.#onPanoChange(e));
17+
18+
if (this.#item) {
19+
let { marker, panoIcon } = this.#item;
20+
if (marker._icon) { marker._icon.classList.remove("active"); }
21+
panoIcon.hideFov();
22+
}
23+
24+
this.#item = item;
25+
let { marker } = item;
26+
if (!marker._icon) { marker.__parent.spiderfy(); }
27+
if (marker._icon) { marker._icon.classList.add("active"); }
28+
29+
let near = allItems
30+
.filter(otherItem => otherItem != item)
31+
.map(otherItem => new PanoNear(otherItem, item))
32+
.filter(node => node.distance < 5*1000);
33+
34+
near.forEach(node => {
35+
node.addEventListener("click", _ => this.show(node.target, allItems));
36+
});
37+
this.#near = near;
38+
39+
this.replaceChildren(littlePlanet, ...near);
40+
this.syncSize();
41+
}
42+
43+
syncSize() { // fixme resizeobserver
44+
const lp = this.#lp;
45+
if (!lp) { return; }
46+
lp.width = lp.clientWidth * DPR;
47+
lp.height = lp.clientHeight * DPR;
48+
}
49+
50+
#onPanoChange(e) {
51+
if (!("FlightYawDegree" in this.#item)) { return; }
52+
53+
const { mode, camera } = e.target;
54+
55+
switch (mode) {
56+
case "pano":
57+
let angle = camera.lon + Number(this.#item["FlightYawDegree"]);
58+
this.#item.panoIcon.drawFov(angle, camera.fov);
59+
break;
60+
61+
case "planet":
62+
this.#item.panoIcon.hideFov();
63+
break;
64+
}
65+
66+
this.#near.forEach(node => node.updatePosition(e.target));
67+
}
68+
}
69+
customElements.define("pano-scene", PanoScene);

0 commit comments

Comments
 (0)