From f4e579e1d9974074d90cc1e50db760802619d08c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Tue, 26 Nov 2024 13:18:36 -0800
Subject: [PATCH] add client rect observer to iframe script

---
 src/arrows/iframe-script.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/arrows/iframe-script.ts b/src/arrows/iframe-script.ts
index 3f63dd9..c5ec4dc 100644
--- a/src/arrows/iframe-script.ts
+++ b/src/arrows/iframe-script.ts
@@ -1,6 +1,8 @@
 import { FolkGeometry } from '../canvas/fc-geometry';
 import { ClientRectObserverManager, ClientRectObserverEntry } from '../client-rect-observer.ts';
 
+const clientRectObserver = new ClientRectObserverManager();
+
 interface ObservedElementEntry {
   selector: string;
   element: Element;
@@ -51,7 +53,13 @@ if (window.parent !== window) {
   const observedElements = new Map();
   const observedSelectors = new Map();
 
-  function boundingBoxCallback(entry: ClientRectObserverEntry) {}
+  function boundingBoxCallback(entry: ClientRectObserverEntry) {
+    window.parent.postMessage({
+      type: 'folk-element-change',
+      selector: observedSelectors.get(entry.target),
+      boundingBox: entry.contentRect,
+    });
+  }
 
   function onGeometryChange(event) {
     window.parent.postMessage({
@@ -82,7 +90,7 @@ if (window.parent !== window) {
             boundingBox: element.getClientRect(),
           });
         } else {
-          // use BoundingBoxObserver
+          clientRectObserver.observe(element, boundingBoxCallback);
         }
         return;
       }
@@ -98,6 +106,7 @@ if (window.parent !== window) {
           observedElements.delete(selector);
           observedSelectors.delete(element);
         } else {
+          clientRectObserver.unobserve(element, boundingBoxCallback);
         }
 
         return;