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);
}