mirror of
https://github.com/mozilla/pdf.js.git
synced 2025-04-28 23:28:16 +02:00
XFA - Fix lot of layout issues
- I thought it was possible to rely on browser layout engine to handle layout stuff but it isn't possible
- mainly because when a contentArea overflows, we must continue to layout in the next contentArea
- when no more contentArea is available then we must go to the next page...
- we must handle breakBefore and breakAfter which allows to "break" the layout to go to the next container
- Sometimes some containers don't provide their dimensions so we must compute them in order to know where to put
them in their parents but to compute those dimensions we need to layout the container itself...
- See top of file layout.js for more explanations about layout.
- fix few bugs in other places I met during my work on layout.
This commit is contained in:
Calixte Denizet
parent
3538ef017f
commit
7cebdbd58c
14 changed files with 2019 additions and 366 deletions
|
|
@ -13,18 +13,38 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { $extra, $getParent, $toStyle, XFAObject } from "./xfa_object.js";
|
||||
import {
|
||||
$extra,
|
||||
$getParent,
|
||||
$nodeName,
|
||||
$toStyle,
|
||||
XFAObject,
|
||||
} from "./xfa_object.js";
|
||||
import { getMeasurement } from "./utils.js";
|
||||
import { warn } from "../../shared/util.js";
|
||||
|
||||
const wordNonWordRegex = new RegExp(
|
||||
"([\\p{N}\\p{L}\\p{M}]+)|([^\\p{N}\\p{L}\\p{M}]+)",
|
||||
"gu"
|
||||
);
|
||||
const wordFirstRegex = new RegExp("^[\\p{N}\\p{L}\\p{M}]", "u");
|
||||
|
||||
function measureToString(m) {
|
||||
if (typeof m === "string") {
|
||||
return "0px";
|
||||
}
|
||||
|
||||
return Number.isInteger(m) ? `${m}px` : `${m.toFixed(2)}px`;
|
||||
}
|
||||
|
||||
const converters = {
|
||||
anchorType(node, style) {
|
||||
const parent = node[$getParent]();
|
||||
if (!parent || (parent.layout && parent.layout !== "position")) {
|
||||
// anchorType is only used in a positioned layout.
|
||||
return;
|
||||
}
|
||||
|
||||
if (!("transform" in style)) {
|
||||
style.transform = "";
|
||||
}
|
||||
|
|
@ -57,12 +77,28 @@ const converters = {
|
|||
},
|
||||
dimensions(node, style) {
|
||||
const parent = node[$getParent]();
|
||||
const extra = parent[$extra];
|
||||
let width = node.w;
|
||||
if (extra && extra.columnWidths) {
|
||||
width = extra.columnWidths[extra.currentColumn];
|
||||
extra.currentColumn =
|
||||
(extra.currentColumn + 1) % extra.columnWidths.length;
|
||||
const height = node.h;
|
||||
if (parent.layout && parent.layout.includes("row")) {
|
||||
const extra = parent[$extra];
|
||||
const colSpan = node.colSpan;
|
||||
let w;
|
||||
if (colSpan === -1) {
|
||||
w = extra.columnWidths
|
||||
.slice(extra.currentColumn)
|
||||
.reduce((a, x) => a + x, 0);
|
||||
extra.currentColumn = 0;
|
||||
} else {
|
||||
w = extra.columnWidths
|
||||
.slice(extra.currentColumn, extra.currentColumn + colSpan)
|
||||
.reduce((a, x) => a + x, 0);
|
||||
extra.currentColumn =
|
||||
(extra.currentColumn + node.colSpan) % extra.columnWidths.length;
|
||||
}
|
||||
|
||||
if (!isNaN(w)) {
|
||||
width = node.w = w;
|
||||
}
|
||||
}
|
||||
|
||||
if (width !== "") {
|
||||
|
|
@ -72,17 +108,21 @@ const converters = {
|
|||
if (node.maxW > 0) {
|
||||
style.maxWidth = measureToString(node.maxW);
|
||||
}
|
||||
style.minWidth = measureToString(node.minW);
|
||||
if (parent.layout === "position") {
|
||||
style.minWidth = measureToString(node.minW);
|
||||
}
|
||||
}
|
||||
|
||||
if (node.h !== "") {
|
||||
style.height = measureToString(node.h);
|
||||
if (height !== "") {
|
||||
style.height = measureToString(height);
|
||||
} else {
|
||||
style.height = "auto";
|
||||
if (node.maxH > 0) {
|
||||
style.maxHeight = measureToString(node.maxH);
|
||||
}
|
||||
style.minHeight = measureToString(node.minH);
|
||||
if (parent.layout === "position") {
|
||||
style.minHeight = measureToString(node.minH);
|
||||
}
|
||||
}
|
||||
},
|
||||
position(node, style) {
|
||||
|
|
@ -118,22 +158,31 @@ const converters = {
|
|||
}
|
||||
},
|
||||
hAlign(node, style) {
|
||||
switch (node.hAlign) {
|
||||
case "justifyAll":
|
||||
style.textAlign = "justify-all";
|
||||
break;
|
||||
case "radix":
|
||||
// TODO: implement this correctly !
|
||||
style.textAlign = "left";
|
||||
break;
|
||||
default:
|
||||
style.textAlign = node.hAlign;
|
||||
if (node[$nodeName] === "para") {
|
||||
switch (node.hAlign) {
|
||||
case "justifyAll":
|
||||
style.textAlign = "justify-all";
|
||||
break;
|
||||
case "radix":
|
||||
// TODO: implement this correctly !
|
||||
style.textAlign = "left";
|
||||
break;
|
||||
default:
|
||||
style.textAlign = node.hAlign;
|
||||
}
|
||||
} else {
|
||||
switch (node.hAlign) {
|
||||
case "right":
|
||||
case "center":
|
||||
style.justifyContent = node.hAlign;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
borderMarginPadding(node, style) {
|
||||
// Get border width in order to compute margin and padding.
|
||||
const borderWidths = [0, 0, 0, 0];
|
||||
const marginWidths = [0, 0, 0, 0];
|
||||
const borderInsets = [0, 0, 0, 0];
|
||||
const marginNode = node.margin
|
||||
? [
|
||||
node.margin.topInset,
|
||||
|
|
@ -142,30 +191,211 @@ const converters = {
|
|||
node.margin.leftInset,
|
||||
]
|
||||
: [0, 0, 0, 0];
|
||||
|
||||
let borderMargin;
|
||||
if (node.border) {
|
||||
Object.assign(style, node.border[$toStyle](borderWidths, marginWidths));
|
||||
Object.assign(style, node.border[$toStyle](borderWidths, borderInsets));
|
||||
borderMargin = style.margin;
|
||||
delete style.margin;
|
||||
}
|
||||
|
||||
if (borderWidths.every(x => x === 0)) {
|
||||
// No border: margin & padding are padding
|
||||
if (node.margin) {
|
||||
Object.assign(style, node.margin[$toStyle]());
|
||||
if (marginNode.every(x => x === 0)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// No border: margin & padding are padding
|
||||
Object.assign(style, node.margin[$toStyle]());
|
||||
style.padding = style.margin;
|
||||
delete style.margin;
|
||||
} else {
|
||||
style.padding =
|
||||
measureToString(marginNode[0] - borderWidths[0] - marginWidths[0]) +
|
||||
" " +
|
||||
measureToString(marginNode[1] - borderWidths[1] - marginWidths[1]) +
|
||||
" " +
|
||||
measureToString(marginNode[2] - borderWidths[2] - marginWidths[2]) +
|
||||
" " +
|
||||
measureToString(marginNode[3] - borderWidths[3] - marginWidths[3]);
|
||||
delete style.outline;
|
||||
delete style.outlineOffset;
|
||||
return;
|
||||
}
|
||||
|
||||
if (node.margin) {
|
||||
Object.assign(style, node.margin[$toStyle]());
|
||||
style.padding = style.margin;
|
||||
delete style.margin;
|
||||
}
|
||||
|
||||
if (!style.borderWidth) {
|
||||
// We've an outline so no need to fake one.
|
||||
return;
|
||||
}
|
||||
|
||||
style.borderData = {
|
||||
borderWidth: style.borderWidth,
|
||||
borderColor: style.borderColor,
|
||||
borderStyle: style.borderStyle,
|
||||
margin: borderMargin,
|
||||
};
|
||||
|
||||
delete style.borderWidth;
|
||||
delete style.borderColor;
|
||||
delete style.borderStyle;
|
||||
},
|
||||
};
|
||||
|
||||
function layoutText(text, fontSize, space) {
|
||||
// Try to guess width and height for the given text in taking into
|
||||
// account the space where the text should fit.
|
||||
// The computed dimensions are just an overestimation.
|
||||
// TODO: base this estimation on real metrics.
|
||||
let width = 0;
|
||||
let height = 0;
|
||||
let totalWidth = 0;
|
||||
const lineHeight = fontSize * 1.5;
|
||||
const averageCharSize = fontSize * 0.4;
|
||||
const maxCharOnLine = Math.floor(space.width / averageCharSize);
|
||||
const chunks = text.match(wordNonWordRegex);
|
||||
let treatedChars = 0;
|
||||
|
||||
let i = 0;
|
||||
let chunk = chunks[0];
|
||||
while (chunk) {
|
||||
const w = chunk.length * averageCharSize;
|
||||
if (width + w <= space.width) {
|
||||
width += w;
|
||||
treatedChars += chunk.length;
|
||||
chunk = chunks[i++];
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!wordFirstRegex.test(chunk) || chunk.length > maxCharOnLine) {
|
||||
const numOfCharOnLine = Math.floor(
|
||||
(space.width - width) / averageCharSize
|
||||
);
|
||||
chunk = chunk.slice(numOfCharOnLine);
|
||||
treatedChars += numOfCharOnLine;
|
||||
if (height + lineHeight > space.height) {
|
||||
return { width: 0, height: 0, splitPos: treatedChars };
|
||||
}
|
||||
totalWidth = Math.max(width, totalWidth);
|
||||
width = 0;
|
||||
height += lineHeight;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (height + lineHeight > space.height) {
|
||||
return { width: 0, height: 0, splitPos: treatedChars };
|
||||
}
|
||||
|
||||
totalWidth = Math.max(width, totalWidth);
|
||||
width = w;
|
||||
height += lineHeight;
|
||||
chunk = chunks[i++];
|
||||
}
|
||||
|
||||
if (totalWidth === 0) {
|
||||
totalWidth = width;
|
||||
}
|
||||
|
||||
if (totalWidth !== 0) {
|
||||
height += lineHeight;
|
||||
}
|
||||
|
||||
return { width: totalWidth, height, splitPos: -1 };
|
||||
}
|
||||
|
||||
function computeBbox(node, html, availableSpace) {
|
||||
let bbox;
|
||||
if (node.w !== "" && node.h !== "") {
|
||||
bbox = [node.x, node.y, node.w, node.h];
|
||||
} else {
|
||||
if (!availableSpace) {
|
||||
return null;
|
||||
}
|
||||
let width = node.w;
|
||||
if (width === "") {
|
||||
if (node.maxW === 0) {
|
||||
const parent = node[$getParent]();
|
||||
if (parent.layout === "position" && parent.w !== "") {
|
||||
width = 0;
|
||||
} else {
|
||||
width = node.minW;
|
||||
}
|
||||
} else {
|
||||
width = Math.min(node.maxW, availableSpace.width);
|
||||
}
|
||||
html.attributes.style.width = measureToString(width);
|
||||
}
|
||||
|
||||
let height = node.h;
|
||||
if (height === "") {
|
||||
if (node.maxH === 0) {
|
||||
const parent = node[$getParent]();
|
||||
if (parent.layout === "position" && parent.h !== "") {
|
||||
height = 0;
|
||||
} else {
|
||||
height = node.minH;
|
||||
}
|
||||
} else {
|
||||
height = Math.min(node.maxH, availableSpace.height);
|
||||
}
|
||||
html.attributes.style.height = measureToString(height);
|
||||
}
|
||||
|
||||
bbox = [node.x, node.y, width, height];
|
||||
}
|
||||
return bbox;
|
||||
}
|
||||
|
||||
function fixDimensions(node) {
|
||||
const parent = node[$getParent]();
|
||||
if (parent.layout && parent.layout.includes("row")) {
|
||||
const extra = parent[$extra];
|
||||
const colSpan = node.colSpan;
|
||||
let width;
|
||||
if (colSpan === -1) {
|
||||
width = extra.columnWidths
|
||||
.slice(extra.currentColumn)
|
||||
.reduce((a, w) => a + w, 0);
|
||||
} else {
|
||||
width = extra.columnWidths
|
||||
.slice(extra.currentColumn, extra.currentColumn + colSpan)
|
||||
.reduce((a, w) => a + w, 0);
|
||||
}
|
||||
if (!isNaN(width)) {
|
||||
node.w = width;
|
||||
}
|
||||
}
|
||||
|
||||
if (parent.w && node.w) {
|
||||
node.w = Math.min(parent.w, node.w);
|
||||
}
|
||||
|
||||
if (parent.h && node.h) {
|
||||
node.h = Math.min(parent.h, node.h);
|
||||
}
|
||||
|
||||
if (parent.layout && parent.layout !== "position") {
|
||||
// Useless in this context.
|
||||
node.x = node.y = 0;
|
||||
if (parent.layout === "tb") {
|
||||
if (
|
||||
parent.w !== "" &&
|
||||
(node.w === "" || node.w === 0 || node.w > parent.w)
|
||||
) {
|
||||
node.w = parent.w;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (node.layout === "position") {
|
||||
// Acrobat doesn't take into account min, max values
|
||||
// for containers with positioned layout (which makes sense).
|
||||
node.minW = node.minH = 0;
|
||||
node.maxW = node.maxH = Infinity;
|
||||
} else {
|
||||
if (node.layout === "table") {
|
||||
if (node.w === "" && Array.isArray(node.columnWidths)) {
|
||||
node.w = node.columnWidths.reduce((a, x) => a + x, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function layoutClass(node) {
|
||||
switch (node.layout) {
|
||||
case "position":
|
||||
|
|
@ -211,26 +441,145 @@ function toStyle(node, ...names) {
|
|||
return style;
|
||||
}
|
||||
|
||||
function addExtraDivForMargin(html) {
|
||||
function addExtraDivForBorder(html) {
|
||||
const style = html.attributes.style;
|
||||
if (style.margin) {
|
||||
const padding = style.margin;
|
||||
delete style.margin;
|
||||
const width = style.width || "auto";
|
||||
const height = style.height || "auto";
|
||||
const data = style.borderData;
|
||||
const children = [];
|
||||
|
||||
style.width = "100%";
|
||||
style.height = "100%";
|
||||
const attributes = {
|
||||
class: "xfaWrapper",
|
||||
style: Object.create(null),
|
||||
};
|
||||
|
||||
return {
|
||||
for (const key of ["top", "left"]) {
|
||||
if (style[key] !== undefined) {
|
||||
attributes.style[key] = style[key];
|
||||
}
|
||||
}
|
||||
|
||||
delete style.top;
|
||||
delete style.left;
|
||||
|
||||
if (style.position === "absolute") {
|
||||
attributes.style.position = "absolute";
|
||||
} else {
|
||||
attributes.style.position = "relative";
|
||||
}
|
||||
delete style.position;
|
||||
|
||||
if (style.justifyContent) {
|
||||
attributes.style.justifyContent = style.justifyContent;
|
||||
delete style.justifyContent;
|
||||
}
|
||||
|
||||
if (data) {
|
||||
delete style.borderData;
|
||||
|
||||
let insets;
|
||||
if (data.margin) {
|
||||
insets = data.margin.split(" ");
|
||||
delete data.margin;
|
||||
} else {
|
||||
insets = ["0px", "0px", "0px", "0px"];
|
||||
}
|
||||
|
||||
let width = "100%";
|
||||
let height = width;
|
||||
|
||||
if (insets[1] !== "0px" || insets[3] !== "0px") {
|
||||
width = `calc(100% - ${parseInt(insets[1]) + parseInt(insets[3])}px`;
|
||||
}
|
||||
|
||||
if (insets[0] !== "0px" || insets[2] !== "0px") {
|
||||
height = `calc(100% - ${parseInt(insets[0]) + parseInt(insets[2])}px`;
|
||||
}
|
||||
|
||||
const borderStyle = {
|
||||
top: insets[0],
|
||||
left: insets[3],
|
||||
width,
|
||||
height,
|
||||
};
|
||||
|
||||
for (const [k, v] of Object.entries(data)) {
|
||||
borderStyle[k] = v;
|
||||
}
|
||||
|
||||
if (style.transform) {
|
||||
borderStyle.transform = style.transform;
|
||||
}
|
||||
|
||||
const borderDiv = {
|
||||
name: "div",
|
||||
attributes: {
|
||||
style: { padding, width, height },
|
||||
class: "xfaBorderDiv",
|
||||
style: borderStyle,
|
||||
},
|
||||
children: [html],
|
||||
};
|
||||
|
||||
children.push(borderDiv);
|
||||
}
|
||||
return html;
|
||||
|
||||
children.push(html);
|
||||
|
||||
return {
|
||||
name: "div",
|
||||
attributes,
|
||||
children,
|
||||
};
|
||||
}
|
||||
|
||||
export { addExtraDivForMargin, layoutClass, measureToString, toStyle };
|
||||
function fixTextIndent(styles) {
|
||||
const indent = getMeasurement(styles.textIndent, "0px");
|
||||
if (indent >= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const align = styles.textAlign || "left";
|
||||
if (align === "left" || align === "right") {
|
||||
const name = "margin" + (align === "left" ? "Left" : "Right");
|
||||
const margin = getMeasurement(styles[name], "0px");
|
||||
styles[name] = `${margin - indent}pt`;
|
||||
}
|
||||
}
|
||||
|
||||
function getFonts(family) {
|
||||
if (family.startsWith("'")) {
|
||||
family = `"${family.slice(1, family.length - 1)}"`;
|
||||
} else if (family.includes(" ") && !family.startsWith('"')) {
|
||||
family = `"${family}"`;
|
||||
}
|
||||
|
||||
// TODO in case Myriad is not available we should generate a new
|
||||
// font based on helvetica but where glyphs have been rescaled in order
|
||||
// to have the exact same metrics.
|
||||
const fonts = [family];
|
||||
switch (family) {
|
||||
case `"Myriad Pro"`:
|
||||
fonts.push(
|
||||
`"Roboto Condensed"`,
|
||||
`"Ubuntu Condensed"`,
|
||||
`"Microsoft Sans Serif"`,
|
||||
`"Apple Symbols"`,
|
||||
"Helvetica",
|
||||
`"sans serif"`
|
||||
);
|
||||
break;
|
||||
case "Arial":
|
||||
fonts.push("Helvetica", `"Liberation Sans"`, "Arimo", `"sans serif"`);
|
||||
break;
|
||||
}
|
||||
return fonts.join(",");
|
||||
}
|
||||
|
||||
export {
|
||||
addExtraDivForBorder,
|
||||
computeBbox,
|
||||
fixDimensions,
|
||||
fixTextIndent,
|
||||
getFonts,
|
||||
layoutClass,
|
||||
layoutText,
|
||||
measureToString,
|
||||
toStyle,
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue