dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Zoom is working

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-12-28 09:10:43 +13:00
parent 041e5ec873
commit fd43a939b8
16 changed files with 78 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sources/index.html
View File

@ -17,9 +17,7 @@
<script type="text/javascript" src="scripts/core/layer.js"></script>
<script type="text/javascript" src="scripts/layers/grid.js"></script>
<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>

8
sources/links/main.css
View File

@ -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 }
.layer { transition: all 150ms; left:0px; top:0px; }

41
sources/scripts/core/cursor.js
View File

@ -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 "<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>";
return "<t class='zoom'>ZOOM"+ronin.frame.zoom.scale+"</t> <t class='mode'>"+mode+"</t><t class='size'>"+ronin.cursor.size+"</t> "+(ronin.cursor.target.name)+" <t class='color' style='color:"+ronin.cursor.color+"'>●</t><t class='color' style='color:"+ronin.cursor.color_alt+"'>●</t>";
}
function distance_between(a,b)

2
sources/scripts/core/keyboard.js
View File

@ -62,7 +62,7 @@ function Keyboard()
e.preventDefault();
ronin.guide.inspect = false;
ronin.guide.clear();
ronin.render.clear();
ronin.cursor.target.clear();
}
// Open

19
sources/scripts/core/layer.js
View File

@ -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";
}
}

2
sources/scripts/layers/guide.js
View File

@ -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)

6
sources/scripts/layers/render.js
View File

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

6
sources/scripts/layers/under.js
View File

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

10
sources/scripts/modules/brush.js
View File

@ -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;

10
sources/scripts/modules/filter.js
View File

@ -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) {

37
sources/scripts/modules/frame.js
View File

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

6
sources/scripts/modules/io.js
View File

@ -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) => {

2
sources/scripts/modules/line.js
View File

@ -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";

6
sources/scripts/modules/path.js
View File

@ -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;

6
sources/scripts/modules/type.js
View File

@ -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)

18
sources/scripts/ronin.js
View File

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