From 50c07fcf81d75169a3d9112ad3587b58f88567d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Tue, 10 Dec 2024 15:05:05 -0800
Subject: [PATCH] base set styles

---
 demo/[shaders]distance-field.html   |  5 -----
 demo/[tests] distance-field.html    |  6 +-----
 demo/propagator-toolbar.html        |  6 ------
 demo/visualizing-set-relations.html |  8 +-------
 src/folk-base-connection.ts         |  1 +
 src/folk-base-set.ts                | 15 ++++++++++++++-
 src/folk-distance-field.ts          | 21 +++++++--------------
 src/folk-hull.ts                    | 25 ++++++++++---------------
 8 files changed, 34 insertions(+), 53 deletions(-)
diff --git a/demo/[shaders]distance-field.html b/demo/[shaders]distance-field.html
index a394ee5..d54d958 100644
--- a/demo/[shaders]distance-field.html
+++ b/demo/[shaders]distance-field.html
@@ -24,11 +24,6 @@
         border: 2px solid rgba(0, 0, 0, 0.5);
       }
 
-      folk-distance-field {
-        position: absolute;
-        inset: 0;
-      }
-
       h1,
       p {
         width: fit-content;
diff --git a/demo/[tests] distance-field.html b/demo/[tests] distance-field.html
index 41fda8a..0adf34e 100644
--- a/demo/[tests] distance-field.html	
+++ b/demo/[tests] distance-field.html	
@@ -18,15 +18,11 @@
       folk-shape {
         border: 2px solid black;
       }
-
-      folk-distance-field {
-        position: absolute;
-        inset: 0;
-      }
     </style>
   </head>
   <body>
     <script type="module">
+      import '../src/standalone/folk-shape.ts';
       import '../src/standalone/folk-distance-field.ts';
 
       const d = document.createElement('folk-distance-field');
diff --git a/demo/propagator-toolbar.html b/demo/propagator-toolbar.html
index 83c2557..41e7da0 100644
--- a/demo/propagator-toolbar.html
+++ b/demo/propagator-toolbar.html
@@ -18,16 +18,10 @@
 
       folk-shape {
         background: transparent;
-        position: absolute;
         background-color: rgba(255, 255, 255, 0.1);
         border-radius: 2px;
         border: 2px solid rgba(0, 0, 0, 0.5);
       }
-
-      folk-distance-field {
-        position: absolute;
-        inset: 0;
-      }
     </style>
   </head>
   <body>
diff --git a/demo/visualizing-set-relations.html b/demo/visualizing-set-relations.html
index 8676875..99e5683 100644
--- a/demo/visualizing-set-relations.html
+++ b/demo/visualizing-set-relations.html
@@ -24,12 +24,6 @@
         }
       }
 
-      folk-hull {
-        display: block;
-        position: absolute;
-        inset: 0 0 0 0;
-      }
-
       h1 {
         margin: 0;
         width: fit-content;
@@ -39,9 +33,9 @@
   <body>
     <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="200" y="200" width="50" height="50"></folk-shape>
+    <folk-hull sources="h1, body > folk-shape"></folk-hull>
     <folk-shape x="100" y="300" width="50" height="50"></folk-shape>
 
     <folk-hull sources="h1">
diff --git a/src/folk-base-connection.ts b/src/folk-base-connection.ts
index f360c52..6565bc3 100644
--- a/src/folk-base-connection.ts
+++ b/src/folk-base-connection.ts
@@ -16,6 +16,7 @@ export class FolkBaseConnection extends FolkElement {
       pointer-events: none;
     }
   `;
+
   @property({ type: String, reflect: true }) source = '';
 
   @state() sourceElement: Element | null = null;
diff --git a/src/folk-base-set.ts b/src/folk-base-set.ts
index 635f16b..d1a9d1e 100644
--- a/src/folk-base-set.ts
+++ b/src/folk-base-set.ts
@@ -2,12 +2,25 @@ import { property, state } from '@lit/reactive-element/decorators.js';
 import { ClientRectObserverEntry } from './common/client-rect-observer.ts';
 import { FolkElement } from './common/folk-element.ts';
 import { FolkObserver } from './common/folk-observer.ts';
-import { PropertyValues } from '@lit/reactive-element';
+import { css, CSSResultGroup, 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 {
+  static styles: CSSResultGroup = css`
+    :host {
+      display: block;
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+    }
+
+    ::slotted(*) {
+      pointer-events: auto;
+    }
+  `;
+
   @property({ type: String, reflect: true }) sources = '';
 
   #sourcesMap = new Map<Element, DOMRectReadOnly>();
diff --git a/src/folk-distance-field.ts b/src/folk-distance-field.ts
index dfd6ae4..0e1fbaf 100644
--- a/src/folk-distance-field.ts
+++ b/src/folk-distance-field.ts
@@ -3,7 +3,6 @@ import { Point } from './common/types.ts';
 import { glsl } from './common/tags.ts';
 import { WebGLUtils } from './common/webgl.ts';
 import { FolkBaseSet } from './folk-base-set.ts';
-import { FolkShape } from './folk-shape.ts';
 import { PropertyValues } from '@lit/reactive-element';
 
 /**
@@ -14,13 +13,6 @@ import { PropertyValues } from '@lit/reactive-element';
 export class FolkDistanceField extends FolkBaseSet {
   static tagName = 'folk-distance-field';
 
-  static override define() {
-    FolkShape.define();
-    super.define();
-  }
-
-  #shadow = this.attachShadow({ mode: 'open' });
-
   private textures: WebGLTexture[] = [];
 
   private canvas!: HTMLCanvasElement;
@@ -39,26 +31,27 @@ export class FolkDistanceField extends FolkBaseSet {
 
   private isPingTexture: boolean = true;
 
-  constructor() {
-    super();
+  firstUpdated(changedProperties: PropertyValues<this>): void {
+    super.firstUpdated(changedProperties);
 
-    this.#shadow.appendChild(document.createElement('slot'));
+    this.renderRoot.appendChild(document.createElement('slot'));
   }
 
   connectedCallback() {
+    super.connectedCallback();
+
     this.initWebGL();
     this.initShaders();
     this.initPingPongTextures();
 
     window.addEventListener('resize', this.handleResize);
-
-    super.connectedCallback();
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
 
     window.removeEventListener('resize', this.handleResize);
+
     this.cleanupWebGLResources();
   }
 
@@ -70,7 +63,7 @@ export class FolkDistanceField extends FolkBaseSet {
     }
 
     this.canvas = canvas;
-    this.#shadow.prepend(canvas);
+    this.renderRoot.prepend(canvas);
     this.glContext = gl;
   }
 
diff --git a/src/folk-hull.ts b/src/folk-hull.ts
index e9fbb52..006b8f9 100644
--- a/src/folk-hull.ts
+++ b/src/folk-hull.ts
@@ -12,21 +12,16 @@ declare global {
 export class FolkHull extends FolkBaseSet {
   static tagName = 'folk-hull';
 
-  static styles = css`
-    :host {
-      pointer-events: none;
-    }
-
-    #hull {
-      background-color: var(--folk-hull-bg, #b4d8f644);
-      height: 100%;
-      width: 100%;
-    }
-
-    ::slotted(*) {
-      pointer-events: auto;
-    }
-  `;
+  static styles = [
+    FolkBaseSet.styles,
+    css`
+      #hull {
+        background-color: var(--folk-hull-bg, #b4d8f644);
+        height: 100%;
+        width: 100%;
+      }
+    `,
+  ];
 
   #hull: Point[] = [];
 
