Fix pointer offset from viewport position

Author: Keavon

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);
 	});

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;

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];