canvassed-text/src/index.js

'use strict';

const canvassed = require("canvassed");
const objectPick = require("object.pick");

const layout = require("./layout");
const setTextStyles = require("./render/set-text-styles");
const measureText = require("./render/measure-text");

function getTextProperties(item) {
	return objectPick(item, ["fontSize", "fontFamily", "fontStyle", "fontWeight"]);
}

module.exports = function createTextShape(options) {
	let textObject = canvassed.createObject(Object.assign({
		_layout: null,
		_lines: null,
		type: "text",
		cacheBustingProperties: ["fillColor", "strokeColor", "strokeWidth", "text", "fontSize", "fontFamily", "fontStyle", "fontWeight"],
		sizeBustingProperties: ["text", "fontSize", "fontFamily", "fontStyle", "fontWeight"],
		fillColor: "red",
		strokeColor: "red",
		strokeWidth: 0,
		fontFamily: "sans-serif",
		fontSize: 16,
		fontWeight: "normal",
		lineHeight: 1.16,
		onRender: function onRender(context) {
			this._layout.items.forEach((item) => {
				setTextStyles(context, item.style);
				context.fillText(item.text, item.x, item.y);
			});
		},
		onRecalculateSize: function onRecalculateSize() {
			this._layout = layout(this.text, {
				classes: options.classes,
				defaultStyle: getTextProperties(this),
				lineHeight: this.lineHeight,
				tags: this.tags
			});

			return {
				width: this._layout.width,
				height: this._layout.height
			}
		}
	}, options));

	return textObject;
}