Replace the --viewport-scale-factor CSS variable

This CSS variable is only used together with the `annotationCanvasMap`-functionality in the canvas-code, however its value can be *trivially* computed by using the older `--zoom-factor` CSS variable together with the `PixelsPerInch`-structure.
Rather than having *two different* CSS variables that are this closely linked, it seems better to simplify things by using just one CSS variable instead.
This commit is contained in:
Jonas Jenwald 2022-04-14 12:43:44 +02:00
parent 143ba30bef
commit e67cd7fae0
4 changed files with 4 additions and 10 deletions

View File

@ -2726,8 +2726,9 @@ class CanvasGraphics {
canvasHeight
);
const { canvas, context } = this.annotationCanvas;
canvas.style.width = `calc(${width}px * var(--viewport-scale-factor))`;
canvas.style.height = `calc(${height}px * var(--viewport-scale-factor))`;
const viewportScaleFactorStr = `var(--zoom-factor) * ${PixelsPerInch.PDF_TO_CSS_UNITS}`;
canvas.style.width = `calc(${width}px * ${viewportScaleFactorStr})`;
canvas.style.height = `calc(${height}px * ${viewportScaleFactorStr})`;
this.annotationCanvasMap.set(id, canvas);
this.annotationCanvas.savedCtx = this.ctx;
this.ctx = context;

View File

@ -1012,10 +1012,6 @@ class BaseViewer {
}
this._doc.style.setProperty("--zoom-factor", newScale);
this._doc.style.setProperty(
"--viewport-scale-factor",
newScale * PixelsPerInch.PDF_TO_CSS_UNITS
);
const updateArgs = { scale: newScale };
for (const pageView of this._pages) {

View File

@ -329,16 +329,14 @@ class PDFPageView {
}
const totalRotation = (this.rotation + this.pdfPageRotate) % 360;
const viewportScale = this.scale * PixelsPerInch.PDF_TO_CSS_UNITS;
this.viewport = this.viewport.clone({
scale: viewportScale,
scale: this.scale * PixelsPerInch.PDF_TO_CSS_UNITS,
rotation: totalRotation,
});
if (this._isStandalone) {
const { style } = document.documentElement;
style.setProperty("--zoom-factor", this.scale);
style.setProperty("--viewport-scale-factor", viewportScale);
}
if (this.svg) {

View File

@ -22,7 +22,6 @@
--page-border: 9px solid transparent;
--spreadHorizontalWrapped-margin-LR: -3.5px;
--zoom-factor: 1;
--viewport-scale-factor: 1;
}
@media screen and (forced-colors: active) {