mirror of
https://github.com/zen-browser/pdf.js.git
synced 2025-07-08 17:30:09 +02:00
Merge pull request #18425 from calixteman/bug1879104
[Editor] Make editor toolbars usable whatever their z-index (bug 1879104)
This commit is contained in:
commit
df5bc544df
3 changed files with 113 additions and 26 deletions
|
@ -30,6 +30,7 @@ import {
|
||||||
kbUndo,
|
kbUndo,
|
||||||
loadAndWait,
|
loadAndWait,
|
||||||
scrollIntoView,
|
scrollIntoView,
|
||||||
|
setCaretAt,
|
||||||
switchToEditor,
|
switchToEditor,
|
||||||
waitForSerialized,
|
waitForSerialized,
|
||||||
} from "./test_utils.mjs";
|
} from "./test_utils.mjs";
|
||||||
|
@ -1043,19 +1044,12 @@ describe("Highlight Editor", () => {
|
||||||
`${getEditorSelector(0)}:not(.selectedEditor)`
|
`${getEditorSelector(0)}:not(.selectedEditor)`
|
||||||
);
|
);
|
||||||
|
|
||||||
await page.evaluate(() => {
|
await setCaretAt(
|
||||||
const text =
|
page,
|
||||||
"Dynamic languages such as JavaScript are more difficult to com-";
|
1,
|
||||||
for (const el of document.querySelectorAll(
|
"Dynamic languages such as JavaScript are more difficult to com-",
|
||||||
`.page[data-page-number="${1}"] > .textLayer > span`
|
1
|
||||||
)) {
|
);
|
||||||
if (el.textContent === text) {
|
|
||||||
window.getSelection().setPosition(el.firstChild, 1);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
await page.keyboard.press("ArrowUp");
|
await page.keyboard.press("ArrowUp");
|
||||||
const [text, offset] = await page.evaluate(() => {
|
const [text, offset] = await page.evaluate(() => {
|
||||||
const selection = window.getSelection();
|
const selection = window.getSelection();
|
||||||
|
@ -1073,19 +1067,12 @@ describe("Highlight Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await switchToHighlight(page);
|
await switchToHighlight(page);
|
||||||
|
|
||||||
await page.evaluate(() => {
|
await setCaretAt(
|
||||||
const text =
|
page,
|
||||||
"Dynamic languages such as JavaScript are more difficult to com-";
|
1,
|
||||||
for (const el of document.querySelectorAll(
|
"Dynamic languages such as JavaScript are more difficult to com-",
|
||||||
`.page[data-page-number="${1}"] > .textLayer > span`
|
15
|
||||||
)) {
|
);
|
||||||
if (el.textContent === text) {
|
|
||||||
window.getSelection().setPosition(el.firstChild, 15);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
await page.keyboard.down("Shift");
|
await page.keyboard.down("Shift");
|
||||||
await page.keyboard.press("ArrowDown");
|
await page.keyboard.press("ArrowDown");
|
||||||
await page.keyboard.up("Shift");
|
await page.keyboard.up("Shift");
|
||||||
|
@ -1702,4 +1689,81 @@ describe("Highlight Editor", () => {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("Use a toolbar overlapping an other highlight", () => {
|
||||||
|
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 check that the toolbar is usable", async () => {
|
||||||
|
await Promise.all(
|
||||||
|
pages.map(async ([browserName, page]) => {
|
||||||
|
await switchToHighlight(page);
|
||||||
|
|
||||||
|
await setCaretAt(
|
||||||
|
page,
|
||||||
|
1,
|
||||||
|
"Dynamic languages such as JavaScript are more difficult to com-",
|
||||||
|
0
|
||||||
|
);
|
||||||
|
await page.keyboard.down("Shift");
|
||||||
|
for (let i = 0; i < 3; i++) {
|
||||||
|
await page.keyboard.press("ArrowDown");
|
||||||
|
}
|
||||||
|
await page.keyboard.up("Shift");
|
||||||
|
|
||||||
|
const editorSelector = getEditorSelector(0);
|
||||||
|
await page.waitForSelector(editorSelector);
|
||||||
|
|
||||||
|
await setCaretAt(
|
||||||
|
page,
|
||||||
|
1,
|
||||||
|
"handle all possible type combinations at runtime. We present an al-",
|
||||||
|
0
|
||||||
|
);
|
||||||
|
await page.keyboard.down("Shift");
|
||||||
|
for (let i = 0; i < 3; i++) {
|
||||||
|
await page.keyboard.press("ArrowDown");
|
||||||
|
}
|
||||||
|
await page.keyboard.up("Shift");
|
||||||
|
await page.waitForSelector(getEditorSelector(1));
|
||||||
|
|
||||||
|
const rect = await getRect(page, editorSelector);
|
||||||
|
const x = rect.x + rect.width / 2;
|
||||||
|
const y = rect.y + rect.height / 2;
|
||||||
|
await page.mouse.click(x, y);
|
||||||
|
|
||||||
|
await page.waitForSelector(
|
||||||
|
`${editorSelector} .editToolbar button.colorPicker`
|
||||||
|
);
|
||||||
|
|
||||||
|
await page.click(`${editorSelector} .editToolbar button.colorPicker`);
|
||||||
|
await page.waitForSelector(
|
||||||
|
`${editorSelector} .editToolbar button[title = "Green"]`
|
||||||
|
);
|
||||||
|
await page.click(
|
||||||
|
`${editorSelector} .editToolbar button[title = "Green"]`
|
||||||
|
);
|
||||||
|
await page.waitForSelector(
|
||||||
|
`.page[data-page-number = "1"] svg.highlight[fill = "#00FF00"]`
|
||||||
|
);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -511,6 +511,24 @@ async function hover(page, selector) {
|
||||||
await page.mouse.move(rect.x + rect.width / 2, rect.y + rect.height / 2);
|
await page.mouse.move(rect.x + rect.width / 2, rect.y + rect.height / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function setCaretAt(page, pageNumber, text, position) {
|
||||||
|
await page.evaluate(
|
||||||
|
(pageN, string, pos) => {
|
||||||
|
for (const el of document.querySelectorAll(
|
||||||
|
`.page[data-page-number="${pageN}"] > .textLayer > span`
|
||||||
|
)) {
|
||||||
|
if (el.textContent === string) {
|
||||||
|
window.getSelection().setPosition(el.firstChild, pos);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pageNumber,
|
||||||
|
text,
|
||||||
|
position
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const modifier = isMac ? "Meta" : "Control";
|
const modifier = isMac ? "Meta" : "Control";
|
||||||
async function kbCopy(page) {
|
async function kbCopy(page) {
|
||||||
await page.keyboard.down(modifier);
|
await page.keyboard.down(modifier);
|
||||||
|
@ -713,6 +731,7 @@ export {
|
||||||
pasteFromClipboard,
|
pasteFromClipboard,
|
||||||
scrollIntoView,
|
scrollIntoView,
|
||||||
serializeBitmapDimensions,
|
serializeBitmapDimensions,
|
||||||
|
setCaretAt,
|
||||||
switchToEditor,
|
switchToEditor,
|
||||||
waitForAnnotationEditorLayer,
|
waitForAnnotationEditorLayer,
|
||||||
waitForAnnotationModeChanged,
|
waitForAnnotationModeChanged,
|
||||||
|
|
|
@ -112,6 +112,10 @@
|
||||||
font-size: calc(100px * var(--scale-factor));
|
font-size: calc(100px * var(--scale-factor));
|
||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
cursor: auto;
|
cursor: auto;
|
||||||
|
|
||||||
|
.selectedEditor {
|
||||||
|
z-index: 100000 !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.annotationEditorLayer.waiting {
|
.annotationEditorLayer.waiting {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue