diff --git a/sources/index.html b/sources/index.html
index b7b191b..87ad407 100644
--- a/sources/index.html
+++ b/sources/index.html
@@ -19,6 +19,7 @@
+
diff --git a/sources/links/main.css b/sources/links/main.css
index 6375c33..37a8fdc 100644
--- a/sources/links/main.css
+++ b/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; }
diff --git a/sources/scripts/core/commander.js b/sources/scripts/core/commander.js
index dd97536..c553a29 100644
--- a/sources/scripts/core/commander.js
+++ b/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();
diff --git a/sources/scripts/core/cursor.js b/sources/scripts/core/cursor.js
index 68b5784..d816524 100644
--- a/sources/scripts/core/cursor.js
+++ b/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 ""+mode+""+ronin.cursor.size+" ●";
+ return ""+mode+""+ronin.cursor.size+" "+(ronin.cursor.under ? "UNDER" : "ABOVE")+" ●●";
}
function distance_between(a,b)
diff --git a/sources/scripts/core/docs.js b/sources/scripts/core/docs.js
index f3cb977..6a38341 100644
--- a/sources/scripts/core/docs.js
+++ 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);
diff --git a/sources/scripts/core/keyboard.js b/sources/scripts/core/keyboard.js
index 20829b6..b36633d 100644
--- a/sources/scripts/core/keyboard.js
+++ b/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);
}
}
\ No newline at end of file
diff --git a/sources/scripts/layers/under.js b/sources/scripts/layers/under.js
new file mode 100644
index 0000000..72f1f95
--- /dev/null
+++ b/sources/scripts/layers/under.js
@@ -0,0 +1,6 @@
+function Under()
+{
+ Layer.call(this);
+
+ this.el.id = "under";
+}
\ No newline at end of file
diff --git a/sources/scripts/modules/brush.js b/sources/scripts/modules/brush.js
index 92a2cb1..f888ab2 100644
--- a/sources/scripts/modules/brush.js
+++ b/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;
diff --git a/sources/scripts/ronin.js b/sources/scripts/ronin.js
index 803d164..b0c80ac 100644
--- a/sources/scripts/ronin.js
+++ b/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();