Reworked SVG.Text to give more granular control

1 files changed, 93 insertions, 36 deletions

diff --git a/src/text.js b/src/text.js
index 22ec5bc..4acd236 100644
--- a/src/text.js
+++ b/src/text.js
@@ -12,8 +12,8 @@ SVG.Text = function() {
   , 'text-anchor':  'start'
   }
   
-  this._leading = 1.2
-  this._base = 0.276666666
+  this._leading = new SVG.Number('1.2em')
+  this._rebuild = true
 }
 
 // Inherit from SVG.Element
@@ -24,14 +24,19 @@ SVG.extend(SVG.Text, {
   // Move over x-axis
   x: function(x, a) {
     /* act as getter */
-    if (x == null) return a ? this.attr('x') : this.bbox().x
+    if (x == null)
+      return a ? this.attr('x') : this.bbox().x
     
     /* set x taking anchor in mind */
     if (!a) {
       a = this.style('text-anchor')
       x = a == 'start' ? x : a == 'end' ? x + this.bbox().width : x + this.bbox().width / 2
     }
-    
+
+    /* move lines as well if no textPath si present */
+    if (!this.textPath)
+      this.lines.each(function() { if (this.newLined) this.x(x) })
+
     return this.attr('x', x)
   }
   // Move center over x-axis
@@ -59,27 +64,50 @@ SVG.extend(SVG.Text, {
     /* remove existing lines */
     this.clear()
     
-    /* update the content */
-    this.content = SVG.regex.isBlank.test(text) ? 'text' : text
-    
-    var i, il
-      , lines = text.split('\n')
-    
-    /* build new lines */
-    for (i = 0, il = lines.length; i < il; i++)
-      this.tspan(lines[i])
+    if (typeof text === 'function') {
+      this._rebuild = false
+
+      text(this)
+
+    } else {
+      this._rebuild = true
+
+      /* make sure text is not blank */
+      text = SVG.regex.isBlank.test(text) ? 'text' : text
+      
+      var i, il
+        , lines = text.split('\n')
       
-    return this.attr('textLength', 1).attr('textLength', null)
+      /* build new lines */
+      for (i = 0, il = lines.length; i < il; i++)
+        this.tspan(lines[i]).newLine()
+
+      this.rebuild()
+    }
+    
+    return this
   }
   // Create a tspan
 , tspan: function(text) {
-    var tspan = new SVG.TSpan().text(text)
+    var node  = this.textPath ? this.textPath.node : this.node
+      , tspan = new SVG.TSpan().text(text)
+      , style = this.style()
     
     /* add new tspan */
-    this.node.appendChild(tspan.node)
-    this.lines.push(tspan)
-    
-    return tspan.attr('style', this.style())
+    node.appendChild(tspan.node)
+    this.lines.add(tspan)
+
+    /* add style if any */
+    if (!SVG.regex.isBlank.test(style))
+      tspan.style(style)
+
+    /* store content */
+    this.content += text
+
+    /* store text parent */
+    tspan.parent = this
+
+    return tspan
   }
   // Set font size
 , size: function(size) {
@@ -92,33 +120,47 @@ SVG.extend(SVG.Text, {
       return this._leading
     
     /* act as setter */
+    value = new SVG.Number(value)
     this._leading = value
     
-    return this.rebuild('leading', value)
+    /* apply leading */
+    this.lines.each(function() {
+      if (this.newLined)
+        this.attr('dy', value)
+    })
+
+    return this
   }
   // rebuild appearance type
 , rebuild: function() {
-    var i, il
-      , size = this.styles['font-size']
-    
+    var self = this
+
     /* define position of all lines */
-    for (i = 0, il = this.lines.length; i < il; i++)
-      this.lines[i].attr({
-        dy: size * this._leading - (i == 0 ? size * this._base : 0)
-      , x: (this.attr('x') || 0)
-      , style: this.style()
+    if (this._rebuild) {
+      this.lines.attr({
+        x:      this.attr('x')
+      , dy:     this._leading
+      , style:  this.style()
       })
-    
+    }
+
     return this
   }
   // Clear all lines
 , clear: function() {
+    var node = this.textPath ? this.textPath.node : this.node
+
     /* remove existing child nodes */
-    while (this.node.hasChildNodes())
-      this.node.removeChild(this.node.lastChild)
+    while (node.hasChildNodes())
+      node.removeChild(node.lastChild)
     
-    this.lines = []
+    /* refresh lines */
+    delete this.lines
+    this.lines = new SVG.Set
     
+    /* initialize content */
+    this.content = ''
+
     return this
   }
   
@@ -128,9 +170,9 @@ SVG.extend(SVG.Text, {
 SVG.extend(SVG.Container, {
   // Create text element
   text: function(text) {
-    return this.put(new SVG.Text().text(text))
+    return this.put(new SVG.Text).text(text)
   }
-
+  
 })
 
 // tspan class
@@ -149,5 +191,20 @@ SVG.extend(SVG.TSpan, {
     
     return this
   }
-  
-})
\ No newline at end of file
+  // Shortcut dx
+, dx: function(dx) {
+    return this.attr('dx', dx)
+  }
+  // Shortcut dy
+, dy: function(dy) {
+    return this.attr('dy', dy)
+  }
+  // Create new line
+, newLine: function() {
+    this.newLined = true
+    this.parent.content += '\n'
+    this.dy(this.parent._leading)
+    return this.attr('x', this.parent.x())
+  }
+
+})