From d527fb3ff2a76fefe3a26580967f5fc72498efac Mon Sep 17 00:00:00 2001 From: Calixte Denizet Date: Fri, 11 Aug 2023 14:15:15 +0200 Subject: [PATCH] [Editor] Remove the stamp editor displayed when the image was loading (bug 1848313) Make the annotation editor layer unclickable while the image is loading and change the cursor to 'wait'. --- src/display/editor/stamp.js | 39 ++++++++++----- src/display/editor/tools.js | 17 +++++++ test/integration/stamp_editor_spec.js | 64 ------------------------- web/annotation_editor_layer_builder.css | 22 ++++----- 4 files changed, 53 insertions(+), 89 deletions(-) diff --git a/src/display/editor/stamp.js b/src/display/editor/stamp.js index d121724ed..ffb4a99ee 100644 --- a/src/display/editor/stamp.js +++ b/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; diff --git a/src/display/editor/tools.js b/src/display/editor/tools.js index 7d041412e..37b05861c 100644 --- a/src/display/editor/tools.js +++ b/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. */ diff --git a/test/integration/stamp_editor_spec.js b/test/integration/stamp_editor_spec.js index 228a2019f..eb6ae5dc6 100644 --- a/test/integration/stamp_editor_spec.js +++ b/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; diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css index e06d461db..c8f01ec98 100644 --- a/web/annotation_editor_layer_builder.css +++ b/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%;