Added alternative color and above/under layers.

sources/index.html

@@ -19,6 +19,7 @@
     <script type="text/javascript" src="scripts/layers/guide.js"></script>
     <script type="text/javascript" src="scripts/layers/render.js"></script>
     <script type="text/javascript" src="scripts/layers/preview.js"></script>
+    <script type="text/javascript" src="scripts/layers/under.js"></script>
 
     <script type="text/javascript" src="scripts/core/docs.js"></script>
     <script type="text/javascript" src="scripts/core/port.js"></script>

sources/links/main.css

@@ -9,6 +9,7 @@ yu { display:block; }
 #guide { z-index:810;position: fixed; }
 #preview { z-index:805; position: fixed; }
 #render { z-index:800; position: fixed; }
+#under { z-index:799; position: fixed; }
 #grid { z-index:795;position: fixed; }
 
 #ronin { background:#eee; height: 100vh; width:100vw; }

sources/scripts/core/commander.js

@@ -85,6 +85,11 @@ function Commander()
     ronin.commander.update();
   }
 
+  this.is_focused = function()
+  {
+    return this.input_el === document.activeElement;
+  }
+
   this.focus = function()
   {
     this.input_el.focus();

sources/scripts/core/cursor.js

@@ -9,7 +9,9 @@ function Cursor(rune)
   this.mode = "vertex";
 
   this.color = "#f00"
+  this.color_alt = "#fff"
   this.size = 4;
+  this.under = false;
 
   this.draw_cursor = function(pos,touch = false)
   {
@@ -58,6 +60,12 @@ function Cursor(rune)
     }
     else if(e.altKey && e.shiftKey){
       ronin.brush.methods.pick.run(pos);
+    }
+    else if(e.altKey){
+      ronin.brush.erase(ronin.cursor.line);
+    }
+    else if(e.shiftKey){
+      
     }
     else{
       ronin.brush.stroke(ronin.cursor.line);  
@@ -118,6 +126,15 @@ function Cursor(rune)
     ronin.cursor.mode = "vertex";
 
     ronin.cursor.query = ronin.commander.input_el.value;
+
+    if(ronin.cursor.under){
+      var above = ronin.render.to_img();
+      var under = ronin.under.to_img();
+      ronin.render.clear();
+      ronin.under.clear();
+      ronin.render.context().drawImage(under, 0,0,ronin.frame.width*2,ronin.frame.height*2);  
+      ronin.render.context().drawImage(above, 0,0,ronin.frame.width*2,ronin.frame.height*2);   
+    }
   }
 
   this.drag = function(line)
@@ -128,6 +145,20 @@ function Cursor(rune)
     ronin.render.context().putImageData(data, offset.x * -2, offset.y * -2);
   }
 
+  this.swap_colors = function()
+  {
+    var c = this.color_alt
+    this.color_alt = this.color;
+    this.color = c;
+    ronin.commander.update();
+  }
+
+  this.swap_layer = function()
+  {
+    this.under = this.under ? false : true;
+    ronin.commander.update();
+  }
+
   function make_offset(a,b)
   {
     return {x:a.x-b.x,y:a.y-b.y};
@@ -198,7 +229,7 @@ function Cursor(rune)
       mode = "DRAG";
     }
 
-    return "<t class='mode'>"+mode+"</t><t class='size'>"+ronin.cursor.size+"</t> <t class='color' style='color:"+ronin.cursor.color+"'>●</t>";
+    return "<t class='mode'>"+mode+"</t><t class='size'>"+ronin.cursor.size+"</t> "+(ronin.cursor.under ? "UNDER" : "ABOVE")+" <t class='color' style='color:"+ronin.cursor.color+"'>●</t><t class='color' style='color:"+ronin.cursor.color_alt+"'>●</t>";
   }
 
   function distance_between(a,b)

sources/scripts/core/docs.js

@@ -10,8 +10,10 @@ function Docs()
     html += "Include `$` in a query and click on the canvas to inject the cursor position in the query.\n";
     html += "- `$ click` inject a **Pos**.\n";
     html += "- `$+ click` inject a **Pos**, and append `$+` for multiple positions.\n";
-    html += "- `$ shift click` inject a **Rect**.\n\n";
+    html += "- `$ shift click` inject a **Rect**.\n";
     html += "- `#$ click` inject a **Color**.\n";
+    html += "- `x` swap **Color** with secondary.\n\n";
+    html += "- `z` draw under render.\n\n";
     
     html += "## Modules\n";
     html += this.print_modules(ronin.modules);

sources/scripts/core/keyboard.js

@@ -40,6 +40,11 @@ function Keyboard()
       return;
     }
 
+    if(ronin.commander.is_focused()){
+      ronin.hint.update(e);
+      return;
+    }
+
     if(e.key == "]"){
       e.preventDefault();
       ronin.brush.mod_size(1);
@@ -56,26 +61,33 @@ function Keyboard()
       ronin.render.clear();
     }
 
+    // Open
     if(e.key == "o" && (e.ctrlKey || e.metaKey)){
       e.preventDefault();
       ronin.io.methods.load.run();
     }
 
+    // Save
     if(e.key == "s" && (e.ctrlKey || e.metaKey)){
       e.preventDefault();
       ronin.io.methods.save.run();
     }
 
-    if(e.key == "r" && (e.ctrlKey || e.metaKey)){
-      e.preventDefault();
-      ronin.io.methods.save.run();
-    }
-
     if(e.key == "H" && (e.ctrlKey || e.metaKey) && e.shiftKey){
       e.preventDefault();
       ronin.docs.export();
     }
 
+    if(e.key == "x"){
+      e.preventDefault();
+      ronin.cursor.swap_colors();
+    }
+
+    if(e.key == "z"){
+      e.preventDefault();
+      ronin.cursor.swap_layer();
+    }
+
     ronin.hint.update(e);
   }
 }

sources/scripts/layers/under.js

@@ -0,0 +1,6 @@
+function Under()
+{
+  Layer.call(this);
+  
+  this.el.id = "under";
+}

sources/scripts/modules/brush.js

@@ -53,6 +53,10 @@ function Brush()
   {
     var ctx = ronin.render.context();
 
+    if(!line.to){
+      line.to = line.from
+    }
+
     ctx.beginPath();
     ctx.globalCompositeOperation="destination-out";
     ctx.moveTo(line.from.x * 2,line.from.y * 2);
@@ -65,6 +69,10 @@ function Brush()
 
   this.pick = function(line)
   {
+    if(!line.to){
+      line.to = line.from
+    }
+
     var pixel = ronin.render.context().getImageData(line.to.x*2, line.to.y*2, 1, 1).data;
   }
 
@@ -100,7 +108,7 @@ function Pointer(options)
 
   this.stroke = function(line)
   {
-    var ctx = ronin.render.context();
+    var ctx = ronin.cursor.under ? ronin.layers.under.context() : ronin.layers.render.context();
 
     if(this.options.mirror){
       line.from.x = (this.options.mirror.x *2) - line.from.x;

sources/scripts/ronin.js

@@ -13,6 +13,7 @@ function Ronin()
   this.guide = new Guide();
   this.render = new Render();
   this.preview = new Preview();
+  this.under = new Under();
 
   this.io = new IO();
   this.brush = new Brush();
@@ -25,6 +26,7 @@ function Ronin()
   this.layers = {
     grid : this.grid,
     guide : this.guide,
+    under : this.under,
     render : this.render,
     cursor : this.cursor,
     preview : this.preview,
@@ -50,6 +52,7 @@ function Ronin()
     this.grid.install();
     this.guide.install();
     this.render.install();
+    this.under.install();
     this.preview.install();
     this.cursor.install();
 
@@ -72,6 +75,7 @@ function Ronin()
 
     console.log("Ronin","Started");
     this.render.update();
+    this.under.update();
     this.grid.update();
     this.guide.update();
     this.cursor.update();