Added loader on SVG.Image and included svg.pattern.js to the core

5 files changed, 104 insertions, 11 deletions

diff --git a/src/element.js b/src/element.js
index 01146ab..9ae2cd3 100755
--- a/src/element.js
+++ b/src/element.js
@@ -179,6 +179,17 @@ SVG.Element = SVG.invent({
           this.attr('stroke', parseFloat(v) > 0 ? this._stroke : null)
         else if (a == 'stroke')
           this._stroke = v
+
+        /* convert image fill and stroke to patterns */
+        if (a == 'fill' || a == 'stroke') {
+          if (SVG.regex.isImage.test(v))
+            v = this.doc().defs().image(v, 0, 0)
+
+          if (v instanceof SVG.Image)
+            v = this.doc().defs().pattern(0, 0, function() {
+              this.add(v)
+            })
+        }
         
         /* ensure full hex color */
         if (SVG.Color.test(v) || SVG.Color.isRgb(v))
diff --git a/src/gradient.js b/src/gradient.js
index e95e18b..504ec49 100755
--- a/src/gradient.js
+++ b/src/gradient.js
@@ -32,7 +32,7 @@ SVG.Gradient = SVG.invent({
     }
     // Add a color stop
   , at: function(stop) {
-      return this.put(new SVG.Stop().update(stop))
+      return this.put(new SVG.Stop).update(stop)
     }
     // Update gradient
   , update: function(block) {
@@ -40,7 +40,8 @@ SVG.Gradient = SVG.invent({
       this.clear()
       
       /* invoke passed block */
-      block(this)
+      if (typeof block == 'function')
+        block.call(this, this)
       
       return this
     }
@@ -66,12 +67,7 @@ SVG.Gradient = SVG.invent({
 SVG.extend(SVG.Defs, {
   // define gradient
   gradient: function(type, block) {
-    var element = this.put(new SVG.Gradient(type))
-    
-    /* invoke passed block */
-    block(element)
-    
-    return element
+    return this.put(new SVG.Gradient(type)).update(block)
   }
   
 })
diff --git a/src/image.js b/src/image.js
index 24333c7..60d57b1 100755
--- a/src/image.js
+++ b/src/image.js
@@ -9,7 +9,39 @@ SVG.Image = SVG.invent({
 , extend: {
     // (re)load image
     load: function(url) {
-      return (url ? this.attr('href', (this.src = url), SVG.xlink) : this)
+      if (!url) return this
+
+      var self = this
+        , img  = document.createElement('img')
+      
+      /* preload image */
+      img.onload = function() {
+        var p = self.doc(SVG.Pattern)
+
+        /* ensure image size */
+        if (self.width() == 0 && self.height() == 0)
+          self.size(img.width, img.height)
+
+        /* ensure pattern size if not set */
+        if (p && p.width() == 0 && p.height() == 0)
+          p.size(self.width(), self.height())
+        
+        /* callback */
+        if (typeof self._loaded == 'function')
+          self._loaded.call(self, {
+            width:  img.width
+          , height: img.height
+          , ratio:  img.width / img.height
+          , url:    url
+          })
+      }
+
+      return this.attr('href', (img.src = this.src = url), SVG.xlink)
+    }
+    // Add loade callback
+  , loaded: function(loaded) {
+      this._loaded = loaded
+      return this
     }
   }
   
@@ -17,8 +49,7 @@ SVG.Image = SVG.invent({
 , construct: {
     // Create image element, load image and set its size
     image: function(source, width, height) {
-      width = width != null ? width : 100
-      return this.put(new SVG.Image().load(source).size(width, height != null ? height : width))
+      return this.put(new SVG.Image).load(source).size(width || 0, height || width || 0)
     }
   }
 })
\ No newline at end of file
diff --git a/src/pattern.js b/src/pattern.js
new file mode 100644
index 0000000..e5398d2
--- /dev/null
+++ b/src/pattern.js
@@ -0,0 +1,52 @@
+SVG.Pattern = SVG.invent({
+  // Initialize node
+  create: 'pattern'
+
+  // Inherit from
+, inherit: SVG.Container
+
+  // Add class methods
+, extend: {
+    // Return the fill id
+	  fill: function() {
+	    return 'url(#' + this.attr('id') + ')'
+	  }
+	  // Update pattern by rebuilding
+	, update: function(block) {
+			/* remove content */
+      this.clear()
+      
+      /* invoke passed block */
+      if (typeof block == 'function')
+      	block.call(this, this)
+      
+      return this
+		}
+	  // Alias string convertion to fill
+	, toString: function() {
+	    return this.fill()
+	  }
+  }
+  
+  // Add parent method
+, construct: {
+    // Create pattern element in defs
+	  pattern: function(width, height, block) {
+	    return this.defs().pattern(width, height, block)
+	  }
+  }
+})
+
+SVG.extend(SVG.Defs, {
+  // Define gradient
+  pattern: function(width, height, block) {
+    return this.put(new SVG.Pattern).update(block).attr({
+      x:            0
+    , y:            0
+    , width:        width
+    , height:       height
+    , patternUnits: 'userSpaceOnUse'
+    })
+  }
+
+})
\ No newline at end of file
diff --git a/src/regex.js b/src/regex.js
index 602d2c7..3a28e64 100755
--- a/src/regex.js
+++ b/src/regex.js
@@ -34,5 +34,8 @@ SVG.regex = {
 
   /* test for percent value */
 , isPercent:    /^-?[\d\.]+%$/
+
+  /* test for image url */
+, isImage:      /\.(jpg|jpeg|png|gif)(\?[^=]+.*)?/i
   
 }
\ No newline at end of file