fix event propagators

demo/spreadsheet-map-propagator.html

@@ -144,14 +144,14 @@
       source="#map1"
       target="folk-cell[column='A'][row='1']"
       triggers="recenter"
-      expression="expression: round(from.coordinates.lat, 3)"
+      expression="expression: from.coordinates.lat"
     ></folk-event-propagator>
 
     <folk-event-propagator
       source="#map1"
       target="folk-cell[column='A'][row='2']"
       triggers="recenter"
-      expression="expression: round(from.coordinates.lng, 3)"
+      expression="expression: from.coordinates.lng"
     ></folk-event-propagator>
 
     <folk-event-propagator
@@ -166,11 +166,6 @@
       import '../src/standalone/folk-shape.ts';
       import '../src/standalone/folk-event-propagator.ts';
       import '../src/standalone/folk-spreadsheet.ts';
-
-      window.round = (number, digits = 0) => {
-        const base = Number('1'.padEnd(digits + 1, '0'));
-        return Math.round(number * base) / base;
-      };
     </script>
   </body>
 </html>

src/folk-base-connection.ts

@@ -12,6 +12,10 @@ export class FolkBaseConnection extends FolkElement {
 
   #sourceElement: Element | null = null;
 
+  get sourceElement() {
+    return this.#sourceElement;
+  }
+
   @state() sourceRect: DOMRectReadOnly | null = null;
 
   @property({ type: String, reflect: true }) target = '';
@@ -20,6 +24,10 @@ export class FolkBaseConnection extends FolkElement {
 
   #targetElement: Element | null = null;
 
+  get targetElement() {
+    return this.#targetElement;
+  }
+
   override disconnectedCallback() {
     super.disconnectedCallback();
     this.unobserveSource();

src/folk-event-propagator.ts

@@ -1,9 +1,11 @@
-import { css } from './common/tags.ts';
+import { css, PropertyValues } from '@lit/reactive-element';
 import { FolkRope } from './folk-rope.ts';
 // import * as parser from '@babel/parser';
-import type { Node } from '@babel/types';
 
-const styles = css`
+export class FolkEventPropagator extends FolkRope {
+  static override tagName = 'folk-event-propagator';
+
+  static styles = css`
     :host {
       display: block;
       position: absolute;
@@ -26,10 +28,7 @@ const styles = css`
       translate: -50% -50%;
       border-radius: 5px;
     }
-`;
+  `;
-
-export class FolkEventPropagator extends FolkRope {
-  static override tagName = 'folk-event-propagator';
 
   #triggers: string[] = [];
   get triggers() {
@@ -114,23 +113,22 @@ to.${key} = ${value};`);
   #triggerTextarea = document.createElement('textarea');
   #expressionTextarea = document.createElement('textarea');
 
-  constructor() {
+  override firstUpdated(changedProperties: PropertyValues<this>): void {
-    super();
+    super.firstUpdated(changedProperties);
-
-    this.shadowRoot?.adoptedStyleSheets.push(styles);
 
     this.#triggerTextarea.addEventListener('change', () => {
       this.triggers = this.#triggerTextarea.value;
     });
+
     this.triggers = this.#triggerTextarea.value = this.getAttribute('triggers') || '';
 
-    this.shadowRoot?.appendChild(this.#triggerTextarea);
+    this.renderRoot.appendChild(this.#triggerTextarea);
 
     this.#expressionTextarea.addEventListener('input', () => {
       this.expression = this.#expressionTextarea.value;
     });
 
-    this.shadowRoot?.appendChild(this.#expressionTextarea);
+    this.renderRoot.appendChild(this.#expressionTextarea);
 
     this.expression = this.#expressionTextarea.value = this.getAttribute('expression') || '';
   }

src/folk-rope.ts

@@ -33,7 +33,6 @@ export class FolkRope extends FolkBaseConnection {
   #svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   #path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
   #path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-  #shadow = this.attachShadow({ mode: 'open' });
 
   #rAFId = -1;
   #lastTime = 0;
@@ -62,15 +61,8 @@ export class FolkRope extends FolkBaseConnection {
     this.#path2.setAttribute('stroke', this.#stroke);
   }
 
-  constructor() {
+  override firstUpdated(changedProperties: PropertyValues<this>): void {
-    super();
+    super.firstUpdated(changedProperties);
-    this.#svg.style.height = '100%';
-    this.#svg.style.width = '100%';
-    this.#svg.style.pointerEvents = 'none';
-    this.#svg.appendChild(this.#path);
-    this.#svg.appendChild(this.#path2);
-
-    this.#shadow.appendChild(this.#svg);
 
     this.#path.setAttribute('stroke-width', '3');
     this.#path.setAttribute('stroke-linecap', 'round');
@@ -83,6 +75,14 @@ export class FolkRope extends FolkBaseConnection {
     this.#path2.setAttribute('fill', 'none');
     this.#path2.style.pointerEvents = 'auto';
 
+    this.#svg.style.height = '100%';
+    this.#svg.style.width = '100%';
+    this.#svg.style.pointerEvents = 'none';
+    this.#svg.appendChild(this.#path);
+    this.#svg.appendChild(this.#path2);
+
+    this.renderRoot.appendChild(this.#svg);
+
     this.stroke = this.getAttribute('stroke') || 'black';
   }