Skip to content

Commit

Permalink
Landscape printing
Browse files Browse the repository at this point in the history
  • Loading branch information
@grassick
grassick committed Jul 9, 2020
1 parent 97242aa commit 060c152
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 5 deletions.
3 changes: 3 additions & 0 deletions lib/widgets/blocks/print.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,14 @@ import { DesignCtx, InstanceCtx } from '../../contexts';
export interface PrintBlockDef extends BlockDef {
type: "print";
content: BlockDef | null;
/** Size of the paper. Default is letter-portrait */
paperSize?: "letter-portait" | "letter-landscape";
}
export declare class PrintBlock extends Block<PrintBlockDef> {
getChildren(contextVars: ContextVar[]): ChildBlock[];
validate(): null;
processChildren(action: (self: BlockDef | null) => BlockDef | null): BlockDef;
renderDesign(props: DesignCtx): JSX.Element;
renderInstance(ctx: InstanceCtx): JSX.Element;
renderEditor(props: DesignCtx): JSX.Element;
}
23 changes: 21 additions & 2 deletions lib/widgets/blocks/print.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ var blocks_1 = require("../blocks");
var mwater_expressions_1 = require("mwater-expressions");
var react_1 = require("react");
var react_dom_1 = require("react-dom");
var propertyEditors_1 = require("../propertyEditors");
var bootstrap_1 = require("react-library/lib/bootstrap");
var PrintBlock = /** @class */ (function (_super) {
__extends(PrintBlock, _super);
function PrintBlock() {
Expand Down Expand Up @@ -72,6 +74,16 @@ var PrintBlock = /** @class */ (function (_super) {
PrintBlock.prototype.renderInstance = function (ctx) {
return React.createElement(PrintInstance, { ctx: ctx, blockDef: this.blockDef });
};
PrintBlock.prototype.renderEditor = function (props) {
return (React.createElement("div", null,
React.createElement(propertyEditors_1.LabeledProperty, { label: "Paper Size" },
React.createElement(propertyEditors_1.PropertyEditor, { obj: this.blockDef, onChange: props.store.replaceBlock, property: "paperSize" }, function (value, onChange) {
return React.createElement(bootstrap_1.Select, { value: value || "letter-portrait", onChange: onChange, options: [
{ value: "letter-portrait", label: "Letter (portrait)" },
{ value: "letter-landscape", label: "Letter (landscape)" }
] });
}))));
};
return PrintBlock;
}(blocks_1.Block));
exports.PrintBlock = PrintBlock;
Expand Down Expand Up @@ -113,9 +125,14 @@ var ExecutePrintInstance = function (props) {
}, []);
// Create printable element
var printElem = react_1.useMemo(function () {
var paperSize = props.blockDef.paperSize || "letter-portait";
// Create element at 96 dpi (usual for browsers) and 7.5" across (letter - 0.5" each side). 1440 is double, so scale down
var width = 1440;
if (paperSize == "letter-landscape") {
width = 1920;
}
return React.createElement("div", { style: { transform: "scale(0.5)", transformOrigin: "top left" } },
React.createElement("div", { style: { width: 1440 } }, printCtx.renderChildBlock(printCtx, props.blockDef.content)));
React.createElement("div", { style: { width: width } }, printCtx.renderChildBlock(printCtx, props.blockDef.content)));
}, [printCtx]);
// Perform print after delay of waiting for no queries
react_1.useEffect(function () {
Expand All @@ -133,9 +150,11 @@ var ExecutePrintInstance = function (props) {
}, 3000);
return function () { clearInterval(interval); };
}, []);
// Create size css string
var sizeCss = (props.blockDef.paperSize || "letter-portait") == "letter-portait" ? "8.5in 11in" : "11in 8.5in landscape";
// Fragment that contains CSS, splash screen and element to print
var printFragment = React.createElement(React.Fragment, null,
React.createElement("style", null, "\n @media print {\n /* Hide body and get rid of margins */\n body {\n visibility: hidden;\n margin: 0;\n padding: 0;\n opacity: 100%\n }\n\n /* Hide all children of body */\n body > * {\n display: none;\n }\n\n /* Setup special region */\n #react_element_printer {\n display: block !important;\n visibility: visible;\n }\n }\n\n @media screen {\n /* REMOVED: Don't show when not printing. Caused c3 problems */\n /*#react_element_printer {\n visibility: hidden;\n }*/\n }\n\n /* Default to letter sized pages */\n @page {\n size: 8.5in 11in; \n margin: 0.5in 0.5in 0.5in 0.5in; \n }\n\n #react_element_printer_splash {\n display: flex; \n align-items: center;\n justify-content: center; \n position: fixed; \n left: 0;\n top: 0;\n z-index: 9999;\n width: 100%;\n height: 100%;\n overflow: visible; \n background-color: rgba(255,255,255,0.8);\n }\n\n @media print {\n #react_element_printer_splash {\n display: none;\n }\n }\n "),
React.createElement("style", null, "\n @media print {\n /* Hide body and get rid of margins */\n body {\n visibility: hidden;\n margin: 0;\n padding: 0;\n opacity: 100%\n }\n\n /* Hide all children of body */\n body > * {\n display: none;\n }\n\n /* Setup special region */\n #react_element_printer {\n display: block !important;\n visibility: visible;\n }\n }\n\n @media screen {\n /* REMOVED: Don't show when not printing. Caused c3 problems */\n /*#react_element_printer {\n visibility: hidden;\n }*/\n }\n\n @page {\n size: " + sizeCss + "; \n margin: 0.5in 0.5in 0.5in 0.5in; \n }\n\n #react_element_printer_splash {\n display: flex; \n align-items: center;\n justify-content: center; \n position: fixed; \n left: 0;\n top: 0;\n z-index: 9999;\n width: 100%;\n height: 100%;\n overflow: visible; \n background-color: rgba(255,255,255,0.8);\n }\n\n @media print {\n #react_element_printer_splash {\n display: none;\n }\n }\n "),
React.createElement("div", { id: "react_element_printer" }, printElem),
React.createElement("div", { id: "react_element_printer_splash" },
React.createElement("div", { style: { fontSize: 30, width: "50%" } },
Expand Down
39 changes: 36 additions & 3 deletions src/widgets/blocks/print.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,17 @@ import { Database, QueryOptions, DatabaseChangeListener, Transaction } from '../
import { Row, DataSource } from 'mwater-expressions';
import { useState, useRef, useMemo, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { LabeledProperty, PropertyEditor } from '../propertyEditors';
import { Select } from 'react-library/lib/bootstrap';

/** Block that can be printed by a print button at top right */
export interface PrintBlockDef extends BlockDef {
type: "print"

content: BlockDef | null

/** Size of the paper. Default is letter-portrait */
paperSize?: "letter-portait" | "letter-landscape"
}

export class PrintBlock extends Block<PrintBlockDef> {
Expand Down Expand Up @@ -51,6 +57,24 @@ export class PrintBlock extends Block<PrintBlockDef> {
renderInstance(ctx: InstanceCtx) {
return <PrintInstance ctx={ctx} blockDef={this.blockDef} />
}

renderEditor(props: DesignCtx) {
return (
<div>
<LabeledProperty label="Paper Size">
<PropertyEditor obj={this.blockDef} onChange={props.store.replaceBlock} property="paperSize">
{(value, onChange) =>
<Select value={value || "letter-portrait"} onChange={onChange}
options={[
{ value: "letter-portrait", label: "Letter (portrait)" },
{ value: "letter-landscape", label: "Letter (landscape)" }
]}
/> }
</PropertyEditor>
</LabeledProperty>
</div>
)
}
}

/** Instance which shows the print button and a preview */
Expand Down Expand Up @@ -116,9 +140,16 @@ const ExecutePrintInstance = (props: {

// Create printable element
const printElem = useMemo(() => {
const paperSize = props.blockDef.paperSize || "letter-portait"

// Create element at 96 dpi (usual for browsers) and 7.5" across (letter - 0.5" each side). 1440 is double, so scale down
let width = 1440
if (paperSize == "letter-landscape") {
width = 1920
}

return <div style={{ transform: "scale(0.5)", transformOrigin: "top left" }}>
<div style={{ width: 1440 }}>
<div style={{ width: width }}>
{ printCtx.renderChildBlock(printCtx, props.blockDef.content) }
</div>
</div>
Expand All @@ -143,6 +174,9 @@ const ExecutePrintInstance = (props: {
return () => { clearInterval(interval) }
}, [])

// Create size css string
const sizeCss = (props.blockDef.paperSize || "letter-portait") == "letter-portait" ? "8.5in 11in" : "11in 8.5in landscape"

// Fragment that contains CSS, splash screen and element to print
const printFragment = <React.Fragment>
<style>
Expand Down Expand Up @@ -175,9 +209,8 @@ const ExecutePrintInstance = (props: {
}*/
}
/* Default to letter sized pages */
@page {
size: 8.5in 11in;
size: ${sizeCss};
margin: 0.5in 0.5in 0.5in 0.5in;
}
Expand Down

0 comments on commit 060c152

Please sign in to comment.