XFA - Display rectangle, line and arc

src/core/xfa/template.js

@@ -79,6 +79,7 @@ import { stringToBytes, Util, warn } from "../../shared/util.js";
 import { searchNode } from "./som.js";
 
 const TEMPLATE_NS_ID = NamespaceIds.template.id;
+const SVG_NS = "http://www.w3.org/2000/svg";
 
 // In case of lr-tb (and rl-tb) layouts, we try:
 // - to put the container at the end of a line
@@ -226,6 +227,50 @@ class Arc extends XFAObject {
  this.edge = null;
  this.fill = null;
  }
+
+ [$toHTML]() {
+ const edge = this.edge ? this.edge : new Edge({});
+ const edgeStyle = edge[$toStyle]();
+ const style = Object.create(null);
+ if (this.fill) {
+ Object.assign(style, this.fill[$toStyle]());
+ } else {
+ style.fill = "transparent";
+ }
+ style.strokeWidth = measureToString(Math.round(edge.thickness));
+ style.stroke = edgeStyle.color;
+ const startAngle = (this.startAngle * Math.PI) / 180;
+ const sweepAngle = (this.sweepAngle * Math.PI) / 180;
+ const arcSweep = this.sweepAngle - this.startAngle <= 180 ? 0 : 1;
+
+ const [x1, y1, x2, y2] = [
+ 0.5 * (1 + Math.cos(startAngle)),
+ 0.5 * (1 + Math.sin(startAngle)),
+ 0.5 * (1 + Math.cos(sweepAngle)),
+ 0.5 * (1 + Math.sin(sweepAngle)),
+ ];
+
+ const arc = {
+ name: "path",
+ attributes: {
+ xmlns: SVG_NS,
+ d: `M ${x1} ${y1} A 0.5 0.5 0 ${arcSweep} 0 ${x2} ${y2} L 0.5 0.5 L ${x1} ${y1}`,
+ style,
+ },
+ };
+
+ return HTMLResult.success({
+ name: "svg",
+ children: [arc],
+ attributes: {
+ xmlns: SVG_NS,
+ style: {
+ width: "100%",
+ height: "100%",
+ },
+ },
+ });
+ }
 }
 
 class Area extends XFAObject {
@@ -1169,7 +1214,7 @@ class Corner extends XFAObject {
  // Maybe it's possible to implement them using svg and border-image...
  // TODO: implement all the missing properties.
  const style = toStyle(this, "visibility");
- style.radius = measureToString(this.radius);
+ style.radius = measureToString(this.join === "square" ? 0 : this.radius);
  return style;
  }
 }
@@ -1484,7 +1529,7 @@ class Draw extends XFAObject {
  }
 
  html.children.push(value);
- if (value.attributes.class.includes("xfaRich")) {
+ if (value.attributes.class && value.attributes.class.includes("xfaRich")) {
  if (this.h === "") {
  style.height = "auto";
  }
@@ -2374,6 +2419,9 @@ class Fill extends XFAObject {
  if (parent instanceof Border) {
  propName = "background";
  }
+ if (parent instanceof Rectangle) {
+ propName = "fill";
+ }
  const style = Object.create(null);
  for (const name of Object.getOwnPropertyNames(this)) {
  if (name === "extras" || name === "color") {
@@ -2848,6 +2896,46 @@ class Line extends XFAObject {
  this.usehref = attributes.usehref || "";
  this.edge = null;
  }
+
+ [$toHTML]() {
+ const edge = this.edge ? this.edge : new Edge({});
+ const edgeStyle = edge[$toStyle]();
+ const style = Object.create(null);
+ style.strokeWidth = measureToString(Math.round(edge.thickness));
+ style.stroke = edgeStyle.color;
+ let x1, y1, x2, y2;
+ if (this.slope === "\\") {
+ [x1, y1, x2, y2] = [0, 0, 1, 1];
+ } else {
+ [x1, y1, x2, y2] = [0, 1, 1, 0];
+ }
+
+ const line = {
+ name: "line",
+ attributes: {
+ xmlns: SVG_NS,
+ width: "100%",
+ height: "100%",
+ x1,
+ y1,
+ x2,
+ y2,
+ style,
+ },
+ };
+
+ return HTMLResult.success({
+ name: "svg",
+ children: [line],
+ attributes: {
+ xmlns: SVG_NS,
+ style: {
+ width: "100%",
+ height: "100%",
+ },
+ },
+ });
+ }
 }
 
 class Linear extends XFAObject {
@@ -3626,6 +3714,50 @@ class Rectangle extends XFAObject {
  this.edge = new XFAObjectArray(4);
  this.fill = null;
  }
+
+ [$toHTML]() {
+ const edge = this.edge.children.length
+ ? this.edge.children[0]
+ : new Edge({});
+ const edgeStyle = edge[$toStyle]();
+ const style = Object.create(null);
+ if (this.fill) {
+ Object.assign(style, this.fill[$toStyle]());
+ } else {
+ style.fill = "transparent";
+ }
+ style.strokeWidth = measureToString(Math.round(edge.thickness));
+ style.stroke = edgeStyle.color;
+
+ const corner = this.corner.children.length
+ ? this.corner.children[0]
+ : new Corner({});
+ const cornerStyle = corner[$toStyle]();
+
+ const rect = {
+ name: "rect",
+ attributes: {
+ xmlns: SVG_NS,
+ width: "100%",
+ height: "100%",
+ rx: cornerStyle.radius,
+ ry: cornerStyle.radius,
+ style,
+ },
+ };
+
+ return HTMLResult.success({
+ name: "svg",
+ children: [rect],
+ attributes: {
+ xmlns: SVG_NS,
+ style: {
+ width: "100%",
+ height: "100%",
+ },
+ },
+ });
+ }
 }
 
 class RefElement extends StringObject {

src/display/xfa_layer.js

@@ -163,7 +163,14 @@ class XfaLayer {
  continue;
  }
 
- const childHtml = document.createElement(name);
+ let childHtml;
+ if (child?.attributes?.xmlns) {
+ childHtml = document.createElementNS(child.attributes.xmlns, name);
+ delete child.attributes.xmlns;
+ } else {
+ childHtml = document.createElement(name);
+ }
+
  html.appendChild(childHtml);
  if (child.attributes) {
  this.setAttributes(childHtml, child, storage, intent);