@antv/x6
Version:
JavaScript diagramming library that uses SVG and HTML for rendering.
507 lines • 19.1 kB
JavaScript
"use strict";
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.breakText = exports.text = void 0;
var number_1 = require("../number");
var text_1 = require("../text");
var attr_1 = require("./attr");
var vector_1 = require("../vector");
var elem_1 = require("./elem");
function createTextPathNode(attrs, elem) {
var vel = vector_1.Vector.create(elem);
var textPath = vector_1.Vector.create('textPath');
var d = attrs.d;
if (d && attrs['xlink:href'] === undefined) {
var path = vector_1.Vector.create('path').attr('d', d).appendTo(vel.defs());
textPath.attr('xlink:href', "#" + path.id);
}
if (typeof attrs === 'object') {
textPath.attr(attrs);
}
return textPath.node;
}
function annotateTextLine(lineNode, lineAnnotations, options) {
var eol = options.eol;
var baseSize = options.baseSize;
var lineHeight = options.lineHeight;
var maxFontSize = 0;
var tspanNode;
var fontMetrics = {};
var lastJ = lineAnnotations.length - 1;
for (var j = 0; j <= lastJ; j += 1) {
var annotation = lineAnnotations[j];
var fontSize = null;
if (typeof annotation === 'object') {
var annotationAttrs = annotation.attrs;
var vTSpan = vector_1.Vector.create('tspan', annotationAttrs);
tspanNode = vTSpan.node;
var t = annotation.t;
if (eol && j === lastJ) {
t += eol;
}
tspanNode.textContent = t;
// Per annotation className
var annotationClass = annotationAttrs['class'];
if (annotationClass) {
vTSpan.addClass(annotationClass);
}
// set the list of indices of all the applied annotations
// in the `annotations` attribute. This list is a comma
// separated list of indices.
if (options.includeAnnotationIndices) {
vTSpan.attr('annotations', annotation.annotations.join(','));
}
// Check for max font size
fontSize = parseFloat(annotationAttrs['font-size']);
if (fontSize === undefined)
fontSize = baseSize;
if (fontSize && fontSize > maxFontSize)
maxFontSize = fontSize;
}
else {
if (eol && j === lastJ) {
annotation += eol;
}
tspanNode = document.createTextNode(annotation || ' ');
if (baseSize && baseSize > maxFontSize) {
maxFontSize = baseSize;
}
}
lineNode.appendChild(tspanNode);
}
if (maxFontSize) {
fontMetrics.maxFontSize = maxFontSize;
}
if (lineHeight) {
fontMetrics.lineHeight = lineHeight;
}
else if (maxFontSize) {
fontMetrics.lineHeight = maxFontSize * 1.2;
}
return fontMetrics;
}
var emRegex = /em$/;
function emToPx(em, fontSize) {
var numerical = parseFloat(em);
if (emRegex.test(em)) {
return numerical * fontSize;
}
return numerical;
}
function calculateDY(alignment, linesMetrics, baseSizePx, lineHeight) {
if (!Array.isArray(linesMetrics)) {
return 0;
}
var n = linesMetrics.length;
if (!n)
return 0;
var lineMetrics = linesMetrics[0];
var flMaxFont = emToPx(lineMetrics.maxFontSize, baseSizePx) || baseSizePx;
var rLineHeights = 0;
var lineHeightPx = emToPx(lineHeight, baseSizePx);
for (var i = 1; i < n; i += 1) {
lineMetrics = linesMetrics[i];
var iLineHeight = emToPx(lineMetrics.lineHeight, baseSizePx) || lineHeightPx;
rLineHeights += iLineHeight;
}
var llMaxFont = emToPx(lineMetrics.maxFontSize, baseSizePx) || baseSizePx;
var dy;
switch (alignment) {
case 'middle':
dy = flMaxFont / 2 - 0.15 * llMaxFont - rLineHeights / 2;
break;
case 'bottom':
dy = -(0.25 * llMaxFont) - rLineHeights;
break;
default:
case 'top':
dy = 0.8 * flMaxFont;
break;
}
return dy;
}
function text(elem, content, options) {
if (options === void 0) { options = {}; }
content = text_1.Text.sanitize(content); // tslint:disable-line
var eol = options.eol;
var textPath = options.textPath;
var verticalAnchor = options.textVerticalAnchor;
var namedVerticalAnchor = verticalAnchor === 'middle' ||
verticalAnchor === 'bottom' ||
verticalAnchor === 'top';
// Horizontal shift applied to all the lines but the first.
var x = options.x;
if (x === undefined) {
x = elem.getAttribute('x') || 0;
}
// Annotations
var iai = options.includeAnnotationIndices;
var annotations = options.annotations;
if (annotations && !Array.isArray(annotations)) {
annotations = [annotations];
}
// Shift all the <tspan> but first by one line (`1em`)
var defaultLineHeight = options.lineHeight;
var autoLineHeight = defaultLineHeight === 'auto';
var lineHeight = autoLineHeight ? '1.5em' : defaultLineHeight || '1em';
elem_1.empty(elem);
attr_1.attr(elem, {
// Preserve spaces, do not consecutive spaces to get collapsed to one.
'xml:space': 'preserve',
// An empty text gets rendered into the DOM in webkit-based browsers.
// In order to unify this behaviour across all browsers
// we rather hide the text element when it's empty.
display: content || options.displayEmpty ? null : 'none',
});
// Set default font-size if none
var fontSize = parseFloat(attr_1.attr(elem, 'font-size'));
if (!fontSize) {
fontSize = 16;
if (namedVerticalAnchor || annotations) {
attr_1.attr(elem, 'font-size', "" + fontSize);
}
}
var containerNode;
if (textPath) {
// Now all the `<tspan>`s will be inside the `<textPath>`.
if (typeof textPath === 'string') {
textPath = { d: textPath };
}
containerNode = createTextPathNode(textPath, elem);
}
else {
containerNode = document.createDocumentFragment();
}
var dy;
var offset = 0;
var annotatedY;
var lines = content.split('\n');
var linesMetrics = [];
var lastI = lines.length - 1;
for (var i = 0; i <= lastI; i += 1) {
dy = lineHeight;
var lineClassName = 'v-line';
var lineNode = elem_1.createSvgElement('tspan');
var lineMetrics = void 0;
var line = lines[i];
if (line) {
if (annotations) {
// Find the *compacted* annotations for this line.
var lineAnnotations = text_1.Text.annotate(line, annotations, {
offset: -offset,
includeAnnotationIndices: iai,
});
lineMetrics = annotateTextLine(lineNode, lineAnnotations, {
eol: i !== lastI && eol,
baseSize: fontSize,
lineHeight: autoLineHeight ? null : lineHeight,
includeAnnotationIndices: iai,
});
// Get the line height based on the biggest font size
// in the annotations for this line.
var iLineHeight = lineMetrics.lineHeight;
if (iLineHeight && autoLineHeight && i !== 0) {
dy = iLineHeight;
}
if (i === 0) {
annotatedY = lineMetrics.maxFontSize * 0.8;
}
}
else {
if (eol && i !== lastI) {
line += eol;
}
lineNode.textContent = line;
}
}
else {
// Make sure the textContent is never empty. If it is, add a dummy
// character and make it invisible, making the following lines correctly
// relatively positioned. `dy=1em` won't work with empty lines otherwise.
lineNode.textContent = '-';
lineClassName += ' v-empty-line';
var lineNodeStyle = lineNode.style;
lineNodeStyle.fillOpacity = 0;
lineNodeStyle.strokeOpacity = 0;
if (annotations) {
lineMetrics = {};
}
}
if (lineMetrics) {
linesMetrics.push(lineMetrics);
}
if (i > 0) {
lineNode.setAttribute('dy', dy);
}
// Firefox requires 'x' to be set on the first line
if (i > 0 || textPath) {
lineNode.setAttribute('x', x);
}
lineNode.className.baseVal = lineClassName;
containerNode.appendChild(lineNode);
offset += line.length + 1; // + 1 = newline character.
}
// Y Alignment calculation
if (namedVerticalAnchor) {
if (annotations) {
dy = calculateDY(verticalAnchor, linesMetrics, fontSize, lineHeight);
}
else if (verticalAnchor === 'top') {
// A shortcut for top alignment. It does not depend on font-size nor line-height
dy = '0.8em';
}
else {
var rh = void 0; // remaining height
if (lastI > 0) {
rh = parseFloat(lineHeight) || 1;
rh *= lastI;
if (!emRegex.test(lineHeight))
rh /= fontSize;
}
else {
// Single-line text
rh = 0;
}
switch (verticalAnchor) {
case 'middle':
dy = 0.3 - rh / 2 + "em";
break;
case 'bottom':
dy = -rh - 0.3 + "em";
break;
}
}
}
else {
if (verticalAnchor === 0) {
dy = '0em';
}
else if (verticalAnchor) {
dy = verticalAnchor;
}
else {
// No vertical anchor is defined
dy = 0;
// Backwards compatibility - we change the `y` attribute instead of `dy`.
if (elem.getAttribute('y') == null) {
elem.setAttribute('y', "" + (annotatedY || '0.8em'));
}
}
}
var firstLine = containerNode.firstChild;
firstLine.setAttribute('dy', dy);
elem.appendChild(containerNode);
}
exports.text = text;
function breakText(text, size, styles, options) {
if (styles === void 0) { styles = {}; }
if (options === void 0) { options = {}; }
var width = size.width;
var height = size.height;
var svgDocument = options.svgDocument || elem_1.createSvgElement('svg');
var textSpan = elem_1.createSvgElement('tspan');
var textElement = elem_1.createSvgElement('text');
attr_1.attr(textElement, styles);
elem_1.append(textElement, textSpan);
var textNode = document.createTextNode('');
// Prevent flickering
textElement.style.opacity = '0';
// Prevent FF from throwing an uncaught exception when `getBBox()`
// called on element that is not in the render tree (is not measurable).
// <tspan>.getComputedTextLength() returns always 0 in this case.
// Note that the `textElement` resp. `textSpan` can become hidden
// when it's appended to the DOM and a `display: none` CSS stylesheet
// rule gets applied.
textElement.style.display = 'block';
textSpan.style.display = 'block';
textSpan.appendChild(textNode);
svgDocument.appendChild(textElement);
if (!options.svgDocument) {
document.body.appendChild(svgDocument);
}
var eol = options.eol || '\n';
var separator = options.separator || ' ';
var hyphen = options.hyphen ? new RegExp(options.hyphen) : /[^\w\d]/;
var words = text.split(separator);
var full = [];
var lines = [];
var p;
var h;
var lineHeight;
for (var i = 0, l = 0, len = words.length; i < len; i += 1) {
var word = words[i];
if (!word) {
continue;
}
if (eol && word.indexOf(eol) >= 0) {
// word contains end-of-line character
if (word.length > 1) {
// separate word and continue cycle
var eolWords = word.split(eol);
for (var j = 0, jl = eolWords.length - 1; j < jl; j += 1) {
eolWords.splice(2 * j + 1, 0, eol);
}
words.splice.apply(words, __spreadArrays([i, 1], eolWords.filter(function (word) { return word !== ''; })));
i -= 1;
len = words.length;
}
else {
// creates a new line
l += 1;
lines[l] = '';
}
continue;
}
textNode.data = lines[l] ? lines[l] + " " + word : word;
if (textSpan.getComputedTextLength() <= width) {
// the current line fits
lines[l] = textNode.data;
if (p || h) {
// We were partitioning. Put rest of the word onto next line
full[l] = true;
l += 1;
// cancel partitioning and splitting by hyphens
p = 0;
h = 0;
}
}
else {
if (!lines[l] || p) {
var partition = !!p;
p = word.length - 1;
if (partition || !p) {
// word has only one character.
if (!p) {
if (!lines[l]) {
// we won't fit this text within our rect
lines = [];
break;
}
// partitioning didn't help on the non-empty line
// try again, but this time start with a new line
// cancel partitions created
words.splice(i, 2, word + words[i + 1]);
// adjust word length
len -= 1;
full[l] = true;
l += 1;
i -= 1;
continue;
}
// move last letter to the beginning of the next word
words[i] = word.substring(0, p);
words[i + 1] = word.substring(p) + words[i + 1];
}
else {
if (h) {
// cancel splitting and put the words together again
words.splice(i, 2, words[i] + words[i + 1]);
h = 0;
}
else {
var hyphenIndex = word.search(hyphen);
if (hyphenIndex > -1 &&
hyphenIndex !== word.length - 1 &&
hyphenIndex !== 0) {
h = hyphenIndex + 1;
p = 0;
}
// We initiate partitioning or splitting
// split the long word into two words
words.splice(i, 1, word.substring(0, h || p), word.substring(h || p));
// adjust words length
len += 1;
}
if (l && !full[l - 1]) {
// if the previous line is not full, try to fit max part of
// the current word there
l -= 1;
}
}
i -= 1;
continue;
}
l += 1;
i -= 1;
}
// if size.height is defined we have to check whether the height of the entire
// text exceeds the rect height
if (height !== undefined) {
if (lineHeight === undefined) {
var heightValue
// use the same defaults as in V.prototype.text
= void 0;
// use the same defaults as in V.prototype.text
if (styles.lineHeight === 'auto') {
heightValue = { value: 1.5, unit: 'em' };
}
else {
heightValue = number_1.NumberExt.parseCssNumeric(styles.lineHeight, [
'em',
]) || {
value: 1,
unit: 'em',
};
}
lineHeight = heightValue.value;
if (heightValue.unit === 'em') {
lineHeight *= textElement.getBBox().height;
}
}
if (lineHeight * lines.length > height) {
// remove overflowing lines
var lastL = Math.floor(height / lineHeight) - 1;
lines.splice(lastL + 1);
// add ellipsis
var ellipsis = options.ellipsis;
if (!ellipsis || lastL < 0)
break;
if (typeof ellipsis !== 'string')
ellipsis = '\u2026';
var lastLine = lines[lastL];
if (!lastLine)
break;
var k = lastLine.length;
var lastLineWithOmission = void 0;
var lastChar = void 0;
var separatorChar = void 0;
do {
lastChar = lastLine[k];
lastLineWithOmission = lastLine.substring(0, k);
if (!lastChar) {
separatorChar = typeof separator === 'string' ? separator : ' ';
lastLineWithOmission += separatorChar;
}
else if (lastChar.match(separator)) {
lastLineWithOmission += lastChar;
}
lastLineWithOmission += ellipsis;
textNode.data = lastLineWithOmission;
if (textSpan.getComputedTextLength() <= width) {
lines[lastL] = lastLineWithOmission;
break;
}
k -= 1;
} while (k >= 0);
break;
}
}
}
if (options.svgDocument) {
// svg document was provided, remove the text element only
svgDocument.removeChild(textElement);
}
else {
// clean svg document
document.body.removeChild(svgDocument);
}
return lines.join(eol);
}
exports.breakText = breakText;
//# sourceMappingURL=text.js.map