fix: use the background rect to calculate cursor position in the page (…

…#1427)
Myriad-Dreamin · Feb 27, 2025 · 5153003 · 5153003
1 parent 5102017
commit 5153003
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/tools/typst-dom/src/typst-debug-info.mts b/tools/typst-dom/src/typst-debug-info.mts
@@ -106,6 +106,21 @@ export function resolveSourceLeaf(
 }
 
 export function installEditorJumpToHandler(docRoot: HTMLElement) {
+  const getNthBackgroundRect = (elem: Element, pageNumber: string) => {
+    let curElem: Element | null = elem;
+    while (curElem) {
+      if (
+        curElem.classList.contains("typst-page-inner") &&
+        curElem.getAttribute("data-page-number") === pageNumber
+      ) {
+        return curElem;
+      }
+      curElem = curElem.previousElementSibling;
+    }
+
+    return elem;
+  };
+
   const resolveFrameLoc = async (event: MouseEvent, elem: Element) => {
     const x = event.clientX;
     const y = event.clientY;
@@ -128,15 +143,19 @@ export function installEditorJumpToHandler(docRoot: HTMLElement) {
     }
 
     const pageElem = mayPageElem[1];
-    console.log(mayPageElem, pageElem);
+    const pageNumber = pageElem.getAttribute("data-page-number")!;
+    const backgroundRect = getNthBackgroundRect(pageElem, pageNumber);
+    if (!backgroundRect) {
+      return undefined;
+    }
+    console.log(mayPageElem, pageElem, backgroundRect);
 
-    const pageRect = pageElem.getBoundingClientRect();
+    const pageRect = backgroundRect.getBoundingClientRect();
     const pageX = x - pageRect.left;
     const pageY = y - pageRect.top;
 
     const xPercent = pageX / pageRect.width;
     const yPercent = pageY / pageRect.height;
-    const pageNumber = pageElem.getAttribute("data-page-number")!;
     const dataWidthS = pageElem.getAttribute("data-page-width")!;
     const dataHeightS = pageElem.getAttribute("data-page-height")!;
 

diff --git a/tools/typst-dom/src/typst-doc.svg.mts b/tools/typst-dom/src/typst-doc.svg.mts
@@ -438,6 +438,7 @@ export function provideSvgDoc<
         /// Create inner rectangle
         const innerRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
         innerRect.setAttribute("class", "typst-page-inner");
+        innerRect.setAttribute("data-page-number", `${nextPage.index}`);
         innerRect.setAttribute("data-page-width", pageWidth.toString());
         innerRect.setAttribute("data-page-height", pageHeight.toString());
         innerRect.setAttribute("width", Math.floor(pageWidth * INNER_RECT_UNIT).toString());