@antv/x6
Version:
JavaScript diagramming library that uses SVG and HTML for rendering.
567 lines • 20.9 kB
JavaScript
/* eslint-disable no-control-regex */
import { NumberExt } from '../number';
import { Text } from '../text';
import { attr } from './attr';
import { Vector } from '../vector';
import { createSvgElement, empty, remove } from './elem';
import { Platform } from '../platform';
function createTextPathNode(attrs, elem) {
const vel = Vector.create(elem);
const textPath = Vector.create('textPath');
const d = attrs.d;
if (d && attrs['xlink:href'] === undefined) {
const path = 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) {
const eol = options.eol;
const baseSize = options.baseSize;
const lineHeight = options.lineHeight;
let maxFontSize = 0;
let tspanNode;
const fontMetrics = {};
const lastJ = lineAnnotations.length - 1;
for (let j = 0; j <= lastJ; j += 1) {
let annotation = lineAnnotations[j];
let fontSize = null;
if (typeof annotation === 'object') {
const annotationAttrs = annotation.attrs;
const vTSpan = Vector.create('tspan', annotationAttrs);
tspanNode = vTSpan.node;
let t = annotation.t;
if (eol && j === lastJ) {
t += eol;
}
tspanNode.textContent = t;
// Per annotation className
const 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;
}
const emRegex = /em$/;
function emToPx(em, fontSize) {
const numerical = parseFloat(em);
if (emRegex.test(em)) {
return numerical * fontSize;
}
return numerical;
}
function calculateDY(alignment, linesMetrics, baseSizePx, lineHeight) {
if (!Array.isArray(linesMetrics)) {
return 0;
}
const n = linesMetrics.length;
if (!n)
return 0;
let lineMetrics = linesMetrics[0];
const flMaxFont = emToPx(lineMetrics.maxFontSize, baseSizePx) || baseSizePx;
let rLineHeights = 0;
const lineHeightPx = emToPx(lineHeight, baseSizePx);
for (let i = 1; i < n; i += 1) {
lineMetrics = linesMetrics[i];
const iLineHeight = emToPx(lineMetrics.lineHeight, baseSizePx) || lineHeightPx;
rLineHeights += iLineHeight;
}
const llMaxFont = emToPx(lineMetrics.maxFontSize, baseSizePx) || baseSizePx;
let 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;
}
export function text(elem, content, options = {}) {
content = Text.sanitize(content); // eslint-disable-line
const eol = options.eol;
let textPath = options.textPath;
const verticalAnchor = options.textVerticalAnchor;
const namedVerticalAnchor = verticalAnchor === 'middle' ||
verticalAnchor === 'bottom' ||
verticalAnchor === 'top';
// Horizontal shift applied to all the lines but the first.
let x = options.x;
if (x === undefined) {
x = elem.getAttribute('x') || 0;
}
// Annotations
const iai = options.includeAnnotationIndices;
let annotations = options.annotations;
if (annotations && !Array.isArray(annotations)) {
annotations = [annotations];
}
// Shift all the <tspan> but first by one line (`1em`)
const defaultLineHeight = options.lineHeight;
const autoLineHeight = defaultLineHeight === 'auto';
const lineHeight = autoLineHeight ? '1.5em' : defaultLineHeight || '1em';
empty(elem);
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
const strFontSize = attr(elem, 'font-size');
let fontSize = parseFloat(strFontSize);
if (!fontSize) {
fontSize = 16;
if ((namedVerticalAnchor || annotations) && !strFontSize) {
attr(elem, 'font-size', `${fontSize}`);
}
}
let 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();
}
let dy;
let offset = 0;
let annotatedY;
const lines = content.split('\n');
const linesMetrics = [];
const lastI = lines.length - 1;
for (let i = 0; i <= lastI; i += 1) {
dy = lineHeight;
let lineClassName = 'v-line';
const lineNode = createSvgElement('tspan');
let lineMetrics;
let line = lines[i];
if (line) {
if (annotations) {
// Find the *compacted* annotations for this line.
const lineAnnotations = 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.
const 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';
const 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 {
let rh; // 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;
default:
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'}`);
}
}
const firstLine = containerNode.firstChild;
firstLine.setAttribute('dy', dy);
elem.appendChild(containerNode);
}
function splitText(text, separator, eol, hyphen) {
const words = [];
const separators = [];
if (separator != null) {
const parts = text.split(separator);
words.push(...parts);
if (typeof separator === 'string') {
for (let i = 0, l = parts.length - 1; i < l; i += 1) {
separators.push(separator);
}
}
else {
const seps = text.match(new RegExp(separator, 'g'));
for (let i = 0, l = parts.length - 1; i < l; i += 1) {
separators.push(seps ? seps[i] : '');
}
}
}
else {
let word = '';
for (let i = 0, l = text.length; i < l; i += 1) {
const char = text[i];
if (char === ' ') {
words.push(word);
separators.push(' ');
word = '';
}
else if (char.match(/[^\x00-\xff]/)) {
// split double byte character
if (word.length) {
words.push(word);
separators.push('');
}
words.push(char);
separators.push('');
word = '';
}
else {
word += char;
}
}
if (word.length) {
words.push(word);
}
}
// end-of-line
for (let i = 0; i < words.length; i += 1) {
const word = words[i];
if (word.indexOf(eol) >= 0 && word.length > 1) {
const parts = word.split(eol);
for (let j = 0, k = parts.length - 1; j < k; j += 1) {
parts.splice(2 * j + 1, 0, eol);
}
const valids = parts.filter((part) => part !== '');
words.splice(i, 1, ...valids);
const seps = valids.map(() => '');
seps.pop();
separators.splice(i, 0, ...seps);
}
}
// hyphen
for (let i = 0; i < words.length; i += 1) {
const word = words[i];
const index = word.search(hyphen);
if (index > 0 && index < word.length - 1) {
words.splice(i, 1, word.substring(0, index + 1), word.substring(index + 1));
separators.splice(i, 0, '');
}
}
return { words, separators };
}
export function breakText(text, size, styles = {}, options = {}) {
const width = size.width;
const height = size.height;
const svgDocument = options.svgDocument || createSvgElement('svg');
const telem = createSvgElement('text');
const tspan = createSvgElement('tspan');
const tnode = document.createTextNode('');
attr(telem, styles);
telem.appendChild(tspan);
// Prevent flickering
telem.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.
telem.style.display = 'block';
tspan.style.display = 'block';
tspan.appendChild(tnode);
svgDocument.appendChild(telem);
const shouldAppend = svgDocument.parentNode == null;
if (shouldAppend) {
document.body.appendChild(svgDocument);
}
const eol = options.eol || '\n';
const separator = options.separator || ' ';
const hyphen = options.hyphen ? new RegExp(options.hyphen) : /[^\w\d]/;
const breakWord = options.breakWord !== false;
const full = [];
const lineSeprators = {};
let lines = [];
let partIndex;
// let hyphenIndex
let lineHeight;
let currentSeparator;
const { words, separators } = splitText(text, options.separator, eol, hyphen);
for (let wordIndex = 0, lineIndex = 0, wordCount = words.length; wordIndex < wordCount; wordIndex += 1) {
const word = words[wordIndex];
// empty word
if (!word) {
continue;
}
// end of line
if (word === eol) {
full[lineIndex] = true;
// start a new line
lineIndex += 1;
lines[lineIndex] = '';
continue;
}
if (lines[lineIndex] != null) {
currentSeparator = separators[wordIndex - 1] || '';
tnode.data = `${lines[lineIndex]}${currentSeparator}${word}`;
}
else {
tnode.data = word;
}
if (tspan.getComputedTextLength() <= width) {
// update line
lines[lineIndex] = tnode.data;
lineSeprators[lineIndex] = separators[wordIndex];
// when is partitioning, put rest of the word onto next line
if (partIndex) {
full[lineIndex] = true;
lineIndex += 1;
partIndex = 0;
}
}
else {
if (breakWord) {
// word is too long to put in one line or is partitioning
if (!lines[lineIndex] || partIndex) {
const isPartition = !!partIndex;
const isCharacter = word.length === 1;
partIndex = word.length - 1;
if (isPartition || isCharacter) {
// word has only one character.
if (isCharacter) {
if (!lines[lineIndex]) {
// can'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(wordIndex, 2, word + words[wordIndex + 1]);
separators.splice(wordIndex + 1, 1);
full[lineIndex] = true;
lineIndex += 1;
wordCount -= 1;
wordIndex -= 1;
continue;
}
// update the partitioning words
words[wordIndex] = word.substring(0, partIndex);
words[wordIndex + 1] =
word.substring(partIndex) + words[wordIndex + 1];
}
else {
// partitioning the long word into two words
words.splice(wordIndex, 1, word.substring(0, partIndex), word.substring(partIndex));
separators.splice(wordIndex, 0, '');
wordCount += 1;
// if the previous line is not full
if (lineIndex && !full[lineIndex - 1]) {
lineIndex -= 1;
}
}
wordIndex -= 1;
continue;
}
}
else if (!lines[lineIndex]) {
lines[lineIndex] = word;
full[lineIndex] = true;
lineIndex += 1;
continue;
}
lineIndex += 1;
wordIndex -= 1;
}
// check whether the height of the entire text exceeds the rect height
if (height != null) {
// ensure line height
if (lineHeight == null) {
let heightValue;
// use the same defaults as in V.prototype.text
if (styles.lineHeight === 'auto') {
heightValue = { value: 1.5, unit: 'em' };
}
else {
heightValue = NumberExt.parseCssNumeric(styles.lineHeight, [
'em',
]) || {
value: 1,
unit: 'em',
};
}
lineHeight = heightValue.value;
if (heightValue.unit === 'em') {
if (Platform.IS_FIREFOX) {
lineHeight *= tspan.getBBox().height;
}
else {
lineHeight *= telem.getBBox().height;
}
}
}
if (lineHeight * lines.length > height) {
// remove overflowing lines
const lastLineIndex = Math.floor(height / lineHeight) - 1;
const lastLine = lines[lastLineIndex];
const overflowLine = lines[lastLineIndex + 1];
lines.splice(lastLineIndex + 1);
if (lastLine == null) {
break;
}
// add ellipsis
let ellipsis = options.ellipsis;
if (!ellipsis) {
break;
}
if (typeof ellipsis !== 'string') {
ellipsis = '\u2026';
}
let fullLastLine = lastLine;
if (overflowLine && breakWord) {
fullLastLine += currentSeparator + overflowLine;
}
let lastCharIndex = fullLastLine.length;
let fixedLastLine;
let lastChar;
do {
lastChar = fullLastLine[lastCharIndex];
fixedLastLine = fullLastLine.substring(0, lastCharIndex);
if (!lastChar) {
fixedLastLine += lineSeprators[lastLineIndex];
}
else if (lastChar.match(separator)) {
fixedLastLine += lastChar;
}
fixedLastLine += ellipsis;
tnode.data = fixedLastLine;
if (tspan.getComputedTextLength() <= width) {
lines[lastLineIndex] = fixedLastLine;
break;
}
lastCharIndex -= 1;
} while (lastCharIndex >= 0);
break;
}
}
}
if (shouldAppend) {
remove(svgDocument);
}
else {
remove(telem);
}
return lines.join(eol);
}
//# sourceMappingURL=text.js.map