From 2548405401c9968656b8fe74464a9d80195a6f4c Mon Sep 17 00:00:00 2001 From: Calixte Denizet Date: Thu, 5 Jun 2025 20:48:09 +0200 Subject: [PATCH] Slightly simplify the way to create the editor toolbar --- src/display/editor/editor.js | 39 +++++++++++++++++++++++---------- src/display/editor/highlight.js | 14 +++++------- src/display/editor/signature.js | 19 +++++----------- src/display/editor/stamp.js | 13 ++++++++--- src/display/editor/toolbar.js | 27 ++++++++++++++++++----- web/signature_manager.js | 4 +++- 6 files changed, 72 insertions(+), 44 deletions(-) diff --git a/src/display/editor/editor.js b/src/display/editor/editor.js index 868490259..a0060d8cb 100644 --- a/src/display/editor/editor.js +++ b/src/display/editor/editor.js @@ -1049,6 +1049,14 @@ class AnnotationEditor { this.#altText?.finish(); } + /** + * Get the toolbar buttons for this editor. + * @returns {Array>|null} + */ + get toolbarButtons() { + return null; + } + /** * Add a toolbar for this editor. * @returns {Promise} @@ -1059,9 +1067,13 @@ class AnnotationEditor { } this._editToolbar = new EditorToolbar(this); this.div.append(this._editToolbar.render()); - if (this.#altText) { - await this._editToolbar.addAltText(this.#altText); + const { toolbarButtons } = this; + if (toolbarButtons) { + for (const [name, tool] of toolbarButtons) { + await this._editToolbar.addButton(name, tool); + } } + this._editToolbar.addButton("delete"); return this._editToolbar; } @@ -1091,17 +1103,20 @@ class AnnotationEditor { return this.div.getBoundingClientRect(); } - async addAltTextButton() { - if (this.#altText) { - return; + /** + * Create the alt text for this editor. + * @returns {object} + */ + createAltText() { + if (!this.#altText) { + AltText.initialize(AnnotationEditor._l10n); + this.#altText = new AltText(this); + if (this.#accessibilityData) { + this.#altText.data = this.#accessibilityData; + this.#accessibilityData = null; + } } - AltText.initialize(AnnotationEditor._l10n); - this.#altText = new AltText(this); - if (this.#accessibilityData) { - this.#altText.data = this.#accessibilityData; - this.#accessibilityData = null; - } - await this.addEditToolbar(); + return this.#altText; } get altTextData() { diff --git a/src/display/editor/highlight.js b/src/display/editor/highlight.js index 86626a62c..3a0305b7d 100644 --- a/src/display/editor/highlight.js +++ b/src/display/editor/highlight.js @@ -398,16 +398,14 @@ class HighlightEditor extends AnnotationEditor { } /** @inheritdoc */ - async addEditToolbar() { - const toolbar = await super.addEditToolbar(); - if (!toolbar) { - return null; - } + get toolbarButtons() { if (this._uiManager.highlightColors) { - this.#colorPicker = new ColorPicker({ editor: this }); - toolbar.addColorPicker(this.#colorPicker); + const colorPicker = (this.#colorPicker = new ColorPicker({ + editor: this, + })); + return [["colorPicker", colorPicker]]; } - return toolbar; + return super.toolbarButtons; } /** @inheritdoc */ diff --git a/src/display/editor/signature.js b/src/display/editor/signature.js index a206d7cb3..cacf8b658 100644 --- a/src/display/editor/signature.js +++ b/src/display/editor/signature.js @@ -244,27 +244,18 @@ class SignatureEditor extends DrawingEditor { } /** @inheritdoc */ - async addEditToolbar() { - const toolbar = await super.addEditToolbar(); - if (!toolbar) { - return null; + get toolbarButtons() { + if (this._uiManager.signatureManager) { + return [["editSignature", this._uiManager.signatureManager]]; } - if (this._uiManager.signatureManager && this.#description !== null) { - await toolbar.addEditSignatureButton( - this._uiManager.signatureManager, - this.#signatureUUID, - this.#description - ); - toolbar.show(); - } - return toolbar; + return super.toolbarButtons; } addSignature(data, heightInPage, description, uuid) { const { x: savedX, y: savedY } = this; const { outline } = (this.#signatureData = data); this.#isExtracted = outline instanceof ContourDrawOutline; - this.#description = description; + this.description = description; this.div.setAttribute("data-l10n-args", JSON.stringify({ description })); let drawingOptions; if (this.#isExtracted) { diff --git a/src/display/editor/stamp.js b/src/display/editor/stamp.js index 8e5972394..169653622 100644 --- a/src/display/editor/stamp.js +++ b/src/display/editor/stamp.js @@ -128,8 +128,10 @@ class StampEditor extends AnnotationEditor { this._uiManager.useNewAltTextFlow && this.#bitmap ) { - this._editToolbar.hide(); - this._uiManager.editAltText(this, /* firstTime = */ true); + this.addEditToolbar().then(() => { + this._editToolbar.hide(); + this._uiManager.editAltText(this, /* firstTime = */ true); + }); return; } @@ -336,6 +338,11 @@ class StampEditor extends AnnotationEditor { ); } + /** @inheritdoc */ + get toolbarButtons() { + return [["altText", this.createAltText()]]; + } + /** @inheritdoc */ get isResizable() { return true; @@ -356,7 +363,7 @@ class StampEditor extends AnnotationEditor { super.render(); this.div.hidden = true; - this.addAltTextButton(); + this.createAltText(); if (!this.#missingCanvas) { if (this.#bitmap) { diff --git a/src/display/editor/toolbar.js b/src/display/editor/toolbar.js index 715a4b820..faf683856 100644 --- a/src/display/editor/toolbar.js +++ b/src/display/editor/toolbar.js @@ -69,8 +69,6 @@ class EditorToolbar { }% + var(--editor-toolbar-vert-offset))`; } - this.#addDeleteButton(); - return editToolbar; } @@ -118,7 +116,7 @@ class EditorToolbar { this.#altText?.shown(); } - #addDeleteButton() { + addDeleteButton() { const { editorType, _uiManager } = this.#editor; const button = document.createElement("button"); @@ -145,7 +143,7 @@ class EditorToolbar { async addAltText(altText) { const button = await altText.render(); this.#addListenersToElement(button); - this.#buttons.prepend(button, this.#divider); + this.#buttons.append(button, this.#divider); this.#altText = altText; } @@ -153,14 +151,31 @@ class EditorToolbar { this.#colorPicker = colorPicker; const button = colorPicker.renderButton(); this.#addListenersToElement(button); - this.#buttons.prepend(button, this.#divider); + this.#buttons.append(button, this.#divider); } async addEditSignatureButton(signatureManager) { const button = (this.#signatureDescriptionButton = await signatureManager.renderEditButton(this.#editor)); this.#addListenersToElement(button); - this.#buttons.prepend(button, this.#divider); + this.#buttons.append(button, this.#divider); + } + + async addButton(name, tool) { + switch (name) { + case "colorPicker": + this.addColorPicker(tool); + break; + case "altText": + await this.addAltText(tool); + break; + case "editSignature": + await this.addEditSignatureButton(tool); + break; + case "delete": + this.addDeleteButton(); + break; + } } updateEditSignatureButton(description) { diff --git a/web/signature_manager.js b/web/signature_manager.js index 21774949b..9617df859 100644 --- a/web/signature_manager.js +++ b/web/signature_manager.js @@ -820,7 +820,9 @@ class SignatureManager { const button = document.createElement("button"); button.classList.add("altText", "editDescription"); button.tabIndex = 0; - button.title = editor.description; + if (editor.description) { + button.title = editor.description; + } const span = document.createElement("span"); button.append(span); span.setAttribute(