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();