Commit 5bb21e29 authored by Fred Chasen's avatar Fred Chasen

Add orientation handling

parent 7863f956
Pipeline #49 failed with stage
This diff is collapsed.
......@@ -4,6 +4,10 @@ const gs = require('ghostscript4js')
const fs = require('fs');
const rimraf = require('rimraf');
const { DEBUG } = require('./constants');
const CONFIG = {
failureThreshold: '0.01',
failureThresholdType: 'percent'
};
function toMatchPDFSnapshot(received, page=1) {
let pdfImage;
......@@ -30,7 +34,7 @@ function toMatchPDFSnapshot(received, page=1) {
throw err
}
return toMatchImageSnapshot.apply(this, [pdfImage])
return toMatchImageSnapshot.apply(this, [pdfImage, CONFIG])
}
export function UUID() {
......
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
Landscape
</title>
<script src="../../../../dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: A5 landscape;
margin: 20mm 20mm;
}
@media screen {
.pagedjs_page {
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
}
}
</style>
</head>
<body>
<section>
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo. In convallis convallis leo, eget molestie metus imperdiet eu. Praesent pharetra, leo a laoreet mattis, ligula nisl commodo ante, non vestibulum nisi lacus eget magna. Maecenas scelerisque nibh ac felis egestas, egestas elementum risus pellentesque. Nulla iaculis ut leo a iaculis. Donec vel sodales dolor, vel fringilla elit. Vivamus aliquam diam eu maximus elementum. Integer eu urna at felis fermentum hendrerit.
</p>
<p>
Nulla dignissim pellentesque magna ac maximus. Integer id tincidunt erat. Sed elementum posuere augue, quis pharetra mi vehicula in. Nullam rhoncus mi quis lectus gravida dignissim. Pellentesque a tortor ut leo pretium auctor non in massa. Nunc efficitur vestibulum mi, id mattis quam aliquet id. Ut semper tortor sit amet molestie mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec laoreet eleifend purus ut sagittis. Nunc consequat vel sapien at convallis.
</p>
</section>
</body>
const TIMEOUT = 10000;
describe('landscape', async () => {
let page;
let rendered;
beforeAll(async () => {
page = await loadPage('page-rules/size/landscape/landscape.html')
return page.rendered;
}, TIMEOUT)
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
})
it('should render 1 page', async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => {
return r.length;
});
expect(pages).toEqual(1);
})
it('should give the page a width of 210mm', async () => {
let width = await page.$eval(".pagedjs_page", (r) => {
return window.getComputedStyle(r).getPropertyValue("--width");
});
expect(width).toEqual("210mm");
})
it('should give the page a height of 148mm', async () => {
let width = await page.$eval(".pagedjs_page", (r) => {
return window.getComputedStyle(r).getPropertyValue("--height");
});
expect(width).toEqual("148mm");
})
if (!DEBUG) {
it('should create a pdf', async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
})
}
}
)
......@@ -81,9 +81,11 @@ class AtPage extends Handler {
let declarations = this.replaceDeclartations(node);
if (declarations.size) {
page.size = declarations.size;
page.width = declarations.size.width;
page.height = declarations.size.height;
page.orientation = declarations.size.orientation;
page.format = declarations.size.format;
}
if (declarations.margin) {
......@@ -124,18 +126,20 @@ class AtPage extends Handler {
if ("*" in this.pages) {
let width = this.pages["*"].width;
let height = this.pages["*"].height;
let format = this.pages["*"].format;
let orientation = this.pages["*"].orientation;
if ((width && height) &&
(this.width !== width || this.height !== height)) {
this.width = width;
this.height = height;
this.format = format;
this.orientation = orientation;
this.addRootVars(ast, width, height);
this.addRootPage(ast, width, height);
this.addRootVars(ast, width, height, orientation);
this.addRootPage(ast, this.pages["*"].size);
this.emit("size", { width, height, orientation });
this.emit("size", { width, height, orientation, format });
}
}
......@@ -251,7 +255,7 @@ class AtPage extends Handler {
}
getSize(declaration) {
let width, height, orientation;
let width, height, orientation, format;
// Get size: Xmm Ymm
csstree.walk(declaration, {
......@@ -292,6 +296,7 @@ class AtPage extends Handler {
width = s.width;
height = s.height;
}
format = name;
}
}
});
......@@ -299,7 +304,8 @@ class AtPage extends Handler {
return {
width,
height,
orientation
orientation,
format
}
}
......@@ -406,7 +412,7 @@ class AtPage extends Handler {
this.addMarginVars(page.margin, children, children.first());
if (page.width) {
this.addDimensions(page.width, page.height, children, children.first());
this.addDimensions(page.width, page.height, page.orientation, children, children.first());
}
if (page.marginalia) {
......@@ -435,22 +441,33 @@ class AtPage extends Handler {
}
}
addDimensions(width, height, list, item) {
addDimensions(width, height, orientation, list, item) {
let outputWidth, outputHeight;
if (!orientation || orientation === "portrait") {
outputWidth = width;
outputHeight = height;
} else {
outputWidth = height;
outputHeight = width;
}
// width variable
let wVar = this.createVariable("--width", width.value + (width.unit || ''));
let wVar = this.createVariable("--width", outputWidth.value + (outputWidth.unit || ''));
list.appendData(wVar);
// height variable
let hVar = this.createVariable("--height", height.value + (height.unit || ''));
let hVar = this.createVariable("--height", outputHeight.value + (outputHeight.unit || ''));
list.appendData(hVar);
// width dimension
let w = this.createDimension("width", width.value, width.unit);
let w = this.createDimension("width", outputWidth.value, outputWidth.unit);
list.appendData(w);
// height dimension
let h = this.createDimension("height", height.value, height.unit);
let h = this.createDimension("height", outputHeight.value, outputHeight.unit);
list.appendData(h);
}
addMarginaliaStyles(page, list, item, sheet) {
......@@ -614,7 +631,7 @@ class AtPage extends Handler {
}
}
addRootVars(ast, width, height) {
addRootVars(ast, width, height, orientation) {
let selectors = new csstree.List();
selectors.insertData({
type: "PseudoClassSelector",
......@@ -622,44 +639,72 @@ class AtPage extends Handler {
children: null
});
// width variable
let wVar = this.createVariable("--width", width.value + (width.unit || ''));
// orientation variable
let oVar = this.createVariable("--orientation", orientation || "");
// height variable
let hVar = this.createVariable("--height", height.value + (height.unit || ''));
let widthString, heightString;
if (!orientation || orientation === "portrait") {
widthString = width.value + (width.unit || '');
heightString = height.value + (height.unit || '');
} else {
widthString = height.value + (height.unit || '');
heightString = width.value + (width.unit || '');
}
let rule = this.createRule(selectors, [wVar, hVar])
let wVar = this.createVariable("--width", widthString);
let hVar = this.createVariable("--height", heightString);
let rule = this.createRule(selectors, [wVar, hVar, oVar])
ast.children.appendData(rule);
}
addRootPage(ast, width, height) {
/*
@page {
size: var(--width) var(--height);
margin: 0;
padding: 0;
}
*/
/*
@page {
size: var(--width) var(--height);
margin: 0;
padding: 0;
}
*/
addRootPage(ast, size) {
let { width, height, orientation, format } = size;
let children = new csstree.List();
let dimensions = new csstree.List();
dimensions.appendData({
type: 'Dimension',
unit: width.unit,
value: width.value
});
if (format) {
dimensions.appendData({
type: 'Identifier',
name: format
});
dimensions.appendData({
type: 'WhiteSpace',
value: " "
});
if (orientation) {
dimensions.appendData({
type: 'WhiteSpace',
value: " "
});
dimensions.appendData({
type: 'Dimension',
unit: height.unit,
value: height.value
});
dimensions.appendData({
type: 'Identifier',
name: orientation
});
}
} else {
dimensions.appendData({
type: 'Dimension',
unit: width.unit,
value: width.value
});
dimensions.appendData({
type: 'WhiteSpace',
value: " "
});
dimensions.appendData({
type: 'Dimension',
unit: height.unit,
value: height.value
});
}
children.appendData({
type: 'Declaration',
......
......@@ -24,7 +24,9 @@ class Previewer {
height: {
value: 11,
unit: "in"
}
},
format: undefined,
orientation: undefined
}
let counter = 0;
......@@ -126,9 +128,9 @@ class Previewer {
let endTime = performance.now();
let msg = "Rendering " + flow.total + " pages took " + (endTime - startTime) + " milliseconds.";
this.emit("rendered", msg, this.size.width && this.size.width.value + this.size.width.unit, this.size.height && this.size.height.value + this.size.height.unit, this.size.orientation);
this.emit("rendered", msg, this.size.width && this.size.width.value + this.size.width.unit, this.size.height && this.size.height.value + this.size.height.unit, this.size.orientation, this.size.format);
if (typeof window.onPagesRendered !== "undefined") {
window.onPagesRendered(msg, this.size.width && this.size.width.value + this.size.width.unit, this.size.height && this.size.height.value + this.size.height.unit, this.size.orientation);
window.onPagesRendered(msg, this.size.width && this.size.width.value + this.size.width.unit, this.size.height && this.size.height.value + this.size.height.unit, this.size.orientation, this.size.format);
}
return flow;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment