Fix margin values not working for html

src/modules/context2d.js

@@ -46,6 +46,8 @@ import { console } from "../libs/console.js";
     this.currentPoint = ctx.currentPoint || new Point();
     this.miterLimit = ctx.miterLimit || 10.0;
     this.lastPoint = ctx.lastPoint || new Point();
+    this.margin = ctx.margin || [0, 0, 0, 0];
+    this.prevPageLastElemOffset = ctx.prevPageLastElemOffset || 0;
 
     this.ignoreClearRect =
       typeof ctx.ignoreClearRect === "boolean" ? ctx.ignoreClearRect : true;
@@ -157,6 +159,20 @@ import { console } from "../libs/console.js";
       }
     });
 
+    /**
+     * @name margin
+     * @type {array}
+     * @default [0, 0, 0, 0]
+     */
+    Object.defineProperty(this, "margin", {
+      get: function() {
+        return _ctx.margin;
+      },
+      set: function(value) {
+        _ctx.margin = value;
+      }
+    });
+
     var _autoPaging = false;
     /**
      * @name autoPaging
@@ -1457,29 +1473,35 @@ import { console } from "../libs/console.js";
       for (var i = min; i < max + 1; i++) {
         this.pdf.setPage(i);
 
+        var topMargin = (i === min ? this.posY + this.margin[0] : this.margin[0]);
+        var firstPageHeight = this.pdf.internal.pageSize.height - this.posY - this.margin[0] - this.margin[2];
+        var pageHeightMinusMargin = this.pdf.internal.pageSize.height - this.margin[0] - this.margin[2];
+        var pageWidthMinusMargin = this.pdf.internal.pageSize.width - this.margin[1];
+        var previousPageHeightSum = i === 1 ? 0 : firstPageHeight + (i - 2) * pageHeightMinusMargin;
+
         if (this.ctx.clip_path.length !== 0) {
           var tmpPaths = this.path;
           clipPath = JSON.parse(JSON.stringify(this.ctx.clip_path));
           this.path = pathPositionRedo(
             clipPath,
-            this.posX,
-            -1 * this.pdf.internal.pageSize.height * (i - 1) + this.posY
+            this.posX + this.margin[3],
+            -1 * previousPageHeightSum + topMargin + this.ctx.prevPageLastElemOffset
           );
           drawPaths.call(this, "fill", true);
           this.path = tmpPaths;
         }
         var tmpRect = JSON.parse(JSON.stringify(xRect));
         tmpRect = pathPositionRedo(
           [tmpRect],
-          this.posX,
-          -1 * this.pdf.internal.pageSize.height * (i - 1) + this.posY
+          this.posX + this.margin[3],
+          -1 * previousPageHeightSum + topMargin + this.ctx.prevPageLastElemOffset
         )[0];
         this.pdf.addImage(
           img,
           "JPEG",
           tmpRect.x,
           tmpRect.y,
-          tmpRect.w,
+          Math.min(tmpRect.w, this.pdf.internal.pageSize.width - this.margin[1] - tmpRect.x),
           tmpRect.h,
           null,
           null,
@@ -1504,7 +1526,7 @@ import { console } from "../libs/console.js";
   var getPagesByPath = function(path, pageWrapX, pageWrapY) {
     var result = [];
     pageWrapX = pageWrapX || this.pdf.internal.pageSize.width;
-    pageWrapY = pageWrapY || this.pdf.internal.pageSize.height;
+    pageWrapY = pageWrapY || this.pdf.internal.pageSize.height - this.margin[0] - this.margin[2];
 
     switch (path.type) {
       default:
@@ -1653,22 +1675,27 @@ import { console } from "../libs/console.js";
         this.lineWidth = lineWidth;
         this.lineJoin = lineJoin;
 
+        var topMargin = (k === min ? this.posY + this.margin[0] : this.margin[0]);
+        var firstPageHeight = this.pdf.internal.pageSize.height - this.posY - this.margin[0] - this.margin[2];
+        var pageHeightMinusMargin = this.pdf.internal.pageSize.height - this.margin[0] - this.margin[2];
+        var previousPageHeightSum = k === 1 ? 0 : firstPageHeight + (k - 2) * pageHeightMinusMargin;
+
         if (this.ctx.clip_path.length !== 0) {
           var tmpPaths = this.path;
           clipPath = JSON.parse(JSON.stringify(this.ctx.clip_path));
           this.path = pathPositionRedo(
             clipPath,
-            this.posX,
-            -1 * this.pdf.internal.pageSize.height * (k - 1) + this.posY
+            this.posX + this.margin[3],
+            -1 * previousPageHeightSum + topMargin + this.ctx.prevPageLastElemOffset
           );
           drawPaths.call(this, rule, true);
           this.path = tmpPaths;
         }
         tmpPath = JSON.parse(JSON.stringify(origPath));
         this.path = pathPositionRedo(
           tmpPath,
-          this.posX,
-          -1 * this.pdf.internal.pageSize.height * (k - 1) + this.posY
+          this.posX + this.margin[3],
+          -1 * previousPageHeightSum + topMargin + this.ctx.prevPageLastElemOffset
         );
         if (isClip === false || k === 0) {
           drawPaths.call(this, rule, isClip);
@@ -2007,28 +2034,34 @@ import { console } from "../libs/console.js";
     sortPages(pages);
 
     var clipPath, oldSize, oldLineWidth;
-    if (this.autoPaging === true) {
+    if (this.autoPaging) {
       var min = pages[0];
       var max = pages[pages.length - 1];
       for (var i = min; i < max + 1; i++) {
         this.pdf.setPage(i);
 
+        var topMargin = (i === 1 ? this.posY + this.margin[0] : this.margin[0]);
+        var firstPageHeight = this.pdf.internal.pageSize.height - this.posY - this.margin[0] - this.margin[2];
+        var pageHeightMinusMargin = this.pdf.internal.pageSize.height - this.margin[0] - this.margin[2];
+        var pageWidthMinusMargin = this.pdf.internal.pageSize.width - this.margin[1];
+        var previousPageHeightSum = i === 1 ? 0 : firstPageHeight + (i - 2) * pageHeightMinusMargin;
+
         if (this.ctx.clip_path.length !== 0) {
           var tmpPaths = this.path;
           clipPath = JSON.parse(JSON.stringify(this.ctx.clip_path));
           this.path = pathPositionRedo(
             clipPath,
-            this.posX,
-            -1 * this.pdf.internal.pageSize.height * (i - 1) + this.posY
+            this.posX + this.margin[3],
+            -1 * previousPageHeightSum + topMargin
           );
           drawPaths.call(this, "fill", true);
           this.path = tmpPaths;
         }
         var tmpRect = JSON.parse(JSON.stringify(textRect));
         tmpRect = pathPositionRedo(
           [tmpRect],
-          this.posX,
-          -1 * this.pdf.internal.pageSize.height * (i - 1) + this.posY
+          this.posX + this.margin[3],
+          -1 * previousPageHeightSum + topMargin + this.ctx.prevPageLastElemOffset
         )[0];
 
         if (options.scale >= 0.01) {
@@ -2037,12 +2070,24 @@ import { console } from "../libs/console.js";
           oldLineWidth = this.lineWidth;
           this.lineWidth = oldLineWidth * options.scale;
         }
-        this.pdf.text(options.text, tmpRect.x, tmpRect.y, {
-          angle: options.angle,
-          align: textAlign,
-          renderingMode: options.renderingMode,
-          maxWidth: options.maxWidth
-        });
+
+        if (tmpRect.y <= pageHeightMinusMargin) {
+          if (tmpRect.y - tmpRect.h >= 0 && tmpRect.x <= pageWidthMinusMargin) {
+            var croppedText = this.pdf.splitTextToSize(options.text, options.maxWidth || pageWidthMinusMargin - tmpRect.x)[0];
+            this.pdf.text(croppedText, tmpRect.x, tmpRect.y, {
+              angle: options.angle,
+              align: textAlign,
+              renderingMode: options.renderingMode,
+              renderMaxWidthOverflow: false
+            });
+          }
+        } else {
+          // This text is the last element of the page, but it got cut off due to the margin
+          // so we render it in the next page
+
+          // As a result, all other elements have their y offset increased
+          this.ctx.prevPageLastElemOffset += pageHeightMinusMargin - tmpRect.y + tmpRect.h;
+        }
 
         if (options.scale >= 0.01) {
           this.pdf.setFontSize(oldSize);
@@ -2056,7 +2101,7 @@ import { console } from "../libs/console.js";
         oldLineWidth = this.lineWidth;
         this.lineWidth = oldLineWidth * options.scale;
       }
-      this.pdf.text(options.text, pt.x + this.posX, pt.y + this.posY, {
+      this.pdf.text(options.text, pt.x + this.posX + this.margin[3], pt.y + this.posY, {
         angle: options.angle,
         align: textAlign,
         renderingMode: options.renderingMode,

src/modules/html.js

@@ -449,6 +449,7 @@ import { globalObject } from "../libs/globalObject.js";
         pdf.context2d.autoPaging = true;
         pdf.context2d.posX = this.opt.x;
         pdf.context2d.posY = this.opt.y;
+        pdf.context2d.margin = this.opt.margin;
 
         options.windowHeight = options.windowHeight || 0;
         options.windowHeight =

test/specs/html.spec.js

@@ -14,4 +14,107 @@ describe("Module: html", function() {
     );
     comparePdf(doc.output(), "html-basic.pdf", "html");
   });
+
+  it("html margin insets properly", async () => {
+    const doc = jsPDF({ floatPrecision: 2, unit: "pt" });
+    doc.line(30, 10, 100, 10);
+    doc.line(30, 10, 30, 100);
+    await new Promise(resolve =>
+      doc.html(
+        "<div style='background: red; width: 10px; height: 10px;'></div>",
+        {
+          callback: resolve,
+          margin: [10, 30]
+        }
+      )
+    );
+    comparePdf(doc.output(), "html-margin.pdf", "html");
+  });
+
+  it("html margin on page break", async () => {
+    const doc = jsPDF({ floatPrecision: 2, unit: "pt" });
+    doc.rect(
+      30,
+      10,
+      doc.internal.pageSize.getWidth() - 60,
+      doc.internal.pageSize.getHeight() - 20
+    );
+    await new Promise(resolve =>
+      doc.html(
+        "<div style='background: red; width: 10px; height: 1000px;'></div>",
+        {
+          callback: resolve,
+          margin: [10, 30, 10, 30]
+        }
+      )
+    );
+    doc.rect(
+      30,
+      10,
+      doc.internal.pageSize.getWidth() - 60,
+      doc.internal.pageSize.getHeight() - 20
+    );
+    comparePdf(doc.output(), "html-margin-page-break.pdf", "html");
+  });
+
+  it("html x, y offsets properly", async () => {
+    const doc = jsPDF({ floatPrecision: 2, unit: "pt" });
+    doc.line(30, 10, 100, 10);
+    doc.line(30, 10, 30, 100);
+    await new Promise(resolve =>
+      doc.html(
+        "<div style='background: red; width: 10px; height: 10px;'></div>",
+        {
+          callback: resolve,
+          x: 30,
+          y: 10
+        }
+      )
+    );
+    comparePdf(doc.output(), "html-x-y.pdf", "html");
+  });
+
+  it("html x, y + margin offsets properly", async () => {
+    const doc = jsPDF({ floatPrecision: 2, unit: "pt" });
+    doc.line(30, 10, 100, 10);
+    doc.line(30, 10, 30, 100);
+    await new Promise(resolve =>
+      doc.html(
+        "<div style='background: red; width: 10px; height: 10px;'></div>",
+        {
+          callback: resolve,
+          x: 10,
+          y: 3,
+          margin: [7, 20]
+        }
+      )
+    );
+    comparePdf(doc.output(), "html-margin-x-y.pdf", "html");
+  });
+
+  it("page break with text", async () => {
+    const doc = jsPDF({ floatPrecision: 2, unit: "pt" });
+    doc.rect(
+      30,
+      10,
+      doc.internal.pageSize.getWidth() - 60,
+      doc.internal.pageSize.getHeight() - 20
+    );
+    await new Promise(resolve =>
+      doc.html(
+        "<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>",
+        {
+          callback: resolve,
+          margin: [10, 30, 10, 30]
+        }
+      )
+    );
+    doc.rect(
+      30,
+      10,
+      doc.internal.pageSize.getWidth() - 60,
+      doc.internal.pageSize.getHeight() - 20
+    );
+    comparePdf(doc.output(), "html-margin-page-break-text.pdf", "html");
+  });
 });