tiling pattern support (bpampuch#2348)

Based on 7fc4fbf

examples/styling_properties.js

@@ -63,7 +63,20 @@ var docDefinition = {
 				' World'
 			]
 		}
-	]
+		,
+		'\n\n',
+		{
+			text: 'Text background pattern', background: ['stripe45d', 'gray']
+		}
+	],
+	patterns: {
+		stripe45d: {
+			boundingBox: [1, 1, 4, 4],
+			xStep: 3,
+			yStep: 3,
+			pattern: '1 w 0 1 m 4 5 l s 2 0 m 5 3 l s'
+		}
+	}
 };
 
 var pdfDoc = printer.createPdfKitDocument(docDefinition);

examples/tables.js

@@ -296,7 +296,7 @@ var docDefinition = {
 			}
 		},
 		{ text: 'handling fill color opacity...', margin: [0, 20, 0, 8] },
-		{ text: '... just hardcoding values in the second row', margin: [0, 20, 0, 8] },
+		{ text: '... just hardcoding values in the second and third row', margin: [0, 20, 0, 8] },
 		{
 			style: 'tableExample',
 			table: {
@@ -307,6 +307,11 @@ var docDefinition = {
 						{text: 'Sample value 2',fillOpacity:0.60,fillColor:'blue'},
 						{text: 'Sample value 3',fillOpacity:0.85,fillColor:'blue'},
 					],
+					[
+						{text: 'Sample value 1',fillOpacity:0.15,fillColor:['stripe45d', 'blue']},
+						{text: 'Sample value 2',fillOpacity:0.60,fillColor:['stripe45d', 'blue']},
+						{text: 'Sample value 3',fillOpacity:0.85,fillColor:['stripe45d', 'blue']},
+					],
 					['Sample value 1', 'Sample value 2', 'Sample value 3']
 				]
 			},
@@ -703,6 +708,14 @@ var docDefinition = {
 	},
 	defaultStyle: {
 		// alignment: 'justify'
+	},
+	patterns: {
+		stripe45d: {
+			boundingBox: [1, 1, 4, 4],
+			xStep: 3,
+			yStep: 3,
+			pattern: '1 w 0 1 m 4 5 l s 2 0 m 5 3 l s'
+		}
 	}
 };
 

examples/vectors.js

@@ -29,7 +29,7 @@ var docDefinition = {
 					x: 0,
 					y: 0,
 					w: 310,
-					h: 260,
+					h: 290,
 					r: 5,
 					dash: { length: 5 },
 					// lineWidth: 10,
@@ -40,7 +40,7 @@ var docDefinition = {
 					x: 1,
 					y: 1,
 					w: 308,
-					h: 258,
+					h: 288,
 					r: 4,
 					lineColor: 'red',
 					color: '#ffffe0',
@@ -113,6 +113,11 @@ var docDefinition = {
 					r1: 30, r2: 20,
 					linearGradient: ['red', 'green', 'blue', 'red'],
 				},
+				{
+					type: 'rect',
+					x: 10, y: 250, w: 50, h: 30,
+					color: ['stripe45d', 'blue'],
+				}
 			]
 		},
 		'This text should be rendered under canvas',
@@ -126,6 +131,14 @@ var docDefinition = {
 	],
 	defaultStyle: {
 		color: 'gray',
+	},
+	patterns: {
+		stripe45d: {
+			boundingBox: [1, 1, 4, 4],
+			xStep: 3,
+			yStep: 3,
+			pattern: '1 w 0 1 m 4 5 l s 2 0 m 5 3 l s'
+		}
 	}
 };
 

src/helpers.js

@@ -97,6 +97,17 @@ function getNodeId(node) {
 	return null;
 }
 
+function isPattern(color) {
+	return isArray(color) && color.length === 2;
+}
+
+// converts from a [<pattern name>, <color>] as used by pdfmake
+// into [<pattern object>, <color>] as used by pdfkit
+// (the pattern has to be registered in the doc definition of course)
+function getPattern(color, patterns){
+	return [patterns[color[0]], color[1]];
+}
+
 module.exports = {
 	isString: isString,
 	isNumber: isNumber,
@@ -109,5 +120,7 @@ module.exports = {
 	pack: pack,
 	fontStringify: fontStringify,
 	offsetVector: offsetVector,
-	getNodeId: getNodeId
+	getNodeId: getNodeId,
+	isPattern: isPattern,
+	getPattern: getPattern
 };

src/printer.js

@@ -15,6 +15,8 @@ var isNumber = require('./helpers').isNumber;
 var isBoolean = require('./helpers').isBoolean;
 var isArray = require('./helpers').isArray;
 var isUndefined = require('./helpers').isUndefined;
+var isPattern = require('./helpers').isPattern;
+var getPattern = require('./helpers').getPattern;
 
 var getSvgToPDF = function () {
 	try {
@@ -96,8 +98,16 @@ function PdfPrinter(fontDescriptors) {
  *	],
  *	styles: {
  *		header: { fontSize: 30, bold: true }
+ *	},
+ *	patterns: {
+ *		stripe45d: {
+ *			boundingBox: [1, 1, 4, 4],
+ *			xStep: 3,
+ *			yStep: 3,
+ *			pattern: '1 w 0 1 m 4 5 l s 2 0 m 5 3 l s'
+ *		}
  *	}
- * }
+ * };
  *
  * var pdfKitDoc = printer.createPdfKitDocument(docDefinition);
  *
@@ -157,7 +167,9 @@ PdfPrinter.prototype.createPdfKitDocument = function (docDefinition, options) {
 		this.pdfKitDoc.options.size = [pageSize.width, pageHeight];
 	}
 
-	renderPages(pages, this.fontProvider, this.pdfKitDoc, options.progressCallback);
+	var patterns = createPatterns(docDefinition.patterns || {}, this.pdfKitDoc);
+
+	renderPages(pages, this.fontProvider, this.pdfKitDoc, patterns, options.progressCallback);
 
 	if (options.autoPrint) {
 		var printActionRef = this.pdfKitDoc.ref({
@@ -355,7 +367,7 @@ function updatePageOrientationInOptions(currentPage, pdfKitDoc) {
 	}
 }
 
-function renderPages(pages, fontProvider, pdfKitDoc, progressCallback) {
+function renderPages(pages, fontProvider, pdfKitDoc, patterns, progressCallback) {
 	pdfKitDoc._pdfMakePages = pages;
 	pdfKitDoc.addPage();
 
@@ -381,10 +393,10 @@ function renderPages(pages, fontProvider, pdfKitDoc, progressCallback) {
 			var item = page.items[ii];
 			switch (item.type) {
 				case 'vector':
-					renderVector(item.item, pdfKitDoc);
+					renderVector(item.item, patterns, pdfKitDoc);
 					break;
 				case 'line':
-					renderLine(item.item, item.item.x, item.item.y, pdfKitDoc);
+					renderLine(item.item, item.item.x, item.item.y, patterns, pdfKitDoc);
 					break;
 				case 'image':
 					renderImage(item.item, item.item.x, item.item.y, pdfKitDoc);
@@ -427,7 +439,7 @@ function offsetText(y, inline) {
 	return newY;
 }
 
-function renderLine(line, x, y, pdfKitDoc) {
+function renderLine(line, x, y, patterns, pdfKitDoc) {
 	function preparePageNodeRefLine(_pageNodeRef, inline) {
 		var newWidth;
 		var diffWidth;
@@ -465,7 +477,7 @@ function renderLine(line, x, y, pdfKitDoc) {
 	var ascenderHeight = line.getAscenderHeight();
 	var descent = lineHeight - ascenderHeight;
 
-	textDecorator.drawBackground(line, x, y, pdfKitDoc);
+	textDecorator.drawBackground(line, x, y, patterns, pdfKitDoc);
 
 	//TODO: line.optimizeInlines();
 	for (var i = 0, l = line.inlines.length; i < l; i++) {
@@ -539,7 +551,7 @@ function renderWatermark(page, pdfKitDoc) {
 	pdfKitDoc.restore();
 }
 
-function renderVector(vector, pdfKitDoc) {
+function renderVector(vector, patterns, pdfKitDoc) {
 	//TODO: pdf optimization (there's no need to write all properties everytime)
 	pdfKitDoc.lineWidth(vector.lineWidth || 1);
 	if (vector.dash) {
@@ -611,6 +623,10 @@ function renderVector(vector, pdfKitDoc) {
 		vector.color = gradient;
 	}
 
+	if (isPattern(vector.color)) {
+		vector.color = getPattern(vector.color, patterns);
+	}
+
 	var fillOpacity = isNumber(vector.fillOpacity) ? vector.fillOpacity : 1;
 	var strokeOpacity = isNumber(vector.strokeOpacity) ? vector.strokeOpacity : 1;
 
@@ -682,4 +698,13 @@ function endClip(pdfKitDoc) {
 	pdfKitDoc.restore();
 }
 
+function createPatterns(patternDefinitions, pdfKitDoc) {
+	var patterns = {};
+	Object.keys(patternDefinitions).forEach(function(p) {
+		var pattern = patternDefinitions[p];
+		patterns[p] = pdfKitDoc.pattern(pattern.boundingBox, pattern.xStep, pattern.yStep, pattern.pattern, pattern.colored);
+	});
+	return patterns;
+  }
+
 module.exports = PdfPrinter;

src/textDecorator.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var isArray = require('./helpers').isArray;
+var isPattern = require('./helpers').isPattern;
+var getPattern = require('./helpers').getPattern;
 
 function groupDecorations(line) {
 	var groups = [], currentGroup = null;
@@ -131,15 +133,19 @@ function drawDecorations(line, x, y, pdfKitDoc) {
 	}
 }
 
-function drawBackground(line, x, y, pdfKitDoc) {
+function drawBackground(line, x, y, patterns, pdfKitDoc) {
 	var height = line.getHeight();
 	for (var i = 0, l = line.inlines.length; i < l; i++) {
 		var inline = line.inlines[i];
 		if (!inline.background) {
 			continue;
 		}
+		var color = inline.background;
+		if (isPattern(inline.background)) {
+			color = getPattern(inline.background, patterns);
+		}
 		var justifyShift = (inline.justifyShift || 0);
-		pdfKitDoc.fillColor(inline.background)
+		pdfKitDoc.fillColor(color)
 			.rect(x + inline.x - justifyShift, y, inline.width + justifyShift, height)
 			.fill();
 	}