| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360 |
1×
1×
27×
27×
27×
27×
236×
236×
236×
236×
236×
236×
236×
3×
236×
135×
135×
135×
236×
236×
236×
135×
101×
135×
93×
93×
135×
101×
101×
101×
101×
90×
365×
275×
275×
90×
90×
101×
101×
101×
101×
30×
101×
27×
27×
1×
1×
1×
27×
1×
1×
1×
2×
1×
27×
27×
27×
27×
27×
27×
27×
27×
27×
27×
27×
27×
27×
27×
27×
135×
27×
12×
27×
135×
27×
135×
27×
27×
12×
27×
27×
27×
27×
135×
135×
16×
16×
119×
135×
135×
135×
135×
27×
27×
27×
27×
2×
| import {
isObject,
assign,
forEach,
reduce
} from 'min-dash';
import {
append as svgAppend,
attr as svgAttr,
create as svgCreate,
remove as svgRemove
} from 'tiny-svg';
var DEFAULT_BOX_PADDING = 0;
var DEFAULT_LABEL_SIZE = {
width: 150,
height: 50
};
function parseAlign(align) {
var parts = align.split('-');
return {
horizontal: parts[0] || 'center',
vertical: parts[1] || 'top'
};
}
function parsePadding(padding) {
Iif (isObject(padding)) {
return assign({ top: 0, left: 0, right: 0, bottom: 0 }, padding);
} else {
return {
top: padding,
left: padding,
right: padding,
bottom: padding
};
}
}
function getTextBBox(text, fakeText) {
fakeText.textContent = text;
var textBBox;
try {
var bbox,
emptyLine = text === '';
// add dummy text, when line is empty to
// determine correct height
fakeText.textContent = emptyLine ? 'dummy' : text;
textBBox = fakeText.getBBox();
// take text rendering related horizontal
// padding into account
bbox = {
width: textBBox.width + textBBox.x * 2,
height: textBBox.height
};
if (emptyLine) {
// correct width
bbox.width = 0;
}
return bbox;
} catch (e) {
return { width: 0, height: 0 };
}
}
/**
* Layout the next line and return the layouted element.
*
* Alters the lines passed.
*
* @param {Array<String>} lines
* @return {Object} the line descriptor, an object { width, height, text }
*/
function layoutNext(lines, maxWidth, fakeText) {
var originalLine = lines.shift(),
fitLine = originalLine;
var textBBox;
for (;;) {
textBBox = getTextBBox(fitLine, fakeText);
textBBox.width = fitLine ? textBBox.width : 0;
// try to fit
if (fitLine === ' ' || fitLine === '' || textBBox.width < Math.round(maxWidth) || fitLine.length < 2) {
return fit(lines, fitLine, originalLine, textBBox);
}
fitLine = shortenLine(fitLine, textBBox.width, maxWidth);
}
}
function fit(lines, fitLine, originalLine, textBBox) {
if (fitLine.length < originalLine.length) {
var remainder = originalLine.slice(fitLine.length).trim();
lines.unshift(remainder);
}
return {
width: textBBox.width,
height: textBBox.height,
text: fitLine
};
}
/**
* Shortens a line based on spacing and hyphens.
* Returns the shortened result on success.
*
* @param {String} line
* @param {Number} maxLength the maximum characters of the string
* @return {String} the shortened string
*/
function semanticShorten(line, maxLength) {
var parts = line.split(/(\s|-)/g),
part,
shortenedParts = [],
length = 0;
// try to shorten via spaces + hyphens
if (parts.length > 1) {
while ((part = parts.shift())) {
if (part.length + length < maxLength) {
shortenedParts.push(part);
length += part.length;
} else {
// remove previous part, too if hyphen does not fit anymore
Iif (part === '-') {
shortenedParts.pop();
}
break;
}
}
}
return shortenedParts.join('');
}
function shortenLine(line, width, maxWidth) {
var length = Math.max(line.length * (maxWidth / width), 1);
// try to shorten semantically (i.e. based on spaces and hyphens)
var shortenedLine = semanticShorten(line, length);
if (!shortenedLine) {
// force shorten by cutting the long word
shortenedLine = line.slice(0, Math.max(Math.round(length - 1), 1));
}
return shortenedLine;
}
function getHelperSvg() {
var helperSvg = document.getElementById('helper-svg');
if (!helperSvg) {
helperSvg = svgCreate('svg');
svgAttr(helperSvg, {
id: 'helper-svg',
width: 0,
height: 0,
style: 'visibility: hidden; position: fixed'
});
document.body.appendChild(helperSvg);
}
return helperSvg;
}
/**
* Creates a new label utility
*
* @param {Object} config
* @param {Dimensions} config.size
* @param {Number} config.padding
* @param {Object} config.style
* @param {String} config.align
*/
export default function Text(config) {
this._config = assign({}, {
size: DEFAULT_LABEL_SIZE,
padding: DEFAULT_BOX_PADDING,
style: {},
align: 'center-top'
}, config || {});
}
/**
* Returns the layouted text as an SVG element.
*
* @param {String} text
* @param {Object} options
*
* @return {SVGElement}
*/
Text.prototype.createText = function(text, options) {
return this.layoutText(text, options).element;
};
/**
* Returns a labels layouted dimensions.
*
* @param {String} text to layout
* @param {Object} options
*
* @return {Dimensions}
*/
Text.prototype.getDimensions = function(text, options) {
return this.layoutText(text, options).dimensions;
};
/**
* Creates and returns a label and its bounding box.
*
* @method Text#createText
*
* @param {String} text the text to render on the label
* @param {Object} options
* @param {String} options.align how to align in the bounding box.
* Any of { 'center-middle', 'center-top' },
* defaults to 'center-top'.
* @param {String} options.style style to be applied to the text
* @param {boolean} options.fitBox indicates if box will be recalculated to
* fit text
*
* @return {Object} { element, dimensions }
*/
Text.prototype.layoutText = function(text, options) {
var box = assign({}, this._config.size, options.box),
style = assign({}, this._config.style, options.style),
align = parseAlign(options.align || this._config.align),
padding = parsePadding(options.padding !== undefined ? options.padding : this._config.padding),
fitBox = options.fitBox || false;
var lineHeight = getLineHeight(style);
var lines = text.split(/\r?\n/g),
layouted = [];
var maxWidth = box.width - padding.left - padding.right;
// ensure correct rendering by attaching helper text node to invisible SVG
var helperText = svgCreate('text');
svgAttr(helperText, { x: 0, y: 0 });
svgAttr(helperText, style);
var helperSvg = getHelperSvg();
svgAppend(helperSvg, helperText);
while (lines.length) {
layouted.push(layoutNext(lines, maxWidth, helperText));
}
if (align.vertical === 'middle') {
padding.top = padding.bottom = 0;
}
var totalHeight = reduce(layouted, function(sum, line, idx) {
return sum + (lineHeight || line.height);
}, 0) + padding.top + padding.bottom;
var maxLineWidth = reduce(layouted, function(sum, line, idx) {
return line.width > sum ? line.width : sum;
}, 0);
// the y position of the next line
var y = padding.top;
if (align.vertical === 'middle') {
y += (box.height - totalHeight) / 2;
}
// magic number initial offset
y -= (lineHeight || layouted[0].height) / 4;
var textElement = svgCreate('text');
svgAttr(textElement, style);
// layout each line taking into account that parent
// shape might resize to fit text size
forEach(layouted, function(line) {
var x;
y += (lineHeight || line.height);
switch (align.horizontal) {
case 'left':
x = padding.left;
break;
case 'right':
x = ((fitBox ? maxLineWidth : maxWidth)
- padding.right - line.width);
break;
default:
// aka center
x = Math.max((((fitBox ? maxLineWidth : maxWidth)
- line.width) / 2 + padding.left), 0);
}
var tspan = svgCreate('tspan');
svgAttr(tspan, { x: x, y: y });
tspan.textContent = line.text;
svgAppend(textElement, tspan);
});
svgRemove(helperText);
var dimensions = {
width: maxLineWidth,
height: totalHeight
};
return {
dimensions: dimensions,
element: textElement
};
};
function getLineHeight(style) {
if ('fontSize' in style && 'lineHeight' in style) {
return style.lineHeight * parseInt(style.fontSize, 10);
}
} |