canvassed-text/src/layout/index.js

'use strict';

const parser = require("../parser");
const findAlignment = require("../parser/find-alignment");
const generateStyle = require("../parser/generate-style");
const measureText = require("../render/measure-text");
const adjustLineHeights = require("./adjust-line-heights");

const sum = require("../util/sum");
const min = require("../util/min");
const max = require("../util/max");
const last = require("../util/last");

function drawDebugLine(context, lineNumber, y, width, color = "red") {
	context.strokeStyle = color;
	context.beginPath();

	if (typeof width === "number") {
		context.moveTo(0, y);
		context.lineTo(width, y);
	} else {
		context.moveTo(width[0], y);
		context.lineTo(width[1], y);
	}

	context.stroke();

	let boxOffsets = ["red", "green", "blue", "orange"];
	let boxOffset = boxOffsets.indexOf(color);

	context.fillStyle = color;
	context.fillRect(boxOffset * 18, y + 3, 16, 16);

	context.font = "12px sans-serif";
	context.fillStyle = "white";
	context.fillText(lineNumber, 5 + boxOffset * 18, y + 15);
}

function layoutItems(lines, options = {}) {
	let currentYOffset = options.initialY;
	let currentXOffset = 0;
	let debugYOffset = 0;
	let debugLines = [];

	let positionedItems = lines.reduce((items, line, i) => {
		debugLines.push({color: "red", y: debugYOffset, lineNumber: i});
		debugLines.push({color: "green", y: currentYOffset, lineNumber: i});
		debugLines.push({color: "orange", y: currentYOffset + line.adjustedHeight, lineNumber: i});

		let newItems = items.concat(line.items.map((item) => {
			let x = currentXOffset;
			let y = currentYOffset - (line.minAscender / 2) + (line.adjustedHeight / 2)

			debugLines.push({color: "blue", y: y, x1: x, x2: x + item.measurements.width, lineNumber: i});

			currentXOffset += item.measurements.width;

			return Object.assign({
				x: x,
				y: y
			}, item);
		}));

		currentYOffset += line.adjustedHeight;
		debugYOffset += line.adjustedHeight;
		currentXOffset = 0;

		return newItems;
	}, []);

	return {
		positionedItems: positionedItems,
		debugLines: debugLines
	}
}

module.exports = function layoutFormattedText(text, options) {
	let lines;

	if (options.tags === true) {
		lines = parser(text).map((lineItems) => {
			return {
				items: lineItems
			};
		});
	} else {
		lines = text.split("\n").map((line) => {
			let lineMeasurements = measureText(line, options.defaultStyle);

			return {
				items: [{
					text: line
				}]
			};
		});
	}

	let processedLines = lines.map((line) => {
		let processedItems = line.items.map((item) => {
			let style;

			if (item.tags != null) {
				style = Object.assign({}, options.defaultStyle, generateStyle(item.tags, options.classes));
			} else {
				style = options.defaultStyle;
			}

			return Object.assign(item, {
				style: style,
				measurements: measureText(item.text, style)
			});
		});

		let height = max(processedItems.map(item => item.measurements.height));

		return Object.assign(line, {
			alignment: (line.items.length > 0) ? findAlignment(line.items[0]) : null,
			items: processedItems,
			height: height,
			adjustedHeight: height * options.lineHeight * 1.13,
			width: sum(processedItems.map(item => item.measurements.width)),
			minAscender: min(processedItems.map(item => item.measurements.ascender)),
			maxDescender: max(processedItems.map(item => item.measurements.descender))
		});
	});

	let startHeightCorrection, endHeightCorrection;

	if (options.trimVerticalWhitespace) {
		startHeightCorrection = -(lines[0].adjustedHeight / 2) - (lines[0].minAscender / 2);
		endHeightCorrection = -(last(lines).adjustedHeight / 2) - (last(lines).minAscender / 2);
	} else {
		startHeightCorrection = 0;
		endHeightCorrection = 0;
	}

	let {positionedItems, debugLines} = layoutItems(lines, {
		initialY: startHeightCorrection
	});

	let combinedLineHeights = sum(lines.map(line => line.adjustedHeight));

	return {
		width: Math.ceil(max(lines.map(line => line.width))),
		height: Math.ceil(combinedLineHeights + startHeightCorrection + endHeightCorrection + last(lines).maxDescender),
		items: positionedItems,
		drawDebugLines: function drawDebugLines(context) {
			debugLines.forEach((debugLine) => {
				let width;

				if (debugLine.x1 != null) {
					width = [debugLine.x1, debugLine.x2];
				} else {
					width = this.width;
				}

				drawDebugLine(context, debugLine.lineNumber, debugLine.y, width, debugLine.color);
			});
		}
	}
};