Beanz/pdf.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Editor] Add a floating button in order to highlight the text selection and add a comment (bug 1979381)

Browse Source 
The callback called when clicking on the button is the same as the one trigged by clicking in the context menu (in m-c).
This commit is contained in:
Calixte Denizet 2025-07-25 18:03:37 +02:00
parent 366727d734
commit 3fb7cd40e7
8 changed files with 153 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
l10n/en-US/viewer.ftl
View File

@ -324,6 +324,10 @@ pdfjs-highlight-floating-button1 =
.title = Highlight .title = Highlight
.aria-label = Highlight .aria-label = Highlight
pdfjs-highlight-floating-button-label = Highlight pdfjs-highlight-floating-button-label = Highlight
pdfjs-comment-floating-button =
.title = Comment
.aria-label = Comment
pdfjs-comment-floating-button-label = Comment
pdfjs-editor-signature-button = pdfjs-editor-signature-button =
.title = Add signature .title = Add signature
pdfjs-editor-signature-button-label = Add signature pdfjs-editor-signature-button-label = Add signature

42
src/display/editor/toolbar.js
View File

@ -123,7 +123,7 @@ class EditorToolbar {
const { editorType, _uiManager } = this.#editor; const { editorType, _uiManager } = this.#editor;
const button = document.createElement("button"); const button = document.createElement("button");
button.className = "delete"; button.classList.add("basic", "deleteButton");
button.tabIndex = 0; button.tabIndex = 0;
button.setAttribute("data-l10n-id", EditorToolbar.#l10nRemove[editorType]); button.setAttribute("data-l10n-id", EditorToolbar.#l10nRemove[editorType]);
this.#addListenersToElement(button); this.#addListenersToElement(button);
@ -214,7 +214,7 @@ class EditorToolbar {
} }
} }
class HighlightToolbar { class FloatingToolbar {
#buttons = null; #buttons = null;
#toolbar = null; #toolbar = null;
@ -237,7 +237,25 @@ class HighlightToolbar {
buttons.className = "buttons"; buttons.className = "buttons";
editToolbar.append(buttons); editToolbar.append(buttons);
this.#addHighlightButton(); if (this.#uiManager.hasCommentManager()) {
this.#makeButton(
"commentButton",
`pdfjs-comment-floating-button`,
"pdfjs-comment-floating-button-label",
() => {
this.#uiManager.commentSelection("floating_button");
}
);
}
this.#makeButton(
"highlightButton",
`pdfjs-highlight-floating-button1`,
"pdfjs-highlight-floating-button-label",
() => {
this.#uiManager.highlightSelection("floating_button");
}
);
return editToolbar; return editToolbar;
} }
@ -279,26 +297,20 @@ class HighlightToolbar {
this.#toolbar.remove(); this.#toolbar.remove();
} }
#addHighlightButton() { #makeButton(buttonClass, l10nId, labelL10nId, clickHandler) {
const button = document.createElement("button"); const button = document.createElement("button");
button.className = "highlightButton"; button.classList.add("basic", buttonClass);
button.tabIndex = 0; button.tabIndex = 0;
button.setAttribute("data-l10n-id", `pdfjs-highlight-floating-button1`); button.setAttribute("data-l10n-id", l10nId);
const span = document.createElement("span"); const span = document.createElement("span");
button.append(span); button.append(span);
span.className = "visuallyHidden"; span.className = "visuallyHidden";
span.setAttribute("data-l10n-id", "pdfjs-highlight-floating-button-label"); span.setAttribute("data-l10n-id", labelL10nId);
const signal = this.#uiManager._signal; const signal = this.#uiManager._signal;
button.addEventListener("contextmenu", noContextMenu, { signal }); button.addEventListener("contextmenu", noContextMenu, { signal });
button.addEventListener( button.addEventListener("click", clickHandler, { signal });
"click",
() => {
this.#uiManager.highlightSelection("floating_button");
},
{ signal }
);
this.#buttons.append(button); this.#buttons.append(button);
} }
} }
export { EditorToolbar, HighlightToolbar }; export { EditorToolbar, FloatingToolbar };

36
src/display/editor/tools.js
View File

@ -34,7 +34,7 @@ import {
PixelsPerInch, PixelsPerInch,
stopEvent, stopEvent,
} from "../display_utils.js"; } from "../display_utils.js";
import { HighlightToolbar } from "./toolbar.js"; import { FloatingToolbar } from "./toolbar.js";
function bindEvents(obj, element, names) { function bindEvents(obj, element, names) {
for (const name of names) { for (const name of names) {
@ -631,7 +631,7 @@ class AnnotationEditorUIManager {
#highlightWhenShiftUp = false; #highlightWhenShiftUp = false;
#highlightToolbar = null; #floatingToolbar = null;
#idManager = new IdManager(); #idManager = new IdManager();
@ -908,8 +908,8 @@ class AnnotationEditorUIManager {
this.#altTextManager?.destroy(); this.#altTextManager?.destroy();
this.#commentManager?.destroy(); this.#commentManager?.destroy();
this.#signatureManager?.destroy(); this.#signatureManager?.destroy();
this.#highlightToolbar?.hide(); this.#floatingToolbar?.hide();
this.#highlightToolbar = null; this.#floatingToolbar = null;
this.#mainHighlightColorPicker?.destroy(); this.#mainHighlightColorPicker?.destroy();
this.#mainHighlightColorPicker = null; this.#mainHighlightColorPicker = null;
if (this.#focusMainContainerTimeoutId) { if (this.#focusMainContainerTimeoutId) {
@ -1157,7 +1157,7 @@ class AnnotationEditorUIManager {
return null; return null;
} }
highlightSelection(methodOfCreation = "") { highlightSelection(methodOfCreation = "", comment = false) {
const selection = document.getSelection(); const selection = document.getSelection();
if (!selection || selection.isCollapsed) { if (!selection || selection.isCollapsed) {
return; return;
@ -1175,7 +1175,7 @@ class AnnotationEditorUIManager {
const layer = this.#getLayerForTextLayer(textLayer); const layer = this.#getLayerForTextLayer(textLayer);
const isNoneMode = this.#mode === AnnotationEditorType.NONE; const isNoneMode = this.#mode === AnnotationEditorType.NONE;
const callback = () => { const callback = () => {
layer?.createAndAddNewEditor({ x: 0, y: 0 }, false, { const editor = layer?.createAndAddNewEditor({ x: 0, y: 0 }, false, {
methodOfCreation, methodOfCreation,
boxes, boxes,
anchorNode, anchorNode,
@ -1187,6 +1187,9 @@ class AnnotationEditorUIManager {
if (isNoneMode) { if (isNoneMode) {
this.showAllEditors("highlight", true, /* updateButton = */ true); this.showAllEditors("highlight", true, /* updateButton = */ true);
} }
if (comment) {
editor?.editComment();
}
}; };
if (isNoneMode) { if (isNoneMode) {
this.switchToMode(AnnotationEditorType.HIGHLIGHT, callback); this.switchToMode(AnnotationEditorType.HIGHLIGHT, callback);
@ -1195,7 +1198,11 @@ class AnnotationEditorUIManager {
callback(); callback();
} }
#displayHighlightToolbar() { commentSelection(methodOfCreation = "") {
this.highlightSelection(methodOfCreation, /* comment */ true);
}
#displayFloatingToolbar() {
const selection = document.getSelection(); const selection = document.getSelection();
if (!selection || selection.isCollapsed) { if (!selection || selection.isCollapsed) {
return; return;
@ -1206,8 +1213,8 @@ class AnnotationEditorUIManager {
if (!boxes) { if (!boxes) {
return; return;
} }
this.#highlightToolbar ||= new HighlightToolbar(this); this.#floatingToolbar ||= new FloatingToolbar(this);
this.#highlightToolbar.show(textLayer, boxes, this.direction === "ltr"); this.#floatingToolbar.show(textLayer, boxes, this.direction === "ltr");
} }
/** /**
@ -1241,7 +1248,7 @@ class AnnotationEditorUIManager {
const selection = document.getSelection(); const selection = document.getSelection();
if (!selection || selection.isCollapsed) { if (!selection || selection.isCollapsed) {
if (this.#selectedTextNode) { if (this.#selectedTextNode) {
this.#highlightToolbar?.hide(); this.#floatingToolbar?.hide();
this.#selectedTextNode = null; this.#selectedTextNode = null;
this.#dispatchUpdateStates({ this.#dispatchUpdateStates({
hasSelectedText: false, hasSelectedText: false,
@ -1258,7 +1265,7 @@ class AnnotationEditorUIManager {
const textLayer = anchorElement.closest(".textLayer"); const textLayer = anchorElement.closest(".textLayer");
if (!textLayer) { if (!textLayer) {
if (this.#selectedTextNode) { if (this.#selectedTextNode) {
this.#highlightToolbar?.hide(); this.#floatingToolbar?.hide();
this.#selectedTextNode = null; this.#selectedTextNode = null;
this.#dispatchUpdateStates({ this.#dispatchUpdateStates({
hasSelectedText: false, hasSelectedText: false,
@ -1267,7 +1274,7 @@ class AnnotationEditorUIManager {
return; return;
} }
this.#highlightToolbar?.hide(); this.#floatingToolbar?.hide();
this.#selectedTextNode = anchorNode; this.#selectedTextNode = anchorNode;
this.#dispatchUpdateStates({ this.#dispatchUpdateStates({
hasSelectedText: true, hasSelectedText: true,
@ -1315,7 +1322,7 @@ class AnnotationEditorUIManager {
if (this.#mode === AnnotationEditorType.HIGHLIGHT) { if (this.#mode === AnnotationEditorType.HIGHLIGHT) {
this.highlightSelection(methodOfCreation); this.highlightSelection(methodOfCreation);
} else if (this.#enableHighlightFloatingButton) { } else if (this.#enableHighlightFloatingButton) {
this.#displayHighlightToolbar(); this.#displayFloatingToolbar();
} }
} }
@ -1606,6 +1613,9 @@ class AnnotationEditorUIManager {
case "highlightSelection": case "highlightSelection":
this.highlightSelection("context_menu"); this.highlightSelection("context_menu");
break; break;
case "commentSelection":
this.commentSelection("context_menu");
break;
} }
} }

24
test/integration/freetext_editor_spec.mjs
View File

@ -2591,7 +2591,7 @@ describe("FreeText Editor", () => {
await commit(page); await commit(page);
// Delete it in using the button. // Delete it in using the button.
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await page.waitForFunction( await page.waitForFunction(
sel => !document.querySelector(sel), sel => !document.querySelector(sel),
{}, {},
@ -2644,7 +2644,7 @@ describe("FreeText Editor", () => {
await selectAll(page); await selectAll(page);
// Delete it in using the button. // Delete it in using the button.
await page.focus(`${editorSelector} button.delete`); await page.focus(`${editorSelector} button.deleteButton`);
await page.keyboard.press("Enter"); await page.keyboard.press("Enter");
await page.waitForFunction( await page.waitForFunction(
sel => !document.querySelector(sel), sel => !document.querySelector(sel),
@ -2885,8 +2885,8 @@ describe("FreeText Editor", () => {
await commit(page); await commit(page);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2); const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2);
@ -2935,8 +2935,8 @@ describe("FreeText Editor", () => {
await commit(page); await commit(page);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
const twoToOne = Array.from(new Array(13).keys(), n => n + 2).concat( const twoToOne = Array.from(new Array(13).keys(), n => n + 2).concat(
@ -3271,8 +3271,8 @@ describe("FreeText Editor", () => {
await commit(page); await commit(page);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });
@ -3299,8 +3299,8 @@ describe("FreeText Editor", () => {
await commit(page); await commit(page);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForFunction(() => { await page.waitForFunction(() => {
@ -3332,8 +3332,8 @@ describe("FreeText Editor", () => {
await commit(page); await commit(page);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });

80
test/integration/highlight_editor_spec.mjs
View File

@ -1168,9 +1168,9 @@ describe("Highlight Editor", () => {
const editorSelector = getEditorSelector(0); const editorSelector = getEditorSelector(0);
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.focus(`${editorSelector} button.delete`); await page.focus(`${editorSelector} button.deleteButton`);
await page.keyboard.press(" "); await page.keyboard.press(" ");
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
@ -1565,8 +1565,8 @@ describe("Highlight Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await kbUndo(page); await kbUndo(page);
@ -1611,8 +1611,8 @@ describe("Highlight Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2); const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2);
@ -1673,8 +1673,8 @@ describe("Highlight Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
const twoToOne = Array.from(new Array(13).keys(), n => n + 2).concat( const twoToOne = Array.from(new Array(13).keys(), n => n + 2).concat(
@ -2022,8 +2022,8 @@ describe("Highlight Editor", () => {
const editorSelector = getEditorSelector(0); const editorSelector = getEditorSelector(0);
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
const serialized = await getSerialized(page); const serialized = await getSerialized(page);
@ -2204,8 +2204,8 @@ describe("Highlight Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });
@ -2234,8 +2234,8 @@ describe("Highlight Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });
@ -2260,8 +2260,8 @@ describe("Highlight Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });
@ -2286,8 +2286,8 @@ describe("Highlight Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });
@ -2314,8 +2314,8 @@ describe("Highlight Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });
@ -2337,8 +2337,8 @@ describe("Highlight Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });
@ -2360,8 +2360,8 @@ describe("Highlight Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });
@ -2383,8 +2383,8 @@ describe("Highlight Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });
@ -2407,8 +2407,8 @@ describe("Highlight Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });
@ -2430,8 +2430,8 @@ describe("Highlight Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });
const pdfPath = path.join(__dirname, "../pdfs/basicapi.pdf"); const pdfPath = path.join(__dirname, "../pdfs/basicapi.pdf");
@ -2490,8 +2490,8 @@ describe("Highlight Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForFunction(() => { await page.waitForFunction(() => {
@ -2529,8 +2529,8 @@ describe("Highlight Editor", () => {
await page.waitForSelector(getEditorSelector(1)); await page.waitForSelector(getEditorSelector(1));
await selectAll(page); await selectAll(page);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForFunction(() => { await page.waitForFunction(() => {
@ -2567,8 +2567,8 @@ describe("Highlight Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });
@ -2583,8 +2583,8 @@ describe("Highlight Editor", () => {
`.page[data-page-number = "1"] svg.highlight[fill = "#FFFF00"]` `.page[data-page-number = "1"] svg.highlight[fill = "#FFFF00"]`
); );
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });
@ -2614,8 +2614,8 @@ describe("Highlight Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });

28
test/integration/ink_editor_spec.mjs
View File

@ -345,8 +345,8 @@ describe("Ink Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await kbUndo(page); await kbUndo(page);
@ -389,8 +389,8 @@ describe("Ink Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2); const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2);
@ -446,8 +446,8 @@ describe("Ink Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
const twoToOne = Array.from(new Array(13).keys(), n => n + 2).concat( const twoToOne = Array.from(new Array(13).keys(), n => n + 2).concat(
@ -897,8 +897,8 @@ describe("Ink Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });
@ -931,8 +931,8 @@ describe("Ink Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForFunction(() => { await page.waitForFunction(() => {
@ -970,8 +970,8 @@ describe("Ink Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });
@ -1101,8 +1101,8 @@ describe("Ink Editor", () => {
await dragAndDrop(page, editorSelector, [[0, -30]], /* steps = */ 10); await dragAndDrop(page, editorSelector, [[0, -30]], /* steps = */ 10);
await waitForSerialized(page, 2); await waitForSerialized(page, 2);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });

32
test/integration/stamp_editor_spec.mjs
View File

@ -183,8 +183,8 @@ describe("Stamp Editor", () => {
await waitForImage(page, editorSelector); await waitForImage(page, editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await kbUndo(page); await kbUndo(page);
@ -677,8 +677,8 @@ describe("Stamp Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await kbUndo(page); await kbUndo(page);
@ -709,8 +709,8 @@ describe("Stamp Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2); const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2);
@ -754,8 +754,8 @@ describe("Stamp Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
const twoToOne = Array.from(new Array(13).keys(), n => n + 2).concat( const twoToOne = Array.from(new Array(13).keys(), n => n + 2).concat(
@ -1532,8 +1532,8 @@ describe("Stamp Editor", () => {
let serialized = await getSerialized(page); let serialized = await getSerialized(page);
expect(serialized).withContext(`In ${browserName}`).toEqual([]); expect(serialized).withContext(`In ${browserName}`).toEqual([]);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
serialized = await getSerialized(page); serialized = await getSerialized(page);
@ -1606,8 +1606,8 @@ describe("Stamp Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });
@ -1631,8 +1631,8 @@ describe("Stamp Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForFunction(() => { await page.waitForFunction(() => {
@ -1657,8 +1657,8 @@ describe("Stamp Editor", () => {
await page.waitForSelector(editorSelector); await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.delete`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.delete`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0); await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });

42
web/annotation_editor_layer_builder.css
View File

@ -321,41 +321,33 @@
margin-inline: 2px; margin-inline: 2px;
} }
.highlightButton { .basic {
width: var(--editor-toolbar-height); width: var(--editor-toolbar-height);
&::before { &::before {
content: ""; content: "";
mask-repeat: no-repeat;
mask-position: center;
display: inline-block;
background-color: var(--editor-toolbar-fg-color);
width: 100%;
height: 100%;
}
&:hover::before {
background-color: var(--editor-toolbar-hover-fg-color);
}
&.highlightButton::before {
mask-image: var(--editor-toolbar-highlight-image); mask-image: var(--editor-toolbar-highlight-image);
mask-repeat: no-repeat;
mask-position: center;
display: inline-block;
background-color: var(--editor-toolbar-fg-color);
width: 100%;
height: 100%;
} }
&:hover::before { &.commentButton::before {
background-color: var(--editor-toolbar-hover-fg-color); mask-image: var(--editor-toolbar-comment-edit-image);
}
} }
.delete { &.deleteButton::before {
width: var(--editor-toolbar-height);
&::before {
content: "";
mask-image: var(--editor-toolbar-delete-image); mask-image: var(--editor-toolbar-delete-image);
mask-repeat: no-repeat;
mask-position: center;
display: inline-block;
background-color: var(--editor-toolbar-fg-color);
width: 100%;
height: 100%;
}
&:hover::before {
background-color: var(--editor-toolbar-hover-fg-color);
} }
} }