Add support for page auto height (#611)

src/elements/Base.js

@@ -106,13 +106,15 @@ class Base extends Node {
   }
 
   resolveStyles() {
-    const { size, orientation } = this.page;
-
-    const ownStyles = StyleSheet.resolve(this.props.style, {
+    const { size, orientation, isAutoHeight } = this.page;
+    const container = {
       orientation,
+      isAutoHeight,
       width: size.width,
       height: size.height,
-    });
+    };
+
+    const ownStyles = StyleSheet.resolve(this.props.style, container);
 
     const inheritedStyles = this.parent
       ? pick(inheritedProperties, this.parent.style)

src/elements/Document.js

@@ -143,15 +143,17 @@ class Document {
     const pages = [];
 
     for (const page of this.children) {
-      const wrapArea = page.size.height - (page.style.paddingBottom || 0);
       if (page.wrap) {
+        const wrapArea = page.isAutoHeight
+          ? Infinity
+          : page.size.height - (page.style.paddingBottom || 0);
+
         const subpages = await wrapPages(page, wrapArea, pageCount);
 
         pageCount += subpages.length;
 
         pages.push(...subpages);
       } else {
-        page.height = page.size.height;
         pages.push(page);
       }
     }

src/elements/Image.js

@@ -32,13 +32,14 @@ class Image extends Base {
   measureImage(width, widthMode, height, heightMode) {
     const imageMargin = this.margin;
     const pagePadding = this.page.padding;
-    const pageArea =
-      this.page.size.height -
-      pagePadding.top -
-      pagePadding.bottom -
-      imageMargin.top -
-      imageMargin.bottom -
-      SAFETY_HEIGHT;
+    const pageArea = this.page.isAutoHeight
+      ? Infinity
+      : this.page.size.height -
+        pagePadding.top -
+        pagePadding.bottom -
+        imageMargin.top -
+        imageMargin.bottom -
+        SAFETY_HEIGHT;
 
     // Skip measure if image data not present yet
     if (!this.image) return { width: 0, height: 0 };

src/elements/Page.js

@@ -55,6 +55,10 @@ class Page extends Base {
     return this._size;
   }
 
+  get isAutoHeight() {
+    return typeof this.size.height === 'undefined';
+  }
+
   resetMargins() {
     if (
       !!this.marginTop ||
@@ -179,24 +183,31 @@ class Page extends Base {
   async render() {
     const { instance } = this.root;
 
-    this.height = this.size.height;
+    if (!this.isAutoHeight) {
+      this.height = this.size.height;
+    }
+
     this.calculateLayout();
 
+    const height = this.isAutoHeight ? this.height : this.size.height;
+
     instance.addPage({
-      size: [this.size.width, this.size.height],
+      size: [this.size.width, height],
       margin: 0,
     });
 
     if (this.style.backgroundColor) {
       instance
         .fillColor(this.style.backgroundColor)
-        .rect(0, 0, this.size.width, this.size.height)
+        .rect(0, 0, this.size.width, height)
         .fill();
     }
 
     await this.renderChildren();
 
-    if (this.props.debug) this.debug();
+    if (this.props.debug) {
+      this.debug();
+    }
 
     this.renderRuler();
   }

src/stylesheet/transformUnits.js

@@ -20,6 +20,12 @@ const parseScalar = (value, container) => {
     case 'cm':
       return scalar.value * (1 / 2.54) * DPI;
     case 'vh':
+      if (container.isAutoHeight) {
+        throw new Error(
+          'vh unit not supported in auto-height pages. Please specify page height if you want to use vh.',
+        );
+      }
+
       return scalar.value * (container.height / 100);
     case 'vw':
       return scalar.value * (container.width / 100);

src/utils/pageSizes.js

@@ -52,15 +52,17 @@ const PAGE_SIZES = {
 };
 
 // Return page size in an object { width, height } given the passed size and orientation
-// Accepts page type, array or object as parameter
+// Accepts page type string, number, array or object as parameter
 const getPageSize = (size, orientation = 'portrait') => {
   let result;
 
   if (typeof size === 'string') {
     result = PAGE_SIZES[size.toUpperCase()];
   } else if (Array.isArray(size)) {
     result = size;
-  } else if (typeof size === 'object' && size.width && size.height) {
+  } else if (typeof size === 'number') {
+    result = [size];
+  } else if (typeof size === 'object' && size.width) {
     result = [size.width, size.height];
   } else {
     throw new Error(`Invalid Page size: ${size}`);