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

[Editor] Avoid an exception when pressing space key to change the color of an highlight

Browse Source
This commit is contained in:
Calixte Denizet 2024-01-16 20:00:23 +01:00
parent 51413be5b6
commit a76cc40ab8
2 changed files with 110 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/display/editor/color_picker.js
View File

@ -36,6 +36,8 @@ class ColorPicker {
#uiManager = null;
#type;
static get _keyboardManager() {
return shadow(
this,
@ -61,7 +63,13 @@ class ColorPicker {
}
constructor({ editor = null, uiManager = null }) {
this.#isMainColorPicker = !editor;
if (editor) {
this.#isMainColorPicker = false;
this.#type = AnnotationEditorParamsType.HIGHLIGHT_COLOR;
} else {
this.#isMainColorPicker = true;
this.#type = AnnotationEditorParamsType.HIGHLIGHT_DEFAULT_COLOR;
}
this.#uiManager = editor?._uiManager || uiManager;
this.#eventBus = this.#uiManager._eventBus;
this.#defaultColor =
@ -85,16 +93,14 @@ class ColorPicker {
}
renderMainDropdown() {
const dropdown = (this.#dropdown = this.#getDropdownRoot(
AnnotationEditorParamsType.HIGHLIGHT_DEFAULT_COLOR
));
const dropdown = (this.#dropdown = this.#getDropdownRoot());
dropdown.setAttribute("aria-orientation", "horizontal");
dropdown.setAttribute("aria-labelledby", "highlightColorPickerLabel");
return dropdown;
}
#getDropdownRoot(paramType) {
#getDropdownRoot() {
const div = document.createElement("div");
div.addEventListener("contextmenu", noContextMenu);
div.className = "dropdown";
@ -114,10 +120,7 @@ class ColorPicker {
swatch.className = "swatch";
swatch.style.backgroundColor = color;
button.setAttribute("aria-selected", color === this.#defaultColor);
button.addEventListener(
"click",
this.#colorSelect.bind(this, paramType, color)
);
button.addEventListener("click", this.#colorSelect.bind(this, color));
div.append(button);
}
@ -126,11 +129,11 @@ class ColorPicker {
return div;
}
#colorSelect(type, color, event) {
#colorSelect(color, event) {
event.stopPropagation();
this.#eventBus.dispatch("switchannotationeditorparams", {
source: this,
type,
type: this.#type,
value: color,
});
}

96
test/integration/highlight_editor_spec.mjs
View File

@ -331,4 +331,100 @@ describe("Highlight Editor", () => {
);
});
});
describe("Color picker and keyboard", () => {
let pages;
beforeAll(async () => {
pages = await loadAndWait(
"tracemonkey.pdf",
".annotationEditorLayer",
null,
null,
{
highlightEditorColors:
"yellow=#FFFF00,green=#00FF00,blue=#0000FF,pink=#FF00FF,red=#FF0000",
}
);
});
afterAll(async () => {
await closePages(pages);
});
it("must be correctly serialized", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
await page.click("#editorHighlight");
await page.waitForSelector(".annotationEditorLayer.highlightEditing");
const sel = getEditorSelector(0);
const rect = await getSpanRectFromText(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2 });
await page.waitForSelector(sel);
await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlightOutline.selected`
);
await page.waitForSelector(`${sel} .editToolbar button.colorPicker`);
await page.click(`${sel} .editToolbar button.colorPicker`);
await page.waitForSelector(
`${sel} .editToolbar button[title = "Red"]`
);
await page.click(`${sel} .editToolbar button[title = "Red"]`);
await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlight[fill = "#FF0000"]`
);
await page.keyboard.press("ArrowUp");
await page.waitForSelector(
`${sel} .editToolbar button[title = "Pink"]:focus`
);
await page.keyboard.press("Enter");
await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlight[fill = "#FF00FF"]`
);
await page.keyboard.press("ArrowUp");
await page.waitForSelector(
`${sel} .editToolbar button[title = "Blue"]:focus`
);
await page.keyboard.press(" ");
await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlight[fill = "#0000FF"]`
);
await page.keyboard.press("ArrowLeft");
await page.waitForSelector(
`${sel} .editToolbar button[title = "Green"]:focus`
);
await page.keyboard.press("Enter");
await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlight[fill = "#00FF00"]`
);
await page.keyboard.press("ArrowRight");
await page.waitForSelector(
`${sel} .editToolbar button[title = "Blue"]:focus`
);
await page.keyboard.press("Enter");
await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlight[fill = "#0000FF"]`
);
await page.keyboard.press("ArrowDown");
await page.waitForSelector(
`${sel} .editToolbar button[title = "Pink"]:focus`
);
await page.keyboard.press(" ");
await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlight[fill = "#FF00FF"]`
);
})
);
});
});
});