Added desaturation filter

sources/scripts/filters/_saturation.js

@@ -1,15 +0,0 @@
-Filter.prototype.filter_saturation = function(pixels = this.pixels(),p = null)
-{
-  var d = pixels.data;
-  for (var i=0; i<d.length; i+=4) {
-    var r = d[i];
-    var g = d[i+1];
-    var b = d[i+2];
-    // CIE luminance for the RGB
-    // The human eye is bad at seeing red and blue, so we de-emphasize them.
-    var v = 0.2126*r + 0.7152*g + 0.0722*b;
-    d[i] = d[i+1] = d[i+2] = v
-  }
-	ronin.canvas.clear();
-	ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
-}

sources/scripts/filters/saturation.js

@@ -0,0 +1,53 @@
+function Filter_Saturation()
+{
+  Filter.call(this);
+
+  this.parameters = [Color];
+  
+  this.render = function(cmd)
+  {
+    if(cmd.color() && cmd.color().rgb()){
+      this.draw(ronin.surface.active_layer.context(),cmd.color().rgb());
+    }
+    else{
+      this.draw(ronin.surface.active_layer.context());
+    }
+  }
+
+  this.preview = function(cmd)
+  {
+    if(cmd.color() && cmd.color().rgb()){
+      this.draw(ronin.render.layer.context(),cmd.color().rgb());
+    }
+    else{
+      this.draw(ronin.render.layer.context());
+    }
+  }
+
+  this.draw = function(context = this.context(), color_rgb = new Color("#36ba0e").rgb())
+  {
+    var imageObj = new Image();
+    imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png');
+
+    var w = ronin.surface.size.width;
+    var h = ronin.surface.size.height;
+
+    var originalData = ronin.surface.active_layer.context().getImageData(0, 0, w*2, h*2);
+    var data = originalData.data;
+
+    var _r = (color_rgb.r / 255);
+    var _g = (color_rgb.g / 255);
+    var _b = (color_rgb.b / 255);
+
+    for(var i = 0; i < data.length; i += 4) {
+      var r = data[i];
+      var g = data[i+1];
+      var b = data[i+2];
+      var v = _r*r + _g*g + _b*b;
+      data[i] = data[i+1] = data[i+2] = v
+    }
+
+    ronin.render.layer.clear();
+    context.putImageData(originalData, 0, 0);
+  }
+}