272 lines
7.9 KiB
HTML
272 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Proximity Maps</title>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
min-height: 100%;
|
|
position: relative;
|
|
margin: 0;
|
|
}
|
|
|
|
folk-map,
|
|
geo-wiki {
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
geo-wiki {
|
|
background: white;
|
|
border: solid 2px black;
|
|
border-radius: 5px;
|
|
ul {
|
|
height: 100%;
|
|
overflow: auto;
|
|
margin: 0;
|
|
scroll-padding-block-end: 1rem;
|
|
}
|
|
}
|
|
|
|
folk-cluster {
|
|
display: block;
|
|
position: absolute;
|
|
inset: 0 0 0 0;
|
|
pointer-events: none;
|
|
background-color: #b4d8f63b;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<folk-proximity>
|
|
<fc-geometry id="g1" x="25" y="100" width="400" height="200">
|
|
<folk-map coordinates="52.09, 5.12" zoom="13"></folk-map>
|
|
</fc-geometry>
|
|
|
|
<fc-geometry id="g2" x="50" y="550" width="400" height="250">
|
|
<folk-map coordinates="51.50404120260676, -0.14007568359375003" zoom="13"></folk-map>
|
|
</fc-geometry>
|
|
|
|
<fc-geometry id="g3" x="500" y="400" width="500" height="300">
|
|
<geo-wiki coordinates="51.50404120260676, -0.14007568359375003"></geo-wiki>
|
|
</fc-geometry>
|
|
</folk-proximity>
|
|
|
|
<script type="module">
|
|
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
|
|
import { FolkMap } from '../src/folk-map.ts';
|
|
import { FolkHull } from '../src/folk-hull.ts';
|
|
import { collisionDetection } from '../src/collision.ts';
|
|
|
|
FolkGeometry.register();
|
|
FolkMap.register();
|
|
FolkHull.register();
|
|
|
|
class GeoWiki extends HTMLElement {
|
|
static tagName = 'geo-wiki';
|
|
|
|
static register() {
|
|
customElements.define(this.tagName, this);
|
|
}
|
|
|
|
static observedAttributes = ['coordinates'];
|
|
|
|
#coordinates = [0, 0];
|
|
#results = [];
|
|
|
|
get coordinates() {
|
|
return this.#coordinates;
|
|
}
|
|
|
|
set coordinates(coordinates) {
|
|
this.setAttribute('coordinates', coordinates.join(', '));
|
|
}
|
|
|
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
if (name === 'coordinates') {
|
|
this.#coordinates = newValue.split(',').map((str) => Number(str)) || [0, 0];
|
|
this.searchWiki(this.#coordinates);
|
|
}
|
|
}
|
|
|
|
async searchWiki([lat, long]) {
|
|
const params = new URLSearchParams({
|
|
action: 'query',
|
|
format: 'json',
|
|
list: 'geosearch',
|
|
gscoord: `${lat}|${long}`,
|
|
gsradius: '1000',
|
|
gslimit: '50',
|
|
origin: '*',
|
|
});
|
|
// https://www.mediawiki.org/wiki/API:Geosearch
|
|
this.#results = await fetch(`https://en.wikipedia.org/w/api.php?${params}`)
|
|
.then((response) => response.json())
|
|
.then((data) => data?.query?.geosearch ?? []);
|
|
|
|
this.#renderResults();
|
|
}
|
|
|
|
#renderResults() {
|
|
this.firstElementChild?.remove();
|
|
|
|
const list = document.createElement('ul');
|
|
|
|
for (const result of this.#results) {
|
|
const li = document.createElement('li');
|
|
const a = document.createElement('a');
|
|
a.href = `https://en.wikipedia.org/wiki/${result.title}`;
|
|
a.textContent = result.title;
|
|
li.appendChild(a);
|
|
list.appendChild(li);
|
|
}
|
|
|
|
this.appendChild(list);
|
|
}
|
|
}
|
|
|
|
GeoWiki.register();
|
|
|
|
const PROXIMITY = 50;
|
|
|
|
class FolkCluster extends FolkHull {
|
|
static tagName = 'folk-cluster';
|
|
|
|
#data = new Map();
|
|
|
|
isElementInCluster(element) {
|
|
return this.sourceElements.includes(element);
|
|
}
|
|
|
|
isElementInProximity(element) {
|
|
for (const el of this.sourceElements) {
|
|
if (collisionDetection(el.getClientRect(), element.getClientRect(), PROXIMITY)) return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
addElements(...elements) {
|
|
this.sources += elements.map((el) => `#${el.id}`).join(', ');
|
|
}
|
|
|
|
removeElement(element) {
|
|
this.sources = this.sourceElements
|
|
.filter((el) => el !== element)
|
|
.map((el) => `#${el.id}`)
|
|
.join(', ');
|
|
}
|
|
}
|
|
|
|
FolkCluster.register();
|
|
|
|
class FolkProximity extends HTMLElement {
|
|
static tagName = 'folk-proximity';
|
|
|
|
static register() {
|
|
customElements.define(this.tagName, this);
|
|
}
|
|
|
|
#clusters = new Set();
|
|
#geometries = Array.from(this.querySelectorAll('fc-geometry'));
|
|
|
|
constructor() {
|
|
super();
|
|
|
|
this.addEventListener('move', this.#handleProximity);
|
|
this.addEventListener('resize', this.#handleProximity);
|
|
// document.addEventListener('recenter', (e) => {
|
|
// proximityMap.get(e.target.parentElement)?.forEach((el) => {
|
|
// const content = el.firstElementChild;
|
|
// if (content instanceof GeoWiki) {
|
|
// const { lat, lng } = e.target.coordinates;
|
|
// content.coordinates = [lat, lng];
|
|
// }
|
|
// });
|
|
// });
|
|
}
|
|
|
|
#handleProximity = (e) => {
|
|
const el = e.target;
|
|
const cluster = this.#findCluster(el);
|
|
|
|
if (cluster === null) {
|
|
for (const cluster of this.#clusters) {
|
|
// what if its in proximity to multiple clusters?
|
|
if (cluster.isElementInProximity(element)) {
|
|
cluster.addElements(element);
|
|
return;
|
|
}
|
|
}
|
|
|
|
for (const geometry of this.#geometries) {
|
|
if (geometry === el) break;
|
|
|
|
if (collisionDetection(geometry.getClientRect(), el.getClientRect(), PROXIMITY)) {
|
|
const cluster = document.createElement('folk-cluster');
|
|
cluster.addElements(geometry, el);
|
|
this.#clusters.add(cluster);
|
|
this.appendChild(cluster);
|
|
return;
|
|
}
|
|
}
|
|
} else {
|
|
const isInCluster = cluster.sourceElements
|
|
.filter((element) => el !== element)
|
|
.some((element) => collisionDetection(el.getClientRect(), element.getClientRect(), PROXIMITY));
|
|
|
|
if (!isInCluster) {
|
|
cluster.removeElement(el);
|
|
|
|
if (cluster.sourcesMap.size === 1) {
|
|
this.#clusters.delete(cluster);
|
|
cluster.remove();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
#findCluster(element) {
|
|
for (const cluster of this.#clusters) {
|
|
if (cluster.isElementInCluster(element)) return cluster;
|
|
}
|
|
return null;
|
|
}
|
|
}
|
|
|
|
FolkProximity.register();
|
|
|
|
/* proximityMap.forEach((set, el) => {
|
|
if (el !== e.target) {
|
|
const alreadyIntersection = set.has(e.target);
|
|
// TODO: refactor this hack once resizing and the vertices API are figured out
|
|
const isNowIntersecting = collisionDetection(el.getClientRect(), e.target.getClientRect(), 100);
|
|
if (isNowIntersecting && !alreadyIntersection) {
|
|
console.log('create cluster');
|
|
set.add(e.target);
|
|
proximityMap.get(e.target)?.add(el);
|
|
// hull = document.createElement('folk-hull');
|
|
// hull.sources = `#${el.id}, #${e.target.id}`;
|
|
// document.body.append(hull);
|
|
} else if (alreadyIntersection && !isNowIntersecting) {
|
|
console.log('delete cluster');
|
|
set.delete(e.target);
|
|
proximityMap.get(e.target)?.delete(el);
|
|
// hull.remove();
|
|
// hull = null;
|
|
}
|
|
}
|
|
}); */
|
|
</script>
|
|
</body>
|
|
</html>
|