Merge pull request #19174 from calixteman/ink_update_width

[Editor] Correctly update the current drawing when zooming

src/display/editor/annotation_editor_layer.js

@@ -804,7 +804,7 @@ class AnnotationEditorLayer {
       return;
     }
 
-    this.#uiManager.unselectAll();
+    this.#uiManager.setCurrentDrawingSession(this);
     this.#drawingAC = new AbortController();
     const signal = this.#uiManager.combinedSignal(this.#drawingAC);
     this.div.addEventListener(
@@ -816,17 +816,16 @@ class AnnotationEditorLayer {
       },
       { signal }
     );
-    this.#uiManager.disableUserSelect(true);
     this.#currentEditorType.startDrawing(this, this.#uiManager, false, event);
   }
 
   endDrawingSession(isAborted = false) {
     if (!this.#drawingAC) {
       return null;
     }
+    this.#uiManager.setCurrentDrawingSession(null);
     this.#drawingAC.abort();
     this.#drawingAC = null;
-    this.#uiManager.disableUserSelect(false);
     return this.#currentEditorType.endDrawing(isAborted);
   }
 

src/display/editor/tools.js

@@ -610,6 +610,8 @@ class AnnotationEditorUIManager {
 
   #copyPasteAC = null;
 
+  #currentDrawingSession = null;
+
   #currentPageIndex = 0;
 
   #deletedAnnotationsElementIds = new Set();
@@ -972,6 +974,20 @@ class AnnotationEditorUIManager {
     );
   }
 
+  /**
+   * Set the current drawing session.
+   * @param {AnnotationEditorLayer} layer
+   */
+  setCurrentDrawingSession(layer) {
+    if (layer) {
+      this.unselectAll();
+      this.disableUserSelect(true);
+    } else {
+      this.disableUserSelect(false);
+    }
+    this.#currentDrawingSession = layer;
+  }
+
   setMainHighlightColorPicker(colorPicker) {
     this.#mainHighlightColorPicker = colorPicker;
   }
@@ -1054,7 +1070,7 @@ class AnnotationEditorUIManager {
     for (const editor of this.#editorsToRescale) {
       editor.onScaleChanging();
     }
-    this.currentLayer?.onScaleChanging();
+    this.#currentDrawingSession?.onScaleChanging();
   }
 
   onRotationChanging({ pagesRotation }) {
@@ -1984,7 +2000,7 @@ class AnnotationEditorUIManager {
    * @param {AnnotationEditor} editor
    */
   setSelected(editor) {
-    this.currentLayer?.commitOrRemove();
+    this.#currentDrawingSession?.commitOrRemove();
     for (const ed of this.#selectedEditors) {
       if (ed !== editor) {
         ed.unselect();
@@ -2176,7 +2192,7 @@ class AnnotationEditorUIManager {
       }
     }
 
-    if (this.currentLayer?.commitOrRemove()) {
+    if (this.#currentDrawingSession?.commitOrRemove()) {
       return;
     }
 

test/integration/ink_editor_spec.mjs

@@ -960,4 +960,66 @@ describe("Ink Editor", () => {
       );
     });
   });
+
+  describe("Ink must update its stroke width when not the current active layer", () => {
+    let pages;
+
+    beforeAll(async () => {
+      pages = await loadAndWait("tracemonkey.pdf", ".annotationEditorLayer");
+    });
+
+    afterAll(async () => {
+      await closePages(pages);
+    });
+
+    it("must check that the stroke width has been updated after zooming", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await switchToInk(page);
+
+          const rect = await getRect(page, ".annotationEditorLayer");
+
+          const x = rect.x + 20;
+          const y = rect.y + 20;
+          const clickHandle = await waitForPointerUp(page);
+          await page.mouse.move(x, y);
+          await page.mouse.down();
+          await page.mouse.move(x + 50, y + 50);
+          await page.mouse.up();
+          await awaitPromise(clickHandle);
+
+          const svgSelector = ".canvasWrapper svg.draw";
+          const strokeWidth = await page.$eval(svgSelector, el =>
+            parseFloat(el.getAttribute("stroke-width"))
+          );
+
+          await scrollIntoView(page, `.page[data-page-number = "2"]`);
+
+          const rectPageTwo = await getRect(
+            page,
+            `.page[data-page-number = "2"] .annotationEditorLayer`
+          );
+          const originX = rectPageTwo.x + rectPageTwo.width / 2;
+          const originY = rectPageTwo.y + rectPageTwo.height / 2;
+          await page.evaluate(
+            origin => {
+              window.PDFViewerApplication.pdfViewer.increaseScale({
+                scaleFactor: 1.5,
+                origin,
+              });
+            },
+            [originX, originY]
+          );
+
+          const newStrokeWidth = await page.$eval(svgSelector, el =>
+            parseFloat(el.getAttribute("stroke-width"))
+          );
+
+          expect(newStrokeWidth)
+            .withContext(`In ${browserName}`)
+            .not.toEqual(strokeWidth);
+        })
+      );
+    });
+  });
 });