Commit 8ae9a0c8 authored by Fred Chasen's avatar Fred Chasen

Add sheet grid, add marks

parent aaa29d68
Pipeline #192 failed with stage
in 2 minutes and 45 seconds
<!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>
Bleed
</title>
<script src="../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: A4;
margin: 8mm;
bleed: 10mm;
}
@media screen {
.pagedjs_sheet {
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
}
.pagedjs_page {
box-shadow: 0 0 0 1px rgba(200, 0,0,0.2);
}
}
p {
margin-top: 0;
margin-bottom: 0;
}
</style>
</head>
<body>
<section>
<header>
<h1>Chapter 1. Loomings.</h1>
</header>
<p><span class="audio" id="c001s0001">Call me Ishmael.</span> <span class="audio" id="c001s0002">Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.</span> <span class="audio" id="c001s0003">It is a way I have of driving off the spleen and regulating the circulation.</span> <span class="audio" id="c001s0004">Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can.</span> <span class="audio" id="c001s0005">This is my substitute for pistol and ball.</span> <span class="audio" id="c001s0006">With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship.</span> <span class="audio" id="c001s0007">There is nothing surprising in this.</span> <span class="audio" id="c001s0008">If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.</span></p>
<p><span class="audio" id="c001p0002">There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs—commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.</span></p>
<p><span class="audio" id="c001p0003">Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see?—Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men fixed in ocean reveries. Some leaning against the spiles; some seated upon the pier-heads; some looking over the bulwarks of ships from China; some high aloft in the rigging, as if striving to get a still better seaward peep. But these are all landsmen; of week days pent up in lath and plaster—tied to counters, nailed to benches, clinched to desks. How then is this? Are the green fields gone? What do they here?</span></p>
<p><span class="audio" id="c001p0004">But look! here come more crowds, pacing straight for the water, and seemingly bound for a dive. Strange! Nothing will content them but the extremest limit of the land; loitering under the shady lee of yonder warehouses will not suffice. No. They must get just as nigh the water as they possibly can without falling in. And there they stand—miles of them—leagues. Inlanders all, they come from lanes and alleys, streets and avenues—north, east, south, and west. Yet here they all unite. Tell me, does the magnetic virtue of the needles of the compasses of all those ships attract them thither?</span></p>
<p><span class="audio" id="c001p0005">Once more. Say you are in the country; in some high land of lakes. Take almost any path you please, and ten to one it carries you down in a dale, and leaves you there by a pool in the stream. There is magic in it. Let the most absent-minded of men be plunged in his deepest reveries—stand that man on his legs, set his feet a-going, and he will infallibly lead you to water, if water there be in all that region. Should you ever be athirst in the great American desert, try this experiment, if your caravan happen to be supplied with a metaphysical professor. Yes, as every one knows, meditation and water are wedded for ever.</span></p>
<p><span class="audio" id="c001p0006">But here is an artist. He desires to paint you the dreamiest, shadiest, quietest, most enchanting bit of romantic landscape in all the valley of the Saco. What is the chief element he employs? There stand his trees, each with a hollow trunk, as if a hermit and a crucifix were within; and here sleeps his meadow, and there sleep his cattle; and up from yonder cottage goes a sleepy smoke. Deep into distant woodlands winds a mazy way, reaching to overlapping spurs of mountains bathed in their hill-side blue. But though the picture lies thus tranced, and though this pine-tree shakes down its sighs like leaves upon this shepherd’s head, yet all were vain, unless the shepherd’s eye were fixed upon the magic stream before him. Go visit the Prairies in June, when for scores on scores of miles you wade knee-deep among Tiger-lilies—what is the one charm wanting?—Water—there is not a drop of water there! Were Niagara but a cataract of sand, would you travel your thousand miles to see it? Why did the poor poet of Tennessee, upon suddenly receiving two handfuls of silver, deliberate whether to buy him a coat, which he sadly needed, or invest his money in a pedestrian trip to Rockaway Beach? Why is almost every robust healthy boy with a robust healthy soul in him, at some time or other crazy to go to sea? Why upon your first voyage as a passenger, did you yourself feel such a mystical vibration, when first told that you and your ship were now out of sight of land? Why did the old Persians hold the sea holy? Why did the Greeks give it a separate deity, and own brother of Jove? Surely all this is not without meaning. And still deeper the meaning of that story of Narcissus, who because he could not grasp the tormenting, mild image he saw in the fountain, plunged into it and was drowned. But that same image, we ourselves see in all rivers and oceans. It is the image of the ungraspable phantom of life; and this is the key to it all.</span>
</p>
</section>
</body>
</html>
const TIMEOUT = 10000; // Some book might take longer than this to renderer
describe('bleeds', async () => {
describe('bleed', async () => {
let page;
let rendered;
beforeAll(async () => {
page = await loadPage('bleeds/bleeds.html')
page = await loadPage('bleed/bleed.html')
return page.rendered;
}, TIMEOUT)
......
......@@ -4,45 +4,33 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
Bleeds
Marks
</title>
<script src="../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: A4;
margin: 2mm;
bleed: 20mm 40mm;
<style>
@page {
size: A4;
margin: 8mm;
marks: crop cross;
}
}
@media screen {
.pagedjs_page {
.pagedjs_sheet {
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
}
.pagedjs_page {
box-shadow: 0 0 0 1px rgba(200, 0,0,0.2);
}
}
/* this element show the page location inside the bleed. */
.pagedjs_page::after {
content: ' ';
/* reusing the bleed vars */
/* width: var(--width);
height: var(--height); */
background: rgba(255,255,255,0.3);
position: absolute;
top: var(--bleed-top);
left: var(--bleed-left);
height: calc( var(--height));
width: calc(var(--width));
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
outline: 2px dashed white;
}
p {
margin-top: 0;
margin-bottom: 0;
}
p {
margin-top: 0;
margin-bottom: 0;
}
</style>
</head>
......@@ -52,7 +40,7 @@
<h1>Chapter 1. Loomings.</h1>
</header>
<p><span class="audio" id="c001s0001">Call me Ishmael.</span> <span class="audio" id="c001s0002">Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.</span> <span class="audio" id="c001s0003">It is a way I have of driving off the spleen and regulating the circulation.</span> <span class="audio" id="c001s0004">Whenever I find myself growing grim about the mouth; <a href="#fred">go to Fred</a> whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can.</span> <span class="audio" id="c001s0005">This is my substitute for pistol and ball.</span> <span class="audio" id="c001s0006">With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship.</span> <span class="audio" id="c001s0007">There is nothing surprising in this.</span> <span class="audio" id="c001s0008">If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.</span></p>
<p><span class="audio" id="c001s0001">Call me Ishmael.</span> <span class="audio" id="c001s0002">Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.</span> <span class="audio" id="c001s0003">It is a way I have of driving off the spleen and regulating the circulation.</span> <span class="audio" id="c001s0004">Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can.</span> <span class="audio" id="c001s0005">This is my substitute for pistol and ball.</span> <span class="audio" id="c001s0006">With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship.</span> <span class="audio" id="c001s0007">There is nothing surprising in this.</span> <span class="audio" id="c001s0008">If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.</span></p>
<p><span class="audio" id="c001p0002">There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs—commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.</span></p>
<p><span class="audio" id="c001p0003">Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see?—Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men fixed in ocean reveries. Some leaning against the spiles; some seated upon the pier-heads; some looking over the bulwarks of ships from China; some high aloft in the rigging, as if striving to get a still better seaward peep. But these are all landsmen; of week days pent up in lath and plaster—tied to counters, nailed to benches, clinched to desks. How then is this? Are the green fields gone? What do they here?</span></p>
<p><span class="audio" id="c001p0004">But look! here come more crowds, pacing straight for the water, and seemingly bound for a dive. Strange! Nothing will content them but the extremest limit of the land; loitering under the shady lee of yonder warehouses will not suffice. No. They must get just as nigh the water as they possibly can without falling in. And there they stand—miles of them—leagues. Inlanders all, they come from lanes and alleys, streets and avenues—north, east, south, and west. Yet here they all unite. Tell me, does the magnetic virtue of the needles of the compasses of all those ships attract them thither?</span></p>
......@@ -61,4 +49,4 @@
</p>
</section>
</body>
</html>
\ No newline at end of file
</html>
const TIMEOUT = 10000; // Some book might take longer than this to renderer
describe('marks', async () => {
let page;
let rendered;
beforeAll(async () => {
page = await loadPage('marks/marks.html')
return page.rendered;
}, TIMEOUT)
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
})
it('should render text', async () => {
let text = await page.evaluate(() => document.body.textContent);
expect(text).toContain('Chapter 1. Loomings.');
})
it('should render 1 page', async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => r.length);
expect(pages).toBe(1);
})
if (!DEBUG) {
it('should create a pdf', async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
})
}
}
)
......@@ -9,42 +9,63 @@ import {
const MAX_PAGES = false;
const TEMPLATE = `<div class="pagedjs_page">
<div class="pagedjs_margin-top-left-corner-holder">
<div class="pagedjs_margin pagedjs_margin-top-left-corner"><div class="pagedjs_margin-content"></div></div>
const TEMPLATE = `
<div class="pagedjs_sheet">
<div class="pagedjs_bleed pagedjs_bleed-top">
<div class="pagedjs_marks-crop"></div>
<div class="pagedjs_marks-cross"></div>
<div class="pagedjs_marks-crop"></div>
</div>
<div class="pagedjs_margin-top">
<div class="pagedjs_margin pagedjs_margin-top-left"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-top-center"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-top-right"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_bleed pagedjs_bleed-bottom">
<div class="pagedjs_marks-crop"></div>
<div class="pagedjs_marks-cross"></div>
<div class="pagedjs_marks-crop"></div>
</div>
<div class="pagedjs_margin-top-right-corner-holder">
<div class="pagedjs_margin pagedjs_margin-top-right-corner"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_bleed pagedjs_bleed-left">
<div class="pagedjs_marks-crop"></div>
<div class="pagedjs_marks-cross"></div>
<div class="pagedjs_marks-crop"></div>
</div>
<div class="pagedjs_margin-right">
<div class="pagedjs_margin pagedjs_margin-right-top"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-right-middle"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-right-bottom"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_bleed pagedjs_bleed-right">
<div class="pagedjs_marks-crop"></div>
<div class="pagedjs_marks-cross"></div>
<div class="pagedjs_marks-crop"></div>
</div>
<div class="pagedjs_margin-left">
<div class="pagedjs_margin pagedjs_margin-left-top"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-left-middle"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-left-bottom"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-bottom-left-corner-holder">
<div class="pagedjs_margin pagedjs_margin-bottom-left-corner"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-bottom">
<div class="pagedjs_margin pagedjs_margin-bottom-left"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-bottom-center"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-bottom-right"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-bottom-right-corner-holder">
<div class="pagedjs_margin pagedjs_margin-bottom-right-corner"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_area">
<div class="pagedjs_page_content">
<div class="pagedjs_page">
<div class="pagedjs_margin-top-left-corner-holder">
<div class="pagedjs_margin pagedjs_margin-top-left-corner"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-top">
<div class="pagedjs_margin pagedjs_margin-top-left"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-top-center"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-top-right"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-top-right-corner-holder">
<div class="pagedjs_margin pagedjs_margin-top-right-corner"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-right">
<div class="pagedjs_margin pagedjs_margin-right-top"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-right-middle"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-right-bottom"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-left">
<div class="pagedjs_margin pagedjs_margin-left-top"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-left-middle"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-left-bottom"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-bottom-left-corner-holder">
<div class="pagedjs_margin pagedjs_margin-bottom-left-corner"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-bottom">
<div class="pagedjs_margin pagedjs_margin-bottom-left"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-bottom-center"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-bottom-right"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-bottom-right-corner-holder">
<div class="pagedjs_margin pagedjs_margin-bottom-right-corner"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_area">
<div class="pagedjs_page_content"></div>
</div>
</div>
</div>`;
......
......@@ -79,7 +79,7 @@ class AtPage extends Handler {
}
let declarations = this.replaceDeclartations(node);
console.log(declarations);
if (declarations.size) {
page.size = declarations.size;
page.width = declarations.size.width;
......@@ -88,55 +88,54 @@ class AtPage extends Handler {
page.format = declarations.size.format;
}
if (declarations.marks) {
page.marks = declarations.marks;
}
if (declarations.bleed) {
if (declarations.bleed[0] === "auto") {
if (page.marks) {
if (declarations.bleed && declarations.bleed[0] != "auto") {
switch (declarations.bleed.length) {
case 4: // top right bottom left
page.bleed = {
top: { value: 6, unit: "pt" },
right: { value: 6, unit: "pt" },
bottom: { value: 6, unit: "pt" },
left: { value: 6, unit: "pt" }
top: declarations.bleed[0],
right: declarations.bleed[1],
bottom: declarations.bleed[2],
left: declarations.bleed[3]
}
}
} else {
switch (declarations.bleed.length) {
case 4: // top right bottom left
page.bleed = {
top: declarations.bleed[0],
right: declarations.bleed[1],
bottom: declarations.bleed[2],
left: declarations.bleed[3]
}
break;
case 3: // top right bottom right
page.bleed = {
top: declarations.bleed[0],
right: declarations.bleed[1],
bottom: declarations.bleed[2],
left: declarations.bleed[1]
}
break;
case 2: // top right top right
page.bleed = {
top: declarations.bleed[0],
right: declarations.bleed[1],
bottom: declarations.bleed[0],
left: declarations.bleed[1]
}
break;
default:
page.bleed = {
top: declarations.bleed[0],
right: declarations.bleed[0],
bottom: declarations.bleed[0],
left: declarations.bleed[0]
}
break;
case 3: // top right bottom right
page.bleed = {
top: declarations.bleed[0],
right: declarations.bleed[1],
bottom: declarations.bleed[2],
left: declarations.bleed[1]
}
break;
case 2: // top right top right
page.bleed = {
top: declarations.bleed[0],
right: declarations.bleed[1],
bottom: declarations.bleed[0],
left: declarations.bleed[1]
}
break;
default:
page.bleed = {
top: declarations.bleed[0],
right: declarations.bleed[0],
bottom: declarations.bleed[0],
left: declarations.bleed[0]
}
}
}
if (declarations.marks) {
if (!declarations.bleed || declarations.bleed && declarations.bleed[0] === "auto") {
// Spec say 6pt, but needs more space for marks
page.bleed = {
top: { value: 6, unit: "mm" },
right: { value: 6, unit: "mm" },
bottom: { value: 6, unit: "mm" },
left: { value: 6, unit: "mm" }
}
}
page.marks = declarations.marks;
}
if (declarations.margin) {
......@@ -180,6 +179,7 @@ class AtPage extends Handler {
let format = this.pages["*"].format;
let orientation = this.pages["*"].orientation;
let bleed = this.pages["*"].bleed;
let marks = this.pages["*"].marks;
if ((width && height) &&
......@@ -189,7 +189,7 @@ class AtPage extends Handler {
this.format = format;
this.orientation = orientation;
this.addRootVars(ast, width, height, orientation, bleed);
this.addRootVars(ast, width, height, orientation, bleed, marks);
this.addRootPage(ast, this.pages["*"].size, bleed);
this.emit("size", { width, height, orientation, format, bleed });
......@@ -280,8 +280,13 @@ class AtPage extends Handler {
let value = declaration.value;
if (prop === "marks") {
console.log("marks", value.children);
parsed.marks = value.children.first().name;
parsed.marks = [];
csstree.walk(declaration, {
visit: "Identifier",
enter: (ident) => {
parsed.marks.push(ident.name);
}
});
dList.remove(dItem);
} else if (prop === "margin") {
parsed.margin = this.getMargins(declaration);
......@@ -304,24 +309,30 @@ class AtPage extends Handler {
} else if (prop === "bleed") {
parsed.bleed = []
// bleed: "auto"
csstree.walk(declaration, {
visit: "String",
enter: (stringNode) => {
if (stringNode.value.indexOf("auto") > -1) {
parsed.bleed.push("auto");
enter: (subNode) => {
switch (subNode.type) {
case "String": // bleed: "auto"
if (subNode.value.indexOf("auto") > -1) {
parsed.bleed.push("auto");
}
break;
case "Dimension": // bleed: 1in 2in, bleed: 20px ect.
parsed.bleed.push({
value: subNode.value,
unit: subNode.unit
});
break;
case "Number":
parsed.bleed.push({
value: subNode.value,
unit: "px"
});
break;
default:
// ignore
}
}
});
// bleed: 1in 2in, bleed: 20px ect.
csstree.walk(declaration, {
visit: "Dimension",
enter: (dimensionNode) => {
parsed.bleed.push({
value: dimensionNode.value,
unit: dimensionNode.unit,
});
}
});
......@@ -492,7 +503,7 @@ class AtPage extends Handler {
this.addMarginVars(page.margin, children, children.first());
if (page.width) {
this.addDimensions(page.width, page.height, page.orientation, page.bleed, children, children.first());
this.addDimensions(page.width, page.height, page.orientation, children, children.first());
}
if (page.marginalia) {
......@@ -521,17 +532,11 @@ class AtPage extends Handler {
}
}
addDimensions(width, height, orientation, bleed, list, item) {
addDimensions(width, height, orientation, list, item) {
let widthString, heightString;
if (!bleed) {
widthString = CSSValueToString(width);
heightString = CSSValueToString(height);
} else {
widthString = `calc( ${CSSValueToString(width)} + ${CSSValueToString(bleed.left)} + ${CSSValueToString(bleed.right)} )`;
heightString = `calc( ${CSSValueToString(height)} + ${CSSValueToString(bleed.top)} + ${CSSValueToString(bleed.bottom)} )`;
}
widthString = CSSValueToString(width);
heightString = CSSValueToString(height);
if (orientation && orientation !== "portrait") {
// reverse for orientation
......@@ -546,14 +551,10 @@ class AtPage extends Handler {
let hVar = this.createVariable("--height", heightString);
list.appendData(hVar);
// width dimension
let w = this.createDimension("width", widthString);
let w = this.createDimension("width", width);
let h = this.createDimension("height", height);
list.appendData(w);
// height dimension
let h = this.createDimension("height", heightString);
list.appendData(h);
}
addMarginaliaStyles(page, list, item, sheet) {
......@@ -717,7 +718,7 @@ class AtPage extends Handler {
}
}
addRootVars(ast, width, height, orientation, bleed) {
addRootVars(ast, width, height, orientation, bleed, marks) {
let rules = [];
let selectors = new csstree.List();
selectors.insertData({
......@@ -743,6 +744,13 @@ class AtPage extends Handler {
rules.push(bleedTop, bleedRight, bleedBottom, bleedLeft);
}
if (marks) {
marks.forEach((mark) => {
let markDisplay = this.createVariable("--mark-" + mark + "-display", "block");
rules.push(markDisplay);
})
}
// orientation variable
if (orientation) {
let oVar = this.createVariable("--orientation", orientation);
......@@ -1418,14 +1426,63 @@ class AtPage extends Handler {
};
}
createDimension(property, value, unit, important) {
createCalculatedDimension(property, items, important, operator="+") {
let children = new csstree.List();
let calculations = new csstree.List();
items.forEach((item, index) => {
calculations.appendData({
type: "Dimension",
unit: item.unit,
value: item.value
});
calculations.appendData({
type: "WhiteSpace",
value: " "
});
if (index + 1 < items.length) {
calculations.appendData({
type: "Operator",
value: operator
});
calculations.appendData({
type: "WhiteSpace",
value: " "
});
}
});
children.insertData({
type: "Function",
loc: null,
name: "calc",
children: calculations
});
return {
type: "Declaration",
loc: null,
important: important,
property: property,
value: {
type: "Value",
loc: null,
children: children
}
};
}
createDimension(property, cssValue, important) {
let children = new csstree.List();
children.insertData({
type: "Dimension",
loc: null,
value: value,
unit: unit
value: cssValue.value,
unit: cssValue.unit
});
return {
......
......@@ -6,6 +6,16 @@ export default `
--margin-right: 1in;
--margin-bottom: 1in;
--margin-left: 1in;
--bleed-top: 0;
--bleed-right: 0;
--bleed-bottom: 0;
--bleed-left: 0;
--crop-color: black;
--crop-offset: 2mm;
--crop-stroke: 1px;
--cross-size: 5mm;
--mark-cross-display: none;
--mark-crop-display: none;
--page-count: 0;
}
......@@ -14,15 +24,123 @@ export default `
margin: 0;
}
.pagedjs_page {
.pagedjs_sheet {
box-sizing: border-box;
width: var(--width);
height: var(--height);
overflow: hidden;
position: relative;
display: grid;
grid-template-columns: [bleed-left] var(--bleed-left) [left] var(--margin-left) [center] calc(var(--width) - var(--margin-left) - var(--margin-right)) [right] var(--margin-right) [bleed-right] var(--bleed-right);
grid-template-rows: [bleed-top] var(--bleed-top) [header] var(--margin-top) [page] calc(var(--height) - var(--margin-top) - var(--margin-bottom)) [footer] var(--margin-bottom) [bleed-bottom] var(--bleed-bottom);
grid-template-columns: [bleed-left] var(--bleed-left) [sheet-center] calc(var(--width) - var(--bleed-left) - var(--bleed-right)) [bleed-right] var(--bleed-right);
grid-template-rows: [bleed-top] var(--bleed-top) [sheet-middle] calc(var(--height) - var(--bleed-top) - var(--bleed-bottom)) [bleed-bottom] var(--bleed-bottom);
}
.pagedjs_bleed {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
overflow: hidden;
}
.pagedjs_bleed-top {
grid-column: bleed-left / -1;
grid-row: bleed-top;
flex-direction: row;
}
.pagedjs_bleed-bottom {
grid-column: bleed-left / -1;
grid-row: bleed-bottom;
flex-direction: row;
}
.pagedjs_bleed-left {
grid-column: bleed-left;
grid-row: bleed-top / -1;
flex-direction: column;
}
.pagedjs_bleed-right {
grid-column: bleed-right;
grid-row: bleed-top / -1;
flex-direction: column;
}
.pagedjs_marks-crop {
display: var(--mark-crop-display);
flex-grow: 0;
flex-shrink: 0;
}
.pagedjs_bleed-top .pagedjs_marks-crop:nth-child(1),
.pagedjs_bleed-bottom .pagedjs_marks-crop:nth-child(1) {
width: calc(var(--bleed-left) - var(--crop-stroke));
border-right: var(--crop-stroke) solid var(--crop-color);
}
.pagedjs_bleed-top .pagedjs_marks-crop:nth-child(3),
.pagedjs_bleed-bottom .pagedjs_marks-crop:nth-child(3) {
width: calc(var(--bleed-right) - var(--crop-stroke));
border-left: var(--crop-stroke) solid var(--crop-color);
}
.pagedjs_bleed-top .pagedjs_marks-crop {
align-self: flex-start;
height: calc(var(--bleed-top) - var(--crop-offset));
}
.pagedjs_bleed-bottom .pagedjs_marks-crop {
align-self: flex-end;
height: calc(var(--bleed-bottom) - var(--crop-offset));
}
.pagedjs_bleed-left .pagedjs_marks-crop:nth-child(1),
.pagedjs_bleed-right .pagedjs_marks-crop:nth-child(1) {
height: calc(var(--bleed-top) - var(--crop-stroke));
border-bottom: var(--crop-stroke) solid var(--crop-color);
}
.pagedjs_bleed-left .pagedjs_marks-crop:nth-child(3),
.pagedjs_bleed-right .pagedjs_marks-crop:nth-child(3) {
height: calc(var(--bleed-bottom) - var(--crop-stroke));
border-top: var(--crop-stroke) solid var(--crop-color);
}
.pagedjs_bleed-left .pagedjs_marks-crop {
width: calc(var(--bleed-left) - var(--crop-offset));
align-self: flex-start;
}
.pagedjs_bleed-right .pagedjs_marks-crop {
width: calc(var(--bleed-right) - var(--crop-offset));
align-self: flex-end;
}
.pagedjs_marks-cross {
display: var(--mark-cross-display);
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIzMi41MzdweCIgaGVpZ2h0PSIzMi41MzdweCIgdmlld0JveD0iMC4xMDQgMC4xMDQgMzIuNTM3IDMyLjUzNyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwLjEwNCAwLjEwNCAzMi41MzcgMzIuNTM3IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMy4zODkzIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0yOS45MzEsMTYuMzczYzAsNy40ODktNi4wNjgsMTMuNTYtMTMuNTU4LDEzLjU2Yy03LjQ4MywwLTEzLjU1Ny02LjA3Mi0xMy41NTctMTMuNTZjMC03LjQ4Niw2LjA3NC0xMy41NTQsMTMuNTU3LTEzLjU1NEMyMy44NjIsMi44MTksMjkuOTMxLDguODg3LDI5LjkzMSwxNi4zNzN6Ii8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjMuMzg5MyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMC4xMDQiIHkxPSIxNi4zNzMiIHgyPSIzMi42NDIiIHkyPSIxNi4zNzMiLz48bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMy4zODkzIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIxNi4zNzMiIHkxPSIwLjEwNCIgeDI9IjE2LjM3MyIgeTI9IjMyLjY0MiIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIzLjM4OTMiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTI0LjUwOCwxNi4zNzNjMCw0LjQ5Ni0zLjYzOCw4LjEzNS04LjEzNSw4LjEzNWMtNC40OTEsMC04LjEzNS0zLjYzOC04LjEzNS04LjEzNWMwLTQuNDg5LDMuNjQ0LTguMTM1LDguMTM1LTguMTM1QzIwLjg2OSw4LjIzOSwyNC41MDgsMTEuODg0LDI0LjUwOCwxNi4zNzN6Ii8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjAuNjc3OCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMjkuOTMxLDE2LjM3M2MwLDcuNDg5LTYuMDY4LDEzLjU2LTEzLjU1OCwxMy41NmMtNy40ODMsMC0xMy41NTctNi4wNzItMTMuNTU3LTEzLjU2YzAtNy40ODYsNi4wNzQtMTMuNTU0LDEzLjU1Ny0xMy41NTRDMjMuODYyLDIuODE5LDI5LjkzMSw4Ljg4NywyOS45MzEsMTYuMzczeiIvPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIwLjY3NzgiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjAuMTA0IiB5MT0iMTYuMzczIiB4Mj0iMzIuNjQyIiB5Mj0iMTYuMzczIi8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjAuNjc3OCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMTYuMzczIiB5MT0iMC4xMDQiIHgyPSIxNi4zNzMiIHkyPSIzMi42NDIiLz48cGF0aCBkPSJNMjQuNTA4LDE2LjM3M2MwLDQuNDk2LTMuNjM4LDguMTM1LTguMTM1LDguMTM1Yy00LjQ5MSwwLTguMTM1LTMuNjM4LTguMTM1LTguMTM1YzAtNC40ODksMy42NDQtOC4xMzUsOC4xMzUtOC4xMzVDMjAuODY5LDguMjM5LDI0LjUwOCwxMS44ODQsMjQuNTA4LDE2LjM3MyIvPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIwLjY3NzgiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjguMjM5IiB5MT0iMTYuMzczIiB4Mj0iMjQuNTA4IiB5Mj0iMTYuMzczIi8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjAuNjc3OCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMTYuMzczIiB5MT0iOC4yMzkiIHgyPSIxNi4zNzMiIHkyPSIyNC41MDgiLz48L3N2Zz4=);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 20px;