From 18bcb91e8d214ec9c5ac69f6da45518f4182534e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= Date: Tue, 10 Dec 2024 11:48:09 -0800 Subject: [PATCH] fix base-set --- demo/visualizing-set-relations.html | 2 +- src/folk-base-connection.ts | 76 +++++++++++++---------------- src/folk-base-set.ts | 41 +++++++++++----- src/folk-hull.ts | 11 ++--- 4 files changed, 67 insertions(+), 63 deletions(-) diff --git a/demo/visualizing-set-relations.html b/demo/visualizing-set-relations.html index 7447e85..8676875 100644 --- a/demo/visualizing-set-relations.html +++ b/demo/visualizing-set-relations.html @@ -39,10 +39,10 @@

This is a Convex Hull

+ - diff --git a/src/folk-base-connection.ts b/src/folk-base-connection.ts index c1cedfb..ae7edb2 100644 --- a/src/folk-base-connection.ts +++ b/src/folk-base-connection.ts @@ -22,19 +22,47 @@ export class FolkBaseConnection extends FolkElement { override disconnectedCallback() { super.disconnectedCallback(); - this.unobserveSource(); - this.unobserveTarget(); + this.#unobserveSource(); + this.#unobserveTarget(); } override willUpdate(changedProperties: PropertyValues) { super.willUpdate(changedProperties); if (changedProperties.has('source')) { - this.observeSource(); + this.#unobserveSource(); + + const vertex = parseVertex(this.source); + + if (vertex) { + this.sourceRect = DOMRectReadOnly.fromRect(vertex); + } else { + this.sourceElement = document.querySelector(this.source); + + if (this.sourceElement === null) { + this.sourceRect = null; + } else { + folkObserver.observe(this.sourceElement, this.#sourceCallback); + } + } } if (changedProperties.has('target')) { - this.observeTarget(); + this.#unobserveTarget(); + + const vertex = parseVertex(this.target); + + if (vertex) { + this.targetRect = DOMRectReadOnly.fromRect(vertex); + } else { + this.targetElement = document.querySelector(this.target); + + if (this.targetElement === null) { + this.targetRect = null; + } else { + folkObserver.observe(this.targetElement, this.#targetCallback); + } + } } } @@ -42,25 +70,7 @@ export class FolkBaseConnection extends FolkElement { this.sourceRect = entry.contentRect; }; - observeSource() { - this.unobserveSource(); - - const vertex = parseVertex(this.source); - - if (vertex) { - this.sourceRect = DOMRectReadOnly.fromRect(vertex); - } else { - this.sourceElement = document.querySelector(this.source); - - if (this.sourceElement === null) { - this.sourceRect = null; - } else { - folkObserver.observe(this.sourceElement, this.#sourceCallback); - } - } - } - - unobserveSource() { + #unobserveSource() { if (this.sourceElement === null) return; folkObserver.unobserve(this.sourceElement, this.#sourceCallback); @@ -70,25 +80,7 @@ export class FolkBaseConnection extends FolkElement { this.targetRect = entry.contentRect; }; - observeTarget() { - this.unobserveTarget(); - - const vertex = parseVertex(this.target); - - if (vertex) { - this.targetRect = DOMRectReadOnly.fromRect(vertex); - } else { - this.targetElement = document.querySelector(this.target); - - if (this.targetElement === null) { - this.targetRect = null; - } else { - folkObserver.observe(this.targetElement, this.#targetCallback); - } - } - } - - unobserveTarget() { + #unobserveTarget() { if (this.targetElement === null) return; folkObserver.unobserve(this.targetElement, this.#targetCallback); } diff --git a/src/folk-base-set.ts b/src/folk-base-set.ts index 9f6e094..b56ada6 100644 --- a/src/folk-base-set.ts +++ b/src/folk-base-set.ts @@ -6,6 +6,7 @@ import { PropertyValues } from '@lit/reactive-element'; const folkObserver = new FolkObserver(); +// TODO: use mutation observer to track the addition an removal of elements export class FolkBaseSet extends FolkElement { @property({ type: String, reflect: true }) sources = ''; @@ -20,25 +21,33 @@ export class FolkBaseSet extends FolkElement { @state() sourceElements = new Set(); - #sourcesCallback = (entry: ClientRectObserverEntry) => { - this.#sourcesMap.set(entry.target, entry.contentRect); - this.requestUpdate(); - }; + #slot = document.createElement('slot'); - disconnectedCallback() { + override firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + + this.renderRoot.append(this.#slot); + + this.#slot.addEventListener('slotchange', this.#onSlotchange); + } + + override willUpdate(changedProperties: PropertyValues) { + super.willUpdate(changedProperties); + + if (changedProperties.has('sources')) { + this.#observeSources(); + } + } + + override disconnectedCallback() { super.disconnectedCallback(); this.unobserveSources(); } - override update(changedProperties: PropertyValues) { - super.update(changedProperties); + // we might not need to react to the first slot change + #onSlotchange = () => this.#observeSources(); - if (changedProperties.has('sources')) { - this.observeSources(); - } - } - - observeSources() { + #observeSources() { const childElements = new Set(this.children); const elements = this.sources ? document.querySelectorAll(this.sources) : []; const sourceElements = new Set(elements).union(childElements); @@ -52,8 +61,14 @@ export class FolkBaseSet extends FolkElement { } this.sourceElements = sourceElements; + console.log(this.sourceElements); } + #sourcesCallback = (entry: ClientRectObserverEntry) => { + this.#sourcesMap.set(entry.target, entry.contentRect); + this.requestUpdate(); + }; + unobserveSources(elements: Set = this.sourceElements) { for (const el of elements) { folkObserver.unobserve(el, this.#sourcesCallback); diff --git a/src/folk-hull.ts b/src/folk-hull.ts index ea26c25..540d88d 100644 --- a/src/folk-hull.ts +++ b/src/folk-hull.ts @@ -34,7 +34,6 @@ export class FolkHull extends FolkBaseSet { return this.#hull; } - #slot = document.createElement('slot'); #hullEl = document.createElement('div'); override firstUpdated(changedProperties: PropertyValues): void { @@ -42,22 +41,20 @@ export class FolkHull extends FolkBaseSet { this.#hullEl.id = 'hull'; - this.renderRoot.append(this.#hullEl, this.#slot); - - this.#slot.addEventListener('slotchange', this.#onSlotchange); + this.renderRoot.prepend(this.#hullEl); } - // we might not need to react to the first slot change - #onSlotchange = () => this.observeSources(); - override update(changedProperties: PropertyValues) { super.update(changedProperties); if (this.sourcesMap.size !== this.sourceElements.size) { this.style.clipPath = ''; + this.style.display = 'none'; return; } + this.style.display = 'block'; + this.#hull = makeHull(this.sourceRects); this.#hullEl.style.clipPath = verticesToPolygon(this.#hull); }