Set a z-index for the different layers within a page (fixes #15861)

Each layer has an absolute position, hence it induces the creation of
some stacking contexts (see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).
Thanks to this feature, we don't have to worry about the z-index used in
the annotation layer and how form elements interact with the other layers.
This commit is contained in:
Calixte Denizet 2022-12-22 21:55:25 +01:00
parent e49dd525b0
commit c677b167b6
5 changed files with 7 additions and 15 deletions

View File

@ -60,7 +60,7 @@
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;
z-index: 20000; z-index: 4;
} }
.annotationEditorLayer.freeTextEditing { .annotationEditorLayer.freeTextEditing {

View File

@ -44,6 +44,7 @@
left: 0; left: 0;
pointer-events: none; pointer-events: none;
transform-origin: 0 0; transform-origin: 0 0;
z-index: 3;
} }
.annotationLayer section { .annotationLayer section {

View File

@ -804,19 +804,7 @@ class PDFPageView {
// overflow will be hidden in Firefox. // overflow will be hidden in Firefox.
const canvasWrapper = document.createElement("div"); const canvasWrapper = document.createElement("div");
canvasWrapper.classList.add("canvasWrapper"); canvasWrapper.classList.add("canvasWrapper");
div.append(canvasWrapper);
if (this.textLayer) {
this.textLayer.div.before(canvasWrapper);
} else {
const lastDivBeforeTextDiv =
this.annotationLayer?.div || this.annotationEditorLayer?.div;
if (lastDivBeforeTextDiv) {
// The annotation layer needs to stay on top.
lastDivBeforeTextDiv.before(canvasWrapper);
} else {
div.append(canvasWrapper);
}
}
if ( if (
!this.textLayer && !this.textLayer &&
@ -830,7 +818,7 @@ class PDFPageView {
accessibilityManager: this._accessibilityManager, accessibilityManager: this._accessibilityManager,
isOffscreenCanvasSupported: this.isOffscreenCanvasSupported, isOffscreenCanvasSupported: this.isOffscreenCanvasSupported,
}); });
canvasWrapper.after(this.textLayer.div); div.append(this.textLayer.div);
} }
if ( if (

View File

@ -55,6 +55,7 @@
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1;
} }
.pdfViewer .page { .pdfViewer .page {
@ -156,6 +157,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
background: url("images/loading-icon.gif") center no-repeat; background: url("images/loading-icon.gif") center no-repeat;
z-index: 5;
} }
.pdfViewer .page .loadingIcon.notVisible { .pdfViewer .page .loadingIcon.notVisible {
background: none; background: none;

View File

@ -26,6 +26,7 @@
text-size-adjust: none; text-size-adjust: none;
forced-color-adjust: none; forced-color-adjust: none;
transform-origin: 0 0; transform-origin: 0 0;
z-index: 2;
} }
.textLayer span, .textLayer span,