diff --git a/sources/index.html b/sources/index.html index 87ad407..5267004 100644 --- a/sources/index.html +++ b/sources/index.html @@ -17,9 +17,7 @@ - - diff --git a/sources/links/main.css b/sources/links/main.css index efb952a..2ae5a0c 100644 --- a/sources/links/main.css +++ b/sources/links/main.css @@ -8,12 +8,12 @@ yu { display:block; } #cursor { z-index:899; position: fixed; } #guide { z-index:810;position: fixed; } #preview { z-index:805; position: fixed; } -#render { z-index:800; position: fixed; } -#under { z-index:799; position: fixed; } +#above { z-index:800; position: fixed; } +#below { z-index:799; position: fixed; } #grid { z-index:795;position: fixed; } #ronin { background-color:#aaa; height: 100vh; width:100vw; background-image:url(../media/assets/grid.svg);} -#commander, #hint { position: fixed;bottom: 7px;left: 0px;width: 100vw;line-height: 40px;-webkit-user-select: none;-webkit-app-region: drag;z-index: 900;height: 40px; font-size:11px; cursor: default;} +#commander, #hint { position: fixed;bottom: 8px;left: 0px;width: 100vw;line-height: 40px;-webkit-user-select: none;-webkit-app-region: drag;z-index: 900;height: 40px; font-size:11px; cursor: default;} #commander { z-index: 9000; } #commander input { background: transparent;width: calc(100vw - 30px);display: block;line-height: 40px;font-size: 11px;color: black; margin-left:20px; z-index: 9000;position: relative; } #hint { color:#666; padding-left:20px;} @@ -24,4 +24,4 @@ yu { display:block; } #cursor_hint { position: absolute;top: 0px;right: 10px;color: white; padding: 0px 10px; color:#555; font-size:11px; text-transform: uppercase; } #cursor_hint .mode {} -.layer { transition: all 450ms } \ No newline at end of file +.layer { transition: all 150ms; left:0px; top:0px; } \ No newline at end of file diff --git a/sources/scripts/core/cursor.js b/sources/scripts/core/cursor.js index 1319ae0..7e8e150 100644 --- a/sources/scripts/core/cursor.js +++ b/sources/scripts/core/cursor.js @@ -11,9 +11,10 @@ function Cursor(rune) this.color = "#000000" this.color_alt = "#ff0000" this.size = 4; - this.under = false; this.pos = {x:0,y:0}; + this.target = null; + this.draw_cursor = function(pos,touch = false) { this.clear(); @@ -63,7 +64,7 @@ function Cursor(rune) return; } - ronin.cursor.draw_cursor({x:pos.x,y:pos.y},true); + ronin.cursor.draw_cursor({x:e.clientX,y:e.clientY},true); ronin.cursor.line.origin = {x:pos.x,y:pos.y}; ronin.cursor.line.from = {x:pos.x,y:pos.y}; @@ -96,7 +97,7 @@ function Cursor(rune) var pos = ronin.cursor.mouse_pos(e); ronin.cursor.pos = pos; - ronin.cursor.draw_cursor({x:pos.x,y:pos.y}); + ronin.cursor.draw_cursor({x:e.clientX,y:e.clientY}); if(!ronin.cursor.line.from){ return; } @@ -127,7 +128,7 @@ function Cursor(rune) var pos = ronin.cursor.mouse_pos(e); ronin.cursor.pos = pos; - ronin.cursor.draw_cursor({x:pos.x,y:pos.y},true); + ronin.cursor.draw_cursor({x:e.clientX,y:e.clientY},true); ronin.cursor.line.destination = {x:pos.x,y:pos.y}; @@ -145,34 +146,12 @@ function Cursor(rune) console.log(e); } - this.flatten = function() - { - var a = ronin.under.to_img() - var b = null - - a.onload = function(){ - b = ronin.render.to_img() - b.onload = function(){ - ronin.cursor.merge(a,b); - } - } - } - - this.merge = function(a,b) - { - ronin.render.clear(); - ronin.render.context().drawImage(a, 0,0,ronin.frame.width*2,ronin.frame.height*2); - ronin.render.context().drawImage(b, 0,0,ronin.frame.width*2,ronin.frame.height*2); - ronin.under.clear(); - } - this.drag = function(line) { - var target = this.under ? ronin.layers.under : ronin.layers.render; var offset = make_offset(line.from,line.to); - var data = target.select(); - target.clear(); - target.context().putImageData(data, offset.x * -2, offset.y * -2); + var data = ronin.cursor.target.select(); + ronin.cursor.target.clear(); + ronin.cursor.target.context().putImageData(data, offset.x * -2, offset.y * -2); } this.swap_colors = function() @@ -185,7 +164,7 @@ function Cursor(rune) this.swap_layer = function() { - this.under = this.under ? false : true; + this.target = this.target.name == "above" ? ronin.layers.below : ronin.layers.above; ronin.commander.update(); } @@ -259,7 +238,7 @@ function Cursor(rune) mode = "DRAG"; } - return ""+mode+""+ronin.cursor.size+" "+(ronin.cursor.under ? "UNDER" : "ABOVE")+" "; + return "ZOOM"+ronin.frame.zoom.scale+" "+mode+""+ronin.cursor.size+" "+(ronin.cursor.target.name)+" "; } function distance_between(a,b) diff --git a/sources/scripts/core/keyboard.js b/sources/scripts/core/keyboard.js index 385e281..0143944 100644 --- a/sources/scripts/core/keyboard.js +++ b/sources/scripts/core/keyboard.js @@ -62,7 +62,7 @@ function Keyboard() e.preventDefault(); ronin.guide.inspect = false; ronin.guide.clear(); - ronin.render.clear(); + ronin.cursor.target.clear(); } // Open diff --git a/sources/scripts/core/layer.js b/sources/scripts/core/layer.js index 22b3f77..11f3ccf 100644 --- a/sources/scripts/core/layer.js +++ b/sources/scripts/core/layer.js @@ -1,7 +1,9 @@ -function Layer() +function Layer(name) { + this.name = name; this.el = document.createElement('canvas'); - this.className = "layer"; + this.el.id = name; + this.el.className = "layer"; this.install = function() { @@ -66,4 +68,17 @@ function Layer() ctx.fill(); ctx.closePath(); } + + this.zoom = function(zoom) + { + this.el.style.width = (ronin.frame.width * ronin.frame.zoom.scale)+"px"; + this.el.style.height = (ronin.frame.height * ronin.frame.zoom.scale)+"px"; + + // Clamp + if(zoom.offset.x > 0){ zoom.offset.x = 0; } + if(zoom.offset.y > 0){ zoom.offset.y = 0; } + + this.el.style.left = zoom.offset.x+"px"; + this.el.style.top = zoom.offset.y+"px"; + } } \ No newline at end of file diff --git a/sources/scripts/layers/guide.js b/sources/scripts/layers/guide.js index 278c6c3..0ea807f 100644 --- a/sources/scripts/layers/guide.js +++ b/sources/scripts/layers/guide.js @@ -41,7 +41,7 @@ function Guide() this.toggle_color_picker = function(show) { if(!show){ return; } - var originalData = ronin.render.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2); + var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2); var data = originalData.data; for(var i = 0; i < data.length; i += 4) { var x = i % (ronin.frame.width*8) diff --git a/sources/scripts/layers/render.js b/sources/scripts/layers/render.js deleted file mode 100644 index e993d3b..0000000 --- a/sources/scripts/layers/render.js +++ /dev/null @@ -1,6 +0,0 @@ -function Render() -{ - Layer.call(this); - - this.el.id = "render"; -} \ No newline at end of file diff --git a/sources/scripts/layers/under.js b/sources/scripts/layers/under.js deleted file mode 100644 index 72f1f95..0000000 --- a/sources/scripts/layers/under.js +++ /dev/null @@ -1,6 +0,0 @@ -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 fad3641..2ea1de0 100644 --- a/sources/scripts/modules/brush.js +++ b/sources/scripts/modules/brush.js @@ -6,8 +6,8 @@ function Brush() this.pointers = [ new Pointer({offset:{x:0,y:0}}), - new Pointer({offset:{x:2,y:2}}), - new Pointer({offset:{x:4,y:4}}) + new Pointer({offset:{x:3,y:3}}), + new Pointer({offset:{x:-2,y:-3}}) ]; this.methods.add = new Method("add","x,y&mirror_x,mirror_y","Add a new pointer to the brush",function(q){ @@ -21,7 +21,7 @@ function Brush() }) this.methods.pick = new Method("pick","x,y","Set brush color to a position's pixel.",function(q){ - var pixel = (ronin.commander.input_el.value == "~" ? ronin.guide: ronin.render).context() .getImageData(q.x*2, q.y*2, 1, 1).data; + var pixel = (ronin.commander.input_el.value == "~" ? ronin.guide: ronin.cursor.target).context() .getImageData(q.x*2, q.y*2, 1, 1).data; var c = new Color().rgb_to_hex(pixel); var color = new Color(c); ronin.cursor.color = color.hex; @@ -59,7 +59,7 @@ function Brush() line.to = line.from } - var pixel = ronin.render.context().getImageData(line.to.x*2, line.to.y*2, 1, 1).data; + var pixel = ronin.cursor.target.context().getImageData(line.to.x*2, line.to.y*2, 1, 1).data; } this.mod_size = function(mod) @@ -94,7 +94,7 @@ function Pointer(options) this.stroke = function(line) { - var ctx = ronin.cursor.under ? ronin.layers.under.context() : ronin.layers.render.context(); + var ctx = ronin.cursor.target.context(); if(this.options.mirror){ line.from.x = (this.options.mirror.x *2) - line.from.x; diff --git a/sources/scripts/modules/filter.js b/sources/scripts/modules/filter.js index ad4b122..b5330d5 100644 --- a/sources/scripts/modules/filter.js +++ b/sources/scripts/modules/filter.js @@ -6,7 +6,7 @@ function Filter() var color = new Color(q).floats(); - var originalData = ronin.render.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2); + var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2); var data = originalData.data; for(var i = 0; i < data.length; i += 4) { @@ -15,14 +15,14 @@ function Filter() data[i + 2] = data[i + 2] * (color.b + 0.5); } - ronin.render.context().putImageData(originalData, 0, 0); + ronin.cursor.target.context().putImageData(originalData, 0, 0); }); this.methods.saturation = new Method("saturation","#ff00333","Filter color saturation.",function(q){ var color = new Color(q).floats(); - var originalData = ronin.render.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2); + var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2); var data = originalData.data; for(var i = 0; i < data.length; i += 4) { @@ -33,7 +33,7 @@ function Filter() data[i] = data[i+1] = data[i+2] = v } - ronin.render.context().putImageData(originalData, 0, 0); + ronin.cursor.target.context().putImageData(originalData, 0, 0); }); this.preview = function(q) @@ -46,7 +46,7 @@ function Filter() var x = q.methods.saturation.x/ronin.frame.width; - var originalData = ronin.render.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2); + var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2); var data = originalData.data; for(var i = 0; i < data.length; i += 4) { diff --git a/sources/scripts/modules/frame.js b/sources/scripts/modules/frame.js index 2266141..ee51747 100644 --- a/sources/scripts/modules/frame.js +++ b/sources/scripts/modules/frame.js @@ -7,31 +7,31 @@ function Frame() this.zoom = {scale:1,offset:{x:0,y:0}}; this.methods.resize = new Method("resize","WxH","Resize canvas to size.",function(q){ - var data = ronin.render.select(0,0,ronin.frame.width,ronin.frame.height); - ronin.render.clear(); + var data = ronin.cursor.target.select(0,0,ronin.frame.width,ronin.frame.height); + ronin.cursor.target.clear(); ronin.frame.resize_to(q); - ronin.render.context().putImageData(data, 0, 0); + ronin.cursor.target.context().putImageData(data, 0, 0); }); this.methods.rescale = new Method("rescale","0.5","Rescale canvas to float.",function(p){ var new_size = {width:ronin.frame.width * p,height:ronin.frame.height * p}; - ronin.render.context().drawImage(ronin.render.to_img(),0,0,new_size.width * 2,new_size.height * 2); + ronin.cursor.target.context().drawImage(ronin.cursor.target.to_img(),0,0,new_size.width * 2,new_size.height * 2); setTimeout(function(){ ronin.frame.methods.resize.run(new_size);},500) }); this.methods.crop = new Method("crop","X,Y|WxH","Crop canvas to rect.",function(p){ - var data = ronin.render.select(0,0,p.width*2,p.height*2); - ronin.render.clear(); + var data = ronin.cursor.target.select(0,0,p.width*2,p.height*2); + ronin.cursor.target.clear(); ronin.frame.resize_to(p); - setTimeout(function(){ ronin.render.context().putImageData(data, p.x*-2, p.y*-2);},500) + setTimeout(function(){ ronin.cursor.target.context().putImageData(data, p.x*-2, p.y*-2);},500) }); this.methods.clear = new Method("clear","","Erase entire canvas",function(q){ - ronin.render.clear(); + ronin.cursor.target.clear(); }); this.methods.fill = new Method("fill","#f00","Fill entire canvas with color",function(q){ - ronin.render.fill(q ? q : ronin.cursor.color); + ronin.cursor.target.fill(q ? q : ronin.cursor.color); }); this.methods.inspect = new Method("inspect","","View canvas details",function(q){ @@ -43,19 +43,12 @@ function Frame() if(ronin.frame.zoom.scale == parseInt(q)){ return; } ronin.frame.zoom.scale = parseInt(q); - ronin.layers.render.el.style.width = (ronin.frame.width * ronin.frame.zoom.scale)+"px"; - ronin.layers.render.el.style.height = (ronin.frame.height * ronin.frame.zoom.scale)+"px"; + ronin.frame.zoom.offset.x = ronin.frame.zoom.scale == 1 ? 0 : ((-ronin.cursor.pos.x * ronin.frame.zoom.scale) + (ronin.frame.width/2)); + ronin.frame.zoom.offset.y = ronin.frame.zoom.scale == 1 ? 0 : ((-ronin.cursor.pos.y * ronin.frame.zoom.scale) + (ronin.frame.height/2)); - if(ronin.frame.zoom.scale == 1){ - ronin.frame.zoom.offset.x = 0; - ronin.frame.zoom.offset.y = 0; - } - else{ - ronin.frame.zoom.offset.x = ((-ronin.cursor.pos.x * ronin.frame.zoom.scale) + (ronin.frame.width/2)); - ronin.frame.zoom.offset.y = ((-ronin.cursor.pos.y * ronin.frame.zoom.scale) + (ronin.frame.height/2)); - } - ronin.layers.render.el.style.left = ronin.frame.zoom.offset.x+"px"; - ronin.layers.render.el.style.top = ronin.frame.zoom.offset.y+"px"; + console.log(ronin.frame.zoom) + ronin.layers.above.zoom(ronin.frame.zoom); + ronin.layers.below.zoom(ronin.frame.zoom); }); this.resize_to = function(size) @@ -66,7 +59,7 @@ function Frame() const {dialog,app} = require('electron').remote; var win = require('electron').remote.getCurrentWindow(); win.setSize(size.width,size.height); - ronin.render.resize_to(size); + ronin.cursor.target.resize_to(size); ronin.grid.resize_to(size); ronin.guide.resize_to(size); ronin.cursor.resize_to(size); diff --git a/sources/scripts/modules/io.js b/sources/scripts/modules/io.js index 3529b28..b618a1a 100644 --- a/sources/scripts/modules/io.js +++ b/sources/scripts/modules/io.js @@ -17,7 +17,7 @@ function IO() var width = parseInt(img.naturalWidth * 0.5); var height = parseInt(img.naturalHeight * 0.5); ronin.frame.resize_to({width:width,height:height}); - ronin.io.draw_image(ronin.render.context(),img,{x:0,y:0,width:width,height:height}); + ronin.io.draw_image(ronin.cursor.target.context(),img,{x:0,y:0,width:width,height:height}); } }); }) @@ -41,7 +41,7 @@ function IO() this.methods.draw = new Method("draw","X,Y|WxH","Draw the loaded image pixels.",function(q){ if(!ronin.io.image){ return; } - ronin.io.draw_image(ronin.render.context(),ronin.io.image,ronin.commander.query().methods.draw); + ronin.io.draw_image(ronin.cursor.target.context(),ronin.io.image,ronin.commander.query().methods.draw); ronin.io.image = null; ronin.preview.clear(); }); @@ -49,7 +49,7 @@ function IO() this.methods.save = new Method("save","jpg/png","Export canvas.",function(q){ var ext = q ? q : "jpg"; var fs = require('fs'); - var data = ronin.render.to_base64(ext).replace(/^data:image\/\w+;base64,/, ""); + var data = ronin.cursor.target.to_base64(ext).replace(/^data:image\/\w+;base64,/, ""); var buf = new Buffer(data, 'base64'); dialog.showSaveDialog((fileName) => { diff --git a/sources/scripts/modules/line.js b/sources/scripts/modules/line.js index 6bef715..69e8f14 100644 --- a/sources/scripts/modules/line.js +++ b/sources/scripts/modules/line.js @@ -38,7 +38,7 @@ function Line() } } - this.stroke = function(from,to,ctx = ronin.render.context()) + this.stroke = function(from,to,ctx = ronin.cursor.target.context()) { ctx.beginPath(); ctx.globalCompositeOperation="source-over"; diff --git a/sources/scripts/modules/path.js b/sources/scripts/modules/path.js index 79e6ce5..8a52b79 100644 --- a/sources/scripts/modules/path.js +++ b/sources/scripts/modules/path.js @@ -9,7 +9,7 @@ function Path() var path = ronin.path.create_path(q); - var ctx = ronin.render.context(); + var ctx = ronin.cursor.target.context(); ctx.beginPath(); ctx.lineCap = ronin.path.settings.cap; @@ -24,7 +24,7 @@ function Path() var path = ronin.path.create_path(q); - var ctx = ronin.render.context(); + var ctx = ronin.cursor.target.context(); ctx.beginPath(); ctx.lineCap = ronin.path.settings.cap; @@ -36,7 +36,7 @@ function Path() this.methods.svg = new Method("svg","M0,0 L100,100","",function(q){ var path = ronin.commander.query().raw.replace("svg:","").trim(); - var ctx = ronin.render.context(); + var ctx = ronin.cursor.target.context(); ctx.beginPath(); ctx.lineCap = ronin.path.settings.cap; ctx.lineWidth = ronin.cursor.size; diff --git a/sources/scripts/modules/type.js b/sources/scripts/modules/type.js index c0799c9..45f7b72 100644 --- a/sources/scripts/modules/type.js +++ b/sources/scripts/modules/type.js @@ -10,9 +10,9 @@ function Type() var size = rect.height * 2 ronin.preview.clear(); - ronin.render.context().textAlign = ronin.type.settings.anchor; - ronin.render.context().font = size+"px "+ronin.type.settings.font.replace("+"," "); - ronin.render.context().fillText(q[0].replace("+"," "),rect.x * 2,(rect.y * 2)+size); + ronin.cursor.target.context().textAlign = ronin.type.settings.anchor; + ronin.cursor.target.context().font = size+"px "+ronin.type.settings.font.replace("+"," "); + ronin.cursor.target.context().fillText(q[0].replace("+"," "),rect.x * 2,(rect.y * 2)+size); }) this.preview = function(q) diff --git a/sources/scripts/ronin.js b/sources/scripts/ronin.js index 8202e84..ae93f56 100644 --- a/sources/scripts/ronin.js +++ b/sources/scripts/ronin.js @@ -11,9 +11,9 @@ function Ronin() this.grid = new Grid(); this.guide = new Guide(); - this.render = new Render(); + this.above = new Layer("above"); + this.below = new Layer("below"); this.preview = new Preview(); - this.under = new Under(); this.io = new IO(); this.brush = new Brush(); @@ -26,8 +26,8 @@ function Ronin() this.layers = { grid : this.grid, guide : this.guide, - under : this.under, - render : this.render, + above : this.above, + below : this.below, cursor : this.cursor, preview : this.preview, }; @@ -49,10 +49,12 @@ function Ronin() this.frame.width = window.innerWidth; this.frame.height = window.innerHeight; + this.cursor.target = this.layers.above; + this.grid.install(); this.guide.install(); - this.render.install(); - this.under.install(); + this.above.install(); + this.below.install(); this.preview.install(); this.cursor.install(); @@ -75,8 +77,8 @@ function Ronin() ronin.commander.input_el.addEventListener('input', ronin.commander.on_input); console.log("Ronin","Started"); - this.render.update(); - this.under.update(); + this.above.update(); + this.below.update(); this.grid.update(); this.guide.update(); this.cursor.update();