rope

src/arrows/event-propagator.ts

@@ -93,7 +93,7 @@ export class EventPropagator extends FolkRope {
       this.#triggerTextarea.style.top = `${triggerPoint.pos.y}px`;
     }
 
-    const expressionPoint = this.points[Math.floor((this.points.length * 3) / 5)];
+    const expressionPoint = this.points[Math.floor(this.points.length / 2)];
 
     if (expressionPoint) {
       this.#expressionTextarea.style.left = `${expressionPoint.pos.x}px`;

src/arrows/fc-rope.ts

@@ -197,7 +197,7 @@ export class FolkRope extends AbstractArrow {
       });
     }
 
-    //Link nodes into a doubly linked list
+    // Link nodes into a doubly linked list
     for (let i = 0; i < pointsLen; i++) {
       const prev = i != 0 ? points[i - 1] : null;
       const curr = points[i];

src/arrows/iframe-script.ts

@@ -1,11 +1,58 @@
 import { FolkGeometry } from '../canvas/fc-geometry';
+import { VisualObserverManager, VisualObserverEntry } from './visual-observer.ts';
+
+interface ObservedElementEntry {
+  selector: string;
+  element: Element;
+  count: number;
+}
+
+class ObservedElements {
+  #elements: ObservedElementEntry[] = [];
+
+  observe(selector: string) {
+    let entry = this.#elements.find((e) => e.selector === selector);
+
+    if (entry === undefined) {
+      entry = { selector, element: document.querySelector(selector)!, count: 0 };
+      this.#elements.push(entry);
+    }
+
+    entry.count += 1;
+
+    return entry.element;
+  }
+
+  unobserve(selector: string) {
+    const entryIndex = this.#elements.findIndex((e) => e.selector === selector);
+    const entry = this.#elements[entryIndex];
+
+    if (entry === undefined) return;
+
+    entry.count -= 1;
+
+    if (entry.count === 0) {
+      this.#elements.splice(entryIndex, 1);
+    }
+  }
+
+  getElement(selector) {
+    return this.#elements.find((e) => e.selector === selector)?.element;
+  }
+
+  getSelector(element: Element) {
+    return this.#elements.find((e) => e.element === element)?.selector;
+  }
+}
 
 // If this page is framed in then mock inject the following post message script
 if (window.parent !== window) {
   // keep track of count of elements being observed
   const observedElements = new Map();
   const observedSelectors = new Map();
 
+  function boundingBoxCallback(entry: VisualObserverEntry) {}
+
   function onGeometryChange(event) {
     window.parent.postMessage({
       type: 'folk-element-change',