var Class = require('../../core/class'); var Base = require('./base'); var Path = require('./path'); var Surface = require('./surface'); var Group = require('./group'); var DOM = require('./dom'); var fontAnchors = { start: 'left', middle: 'center', end: 'right' }; module.exports = Class(Base, { base_initialize: Base.prototype.initialize, initialize: function(text, font, alignment, path){ this.base_initialize('shape'); var p = this.pathElement = DOM.createElement('path'); p.textpathok = true; this.element.appendChild(p); p = this.textPathElement = DOM.createElement("textpath"); p.on = true; p.style['v-text-align'] = 'left'; this.element.appendChild(p); this.draw.apply(this, arguments); }, draw: function(text, font, alignment, path){ var element = this.element, textPath = this.textPathElement, style = textPath.style; textPath.string = text; if (font){ if (typeof font == 'string'){ style.font = font; } else { for (var key in font){ var ckey = key.camelCase ? key.camelCase() : key; if (ckey == 'fontFamily') style[ckey] = "'" + font[key] + "'"; // NOT UNIVERSALLY SUPPORTED OPTIONS // else if (ckey == 'kerning') style['v-text-kern'] = !!font[key]; // else if (ckey == 'rotateGlyphs') style['v-rotate-letters'] = !!font[key]; // else if (ckey == 'letterSpacing') style['v-text-spacing'] = Number(font[key]) + ''; else style[ckey] = font[key]; } } } if (alignment) style['v-text-align'] = fontAnchors[alignment] || alignment; if (path){ this.currentPath = path = new Path(path); this.element.path = path.toVML(); } else if (!this.currentPath){ var i = -1, offsetRows = '\n'; while ((i = text.indexOf('\n', i + 1)) > -1) offsetRows += '\n'; textPath.string = offsetRows + textPath.string; this.element.path = 'm0,0l1,0'; } // Measuring the bounding box is currently necessary for gradients etc. // Clone element because the element is dead once it has been in the DOM element = element.cloneNode(true); style = element.style; // Reset coordinates while measuring element.coordorigin = '0,0'; element.coordsize = '10000,10000'; style.left = '0px'; style.top = '0px'; style.width = '10000px'; style.height = '10000px'; style.rotation = 0; element.removeChild(element.firstChild); // Remove skew // Inject the clone into the document var canvas = new Surface(1, 1), group = new Group(), // Wrapping it in a group seems to alleviate some client rect weirdness body = element.ownerDocument.body; canvas.inject(body); group.element.appendChild(element); group.inject(canvas); var ebb = element.getBoundingClientRect(), cbb = canvas.toElement().getBoundingClientRect(); canvas.eject(); this.left = ebb.left - cbb.left; this.top = ebb.top - cbb.top; this.width = ebb.right - ebb.left; this.height = ebb.bottom - ebb.top; this.right = ebb.right - cbb.left; this.bottom = ebb.bottom - cbb.top; this._transform(); //this._size = { left: this.left, top: this.top, width: this.width, height: this.height}; return this; } });