diff --git a/src/common/iframe-script.ts b/src/common/iframe-script.ts index fa8f094..1e48e7e 100644 --- a/src/common/iframe-script.ts +++ b/src/common/iframe-script.ts @@ -65,7 +65,7 @@ if (window.parent !== window) { window.parent.postMessage({ type: 'folk-element-change', selector: observedSelectors.get(event.target), - boundingBox: event.target?.getClientRect(), + boundingBox: event.target?.getTransformDOMRect(), }); } @@ -86,7 +86,7 @@ if (window.parent !== window) { window.parent.postMessage({ type: 'folk-element-change', selector: selector, - boundingBox: element.getClientRect(), + boundingBox: element.getTransformDOMRect(), }); } else { clientRectObserver.observe(element, boundingBoxCallback); diff --git a/src/folk-base-connection.ts b/src/folk-base-connection.ts index e4dbc48..c741672 100644 --- a/src/folk-base-connection.ts +++ b/src/folk-base-connection.ts @@ -46,7 +46,7 @@ export class FolkBaseConnection extends HTMLElement { #sourceHandler = (e: Event) => { const geometry = e.target as FolkShape; - this.#sourceRect = geometry.getClientRect(); + this.#sourceRect = geometry.getTransformDOMRect(); this.#update(); }; @@ -120,7 +120,7 @@ export class FolkBaseConnection extends HTMLElement { #targetHandler = (e: Event) => { const geometry = e.target as FolkShape; - this.#targetRect = geometry.getClientRect(); + this.#targetRect = geometry.getTransformDOMRect(); this.#update(); }; @@ -195,7 +195,7 @@ export class FolkBaseConnection extends HTMLElement { } else if (this.#sourceElement instanceof FolkShape) { this.#sourceElement.addEventListener('transform', this.#sourceHandler); - this.#sourceRect = this.#sourceElement.getClientRect(); + this.#sourceRect = this.#sourceElement.getTransformDOMRect(); this.#update(); } else if (this.#sourceElement instanceof HTMLIFrameElement && this.#sourceIframeSelector) { @@ -248,7 +248,7 @@ export class FolkBaseConnection extends HTMLElement { throw new Error('target is not a valid element'); } else if (this.#targetElement instanceof FolkShape) { this.#targetElement.addEventListener('transform', this.#targetHandler); - this.#targetRect = this.#targetElement.getClientRect(); + this.#targetRect = this.#targetElement.getTransformDOMRect(); this.#update(); } else if (this.#targetElement instanceof HTMLIFrameElement && this.#targetIframeSelector) { window.addEventListener('message', this.#targetPostMessage); diff --git a/src/folk-xanadu.ts b/src/folk-xanadu.ts index 8e915bd..845e24b 100644 --- a/src/folk-xanadu.ts +++ b/src/folk-xanadu.ts @@ -17,7 +17,7 @@ export class FolkXanadu extends FolkBaseConnection { targetRect = temp; } - // TODO: add getClientRects to iframe protocol. + // TODO: add getTransformDOMRects to iframe protocol. let sourceVertices = computeInlineVertices(Array.from([sourceRect])); const targetVertices = computeInlineVertices(Array.from([targetRect]));