Feature/table cell vertical alignment

src/DocPreprocessor.js

@@ -23,7 +23,8 @@ class DocPreprocessor {
 		return this.preprocessNode(docStructure);
 	}
 
-	preprocessNode(node) {
+	// begin - Vertical alignment
+	checkNode(node) {
 		// expand shortcuts and casting values
 		if (Array.isArray(node)) {
 			node = { stack: node };
@@ -32,6 +33,14 @@ class DocPreprocessor {
 		} else if ('text' in node) { // cast value in text property
 			node.text = convertValueToString(node.text);
 		}
+		return node;
+	};
+	// end - Vertical alignment
+
+	preprocessNode(node) {
+		// begin - Vertical alignment
+		node = this.checkNode(node);
+		// end - Vertical alignment
 
 		if (node.columns) {
 			return this.preprocessColumns(node);
@@ -68,6 +77,10 @@ class DocPreprocessor {
 		let columns = node.columns;
 
 		for (let i = 0, l = columns.length; i < l; i++) {
+			// begin - Vertical alignment
+			columns[i] = this.checkNode(columns[i]);
+			columns[i].__nodeRef = node.__nodeRef ?? node;
+			// end - Vertical alignment
 			columns[i] = this.preprocessNode(columns[i]);
 		}
 
@@ -78,6 +91,10 @@ class DocPreprocessor {
 		let items = node.stack;
 
 		for (let i = 0, l = items.length; i < l; i++) {
+			// begin - Vertical alignment
+			items[i] = this.checkNode(items[i]);
+			items[i].__nodeRef = node.__nodeRef ?? node;
+			// end - Vertical alignment
 			items[i] = this.preprocessNode(items[i]);
 		}
 
@@ -88,6 +105,10 @@ class DocPreprocessor {
 		let items = node.ul || node.ol;
 
 		for (let i = 0, l = items.length; i < l; i++) {
+			// begin - Vertical alignment
+			items[i] = this.checkNode(items[i]);
+			items[i].__nodeRef = node.__nodeRef ?? node;
+			// end - Vertical alignment
 			items[i] = this.preprocessNode(items[i]);
 		}
 

src/ElementWriter.js

@@ -125,6 +125,9 @@ class ElementWriter extends EventEmitter {
 		this.alignCanvas(node);
 
 		node.canvas.forEach(function (vector) {
+			// begin - Vertical alignment
+			vector.__nodeRef = node.__nodeRef ?? node;
+			// end - Vertical alignment
 			let position = this.addVector(vector, false, false, index);
 			positions.push(position);
 			if (index !== undefined) {
@@ -188,6 +191,9 @@ class ElementWriter extends EventEmitter {
 			let vector = qr._canvas[i];
 			vector.x += qr.x;
 			vector.y += qr.y;
+			// begin - Vertical alignment
+			vector.__nodeRef = qr.__nodeRef ?? qr;
+			// end - Vertical alignment
 			this.addVector(vector, true, true, index);
 		}
 

src/LayoutBuilder.js

@@ -140,6 +140,9 @@ class LayoutBuilder {
 
 		this.docPreprocessor = new DocPreprocessor();
 		this.docMeasure = new DocMeasure(pdfDocument, styleDictionary, defaultStyle, this.svgMeasure, this.tableLayouts);
+		// begin - Vertical alignment
+		this.__nodesHierarchy = [];
+		// end - Vertical alignment
 
 		function resetXYs(result) {
 			result.linearNodeList.forEach(node => {
@@ -457,12 +460,21 @@ class LayoutBuilder {
 
 	// vertical container
 	processVerticalContainer(node) {
+		// begin - Vertical alignment
+		this.__nodesHierarchy.push(node);
+		node.__contentHeight = 0;
+		// end - Vertical alignment
+
 		node.stack.forEach(item => {
 			this.processNode(item);
 			addAll(node.positions, item.positions);
 
 			//TODO: paragraph gap
 		}, this);
+		// begin - Vertical alignment
+		const lastNode = this.__nodesHierarchy.pop();
+		this.__nodesHierarchy.length > 0 && (this.__nodesHierarchy[this.__nodesHierarchy.length - 1].__contentHeight += lastNode.__contentHeight);
+		// end - Vertical alignment
 	}
 
 	// columns
@@ -474,6 +486,10 @@ class LayoutBuilder {
 		if (gaps) {
 			availableWidth -= (gaps.length - 1) * columnNode._gap;
 		}
+		// begin - Vertical alignment
+		columnNode.__contentHeight = 0;
+		this.__nodesHierarchy.push(columnNode);
+		// end - Vertical alignment
 
 		ColumnCalculator.buildColumnWidths(columns, availableWidth);
 		let result = this.processRow(columns, columns, gaps);
@@ -493,6 +509,11 @@ class LayoutBuilder {
 
 			return gaps;
 		}
+		// begin - Vertical alignment
+		const lastNode = this.__nodesHierarchy.pop();
+		lastNode.__contentHeight = Math.max(...columns.map(c => c.__contentHeight));
+		this.__nodesHierarchy[this.__nodesHierarchy.length - 1].__contentHeight += lastNode.__contentHeight;
+		// end - Vertical alignment
 	}
 
 	processRow(columns, widths, gaps, tableBody, tableRow, height) {
@@ -582,18 +603,29 @@ class LayoutBuilder {
 
 				if (marker.canvas) {
 					let vector = marker.canvas[0];
+					// begin - Vertical alignment
+					vector.__nodeRef = line.__nodeRef ?? line;
+					vector._height = marker._maxHeight;
+					// end - Vertical alignment
 
 					offsetVector(vector, -marker._minWidth, 0);
 					this.writer.addVector(vector);
 				} else if (marker._inlines) {
 					let markerLine = new Line(this.pageSize.width);
+					// begin - Vertical alignment
+					markerLine.__nodeRef = line.__nodeRef ?? line;
+					// end - Vertical alignment
 					markerLine.addInline(marker._inlines[0]);
 					markerLine.x = -marker._minWidth;
 					markerLine.y = line.getAscenderHeight() - markerLine.getAscenderHeight();
 					this.writer.addLine(markerLine, true);
 				}
 			}
 		};
+		// begin - Vertical alignment
+		this.__nodesHierarchy.push(node);
+		node.__contentHeight = 0;
+		// end - Vertical alignment
 
 		let items = orderedList ? node.ol : node.ul;
 		let gapSize = node._gapSize;
@@ -605,6 +637,9 @@ class LayoutBuilder {
 		this.writer.addListener('lineAdded', addMarkerToFirstLeaf);
 
 		items.forEach(item => {
+			// begin - Vertical alignment
+			item.__nodeRef = node.__nodeRef ?? node;
+			// end - Vertical alignment
 			nextMarker = item.listMarker;
 			this.processNode(item);
 			addAll(node.positions, item.positions);
@@ -613,6 +648,10 @@ class LayoutBuilder {
 		this.writer.removeListener('lineAdded', addMarkerToFirstLeaf);
 
 		this.writer.context().addMargin(-gapSize.width);
+		// begin - Vertical alignment
+		const lastNode = this.__nodesHierarchy.pop();
+		this.__nodesHierarchy[this.__nodesHierarchy.length - 1].__contentHeight += lastNode.__contentHeight;
+		// end - Vertical alignment
 	}
 
 	// tables
@@ -649,7 +688,13 @@ class LayoutBuilder {
 
 	// leafs (texts)
 	processLeaf(node) {
+		// begin - Vertical alignment
+		node = this.docPreprocessor.checkNode(node);
+		// end - Vertical alignment
 		let line = this.buildNextLine(node);
+		// begin - Vertical alignment
+		line && (line.__nodeRef = node.__nodeRef ?? node);
+		// end - Vertical alignment
 		if (line && (node.tocItem || node.id)) {
 			line._node = node;
 		}
@@ -688,9 +733,16 @@ class LayoutBuilder {
 			node.positions.push(positions);
 			line = this.buildNextLine(node);
 			if (line) {
+				// begin - Vertical alignment
+				line.__nodeRef = node.__nodeRef ?? node;
+				// end - Vertical alignment
 				currentHeight += line.getHeight();
 			}
 		}
+		// begin - Vertical alignment
+		node.__contentHeight = currentHeight;
+		this.__nodesHierarchy.length > 0 && (this.__nodesHierarchy[this.__nodesHierarchy.length - 1].__contentHeight += currentHeight);
+		// end - Vertical alignment
 	}
 
 	processToc(node) {

src/TableProcessor.js

@@ -1,12 +1,18 @@
 import ColumnCalculator from './columnCalculator';
 import { isNumber } from './helpers/variableType';
+// begin - Vertical alignment
+import { offsetVector } from './helpers/tools';
+// end - Vertical alignment
 
 class TableProcessor {
 	constructor(tableNode) {
 		this.tableNode = tableNode;
 	}
 
 	beginTable(writer) {
+		// begin - Vertical alignment
+		this.tableNode.table.__rowsHeight = [];
+		// end - Vertical alignment
 		const getTableInnerContentWidth = () => {
 			let width = 0;
 
@@ -113,6 +119,9 @@ class TableProcessor {
 		prepareCellBorders(this.tableNode.table.body);
 
 		this.drawHorizontalLine(0, writer);
+		// begin - Vertical alignment
+		this.tableNode.__height = writer.context().y;
+		// end - Vertical alignment
 	}
 
 	onRowBreak(rowIndex, writer) {
@@ -140,6 +149,9 @@ class TableProcessor {
 		writer.context().availableHeight -= this.reservedAtBottom;
 
 		writer.context().moveDown(this.rowPaddingTop);
+		// begin - Vertical alignment
+		this.tableNode.table.__rowsHeight[rowIndex] = { top: this.rowTopY, height: 0 };
+		// end - Vertical alignment
 	}
 
 	drawHorizontalLine(lineIndex, writer, overrideY) {
@@ -240,6 +252,9 @@ class TableProcessor {
 							lineWidth: lineWidth,
 							dash: dash,
 							lineColor: borderColor
+							// begin - Vertical alignment
+							, __tableRef: this.tableNode.table
+							// end - Vertical alignment
 						}, false, overrideY);
 						currentLine = null;
 						borderColor = null;
@@ -321,13 +336,90 @@ class TableProcessor {
 			lineWidth: width,
 			dash: dash,
 			lineColor: borderColor
+			// begin - Vertical alignment
+			, __tableRef: this.tableNode.table
+			// end - Vertical alignment
 		}, false, true);
 		cellBefore = null;
 		currentCell = null;
 		borderColor = null;
 	}
 
+  // begin - Vertical alignment
+  getCellContentHeight(cell, items) {
+    let contentHeight = 0;
+    cell._maxHeight && (contentHeight = cell._maxHeight); // for canvas
+    // for forced multiline text, text with lineHeight, ul, ol
+    !cell.lineHeight && cell.__contentHeight && (contentHeight = cell.__contentHeight);
+    !contentHeight && (contentHeight = items.reduce((p, v) => {
+        const item = v.item.inlines ? (v.item.inlines[0] ?? null) : v.item;
+        const lineHeight = v.item.__nodeRef?.lineHeight ?? (v.item._height ?? v.item.h);
+        let height = item.height ?? (item.h ?? 0);
+        (v.type === 'vector') || (cell.ol && !v.item.lastLineInParagraph) && (height = 0); // for ol with counter
+        return p + (height / (lineHeight ?? 1))
+      },0));
+    !contentHeight && cell._height && (contentHeight = cell._height); // for text, image, svg, qr
+    return contentHeight;
+  };
+
+  processTableVerticalAlignment(writer, table) {
+    const getCells = (node) => node.table ? node.table.body.flat().map(getCells).flat() : node;
+    const getNestedTables = (node) => node.table ? [node, ...node.table.body.flat().map(getNestedTables).filter(Boolean).flat()] : null;
+    // for all rows in table
+    table.body.forEach((row, rowIndex) => {
+      // filter only cells with vertical alignment (middle / bottom)
+      !Array.isArray(row) && row.columns && (row = row.columns);
+      row.filter(cell => cell.verticalAlign && ['middle', 'bottom'].indexOf(cell.verticalAlign) > -1).forEach(cell => {
+        let nestedTables;
+        if (!cell._span) {
+          let cellHeight = 0;
+          if (cell.rowSpan && cell.rowSpan > 1) {
+            const heights = table.__rowsHeight.slice(rowIndex, rowIndex + cell.rowSpan);
+            cellHeight = heights.reduce((previousValue, value) => previousValue + value.height, 0);
+          } else {
+            cellHeight = table.__rowsHeight[rowIndex].height;
+          }
+          if (cellHeight) {
+            const pageItems = writer._context.pages.flatMap(x => x.items);
+            let items = pageItems.filter(i => i.item.__nodeRef === cell || i.item === cell);
+            let itemHeight = 0;
+            if (items.length === 0 && cell.table) {
+              itemHeight = cell.table.__rowsHeight.reduce((p, v) => p + v.height, 0);
+              nestedTables = getNestedTables(cell);
+              items = pageItems.filter(i => getCells(cell).indexOf(i.item.__nodeRef) > -1 ||
+                i.item.__tableRef && nestedTables.some(nt => nt.table === i.item.__tableRef));
+            } else if (cell.stack) {
+              const tables = cell.stack.filter(x => x.table);
+              nestedTables = getNestedTables(tables[0]);
+              itemHeight = tables.reduce((p, v) => p + v.__height, 0) +
+								cell.stack.flatMap(x => x.__contentHeight).filter(Boolean).reduce((p, v) => p + v, 0);
+							items = [...items, pageItems.filter(i => getCells(tables[0]).indexOf(i.item.__nodeRef) > -1 ||
+								i.item.__tableRef && nestedTables.some(nt => nt.table === i.item.__tableRef))].flat();
+						} else {
+							itemHeight = this.getCellContentHeight(cell, items);
+						}
+						items.forEach(x => {
+							const offsetTop = cell.verticalAlign === 'bottom'
+								? cellHeight - itemHeight - 3
+								: (cellHeight - itemHeight) / 2;
+							if (x && x.item) {
+								x.item.type && offsetVector(x.item, 0, Math.max(0, offsetTop) - 1.5);
+								!x.item.type && (x.item.y += Math.max(0, offsetTop) - 1.5);
+							}
+						});
+					}
+				}
+			});
+		});
+	}
+	// end - Vertical alignment
+
 	endTable(writer) {
+    // begin - Vertical alignment
+    this.processTableVerticalAlignment(writer, this.tableNode.table);
+		this.tableNode.__height = writer.context().y - this.tableNode.__height +
+			Math.ceil(this.layout.hLineWidth(0, this.tableNode)) * this.tableNode.table.body.length;
+		// end - Vertical alignment
 		if (this.cleanUpRepeatables) {
 			writer.popFromRepeatables();
 		}
@@ -552,6 +644,9 @@ class TableProcessor {
 			this.cleanUpRepeatables = true;
 			this.headerRepeatable = null;
 		}
+		// begin - Vertical alignment
+		this.tableNode.table.__rowsHeight[rowIndex].height = endingY - this.tableNode.table.__rowsHeight[rowIndex].top;
+		// end - Vertical alignment
 	}
 }