mirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-19 22:58:07 +02:00
Code Activity

[Editor] Avoid to darken the current editor when opening the alt-text dialog

Browse source
This commit is contained in:
Calixte Denizet 2023-09-21 18:40:35 +02:00
parent a7894a4d7b
commit 6545551e76
4 changed files with 52 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

48
web/alt_text_manager.js
View file

@ -13,7 +13,7 @@
* limitations under the License.
*/
import { shadow } from "pdfjs-lib";
import { DOMSVGFactory, shadow } from "pdfjs-lib";
class AltTextManager {
#boundUpdateUIState = this.#updateUIState.bind(this);
@ -46,6 +46,10 @@ class AltTextManager {
#previousAltText = null;
#svgElement = null;
#rectElement = null;
constructor(
{
dialog,
@ -87,11 +91,46 @@ class AltTextManager {
]);
}
#createSVGElement() {
if (this.#svgElement) {
return;
}
// We create a mask to add to the dialog backdrop: the idea is to have a
// darken background everywhere except on the editor to clearly see the
// picture to describe.
const svgFactory = new DOMSVGFactory();
const svg = (this.#svgElement = svgFactory.createElement("svg"));
svg.setAttribute("width", "0");
svg.setAttribute("height", "0");
const defs = svgFactory.createElement("defs");
svg.append(defs);
const mask = svgFactory.createElement("mask");
defs.append(mask);
mask.setAttribute("id", "alttext-manager-mask");
mask.setAttribute("maskContentUnits", "objectBoundingBox");
let rect = svgFactory.createElement("rect");
mask.append(rect);
rect.setAttribute("fill", "white");
rect.setAttribute("width", "1");
rect.setAttribute("height", "1");
rect.setAttribute("x", "0");
rect.setAttribute("y", "0");
rect = this.#rectElement = svgFactory.createElement("rect");
mask.append(rect);
rect.setAttribute("fill", "black");
this.#dialog.append(svg);
}
async editAltText(uiManager, editor) {
if (this.#currentEditor || !editor) {
return;
}
this.#createSVGElement();
this.#hasUsedPointer = false;
for (const element of this._elements) {
element.addEventListener("pointerdown", this.#boundPointerDown);
@ -134,6 +173,11 @@ class AltTextManager {
const MARGIN = 10;
const isLTR = this.#uiManager.direction === "ltr";
this.#rectElement.setAttribute("width", `${width / windowW}`);
this.#rectElement.setAttribute("height", `${height / windowH}`);
this.#rectElement.setAttribute("x", `${x / windowW}`);
this.#rectElement.setAttribute("y", `${y / windowH}`);
let left = null;
let top = y;
top += Math.min(windowH - (top + dialogH), 0);
@ -254,6 +298,8 @@ class AltTextManager {
this.#currentEditor = null;
this.#uiManager = null;
this.#finish();
this.#svgElement?.remove();
this.#svgElement = this.#rectElement = null;
}
}

2
web/annotation_editor_layer_builder.css
View file

@ -688,7 +688,7 @@
&::backdrop {
/* This is needed to avoid to darken the image the user want to describe. */
display: none;
mask: url(#alttext-manager-mask);
}
&.positioned {