From 5790481a924785db746d95b8ef501d87f7e047bc Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 22 Nov 2017 16:58:48 +1300 Subject: [PATCH] Added alternative color and above/under layers. --- sources/index.html | 1 + sources/links/main.css | 1 + sources/scripts/core/commander.js | 5 +++++ sources/scripts/core/cursor.js | 33 ++++++++++++++++++++++++++++++- sources/scripts/core/docs.js | 4 +++- sources/scripts/core/keyboard.js | 22 ++++++++++++++++----- sources/scripts/layers/under.js | 6 ++++++ sources/scripts/modules/brush.js | 10 +++++++++- sources/scripts/ronin.js | 4 ++++ 9 files changed, 78 insertions(+), 8 deletions(-) create mode 100644 sources/scripts/layers/under.js 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();