From 8da1016d89c3d22cf062062a691394c4033e79fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= Date: Thu, 28 Nov 2024 11:17:24 -0800 Subject: [PATCH] visualize proximate clusters --- demo/proximity-maps.html | 188 ++++++++++++++++++++++++++++++--------- src/folk-hull.ts | 10 ++- src/folk-set.ts | 4 + 3 files changed, 156 insertions(+), 46 deletions(-) diff --git a/demo/proximity-maps.html b/demo/proximity-maps.html index 9f54ed8..93d63d8 100644 --- a/demo/proximity-maps.html +++ b/demo/proximity-maps.html @@ -3,7 +3,7 @@ - Maps + Proximity Maps - - - + + + + - - - + + + - - - + + + + diff --git a/src/folk-hull.ts b/src/folk-hull.ts index 3e3a26e..2dec53a 100644 --- a/src/folk-hull.ts +++ b/src/folk-hull.ts @@ -4,6 +4,12 @@ import { Vertex, verticesToPolygon } from './arrows/utils'; export class FolkHull extends FolkSet { static tagName = 'folk-hull'; + #hull: Vertex[] = []; + + get hull(): ReadonlyArray { + return this.#hull; + } + update() { if (this.sourcesMap.size === 0) { this.style.clipPath = ''; @@ -11,8 +17,8 @@ export class FolkHull extends FolkSet { } const rects = Array.from(this.sourcesMap.values()); - const hull = makeHull(rects); - this.style.clipPath = verticesToPolygon(hull); + this.#hull = makeHull(rects); + this.style.clipPath = verticesToPolygon(this.#hull); } } diff --git a/src/folk-set.ts b/src/folk-set.ts index 679f181..0321101 100644 --- a/src/folk-set.ts +++ b/src/folk-set.ts @@ -25,6 +25,10 @@ export class FolkSet extends HTMLElement { return this.#sourcesMap; } + get sourceElements() { + return Array.from(this.#sourcesMap.keys()); + } + #sourcesCallback = (entry: ClientRectObserverEntry) => { this.#sourcesMap.set(entry.target, entry.contentRect); this.update();