mirror of
https://github.com/mozilla/pdf.js.git
synced 2025-04-28 23:28:16 +02:00
XFA - Convert some template properties into CSS ones (#13082)
- implement few positioning properties: position, width, height, anchor; - implement font element; - implement fill element (used by font) and its children (linear, radial, ...); - font property is inherited from ancestor container (see https://www.pdfa.org/wp-content/uploads/2020/07/XFA-3_3.pdf#page=43) so let CSS handles that stuff; - in order to reduce the number of properties to set, only set non default properties and put the default in CSS; - set a background to some containers to be able to see them (will be removed in a future commit).
This commit is contained in:
parent
9d0ce6e79f
commit
63471bcbbe
10 changed files with 549 additions and 93 deletions
|
@ -13,57 +13,108 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
const converters = {
|
||||
pt: x => x,
|
||||
cm: x => Math.round((x / 2.54) * 72),
|
||||
mm: x => Math.round((x / (10 * 2.54)) * 72),
|
||||
in: x => Math.round(x * 72),
|
||||
};
|
||||
import { $toStyle, XFAObject } from "./xfa_object.js";
|
||||
import { warn } from "../../shared/util.js";
|
||||
|
||||
function measureToString(m) {
|
||||
const conv = converters[m.unit];
|
||||
if (conv) {
|
||||
return `${conv(m.value)}px`;
|
||||
}
|
||||
return `${m.value}${m.unit}`;
|
||||
return Number.isInteger(m) ? `${m}px` : `${m.toFixed(2)}px`;
|
||||
}
|
||||
|
||||
function setWidthHeight(node, style) {
|
||||
if (node.w) {
|
||||
style.width = measureToString(node.w);
|
||||
} else {
|
||||
if (node.maxW && node.maxW.value > 0) {
|
||||
style.maxWidth = measureToString(node.maxW);
|
||||
const converters = {
|
||||
anchorType(node, style) {
|
||||
if (!("transform" in style)) {
|
||||
style.transform = "";
|
||||
}
|
||||
if (node.minW && node.minW.value > 0) {
|
||||
style.minWidth = measureToString(node.minW);
|
||||
switch (node.anchorType) {
|
||||
case "bottomCenter":
|
||||
style.transform += "translate(-50%, -100%)";
|
||||
break;
|
||||
case "bottomLeft":
|
||||
style.transform += "translate(0,-100%)";
|
||||
break;
|
||||
case "bottomRight":
|
||||
style.transform += "translate(-100%,-100%)";
|
||||
break;
|
||||
case "middleCenter":
|
||||
style.transform += "translate(-50%,-50%)";
|
||||
break;
|
||||
case "middleLeft":
|
||||
style.transform += "translate(0,-50%)";
|
||||
break;
|
||||
case "middleRight":
|
||||
style.transform += "translate(-100%,-50%)";
|
||||
break;
|
||||
case "topCenter":
|
||||
style.transform += "translate(-50%,0)";
|
||||
break;
|
||||
case "topRight":
|
||||
style.transform += "translate(-100%,0)";
|
||||
break;
|
||||
}
|
||||
},
|
||||
dimensions(node, style) {
|
||||
if (node.w) {
|
||||
style.width = measureToString(node.w);
|
||||
} else {
|
||||
if (node.maxW && node.maxW.value > 0) {
|
||||
style.maxWidth = measureToString(node.maxW);
|
||||
}
|
||||
if (node.minW && node.minW.value > 0) {
|
||||
style.minWidth = measureToString(node.minW);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (node.h) {
|
||||
style.height = measureToString(node.h);
|
||||
} else {
|
||||
if (node.maxH && node.maxH.value > 0) {
|
||||
style.maxHeight = measureToString(node.maxH);
|
||||
if (node.h) {
|
||||
style.height = measureToString(node.h);
|
||||
} else {
|
||||
if (node.maxH && node.maxH.value > 0) {
|
||||
style.maxHeight = measureToString(node.maxH);
|
||||
}
|
||||
if (node.minH && node.minH.value > 0) {
|
||||
style.minHeight = measureToString(node.minH);
|
||||
}
|
||||
}
|
||||
if (node.minH && node.minH.value > 0) {
|
||||
style.minHeight = measureToString(node.minH);
|
||||
},
|
||||
position(node, style) {
|
||||
if (node.x !== "" || node.y !== "") {
|
||||
style.position = "absolute";
|
||||
style.left = measureToString(node.x);
|
||||
style.top = measureToString(node.y);
|
||||
}
|
||||
},
|
||||
rotate(node, style) {
|
||||
if (node.rotate) {
|
||||
if (!("transform" in style)) {
|
||||
style.transform = "";
|
||||
}
|
||||
style.transform += `rotate(-${node.rotate}deg)`;
|
||||
style.transformOrigin = "top left";
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
function toStyle(node, ...names) {
|
||||
const style = Object.create(null);
|
||||
for (const name of names) {
|
||||
const value = node[name];
|
||||
if (value === null) {
|
||||
continue;
|
||||
}
|
||||
if (value instanceof XFAObject) {
|
||||
const newStyle = value[$toStyle]();
|
||||
if (newStyle) {
|
||||
Object.assign(style, newStyle);
|
||||
} else {
|
||||
warn(`(DEBUG) - XFA - style for ${name} not implemented yet`);
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
if (converters.hasOwnProperty(name)) {
|
||||
converters[name](node, style);
|
||||
}
|
||||
}
|
||||
return style;
|
||||
}
|
||||
|
||||
function setPosition(node, style) {
|
||||
style.transform = "";
|
||||
if (node.rotate) {
|
||||
style.transform = `rotate(-${node.rotate}deg) `;
|
||||
style.transformOrigin = "top left";
|
||||
}
|
||||
|
||||
if (node.x !== "" || node.y !== "") {
|
||||
style.position = "absolute";
|
||||
style.left = node.x ? measureToString(node.x) : "0pt";
|
||||
style.top = node.y ? measureToString(node.y) : "0pt";
|
||||
}
|
||||
}
|
||||
|
||||
export { measureToString, setPosition, setWidthHeight };
|
||||
export { measureToString, toStyle };
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue