Fixed naming conflict in mask and clip modules, bumped to v0.22

1 files changed, 63 insertions, 5 deletions

diff --git a/dist/svg.js b/dist/svg.js
index 4e13436..77ab5cd 100644
--- a/dist/svg.js
+++ b/dist/svg.js
@@ -1,4 +1,4 @@
-/* svg.js v0.21 - svg regex default color number viewbox bbox rbox element container fx event defs group arrange mask clip pattern gradient doc shape rect ellipse line poly path plotable image text nested sugar - svgjs.com/license */
+/* svg.js v0.22 - svg regex default color number viewbox bbox rbox element container fx event defs group arrange mask clip pattern gradient doc shape rect ellipse line poly path plotable image text nested sugar - svgjs.com/license */
 ;(function() {
 
   this.SVG = function(element) {
@@ -1518,19 +1518,48 @@
 
   SVG.Mask = function() {
     this.constructor.call(this, SVG.create('mask'))
+  
+    /* keep references to masked elements */
+    this.targets = []
   }
   
   // Inherit from SVG.Container
   SVG.Mask.prototype = new SVG.Container
   
   //
+  SVG.extend(SVG.Mask, {
+    // Unmask all masked elements and remove itself
+    remove: function() {
+      /* unmask all targets */
+      for (var i = this.targets.length - 1; i >= 0; i--)
+        if (this.targets[i])
+          this.targets[i].unmask()
+      delete this.targets
+  
+      /* remove mask from parent */
+      this.parent.removeElement(this)
+      
+      return this
+    }
+  })
+  
+  //
   SVG.extend(SVG.Element, {
     // Distribute mask to svg element
     maskWith: function(element) {
       /* use given mask or create a new one */
-      this.mask = element instanceof SVG.Mask ? element : this.parent.mask().add(element)
+      this.masker = element instanceof SVG.Mask ? element : this.parent.mask().add(element)
+  
+      /* store reverence on self in mask */
+      this.masker.targets.push(this)
       
-      return this.attr('mask', 'url(#' + this.mask.attr('id') + ')')
+      /* apply mask */
+      return this.attr('mask', 'url(#' + this.masker.attr('id') + ')')
+    }
+    // Unmask element
+  , unmask: function() {
+      delete this.masker
+      return this.attr('mask', null)
     }
     
   })
@@ -1546,19 +1575,48 @@
 
   SVG.Clip = function() {
     this.constructor.call(this, SVG.create('clipPath'))
+  
+    /* keep references to clipped elements */
+    this.targets = []
   }
   
   // Inherit from SVG.Container
   SVG.Clip.prototype = new SVG.Container
   
   //
+  SVG.extend(SVG.Clip, {
+    // Unclip all clipped elements and remove itself
+    remove: function() {
+      /* unclip all targets */
+      for (var i = this.targets.length - 1; i >= 0; i--)
+        if (this.targets[i])
+          this.targets[i].unclip()
+      delete this.targets
+  
+      /* remove clipPath from parent */
+      this.parent.removeElement(this)
+      
+      return this
+    }
+  })
+  
+  //
   SVG.extend(SVG.Element, {
     // Distribute clipPath to svg element
     clipWith: function(element) {
       /* use given clip or create a new one */
-      this.clip = element instanceof SVG.Clip ? element : this.parent.clip().add(element)
+      this.clipper = element instanceof SVG.Clip ? element : this.parent.clip().add(element)
+  
+      /* store reverence on self in mask */
+      this.clipper.targets.push(this)
       
-      return this.attr('clip-path', 'url(#' + this.clip.attr('id') + ')')
+      /* apply mask */
+      return this.attr('clip-path', 'url(#' + this.clipper.attr('id') + ')')
+    }
+    // Unclip element
+  , unclip: function() {
+      delete this.clipper
+      return this.attr('clip-path', null)
     }
     
   })