var SVGParser = require('./core'); var Font = require('../../shapes/font'); function fontStyles(styles){ var font = {}, isFontStyle = /^(font|text-d|kerning|letter|word)[^\_]*$/; for (var style in styles) if (isFontStyle.test(style)) font[style] = styles[style] + (style == 'font-size' ? 'px' : ''); // Iffy font['font-weight'] = (font['font-weight'] > 500 || font['font-weight'] == 'bold' || font['font-weight'] == 'bolder') ? 'bold' : 'normal'; font['font-style'] = font['font-style'] == 'oblique' || font['font-style'] == 'italic' ? 'italic' : 'normal'; return font; }; function progressRow(row, element, styles){ var nx = element.getAttribute('x'), ny = element.getAttribute('y'), dx = element.getAttribute('dx'), dy = element.getAttribute('dy'); var newRow = (nx != null && nx != '') || (ny != null && ny != ''); if (newRow){ adjustRow(row); row = []; row.anchor = styles['text-anchor']; row.x = row.y = 0; } if (dx) row.x += this.parseLength(dx.split(/[\s\,]+/)[0], styles, 'x'); if (dy) row.y += this.parseLength(dy.split(/[\s\,]+/)[0], styles, 'y'); if (nx != null && nx != '') row.x = this.parseLength(nx.split(/[\s\,]+/)[0], styles, 'x'); if (ny != null && ny != '') row.y = this.parseLength(ny.split(/[\s\,]+/)[0], styles, 'y'); if (newRow) row.ix = row.x; return row; }; function adjustRow(row){ var adjustment = row.anchor == 'end' ? (row.ix - row.x) : row.anchor == 'middle' ? (row.ix - row.x) / 2 : 0; if (adjustment) for (var i = 0, l = row.length; i < l; i++) row[i].transform(1,0,0,1,adjustment,0); } SVGParser.implement({ textElement: function(element, styles){ var group = new this.MODE.Group(); this.transform(element, group); this.filter(styles, group); var row = []; row.ix = row.x = row.y = 0; row.anchor = styles['text-anchor']; this.tspanText(element, styles, row, group, adjustRow); return group; }, tspanText: function(element, styles, row, target, continuation){ row = progressRow.call(this, row, element, styles); var node = element.firstChild; var self = this; var next = function(row){ if (node.nodeType == 3){ var text = self.textContent(node, styles); node = node.nextSibling; self.createText(text, styles, row, target, null, function(shape){ if (shape){ if (shape.width) row.x += shape.width + (shape.left || 0); // TODO: Adjust for rotated text row.push(shape); } if (node) next(row); else continuation(row); }); } else { var parseFn = self[node.nodeName + 'Text']; var current = node; node = node.nextSibling; if (parseFn) return parseFn.call(self, current, self.parseStyles(current, styles), row, target, node ? next : continuation); if (node) next(row); else continuation(row); } }; if (node) next(row); else continuation(row); }, aText: function(){ return this.tspanText.apply(this, arguments); }, textPathText: function(element, styles, row, target, continuation){ this.findByURL(element.ownerDocument, element.getAttribute('xlink:href') || element.getAttribute('href'), function(path){ if (!path || !(path = path.getAttribute('d'))) return; var text = this.elementTextContent(element, styles); this.createText(text, styles, null, target, path, function(){ continuation(row); }); }); }, trefText: function(element, styles, row, target, continuation){ row = progressRow.call(this, row, element, styles); this.findByURL(element.ownerDocument, element.getAttribute('xlink:href') || element.getAttribute('href'), function(ref){ if (!ref) return continuation(row); var text = this.elementTextContent(ref, styles); this.createText(text, styles, row, target, null, function(shape){ if (shape){ if (shape.width) row.x += shape.width + (shape.left || 0); // TODO: Adjust for rotated text row.push(shape); } continuation(row); }); }); }, createText: function(text, styles, row, target, path, continuation){ var fontstyle = fontStyles(styles); var create = function(font){ if (font){ var face = font.face; fontstyle = { fontFamily: font.face['font-family'], fontSize: fontstyle['font-size'] }; if (face['font-weight'] > 500) fontstyle.fontWeight = face['font-weight']; if (face['font-stretch'] == 'oblique' || face['font-style'] == 'oblique' || face['font-style'] == 'italic') fontstyle.fontStyle = 'italic'; }; var Text = font ? (this.MODE.Font || Font) : this.MODE.Text; if (row){ var pad = row.pad || ''; row.pad = (/[\s ]*$/).exec(text)[0]; if (row.length == 0) text = text.replace(/^\s+/, ''); text = pad + text.replace(/\s+$/, ''); } else { text = text.replace(/^\s+|\s+$/g, ''); } if (text == ''){ if (row && row.length == 0) row.pad = ''; continuation(); return; } var x = path ? 0 : row.x, y = path ? 0 : row.y - this.getBaseline(styles); var shape = new Text(text, fontstyle, 'start', path); shape.transform(1, 0, 0, 1, x, y); this.fill(styles, shape, x, y); this.stroke(styles, shape); this.filter(styles, shape); shape.inject(target); continuation(shape); } if (this.findFont) this.findFont(fontstyle, create); else create.call(this); }, elementTextContent: function(element, styles){ var node = element.firstChild, text = ''; treewalker: while (node){ if (node.nodeType == 3){ text += this.textContent(node, styles); } if (node.firstChild){ node = node.firstChild; } else { while (!node.nextSibling){ node = node.parentNode; if (!node || node == element) break treewalker; } node = node.nextSibling; } } return text; }, textContent: function(node, styles){ var value = node.nodeValue; if (styles['xml:space'] == 'preserve'){ value = value.replace(/\t|\r?\n/g, ' '); } else { value = value.replace(/\r?\n/g, '').replace(/\s+/g, ' '); } return value; //.replace(/^\s+|\s+$/g, ''); }, getBaseline: function(styles){ var metrics = this.getTextMetrics(styles), shift = styles['baseline-shift']; if (shift == 'baseline') shift = '0'; else if (shift== 'sub') shift = '-0.5em'; else if (shift == 'super') shift = '0.5em'; shift = this.parseLength(shift, styles, 'font'); return metrics.em + metrics.descent + shift; }, getTextMetrics: function(styles){ var fontFamily = styles['font-family'], weight = styles['font-weight'], style = styles['font-style'], size = styles['font-size'], font = this.fonts && this.fonts[fontFamily.replace(/^['"\s]+|['"\s]+$/, '')]; if (font) return { em: size, descent: -(1- font.face.ascent / font.face['units-per-em']) * size }; // TODO: Use cross-platform hack to get native font descent return { em: size, ascent: 0.85 * size, descent: -0.15 * size }; // Good guess for web safe fonts } });