Fix printing

mWater · Jul 9, 2020 · 97242aa · 97242aa
1 parent f1629a1
commit 97242aa
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 8 deletions.
diff --git a/lib/widgets/blocks/print.js b/lib/widgets/blocks/print.js
@@ -113,7 +113,9 @@ var ExecutePrintInstance = function (props) {
     }, []);
     // Create printable element
     var printElem = react_1.useMemo(function () {
-        return printCtx.renderChildBlock(printCtx, props.blockDef.content);
+        // Create element at 96 dpi (usual for browsers) and 7.5" across (letter - 0.5" each side). 1440 is double, so scale down
+        return React.createElement("div", { style: { transform: "scale(0.5)", transformOrigin: "top left" } },
+            React.createElement("div", { style: { width: 1440 } }, printCtx.renderChildBlock(printCtx, props.blockDef.content)));
     }, [printCtx]);
     // Perform print after delay of waiting for no queries
     react_1.useEffect(function () {

diff --git a/lib/widgets/blocks/toc/TOCInstanceComp.js b/lib/widgets/blocks/toc/TOCInstanceComp.js
@@ -50,10 +50,10 @@ function TOCInstanceComp(props) {
         if (item.id === selectedId) {
             itemLabelStyle.backgroundColor = "#DDD";
         }
-        return react_2.default.createElement("div", null,
-            react_2.default.createElement("div", { onClick: handleItemClick.bind(null, item), style: itemLabelStyle }, localization_1.localize(item.label, instanceCtx.locale)),
+        return react_2.default.createElement("div", { key: item.id },
+            react_2.default.createElement("div", { key: "label", onClick: handleItemClick.bind(null, item), style: itemLabelStyle }, localization_1.localize(item.label, instanceCtx.locale)),
             item.children.length > 0 ?
-                react_2.default.createElement("div", { style: { marginLeft: 10 } }, item.children.map(function (child, index) { return renderItem(item.children, index, depth + 1); }))
+                react_2.default.createElement("div", { key: "children", style: { marginLeft: 10 } }, item.children.map(function (child, index) { return renderItem(item.children, index, depth + 1); }))
                 : null);
     };
     var renderLeft = function () {

diff --git a/src/widgets/blocks/print.tsx b/src/widgets/blocks/print.tsx
@@ -116,7 +116,12 @@ const ExecutePrintInstance = (props: {
 
   // Create printable element
   const printElem = useMemo(() => {
-    return printCtx.renderChildBlock(printCtx, props.blockDef.content)
+    // Create element at 96 dpi (usual for browsers) and 7.5" across (letter - 0.5" each side). 1440 is double, so scale down
+    return <div style={{ transform: "scale(0.5)", transformOrigin: "top left" }}>
+      <div style={{ width: 1440 }}>
+        { printCtx.renderChildBlock(printCtx, props.blockDef.content) }
+      </div>
+    </div>
   }, [printCtx])
 
   // Perform print after delay of waiting for no queries

diff --git a/src/widgets/blocks/toc/TOCInstanceComp.tsx b/src/widgets/blocks/toc/TOCInstanceComp.tsx
@@ -62,12 +62,12 @@ export default function TOCInstanceComp(props: {
       itemLabelStyle.backgroundColor = "#DDD"
     }
 
-    return <div>
-      <div onClick={handleItemClick.bind(null, item)} style={itemLabelStyle}>
+    return <div key={item.id}>
+      <div key="label" onClick={handleItemClick.bind(null, item)} style={itemLabelStyle}>
         {localize(item.label, instanceCtx.locale)}
       </div>
       { item.children.length > 0 ? 
-        <div style={{ marginLeft: 10 }}>
+        <div key="children" style={{ marginLeft: 10 }}>
           { item.children.map((child, index) => renderItem(item.children, index, depth + 1)) }
         </div>
       : null}