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

Added layer module options

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-03-28 00:18:04 -07:00
parent 86310ae73f
commit a8a23736bf
8 changed files with 129 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -21,7 +21,7 @@
<script type="text/javascript" src="scripts/modules/overlay.js"></script>
<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/file.load.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>

39
scripts/core/ronin.js
View File

@ -4,32 +4,39 @@ function Ronin()
this.element = null;
this.default = new Default("`");
this.surface = new Surface("@");
this.fileload = new FileLoad("/");
this.filesave = new FileSave("$");
this.overlay = new Overlay("|");
this.brush = new Brush("-");
this.eye = new Eye("*");
this.render = new Render("%");
this.path = new Path("+");
this.type = new Type("&");
this.cursor = new Cursor(".");
this.terminal = new Terminal(">");
this.brush = new Brush("-");
// this.fileload = new FileLoad("/");
// this.filesave = new FileSave("$");
this.source = new Source("$");
this.eye = new Eye("*");
this.render = new Render("%");
this.magnet = new Magnet("^");
this.overlay = new Overlay("|");
this.terminal = new Terminal(">");
this.cursor = new Cursor(".");
this.modules[this.surface.constructor.name] = this.surface;
this.modules[this.fileload.constructor.name] = this.fileload;
this.modules[this.filesave.constructor.name] = this.filesave;
this.modules[this.render.constructor.name] = this.render;
this.modules[this.brush.constructor.name] = this.brush;
this.modules[this.eye.constructor.name] = this.eye;
this.modules[this.type.constructor.name] = this.type;
this.modules[this.path.constructor.name] = this.path;
this.modules[this.terminal.constructor.name] = this.terminal;
this.modules[this.overlay.constructor.name] = this.overlay;
this.modules[this.magnet.constructor.name] = this.magnet;
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;
// this.modules[this.magnet.constructor.name] = this.magnet;
this.modules[this.cursor.constructor.name] = this.cursor;
this.modules[this.terminal.constructor.name] = this.terminal;
//

66
scripts/modules/file.load.js
View File

@ -1,66 +0,0 @@
function FileLoad(rune)
{
Module.call(this,rune);
this.parameters = [Filepath,Position,Rect];
this.active = function(cmd)
{
ronin.overlay.clear();
if(!cmd.filepath() && !cmd.value()){ ronin.terminal.log(new Log(this,"Missing image path.","error")); return; }
var position = cmd.position() ? cmd.position() : new Position();
base_image = new Image();
base_image.src = cmd.filepath().path;
base_image.src += '?'+new Date().getTime();
base_image.crossOrigin = "Anonymous";
base_image.onload = function(){
var width = base_image.naturalWidth;
var height = base_image.naturalHeight;
if(cmd.rect()){
width = cmd.rect().width;
height = cmd.rect().height;
position.normalize(cmd.rect());
}
// Scale with only 1 unit
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);
}
}
this.passive = function(cmd)
{
ronin.overlay.draw(cmd.position(),cmd.rect());
}
this.mouse_mode = function()
{
return "Place";
}
this.mouse_down = function(position)
{
ronin.overlay.draw(position);
ronin.terminal.input_element.value = "/ "+position.render();
ronin.terminal.update_hint();
}
this.mouse_move = function(position,rect)
{
ronin.overlay.draw(this.mouse_from,rect);
ronin.terminal.input_element.value = "/ "+this.mouse_from.render()+" "+rect.render();
ronin.terminal.update_hint();
}
this.mouse_up = function(position,rect)
{
ronin.overlay.draw(this.mouse_from,rect);
ronin.terminal.input_element.value = "/ "+this.mouse_from.render()+" "+rect.render();
ronin.terminal.update_hint();
}
}

50
scripts/modules/file.save.js
View File

@ -1,50 +0,0 @@
function FileSave(rune)
{
Module.call(this,rune);
this.parameters = [];
this.variables = {"format" : "[png/jpg/svg/rin]"};
this.docs = "Creates a new window with a image of the resulting canvas in the specified format.";
this.active = function(cmd)
{
if(!this.layer){ this.create_layer(); }
var d = null;
var w = window.open('about:blank','image from canvas');
if(cmd.setting("format") && cmd.setting("format").value == "svg"){
w.document.write("<title>Untitled</title><body>"+ronin.path.create_svg()+"</body>");
}
else if(cmd.setting("format") && cmd.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>");
}
else if(cmd.setting("format") && cmd.setting("format").value == "rin"){
var w = window.open('about:blank','source');
var html = "";
for (i = 0; i < ronin.terminal.history.length; i++) { html += ronin.terminal.history[i]+";<br />"; }
w.document.write("<title>Source</title><pre>"+html+"</pre>");
}
else{
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>");
}
this.layer.remove(this);
}
this.merge = function()
{
var a = [];
Object.keys(ronin.surface.layers).forEach(function (key) {
if(!ronin.surface.layers[key].manager){
a.push(ronin.surface.layers[key]);
}
});
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);
}
return this.layer;
}
}

83
scripts/modules/source.js Normal file
View File

@ -0,0 +1,83 @@
function Source(rune)
{
Module.call(this,rune);
this.parameters = [Filepath,Position,Rect];
this.add_method(new Method("save",["name"],"Add point"));
this.add_method(new Method("load",["path","position","rect"]),"Add point");
this.load = function(params,preview = false) // source.load ../assets/todo.jpg 200x200 40,40
{
if(!params.filepath() || !params.rect() || !params.position()){ ronin.terminal.log(new Log(this,"Missing image path.","error")); return; }
console.log("OK");
ronin.overlay.get_layer(true).clear();
ronin.overlay.draw_rect(params.position(),params.rect());
var position = params.position() ? params.position() : new Position();
base_image = new Image();
base_image.src = params.filepath().path;
base_image.src += '?'+new Date().getTime();
base_image.crossOrigin = "Anonymous";
base_image.onload = function(){
var width = base_image.naturalWidth;
var height = base_image.naturalHeight;
if(params.rect()){
width = params.rect().width;
height = params.rect().height;
position.normalize(params.rect());
}
// Scale with only 1 unit
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);
}
}
this.save = function(params,preview = false)
{
if(preview){ return; }
if(!this.layer){ this.create_layer(); }
var d = null;
var w = window.open('about:blank','image from canvas');
if(params.setting("format") && params.setting("format").value == "svg"){
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>");
}
else if(params.setting("format") && params.setting("format").value == "rin"){
var w = window.open('about:blank','source');
var html = "";
for (i = 0; i < ronin.terminal.history.length; i++) { html += ronin.terminal.history[i]+";<br />"; }
w.document.write("<title>Source</title><pre>"+html+"</pre>");
}
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>");
}
this.layer.remove(this);
}
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 (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);
}
return this.layer;
}
}

2
scripts/modules/surface.js
View File

@ -60,6 +60,8 @@ function Surface(rune)
this.add_layer(new Layer(layer_name));
}
this.select_layer(this.layers[layer_name]);
ronin.modules["layer"] = this.layers[layer_name];
ronin.layer = this.layers[layer_name];
}
// Misc

28
scripts/modules/surface.layer.js
View File

@ -2,6 +2,8 @@ function Layer(name,manager = null)
{
Module.call(this,"#");
this.add_method(new Method("fill",["color","position","rect"],"Add position"));
this.name = name;
this.rune = "#";
this.manager = manager;
@ -9,6 +11,21 @@ function Layer(name,manager = null)
this.element.setAttribute("id","_"+name);
this.element.setAttribute("class","layer");
this.fill = function(params,preview = false)
{
if(preview){ return; }
if(!params.color()){ return; }
this.context().beginPath();
this.context().rect(0, 0, this.element.width, this.element.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());
}
this.resize = function(rect)
{
ronin.terminal.log(new Log(this,"Resize "+this.name+" to "+rect.render()));
@ -23,17 +40,6 @@ function Layer(name,manager = null)
this.context().scale(2,2);
}
this.fill = function(color)
{
this.context().beginPath();
this.context().rect(0, 0, this.active_layer.element.width, this.active_layer.element.height);
this.context().fillStyle = cmd.color().hex;
this.context().fill();
ronin.terminal.log(new Log(this,"Filled layer: "+cmd.color().hex));
this.element.style.border = "1px solid "+cmd.color().hex;
this.element.setAttribute("class",cmd.color().style());
}
this.clear = function()
{
this.context().clearRect(0, 0, this.element.width, this.element.height);

8
scripts/modules/type.js
View File

@ -10,13 +10,11 @@ function Type(rune)
{
if(!this.layer){ this.create_layer(); this.layer.is_blinking = true; }
var command = new Command(params);
this.layer.clear();
var text = "Hello there.".replace("_"," ");
var position = command.position() ? command.position() : new Position(40,80);
var color = new Color("#ffffff");
var text = "Hello.".replace("_"," ");
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";