jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix base-set

This commit is contained in:
“chrisshank” 2024-12-10 11:48:09 -08:00
parent fabc27200c
commit 18bcb91e8d
4 changed files with 67 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/visualizing-set-relations.html
View File

@ -39,10 +39,10 @@
<body> <body>
<h1>This is a Convex Hull</h1> <h1>This is a Convex Hull</h1>
<folk-hull sources="h1, body > folk-shape"></folk-hull>
<folk-shape x="50" y="100" width="50" height="50"></folk-shape> <folk-shape x="50" y="100" width="50" height="50"></folk-shape>
<folk-shape x="200" y="200" width="50" height="50"></folk-shape> <folk-shape x="200" y="200" width="50" height="50"></folk-shape>
<folk-shape x="100" y="300" width="50" height="50"></folk-shape> <folk-shape x="100" y="300" width="50" height="50"></folk-shape>
<folk-hull sources="h1, body > folk-shape"></folk-hull>
<folk-hull sources="h1"> <folk-hull sources="h1">
<folk-shape x="350" y="100" width="50" height="50"></folk-shape> <folk-shape x="350" y="100" width="50" height="50"></folk-shape>

76
src/folk-base-connection.ts
View File

@ -22,19 +22,47 @@ export class FolkBaseConnection extends FolkElement {
override disconnectedCallback() { override disconnectedCallback() {
super.disconnectedCallback(); super.disconnectedCallback();
this.unobserveSource(); this.#unobserveSource();
this.unobserveTarget(); this.#unobserveTarget();
} }
override willUpdate(changedProperties: PropertyValues<this>) { override willUpdate(changedProperties: PropertyValues<this>) {
super.willUpdate(changedProperties); super.willUpdate(changedProperties);
if (changedProperties.has('source')) { 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')) { 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; this.sourceRect = entry.contentRect;
}; };
observeSource() { #unobserveSource() {
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() {
if (this.sourceElement === null) return; if (this.sourceElement === null) return;
folkObserver.unobserve(this.sourceElement, this.#sourceCallback); folkObserver.unobserve(this.sourceElement, this.#sourceCallback);
@ -70,25 +80,7 @@ export class FolkBaseConnection extends FolkElement {
this.targetRect = entry.contentRect; this.targetRect = entry.contentRect;
}; };
observeTarget() { #unobserveTarget() {
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() {
if (this.targetElement === null) return; if (this.targetElement === null) return;
folkObserver.unobserve(this.targetElement, this.#targetCallback); folkObserver.unobserve(this.targetElement, this.#targetCallback);
} }

41
src/folk-base-set.ts
View File

@ -6,6 +6,7 @@ import { PropertyValues } from '@lit/reactive-element';
const folkObserver = new FolkObserver(); const folkObserver = new FolkObserver();
// TODO: use mutation observer to track the addition an removal of elements
export class FolkBaseSet extends FolkElement { export class FolkBaseSet extends FolkElement {
@property({ type: String, reflect: true }) sources = ''; @property({ type: String, reflect: true }) sources = '';
@ -20,25 +21,33 @@ export class FolkBaseSet extends FolkElement {
@state() sourceElements = new Set<Element>(); @state() sourceElements = new Set<Element>();
#sourcesCallback = (entry: ClientRectObserverEntry) => { #slot = document.createElement('slot');
this.#sourcesMap.set(entry.target, entry.contentRect);
this.requestUpdate();
};
disconnectedCallback() { override firstUpdated(changedProperties: PropertyValues<this>) {
super.firstUpdated(changedProperties);
this.renderRoot.append(this.#slot);
this.#slot.addEventListener('slotchange', this.#onSlotchange);
}
override willUpdate(changedProperties: PropertyValues<this>) {
super.willUpdate(changedProperties);
if (changedProperties.has('sources')) {
this.#observeSources();
}
}
override disconnectedCallback() {
super.disconnectedCallback(); super.disconnectedCallback();
this.unobserveSources(); this.unobserveSources();
} }
override update(changedProperties: PropertyValues<this>) { // we might not need to react to the first slot change
super.update(changedProperties); #onSlotchange = () => this.#observeSources();
if (changedProperties.has('sources')) { #observeSources() {
this.observeSources();
}
}
observeSources() {
const childElements = new Set(this.children); const childElements = new Set(this.children);
const elements = this.sources ? document.querySelectorAll(this.sources) : []; const elements = this.sources ? document.querySelectorAll(this.sources) : [];
const sourceElements = new Set(elements).union(childElements); const sourceElements = new Set(elements).union(childElements);
@ -52,8 +61,14 @@ export class FolkBaseSet extends FolkElement {
} }
this.sourceElements = sourceElements; this.sourceElements = sourceElements;
console.log(this.sourceElements);
} }
#sourcesCallback = (entry: ClientRectObserverEntry) => {
this.#sourcesMap.set(entry.target, entry.contentRect);
this.requestUpdate();
};
unobserveSources(elements: Set<Element> = this.sourceElements) { unobserveSources(elements: Set<Element> = this.sourceElements) {
for (const el of elements) { for (const el of elements) {
folkObserver.unobserve(el, this.#sourcesCallback); folkObserver.unobserve(el, this.#sourcesCallback);

11
src/folk-hull.ts
View File

@ -34,7 +34,6 @@ export class FolkHull extends FolkBaseSet {
return this.#hull; return this.#hull;
} }
#slot = document.createElement('slot');
#hullEl = document.createElement('div'); #hullEl = document.createElement('div');
override firstUpdated(changedProperties: PropertyValues<this>): void { override firstUpdated(changedProperties: PropertyValues<this>): void {
@ -42,22 +41,20 @@ export class FolkHull extends FolkBaseSet {
this.#hullEl.id = 'hull'; this.#hullEl.id = 'hull';
this.renderRoot.append(this.#hullEl, this.#slot); this.renderRoot.prepend(this.#hullEl);
this.#slot.addEventListener('slotchange', this.#onSlotchange);
} }
// we might not need to react to the first slot change
#onSlotchange = () => this.observeSources();
override update(changedProperties: PropertyValues<this>) { override update(changedProperties: PropertyValues<this>) {
super.update(changedProperties); super.update(changedProperties);
if (this.sourcesMap.size !== this.sourceElements.size) { if (this.sourcesMap.size !== this.sourceElements.size) {
this.style.clipPath = ''; this.style.clipPath = '';
this.style.display = 'none';
return; return;
} }
this.style.display = 'block';
this.#hull = makeHull(this.sourceRects); this.#hull = makeHull(this.sourceRects);
this.#hullEl.style.clipPath = verticesToPolygon(this.#hull); this.#hullEl.style.clipPath = verticesToPolygon(this.#hull);
} }