Merge pull request #16826 from calixteman/editor_remove_empty_stamp

[Editor] Remove the stamp editor displayed when the image was loading (bug 1848313)

src/display/editor/stamp.js

@@ -68,22 +68,34 @@ class StampEditor extends AnnotationEditor {
     );
   }
 
+  #getBitmapDone() {
+    this._uiManager.enableWaiting(false);
+    if (this.#canvas) {
+      this.div.focus();
+    }
+  }
+
   #getBitmap() {
     if (this.#bitmapId) {
-      this._uiManager.imageManager.getFromId(this.#bitmapId).then(data => {
-        if (!data) {
-          this.remove();
-          return;
-        }
-        this.#bitmap = data.bitmap;
-        this.#createCanvas();
-      });
+      this._uiManager.enableWaiting(true);
+      this._uiManager.imageManager
+        .getFromId(this.#bitmapId)
+        .then(data => {
+          if (!data) {
+            this.remove();
+            return;
+          }
+          this.#bitmap = data.bitmap;
+          this.#createCanvas();
+        })
+        .finally(() => this.#getBitmapDone());
       return;
     }
 
     if (this.#bitmapUrl) {
       const url = this.#bitmapUrl;
       this.#bitmapUrl = null;
+      this._uiManager.enableWaiting(true);
       this.#bitmapPromise = this._uiManager.imageManager
         .getFromUrl(url)
         .then(data => {
@@ -98,7 +110,8 @@ class StampEditor extends AnnotationEditor {
             isSvg: this.#isSvg,
           } = data);
           this.#createCanvas();
-        });
+        })
+        .finally(() => this.#getBitmapDone());
       return;
     }
 
@@ -116,6 +129,7 @@ class StampEditor extends AnnotationEditor {
         if (!input.files || input.files.length === 0) {
           this.remove();
         } else {
+          this._uiManager.enableWaiting(true);
           const data = await this._uiManager.imageManager.getFromFile(
             input.files[0]
           );
@@ -140,7 +154,7 @@ class StampEditor extends AnnotationEditor {
         this.remove();
         resolve();
       });
-    });
+    }).finally(() => this.#getBitmapDone());
     if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("TESTING")) {
       input.click();
     }
@@ -218,11 +232,11 @@ class StampEditor extends AnnotationEditor {
     }
 
     super.render();
+    this.div.hidden = true;
 
     if (this.#bitmap) {
       this.#createCanvas();
     } else {
-      this.div.classList.add("loading");
       this.#getBitmap();
     }
 
@@ -267,11 +281,12 @@ class StampEditor extends AnnotationEditor {
       (height * parentHeight) / pageHeight
     );
 
+    this._uiManager.enableWaiting(false);
     const canvas = (this.#canvas = document.createElement("canvas"));
     div.append(canvas);
+    div.hidden = false;
     this.#drawBitmap(width, height);
     this.#createObserver();
-    div.classList.remove("loading");
     if (!this.#hasBeenAddedInUndoStack) {
       this.parent.addUndoableEditor(this);
       this.#hasBeenAddedInUndoStack = true;

src/display/editor/tools.js

@@ -547,6 +547,8 @@ class AnnotationEditorUIManager {
 
   #isEnabled = false;
 
+  #isWaiting = false;
+
   #lastActiveElement = null;
 
   #mode = AnnotationEditorType.NONE;
@@ -1159,6 +1161,21 @@ class AnnotationEditorUIManager {
     }
   }
 
+  enableWaiting(mustWait = false) {
+    if (this.#isWaiting === mustWait) {
+      return;
+    }
+    this.#isWaiting = mustWait;
+    for (const layer of this.#allLayers.values()) {
+      if (mustWait) {
+        layer.disableClick();
+      } else {
+        layer.enableClick();
+      }
+      layer.div.classList.toggle("waiting", mustWait);
+    }
+  }
+
   /**
    * Enable all the layers.
    */

test/integration/stamp_editor_spec.js

@@ -15,9 +15,7 @@
 
 const {
   closePages,
-  dragAndDropAnnotation,
   getEditorDimensions,
-  getEditorSelector,
   loadAndWait,
   serializeBitmapDimensions,
   waitForAnnotationEditorLayer,
@@ -114,68 +112,6 @@ describe("Stamp Editor", () => {
     });
   });
 
-  describe("Page overflow", () => {
-    let pages;
-
-    beforeAll(async () => {
-      pages = await loadAndWait("empty.pdf", ".annotationEditorLayer", 50);
-    });
-
-    afterAll(async () => {
-      await closePages(pages);
-    });
-
-    it("must check that an added image stay within the page", async () => {
-      await Promise.all(
-        pages.map(async ([browserName, page]) => {
-          if (browserName === "firefox") {
-            // Disabled in Firefox, because of https://bugzilla.mozilla.org/1553847.
-            return;
-          }
-
-          await page.click("#editorStamp");
-          await page.click("#editorStampAddImage");
-
-          const rect = await page.$eval(".annotationEditorLayer", el => {
-            // With Chrome something is wrong when serializing a DomRect,
-            // hence we extract the values and just return them.
-            const { right, bottom } = el.getBoundingClientRect();
-            return { x: right, y: bottom };
-          });
-
-          const editorRect = await page.$eval(getEditorSelector(0), el => {
-            // With Chrome something is wrong when serializing a DomRect,
-            // hence we extract the values and just return them.
-            const { x, y } = el.getBoundingClientRect();
-            return { x, y };
-          });
-
-          const input = await page.$("#stampEditorFileInput");
-          await input.uploadFile(
-            `${path.join(__dirname, "../images/firefox_logo.png")}`
-          );
-
-          await page.waitForTimeout(300);
-
-          await dragAndDropAnnotation(
-            page,
-            editorRect.x + 10,
-            editorRect.y + 10,
-            rect.x - 10,
-            rect.y - 10
-          );
-          await page.waitForTimeout(10);
-
-          const { left } = await getEditorDimensions(page, 0);
-
-          // The image is bigger than the page, so it has been scaled down to
-          // 75% of the page width.
-          expect(left).toEqual("25%");
-        })
-      );
-    });
-  });
-
   describe("Resize", () => {
     let pages;
 

web/annotation_editor_layer_builder.css

@@ -72,6 +72,15 @@
   z-index: 4;
 }
 
+.annotationEditorLayer.waiting {
+  content: "";
+  cursor: wait;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
 .annotationEditorLayer.freeTextEditing {
   cursor: var(--editorFreeText-editing-cursor);
 }
@@ -168,19 +177,6 @@
   height: auto;
 }
 
-.annotationEditorLayer .stampEditor.loading {
-  aspect-ratio: 1;
-  width: 10%;
-  height: auto;
-  background-color: rgba(128, 128, 128, 0.5);
-  background-image: var(--loading-icon);
-  background-repeat: no-repeat;
-  background-position: 50%;
-  background-size: 16px 16px;
-  transition-property: background-size;
-  transition-delay: var(--loading-icon-delay);
-}
-
 .annotationEditorLayer .stampEditor canvas {
   width: 100%;
   height: 100%;