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

2 files changed, 62 insertions, 4 deletions

diff --git a/src/clip.js b/src/clip.js
index 7341c8f..2b4afce 100644
--- a/src/clip.js
+++ b/src/clip.js
@@ -1,18 +1,47 @@
 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)
   }
   
 })
diff --git a/src/mask.js b/src/mask.js
index ddd7565..6ebccdc 100644
--- a/src/mask.js
+++ b/src/mask.js
@@ -1,18 +1,47 @@
 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)
   }
   
 })