From 7cebdbd58c1bc8ac5825fb5b4f8df762968d2d9e Mon Sep 17 00:00:00 2001 From: Calixte Denizet Date: Wed, 19 May 2021 11:09:21 +0200 Subject: [PATCH] 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. --- src/core/xfa/bind.js | 25 +- src/core/xfa/builder.js | 8 +- src/core/xfa/html_utils.js | 443 +++++++++-- src/core/xfa/layout.js | 190 +++++ src/core/xfa/parser.js | 4 + src/core/xfa/som.js | 25 +- src/core/xfa/template.js | 1376 ++++++++++++++++++++++++++++------ src/core/xfa/utils.js | 17 + src/core/xfa/xfa_object.js | 108 ++- src/core/xfa/xhtml.js | 72 +- src/display/xfa_layer.js | 6 +- test/unit/xfa_parser_spec.js | 2 +- test/unit/xfa_tohtml_spec.js | 24 +- web/xfa_layer_builder.css | 85 ++- 14 files changed, 2019 insertions(+), 366 deletions(-) create mode 100644 src/core/xfa/layout.js diff --git a/src/core/xfa/bind.js b/src/core/xfa/bind.js index 209c837bd..e6f227ebe 100644 --- a/src/core/xfa/bind.js +++ b/src/core/xfa/bind.js @@ -22,6 +22,7 @@ import { $finalize, $getAttributeIt, $getChildren, + $getDataValue, $getParent, $getRealChildrenByNameIt, $global, @@ -88,7 +89,7 @@ class Binder { if (formNode[$hasSettableValue]()) { if (data[$isDataValue]()) { - const value = data[$content].trim(); + const value = data[$getDataValue](); // TODO: use picture. formNode[$setValue](createText(value)); formNode[$data] = data; @@ -114,7 +115,7 @@ class Binder { } } - _findDataByNameToConsume(name, dataNode, global) { + _findDataByNameToConsume(name, isValue, dataNode, global) { if (!name) { return null; } @@ -130,9 +131,16 @@ class Binder { /* allTransparent = */ false, /* skipConsumed = */ true ); - match = generator.next().value; - if (match) { - return match; + // Try to find a match of the same kind. + while (true) { + match = generator.next().value; + if (!match) { + break; + } + + if (isValue === match[$isDataValue]()) { + return match; + } } if ( dataNode[$namespaceId] === NamespaceIds.datasets.id && @@ -149,7 +157,7 @@ class Binder { // Secondly, if global try to find it just under the root of datasets // (which is the location of global variables). - generator = this.datasets[$getRealChildrenByNameIt]( + generator = this.data[$getRealChildrenByNameIt]( name, /* allTransparent = */ false, /* skipConsumed = */ false @@ -478,6 +486,7 @@ class Binder { if (child.bind) { switch (child.bind.match) { case "none": + this._bindElement(child, dataNode); continue; case "global": global = true; @@ -485,6 +494,7 @@ class Binder { case "dataRef": if (!child.bind.ref) { warn(`XFA - ref is empty in node ${child[$nodeName]}.`); + this._bindElement(child, dataNode); continue; } ref = child.bind.ref; @@ -545,6 +555,7 @@ class Binder { while (matches.length < max) { const found = this._findDataByNameToConsume( child.name, + child[$hasSettableValue](), dataNode, global ); @@ -580,6 +591,8 @@ class Binder { } this._bindOccurrences(child, match, picture); } else if (min > 0) { + this._setProperties(child, dataNode); + this._bindItems(child, dataNode); this._bindElement(child, dataNode); } else { uselessNodes.push(child); diff --git a/src/core/xfa/builder.js b/src/core/xfa/builder.js index 511a814bf..89fe62482 100644 --- a/src/core/xfa/builder.js +++ b/src/core/xfa/builder.js @@ -17,6 +17,7 @@ import { $buildXFAObject, NamespaceIds } from "./namespaces.js"; import { $cleanup, $finalize, + $ids, $nsAttributes, $onChild, $resolvePrototypes, @@ -27,13 +28,11 @@ import { Template } from "./template.js"; import { UnknownNamespace } from "./unknown.js"; import { warn } from "../../shared/util.js"; -const _ids = Symbol(); - class Root extends XFAObject { constructor(ids) { super(-1, "root", Object.create(null)); this.element = null; - this[_ids] = ids; + this[$ids] = ids; } [$onChild](child) { @@ -44,7 +43,8 @@ class Root extends XFAObject { [$finalize]() { super[$finalize](); if (this.element.template instanceof Template) { - this.element.template[$resolvePrototypes](this[_ids]); + this.element.template[$resolvePrototypes](this[$ids]); + this.element.template[$ids] = this[$ids]; } } } diff --git a/src/core/xfa/html_utils.js b/src/core/xfa/html_utils.js index 3aa06df08..d20ca1477 100644 --- a/src/core/xfa/html_utils.js +++ b/src/core/xfa/html_utils.js @@ -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, +}; diff --git a/src/core/xfa/layout.js b/src/core/xfa/layout.js new file mode 100644 index 000000000..b7eee56d8 --- /dev/null +++ b/src/core/xfa/layout.js @@ -0,0 +1,190 @@ +/* Copyright 2021 Mozilla Foundation + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { $extra, $flushHTML } from "./xfa_object.js"; +import { measureToString } from "./html_utils.js"; + +// Subform and ExclGroup have a layout so they share these functions. + +/** + * How layout works ? + * + * A container has an initial space (with a width and a height) to fit in, + * which means that once all the children have been added then + * the total width/height must be lower than the given ones in + * the initial space. + * So if the container has known dimensions and these ones are ok with the + * space then continue else we return HTMLResult.FAILURE: it's up to the + * parent to deal with this failure (e.g. if parent layout is lr-tb and + * we fail to add a child at end of line (lr) then we try to add it on the + * next line). + * And then we run through the children, each child gets its initial space + * in calling its parent $getAvailableSpace method + * (see _filteredChildrenGenerator and $childrenToHTML in xfa_object.js) + * then we try to layout child in its space. If everything is ok then we add + * the result to its parent through $addHTML which will recompute the available + * space in parent according to its layout property else we return + * HTMLResult.Failure. + * Before a failure some children may have been layed out: they've been saved in + * [$extra].children and [$extra] has properties generator and failingNode + * in order to save the state where we were before a failure. + * This [$extra].children property is useful when a container has to be splited. + * So if a container is unbreakable, we must delete its [$extra] property before + * returning. + */ + +function flushHTML(node) { + const attributes = node[$extra].attributes; + const html = { + name: "div", + attributes, + children: node[$extra].children, + }; + + if (node[$extra].failingNode) { + const htmlFromFailing = node[$extra].failingNode[$flushHTML](); + if (htmlFromFailing) { + html.children.push(htmlFromFailing); + } + } + + if (html.children.length === 0) { + return null; + } + + node[$extra].children = []; + delete node[$extra].line; + + return html; +} + +function addHTML(node, html, bbox) { + const extra = node[$extra]; + const availableSpace = extra.availableSpace; + + switch (node.layout) { + case "position": { + const [x, y, w, h] = bbox; + extra.width = Math.max(extra.width, x + w); + extra.height = Math.max(extra.height, y + h); + extra.children.push(html); + break; + } + case "lr-tb": + case "rl-tb": + if (!extra.line || extra.attempt === 1) { + extra.line = { + name: "div", + attributes: { + class: node.layout === "lr-tb" ? "xfaLr" : "xfaRl", + }, + children: [], + }; + extra.children.push(extra.line); + } + extra.line.children.push(html); + + if (extra.attempt === 0) { + // Add the element on the line + const [, , w, h] = bbox; + extra.currentWidth += w; + extra.height = Math.max(extra.height, extra.prevHeight + h); + } else { + const [, , w, h] = bbox; + extra.width = Math.max(extra.width, extra.currentWidth); + extra.currentWidth = w; + extra.prevHeight = extra.height; + extra.height += h; + + // The element has been added on a new line so switch to line mode now. + extra.attempt = 0; + } + break; + case "rl-row": + case "row": { + extra.children.push(html); + const [, , w, h] = bbox; + extra.width += w; + extra.height = Math.max(extra.height, h); + const height = measureToString(extra.height); + for (const child of extra.children) { + if (child.attributes.class === "xfaWrapper") { + child.children[child.children.length - 1].attributes.style.height = + height; + } else { + child.attributes.style.height = height; + } + } + break; + } + case "table": { + const [, , w, h] = bbox; + extra.width = Math.min(availableSpace.width, Math.max(extra.width, w)); + extra.height += h; + extra.children.push(html); + break; + } + case "tb": { + const [, , , h] = bbox; + extra.width = availableSpace.width; + extra.height += h; + extra.children.push(html); + break; + } + } +} + +function getAvailableSpace(node) { + const availableSpace = node[$extra].availableSpace; + + switch (node.layout) { + case "lr-tb": + case "rl-tb": + switch (node[$extra].attempt) { + case 0: + return { + width: availableSpace.width - node[$extra].currentWidth, + height: availableSpace.height - node[$extra].prevHeight, + }; + case 1: + return { + width: availableSpace.width, + height: availableSpace.height - node[$extra].height, + }; + default: + return { + width: Infinity, + height: availableSpace.height - node[$extra].prevHeight, + }; + } + case "rl-row": + case "row": + const width = node[$extra].columnWidths + .slice(node[$extra].currentColumn) + .reduce((a, x) => a + x); + return { width, height: availableSpace.height }; + case "table": + case "tb": + return { + width: availableSpace.width, + height: availableSpace.height - node[$extra].height, + }; + case "position": + default: + return availableSpace; + } +} + +export { addHTML, flushHTML, getAvailableSpace }; diff --git a/src/core/xfa/parser.js b/src/core/xfa/parser.js index 5bb7c0010..326cca0a6 100644 --- a/src/core/xfa/parser.js +++ b/src/core/xfa/parser.js @@ -35,6 +35,7 @@ class XFAParser extends XMLParserBase { this._current = this._builder.buildRoot(this._ids); this._errorCode = XMLParserErrorCode.NoError; this._whiteRegex = /^\s+$/; + this._nbsps = /\xa0+/g; } parse(data) { @@ -50,6 +51,9 @@ class XFAParser extends XMLParserBase { } onText(text) { + // Normally by definition a   is unbreakable + // but in real life Acrobat can break strings on  . + text = text.replace(this._nbsps, match => match.slice(1) + " "); if (this._current[$acceptWhitespace]()) { this._current[$onText](text); return; diff --git a/src/core/xfa/som.js b/src/core/xfa/som.js index 3fb2d04f5..9c8a8829c 100644 --- a/src/core/xfa/som.js +++ b/src/core/xfa/som.js @@ -275,19 +275,32 @@ function createDataNode(root, container, expr) { } for (let ii = parsed.length; i < ii; i++) { - const { cacheName, index } = parsed[i]; + const { name, operator, index } = parsed[i]; if (!isFinite(index)) { parsed[i].index = 0; return createNodes(root, parsed.slice(i)); } - const cached = somCache.get(root); - if (!cached) { - warn(`XFA - createDataNode must be called after searchNode.`); - return null; + let children; + switch (operator) { + case operators.dot: + children = root[$getChildrenByName](name, false); + break; + case operators.dotDot: + children = root[$getChildrenByName](name, true); + break; + case operators.dotHash: + children = root[$getChildrenByClass](name); + if (children instanceof XFAObjectArray) { + children = children.children; + } else { + children = [children]; + } + break; + default: + break; } - const children = cached.get(cacheName); if (children.length === 0) { return createNodes(root, parsed.slice(i)); } diff --git a/src/core/xfa/template.js b/src/core/xfa/template.js index e1c836ca5..ef7e89e9f 100644 --- a/src/core/xfa/template.js +++ b/src/core/xfa/template.js @@ -14,21 +14,30 @@ */ import { + $addHTML, $appendChild, + $break, $childrenToHTML, $content, $extra, $finalize, + $flushHTML, + $getAvailableSpace, + $getChildren, + $getNextPage, $getParent, $hasItem, $hasSettableValue, + $ids, $isTransparent, $namespaceId, $nodeName, $onChild, $removeChild, + $searchNode, $setSetAttributes, $setValue, + $text, $toHTML, $toStyle, $uid, @@ -41,11 +50,17 @@ import { } from "./xfa_object.js"; import { $buildXFAObject, NamespaceIds } from "./namespaces.js"; import { - addExtraDivForMargin, + addExtraDivForBorder, + computeBbox, + fixDimensions, + fixTextIndent, + getFonts, layoutClass, + layoutText, measureToString, toStyle, } from "./html_utils.js"; +import { addHTML, flushHTML, getAvailableSpace } from "./layout.js"; import { getBBox, getColor, @@ -56,11 +71,20 @@ import { getRatio, getRelevant, getStringOption, + HTMLResult, } from "./utils.js"; import { stringToBytes, Util, warn } from "../../shared/util.js"; +import { searchNode } from "./som.js"; const TEMPLATE_NS_ID = NamespaceIds.template.id; +// In case of lr-tb (and rl-tb) layouts, we try: +// - to put the container at the end of a line +// - and if it fails we try on the next line. +// If both tries failed then it's up to the parent +// to handle the situation. +const MAX_ATTEMPTS_FOR_LRTB_LAYOUT = 2; + function _setValue(templateNode, value) { if (!templateNode.value) { const nodeValue = new Value({}); @@ -70,6 +94,37 @@ function _setValue(templateNode, value) { templateNode.value[$setValue](value); } +function getRoot(node) { + let parent = node[$getParent](); + while (!(parent instanceof Template)) { + parent = parent[$getParent](); + } + return parent; +} + +const NOTHING = 0; +const NOSPACE = 1; +const VALID = 2; +function checkDimensions(node, space) { + if (node.w !== "" && Math.round(node.w + node.x - space.width) > 1) { + const area = getRoot(node)[$extra].currentContentArea; + if (node.w + node.x > area.w) { + return NOTHING; + } + return NOSPACE; + } + + if (node.h !== "" && Math.round(node.h + node.y - space.height) > 1) { + const area = getRoot(node)[$extra].currentContentArea; + if (node.h + node.y > area.h) { + return NOTHING; + } + + return NOSPACE; + } + return VALID; +} + class AppearanceFilter extends StringObject { constructor(attributes) { super(TEMPLATE_NS_ID, "appearanceFilter"); @@ -113,7 +168,7 @@ class Area extends XFAObject { this.colSpan = getInteger({ data: attributes.colSpan, defaultValue: 1, - validate: n => n >= 1, + validate: n => n >= 1 || n === -1, }); this.id = attributes.id || ""; this.name = attributes.name || ""; @@ -137,10 +192,20 @@ class Area extends XFAObject { return true; } - [$toHTML]() { - // TODO: incomplete. - this[$extra] = Object.create(null); + [$addHTML](html, bbox) { + const [x, y, w, h] = bbox; + this[$extra].width = Math.max(this[$extra].width, x + w); + this[$extra].height = Math.max(this[$extra].height, y + h); + this[$extra].children.push(html); + } + + [$getAvailableSpace]() { + return this[$extra].availableSpace; + } + + [$toHTML](availableSpace) { + // TODO: incomplete. const style = toStyle(this, "position"); const attributes = { style, @@ -152,11 +217,36 @@ class Area extends XFAObject { attributes.xfaName = this.name; } - const children = this[$childrenToHTML]({ - // TODO: exObject & exclGroup - filter: new Set(["area", "draw", "field", "subform", "subformSet"]), - include: true, - }); + const children = []; + this[$extra] = { + children, + width: 0, + height: 0, + availableSpace, + }; + + if ( + !this[$childrenToHTML]({ + filter: new Set([ + "area", + "draw", + "field", + "exclGroup", + "subform", + "subformSet", + ]), + include: true, + }) + ) { + // Nothing to propose for the element which doesn't fit the + // available space. + delete this[$extra]; + // TODO: return failure or not ? + return HTMLResult.empty; + } + + style.width = measureToString(this[$extra].width); + style.height = measureToString(this[$extra].height); const html = { name: "div", @@ -164,7 +254,10 @@ class Area extends XFAObject { children, }; - return html; + const bbox = [this.x, this.y, this[$extra].width, this[$extra].height]; + delete this[$extra]; + + return HTMLResult.success(html, bbox); } } @@ -382,8 +475,8 @@ class BooleanElement extends Option01 { this.usehref = attributes.usehref || ""; } - [$toHTML]() { - return this[$content] === 1; + [$toHTML](availableSpace) { + return HTMLResult.success(this[$content] === 1); } } @@ -419,36 +512,43 @@ class Border extends XFAObject { } } - if (widths) { - for (let i = 0; i < 4; i++) { - widths[i] = edges[i].thickness; - } + widths = widths || [0, 0, 0, 0]; + for (let i = 0; i < 4; i++) { + widths[i] = edges[i].thickness; } - const edgeStyles = edges.map(node => node[$toStyle]()); - const cornerStyles = this.corner.children.map(node => node[$toStyle]()); + margins = margins || [0, 0, 0, 0]; + + const edgeStyles = edges.map(node => { + const style = node[$toStyle](); + style.color = style.color || "#000000"; + return style; + }); let style; if (this.margin) { style = this.margin[$toStyle](); - if (margins) { - margins[0] = this.margin.topInset; - margins[1] = this.margin.rightInset; - margins[2] = this.margin.bottomInset; - margins[3] = this.margin.leftInset; - } + margins[0] = this.margin.topInset; + margins[1] = this.margin.rightInset; + margins[2] = this.margin.bottomInset; + margins[3] = this.margin.leftInset; } else { style = Object.create(null); } + let isForUi = false; + const parent = this[$getParent](); + const grandParent = parent ? parent[$getParent]() : null; + if (grandParent instanceof Ui) { + isForUi = true; + } + if (this.fill) { Object.assign(style, this.fill[$toStyle]()); } - style.borderWidth = edgeStyles.map(s => s.width).join(" "); - style.borderColor = edgeStyles.map(s => s.color).join(" "); - style.borderStyle = edgeStyles.map(s => s.style).join(" "); - - if (cornerStyles.length > 0) { + let hasRadius = false; + if (this.corner.children.some(node => node.radius !== 0)) { + const cornerStyles = this.corner.children.map(node => node[$toStyle]()); if (cornerStyles.length === 2 || cornerStyles.length === 3) { const last = cornerStyles[cornerStyles.length - 1]; for (let i = cornerStyles.length; i < 4; i++) { @@ -457,16 +557,60 @@ class Border extends XFAObject { } style.borderRadius = cornerStyles.map(s => s.radius).join(" "); + hasRadius = true; } - switch (this.presence) { - case "invisible": - case "hidden": - style.borderStyle = ""; - break; - case "inactive": - style.borderStyle = "none"; - break; + const firstEdge = edgeStyles[0]; + if ( + !hasRadius && + (this.edge.children.length <= 1 || + (edgeStyles.every( + x => + x.style === firstEdge.style && + x.width === firstEdge.width && + x.color === firstEdge.color + ) && + margins.every(x => x === margins[0]))) + ) { + // Rectangular border and same values for each edge then we've an outline + // so no need to emulate it. + + let borderStyle; + switch (this.presence) { + case "invisible": + case "hidden": + borderStyle = ""; + break; + case "inactive": + borderStyle = "none"; + break; + default: + borderStyle = firstEdge.style; + break; + } + + style.outline = `${firstEdge.width} ${firstEdge.color} ${borderStyle}`; + const offset = edges[0].thickness + margins[0]; + style.outlineOffset = `-${measureToString(offset)}`; + if (isForUi) { + style.padding = `${measureToString(offset + 1)}`; + } + } else { + switch (this.presence) { + case "invisible": + case "hidden": + style.borderStyle = ""; + break; + case "inactive": + style.borderStyle = "none"; + break; + default: + style.borderStyle = edgeStyles.map(s => s.style).join(" "); + break; + } + + style.borderWidth = edgeStyles.map(s => s.width).join(" "); + style.borderColor = edgeStyles.map(s => s.color).join(" "); } return style; @@ -557,6 +701,11 @@ class BreakBefore extends XFAObject { this.usehref = attributes.usehref || ""; this.script = null; } + + [$toHTML](availableSpace) { + this[$extra] = {}; + return HTMLResult.FAILURE; + } } class Button extends XFAObject { @@ -574,15 +723,16 @@ class Button extends XFAObject { this.extras = null; } - [$toHTML]() { + [$toHTML](availableSpace) { // TODO: highlight. - return { + return HTMLResult.success({ name: "button", attributes: { class: "xfaButton", style: {}, }, - }; + children: [], + }); } } @@ -635,15 +785,15 @@ class Caption extends XFAObject { _setValue(this, value); } - [$toHTML]() { + [$toHTML](availableSpace) { // TODO: incomplete. if (!this.value) { - return null; + return HTMLResult.EMPTY; } - const value = this.value[$toHTML](); + const value = this.value[$toHTML](availableSpace).html; if (!value) { - return null; + return HTMLResult.EMPTY; } const children = []; if (typeof value === "string") { @@ -659,21 +809,30 @@ class Caption extends XFAObject { switch (this.placement) { case "left": case "right": - style.minWidth = measureToString(this.reserve); + if (this.reserve > 0) { + style.width = measureToString(this.reserve); + } else { + style.minWidth = measureToString(this.reserve); + } break; case "top": case "bottom": - style.minHeight = measureToString(this.reserve); + if (this.reserve > 0) { + style.height = measureToString(this.reserve); + } else { + style.minHeight = measureToString(this.reserve); + } break; } - return { + return HTMLResult.success({ name: "div", attributes: { style, + class: "xfaCaption", }, children, - }; + }); } } @@ -730,7 +889,7 @@ class CheckButton extends XFAObject { this.margin = null; } - [$toHTML]() { + [$toHTML](availableSpace) { // TODO: shape and mark == default. const style = toStyle(this, "border", "margin"); const size = measureToString(this.size); @@ -782,19 +941,26 @@ class CheckButton extends XFAObject { style.height = size; } - return { + const input = { + name: "input", + attributes: { + class: "xfaCheckbox", + type: "radio", + }, + }; + + const container = this[$getParent]()[$getParent]()[$getParent](); + if (container instanceof ExclGroup) { + input.attributes.name = container[$uid]; + } + + return HTMLResult.success({ name: "label", attributes: { class: "xfaLabel", }, children: [ - { - name: "input", - attributes: { - class: "xfaCheckbox", - type: "checkbox", - }, - }, + input, { name: "span", attributes: { @@ -804,7 +970,7 @@ class CheckButton extends XFAObject { }, }, ], - }; + }); } } @@ -831,10 +997,40 @@ class ChoiceList extends XFAObject { this.margin = null; } - [$toHTML]() { + [$toHTML](availableSpace) { // TODO: incomplete. const style = toStyle(this, "border", "margin"); - return { + const ui = this[$getParent](); + const field = ui[$getParent](); + const children = []; + + if (field.items.children.length > 0) { + const displayed = field.items.children[0][$toHTML]().html; + const values = field.items.children[1] + ? field.items.children[1][$toHTML]().html + : []; + + for (let i = 0, ii = displayed.length; i < ii; i++) { + children.push({ + name: "option", + attributes: { + value: values[i] || displayed[i], + }, + value: displayed[i], + }); + } + } + + const selectAttributes = { + class: "xfaSelect", + style, + }; + + if (this.open === "multiSelect") { + selectAttributes.multiple = true; + } + + return HTMLResult.success({ name: "label", attributes: { class: "xfaLabel", @@ -842,14 +1038,11 @@ class ChoiceList extends XFAObject { children: [ { name: "select", - attributes: { - class: "xfaSelect", - multiple: this.open === "multiSelect", - style, - }, + children, + attributes: selectAttributes, }, ], - }; + }); } } @@ -860,7 +1053,7 @@ class Color extends XFAObject { this.id = attributes.id || ""; this.use = attributes.use || ""; this.usehref = attributes.usehref || ""; - this.value = getColor(attributes.value); + this.value = attributes.value ? getColor(attributes.value) : ""; this.extras = null; } @@ -869,7 +1062,9 @@ class Color extends XFAObject { } [$toStyle]() { - return Util.makeHexColor(this.value.r, this.value.g, this.value.b); + return this.value + ? Util.makeHexColor(this.value.r, this.value.g, this.value.b) + : null; } } @@ -920,7 +1115,7 @@ class ContentArea extends XFAObject { this.extras = null; } - [$toHTML]() { + [$toHTML](availableSpace) { // TODO: incomplete. const left = measureToString(this.x); const top = measureToString(this.y); @@ -932,7 +1127,7 @@ class ContentArea extends XFAObject { width: measureToString(this.w), height: measureToString(this.h), }; - return { + return HTMLResult.success({ name: "div", children: [], attributes: { @@ -940,7 +1135,7 @@ class ContentArea extends XFAObject { class: "xfaContentarea", id: this[$uid], }, - }; + }); } } @@ -1004,8 +1199,8 @@ class DateElement extends ContentObject { this[$content] = new Date(this[$content].trim()); } - [$toHTML]() { - return this[$content].toString(); + [$toHTML](availableSpace) { + return HTMLResult.success(this[$content].toString()); } } @@ -1022,8 +1217,8 @@ class DateTime extends ContentObject { this[$content] = new Date(this[$content].trim()); } - [$toHTML]() { - return this[$content].toString(); + [$toHTML](availableSpace) { + return HTMLResult.success(this[$content].toString()); } } @@ -1045,7 +1240,7 @@ class DateTimeEdit extends XFAObject { this.margin = null; } - [$toHTML]() { + [$toHTML](availableSpace) { // TODO: incomplete. // When the picker is host we should use type=date for the input // but we need to put the buttons outside the text-field. @@ -1059,13 +1254,13 @@ class DateTimeEdit extends XFAObject { }, }; - return { + return HTMLResult.success({ name: "label", attributes: { class: "xfaLabel", }, children: [html], - }; + }); } } @@ -1093,8 +1288,10 @@ class Decimal extends ContentObject { this[$content] = isNaN(number) ? null : number; } - [$toHTML]() { - return this[$content] !== null ? this[$content].toString() : ""; + [$toHTML](availableSpace) { + return HTMLResult.success( + this[$content] !== null ? this[$content].toString() : "" + ); } } @@ -1170,7 +1367,7 @@ class Draw extends XFAObject { this.colSpan = getInteger({ data: attributes.colSpan, defaultValue: 1, - validate: x => x >= 1, + validate: n => n >= 1 || n === -1, }); this.h = attributes.h ? getMeasurement(attributes.h) : ""; this.hAlign = getStringOption(attributes.hAlign, [ @@ -1224,9 +1421,36 @@ class Draw extends XFAObject { _setValue(this, value); } - [$toHTML]() { - if (!this.value) { - return null; + [$toHTML](availableSpace) { + if ( + this.presence === "hidden" || + this.presence === "inactive" || + this.h === 0 || + this.w === 0 + ) { + return HTMLResult.EMPTY; + } + + fixDimensions(this); + + if (this.w !== "" && this.h === "" && this.value) { + const text = this.value[$text](); + if (text) { + const { height } = layoutText(text, this.font.size, { + width: this.w, + height: Infinity, + }); + this.h = height || ""; + } + } + + switch (checkDimensions(this, availableSpace)) { + case NOTHING: + return HTMLResult.EMPTY; + case NOSPACE: + return HTMLResult.FAILURE; + default: + break; } const style = toStyle( @@ -1256,35 +1480,59 @@ class Draw extends XFAObject { attributes.xfaName = this.name; } - let html = { + const html = { name: "div", attributes, children: [], }; - const value = this.value ? this.value[$toHTML]() : null; + const extra = addExtraDivForBorder(html); + const bbox = computeBbox(this, html, availableSpace); + + const value = this.value ? this.value[$toHTML](availableSpace).html : null; if (value === null) { - return html; + return HTMLResult.success(extra, bbox); } html.children.push(value); + if (value.attributes.class === "xfaRich") { + if (this.h === "") { + style.height = "auto"; + } + if (this.w === "") { + style.width = "auto"; + } + if (this.para) { + // By definition exData are external data so para + // has no effect on it. + attributes.style.display = "flex"; + attributes.style.flexDirection = "column"; + switch (this.para.vAlign) { + case "top": + attributes.style.justifyContent = "start"; + break; + case "bottom": + attributes.style.justifyContent = "end"; + break; + case "middle": + attributes.style.justifyContent = "center"; + break; + } - if (this.para && value.attributes.class === "xfaRich") { - const paraStyle = this.para[$toStyle](); - if (!value.attributes.style) { - value.attributes.style = paraStyle; - } else { - for (const [key, val] of Object.entries(paraStyle)) { - if (!(key in value.attributes.style)) { - value.attributes.style[key] = val; + const paraStyle = this.para[$toStyle](); + if (!value.attributes.style) { + value.attributes.style = paraStyle; + } else { + for (const [key, val] of Object.entries(paraStyle)) { + if (!(key in value.attributes.style)) { + value.attributes.style[key] = val; + } } } } } - html = addExtraDivForMargin(html); - - return html; + return HTMLResult.success(extra, bbox); } } @@ -1310,7 +1558,11 @@ class Edge extends XFAObject { "lowered", "raised", ]); - this.thickness = getMeasurement(attributes.thickness, "0.5pt"); + // Cheat the thickness to have something nice at the end + this.thickness = Math.max( + 1, + Math.round(getMeasurement(attributes.thickness, "0.5pt")) + ); this.use = attributes.use || ""; this.usehref = attributes.usehref || ""; this.color = null; @@ -1322,8 +1574,8 @@ class Edge extends XFAObject { const style = toStyle(this, "visibility"); Object.assign(style, { linecap: this.cap, - width: measureToString(this.thickness), - color: this.color ? this.color[$toHTML]() : "#000000", + width: measureToString(Math.max(1, Math.round(this.thickness))), + color: this.color ? this.color[$toStyle]() : "#000000", style: "", }); @@ -1542,13 +1794,13 @@ class ExData extends ContentObject { return false; } - [$toHTML]() { + [$toHTML](availableSpace) { if (this.contentType !== "text/html" || !this[$content]) { // TODO: fix other cases. - return null; + return HTMLResult.EMPTY; } - return this[$content][$toHTML](); + return this[$content][$toHTML](availableSpace); } } @@ -1602,7 +1854,7 @@ class ExclGroup extends XFAObject { this.colSpan = getInteger({ data: attributes.colSpan, defaultValue: 1, - validate: x => x >= 1, + validate: n => n >= 1 || n === -1, }); this.h = attributes.h ? getMeasurement(attributes.h) : ""; this.hAlign = getStringOption(attributes.hAlign, [ @@ -1683,29 +1935,159 @@ class ExclGroup extends XFAObject { } } - [$toHTML]() { - if (!this.value) { - return null; + [$flushHTML]() { + return flushHTML(this); + } + + [$addHTML](html, bbox) { + addHTML(this, html, bbox); + } + + [$getAvailableSpace]() { + return getAvailableSpace(this); + } + + [$toHTML](availableSpace) { + if ( + this.presence === "hidden" || + this.presence === "inactive" || + this.h === 0 || + this.w === 0 + ) { + return HTMLResult.EMPTY; } - const style = toStyle(this, "dimensions", "position", "anchorType"); + fixDimensions(this); + + const children = []; const attributes = { - style, id: this[$uid], - class: "xfaExclgroup", }; - const children = this[$childrenToHTML]({ - // TODO: exObject & exclGroup - filter: new Set(["field"]), - include: true, + if (!this[$extra]) { + this[$extra] = Object.create(null); + } + + Object.assign(this[$extra], { + children, + attributes, + attempt: 0, + availableSpace, + width: 0, + height: 0, + prevHeight: 0, + currentWidth: 0, }); - return { + switch (checkDimensions(this, availableSpace)) { + case NOTHING: + return HTMLResult.EMPTY; + case NOSPACE: + return HTMLResult.FAILURE; + default: + break; + } + + availableSpace = { + width: this.w === "" ? availableSpace.width : this.w, + height: this.h === "" ? availableSpace.height : this.h, + }; + + const filter = new Set(["field"]); + + if (this.layout === "row") { + const columnWidths = this[$getParent]().columnWidths; + if (Array.isArray(columnWidths) && columnWidths.length > 0) { + this[$extra].columnWidths = columnWidths; + this[$extra].currentColumn = 0; + } + } + + const style = toStyle( + this, + "anchorType", + "dimensions", + "position", + "presence", + "borderMarginPadding", + "hAlign" + ); + const clazz = ["xfaExclgroup"]; + const cl = layoutClass(this); + if (cl) { + clazz.push(cl); + } + + attributes.style = style; + attributes.class = clazz.join(" "); + + if (this.name) { + attributes.xfaName = this.name; + } + + let failure; + if (this.layout === "lr-tb" || this.layout === "rl-tb") { + for ( + ; + this[$extra].attempt < MAX_ATTEMPTS_FOR_LRTB_LAYOUT; + this[$extra].attempt++ + ) { + if ( + this[$childrenToHTML]({ + filter, + include: true, + }) + ) { + break; + } + } + + failure = this[$extra].attempt === 2; + } else { + failure = !this[$childrenToHTML]({ + filter, + include: true, + }); + } + + if (failure) { + return HTMLResult.FAILURE; + } + + let marginH = 0; + let marginV = 0; + if (this.margin) { + marginH = this.margin.leftInset + this.margin.rightInset; + marginV = this.margin.topInset + this.margin.bottomInset; + } + + if (this.w === "") { + style.width = measureToString(this[$extra].width + marginH); + } + if (this.h === "") { + style.height = measureToString(this[$extra].height + marginV); + } + + let html = { name: "div", attributes, children, }; + + html = addExtraDivForBorder(html); + let bbox; + if (this.w !== "" && this.h !== "") { + bbox = [this.x, this.y, this.w, this.h]; + } else { + const width = this.w === "" ? marginH + this[$extra].width : this.w; + const height = this.h === "" ? marginV + this[$extra].height : this.h; + + bbox = [this.x, this.y, width, height]; + } + + delete this[$extra]; + + return HTMLResult.success(html, bbox); } } @@ -1747,6 +2129,10 @@ class Extras extends XFAObject { this.text = new XFAObjectArray(); this.time = new XFAObjectArray(); } + + // (Spec) The XFA template grammar defines the extras and desc elements, + // which can be used to add human-readable or machine-readable + // data to a template. } class Field extends XFAObject { @@ -1773,7 +2159,7 @@ class Field extends XFAObject { this.colSpan = getInteger({ data: attributes.colSpan, defaultValue: 1, - validate: x => x >= 1, + validate: n => n >= 1 || n === -1, }); this.h = attributes.h ? getMeasurement(attributes.h) : ""; this.hAlign = getStringOption(attributes.hAlign, [ @@ -1837,9 +2223,26 @@ class Field extends XFAObject { _setValue(this, value); } - [$toHTML]() { - if (!this.ui) { - return null; + [$toHTML](availableSpace) { + if ( + !this.ui || + this.presence === "hidden" || + this.presence === "inactive" || + this.h === 0 || + this.w === 0 + ) { + return HTMLResult.EMPTY; + } + + fixDimensions(this); + + switch (checkDimensions(this, availableSpace)) { + case NOTHING: + return HTMLResult.EMPTY; + case NOSPACE: + return HTMLResult.FAILURE; + default: + break; } const style = toStyle( @@ -1850,7 +2253,8 @@ class Field extends XFAObject { "rotate", "anchorType", "presence", - "borderMarginPadding" + "borderMarginPadding", + "hAlign" ); const clazz = ["xfaField"]; @@ -1876,9 +2280,12 @@ class Field extends XFAObject { children, }; - const ui = this.ui ? this.ui[$toHTML]() : null; + const bbox = computeBbox(this, html, availableSpace); + html = addExtraDivForBorder(html); + + const ui = this.ui ? this.ui[$toHTML]().html : null; if (!ui) { - return html; + return HTMLResult.success(html, bbox); } if (!ui.attributes.style) { @@ -1886,13 +2293,24 @@ class Field extends XFAObject { } children.push(ui); - if (this.value && ui.name !== "button") { - ui.children[0].attributes.value = this.value[$toHTML]().value; + if (this.value) { + if (this.ui.imageEdit) { + ui.children.push(this.value[$toHTML]().html); + } else if (ui.name !== "button") { + const value = this.value[$toHTML]().html; + if (value) { + if (ui.children[0].name === "textarea") { + ui.children[0].attributes.textContent = value.value; + } else { + ui.children[0].attributes.value = value.value; + } + } + } } - const caption = this.caption ? this.caption[$toHTML]() : null; + const caption = this.caption ? this.caption[$toHTML]().html : null; if (!caption) { - return html; + return HTMLResult.success(html, bbox); } if (ui.name === "button") { @@ -1901,8 +2319,9 @@ class Field extends XFAObject { if (caption.name === "div") { caption.name = "span"; } - ui.children = [caption]; - return html; + ui.children.push(caption); + + return HTMLResult.success(html, bbox); } ui.children.splice(0, 0, caption); @@ -1914,9 +2333,11 @@ class Field extends XFAObject { ui.attributes.style.flexDirection = "row-reverse"; break; case "top": + ui.attributes.style.alignItems = "start"; ui.attributes.style.flexDirection = "column"; break; case "bottom": + ui.attributes.style.alignItems = "start"; ui.attributes.style.flexDirection = "column-reverse"; break; case "inline": @@ -1925,9 +2346,7 @@ class Field extends XFAObject { break; } - html = addExtraDivForMargin(html); - - return html; + return HTMLResult.success(html, bbox); } } @@ -1955,6 +2374,12 @@ class Fill extends XFAObject { } [$toStyle]() { + const parent = this[$getParent](); + let propName = "color"; + if (parent instanceof Border) { + propName = "background"; + } + const style = Object.create(null); for (const name of Object.getOwnPropertyNames(this)) { if (name === "extras" || name === "color") { continue; @@ -1964,18 +2389,15 @@ class Fill extends XFAObject { continue; } - return { - color: obj[$toStyle](this.color), - }; + style[propName] = obj[$toStyle](this.color); + return style; } if (this.color) { - return { - background: this.color[$toStyle](), - }; + style[propName] = this.color[$toStyle](); } - return {}; + return style; } } @@ -2024,8 +2446,10 @@ class Float extends ContentObject { this[$content] = isNaN(number) ? null : number; } - [$toHTML]() { - return this[$content] !== null ? this[$content].toString() : ""; + [$toHTML](availableSpace) { + return HTMLResult.success( + this[$content] !== null ? this[$content].toString() : "" + ); } } @@ -2088,18 +2512,17 @@ class Font extends XFAObject { [$toStyle]() { const style = toStyle(this, "fill"); - const color = style.background; + const color = style.color; if (color) { if (color === "#000000") { - delete style.background; + // Default font color. + delete style.color; } else if (!color.startsWith("#")) { // We've a gradient which is not possible for a font color // so use a workaround. + style.background = color; style.backgroundClip = "text"; style.color = "transparent"; - } else { - style.color = color; - delete style.background; } } @@ -2140,12 +2563,12 @@ class Font extends XFAObject { style.fontStyle = this.posture; } - const fontSize = measureToString(this.size); + const fontSize = measureToString(0.99 * this.size); if (fontSize !== "10px") { style.fontSize = fontSize; } - style.fontFamily = this.typeface; + style.fontFamily = getFonts(this.typeface); if (this.underline !== 0) { style.textDecoration = "underline"; @@ -2253,23 +2676,24 @@ class Image extends StringObject { // containing a picture. // In general, we don't get remote data and use what we have // in the pdf itself, so no picture for non null href. - return null; + return HTMLResult.EMPTY; } + // TODO: Firefox doesn't support natively tiff (and tif) format. if (this.transferEncoding === "base64") { const buffer = stringToBytes(atob(this[$content])); const blob = new Blob([buffer], { type: this.contentType }); - return { + return HTMLResult.success({ name: "img", attributes: { class: "xfaImage", style: {}, src: URL.createObjectURL(blob), }, - }; + }); } - return null; + return HTMLResult.EMPTY; } } @@ -2284,6 +2708,18 @@ class ImageEdit extends XFAObject { this.extras = null; this.margin = null; } + + [$toHTML](availableSpace) { + if (this.data === "embed") { + return HTMLResult.success({ + name: "div", + children: [], + attributes: {}, + }); + } + + return HTMLResult.EMPTY; + } } class Integer extends ContentObject { @@ -2300,8 +2736,10 @@ class Integer extends ContentObject { this[$content] = isNaN(number) ? null : number; } - [$toHTML]() { - return this[$content] !== null ? this[$content].toString() : ""; + [$toHTML](availableSpace) { + return HTMLResult.success( + this[$content] !== null ? this[$content].toString() : "" + ); } } @@ -2355,6 +2793,14 @@ class Items extends XFAObject { ) ); } + + [$toHTML]() { + const output = []; + for (const child of this[$getChildren]()) { + output.push(child[$text]()); + } + return HTMLResult.success(output); + } } class Keep extends XFAObject { @@ -2559,7 +3005,7 @@ class NumericEdit extends XFAObject { this.margin = null; } - [$toHTML]() { + [$toHTML](availableSpace) { // TODO: incomplete. const style = toStyle(this, "border", "font", "margin"); const html = { @@ -2571,13 +3017,13 @@ class NumericEdit extends XFAObject { }, }; - return { + return HTMLResult.success({ name: "label", attributes: { class: "xfaLabel", }, children: [html], - }; + }); } } @@ -2686,39 +3132,68 @@ class PageArea extends XFAObject { this.subform = new XFAObjectArray(); } - [$toHTML]() { - // TODO: incomplete. - if (this.contentArea.children.length === 0) { - return null; + [$getNextPage]() { + if (!this[$extra]) { + this[$extra] = { + numberOfUse: 1, + }; + } + const parent = this[$getParent](); + if (parent.relation === "orderedOccurrence") { + if ( + this.occur && + (this.occur.max === -1 || this[$extra].numberOfUse < this.occur.max) + ) { + this[$extra].numberOfUse += 1; + return this; + } } - const children = this[$childrenToHTML]({ - filter: new Set(["area", "draw", "field", "subform", "contentArea"]), - include: true, - }); + delete this[$extra]; + return parent[$getNextPage](); + } - // TODO: handle the case where there are several content areas. - const contentArea = children.find( - node => node.attributes.class === "xfaContentarea" - ); + [$getAvailableSpace]() { + return { width: Infinity, height: Infinity }; + } + + [$toHTML]() { + // TODO: incomplete. + if (!this[$extra]) { + this[$extra] = { + numberOfUse: 1, + }; + } + + const children = []; + this[$extra].children = children; const style = Object.create(null); if (this.medium && this.medium.short && this.medium.long) { style.width = measureToString(this.medium.short); style.height = measureToString(this.medium.long); + if (this.medium.orientation === "landscape") { + const x = style.width; + style.width = style.height; + style.height = x; + } } else { - // TODO: compute it from contentAreas + warn("XFA - No medium specified in pageArea: please file a bug."); } - return { + this[$childrenToHTML]({ + filter: new Set(["area", "draw", "field", "subform", "contentArea"]), + include: true, + }); + + return HTMLResult.success({ name: "div", children, attributes: { id: this[$uid], style, }, - contentArea, - }; + }); } } @@ -2745,18 +3220,71 @@ class PageSet extends XFAObject { this.pageSet = new XFAObjectArray(); } - [$toHTML]() { - // TODO: incomplete. - return { - name: "div", - children: this[$childrenToHTML]({ - filter: new Set(["pageArea", "pageSet"]), - include: true, - }), - attributes: { - id: this[$uid], - }, - }; + [$getNextPage]() { + if (!this[$extra]) { + this[$extra] = { + numberOfUse: 1, + currentIndex: -1, + }; + } + + if (this.relation === "orderedOccurrence") { + if (this[$extra].currentIndex + 1 < this.pageArea.children.length) { + this[$extra].currentIndex += 1; + return this.pageArea.children[this[$extra].currentIndex]; + } + + if (this[$extra].currentIndex + 1 < this.pageSet.children.length) { + this[$extra].currentIndex += 1; + return this.pageSet.children[this[$extra].currentIndex]; + } + + if ( + this.occur && + (this.occur.max === -1 || this[$extra].numberOfUse < this.occur.max) + ) { + this[$extra].numberOfUse += 1; + this[$extra].currentIndex = 0; + if (this.pageArea.children.length > 0) { + return this.pageArea.children[0]; + } + return this.pageSet.children[0][$getNextPage](); + } + + delete this[$extra]; + const parent = this[$getParent](); + if (parent instanceof PageSet) { + return parent[$getNextPage](); + } + + return this[$getNextPage](); + } + const pageNumber = getRoot(this)[$extra].pageNumber; + const parity = pageNumber % 2 === 0 ? "even" : "odd"; + const position = pageNumber === 0 ? "first" : "rest"; + + let page = this.pageArea.children.find( + p => p.oddOrEven === parity && p.pagePosition === position + ); + if (page) { + return page; + } + + page = this.pageArea.children.find( + p => p.oddOrEven === "any" && p.pagePosition === position + ); + if (page) { + return page; + } + + page = this.pageArea.children.find( + p => p.oddOrEven === "any" && p.pagePosition === "any" + ); + if (page) { + return page; + } + + return this.pageArea.children[0]; } } @@ -2837,11 +3365,10 @@ class Para extends XFAObject { } if (this.textIndent !== "") { style.textIndent = measureToString(this.textIndent); + fixTextIndent(style); } - // TODO: vAlign - - if (this.lineHeight !== "") { + if (this.lineHeight > 0) { style.lineHeight = measureToString(this.lineHeight); } @@ -3272,7 +3799,7 @@ class Subform extends XFAObject { this.colSpan = getInteger({ data: attributes.colSpan, defaultValue: 1, - validate: x => x >= 1, + validate: n => n >= 1 || n === -1, }); this.columnWidths = (attributes.columnWidths || "") .trim() @@ -3356,11 +3883,95 @@ class Subform extends XFAObject { this.subformSet = new XFAObjectArray(); } - [$toHTML]() { - // TODO: incomplete. - this[$extra] = Object.create(null); + [$flushHTML]() { + return flushHTML(this); + } - if (this.layout === "row") { + [$addHTML](html, bbox) { + addHTML(this, html, bbox); + } + + [$getAvailableSpace]() { + return getAvailableSpace(this); + } + + [$toHTML](availableSpace) { + if (this.name === "helpText") { + return HTMLResult.EMPTY; + } + if (this[$extra] && this[$extra].afterBreakAfter) { + const ret = this[$extra].afterBreakAfter; + delete this[$extra]; + return ret; + } + + if (this.presence === "hidden" || this.presence === "inactive") { + return HTMLResult.EMPTY; + } + + if ( + this.breakBefore.children.length > 1 || + this.breakAfter.children.length > 1 + ) { + // Specs are always talking about the breakBefore element + // and it doesn't really make sense to have several ones. + warn( + "XFA - Several breakBefore or breakAfter in subforms: please file a bug." + ); + } + + // TODO: implement usehref (probably in bind.js). + + // TODO: incomplete. + fixDimensions(this); + const children = []; + const attributes = { + id: this[$uid], + }; + + if (!this[$extra]) { + this[$extra] = Object.create(null); + } + + Object.assign(this[$extra], { + children, + attributes, + attempt: 0, + availableSpace, + width: 0, + height: 0, + prevHeight: 0, + currentWidth: 0, + }); + + if (this.breakBefore.children.length >= 1) { + const breakBefore = this.breakBefore.children[0]; + if (!breakBefore[$extra]) { + breakBefore[$extra] = true; + getRoot(this)[$break](breakBefore); + return HTMLResult.FAILURE; + } + } + + switch (checkDimensions(this, availableSpace)) { + case NOTHING: + return HTMLResult.EMPTY; + case NOSPACE: + return HTMLResult.FAILURE; + default: + break; + } + + const filter = new Set([ + "area", + "draw", + "exclGroup", + "field", + "subform", + "subformSet", + ]); + + if (this.layout.includes("row")) { const columnWidths = this[$getParent]().columnWidths; if (Array.isArray(columnWidths) && columnWidths.length > 0) { this[$extra].columnWidths = columnWidths; @@ -3368,62 +3979,98 @@ class Subform extends XFAObject { } } - const parent = this[$getParent](); - let page = null; - if (parent[$nodeName] === "template") { - // Root subform: should have page info. - if (this.pageSet !== null) { - this[$extra].pageNumber = 0; - } else { - // TODO - warn("XFA - No pageSet in root subform"); - } - } else if (parent[$extra] && parent[$extra].pageNumber !== undefined) { - // This subform is a child of root subform - // so push it in a new page. - const pageNumber = parent[$extra].pageNumber; - const pageAreas = parent.pageSet.pageArea.children; - parent[$extra].pageNumber = - (parent[$extra].pageNumber + 1) % pageAreas.length; - page = pageAreas[pageNumber][$toHTML](); - } - - const style = toStyle(this, "dimensions", "position", "presence"); + const style = toStyle( + this, + "anchorType", + "dimensions", + "position", + "presence", + "borderMarginPadding", + "hAlign" + ); const clazz = ["xfaSubform"]; const cl = layoutClass(this); if (cl) { clazz.push(cl); } - const attributes = { - style, - id: this[$uid], - class: clazz.join(" "), - }; + attributes.style = style; + attributes.class = clazz.join(" "); if (this.name) { attributes.xfaName = this.name; } - const children = this[$childrenToHTML]({ - // TODO: exObject & exclGroup - filter: new Set(["area", "draw", "field", "subform", "subformSet"]), - include: true, - }); + let failure; + if (this.layout === "lr-tb" || this.layout === "rl-tb") { + for ( + ; + this[$extra].attempt < MAX_ATTEMPTS_FOR_LRTB_LAYOUT; + this[$extra].attempt++ + ) { + if ( + this[$childrenToHTML]({ + filter, + include: true, + }) + ) { + break; + } + } - const html = { + failure = this[$extra].attempt === 2; + } else { + failure = !this[$childrenToHTML]({ + filter, + include: true, + }); + } + + if (failure) { + return HTMLResult.FAILURE; + } + + let marginH = 0; + let marginV = 0; + if (this.margin) { + marginH = this.margin.leftInset + this.margin.rightInset; + marginV = this.margin.topInset + this.margin.bottomInset; + } + + if (this.w === "") { + style.width = measureToString(this[$extra].width + marginH); + } + if (this.h === "") { + style.height = measureToString(this[$extra].height + marginV); + } + + let html = { name: "div", attributes, children, }; - if (page) { - page.contentArea.children.push(html); - delete page.contentArea; - return page; + html = addExtraDivForBorder(html); + let bbox; + if (this.w !== "" && this.h !== "") { + bbox = [this.x, this.y, this.w, this.h]; + } else { + const width = this.w === "" ? marginH + this[$extra].width : this.w; + const height = this.h === "" ? marginV + this[$extra].height : this.h; + + bbox = [this.x, this.y, width, height]; } - return html; + if (this.breakAfter.children.length >= 1) { + const breakAfter = this.breakAfter.children[0]; + getRoot(this)[$break](breakAfter); + this[$extra].afterBreakAfter = HTMLResult.success(html, bbox); + return HTMLResult.FAILURE; + } + + delete this[$extra]; + + return HTMLResult.success(html, bbox); } } @@ -3451,6 +4098,27 @@ class SubformSet extends XFAObject { this.subform = new XFAObjectArray(); this.subformSet = new XFAObjectArray(); } + + [$toHTML]() { + const children = []; + if (!this[$extra]) { + this[$extra] = Object.create(null); + } + this[$extra].children = children; + + this[$childrenToHTML]({ + filter: new Set(["subform", "subformSet"]), + include: true, + }); + + return HTMLResult.success({ + name: "div", + children, + attributes: { + id: this[$uid], + }, + }); + } } class SubjectDN extends ContentObject { @@ -3557,14 +4225,197 @@ class Template extends XFAObject { } } - [$toHTML]() { - if (this.subform.children.length > 0) { - return this.subform.children[0][$toHTML](); + [$break](node) { + this[$extra].breakingNode = node; + } + + [$searchNode](expr, container) { + if (expr.startsWith("#")) { + // This is an id. + return [this[$ids].get(expr.slice(1))]; } - return { + return searchNode(this, container, expr, true, true); + } + + [$toHTML]() { + if (!this.subform.children.length) { + return HTMLResult.success({ + name: "div", + children: [], + }); + } + + this[$extra] = { + breakingNode: null, + pageNumber: 1, + pagePosition: "first", + oddOrEven: "odd", + blankOrNotBlank: "nonBlank", + }; + + const root = this.subform.children[0]; + const pageAreas = root.pageSet.pageArea.children; + const mainHtml = { name: "div", children: [], }; + + let pageArea = null; + let breakBefore = null; + let breakBeforeTarget = null; + if (root.breakBefore.children.length >= 1) { + breakBefore = root.breakBefore.children[0]; + breakBeforeTarget = breakBefore.target; + } else if ( + root.subform.children.length >= 1 && + root.subform.children[0].breakBefore.children.length >= 1 + ) { + breakBefore = root.subform.children[0].breakBefore.children[0]; + breakBeforeTarget = breakBefore.target; + } else if (root.break && root.break.beforeTarget) { + breakBefore = root.break; + breakBeforeTarget = breakBefore.beforeTarget; + } else if ( + root.subform.children.length >= 1 && + root.subform.children[0].break && + root.subform.children[0].break.beforeTarget + ) { + breakBefore = root.subform.children[0].break; + breakBeforeTarget = breakBefore.beforeTarget; + } + + if (breakBefore) { + const target = this[$searchNode]( + breakBeforeTarget, + breakBefore[$getParent]() + ); + if (target instanceof PageArea) { + pageArea = target; + // Consume breakBefore. + breakBefore[$extra] = {}; + } + } + + if (!pageArea) { + pageArea = pageAreas[0]; + } + + const pageAreaParent = pageArea[$getParent](); + pageAreaParent[$extra] = { + numberOfUse: 1, + currentIndex: pageAreaParent.pageArea.children.indexOf(pageArea), + }; + + let targetPageArea; + let leader = null; + let trailer = null; + + while (true) { + targetPageArea = null; + const page = pageArea[$toHTML]().html; + mainHtml.children.push(page); + + if (leader) { + page.children.push(leader[$toHTML](page[$extra].space).html); + leader = null; + } + + if (trailer) { + page.children.push(trailer[$toHTML](page[$extra].space).html); + trailer = null; + } + + const contentAreas = pageArea.contentArea.children; + const htmlContentAreas = page.children.filter( + node => node.attributes.class === "xfaContentarea" + ); + for (let i = 0, ii = contentAreas.length; i < ii; i++) { + const contentArea = (this[$extra].currentContentArea = contentAreas[i]); + const space = { width: contentArea.w, height: contentArea.h }; + + if (leader) { + htmlContentAreas[i].children.push(leader[$toHTML](space).html); + leader = null; + } + + if (trailer) { + htmlContentAreas[i].children.push(trailer[$toHTML](space).html); + trailer = null; + } + + let html = root[$toHTML](space); + if (html.success) { + if (html.html) { + htmlContentAreas[i].children.push(html.html); + } + return mainHtml; + } + + // Check for breakBefore / breakAfter + let mustBreak = false; + if (this[$extra].breakingNode) { + const node = this[$extra].breakingNode; + this[$extra].breakingNode = null; + + if (node.targetType === "auto") { + // Just ignore the break and do layout again. + i--; + continue; + } + + const startNew = node.startNew === 1; + + if (node.leader) { + leader = this[$searchNode](node.leader, node[$getParent]()); + leader = leader ? leader[0] : null; + } + + if (node.trailer) { + trailer = this[$searchNode](node.trailer, node[$getParent]()); + trailer = trailer ? trailer[0] : null; + } + + let target = null; + if (node.target) { + target = this[$searchNode](node.target, node[$getParent]()); + target = target ? target[0] : target; + } + + if (node.targetType === "pageArea") { + if (startNew) { + mustBreak = true; + } else if (target === pageArea || !(target instanceof PageArea)) { + // Just ignore the break and do layout again. + i--; + continue; + } else { + // We must stop the contentAreas filling and go to the next page. + targetPageArea = target; + mustBreak = true; + } + } else if ( + target === "contentArea" || + !(target instanceof ContentArea) + ) { + // Just ignore the break and do layout again. + i--; + continue; + } + } + + html = root[$flushHTML](); + if (html) { + htmlContentAreas[i].children.push(html); + } + + if (mustBreak) { + break; + } + } + + this[$extra].pageNumber += 1; + pageArea = targetPageArea || pageArea[$getNextPage](); + } } } @@ -3592,7 +4443,7 @@ class Text extends ContentObject { return false; } - [$toHTML]() { + [$toHTML](availableSpace) { if (typeof this[$content] === "string") { // \u2028 is a line separator. // \u2029 is a paragraph separator. @@ -3652,10 +4503,10 @@ class Text extends ContentObject { }); } - return html; + return HTMLResult.success(html); } - return this[$content][$toHTML](); + return this[$content][$toHTML](availableSpace); } } @@ -3691,7 +4542,7 @@ class TextEdit extends XFAObject { this.margin = null; } - [$toHTML]() { + [$toHTML](availableSpace) { // TODO: incomplete. const style = toStyle(this, "border", "font", "margin"); let html; @@ -3714,13 +4565,13 @@ class TextEdit extends XFAObject { }; } - return { + return HTMLResult.success({ name: "label", attributes: { class: "xfaLabel", }, children: [html], - }; + }); } } @@ -3738,8 +4589,8 @@ class Time extends StringObject { this[$content] = new Date(this[$content]); } - [$toHTML]() { - return this[$content].toString(); + [$toHTML](availableSpace) { + return HTMLResult.success(this[$content].toString()); } } @@ -3828,7 +4679,7 @@ class Ui extends XFAObject { this.textEdit = null; } - [$toHTML]() { + [$toHTML](availableSpace) { // TODO: picture. for (const name of Object.getOwnPropertyNames(this)) { if (name === "extras" || name === "picture") { @@ -3839,9 +4690,9 @@ class Ui extends XFAObject { continue; } - return obj[$toHTML](); + return obj[$toHTML](availableSpace); } - return null; + return HTMLResult.EMPTY; } } @@ -3903,6 +4754,17 @@ class Value extends XFAObject { } [$setValue](value) { + const parent = this[$getParent](); + if (parent instanceof Field) { + if (parent.ui && parent.ui.imageEdit) { + if (!this.image) { + this.image = new Image({}); + } + this.image[$content] = value[$content]; + return; + } + } + const valueName = value[$nodeName]; if (this[valueName] !== null) { this[valueName][$content] = value[$content]; @@ -3922,17 +4784,33 @@ class Value extends XFAObject { this[$appendChild](value); } - [$toHTML]() { + [$text]() { + if (this.exData) { + return this.exData[$content][$text]().trim(); + } + for (const name of Object.getOwnPropertyNames(this)) { + if (name === "image") { + continue; + } + const obj = this[name]; + if (obj instanceof XFAObject) { + return (obj[$content] || "").toString().trim(); + } + } + return null; + } + + [$toHTML](availableSpace) { for (const name of Object.getOwnPropertyNames(this)) { const obj = this[name]; if (!(obj instanceof XFAObject)) { continue; } - return obj[$toHTML](); + return obj[$toHTML](availableSpace); } - return null; + return HTMLResult.EMPTY; } } diff --git a/src/core/xfa/utils.js b/src/core/xfa/utils.js index 872fff44f..585ed5464 100644 --- a/src/core/xfa/utils.js +++ b/src/core/xfa/utils.js @@ -18,6 +18,7 @@ const dimConverters = { cm: x => (x / 2.54) * 72, mm: x => (x / (10 * 2.54)) * 72, in: x => x * 72, + px: x => x, }; const measurementPattern = /([+-]?[0-9]+\.?[0-9]*)(.*)/; @@ -163,6 +164,21 @@ function getBBox(data) { return { x, y, width, height }; } +class HTMLResult { + constructor(success, html, bbox) { + this.success = success; + this.html = html; + this.bbox = bbox; + } + + static success(html, bbox = null) { + return new HTMLResult(true, html, bbox); + } +} + +HTMLResult.FAILURE = new HTMLResult(false, null, null); +HTMLResult.EMPTY = new HTMLResult(true, null, null); + export { getBBox, getColor, @@ -173,4 +189,5 @@ export { getRatio, getRelevant, getStringOption, + HTMLResult, }; diff --git a/src/core/xfa/xfa_object.js b/src/core/xfa/xfa_object.js index 8c167a679..4d62c20ea 100644 --- a/src/core/xfa/xfa_object.js +++ b/src/core/xfa/xfa_object.js @@ -13,14 +13,16 @@ * limitations under the License. */ -import { getInteger, getKeyword } from "./utils.js"; +import { getInteger, getKeyword, HTMLResult } from "./utils.js"; import { shadow, warn } from "../../shared/util.js"; import { NamespaceIds } from "./namespaces.js"; // We use these symbols to avoid name conflict between tags // and properties/methods names. const $acceptWhitespace = Symbol(); +const $addHTML = Symbol(); const $appendChild = Symbol(); +const $break = Symbol(); const $childrenToHTML = Symbol(); const $clean = Symbol(); const $cleanup = Symbol(); @@ -31,16 +33,21 @@ const $data = Symbol("data"); const $dump = Symbol(); const $extra = Symbol("extra"); const $finalize = Symbol(); +const $flushHTML = Symbol(); const $getAttributeIt = Symbol(); +const $getAvailableSpace = Symbol(); const $getChildrenByClass = Symbol(); const $getChildrenByName = Symbol(); const $getChildrenByNameIt = Symbol(); +const $getDataValue = Symbol(); const $getRealChildrenByNameIt = Symbol(); const $getChildren = Symbol(); +const $getNextPage = Symbol(); const $getParent = Symbol(); const $global = Symbol(); const $hasItem = Symbol(); const $hasSettableValue = Symbol(); +const $ids = Symbol(); const $indexOf = Symbol(); const $insertAt = Symbol(); const $isDataValue = Symbol(); @@ -55,6 +62,7 @@ const $onChildCheck = Symbol(); const $onText = Symbol(); const $removeChild = Symbol(); const $resolvePrototypes = Symbol(); +const $searchNode = Symbol(); const $setId = Symbol(); const $setSetAttributes = Symbol(); const $setValue = Symbol(); @@ -70,6 +78,7 @@ const _children = Symbol("_children"); const _cloneAttribute = Symbol(); const _dataValue = Symbol(); const _defaultValue = Symbol(); +const _filteredChildrenGenerator = Symbol(); const _getPrototype = Symbol(); const _getUnsetAttributes = Symbol(); const _hasChildren = Symbol(); @@ -270,20 +279,67 @@ class XFAObject { } [$toHTML]() { + return HTMLResult.EMPTY; + } + + *[_filteredChildrenGenerator](filter, include) { + for (const node of this[$getChildren]()) { + if (!filter || include === filter.has(node[$nodeName])) { + const availableSpace = this[$getAvailableSpace](); + const res = node[$toHTML](availableSpace); + if (!res.success) { + this[$extra].failingNode = node; + } + yield res; + } + } + } + + [$flushHTML]() { return null; } + [$addHTML](html, bbox) { + this[$extra].children.push(html); + } + + [$getAvailableSpace]() {} + [$childrenToHTML]({ filter = null, include = true }) { - const res = []; - this[$getChildren]().forEach(node => { - if (!filter || include === filter.has(node[$nodeName])) { - const html = node[$toHTML](); - if (html) { - res.push(html); - } + if (!this[$extra].generator) { + this[$extra].generator = this[_filteredChildrenGenerator]( + filter, + include + ); + } else { + const availableSpace = this[$getAvailableSpace](); + const res = this[$extra].failingNode[$toHTML](availableSpace); + if (!res.success) { + return false; } - }); - return res; + if (res.html) { + this[$addHTML](res.html, res.bbox); + } + delete this[$extra].failingNode; + } + + while (true) { + const gen = this[$extra].generator.next(); + if (gen.done) { + break; + } + const res = gen.value; + if (!res.success) { + return false; + } + if (res.html) { + this[$addHTML](res.html, res.bbox); + } + } + + this[$extra].generator = null; + + return true; } [$setSetAttributes](attributes) { @@ -640,13 +696,13 @@ class XmlObject extends XFAObject { [$toHTML]() { if (this[$nodeName] === "#text") { - return { + return HTMLResult.success({ name: "#text", value: this[$content], - }; + }); } - return null; + return HTMLResult.EMPTY; } [$getChildren](name = null) { @@ -710,11 +766,27 @@ class XmlObject extends XFAObject { [$isDataValue]() { if (this[_dataValue] === null) { - return this[_children].length === 0; + return ( + this[_children].length === 0 || + this[_children][0][$namespaceId] === NamespaceIds.xhtml.id + ); } return this[_dataValue]; } + [$getDataValue]() { + if (this[_dataValue] === null) { + if (this[_children].length === 0) { + return this[$content].trim(); + } + if (this[_children][0][$namespaceId] === NamespaceIds.xhtml.id) { + return this[_children][0][$text]().trim(); + } + return null; + } + return this[$content].trim(); + } + [$dump]() { const dumped = Object.create(null); if (this[$content]) { @@ -811,7 +883,9 @@ class Option10 extends IntegerObject { export { $acceptWhitespace, + $addHTML, $appendChild, + $break, $childrenToHTML, $clean, $cleanup, @@ -822,16 +896,21 @@ export { $dump, $extra, $finalize, + $flushHTML, $getAttributeIt, + $getAvailableSpace, $getChildren, $getChildrenByClass, $getChildrenByName, $getChildrenByNameIt, + $getDataValue, + $getNextPage, $getParent, $getRealChildrenByNameIt, $global, $hasItem, $hasSettableValue, + $ids, $indexOf, $insertAt, $isDataValue, @@ -845,6 +924,7 @@ export { $onText, $removeChild, $resolvePrototypes, + $searchNode, $setId, $setSetAttributes, $setValue, diff --git a/src/core/xfa/xhtml.js b/src/core/xfa/xhtml.js index 3dfdfa997..efa1b8ecd 100644 --- a/src/core/xfa/xhtml.js +++ b/src/core/xfa/xhtml.js @@ -17,6 +17,7 @@ import { $acceptWhitespace, $childrenToHTML, $content, + $extra, $nodeName, $onText, $text, @@ -24,8 +25,8 @@ import { XmlObject, } from "./xfa_object.js"; import { $buildXFAObject, NamespaceIds } from "./namespaces.js"; -import { getMeasurement } from "./utils.js"; -import { measureToString } from "./html_utils.js"; +import { fixTextIndent, getFonts, measureToString } from "./html_utils.js"; +import { getMeasurement, HTMLResult } from "./utils.js"; const XHTML_NS_ID = NamespaceIds.xhtml.id; @@ -79,14 +80,16 @@ const StyleMapping = new Map([ ], ["xfa-spacerun", ""], ["xfa-tab-stops", ""], - ["font-size", value => measureToString(getMeasurement(value))], + ["font-size", value => measureToString(1 * getMeasurement(value))], ["letter-spacing", value => measureToString(getMeasurement(value))], - ["line-height", value => measureToString(getMeasurement(value))], + ["line-height", value => measureToString(0.99 * getMeasurement(value))], ["margin", value => measureToString(getMeasurement(value))], ["margin-bottom", value => measureToString(getMeasurement(value))], ["margin-left", value => measureToString(getMeasurement(value))], ["margin-right", value => measureToString(getMeasurement(value))], ["margin-top", value => measureToString(getMeasurement(value))], + ["text-indent", value => measureToString(getMeasurement(value))], + ["font-family", value => getFonts(value)], ]); const spacesRegExp = /\s+/g; @@ -121,6 +124,8 @@ function mapStyle(styleStr) { newValue; } } + + fixTextIndent(style); return style; } @@ -162,16 +167,27 @@ class XhtmlObject extends XmlObject { } } - [$toHTML]() { - return { + [$toHTML](availableSpace) { + const children = []; + this[$extra] = { + children, + }; + + this[$childrenToHTML]({}); + + if (children.length === 0 && !this[$content]) { + return HTMLResult.EMPTY; + } + + return HTMLResult.success({ name: this[$nodeName], attributes: { href: this.href, style: mapStyle(this.style), }, - children: this[$childrenToHTML]({}), + children, value: this[$content] || "", - }; + }); } } @@ -193,10 +209,15 @@ class Body extends XhtmlObject { super(attributes, "body"); } - [$toHTML]() { - const html = super[$toHTML](); + [$toHTML](availableSpace) { + const res = super[$toHTML](availableSpace); + const { html } = res; + if (!html) { + return HTMLResult.EMPTY; + } + html.name = "div"; html.attributes.class = "xfaRich"; - return html; + return res; } } @@ -209,10 +230,10 @@ class Br extends XhtmlObject { return "\n"; } - [$toHTML]() { - return { + [$toHTML](availableSpace) { + return HTMLResult.success({ name: "br", - }; + }); } } @@ -221,34 +242,39 @@ class Html extends XhtmlObject { super(attributes, "html"); } - [$toHTML]() { - const children = this[$childrenToHTML]({}); + [$toHTML](availableSpace) { + const children = []; + this[$extra] = { + children, + }; + + this[$childrenToHTML]({}); if (children.length === 0) { - return { + return HTMLResult.success({ name: "div", attributes: { class: "xfaRich", style: {}, }, value: this[$content] || "", - }; + }); } if (children.length === 1) { const child = children[0]; if (child.attributes && child.attributes.class === "xfaRich") { - return child; + return HTMLResult.success(child); } } - return { + return HTMLResult.success({ name: "div", attributes: { class: "xfaRich", style: {}, }, children, - }; + }); } } @@ -274,6 +300,10 @@ class P extends XhtmlObject { constructor(attributes) { super(attributes, "p"); } + + [$text]() { + return super[$text]() + "\n"; + } } class Span extends XhtmlObject { diff --git a/src/display/xfa_layer.js b/src/display/xfa_layer.js index 7bd7d3620..5949d5661 100644 --- a/src/display/xfa_layer.js +++ b/src/display/xfa_layer.js @@ -21,7 +21,11 @@ class XfaLayer { } if (key !== "style") { - html.setAttribute(key, value); + if (key === "textContent") { + html.textContent = value; + } else { + html.setAttribute(key, value); + } } else { Object.assign(html.style, value); } diff --git a/test/unit/xfa_parser_spec.js b/test/unit/xfa_parser_spec.js index a83f661e5..603933d7d 100644 --- a/test/unit/xfa_parser_spec.js +++ b/test/unit/xfa_parser_spec.js @@ -332,7 +332,7 @@ describe("XFAParser", function () { [ " The first line of this paragraph is indented a half-inch.\n", " Successive lines are not indented.\n", - " This is the last line of the paragraph.\n ", + " This is the last line of the paragraph.\n \n", ].join("") ); }); diff --git a/test/unit/xfa_tohtml_spec.js b/test/unit/xfa_tohtml_spec.js index ee408a064..7176fe0df 100644 --- a/test/unit/xfa_tohtml_spec.js +++ b/test/unit/xfa_tohtml_spec.js @@ -28,7 +28,7 @@ describe("XFAFactory", function () { - + @@ -43,6 +43,7 @@ describe("XFAFactory", function () { + @@ -73,18 +74,23 @@ describe("XFAFactory", function () { position: "absolute", }); - const draw = page1.children[1]; + const wrapper = page1.children[1]; + const draw = wrapper.children[0]; + + expect(wrapper.attributes.class).toEqual("xfaWrapper"); + expect(wrapper.attributes.style).toEqual({ + left: "2px", + position: "absolute", + top: "1px", + }); + expect(draw.attributes.class).toEqual("xfaDraw xfaFont"); expect(draw.attributes.style).toEqual({ color: "#0c1722", - fontFamily: "Arial", - fontSize: "7px", + fontFamily: "FooBar", + fontSize: "6.93px", height: "22px", - left: "2px", padding: "1px 4px 2px 3px", - position: "absolute", - textAlign: "left", - top: "1px", transform: "rotate(-90deg)", transformOrigin: "top left", verticalAlign: "2px", @@ -93,7 +99,7 @@ describe("XFAFactory", function () { // draw element must be on each page. expect(draw.attributes.style).toEqual( - factory.getPage(1).children[1].attributes.style + factory.getPage(1).children[1].children[0].attributes.style ); }); }); diff --git a/web/xfa_layer_builder.css b/web/xfa_layer_builder.css index ab1deb375..a5e01bdf7 100644 --- a/web/xfa_layer_builder.css +++ b/web/xfa_layer_builder.css @@ -24,6 +24,8 @@ .xfaLayer * { color: inherit; font: inherit; + font-style: inherit; + font-weight: inherit; font-kerning: inherit; letter-spacing: inherit; text-align: inherit; @@ -33,6 +35,14 @@ background: transparent; } +.xfaLayer a { + color: blue; +} + +.xfaRich li { + margin-left: 3em; +} + .xfaFont { color: black; font-weight: normal; @@ -58,6 +68,7 @@ .xfaRich { z-index: 300; + line-height: 1.2; } .xfaSubform { @@ -76,23 +87,52 @@ flex: 1 1 auto; } +.xfaBorderDiv { + background: transparent; + position: absolute; + pointer-events: none; +} + +.xfaWrapper { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: auto; + height: auto; +} + +.xfaContentArea { + overflow: hidden; +} + +.xfaTextfield, +.xfaSelect { + background-color: rgba(0, 54, 255, 0.13); +} + +.xfaTextfield:focus, +.xfaSelect:focus { + background-color: transparent; +} + .xfaTextfield, .xfaSelect { width: 100%; height: 100%; - flex: 1 1 auto; + flex: 100 1 0; border: none; resize: none; } -.xfaLabel > input[type="checkbox"] { +.xfaLabel > input[type="radio"] { /* Use this trick to make the checkbox invisible but but still focusable. */ position: absolute; left: -99999px; } -.xfaLabel > input[type="checkbox"]:focus + .xfaCheckboxMark { +.xfaLabel > input[type="radio"]:focus + .xfaCheckboxMark { box-shadow: 0 0 5px rgba(0, 0, 0, 0.7); } @@ -133,19 +173,48 @@ white-space: pre-wrap; } -.xfaImage, -.xfaRich { +.xfaImage { width: 100%; height: 100%; } -.xfaLrTb, -.xfaRlTb, -.xfaTb, +.xfaRich { + width: 100%; + height: auto; +} + .xfaPosition { display: block; } +.xfaLrTb, +.xfaRlTb, +.xfaTb { + display: flex; + flex-direction: column; + align-items: stretch; +} + +.xfaLr, +.xfaRl, +.xfaTb > div { + flex: 1 1 auto; +} + +.xfaTb > div { + justify-content: left; +} + +.xfaLr > div { + display: inline; + float: left; +} + +.xfaRl > div { + display: inline; + float: right; +} + .xfaPosition { position: relative; }