You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
'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", "fillColor", "strokeColor", "alignment"]);
|
|
}
|
|
|
|
module.exports = function createTextShape(options = {}) {
|
|
let textObject = canvassed.createObject(Object.assign({
|
|
_layout: null,
|
|
_lines: null,
|
|
type: "text",
|
|
cacheBustingProperties: ["fillColor", "strokeColor", "strokeWidth", "alignment"],
|
|
sizeBustingProperties: ["text", "fontSize", "fontFamily", "fontStyle", "fontWeight", "trimVerticalWhitespace", "renderDebugLines", "renderDebugArea", "lineHeight", "tags"],
|
|
fillColor: "black",
|
|
strokeColor: "red",
|
|
strokeWidth: 0,
|
|
fontFamily: "sans-serif",
|
|
fontSize: 16,
|
|
fontWeight: "normal",
|
|
lineHeight: 1.16,
|
|
alignment: "left",
|
|
tags: false,
|
|
text: "",
|
|
onRender: function onRender(context) {
|
|
if (this.renderDebugArea) {
|
|
context.fillStyle = "silver";
|
|
context.fillRect(0, 0, this._layout.width, this._layout.height);
|
|
}
|
|
|
|
this._layout.items.forEach((item) => {
|
|
setTextStyles(context, item.style);
|
|
context.fillText(item.text, item.x, item.y);
|
|
});
|
|
|
|
if (this.renderDebugLines) {
|
|
this._layout.drawDebugLines(context);
|
|
}
|
|
},
|
|
onRecalculateSize: function onRecalculateSize() {
|
|
this._layout = layout(this.text, {
|
|
classes: options.classes,
|
|
defaultStyle: getTextProperties(this),
|
|
lineHeight: this.lineHeight,
|
|
tags: this.tags,
|
|
trimVerticalWhitespace: this.trimVerticalWhitespace
|
|
});
|
|
|
|
return {
|
|
width: this._layout.width,
|
|
height: this._layout.height
|
|
}
|
|
}
|
|
}, options));
|
|
|
|
return textObject;
|
|
}
|