diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte index 8ebeee17..89e29ae0 100644 --- a/frontend/src/components/panels/Document.svelte +++ b/frontend/src/components/panels/Document.svelte @@ -471,7 +471,7 @@ rulerVertical?.resize(); // Send the new bounds of the viewports to the backend - if (viewport.parentElement) updateBoundsOfViewports(editor, viewport.parentElement); + if (viewport.parentElement) updateBoundsOfViewports(editor); }); if (viewport) viewportResizeObserver.observe(viewport); }); diff --git a/frontend/src/io-managers/input.ts b/frontend/src/io-managers/input.ts index 5f7bd66d..711e0398 100644 --- a/frontend/src/io-managers/input.ts +++ b/frontend/src/io-managers/input.ts @@ -43,7 +43,7 @@ export function createInputManager(editor: Editor, dialog: DialogState, portfoli // eslint-disable-next-line @typescript-eslint/no-explicit-any const listeners: { target: EventListenerTarget; eventName: EventName; action: (event: any) => void; options?: AddEventListenerOptions }[] = [ - { target: window, eventName: "resize", action: () => updateBoundsOfViewports(editor, window.document.body) }, + { target: window, eventName: "resize", action: () => updateBoundsOfViewports(editor) }, { target: window, eventName: "beforeunload", action: (e: BeforeUnloadEvent) => onBeforeUnload(e) }, { target: window, eventName: "keyup", action: (e: KeyboardEvent) => onKeyUp(e) }, { target: window, eventName: "keydown", action: (e: KeyboardEvent) => onKeyDown(e) }, @@ -522,7 +522,7 @@ export function createInputManager(editor: Editor, dialog: DialogState, portfoli // Bind the event listeners bindListeners(); // Resize on creation - updateBoundsOfViewports(editor, window.document.body); + updateBoundsOfViewports(editor); // Return the destructor return unbindListeners; diff --git a/frontend/src/utility-functions/viewports.ts b/frontend/src/utility-functions/viewports.ts index 26536808..134ece0b 100644 --- a/frontend/src/utility-functions/viewports.ts +++ b/frontend/src/utility-functions/viewports.ts @@ -1,7 +1,7 @@ import { type Editor } from "@graphite/editor"; -export function updateBoundsOfViewports(editor: Editor, container: HTMLElement) { - const viewports = Array.from(container.querySelectorAll("[data-viewport-container]")); +export function updateBoundsOfViewports(editor: Editor) { + const viewports = Array.from(window.document.querySelectorAll("[data-viewport-container]")); const boundsOfViewports = viewports.map((canvas) => { const bounds = canvas.getBoundingClientRect(); return [bounds.left, bounds.top, bounds.right, bounds.bottom];