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,36 +1,35 @@
-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`
-  :host {
-    display: block;
-    position: absolute;
-    inset: 0 0 0 0;
-    pointer-events: none;
-  }
-
-  textarea {
-    position: absolute;
-    width: auto;
-    min-width: 3ch;
-    height: auto;
-    resize: none;
-    background: rgba(256, 256, 256, 0.8);
-    border: 1px solid #ccc;
-    padding: 4px;
-    pointer-events: auto;
-    overflow: hidden;
-    field-sizing: content;
-    translate: -50% -50%;
-    border-radius: 5px;
-  }
-`;
 
 export class FolkEventPropagator extends FolkRope {
   static override tagName = 'folk-event-propagator';
 
+  static styles = css`
+    :host {
+      display: block;
+      position: absolute;
+      inset: 0 0 0 0;
+      pointer-events: none;
+    }
+
+    textarea {
+      position: absolute;
+      width: auto;
+      min-width: 3ch;
+      height: auto;
+      resize: none;
+      background: rgba(256, 256, 256, 0.8);
+      border: 1px solid #ccc;
+      padding: 4px;
+      pointer-events: auto;
+      overflow: hidden;
+      field-sizing: content;
+      translate: -50% -50%;
+      border-radius: 5px;
+    }
+  `;
+
   #triggers: string[] = [];
   get triggers() {
     return this.#triggers;
@@ -114,23 +113,22 @@ to.${key} = ${value};`);
   #triggerTextarea = document.createElement('textarea');
   #expressionTextarea = document.createElement('textarea');
 
-  constructor() {
-    super();
-
-    this.shadowRoot?.adoptedStyleSheets.push(styles);
+  override firstUpdated(changedProperties: PropertyValues<this>): void {
+    super.firstUpdated(changedProperties);
 
     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() {
-    super();
-    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);
+  override firstUpdated(changedProperties: PropertyValues<this>): void {
+    super.firstUpdated(changedProperties);
 
     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';
   }