Invert filter

index.html

@@ -32,12 +32,14 @@
     <script type="text/javascript" src="scripts/filters/filter.js"></script>
     <script type="text/javascript" src="scripts/filters/stencil.js"></script>
     <script type="text/javascript" src="scripts/filters/rotate.js"></script>
-    <!-- Need to migrate -->
+    <script type="text/javascript" src="scripts/filters/invert.js"></script>
+    <!-- Need to migrate 
     <script type="text/javascript" src="scripts/filters/saturation.js"></script>
     <script type="text/javascript" src="scripts/filters/chromatic.js"></script>
     <script type="text/javascript" src="scripts/filters/offset.js"></script>
     <script type="text/javascript" src="scripts/filters/eval.js"></script>
     <script type="text/javascript" src="scripts/filters/balance.js"></script>
+    -->
     
     <script type="text/javascript" src="scripts/core/keyboard.js"></script>
     <script type="text/javascript" src="scripts/core/cursor.js"></script>

scripts/core/commander.js

@@ -23,6 +23,7 @@ function Commander(element,element_input)
 
   function run()
   {
+    console.log("~ "+queue[0].trim());
     active(queue[0].trim());
 
     queue.shift();
@@ -34,7 +35,7 @@ function Commander(element,element_input)
   function active(content)
   {
     var key = content[0];
-    var cmd = new Command(content.substring(1).split(" "));
+    var cmd = new Command(content.substring(1).trim().split(" "));
     
     if(ronin.modules[key]){
       ronin.modules[key].active(cmd);

scripts/filters/filter.js

@@ -55,6 +55,6 @@ function Filter()
   
   this.pixels = function()
   {
-    return this.context().getImageData(0,0,ronin.surface.size.width,ronin.surface.size.height);
+    return ronin.surface.active_layer.context().getImageData(0,0,ronin.surface.size.width * 2,ronin.surface.size.height * 2);
   }
 }

scripts/filters/invert.js

@@ -0,0 +1,26 @@
+function Filter_Invert()
+{
+  Filter.call(this);
+  this.parameters = [Angle];
+
+  this.render = function(cmd)
+  {
+    var imageObj = new Image();
+    imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png');
+
+    var context = ronin.surface.active_layer.context();
+
+    var imageData = context.getImageData(0, 0, imageObj.width * 2, imageObj.height* 2);
+    var data = imageData.data;
+
+    for(var i = 0; i < data.length; i += 4) {
+      data[i] = 255 - data[i];
+      data[i + 1] = 255 - data[i + 1];
+      data[i + 2] = 255 - data[i + 2];
+    }
+
+    ronin.surface.active_layer.clear();
+    context.putImageData(imageData, 0, 0);
+  }
+  
+}

scripts/modules/render.js

@@ -7,6 +7,7 @@ function Render(rune)
 
   this.collection["stencil"] = new Filter_Stencil();
   this.collection["rotate"] = new Filter_Rotate();
+  this.collection["invert"] = new Filter_Invert();
   
   this.active = function(cmd)
   {

scripts/modules/surface.js

@@ -18,12 +18,14 @@ function Surface(rune)
       this.resize(cmd.rect(),cmd.position());
       ronin.overlay.resize(cmd.rect());
     }
+    
     if(cmd.color()){
       this.context().beginPath();
       this.context().rect(0, 0, this.active_layer.element.width, this.active_layer.element.height);
       this.context().fillStyle = cmd.color().hex;
       this.context().fill();
     }
+
     if(cmd.bang() && Object.keys(ronin.surface.layers).length > 1){
       delete this.layers[this.active_layer.name];
       this.select_any_layer();