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

[api-major] Apply the userUnit using CSS, to fix the text/annotation layers (bug 1947248)

Browse source 
Rather than modifying the "raw" dimensions of the page, we'll instead apply the `userUnit` as an *additional* scale-factor via CSS.

*Please note:* It's not clear to me if this solution is fully correct either, or if there's other problems with it, but it at least *appears* to work.

---

With these changes, the following CSS variables are now assumed to be available/set as necessary: `--total-scale-factor`, `--scale-factor`, `--user-unit`, `--scale-round-x`, and `--scale-round-y`.
This commit is contained in:
Jonas Jenwald 2025-02-11 11:55:24 +01:00
parent e3cca6d513
commit bd05b255fa
16 changed files with 237 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/core/xfa/template.js
View file

@ -1421,7 +1421,7 @@ class ChoiceList extends XFAObject {
const field = ui[$getParent]();
const fontSize = field.font?.size || 10;
const optionStyle = {
fontSize: `calc(${fontSize}px * var(--scale-factor))`,
fontSize: `calc(${fontSize}px * var(--total-scale-factor))`,
};
const children = [];

2
src/core/xfa/xhtml.js
View file

@ -179,7 +179,7 @@ function mapStyle(styleStr, node, richText) {
}
if (richText && style.fontSize) {
style.fontSize = `calc(${style.fontSize} * var(--scale-factor))`;
style.fontSize = `calc(${style.fontSize} * var(--total-scale-factor))`;
}
fixTextIndent(style);

10
src/display/annotation_layer.js
View file

@ -297,10 +297,10 @@ class AnnotationElement {
const horizontalRadius = data.borderStyle.horizontalCornerRadius;
const verticalRadius = data.borderStyle.verticalCornerRadius;
if (horizontalRadius > 0 || verticalRadius > 0) {
const radius = `calc(${horizontalRadius}px * var(--scale-factor)) / calc(${verticalRadius}px * var(--scale-factor))`;
const radius = `calc(${horizontalRadius}px * var(--total-scale-factor)) / calc(${verticalRadius}px * var(--total-scale-factor))`;
style.borderRadius = radius;
} else if (this instanceof RadioButtonWidgetAnnotationElement) {
const radius = `calc(${width}px * var(--scale-factor)) / calc(${height}px * var(--scale-factor))`;
const radius = `calc(${width}px * var(--total-scale-factor)) / calc(${height}px * var(--total-scale-factor))`;
style.borderRadius = radius;
}
@ -1194,7 +1194,7 @@ class WidgetAnnotationElement extends AnnotationElement {
roundToOneDecimal(height / LINE_FACTOR)
);
}
style.fontSize = `calc(${computedFontSize}px * var(--scale-factor))`;
style.fontSize = `calc(${computedFontSize}px * var(--total-scale-factor))`;
style.color = Util.makeHexColor(fontColor[0], fontColor[1], fontColor[2]);
@ -1553,7 +1553,7 @@ class TextWidgetAnnotationElement extends WidgetAnnotationElement {
const combWidth = fieldWidth / maxLen;
element.classList.add("comb");
element.style.letterSpacing = `calc(${combWidth}px * var(--scale-factor) - 1ch)`;
element.style.letterSpacing = `calc(${combWidth}px * var(--total-scale-factor) - 1ch)`;
}
} else {
element = document.createElement("div");
@ -2279,7 +2279,7 @@ class PopupElement {
style: {
color: this.#fontColor,
fontSize: this.#fontSize
? `calc(${this.#fontSize}px * var(--scale-factor))`
? `calc(${this.#fontSize}px * var(--total-scale-factor))`
: "",
},
};

11
src/display/display_utils.js
View file

@ -213,8 +213,7 @@ class PageViewport {
* @type {Object}
*/
get rawDims() {
const { userUnit, viewBox } = this;
const dims = viewBox.map(x => x * userUnit);
const dims = this.viewBox;
return shadow(this, "rawDims", {
pageWidth: dims[2] - dims[0],
@ -597,13 +596,13 @@ function setLayerDimensions(
const { style } = div;
const useRound = FeatureTest.isCSSRoundSupported;
const w = `var(--scale-factor) * ${pageWidth}px`,
h = `var(--scale-factor) * ${pageHeight}px`;
const w = `var(--total-scale-factor) * ${pageWidth}px`,
h = `var(--total-scale-factor) * ${pageHeight}px`;
const widthStr = useRound
? `round(down, ${w}, var(--scale-round-x, 1px))`
? `round(down, ${w}, var(--scale-round-x))`
: `calc(${w})`,
heightStr = useRound
? `round(down, ${h}, var(--scale-round-y, 1px))`
? `round(down, ${h}, var(--scale-round-y))`
: `calc(${h})`;
if (!mustFlip || viewport.rotation % 180 === 0) {

6
src/display/editor/freetext.js
View file

@ -209,7 +209,7 @@ class FreeTextEditor extends AnnotationEditor {
*/
#updateFontSize(fontSize) {
const setFontsize = size => {
this.editorDiv.style.fontSize = `calc(${size}px * var(--scale-factor))`;
this.editorDiv.style.fontSize = `calc(${size}px * var(--total-scale-factor))`;
this.translate(0, -(size - this.#fontSize) * this.parentScale);
this.#fontSize = size;
this.#setEditorDimensions();
@ -570,7 +570,7 @@ class FreeTextEditor extends AnnotationEditor {
this.editorDiv.contentEditable = true;
const { style } = this.editorDiv;
style.fontSize = `calc(${this.#fontSize}px * var(--scale-factor))`;
style.fontSize = `calc(${this.#fontSize}px * var(--total-scale-factor))`;
style.color = this.#color;
this.div.append(this.editorDiv);
@ -878,7 +878,7 @@ class FreeTextEditor extends AnnotationEditor {
return content;
}
const { style } = content;
style.fontSize = `calc(${this.#fontSize}px * var(--scale-factor))`;
style.fontSize = `calc(${this.#fontSize}px * var(--total-scale-factor))`;
style.color = this.#color;
content.replaceChildren();

2
src/display/text_layer.js
View file

@ -342,7 +342,7 @@ class TextLayer {
top = tx[5] - fontAscent * Math.cos(angle);
}
const scaleFactorStr = "calc(var(--scale-factor)*";
const scaleFactorStr = "calc(var(--total-scale-factor) *";
const divStyle = textDiv.style;
// Setting the style properties individually, rather than all at once,
// should be OK since the `textDiv` isn't appended to the document yet.