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

Improved Type

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-03-28 13:56:00 -07:00
parent a8a23736bf
commit cc37e3ff98
27 changed files with 154 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -22,9 +22,8 @@
<script type="text/javascript" src="scripts/modules/brush.js"></script>
<script type="text/javascript" src="scripts/modules/brush.pointer.js"></script>
<script type="text/javascript" src="scripts/modules/source.js"></script>
<script type="text/javascript" src="scripts/modules/file.save.js"></script>
<script type="text/javascript" src="scripts/modules/surface.js"></script>
<script type="text/javascript" src="scripts/modules/surface.layer.js"></script>
<script type="text/javascript" src="scripts/modules/frame.js"></script>
<script type="text/javascript" src="scripts/modules/layer.js"></script>
<script type="text/javascript" src="scripts/modules/eye.js"></script>
<script type="text/javascript" src="scripts/modules/type.js"></script>
<script type="text/javascript" src="scripts/modules/render.js"></script>
@ -51,7 +50,7 @@
<body>
<div id='ronin'>
<div id='cursor'></div>
<div id='surface'></div>
<div id='frame'></div>
<div id='terminal'></div>
</div>
<script type="text/javascript" src="scripts/core/init.js"></script>

14
links/main.css
View File

@ -2,14 +2,14 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
*:focus {outline: none; }
#ronin { width:100%; height:100%; overflow:hidden; background:#111; background-image:url(../media/graphics/grid.svg); background-position: center center; }
#surface { width:50vw; height:50vh; overflow:hidden; position:fixed; left:50%; top:50%; background:none; border-radius:5px; border:1px solid #333;}
#surface > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
#surface widget { position: absolute; top:0px; left:0px; line-height: 20px; font-size:10px; z-index:9000; color:white; width:100%; height:100%; }
#surface widget span { display:inline-block; padding:2px 10px; }
#surface widget .cursor { position:absolute; bottom:0px; right:0px; }
#surface.bright widget { color:#000; }
#frame { width:50vw; height:50vh; overflow:hidden; position:fixed; left:50%; top:50%; background:none; border-radius:5px; border:1px solid #333;}
#frame > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
#frame widget { position: absolute; top:0px; left:0px; line-height: 20px; font-size:10px; z-index:9000; color:white; width:100%; height:100%; }
#frame widget span { display:inline-block; padding:2px 10px; }
#frame widget .cursor { position:absolute; bottom:0px; right:0px; }
#frame.bright widget { color:#000; }
#overlay { position:absolute; z-index:1000;}
#surface { cursor:none;}
#frame { cursor:none;}
#terminal { position: fixed; bottom:0px; left:0px; background:#000; width:100vw; height: 120px;overflow: hidden;}
#terminal input { display: block; position:absolute; bottom:0px; width:100vw; padding:0px 5px; font-size:10px; line-height: 20px; background:none; z-index:900; color:white;}

7
scripts/core/command.js
View File

@ -94,6 +94,13 @@ function Command(content)
return null;
}
this.text = function()
{
var content_str = this.content.join(" ");
if(content_str.indexOf("\"") < 0){ return null; }
return content_str.split("\"")[1];
}
this.methods = function()
{
var a = [];

8
scripts/core/init.js
View File

@ -1,6 +1,6 @@
var ronin = new Ronin();
ronin.element = document.getElementById('ronin');
ronin.surface.element = document.getElementById('surface');
ronin.frame.element = document.getElementById('frame');
ronin.cursor.element = document.getElementById('cursor');
ronin.terminal.element = document.getElementById('terminal');
ronin.cursor.mode = ronin.brush;
@ -32,12 +32,12 @@ starting_canvas.width = parseInt(starting_canvas.width/40) * 40;
starting_canvas.height = parseInt(starting_canvas.height/40) * 40;
ronin.terminal.query("~ "+ronin.timestamp());
ronin.terminal.query("surface.select main");
ronin.terminal.query("surface.resize "+starting_canvas.render());
ronin.terminal.query("frame.select main");
ronin.terminal.query("frame.resize "+starting_canvas.render());
// ronin.terminal.query("- color=#ff0000");
// ronin.terminal.query("# fill=#ff0000");
// ronin.terminal.query("~ Ready.");
ronin.terminal.input_element.focus();
ronin.terminal.update_hint();
ronin.surface.update_widget();
ronin.frame.update_widget();

4
scripts/core/keyboard.js
View File

@ -12,7 +12,7 @@ function Keyboard()
this.alt_held = true;
}
ronin.cursor.update(event);
ronin.surface.update_widget();
ronin.frame.update_widget();
ronin.terminal.update_hint();
}
@ -45,7 +45,7 @@ function Keyboard()
// Passive
ronin.terminal.passive(ronin.terminal.input_element.value);
ronin.surface.update_widget();
ronin.frame.update_widget();
ronin.terminal.update_hint();
};

20
scripts/core/ronin.js
View File

@ -5,14 +5,12 @@ function Ronin()
this.default = new Default("`");
this.surface = new Surface("@");
this.frame = new Frame("@");
this.path = new Path("+");
this.type = new Type("&");
this.brush = new Brush("-");
// this.fileload = new FileLoad("/");
// this.filesave = new FileSave("$");
this.source = new Source("$");
this.source = new Source("$");
this.eye = new Eye("*");
this.render = new Render("%");
@ -22,14 +20,12 @@ function Ronin()
this.terminal = new Terminal(">");
this.cursor = new Cursor(".");
this.modules[this.surface.constructor.name] = this.surface;
this.modules[this.frame.constructor.name] = this.frame;
this.modules[this.type.constructor.name] = this.type;
this.modules[this.path.constructor.name] = this.path;
this.modules[this.brush.constructor.name] = this.brush;
// this.modules[this.fileload.constructor.name] = this.fileload;
// this.modules[this.filesave.constructor.name] = this.filesave;
this.modules[this.source.constructor.name] = this.source;
// this.modules[this.render.constructor.name] = this.render;
// this.modules[this.eye.constructor.name] = this.eye;
@ -52,17 +48,17 @@ function Ronin()
this.position_in_canvas = function(e)
{
var x = e.clientX;
x -= (window.innerWidth - this.surface.settings["size"].width)/2;
x -= parseInt(this.surface.element.style.marginLeft) + (this.surface.settings["size"].width/2);
x -= (window.innerWidth - this.frame.settings["size"].width)/2;
x -= parseInt(this.frame.element.style.marginLeft) + (this.frame.settings["size"].width/2);
var y = e.clientY;
y -= (window.innerHeight - this.surface.settings["size"].height)/2;
y -= parseInt(this.surface.element.style.marginTop) + parseInt(this.surface.settings["size"].height/2);
y -= (window.innerHeight - this.frame.settings["size"].height)/2;
y -= parseInt(this.frame.element.style.marginTop) + parseInt(this.frame.settings["size"].height/2);
return new Position(x,y);
}
this.position_in_window = function(p)
{
return new Position(p.x + parseInt(this.surface.element.style.marginLeft),p.y + parseInt(this.surface.element.style.marginTop));
return new Position(p.x + parseInt(this.frame.element.style.marginLeft),p.y + parseInt(this.frame.element.style.marginTop));
}
this.timestamp = function()

6
scripts/core/widget.js
View File

@ -19,9 +19,9 @@ function Widget()
this.on_resize = function()
{
this.element.style.left = (window.innerWidth/2)-(ronin.surface.settings["size"].width/2);
this.element.style.top = (window.innerHeight/2)+(ronin.surface.settings["size"].height/2)+20;
this.element.style.width = ronin.surface.settings["size"].width+"px";
this.element.style.left = (window.innerWidth/2)-(ronin.frame.settings["size"].width/2);
this.element.style.top = (window.innerHeight/2)+(ronin.frame.settings["size"].height/2)+20;
this.element.style.width = ronin.frame.settings["size"].width+"px";
this.update();
}

10
scripts/filters/balance.js
View File

@ -9,7 +9,7 @@ function Filter_Balance()
if(!cmd.color()){ return; }
if(!cmd.color().rgb()){ return; }
this.draw(ronin.surface.active_layer.context(),cmd.color().rgb());
this.draw(ronin.frame.active_layer.context(),cmd.color().rgb());
}
this.preview = function(cmd)
@ -23,12 +23,12 @@ function Filter_Balance()
this.draw = function(context = this.context(), color_rgb)
{
var imageObj = new Image();
imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png');
imageObj.src = ronin.frame.active_layer.element.toDataURL('image/png');
var w = ronin.surface.settings["size"].width;
var h = ronin.surface.settings["size"].height;
var w = ronin.frame.settings["size"].width;
var h = ronin.frame.settings["size"].height;
var originalData = ronin.surface.active_layer.context().getImageData(0, 0, w*2, h*2);
var originalData = ronin.frame.active_layer.context().getImageData(0, 0, w*2, h*2);
var data = originalData.data;
var r = (color_rgb.r / 255) + 0.5;

10
scripts/filters/chromatic.js
View File

@ -8,7 +8,7 @@ function Filter_Chromatic()
this.render = function(cmd)
{
var position = cmd.position() ? cmd.position() : new Position(ronin.surface.settings["size"].width,ronin.surface.settings["size"].height);
var position = cmd.position() ? cmd.position() : new Position(ronin.frame.settings["size"].width,ronin.frame.settings["size"].height);
var value = cmd.value() ? cmd.value().float : 5;
ronin.overlay.clear();
@ -26,13 +26,13 @@ function Filter_Chromatic()
this.draw = function(context = this.context(), value, position)
{
var w = ronin.surface.settings["size"].width;
var h = ronin.surface.settings["size"].height;
var w = ronin.frame.settings["size"].width;
var h = ronin.frame.settings["size"].height;
//no longer letting you set how far each chanel is shifted, not sure how to receive extra data any more
var s = {r:value,g:value*.5,b:0};
var context = ronin.surface.active_layer.context();
var context = ronin.frame.active_layer.context();
//now need two imagedatas to sample off of, for some reason I cant just dump the new pixels into an empty array :/
var originalData = context.getImageData(0, 0, w*2, h*2);
@ -61,7 +61,7 @@ function Filter_Chromatic()
this.set_color(imageData, c, i,j);
}
}
ronin.surface.active_layer.clear();
ronin.frame.active_layer.clear();
context.putImageData(imageData, 0, 0);
}
}

4
scripts/filters/filter.js
View File

@ -73,11 +73,11 @@ function Filter()
this.context = function()
{
return ronin.surface.active_layer.context();
return ronin.frame.active_layer.context();
}
this.pixels = function()
{
return ronin.surface.active_layer.context().getImageData(0,0,ronin.surface.settings["size"].width * 2,ronin.surface.settings["size"].height * 2);
return ronin.frame.active_layer.context().getImageData(0,0,ronin.frame.settings["size"].width * 2,ronin.frame.settings["size"].height * 2);
}
}

12
scripts/filters/grey.js
View File

@ -7,10 +7,10 @@ function Filter_Grey()
this.render = function(cmd)
{
if(cmd.color() && cmd.color().rgb()){
this.draw(ronin.surface.active_layer.context(),cmd.color().rgb());
this.draw(ronin.frame.active_layer.context(),cmd.color().rgb());
}
else{
this.draw(ronin.surface.active_layer.context());
this.draw(ronin.frame.active_layer.context());
}
}
@ -27,12 +27,12 @@ function Filter_Grey()
this.draw = function(context = this.context(), color_rgb = new Color("#36ba0e").rgb())
{
var imageObj = new Image();
imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png');
imageObj.src = ronin.frame.active_layer.element.toDataURL('image/png');
var w = ronin.surface.settings["size"].width;
var h = ronin.surface.settings["size"].height;
var w = ronin.frame.settings["size"].width;
var h = ronin.frame.settings["size"].height;
var originalData = ronin.surface.active_layer.context().getImageData(0, 0, w*2, h*2);
var originalData = ronin.frame.active_layer.context().getImageData(0, 0, w*2, h*2);
var data = originalData.data;
var _r = (color_rgb.r / 255);

10
scripts/filters/invert.js
View File

@ -6,11 +6,11 @@ function Filter_Invert()
this.render = function(cmd)
{
var imageObj = new Image();
imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png');
imageObj.src = ronin.frame.active_layer.element.toDataURL('image/png');
var w = ronin.surface.settings["size"].width;
var h = ronin.surface.settings["size"].height;
var context = ronin.surface.active_layer.context();
var w = ronin.frame.settings["size"].width;
var h = ronin.frame.settings["size"].height;
var context = ronin.frame.active_layer.context();
var originalData = context.getImageData(0, 0, w*2, h*2);
var data = originalData.data;
@ -21,7 +21,7 @@ function Filter_Invert()
data[i + 2] = 255 - data[i + 2];
}
ronin.surface.active_layer.clear();
ronin.frame.active_layer.clear();
context.putImageData(originalData, 0, 0);
}
}

8
scripts/filters/rotate.js
View File

@ -5,7 +5,7 @@ function Filter_Rotate()
this.render = function(cmd)
{
var position = cmd.position() ? cmd.position() : new Position(ronin.surface.settings["size"].width/2,ronin.surface.settings["size"].height/2);
var position = cmd.position() ? cmd.position() : new Position(ronin.frame.settings["size"].width/2,ronin.frame.settings["size"].height/2);
var angle = cmd.angle() ? cmd.angle().degrees : 90;
ronin.overlay.clear();
@ -23,12 +23,12 @@ function Filter_Rotate()
this.draw = function(context = this.context(), angle, position)
{
var w = ronin.surface.settings["size"].width;
var h = ronin.surface.settings["size"].height;
var w = ronin.frame.settings["size"].width;
var h = ronin.frame.settings["size"].height;
ronin.overlay.context().drawImage(context.canvas,0,0,w,h);
ronin.surface.active_layer.clear();
ronin.frame.active_layer.clear();
context.save();
context.translate(position.x,position.y);

10
scripts/filters/sharpen.js
View File

@ -7,11 +7,11 @@ function Filter_Sharpen()
this.render = function(cmd)
{
var imageObj = new Image();
imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png');
imageObj.src = ronin.frame.active_layer.element.toDataURL('image/png');
var w = ronin.surface.settings["size"].width;
var h = ronin.surface.settings["size"].height;
var context = ronin.surface.active_layer.context();
var w = ronin.frame.settings["size"].width;
var h = ronin.frame.settings["size"].height;
var context = ronin.frame.active_layer.context();
var originalData = context.getImageData(0, 0, w*2, h*2);
var data = originalData.data;
@ -36,7 +36,7 @@ function Filter_Sharpen()
newImage.data[i+2] = parseInt(average.b);
}
ronin.surface.active_layer.clear();
ronin.frame.active_layer.clear();
context.putImageData(newImage, 0, 0);
}

6
scripts/filters/stencil.js
View File

@ -9,7 +9,7 @@ function Filter_Stencil()
var color = cmd.color() ? cmd.color().hex : "#ffffff";
ronin.render.layer.clear();
this.draw(ronin.surface.active_layer.context(),angle,color);
this.draw(ronin.frame.active_layer.context(),angle,color);
}
this.preview = function(cmd)
@ -23,8 +23,8 @@ function Filter_Stencil()
this.draw = function(context = this.context(), angle, color)
{
var w = ronin.surface.settings["size"].width;
var h = ronin.surface.settings["size"].height;
var w = ronin.frame.settings["size"].width;
var h = ronin.frame.settings["size"].height;
context.translate(w/2,h/2);

22
scripts/modules/brush.js
View File

@ -35,14 +35,14 @@ function Brush(rune)
this.size_up = function()
{
this.settings["size"].float -= this.settings["size"].float > 1 ? 1 : 0;
ronin.surface.update_widget();
ronin.frame.update_widget();
ronin.terminal.log(new Log(this,"Increased pointer size to: "+this.size));
}
this.size_down = function()
{
this.settings["size"].float += 1;
ronin.surface.update_widget();
ronin.frame.update_widget();
ronin.terminal.log(new Log(this,"Decreased pointer size to: "+this.size));
}
@ -62,15 +62,15 @@ function Brush(rune)
var position = ronin.cursor.position;
ronin.surface.context().beginPath();
ronin.surface.context().globalCompositeOperation="destination-out";
ronin.surface.context().moveTo(this.position_prev.x,this.position_prev.y);
ronin.surface.context().lineTo(position.x,position.y);
ronin.surface.context().lineCap="round";
ronin.surface.context().lineWidth = this.settings["size"].float * 5;
ronin.surface.context().strokeStyle = new Color("#ff0000").rgba();
ronin.surface.context().stroke();
ronin.surface.context().closePath();
ronin.frame.context().beginPath();
ronin.frame.context().globalCompositeOperation="destination-out";
ronin.frame.context().moveTo(this.position_prev.x,this.position_prev.y);
ronin.frame.context().lineTo(position.x,position.y);
ronin.frame.context().lineCap="round";
ronin.frame.context().lineWidth = this.settings["size"].float * 5;
ronin.frame.context().strokeStyle = new Color("#ff0000").rgba();
ronin.frame.context().stroke();
ronin.frame.context().closePath();
this.position_prev = position;
}

20
scripts/modules/brush.pointer.js
View File

@ -29,10 +29,10 @@ function Pointer(offset = new Position(), color = new Color('000000'))
this.distance += position.distance_to(position_prev);
ronin.surface.context().beginPath();
ronin.frame.context().beginPath();
ronin.surface.context().globalCompositeOperation="source-over";
ronin.surface.context().moveTo(position_prev.x,position_prev.y);
ronin.frame.context().globalCompositeOperation="source-over";
ronin.frame.context().moveTo(position_prev.x,position_prev.y);
//Choose direct line or curve line based on how many samples available
if(this.position_prev.length > 1 && position.distance_to(position_prev) > 13){
@ -49,17 +49,17 @@ function Pointer(offset = new Position(), color = new Color('000000'))
var tx = px + (ppx - px) * 0.2 * d;
var ty = py + (ppy - py) * 0.2 * d;
ronin.surface.context().quadraticCurveTo(tx,ty,position.x,position.y);
ronin.frame.context().quadraticCurveTo(tx,ty,position.x,position.y);
}
else {
ronin.surface.context().lineTo(position.x,position.y);
ronin.frame.context().lineTo(position.x,position.y);
}
ronin.surface.context().lineCap="round";
ronin.surface.context().lineWidth = this.thickness();
ronin.surface.context().strokeStyle = ronin.brush.settings["color"].rgba();
ronin.surface.context().stroke();
ronin.surface.context().closePath();
ronin.frame.context().lineCap="round";
ronin.frame.context().lineWidth = this.thickness();
ronin.frame.context().strokeStyle = ronin.brush.settings["color"].rgba();
ronin.frame.context().stroke();
ronin.frame.context().closePath();
this.position_prev.unshift(position);
}

2
scripts/modules/cursor.js
View File

@ -134,7 +134,7 @@ function Cursor(rune)
// this.set_mode(ronin.module);
// }
// else if(event.altKey == true && event.shiftKey == true){
// this.set_mode(ronin.surface.active_layer);
// this.set_mode(ronin.frame.active_layer);
// }
// else if(event.altKey == true){
// this.set_mode(ronin.default);

4
scripts/modules/default.js
View File

@ -65,8 +65,8 @@ function Default(rune)
this.drag_offset_x -= offset_x;
this.drag_offset_y -= offset_y;
ronin.surface.element.style.marginLeft = -(ronin.surface.settings["size"].width/2) + this.drag_offset_x;
ronin.surface.element.style.marginTop = -(ronin.surface.settings["size"].height/2) + this.drag_offset_y;
ronin.frame.element.style.marginLeft = -(ronin.frame.settings["size"].width/2) + this.drag_offset_x;
ronin.frame.element.style.marginTop = -(ronin.frame.settings["size"].height/2) + this.drag_offset_y;
ronin.element.style.backgroundPosition = ((this.drag_offset_x/8))-(window.innerWidth % 20)+"px "+((this.drag_offset_y/8)-(window.innerWidth % 20))+"px";

2
scripts/modules/eye.js
View File

@ -15,7 +15,7 @@ function Eye(rune)
// TODO: If a rect is given, return the average color
this.color_picker = function(position,rect = null)
{
var imgData = ronin.surface.context().getImageData(position.x*2, position.y*2, 1, 1).data;
var imgData = ronin.frame.context().getImageData(position.x*2, position.y*2, 1, 1).data;
var c = new Color();
ronin.terminal.input_element.value = "* "+(c.rgb_to_hex(imgData));
ronin.terminal.update_hint();

46
scripts/modules/surface.js → scripts/modules/frame.js
View File

@ -1,4 +1,4 @@
function Surface(rune)
function Frame(rune)
{
Module.call(this,rune);
@ -28,16 +28,16 @@ function Surface(rune)
this.settings["size"] = params.rect();
for(layer_name in ronin.surface.layers){
ronin.surface.layers[layer_name].resize(this.settings["size"]);
for(layer_name in ronin.frame.layers){
ronin.frame.layers[layer_name].resize(this.settings["size"]);
}
ronin.surface.element.width = this.settings["size"].width * 2;
ronin.surface.element.height = this.settings["size"].height * 2;
ronin.surface.element.style.width = this.settings["size"].width+"px";
ronin.surface.element.style.height = this.settings["size"].height+"px";
ronin.surface.element.style.marginLeft = -(this.settings["size"].width/2);
ronin.surface.element.style.marginTop = -(this.settings["size"].height/2);
ronin.frame.element.width = this.settings["size"].width * 2;
ronin.frame.element.height = this.settings["size"].height * 2;
ronin.frame.element.style.width = this.settings["size"].width+"px";
ronin.frame.element.style.height = this.settings["size"].height+"px";
ronin.frame.element.style.marginLeft = -(this.settings["size"].width/2);
ronin.frame.element.style.marginTop = -(this.settings["size"].height/2);
ronin.on_resize();
ronin.terminal.log(new Log(this,"Resized Surface to "+this.settings["size"].render()));
@ -56,7 +56,7 @@ function Surface(rune)
this.select = function(params)
{
var layer_name = params.content;
if(!ronin.surface.layers[layer_name]){
if(!ronin.frame.layers[layer_name]){
this.add_layer(new Layer(layer_name));
}
this.select_layer(this.layers[layer_name]);
@ -68,10 +68,10 @@ function Surface(rune)
this.blink = function()
{
Object.keys(ronin.surface.layers).forEach(function (key) {
ronin.surface.layers[key].blink();
Object.keys(ronin.frame.layers).forEach(function (key) {
ronin.frame.layers[key].blink();
});
setTimeout(function(){ ronin.surface.blink(); }, 30);
setTimeout(function(){ ronin.frame.blink(); }, 30);
}
this.select_layer = function(layer)
@ -81,8 +81,8 @@ function Surface(rune)
this.select_any_layer = function()
{
var layer_name = Object.keys(ronin.surface.layers)[0];
this.select_layer(ronin.surface.layers[layer_name]);
var layer_name = Object.keys(ronin.frame.layers)[0];
this.select_layer(ronin.frame.layers[layer_name]);
}
this.add_layer = function(layer)
@ -117,14 +117,14 @@ function Surface(rune)
s += "<span class='cursor'>"+ronin.cursor.mode.mouse_mode()+"</span>";
var keys = Object.keys(ronin.surface.layers);
var keys = Object.keys(ronin.frame.layers);
var loc = keys.indexOf(this.active_layer.name);
if(keys.length > 1){
s += "<span class='layer'>"+ronin.surface.active_layer.widget()+"("+(loc+1)+"/"+keys.length+")</span>";
s += "<span class='layer'>"+ronin.frame.active_layer.widget()+"("+(loc+1)+"/"+keys.length+")</span>";
}
else{
s += "<span class='layer'>"+ronin.surface.active_layer.widget()+"</span>";
s += "<span class='layer'>"+ronin.frame.active_layer.widget()+"</span>";
}
this.widget_element.innerHTML = s;
@ -134,20 +134,20 @@ function Surface(rune)
this.layer_up = function()
{
var keys = Object.keys(ronin.surface.layers);
var keys = Object.keys(ronin.frame.layers);
var loc = keys.indexOf(this.active_layer.name);
if(loc >= keys.length-1){ console.log("Reached end"); return false; }
if(keys[loc+1] != null){this.select_layer(ronin.surface.layers[keys[loc+1]]);}
if(keys[loc+1] != null){this.select_layer(ronin.frame.layers[keys[loc+1]]);}
}
this.layer_down = function()
{
var keys = Object.keys(ronin.surface.layers);
var keys = Object.keys(ronin.frame.layers);
var loc = keys.indexOf(this.active_layer.name);
if(keys[loc-1] != null){this.select_layer(ronin.surface.layers[keys[loc-1]]);}
if(keys[loc-1] != null){this.select_layer(ronin.frame.layers[keys[loc-1]]);}
}
// this.passive = function(cmd)
@ -180,7 +180,7 @@ function Surface(rune)
this.mouse_move = function(position,rect)
{
ronin.terminal.input_element.value = "surface."+ronin.terminal.method_name+" "+this.mouse_from.render()+" "+rect.render()+" ";
ronin.terminal.input_element.value = "frame."+ronin.terminal.method_name+" "+this.mouse_from.render()+" "+rect.render()+" ";
ronin.terminal.passive();
}

27
scripts/modules/surface.layer.js → scripts/modules/layer.js
View File

@ -3,6 +3,7 @@ function Layer(name,manager = null)
Module.call(this,"#");
this.add_method(new Method("fill",["color","position","rect"],"Add position"));
this.add_method(new Method("rename",["text"]));
this.name = name;
this.rune = "#";
@ -16,14 +17,24 @@ function Layer(name,manager = null)
if(preview){ return; }
if(!params.color()){ return; }
var rect = params.rect() ? params.rect() : new Rect(this.element.width+"x"+this.element.height);
var position = params.position() ? params.position() : new Position("0,0");
this.context().beginPath();
this.context().rect(0, 0, this.element.width, this.element.height);
this.context().rect(position.x, position.y, rect.width, rect.height);
this.context().fillStyle = params.color().hex;
this.context().fill();
ronin.terminal.log(new Log(this,"Filled layer: "+params.color().hex));
this.element.style.border = "1px solid "+params.color().hex;
this.element.setAttribute("class",params.color().style());
ronin.terminal.log(new Log(this,"Filled layer "+this.name+": "+params.color().hex));
}
this.rename = function(params, preview = false)
{
if(preview){ return; }
// TODO
// ronin.frame.layers[params.text()] = this;
// ronin.frame.layers[this.name] = null;
ronin.terminal.log(new Log(this,"Renamed layer "+this.name+" to "+params.text()));
}
this.resize = function(rect)
@ -49,8 +60,8 @@ function Layer(name,manager = null)
{
ronin.terminal.log(new Log(this,"Removing layer "+this.name));
manager.layer = null;
ronin.surface.layers[this.name].element.outerHTML = "";
delete ronin.surface.layers[this.name];
ronin.frame.layers[this.name].element.outerHTML = "";
delete ronin.frame.layers[this.name];
}
this.context = function()
@ -70,7 +81,7 @@ function Layer(name,manager = null)
var e_name = this.name;
var e_class = "";
if(ronin.surface.active_layer.name == this.name){ e_class += "highlight "; }
if(ronin.frame.active_layer.name == this.name){ e_class += "highlight "; }
if(this.manager != null){ e_class += "managed "; }
return "<span class='"+e_class+"'>"+e_name+"</span>";
@ -102,7 +113,7 @@ function Layer(name,manager = null)
var offset_x = this.move_from.x - position.x;
var offset_y = this.move_from.y - position.y;
var imageData = this.context().getImageData(0, 0, ronin.surface.settings["size"].width * 2, ronin.surface.settings["size"].height * 2);
var imageData = this.context().getImageData(0, 0, ronin.frame.settings["size"].width * 2, ronin.frame.settings["size"].height * 2);
this.clear();
this.context().putImageData(imageData, -offset_x * 2, -offset_y * 2);

4
scripts/modules/magnet.js
View File

@ -39,8 +39,8 @@ function Magnet(rune)
if(rect.width < 5 || rect.height < 5){ return; }
var horizontal = ronin.surface.settings["size"].width/rect.width;
var vertical = ronin.surface.settings["size"].height/rect.height;
var horizontal = ronin.frame.settings["size"].width/rect.width;
var vertical = ronin.frame.settings["size"].height/rect.height;
for (var x = 1; x < horizontal; x++) {
for (var y = 1; y < vertical; y++) {

6
scripts/modules/module.js
View File

@ -22,7 +22,7 @@ function Module(rune)
{
this.layer = new Layer(this.constructor.name+".Preview",this);
this.layer.element.setAttribute("style","z-index:7000");
ronin.surface.add_layer(this.layer);
ronin.frame.add_layer(this.layer);
}
this.get_layer = function(is_blinking = false)
@ -150,12 +150,12 @@ function Module(rune)
this.key_arrow_up = function()
{
ronin.surface.layer_up();
ronin.frame.layer_up();
}
this.key_arrow_down = function()
{
ronin.surface.layer_down();
ronin.frame.layer_down();
}
this.key_arrow_left = function()

2
scripts/modules/path.js
View File

@ -49,7 +49,7 @@ function Path(rune)
{
var s = "";
s += "<svg width='"+ronin.surface.settings["size"].width+"' height='"+ronin.surface.settings["size"].height+"' xmlns='http://www.w3.org/2000/svg' baseProfile='full' version='1.1' style='fill:none;stroke:red;stroke-width:2px;stroke-linecap:square;'>";
s += "<svg width='"+ronin.frame.settings["size"].width+"' height='"+ronin.frame.settings["size"].height+"' xmlns='http://www.w3.org/2000/svg' baseProfile='full' version='1.1' style='fill:none;stroke:red;stroke-width:2px;stroke-linecap:square;'>";
for (var i = 0; i < this.paths.length; i++) {
s += "<path d='"+this.paths[i]+"' />";

14
scripts/modules/source.js
View File

@ -35,7 +35,7 @@ function Source(rune)
width = isNaN(width) && height > 0 ? (height*base_image.naturalWidth)/base_image.naturalHeight : width;
height = isNaN(height) && width > 0 ? (width*base_image.naturalHeight)/base_image.naturalWidth : height;
ronin.surface.context().drawImage(base_image, position.x, position.y, width, height);
ronin.frame.context().drawImage(base_image, position.x, position.y, width, height);
}
}
@ -52,7 +52,7 @@ function Source(rune)
w.document.write("<title>Untitled</title><body>"+ronin.path.create_svg()+"</body>");
}
else if(params.setting("format") && params.setting("format").value == "jpg"){
w.document.write("<title>Untitled</title><body><img src='"+this.merge().element.toDataURL('image/jpeg')+"' width='"+ronin.surface.settings["size"].width+"px' height='"+ronin.surface.settings["size"].height+"px'/></body>");
w.document.write("<title>Untitled</title><body><img src='"+this.merge().element.toDataURL('image/jpeg')+"' width='"+ronin.frame.settings["size"].width+"px' height='"+ronin.frame.settings["size"].height+"px'/></body>");
}
else if(params.setting("format") && params.setting("format").value == "rin"){
var w = window.open('about:blank','source');
@ -62,7 +62,7 @@ function Source(rune)
}
else{
console.log("!!")
w.document.write("<title>Untitled</title><body><img src='"+this.merge().element.toDataURL('image/png')+"' width='"+ronin.surface.settings["size"].width+"px' height='"+ronin.surface.settings["size"].height+"px'/></body>");
w.document.write("<title>Untitled</title><body><img src='"+this.merge().element.toDataURL('image/png')+"' width='"+ronin.frame.settings["size"].width+"px' height='"+ronin.frame.settings["size"].height+"px'/></body>");
}
this.layer.remove(this);
@ -71,12 +71,12 @@ function Source(rune)
this.merge = function()
{
var a = [];
for(layer_name in ronin.surface.layers){
if(ronin.surface.layers[layer_name].manager){ continue; }
a.push(ronin.surface.layers[layer_name]);
for(layer_name in ronin.frame.layers){
if(ronin.frame.layers[layer_name].manager){ continue; }
a.push(ronin.frame.layers[layer_name]);
}
for (i = 0; i < a.length; i++) {
this.layer.context().drawImage(a[i].context().canvas,0,0,ronin.surface.settings["size"].width,ronin.surface.settings["size"].height);
this.layer.context().drawImage(a[i].context().canvas,0,0,ronin.frame.settings["size"].width,ronin.frame.settings["size"].height);
}
return this.layer;
}

9
scripts/modules/type.js
View File

@ -12,15 +12,16 @@ function Type(rune)
this.layer.clear();
var text = "Hello.".replace("_"," ");
var text = params.text() ? params.text() : "Placeholder";
var position = params.position() ? params.position() : new Position(40,80);
var color = params.color() ? params.color() :new Color("#ffffff");
var size = 40;
var font = "Georgia";
this.layer.context().font = size+"px "+font;
this.layer.context().fillStyle = color.hex;
this.layer.context().fillText(text,position.x,position.y);
var target_layer = preview ? this.layer : ronin.frame.active_layer;
target_layer.context().font = size+"px "+font;
target_layer.context().fillStyle = color.hex;
target_layer.context().fillText(text,position.x,position.y);
}
// Mouse