From c3e161d2c84a2a94eb37ed41d63f0d23ad8477c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Sun, 8 Dec 2024 16:45:39 -0800
Subject: [PATCH] let children be in a folk-set

---
 demo/visualizing-set-relations.html | 13 ++++++++++++-
 src/folk-base-set.ts                |  8 +++++---
 2 files changed, 17 insertions(+), 4 deletions(-)
diff --git a/demo/visualizing-set-relations.html b/demo/visualizing-set-relations.html
index 0fb613b..199c269 100644
--- a/demo/visualizing-set-relations.html
+++ b/demo/visualizing-set-relations.html
@@ -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';
diff --git a/src/folk-base-set.ts b/src/folk-base-set.ts
index 186f19d..7975040 100644
--- a/src/folk-base-set.ts
+++ b/src/folk-base-set.ts
@@ -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());
 
