let children be in a folk-set

This commit is contained in:
“chrisshank” 2024-12-08 16:45:39 -08:00
parent e0c4f7a67c
commit c3e161d2c8
2 changed files with 17 additions and 4 deletions

View File

@ -25,6 +25,10 @@
inset: 0 0 0 0;
pointer-events: none;
background-color: #b4d8f669;
* {
pointer-events: all;
}
}
h1 {
@ -35,11 +39,18 @@
</head>
<body>
<h1>This is a Convex Hull</h1>
<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="100" y="300" width="50" height="50"></folk-shape>
<folk-hull sources="h1, folk-shape"></folk-hull>
<folk-hull sources="h1, body > folk-shape"></folk-hull>
<folk-hull>
<folk-shape x="350" y="100" width="50" height="50"></folk-shape>
<folk-shape x="500" y="200" width="50" height="50"></folk-shape>
<folk-shape x="400" y="300" width="50" height="50"></folk-shape>
</folk-hull>
<script type="module">
import '../src/standalone/folk-shape.ts';

View File

@ -13,7 +13,7 @@ export class FolkBaseSet extends HTMLElement {
customElements.define(this.tagName, this);
}
#sources = '';
#sources = this.getAttribute('sources') || '';
/** A CSS selector for the sources of the arrow. */
get sources() {
return this.#sources;
@ -39,7 +39,7 @@ export class FolkBaseSet extends HTMLElement {
};
connectedCallback() {
this.sources = this.getAttribute('sources') || this.#sources;
this.observeSources();
}
disconnectedCallback() {
@ -47,7 +47,9 @@ export class FolkBaseSet extends HTMLElement {
}
observeSources() {
const sourceElements = new Set(document.querySelectorAll(this.sources));
const elements = this.sources ? document.querySelectorAll(this.sources) : [];
const childElements = new Set(this.querySelectorAll('*'));
const sourceElements = new Set(elements).union(childElements);
const currentElements = new Set(this.#sourcesMap.keys());