XFA - Convert some template properties into CSS ones

  - 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).

Author: calixteman

src/core/xfa/html_utils.js

@@ -13,57 +13,122 @@
  * limitations under the License.
  */
 
-const converters = {
+import { $toStyle, XFAObject } from "./xfa_object.js";
+import { warn } from "../../shared/util.js";
+
+const dimConverters = {
   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),
 };
 
 function measureToString(m) {
-  const conv = converters[m.unit];
+  if (!m) {
+    return "0px";
+  }
+  const conv = dimConverters[m.unit];
   if (conv) {
     return `${conv(m.value)}px`;
   }
   return `${m.value}${m.unit}`;
 }
 
-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 setPosition(node, style) {
-  style.transform = "";
-  if (node.rotate) {
-    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 (node.x !== "" || node.y !== "") {
-    style.position = "absolute";
-    style.left = node.x ? measureToString(node.x) : "0pt";
-    style.top = node.y ? measureToString(node.y) : "0pt";
+    if (converters.hasOwnProperty(name)) {
+      converters[name](node, style);
+    }
   }
+  return style;
 }
 
-export { measureToString, setPosition, setWidthHeight };
+export { measureToString, toStyle };