diff --git a/src/index.js b/src/index.js index 0c5edc9..1f6a28e 100644 --- a/src/index.js +++ b/src/index.js @@ -8,7 +8,7 @@ const setTextStyles = require("./render/set-text-styles"); const measureText = require("./render/measure-text"); function getTextProperties(item) { - return objectPick(item, ["fontSize", "fontFamily", "fontStyle", "fontWeight", "fillColor", "strokeColor"]); + return objectPick(item, ["fontSize", "fontFamily", "fontStyle", "fontWeight", "fillColor", "strokeColor", "alignment"]); } module.exports = function createTextShape(options = {}) { @@ -16,7 +16,7 @@ module.exports = function createTextShape(options = {}) { _layout: null, _lines: null, type: "text", - cacheBustingProperties: ["fillColor", "strokeColor", "strokeWidth"], + cacheBustingProperties: ["fillColor", "strokeColor", "strokeWidth", "alignment"], sizeBustingProperties: ["text", "fontSize", "fontFamily", "fontStyle", "fontWeight", "trimVerticalWhitespace", "renderDebugLines", "renderDebugArea", "lineHeight", "tags"], fillColor: "black", strokeColor: "red", @@ -25,6 +25,7 @@ module.exports = function createTextShape(options = {}) { fontSize: 16, fontWeight: "normal", lineHeight: 1.16, + alignment: "left", tags: false, text: "", onRender: function onRender(context) { diff --git a/src/layout/index.js b/src/layout/index.js index e497fa4..f7ae037 100644 --- a/src/layout/index.js +++ b/src/layout/index.js @@ -1,5 +1,7 @@ 'use strict'; +const defaultValue = require("default-value"); + const parser = require("../parser"); const findAlignment = require("../parser/find-alignment"); const generateStyle = require("../parser/generate-style"); @@ -52,7 +54,7 @@ module.exports = function layoutFormattedText(text, options) { let height = max(processedItems.map(item => item.measurements.height)); return Object.assign(line, { - alignment: (line.items.length > 0) ? findAlignment(line.items[0]) : null, + alignment: defaultValue((line.items.length > 0) ? findAlignment(line.items[0]) : null, options.defaultStyle.alignment), items: processedItems, height: height, adjustedHeight: height * options.lineHeight * 1.13, @@ -72,14 +74,17 @@ module.exports = function layoutFormattedText(text, options) { endHeightCorrection = 0; } + let totalTextWidth = Math.ceil(max(lines.map(line => line.width))); + let {positionedItems, debugLines} = layoutItems(lines, { - initialY: startHeightCorrection + initialY: startHeightCorrection, + totalTextWidth: totalTextWidth }); let combinedLineHeights = sum(lines.map(line => line.adjustedHeight)); return { - width: Math.ceil(max(lines.map(line => line.width))), + width: totalTextWidth, height: Math.ceil(combinedLineHeights + startHeightCorrection + endHeightCorrection + last(lines).maxDescender), items: positionedItems, drawDebugLines: function drawDebugLines(context) { diff --git a/src/layout/layout-items.js b/src/layout/layout-items.js index 20c8f85..7e5c378 100644 --- a/src/layout/layout-items.js +++ b/src/layout/layout-items.js @@ -11,8 +11,18 @@ module.exports = function layoutItems(lines, options = {}) { debugLines.push({color: "green", y: currentYOffset, lineNumber: i}); debugLines.push({color: "orange", y: currentYOffset + line.adjustedHeight, lineNumber: i}); + let alignmentOffset; + + if (line.alignment === "center") { + alignmentOffset = (options.totalTextWidth - line.width) / 2; + } else if (line.alignment === "right") { + alignmentOffset = (options.totalTextWidth - line.width); + } else { + alignmentOffset = 0; + } + let newItems = items.concat(line.items.map((item) => { - let x = currentXOffset; + let x = currentXOffset + alignmentOffset; let y = currentYOffset - (line.minAscender / 2) + (line.adjustedHeight / 2) debugLines.push({color: "blue", y: y, x1: x, x2: x + item.measurements.width, lineNumber: i});