Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix code duplication in the rasterization logic in test/driver.js

Browse Source 
Now that the rasterization logic is encapsulated in a class, we can
easily move the container creation into a separate static method.
This commit is contained in:
Tim van der Meij 2021-12-05 15:15:31 +01:00
parent 03506f25c0
commit 911a9d34b1
No known key found for this signature in database
GPG Key ID: 8C3FD2925A5F2762
1 changed files with 33 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
test/driver.js
View File

@ -175,6 +175,26 @@ class Rasterize {
return shadow(this, "xfaStylePromise", loadStyles(styles)); return shadow(this, "xfaStylePromise", loadStyles(styles));
} }
static createContainer(viewport) {
const svg = document.createElementNS(SVG_NS, "svg:svg");
svg.setAttribute("width", `${viewport.width}px`);
svg.setAttribute("height", `${viewport.height}px`);
const foreignObject = document.createElementNS(SVG_NS, "svg:foreignObject");
foreignObject.setAttribute("x", "0");
foreignObject.setAttribute("y", "0");
foreignObject.setAttribute("width", `${viewport.width}px`);
foreignObject.setAttribute("height", `${viewport.height}px`);
const style = document.createElement("style");
foreignObject.appendChild(style);
const div = document.createElement("div");
foreignObject.appendChild(div);
return { svg, foreignObject, style, div };
}
static async annotationLayer( static async annotationLayer(
ctx, ctx,
viewport, viewport,
@ -185,36 +205,20 @@ class Rasterize {
renderForms = false renderForms = false
) { ) {
try { try {
// Building SVG with size of the viewport. const { svg, foreignObject, style, div } = this.createContainer(viewport);
const svg = document.createElementNS(SVG_NS, "svg:svg");
svg.setAttribute("width", viewport.width + "px");
svg.setAttribute("height", viewport.height + "px");
// Adding element to host our HTML (style + annotation layer div).
const foreignObject = document.createElementNS(
SVG_NS,
"svg:foreignObject"
);
foreignObject.setAttribute("x", "0");
foreignObject.setAttribute("y", "0");
foreignObject.setAttribute("width", viewport.width + "px");
foreignObject.setAttribute("height", viewport.height + "px");
const style = document.createElement("style");
foreignObject.appendChild(style);
const div = document.createElement("div");
div.className = "annotationLayer"; div.className = "annotationLayer";
// Rendering annotation layer as HTML.
const [common, overrides] = await this.annotationStylePromise; const [common, overrides] = await this.annotationStylePromise;
style.textContent = common + "\n" + overrides; style.textContent = `${common}\n${overrides}`;
const annotation_viewport = viewport.clone({ dontFlip: true }); const annotationViewport = viewport.clone({ dontFlip: true });
const annotationImageMap = await convertCanvasesToImages( const annotationImageMap = await convertCanvasesToImages(
annotationCanvasMap annotationCanvasMap
); );
// Rendering annotation layer as HTML.
const parameters = { const parameters = {
viewport: annotation_viewport, viewport: annotationViewport,
div, div,
annotations, annotations,
page, page,
@ -238,27 +242,11 @@ class Rasterize {
static async textLayer(ctx, viewport, textContent, enhanceTextSelection) { static async textLayer(ctx, viewport, textContent, enhanceTextSelection) {
try { try {
// Building SVG with size of the viewport. const { svg, foreignObject, style, div } = this.createContainer(viewport);
const svg = document.createElementNS(SVG_NS, "svg:svg");
svg.setAttribute("width", viewport.width + "px");
svg.setAttribute("height", viewport.height + "px");
// items are transformed to have 1px font size
svg.setAttribute("font-size", 1);
// Adding element to host our HTML (style + text layer div).
const foreignObject = document.createElementNS(
SVG_NS,
"svg:foreignObject"
);
foreignObject.setAttribute("x", "0");
foreignObject.setAttribute("y", "0");
foreignObject.setAttribute("width", viewport.width + "px");
foreignObject.setAttribute("height", viewport.height + "px");
const style = document.createElement("style");
foreignObject.appendChild(style);
const div = document.createElement("div");
div.className = "textLayer"; div.className = "textLayer";
foreignObject.appendChild(div);
// Items are transformed to have 1px font size.
svg.setAttribute("font-size", 1);
const [cssRules] = await this.textStylePromise; const [cssRules] = await this.textStylePromise;
style.textContent = cssRules; style.textContent = cssRules;
@ -290,26 +278,12 @@ class Rasterize {
isPrint isPrint
) { ) {
try { try {
// Building SVG with size of the viewport. const { svg, foreignObject, style, div } = this.createContainer(viewport);
const svg = document.createElementNS(SVG_NS, "svg:svg");
svg.setAttribute("width", viewport.width + "px");
svg.setAttribute("height", viewport.height + "px");
const foreignObject = document.createElementNS(
SVG_NS,
"svg:foreignObject"
);
foreignObject.setAttribute("x", "0");
foreignObject.setAttribute("y", "0");
foreignObject.setAttribute("width", viewport.width + "px");
foreignObject.setAttribute("height", viewport.height + "px");
const style = document.createElement("style");
foreignObject.appendChild(style);
const div = document.createElement("div");
foreignObject.appendChild(div);
const [common, overrides] = await this.xfaStylePromise; const [common, overrides] = await this.xfaStylePromise;
style.textContent = fontRules + "\n" + common + "\n" + overrides; style.textContent = `${fontRules}\n${common}\n${overrides}`;
// Rendering XFA layer as HTML.
XfaLayer.render({ XfaLayer.render({
xfa, xfa,
div, div,
@ -319,8 +293,7 @@ class Rasterize {
intent: isPrint ? "print" : "display", intent: isPrint ? "print" : "display",
}); });
// Some unsupported type of images (e.g. tiff) // Some unsupported type of images (e.g. tiff) lead to errors.
// lead to errors.
await resolveImages(div, /* silentErrors = */ true); await resolveImages(div, /* silentErrors = */ true);
svg.appendChild(foreignObject); svg.appendChild(foreignObject);