@daign/2d-graphics
Version:
Two dimensional graphics library that implements the daign-2d-pipeline.
138 lines (137 loc) • 5.45 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.ScalableText = void 0;
var math_1 = require("@daign/math");
var styledGraphicNode_1 = require("../styledGraphicNode");
/**
* Class for a scalable text element at an anchor position.
* There is a second point whose distance to the anchor defines the font size. Therefore, the font
* size scales proportionally. Unproportional scaling, rotation and perspective transformations are
* not supported.
*/
var ScalableText = /** @class */ (function (_super) {
__extends(ScalableText, _super);
/**
* Constructor.
*/
function ScalableText() {
var _this = _super.call(this) || this;
// The text content of the text element.
_this.content = '';
// The attribute defining the alignment of the text relative to its anchor.
_this.textAnchor = 'end';
// Font size in element coordinates.
_this._fontSize = 1;
_this.baseClass = 'scalableText';
_this.points.initializeElements(2);
_this.points.assignName('anchor', 0);
_this.points.assignName('heightPoint', 1);
return _this;
}
Object.defineProperty(ScalableText.prototype, "anchor", {
/**
* Getter for the anchor position.
*/
get: function () {
return this.points.getByName('anchor');
},
/**
* Setter for the anchor position.
*/
set: function (position) {
this.points.getByName('anchor').copy(position);
},
enumerable: false,
configurable: true
});
Object.defineProperty(ScalableText.prototype, "heightPoint", {
/**
* Getter for the point representing the font size.
*/
get: function () {
return this.points.getByName('heightPoint');
},
enumerable: false,
configurable: true
});
Object.defineProperty(ScalableText.prototype, "fontSize", {
/**
* Getter for the font size.
*/
get: function () {
return this._fontSize;
},
/**
* Setter for the font size.
*/
set: function (size) {
this._fontSize = size;
/* The position of the height point is set in negative y direction. Therefore scaling along the
* x-axis will not affect the font size. */
var position = this.anchor.clone().add(new math_1.Vector2(0, -size));
this.points.getByName('heightPoint').copy(position);
},
enumerable: false,
configurable: true
});
/**
* Calculate the fontSize after a given transformation.
* @param transformation - The transformation to apply.
* @returns The transformed fontSize.
*/
ScalableText.prototype.getFontSizeTransformed = function (transformation) {
var anchorPoint = this.anchor.clone().transform(transformation);
var heightPoint = this.heightPoint.clone().transform(transformation);
var fontSize = anchorPoint.distanceTo(heightPoint);
return fontSize;
};
/**
* Calculate the anchor after a given transformation.
* @param transformation - The transformation to apply.
* @returns The transformed anchor position.
*/
ScalableText.prototype.getAnchorTransformed = function (transformation) {
var anchorPoint = this.anchor.clone().transform(transformation);
return anchorPoint;
};
/**
* Get an approximated bounding box of the scalable text.
* @returns The bounding box.
*/
ScalableText.prototype.getBox = function () {
var box = new math_1.Box2();
box.expandByPoint(this.anchor);
box.expandByPoint(this.heightPoint);
// The width of the text is estimated to be half the font size per character.
var estimatedWidth = this.content.length * this.fontSize * 0.5;
// Expand left and right.
if (this.textAnchor === 'end') {
box.expandByPoint(this.anchor.clone().add(new math_1.Vector2(-estimatedWidth, 0)));
}
else if (this.textAnchor === 'start') {
box.expandByPoint(this.anchor.clone().add(new math_1.Vector2(estimatedWidth, 0)));
}
else if (this.textAnchor === 'middle') {
box.expandByPoint(this.anchor.clone().add(new math_1.Vector2(0.5 * estimatedWidth, 0)));
box.expandByPoint(this.anchor.clone().add(new math_1.Vector2(-0.5 * estimatedWidth, 0)));
}
return box;
};
return ScalableText;
}(styledGraphicNode_1.StyledGraphicNode));
exports.ScalableText = ScalableText;