add client rect observer to iframe script

This commit is contained in:
“chrisshank” 2024-11-26 13:18:36 -08:00
parent d154c79265
commit f4e579e1d9
1 changed files with 11 additions and 2 deletions

View File

@ -1,6 +1,8 @@
import { FolkGeometry } from '../canvas/fc-geometry'; import { FolkGeometry } from '../canvas/fc-geometry';
import { ClientRectObserverManager, ClientRectObserverEntry } from '../client-rect-observer.ts'; import { ClientRectObserverManager, ClientRectObserverEntry } from '../client-rect-observer.ts';
const clientRectObserver = new ClientRectObserverManager();
interface ObservedElementEntry { interface ObservedElementEntry {
selector: string; selector: string;
element: Element; element: Element;
@ -51,7 +53,13 @@ if (window.parent !== window) {
const observedElements = new Map(); const observedElements = new Map();
const observedSelectors = 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) { function onGeometryChange(event) {
window.parent.postMessage({ window.parent.postMessage({
@ -82,7 +90,7 @@ if (window.parent !== window) {
boundingBox: element.getClientRect(), boundingBox: element.getClientRect(),
}); });
} else { } else {
// use BoundingBoxObserver clientRectObserver.observe(element, boundingBoxCallback);
} }
return; return;
} }
@ -98,6 +106,7 @@ if (window.parent !== window) {
observedElements.delete(selector); observedElements.delete(selector);
observedSelectors.delete(element); observedSelectors.delete(element);
} else { } else {
clientRectObserver.unobserve(element, boundingBoxCallback);
} }
return; return;