diff --git a/lib/widgets/blocks/print.d.ts b/lib/widgets/blocks/print.d.ts index 93d52786..94b156ac 100644 --- a/lib/widgets/blocks/print.d.ts +++ b/lib/widgets/blocks/print.d.ts @@ -5,6 +5,8 @@ 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 { getChildren(contextVars: ContextVar[]): ChildBlock[]; @@ -12,4 +14,5 @@ export declare class PrintBlock extends Block { processChildren(action: (self: BlockDef | null) => BlockDef | null): BlockDef; renderDesign(props: DesignCtx): JSX.Element; renderInstance(ctx: InstanceCtx): JSX.Element; + renderEditor(props: DesignCtx): JSX.Element; } diff --git a/lib/widgets/blocks/print.js b/lib/widgets/blocks/print.js index c5e05a1c..fa7cb91b 100644 --- a/lib/widgets/blocks/print.js +++ b/lib/widgets/blocks/print.js @@ -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() { @@ -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; @@ -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 () { @@ -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%" } }, diff --git a/src/widgets/blocks/print.tsx b/src/widgets/blocks/print.tsx index 295d387f..e926202a 100644 --- a/src/widgets/blocks/print.tsx +++ b/src/widgets/blocks/print.tsx @@ -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 { @@ -51,6 +57,24 @@ export class PrintBlock extends Block { renderInstance(ctx: InstanceCtx) { return } + + renderEditor(props: DesignCtx) { + return ( +
+ + + {(value, onChange) => +