Slightly simplify the way to create the editor toolbar

This commit is contained in:
Calixte Denizet 2025-06-05 20:48:09 +02:00
parent 18d7aafc94
commit 2548405401
6 changed files with 72 additions and 44 deletions

View File

@ -1049,6 +1049,14 @@ class AnnotationEditor {
this.#altText?.finish();
}
/**
* Get the toolbar buttons for this editor.
* @returns {Array<Array<string|object>>|null}
*/
get toolbarButtons() {
return null;
}
/**
* Add a toolbar for this editor.
* @returns {Promise<EditorToolbar|null>}
@ -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;
}
await this.addEditToolbar();
}
return this.#altText;
}
get altTextData() {

View File

@ -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 */

View File

@ -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) {

View File

@ -128,8 +128,10 @@ class StampEditor extends AnnotationEditor {
this._uiManager.useNewAltTextFlow &&
this.#bitmap
) {
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) {

View File

@ -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) {

View File

@ -820,7 +820,9 @@ class SignatureManager {
const button = document.createElement("button");
button.classList.add("altText", "editDescription");
button.tabIndex = 0;
if (editor.description) {
button.title = editor.description;
}
const span = document.createElement("span");
button.append(span);
span.setAttribute(