Added the rbox() method, bumped to v0.140.15

3 files changed, 110 insertions, 47 deletions

diff --git a/src/doc.js b/src/doc.js
index cedaefe..faf89c5 100644
--- a/src/doc.js
+++ b/src/doc.js
@@ -7,16 +7,18 @@ SVG.Doc = function(element) {
     document.getElementById(element) :
     element
   
-  /* set svg element attributes and create the <defs> node */
+  /* If the target is an svg element, use that element as the main wrapper.
+     This allows svg.js to work with svg documents as well. */
   this.constructor
     .call(this, this.parent.nodeName == 'svg' ? this.parent : SVG.create('svg'))
   
+  /* set svg element attributes and create the <defs> node */
   this
     .attr({ xmlns: SVG.ns, version: '1.1', width: '100%', height: '100%' })
     .attr('xlink', SVG.xlink, SVG.ns)
     .defs()
   
-  /* ensure correct rendering for safari */
+  /* ensure correct rendering */
   if (this.parent.nodeName != 'svg')
     this.stage()
 }
@@ -24,41 +26,64 @@ SVG.Doc = function(element) {
 // Inherits from SVG.Container
 SVG.Doc.prototype = new SVG.Container
 
-// Hack for safari preventing text to be rendered in one line.
-// Basically it sets the position of the svg node to absolute
-// when the dom is loaded, and resets it to relative a few milliseconds later.
-SVG.Doc.prototype.stage = function() {
-  var check
-    , element = this
-    , wrapper = document.createElement('div')
-  
-  /* set temp wrapper to position relative */
-  wrapper.style.cssText = 'position:relative;height:100%;'
-  
-  /* put element into wrapper */
-  element.parent.appendChild(wrapper)
-  wrapper.appendChild(element.node)
-  
-  /* check for dom:ready */
-  check = function() {
-    if (document.readyState === 'complete') {
-      element.style('position:absolute;')
-      setTimeout(function() {
-        /* set position back to relative */
-        element.style('position:relative;')
-        
-        /* remove temp wrapper */
-        element.parent.removeChild(element.node.parentNode)
-        element.node.parentNode.removeChild(element.node)
-        element.parent.appendChild(element.node)
-        
-      }, 5)
-    } else {
-      setTimeout(check, 10)
+
+SVG.extend(SVG.Doc, {
+  // Hack for safari preventing text to be rendered in one line.
+  // Basically it sets the position of the svg node to absolute
+  // when the dom is loaded, and resets it to relative a few milliseconds later.
+  // It also handles sub-pixel offset rendering properly.
+  stage: function() {
+    var check
+      , element = this
+      , wrapper = document.createElement('div')
+
+    /* set temporary wrapper to position relative */
+    wrapper.style.cssText = 'position:relative;height:100%;'
+
+    /* put element into wrapper */
+    element.parent.appendChild(wrapper)
+    wrapper.appendChild(element.node)
+
+    /* check for dom:ready */
+    check = function() {
+      if (document.readyState === 'complete') {
+        element.style('position:absolute;')
+        setTimeout(function() {
+          /* set position back to relative */
+          element.style('position:relative;')
+
+          /* remove temporary wrapper */
+          element.parent.removeChild(element.node.parentNode)
+          element.node.parentNode.removeChild(element.node)
+          element.parent.appendChild(element.node)
+
+          /* after wrapping is done, fix sub-pixel offset */
+          element.fixSubPixelOffset()
+          
+          /* make sure sub-pixel offset is fixed every time the window is resized */
+          SVG.on(window, 'resize', function() {
+            element.fixSubPixelOffset()
+          })
+          
+        }, 5)
+      } else {
+        setTimeout(check, 10)
+      }
     }
+
+    check()
+
+    return this
   }
+
+  // Fix for possible sub-pixel offset. See:
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=608812
+, fixSubPixelOffset: function() {
+    var pos = this.node.getScreenCTM()
   
-  check()
+    this
+      .style('left', (-pos.e % 1) + 'px')
+      .style('top',  (-pos.f % 1) + 'px')
+  }
   
-  return this
-}
\ No newline at end of file
+})
diff --git a/src/element.js b/src/element.js
index 8869f2b..df3f82a 100644
--- a/src/element.js
+++ b/src/element.js
@@ -160,7 +160,7 @@ SVG.extend(SVG.Element, {
         this.node.setAttributeNS(n, a, v) :
         this.node.setAttribute(a, v)
       
-      /* if the passed argument belongs to the style as well, add it there */
+      /* if the passed argument belongs in the style as well, add it there */
       if (this._isStyle(a)) {
         a == 'text' ?
           this.text(v) :
@@ -200,15 +200,6 @@ SVG.extend(SVG.Element, {
     /* parse matrix */
     o = this._parseMatrix(o)
     
-    /* ensure correct rotation center point */
-    if (o.rotation != null) {
-      if (o.cx == null)
-        o.cx = this.bbox().cx
-      
-      if (o.cy == null)
-        o.cy = this.bbox().cy
-    }
-    
     /* merge values */
     for (v in o)
       if (o[v] != null)
@@ -231,7 +222,7 @@ SVG.extend(SVG.Element, {
     
     /* add rotation */
     if (o.rotation != 0)
-      transform.push('rotate(' + o.rotation + ',' + o.cx + ',' + o.cy + ')')
+      transform.push('rotate(' + o.rotation + ',' + (o.cx || this.bbox().cx) + ',' + (o.cy || this.bbox().cy) + ')')
     
     /* add scale */
     if (o.scaleX != 1 || o.scaleY != 1)
@@ -329,6 +320,10 @@ SVG.extend(SVG.Element, {
 , bbox: function() {
     return new SVG.BBox(this)
   }
+  // Get rect box
+, rbox: function() {
+    return new SVG.RBox(this)
+  }
   // Checks whether the given point inside the bounding box of the element
 , inside: function(x, y) {
     var box = this.bbox()
diff --git a/src/rbox.js b/src/rbox.js
new file mode 100644
index 0000000..02405b0
--- /dev/null
+++ b/src/rbox.js
@@ -0,0 +1,43 @@
+// Get the rectangular box of a given element
+SVG.RBox = function(element) {
+  var box, zoom
+    , e = element.doc().parent
+    , zoom = element.doc().viewbox().zoom
+  
+  /* actual, native bounding box */
+  box = element.node.getBoundingClientRect()
+  
+  /* get screen offset */
+  this.x = box.left
+  this.y = box.top
+  
+  /* subtract parent offset */
+  this.x -= e.offsetLeft
+  this.y -= e.offsetTop
+  
+  while (e = e.offsetParent) {
+    this.x -= e.offsetLeft
+    this.y -= e.offsetTop
+  }
+  
+  /* calculate cumulative zoom from svg documents */
+  e = element
+  while (e = e.parent) {
+    if (e.type == 'svg' && e.viewbox) {
+      zoom *= e.viewbox().zoom
+      this.x -= e.x() || 0
+      this.y -= e.y() || 0
+    }
+  }
+  
+  /* recalculate viewbox distortion */
+  this.x /= zoom
+  this.y /= zoom
+  this.width  = box.width  /= zoom
+  this.height = box.height /= zoom
+  
+  /* add the center */
+  this.cx = this.x + this.width  / 2
+  this.cy = this.y + this.height / 2
+  
+}
\ No newline at end of file