1
0
Fork 0
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:
calixteman 2021-03-25 13:02:39 +01:00 committed by GitHub
parent 9d0ce6e79f
commit 63471bcbbe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 549 additions and 93 deletions

View file

@ -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 };