Starting from a better base.

This commit is contained in:
Devine Lu Linvega
2017-09-25 15:42:10 +13:00
parent 67553ec9f5
commit 54c241cfda
77 changed files with 204 additions and 98 deletions

View File

@@ -0,0 +1,138 @@
function Brush(rune)
{
Module.call(this,rune);
this.pointers = [new Pointer(new Position("0,0"))];
this.add_mode(new Mode("paint"));
this.add_mode(new Mode("erase","shift"));
this.add_setting(new Setting("color","#000000"));
this.add_setting(new Setting("size","2"));
this.add_method(new Method("add",["Position","Color","Scale","Angle"],["mirror_x","mirror_y"]));
this.add_method(new Method("clear"));
this.add = function(cmd, preview = false)
{
if(cmd.option("mirror_x")){
var mirror_x = parseFloat(cmd.option("mirror_x").value);
ronin.overlay.draw(new Position(mirror_x+",0"))
}
if(cmd.option("mirror_y")){
var mirror_y = parseFloat(cmd.option("mirror_y").value);
ronin.overlay.draw(new Position("0,"+mirror_y))
}
if(preview){
return;
}
var pointer = new Pointer();
pointer.offset = cmd.position() ? cmd.position() : new Position("0,0");
pointer.color = cmd.color() ? cmd.color().hex : this.settings["color"].value;
pointer.scale = cmd.value() ? cmd.value().float : 1;
pointer.angle = cmd.angle() ? cmd.angle().degrees : 0;
if(mirror_x){ pointer.mirror_x = mirror_x; }
if(mirror_y){ pointer.mirror_y = mirror_y; }
this.pointers.push(pointer);
ronin.terminal.log(new Log(this,"Added pointer at: "+pointer.offset.toString()));
return 1, "ok";
}
this.remove = function()
{
this.pointers = [];
return 1,"Removed all pointers.";
}
this.size_up = function()
{
var new_size = this.settings["size"].to_f() + 1;
this.settings["size"].update(new_size);
}
this.size_down = function()
{
var new_size = this.settings["size"].to_f() - 1;
this.settings["size"].update(new_size < 1 ? 1 : new_size);
}
// Eraser
this.erase = function()
{
if(!this.position_prev){this.position_prev = ronin.cursor.position; }
var position = ronin.cursor.position;
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.to_f() * 3;
ronin.frame.context().strokeStyle = new Color("#ff0000").rgba();
ronin.frame.context().stroke();
ronin.frame.context().closePath();
this.position_prev = position;
}
// Mouse
this.mouse_pointer = function(position)
{
if(this.pointers.length < 1){ ronin.cursor.draw_pointer_no_pointer(position); return; }
return keyboard.shift_held == true ? ronin.cursor.draw_pointer_circle_eraser(position,this.settings["size"].to_f() * 3) : ronin.cursor.draw_pointer_brush(position,this.settings["size"].to_f());
}
this.mouse_mode = function()
{
if(keyboard.shift_held == true){
return "Erase "+this.settings["size"].to_f();
}
else{
return "Paint <i style='color:"+this.settings["color"].value+"'>&#9679;</i> "+this.settings["size"].to_f();
}
}
this.mouse_down = function(position)
{
if(position.is_outside()){ return; }
if(keyboard.shift_held == true){
this.erase();
}
else{
if(ronin.brush.pointers.length < 1){ ronin.terminal.log(new Log(this,"Brush has no pointers!"))}
for (i = 0; i < ronin.brush.pointers.length; i++) {
ronin.brush.pointers[i].start();
}
}
}
this.mouse_move = function(position,rect)
{
if(!this.mouse_held){ return; }
if(keyboard.shift_held == true){
this.erase();
}
else{
for (i = 0; i < ronin.brush.pointers.length; i++) {
ronin.brush.pointers[i].draw();
}
}
}
this.mouse_up = function(position,rect)
{
for (i = 0; i < ronin.brush.pointers.length; i++) {
ronin.brush.pointers[i].stop();
}
this.position_prev = null;
}
}

View File

@@ -0,0 +1,146 @@
function Pointer(offset = new Position(), color = null, scale = 1, angle = 1)
{
this.offset = offset;
this.color = color;
this.scale = scale;
this.angle = null;
this.mirror_x = null;
this.mirror_y = null;
this.position_prev = null;
this.distance = 0;
// Parameters
this.actual_thickness = 0;
this.thickness = function()
{
var radius = ronin.brush.settings["size"].to_f() * this.scale;
var ratio = 1 - this.position().distance_to((this.position_prev ? this.position_prev[0] : 1)) / 10;
var target = radius * ratio;
var rate = ronin.brush.settings["size"].to_f()/8;
if(this.actual_thickness < target){ this.actual_thickness += rate; }
if(this.actual_thickness > target){ this.actual_thickness -= rate; }
return this.actual_thickness;
}
//
this.draw = function()
{
if(!this.position_prev){this.position_prev = [this.position()]; return; }
var position = this.position();
var position_prev = this.position_prev[0];
//remove stale previous positions
if (this.position_prev.length > 3) this.position_prev.pop();
this.distance += position.distance_to(position_prev);
ronin.frame.context().beginPath();
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) > 5){
var d = position.distance_to(position_prev)/position_prev.distance_to(this.position_prev[1]);
//caluclate a control point for the quad curve
var ppx = position_prev.x - (this.position_prev[1].x - position_prev.x);
var ppy = position_prev.y - (this.position_prev[1].y - position_prev.y);
var px = (position.x + position_prev.x)/2;
var py = (position.y + position_prev.y)/2;
var tx = px + (ppx - px) * 0.2 * d;
var ty = py + (ppy - py) * 0.2 * d;
ronin.frame.context().quadraticCurveTo(tx,ty,position.x,position.y);
}
else {
ronin.frame.context().lineTo(position.x,position.y);
}
ronin.frame.context().lineCap="round";
ronin.frame.context().lineWidth = this.thickness();
ronin.frame.context().strokeStyle = this.color ? this.color : ronin.brush.settings["color"].value;
ronin.frame.context().stroke();
ronin.frame.context().closePath();
this.position_prev.unshift(position);
}
this.position = function()
{
if(this.mirror_x && this.mirror_x > 0){
return this.position_mirror_x();
}
if(this.mirror_y && this.mirror_y > 0){
return this.position_mirror_y();
}
if(this.angle && this.offset){
return this.position_rotation();
}
else if(this.mirror && this.mirror.height > 0){
return this.position_mirror_y();
}
return this.position_default();
}
// Effects
this.position_default = function()
{
return ronin.cursor.position.add(this.offset);
}
this.position_mirror_x = function()
{
return new Position((2 * this.mirror_x) - (ronin.cursor.position.x + this.offset.x), 0 + (ronin.cursor.position.y + this.offset.y));
}
this.position_mirror_y = function()
{
return new Position((ronin.cursor.position.x + this.offset.x), (2 * this.mirror_y) - (ronin.cursor.position.y + this.offset.y));
}
this.position_rotation = function()
{
var angle_radian = this.angle * Math.PI / 180;
var deltaX = ronin.cursor.position.x - this.offset.x;
var deltaY = ronin.cursor.position.y - this.offset.y;
var t = Math.atan2(deltaY, deltaX) + angle_radian;
var radius = ronin.cursor.position.distance_to(this.offset);
var x = Math.cos(t) * radius;
var y = Math.sin(t) * radius;
return new Position(x + this.offset.x,y + this.offset.y);
}
this.start = function()
{
var radius = ronin.brush.settings["size"].to_f() * this.scale;
this.actual_thickness = radius/4;
ronin.frame.context().beginPath();
ronin.frame.context().arc(this.position().x, this.position().y, this.thickness(), 0, 2 * Math.PI, false);
ronin.frame.context().lineWidth = 0;
ronin.frame.context().fillStyle = this.color ? this.color : ronin.brush.settings["color"].value;
ronin.frame.context().fill();
ronin.frame.context().closePath();
}
this.stop = function()
{
this.position_prev = null;
}
this.widget = function()
{
return this.offset.toString();
}
}

View File

@@ -0,0 +1,301 @@
function Cursor(rune)
{
Module.call(this,rune);
this.add_setting(new Setting("color","#000000"));
this.add_setting(new Setting("color_alt","#fffffff"));
this.mode = null;
this.position = new Position();
this.position_in_window = new Position();
document.addEventListener('mousedown', function(e){ ronin.cursor.mouse_down(ronin.position_in_canvas(e),e);}, false);
document.addEventListener('mousemove', function(e){ ronin.cursor.mouse_move(ronin.position_in_canvas(e),e);}, false);
document.addEventListener('mouseup', function(e){ ronin.cursor.mouse_up(ronin.position_in_canvas(e),e);}, false);
this.update = function(event = null)
{
if(ronin.terminal.cmd().module()){
this.set_mode(ronin.terminal.cmd().module());
}
else if(keyboard.shift_held,keyboard.alt_held){
this.set_mode(ronin.frame.active_layer);
}
else if(this.is_inside){
this.set_mode(ronin.default)
}
else{
this.set_mode(ronin.brush);
}
}
this.set_mode = function(mode = ronin.brush)
{
if(!mode){ return; }
if(this.mode == mode){ return; }
this.mode = mode;
document.body.setAttribute("class",this.mode.name);
ronin.widget.update();
}
this.mouse_down = function(position,e)
{
var true_pos = e.clientX;
var better_pos = (e.clientX/parseFloat(window.innerWidth)) * window.innerWidth;
if(this.layer){ this.layer.clear(); }
this.position = ronin.magnet.update_mouse(position);
this.position_in_window = new Position(e.clientX,e.clientY);
if(this.mode.constructor.name != Cursor.name){
this.mode.mouse_from = this.position;
this.mode.mouse_held = true;
if(!position.is_outside()){
this.mode.mouse_down(this.position);
}
else{
ronin.cursor.set_mode(ronin.default);
ronin.default.mouse_down(this.position);
}
}
}
this.mouse_move = function(position,e)
{
if(!this.layer){ this.create_layer(); }
// On/Out
if(position.is_outside()){ this.mouse_outside(); }
else{ this.mouse_inside(); }
this.layer.clear();
// Magnet
this.position = ronin.magnet.update_mouse(position);
this.position_in_window = new Position(e.clientX,e.clientY);
if(this.mode){this.mode.mouse_pointer(this.position);}
else{ this.mouse_pointer(this.position);}
if(this.mode.mouse_from == null){ return; }
var rect = new Rect();
rect.width = this.position.x - this.mode.mouse_from.x;
rect.height = this.position.y - this.mode.mouse_from.y;
if(this.mode.constructor.name != Cursor.name){
this.mode.mouse_move(this.position,rect);
this.mode.mouse_prev = this.position;
}
}
this.mouse_up = function(position,e)
{
this.position = ronin.magnet.update_mouse(position);
this.position_in_window = new Position(e.clientX,e.clientY);
if(this.mode.mouse_from){
var rect = new Rect();
rect.width = this.position.x - this.mode.mouse_from.x;
rect.height = this.position.y - this.mode.mouse_from.y;
}
if(!this.mode){ return; }
if(this.mode.constructor.name != Cursor.name){
if(!position.is_outside()){
this.mode.mouse_up(this.position,rect);
}
this.mode.mouse_held = false;
}
this.mode.mouse_from = null;
}
// over/out
this.is_inside = false;
this.mouse_outside = function()
{
if(this.is_inside){ return; }
this.is_inside = true;
this.update();
}
this.mouse_inside = function()
{
if(!this.is_inside){ return; }
this.is_inside = false;
this.update();
}
this.draw_pointer_arrow = function(position,size = 1)
{
if(!this.layer){ this.create_layer(); }
this.pointer_last = this.pointer_last ? this.pointer_last : position;
this.layer.context().beginPath();
// Background
this.layer.context().moveTo(position.x + 5,position.y);
this.layer.context().lineTo(position.x,position.y);
this.layer.context().lineTo(position.x,position.y + 5);
this.layer.context().lineCap="square";
this.layer.context().lineWidth = 2;
this.layer.context().strokeStyle = "#000000";
this.layer.context().stroke();
this.layer.context().lineCap="round";
this.layer.context().lineWidth = 1;
this.layer.context().strokeStyle = "#ffffff";
this.layer.context().stroke();
this.layer.context().closePath();
this.pointer_last = position;
}
this.draw_pointer_no_pointer = function(position,size = 2)
{
if(!this.layer){ this.create_layer(); }
var radius = 4000;
this.pointer_last = this.pointer_last ? this.pointer_last : position;
this.layer.context().beginPath();
this.layer.context().moveTo(position.x - radius,position.y + radius);
this.layer.context().lineTo(position.x - size,position.y + size);
this.layer.context().moveTo(position.x + radius,position.y + radius);
this.layer.context().lineTo(position.x + size,position.y + size);
this.layer.context().moveTo(position.x - radius,position.y - radius);
this.layer.context().lineTo(position.x - size,position.y - size);
this.layer.context().moveTo(position.x + radius,position.y - radius);
this.layer.context().lineTo(position.x + size,position.y - size);
this.layer.context().lineCap="square";
this.layer.context().lineWidth = 2;
this.layer.context().strokeStyle = "#000000";
this.layer.context().stroke();
this.layer.context().lineCap="round";
this.layer.context().lineWidth = 1;
this.layer.context().strokeStyle = "#ffffff";
this.layer.context().stroke();
this.layer.context().closePath();
this.pointer_last = position;
}
this.draw_pointer_brush = function(position,size = 1)
{
if(!this.layer){ this.create_layer(); }
this.pointer_last = this.pointer_last ? this.pointer_last : position;
this.layer.context().beginPath();
this.layer.context().arc(position.x, position.y, size/2, 0, 2 * Math.PI, false);
this.layer.context().lineWidth = 2;
this.layer.context().strokeStyle = "#000000";
this.layer.context().stroke();
this.layer.context().arc(position.x, position.y, size/2, 0, 2 * Math.PI, false);
this.layer.context().lineWidth = 1;
this.layer.context().strokeStyle = ronin.brush.settings["color"].value != "#000000" ? ronin.brush.settings["color"].value : "#ffffff";
this.layer.context().stroke();
this.layer.context().closePath();
this.pointer_last = position;
}
this.draw_pointer_circle_eraser = function(position,size = 1)
{
if(!this.layer){ this.create_layer(); }
this.pointer_last = this.pointer_last ? this.pointer_last : position;
this.layer.context().beginPath();
this.layer.context().arc(position.x, position.y, (size/2), 0, 2 * Math.PI, false);
this.layer.context().lineCap="square";
this.layer.context().lineWidth = 2;
this.layer.context().strokeStyle = "#000000";
this.layer.context().stroke();
this.layer.context().lineCap="round";
this.layer.context().lineWidth = 1;
this.layer.context().strokeStyle = "#ffffff";
this.layer.context().stroke();
this.layer.context().closePath();
this.pointer_last = position;
}
this.draw_pointer_drag = function(position)
{
if(!this.layer){ this.create_layer(); }
this.pointer_last = this.pointer_last ? this.pointer_last : position;
this.layer.context().beginPath();
var radius = 5;
this.layer.context().moveTo(position.x,position.y - radius);
this.layer.context().lineTo(position.x,position.y + radius);
this.layer.context().moveTo(position.x - radius/2,position.y - radius);
this.layer.context().lineTo(position.x - radius/2,position.y + radius);
this.layer.context().moveTo(position.x + radius/2,position.y - radius);
this.layer.context().lineTo(position.x + radius/2,position.y + radius);
this.layer.context().moveTo(position.x + radius,position.y - radius);
this.layer.context().lineTo(position.x + radius,position.y + radius);
this.layer.context().moveTo(position.x - radius,position.y - radius);
this.layer.context().lineTo(position.x - radius,position.y + radius);
this.layer.context().lineCap="square";
this.layer.context().lineWidth = 2;
this.layer.context().strokeStyle = "#000000";
this.layer.context().stroke();
this.layer.context().lineCap="round";
this.layer.context().lineWidth = 1;
this.layer.context().strokeStyle = "#ffffff";
this.layer.context().stroke();
this.layer.context().closePath();
this.pointer_last = position;
}
this.release = function()
{
this.mode.mouse_held = false;
this.mode.mouse_from = null;
this.mode = ronin.brush;
ronin.terminal.input.focus();
}
this.widget = function()
{
return "<span class='mouse'>"+this.mode.name+"."+this.mode.mouse_mode()+"</span>";
}
this.key_escape = function()
{
if(this.layer){ this.layer.remove(this); }
}
}

View File

@@ -0,0 +1,42 @@
function Default(rune)
{
Module.call(this,rune);
// Cursor
this.mouse_mode = function()
{
return "Drag";
}
this.mouse_pointer = function(position)
{
return ronin.cursor.draw_pointer_drag(position);
}
this.drag_from = null;
this.mouse_down = function(position)
{
this.drag_from = ronin.cursor.position_in_window;
}
this.mouse_move = function(position)
{
if(this.drag_from === null){ return; }
var offset = ronin.cursor.position_in_window.offset(this.drag_from);
ronin.frame.element.style.left = parseInt(ronin.frame.element.style.left) + offset.x;
ronin.frame.element.style.top = parseInt(ronin.frame.element.style.top) + offset.y;
ronin.on_drag();
this.drag_from = ronin.cursor.position_in_window;
}
this.mouse_up = function(event)
{
this.drag_from = null;
}
}

View File

@@ -0,0 +1,32 @@
function Eye(rune)
{
Module.call(this,rune);
this.add_mode(new Mode("picker"));
// TODO: If a rect is given, return the average color
this.color_picker = function(position,rect = null)
{
var pixel = ronin.frame.context().getImageData(position.x*2, position.y*2, 1, 1).data;
var hex = new Color().rgb_to_hex({r:pixel[0],g:pixel[1],b:pixel[2]});
ronin.terminal.log(new Log(this,"Pixel on "+ronin.frame.active_layer.name+" layer at "+position.toString()+" is "+hex));
ronin.terminal.input.focus();
}
// Mouse
this.mouse_down = function(position)
{
this.color_picker(position);
}
this.mouse_move = function(position,rect)
{
this.color_picker(position);
}
this.mouse_up = function(position,rect)
{
this.color_picker(position);
}
}

View File

@@ -0,0 +1,205 @@
function Frame(rune)
{
Module.call(this,rune);
this.element = null;
this.size = new Rect("200x200");
this.layers = {};
this.active_layer = null;
this.render_layer = null;
this.add_method(new Method("resize",[new Position().name,new Rect().name]));
this.add_method(new Method("select",["text"]));
this.add_mode(new Mode("resize"));
this.install = function()
{
this.select(new Command("frame.select background"));
// Canvas
var starting_canvas = new Rect();
starting_canvas.width = window.innerWidth - 100;
starting_canvas.height = window.innerHeight - 100;
// Clamp
starting_canvas.width = parseInt(starting_canvas.width/40) * 40 - 40;
starting_canvas.height = parseInt(starting_canvas.height/40) * 40 - 40;
this.resize(new Command(starting_canvas.width+"x"+starting_canvas.height));
}
// Methods
this.resize = function(cmd, preview = false)
{
var rect = cmd.rect();
var position = cmd.position() ? cmd.position() : new Position(0,0);
if(preview){ ronin.overlay.draw(position,rect); return; }
for(layer_name in ronin.frame.layers){
ronin.frame.layers[layer_name].resize(rect);
}
ronin.frame.element.width = rect.width * 2;
ronin.frame.element.height = rect.height * 2;
ronin.frame.element.style.width = rect.width+"px";
ronin.frame.element.style.height = rect.height+"px";
ronin.frame.element.style.left = (window.innerWidth - rect.width)/2;
ronin.frame.element.style.top = (window.innerHeight - rect.height)/2;
ronin.on_resize();
this.size = rect;
return 1, "Resized to "+this.size.toString();
}
this.select = function(cmd, preview = false)
{
if(preview){ return; }
var layer_name = cmd.values();
if(!ronin.frame.layers[layer_name]){
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];
return 1, "Selected "+this.active_layer.name;
}
this.context = function()
{
return this.active_layer.context();
}
// Misc
this.blink = function()
{
Object.keys(ronin.frame.layers).forEach(function (key) {
ronin.frame.layers[key].blink();
});
setTimeout(function(){ ronin.frame.blink(); }, 30);
}
this.center = function()
{
ronin.frame.element.style.left = (window.innerWidth/2) - (ronin.frame.element.width/4);
ronin.frame.element.style.top = (window.innerHeight/2) - (ronin.frame.element.height/4) - 30;
}
this.select_layer = function(layer)
{
if(!layer || layer.manager){ return; }
this.active_layer = layer;
}
this.add_layer = function(layer)
{
if(this.active_layer){layer.set_depth(this.active_layer.depth+1);}
layer.resize(this.size);
this.layers[layer.name] = layer;
this.element.appendChild(layer.element);
}
// Commands
this.layer_above = function()
{
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){ return ronin.frame.layers[keys[loc+1]]; }
}
this.layer_below = function()
{
var keys = Object.keys(ronin.frame.layers);
var loc = keys.indexOf(this.active_layer.name);
if(keys[loc-1] != null){ return ronin.frame.layers[keys[loc-1]]; }
}
// Cursor
this.mouse_mode = function()
{
return "crop";
}
this.mouse_down = function(position)
{
ronin.overlay.draw(position);
}
this.mouse_move = function(position,rect)
{
ronin.overlay.draw(this.mouse_from,rect);
}
this.mouse_up = function(position,rect)
{
ronin.overlay.draw(this.mouse_from,rect)+" "+rect.toString();
var line = "frame.resize "+this.mouse_from.toString()+" "+rect.toString();
ronin.terminal.update(line);
}
this.widget = function()
{
var html = ""
html += this.size.toString()+" ";
html += this.active_layer.name+" ";
var user_layers = 0;
var managed_layers = 0;
count = 0;
for(id in this.layers){
if(this.layers[id].manager){
managed_layers += 1;
}
else{
user_layers += 1;
}
count += 1;
}
html += user_layers+"&"+managed_layers+" ";
html += this.widget_map()+" "
return html
}
this.widget_map = function()
{
html = ""
var keys = Object.keys(ronin.frame.layers);
var loc = keys.indexOf(this.active_layer.name);
i = 0;
while(i < keys.length){
if(i == loc){
html += "<span style='color:white'>|</span>";
}
else if(this.layers[keys[i]].manager){
html += "<span style='color:red'>|</span>";
}
else{
html += "|";
}
i += 1;
}
return html;
}
}

View File

@@ -0,0 +1,187 @@
function Layer(name,manager = null)
{
Module.call(this,"#");
this.add_method(new Method("translate",["position"]));
this.add_method(new Method("rotate",["position","angle"]));
this.add_method(new Method("scale",["float"]));
this.add_method(new Method("clear",[]));
this.add_method(new Method("rotate",["position","angle"]));
this.add_method(new Method("mirror",["position"]));
this.add_method(new Method("fill",["color","position","rect"]));
this.add_method(new Method("rename",["text"]));
this.name = name;
this.rune = "#";
this.manager = manager;
this.element = document.createElement("canvas");
this.element.setAttribute("id","_"+name);
this.element.setAttribute("class","layer");
this.depth = 0;
this.scale = function(cmd,preview = false)
{
if(preview){ return; }
var ratio = parseFloat(cmd.values());
var data = ronin.frame.context().canvas;
ronin.render.get_layer().clear();
ronin.render.context().drawImage(ronin.frame.context().canvas,0,0,w,h);
ronin.frame.context().drawImage(ronin.render.context().canvas, -position.x, -position.y,w,h)
ronin.frame.context().drawImage(data,0,0,ronin.frame.size.width * ratio,ronin.frame.size.height * ratio);
}
this.rotate = function(params, preview = false)
{
if(preview){ ronin.overlay.draw_pointer(params.position()); return; }
if(!params.position()){ return; }
var position = params.position();
var angle = params.angle().degrees;
var w = ronin.frame.size.width;
var h = ronin.frame.size.height;
ronin.render.get_layer().clear();
ronin.render.context().drawImage(ronin.frame.context().canvas,0,0,w,h);
ronin.frame.active_layer.clear();
ronin.frame.context().save();
ronin.frame.context().translate(position.x,position.y);
ronin.frame.context().rotate(angle*Math.PI/180);
ronin.frame.context().drawImage(ronin.render.context().canvas, -position.x, -position.y,w,h)
ronin.frame.context().rotate(-angle*Math.PI/180);
ronin.frame.context().restore();
ronin.render.get_layer().clear();
return 1, "ok";
}
this.translate = function(params,preview = false)
{
if(preview){ return; }
if(!params.position()){ return; }
var data = this.data();
this.clear();
this.context().putImageData(data, params.position().x * 2, params.position().y * 2);
ronin.overlay.get_layer(true).clear();
return 1, "ok";
}
this.fill = function(params,preview = false)
{
if(!params.color()){ return 0, "Color?"; }
if(preview){ return 0, "No Preview"; }
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(position.x, position.y, rect.width, rect.height);
this.context().fillStyle = params.color().hex;
this.context().fill();
return 1, "ok";
}
this.clear = function(params, preview = false)
{
if(preview){ return; }
this.context().clearRect(0, 0, this.element.width, this.element.height);
}
this.resize = function(rect)
{
var pixels_rect = new Rect(this.element.width+"x"+this.element.height);
this.element.width = rect.width * 2;
this.element.height = rect.height * 2;
this.element.style.width = rect.width+"px";
this.element.style.height = rect.height+"px";
this.context().scale(2,2);
}
this.remove = function(manager)
{
manager.layer = null;
ronin.frame.layers[this.name].element.outerHTML = "";
delete ronin.frame.layers[this.name];
}
this.context = function()
{
return this.element.getContext('2d');
}
this.set_depth = function(depth)
{
this.depth = depth;
this.element.setAttribute("z-index",depth);
}
this.image = function()
{
return this.element.toDataURL('image/png');
}
this.data = function()
{
return this.context().getImageData(0, 0, ronin.frame.size.width * 2, ronin.frame.size.height * 2);
}
//
this.mouse_pointer = function(position)
{
return ronin.cursor.draw_pointer_arrow(position);
}
this.mouse_mode = function()
{
return "Move";
}
this.drag_from = null;
this.mouse_down = function(position)
{
this.drag_from = ronin.cursor.position_in_window;
}
this.mouse_move = function(position)
{
if(this.drag_from === null){ return; }
var offset = ronin.cursor.position_in_window.offset(this.drag_from);
var data = this.data();
this.clear();
this.context().putImageData(data, offset.x * 2, offset.y * 2);
this.drag_from = ronin.cursor.position_in_window;
}
this.mouse_up = function(position)
{
this.drag_from = null;
}
// Blink
this.is_blinking = false;
this.blink = function()
{
this.element.setAttribute("class","layer blink")
}
}

View File

@@ -0,0 +1,99 @@
function Magnet(rune)
{
Module.call(this,rune);
this.size = new Rect("1x1");
this.rate = new Position("4,4");
this.add_setting(new Setting("color","#000000"));
this.add_method(new Method("grid",["rect","position"]));
this.add_method(new Method("clear",[]));
this.grid = function(cmd,preview = false)
{
if(!cmd.rect()){ return 0, "Rect?"; }
if(!this.layer){ this.create_layer(); }
this.layer.clear();
this.draw_grid(cmd.rect(),cmd.position());
if(preview == false){
if(cmd.rect()){ this.size = cmd.rect(); }
if(cmd.position()){ this.rate = cmd.position(); }
}
return 1, preview ? "preview" : "ok";
}
this.clear = function(cmd,preview = false)
{
this.layer.clear();
this.size = new Rect("1x1");
this.rate = this.rate;
}
this.draw_grid = function(rect,position)
{
if(!rect){ rect = new Rect("20x20"); }
if(!position){ position = new Position("4,4"); }
this.size = rect;
this.rate = position;
if(rect.width < 5 || rect.height < 5){ return; }
var horizontal = ronin.frame.size.width/rect.width;
var vertical = ronin.frame.size.height/rect.height;
for (var x = 1; x < horizontal; x++) {
for (var y = 1; y < vertical; y++) {
var dot_position = new Position(x * rect.width, y * rect.height);
var size = 0.5;
if(this.rate && x % this.rate.x == 0 && y % this.rate.y == 0){ size = 1; }
this.draw_marker(dot_position,size);
}
}
}
this.draw_marker = function(position,size = 0.5)
{
this.context().beginPath();
this.context().arc(position.x, position.y, size, 0, 2 * Math.PI, false);
this.context().fillStyle = this.settings["color"].value;
this.context().fill();
this.context().closePath();
}
this.magnetic_position = function(position)
{
var x = parseInt(position.x / this.size.width) * this.size.width;
var y = parseInt(position.y / this.size.width) * this.size.width;
return new Position(x,y);
}
this.update_mouse = function(position)
{
if(this.size.width > 4 || this.size.height > 4){
if(!this.layer){ this.create_layer(); }
this.layer.clear();
this.draw_grid(this.size,this.rate);
}
return this.magnetic_position(position);
}
this.widget = function()
{
if(this.size.width < 2 || this.size.height < 2){ return ""; }
return this.size.value;
}
this.key_escape = function()
{
if(this.layer){ this.layer.remove(this); }
}
}

View File

@@ -0,0 +1,167 @@
function Module(rune)
{
this.name = this.constructor.name.toLowerCase();
this.rune = rune;
this.element = null;
this.settings = {};
this.methods = {};
this.modes = {};
this.layer = null;
this.is_locked = false;
this.docs = "Missing documentation.";
this.add_method = function(method)
{
method.host = this;
this.methods[method.name] = method;
}
this.add_setting = function(setting)
{
setting.host = this;
this.settings[setting.name] = setting;
}
this.add_mode = function(mode)
{
mode.host = this;
this.modes[mode.name] = mode;
}
this.install = function()
{
}
this.context = function()
{
return this.get_layer().context();
}
this.create_layer = function(blink = false)
{
this.layer = new Layer(this.constructor.name+".Preview",this);
this.layer.element.setAttribute("style","z-index:7000");
if(blink){ this.layer.blink(); }
ronin.frame.add_layer(this.layer);
}
this.get_layer = function(is_blinking = false)
{
if(!this.layer){ this.create_layer(); this.layer.is_blinking = is_blinking }
return this.layer;
}
this.hint = function(method)
{
var html = "";
if(method){
html += method;
}
else{
for(id in this.methods){
html += this.methods[id]+" ";
}
for(id in this.settings){
html += this.settings[id]+" ";
}
for(mode in this.modes){
html += this.modes[mode]+" ";
}
}
return html;
}
this.pad = function(input)
{
var s = "";
for (i = 0; i < input.length+1; i++){
s += "_";
}
return "<span style='color:#000'>"+s+"</span>";
}
this.widget = function()
{
return "";
}
this.lock = function()
{
ronin.terminal.is_locked = true;
}
this.unlock = function()
{
ronin.terminal.is_locked = false;
}
// Mouse
this.mouse_mode = function()
{
for(mode_id in this.modes){
if(!keyboard.shift_held && !keyboard.alt_held && !this.modes[mode_id].key){
return this.modes[mode_id].name;
}
}
return null;
}
this.mouse_pointer = function(position)
{
return ronin.cursor.draw_pointer_arrow(position);
}
this.mouse_from = null;
this.mouse_held = null;
this.mouse_prev = null;
this.mouse_down = function(position)
{
}
this.mouse_move = function(position,rect)
{
}
this.mouse_up = function(position,rect)
{
}
// Keyboard
this.key_escape = function()
{
}
this.key_delete = function()
{
}
this.key_arrow_up = function()
{
ronin.frame.layer_up();
}
this.key_arrow_down = function()
{
ronin.frame.layer_down();
}
this.key_arrow_left = function()
{
}
this.key_arrow_right = function()
{
}
this.toString = function()
{
return "<span class='module'>"+this.name+"</span>";
}
}

View File

@@ -0,0 +1,221 @@
function Overlay(rune)
{
Module.call(this,rune);
this.color = new Color("#ffffff");
// draw
this.draw = function(position,rect)
{
if(!this.layer){ this.create_layer(true); this.layer.is_blinking = true; }
if(!position){ position = new Position("0,0"); }
this.layer.clear();
if(rect){
this.draw_rect(position,rect);
}
else if(position.x !== 0 && position.y !== 0){
this.draw_pointer(position);
}
else if(position.x !== 0 ){
this.draw_vertical_line(position);
}
else if(position.y !== 0 ){
this.draw_horizontal_line(position);
}
}
this.draw_rect = function(position = new Position(0,0),rect)
{
if(!position || !rect){ return; }
this.context().beginPath();
position.normalize(rect);
this.context().moveTo(position.x,position.y);
this.context().lineTo(position.x + rect.width,position.y);
this.context().lineTo(position.x + rect.width,position.y + rect.height);
this.context().lineTo(position.x,position.y + rect.height);
this.context().lineTo(position.x,position.y);
// Limits
this.context().moveTo(position.x + (rect.width/2),position.y-2);
this.context().lineTo(position.x + (rect.width/2),position.y+2);
this.context().moveTo(position.x + (rect.width/2),position.y + rect.height-2);
this.context().lineTo(position.x + (rect.width/2),position.y + rect.height+2);
this.context().moveTo(position.x + rect.width-2,position.y + (rect.height/2));
this.context().lineTo(position.x + rect.width+2,position.y + (rect.height/2));
this.context().moveTo(position.x+2,position.y + (rect.height/2));
this.context().lineTo(position.x-2,position.y + (rect.height/2));
// Center
var radius = 3;
var radius_2 = 4;
this.context().moveTo(position.x + (rect.width/2) + radius,position.y + (rect.height/2));
this.context().lineTo(position.x + (rect.width/2) + radius_2,position.y + (rect.height/2));
this.context().moveTo(position.x + (rect.width/2) - radius,position.y + (rect.height/2));
this.context().lineTo(position.x + (rect.width/2) - radius_2,position.y + (rect.height/2));
this.context().moveTo(position.x + (rect.width/2),position.y + (rect.height/2) + radius);
this.context().lineTo(position.x + (rect.width/2),position.y + (rect.height/2) + radius_2);
this.context().moveTo(position.x + (rect.width/2),position.y + (rect.height/2) - radius);
this.context().lineTo(position.x + (rect.width/2),position.y + (rect.height/2) - radius_2);
this.context().lineCap="square";
this.context().lineWidth = 2;
this.context().strokeStyle = "#000000";
this.context().stroke();
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ffffff";
this.context().stroke();
this.context().closePath();
}
this.draw_pointer = function(position)
{
this.context().beginPath();
this.context().moveTo(position.x + 2,position.y);
this.context().lineTo(position.x + 5,position.y);
this.context().moveTo(position.x,position.y + 2);
this.context().lineTo(position.x,position.y + 5);
this.context().moveTo(position.x - 2,position.y);
this.context().lineTo(position.x - 5,position.y);
this.context().moveTo(position.x,position.y - 2);
this.context().lineTo(position.x,position.y - 5);
this.context().lineCap="square";
this.context().lineWidth = 2;
this.context().strokeStyle = "#000000";
this.context().stroke();
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ffffff";
this.context().stroke();
this.context().closePath();
}
this.draw_line = function(position,to)
{
this.context().beginPath();
this.context().moveTo(position.x,position.y);
this.context().lineTo(to.x,to.y);
this.context().lineCap="square";
this.context().lineWidth = 2;
this.context().strokeStyle = "#000000";
this.context().stroke();
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ffffff";
this.context().stroke();
this.context().closePath();
}
this.draw_circle = function(position,radius = 5)
{
this.context().beginPath();
this.context().arc(position.x, position.y, radius, 0, 2 * Math.PI, false);
this.context().lineCap="square";
this.context().lineWidth = 2;
this.context().strokeStyle = "#000000"
this.context().stroke();
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ffffff"
this.context().stroke();
this.context().closePath();
}
this.draw_cross = function(position,radius = 5)
{
this.context().beginPath();
this.context().moveTo(position.x+(radius-2),position.y);
this.context().lineTo(position.x+radius,position.y);
this.context().moveTo(position.x-(radius-2),position.y);
this.context().lineTo(position.x-radius,position.y);
this.context().moveTo(position.x,position.y+(radius-2));
this.context().lineTo(position.x,position.y+radius);
this.context().moveTo(position.x,position.y-(radius-2));
this.context().lineTo(position.x,position.y-radius);
this.context().lineCap="square";
this.context().lineWidth = 2;
this.context().strokeStyle = "#000000"
this.context().stroke();
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ffffff"
this.context().stroke();
this.context().closePath();
}
this.draw_vertical_line = function(position)
{
this.context().beginPath();
this.context().moveTo(position.x,0);
this.context().lineTo(position.x,ronin.frame.size.height);
this.context().lineCap="square";
this.context().lineWidth = 2;
this.context().strokeStyle = "#000000"
this.context().stroke();
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ffffff"
this.context().stroke();
this.context().closePath();
}
this.draw_horizontal_line = function(position)
{
this.context().beginPath();
this.context().moveTo(0,position.y);
this.context().lineTo(ronin.frame.size.width,position.y);
this.context().lineCap="square";
this.context().lineWidth = 2;
this.context().strokeStyle = "#000000"
this.context().stroke();
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ffffff"
this.context().stroke();
this.context().closePath();
}
this.clear = function()
{
this.layer.remove(this);
}
this.key_escape = function()
{
if(this.layer){ this.layer.remove(this); }
}
}

View File

@@ -0,0 +1,149 @@
function Path(rune)
{
Module.call(this,rune);
this.add_mode(new Mode("stroke"));
this.add_mode(new Mode("arc","shift"));
this.add_mode(new Mode("arc_cc","alt"));
this.add_mode(new Mode("stem","shift_alt"));
this.add_setting(new Setting("fill_color","#ff0000"));
this.add_setting(new Setting("line_width","3"));
this.add_setting(new Setting("line_color","#ffffff"));
this.add_setting(new Setting("line_cap","square"));
this.add_method(new Method("stroke",["Positions"]));
this.add_method(new Method("fill",["Positions"]));
this.coordinates = [];
this.last_pos = null;
this.paths = [];
this.stroke = function(cmd,preview = false)
{
if(!ronin.path.layer){ ronin.path.create_layer(); ronin.path.layer.is_blinking = true; }
this.layer.clear();
var context = preview ? this.context() : ronin.frame.context();
context.beginPath();
context.lineCap = this.settings["line_cap"].value;
context.lineWidth = this.settings["line_width"].value;
context.strokeStyle = this.settings["line_color"].value;
context.stroke(new Path2D(cmd.values()));
context.closePath();
if(!preview){ this.coordinates = []; this.last_pos = null; if(!preview){ this.layer.remove(this); } }
return 1, preview ? "preview" : "ok";
}
this.fill = function(cmd,preview = false)
{
if(!ronin.path.layer){ ronin.path.create_layer(); ronin.path.layer.is_blinking = true; }
this.layer.clear();
var context = preview ? this.context() : ronin.frame.context();
context.beginPath();
context.fillStyle = this.settings["fill_color"].value;
context.fill(new Path2D(cmd.values()));
context.closePath();
if(!preview){ this.coordinates = []; this.last_pos = null; }
return 1, preview ? "preview" : "ok";
}
// Tools
this.create_path = function()
{
var command = "";
for (var i = 0; i < this.coordinates.length; i++) {
command += this.coordinates[i]+" ";
}
return command;
}
this.create_svg = function()
{
var s = "";
for (var i = 0; i < this.paths.length; i++) {
s += "<path d='"+this.paths[i]+"' />";
}
return "<svg width='"+ronin.frame.size.width+"' height='"+ronin.frame.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>";
}
// Mouse
this.mouse_mode = function()
{
if(keyboard.shift_held == true && keyboard.alt_held == true){
return "Path(Origin)";
}
else if(keyboard.shift_held == true){
return "Path(Counterclock Arc)";
}
else if(keyboard.alt_held == true){
return "Path(Clockwise Arc)";
}
else{
return "Path(Line)";
}
}
this.mouse_down = function(position)
{
var method = ronin.terminal.cmd().method() ? ronin.terminal.cmd().method().name : "stroke";
var line = "path."+method+" "+this.create_path();
line += "M"+position.toString();
ronin.terminal.update(line);
}
this.mouse_move = function(position)
{
var method = ronin.terminal.cmd().method().name;
var line = "path."+method+" "+this.create_path();
line += "L"+position.toString();
ronin.terminal.update(line);
}
this.mouse_up = function(position)
{
var method = ronin.terminal.cmd().method().name;
if(this.coordinates.length == 0){
this.coordinates.push("M"+position.toString());
}
else{
var offset = this.last_pos ? position.offset(this.last_pos) : position;
if(keyboard.shift_held == true && keyboard.alt_held == true){
this.coordinates.push("M"+position.toString());
}
else if(keyboard.shift_held == true){
this.coordinates.push("a"+offset.toString()+" 0 0,1 "+offset.toString());
}
else if(keyboard.alt_held == true){
this.coordinates.push("a"+offset.toString()+" 0 0,0 "+offset.toString());
}
else{
this.coordinates.push("l"+offset.toString());
}
}
ronin.terminal.update("path."+method+" "+this.create_path());
this.last_pos = position;
}
this.key_escape = function()
{
if(this.layer){ this.layer.remove(this); }
this.coordinates = [];
this.last_pos = null;
}
}

View File

@@ -0,0 +1,37 @@
function Render(rune)
{
Module.call(this,rune);
this.filters = {};
this.add_method(new Method("balance",["color"]));
this.add_method(new Method("stencil",["angle","color"]));
this.add_method(new Method("chromatic",["position","float"]));
this.filters["balance"] = new Filter_Balance();
this.filters["grey"] = new Filter_Grey();
this.filters["stencil"] = new Filter_Stencil();
this.filters["invert"] = new Filter_Invert();
this.filters["chromatic"] = new Filter_Chromatic();
this.filters["sharpen"] = new Filter_Sharpen();
this.filters["saturate"] = new Filter_Saturate();
this.filters["contrast"] = new Filter_Contrast();
this.stencil = function(cmd,preview = false)
{
var f = new Filter_Stencil();
if(preview){ f.preview(cmd); }
else{ f.render(cmd); }
}
this.chromatic = function(cmd,preview = false)
{
var f = new Filter_Chromatic();
if(preview){ f.preview(cmd); }
else{ f.render(cmd); }
return "Done.";
}
}

View File

@@ -0,0 +1,147 @@
function Source(rune)
{
Module.call(this,rune);
this.modal_element = null;
this.add_setting(new Setting("format","png"));
this.add_setting(new Setting("quality","1"));
this.add_method(new Method("save",["name","rect","format"]));
this.add_method(new Method("load",["path","position","rect"]));
this.add_method(new Method("help"));
this.install = function()
{
this.modal_element = document.createElement("modal");
this.modal_element.id = "modal";
this.modal_element.setAttribute("class","hidden");
ronin.element.appendChild(this.modal_element);
}
this.load = function(params,preview = false) // source.load /01.jpg 0,0 100x100
{
if(!params.filepath()){ return 0, "Path?"; }
if(!params.rect()){ return 0,"Rect?"; }
var position = params.position() ? params.position() : new Position("0,0");
var rect = params.rect() ? params.rect() : new Rect("50,50");
ronin.overlay.draw(position,rect);
if(preview){ return; }
if(this.is_locked){ console.log("Locked!"); return 0,"The source module is locked."; }
this.lock();
base_image = new Image();
base_image.src = "../assets/"+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.frame.active_layer.context().drawImage(base_image, position.x, position.y, width, height);
ronin.overlay.clear();
ronin.source.unlock();
}
return 1,"Loaded "+params.filepath().path+" at "+position.toString();
}
this.save = function(params,preview = false)
{
if(preview){ return; }
if(!this.layer){ this.create_layer(); }
var d = null;
this.modal();
if(this.settings["format"].value == "jpg"){
this.modal("image","<img src='"+this.merge().element.toDataURL('image/jpeg',this.settings["quality"].to_f())+"' />");
}
else{
this.modal("image","<img src='"+this.merge().element.toDataURL('image/png')+"'/>");
}
/*
if(params.setting("format") && params.setting("format").value == "svg"){
ronin.terminal.log(new Log(this,ronin.path.create_svg(),"image"));
}
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
*/
this.layer.remove(this);
return 1,"Rendered the "+this.settings.format+" image, "+this.settings.quality+"."
}
this.help = function(params,preview = false)
{
if(preview){ return; }
html = "";
for(module_id in ronin.modules){
html += ronin.modules[module_id]+"\n";
for(mode_id in ronin.modules[module_id].modes){
html += " "+ronin.modules[module_id].modes[mode_id]+"\n";
}
for(setting_id in ronin.modules[module_id].settings){
html += " "+ronin.modules[module_id].settings[setting_id]+"\n";
}
for(method_id in ronin.modules[module_id].methods){
html += " "+ronin.modules[module_id].methods[method_id]+"\n";
}
}
this.modal("text",html);
}
this.modal = function(type,content)
{
this.modal_element.setAttribute("class",type);
this.modal_element.innerHTML = content;
}
this.merge = function()
{
var a = [];
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.frame.size.width,ronin.frame.size.height);
}
return this.layer;
}
this.key_escape = function()
{
if(this.layer){ this.layer.remove(this); }
this.coordinates = [];
this.last_pos = null;
ronin.terminal.input.value = "";
this.modal_element.innerHTML = "";
this.modal_element.setAttribute("class","hidden");
}
}

View File

@@ -0,0 +1,135 @@
function Terminal(rune)
{
Module.call(this);
this.element = document.createElement("div");
this.input = document.createElement("input");
this.hint_element = document.createElement("div");
this.logs_element = document.createElement("div");
this.hint_element.id = "hint";
this.logs_element.id = "logs";
this.logs_element.innerHTML = "<log>Hello there</log>";
this.history = [];
this.locks = [];
this.add_method(new Method("load",["file_name.rin"]));
// Module
this.install = function(cmd)
{
this.element.appendChild(this.input);
this.element.appendChild(this.hint_element);
this.element.appendChild(this.logs_element);
this.input.value = ""
this.hint_element.innerHTML = "";
}
this.run = function(target_cmd)
{
var command = target_cmd ? target_cmd : this.cmd();
var module = command.module();
var method = command.method();
var setting = command.setting();
console.info(command.content); // Don't remove
if(method){
method.run(command);
}
if(setting){
module.settings[setting].update(command.values());
this.log(new Log(module,module.settings[setting]));
}
this.hint_element.innerHTML = "";
this.input.value = "";
this.update();
}
this.update = function(value = null, preview = true)
{
if(value){ this.input.value = value; this.input.focus(); }
var command = this.cmd();
var module = command.module();
var method = command.method();
var autocomplete = this.find_autocomplete(command,module,method);
if(method && preview){
method.preview(command);
}
this.hint_element.innerHTML = "<span class='input'>"+this.input.value+"</span>"+(autocomplete ? '<span class="autocomplete">'+autocomplete+'</span>' : '')+(this.input.value ? " > " : "")+(module ? module.hint(method) : ronin.hint(method));
ronin.cursor.update();
}
this.run_multi = function(lines)
{
lines = lines.split(";");
if(!ronin.terminal.is_locked){
target_line = lines.shift();
this.run(new Command(target_line));
}
if(lines.length > 0){ setTimeout(function(){ ronin.terminal.run_multi(lines.join(";")) }, 50); }
}
this.log = function(log)
{
this.logs_element.innerHTML = "";
this.logs_element.appendChild(log.element);
}
this.cmd = function()
{
return new Command(this.input.value);
}
this.load = function(cmd,preview = false)
{
if(preview){ return; }
ronin.load(cmd.values());
return "Loading "+cmd.values();
}
this.find_autocomplete = function()
{
html = ""
var entry = this.input.value;
var module = this.cmd().module();
var method = entry.indexOf(".") > -1 ? entry.split(".")[1] : null;
if(entry.length == 0){ return null; }
if(module && method){
for(id in module.methods){
if(method == module.methods[id].name){ break; }
if(method == module.methods[id].name.substr(0,method.length)){ return module.methods[id].name.replace(method,""); }
}
}
else{
for(id in ronin.modules){
if(entry == ronin.modules[id].name){ break; }
if(entry == ronin.modules[id].name.substr(0,entry.length)){ return ronin.modules[id].name.replace(entry,""); }
}
}
return null;
}
}
// Log
function Log(host = null,message,error = false)
{
this.host = host;
this.message = message;
this.error = error;
this.element = document.createElement("log");
this.element.setAttribute("class",error ? "error" : "okay");
this.element.innerHTML = "<span class='module'>"+(this.host ? this.host.name : "Ronin")+"</span> "+message;
console.log(this.host ? this.host.name : "Ronin",this.message);
}

View File

@@ -0,0 +1,21 @@
function Widget(rune)
{
Module.call(this,rune);
this.element = document.createElement("div");
this.element.setAttribute("id","widget");
this.install = function()
{
ronin.terminal.element.appendChild(this.element);
}
this.update = function()
{
var html = "";
for (var key in ronin.modules){
html += ronin.modules[key].widget() ? ronin.modules[key].widget()+" " : "";
}
this.element.innerHTML = html;
}
}

View File

@@ -0,0 +1,62 @@
function Type(rune)
{
Module.call(this,rune);
this.add_method(new Method("write",["Position","Text"]));
this.add_mode(new Mode("write"));
this.add_setting(new Setting("color","#000000"));
this.add_setting(new Setting("size","40"));
this.add_setting(new Setting("font","DIN Medium"));
this.write = function(cmd,preview = false)
{
if(!this.layer){ this.create_layer(true); this.layer.is_blinking = true; }
this.layer.clear();
var text = cmd.text() ? cmd.text() : "Text";
var position = cmd.position() ? cmd.position() : new Position(40,80);
var color = this.settings["color"].value;
var size = parseFloat(this.settings["size"].value);
var font = this.settings["font"].value;
var target_layer = preview ? this.layer : ronin.frame.active_layer;
target_layer.context().font = size+"px "+font;
target_layer.context().fillStyle = color;
target_layer.context().fillText(text,position.x,position.y);
if(!preview){ this.layer.remove(this); }
return 1, "Wrote "+text+" at "+position.toString();
}
// Mouse
this.mouse_mode = function()
{
return "Write";
}
this.mouse_down = function(position)
{
var str = ronin.terminal.cmd().text() ? ronin.terminal.cmd().text() : "Text";
var line = "type.write "+position.toString()+" \""+str+"\"";
ronin.terminal.update(line);
}
this.mouse_move = function(position,rect)
{
}
this.mouse_up = function(position)
{
var str = ronin.terminal.cmd().text() ? ronin.terminal.cmd().text() : "Text";
var line = "type.write "+position.toString()+" \""+str+"\"";
ronin.terminal.update(line);
}
this.key_escape = function()
{
if(this.layer){ this.layer.remove(this); }
}
}