Starting from a better base.
This commit is contained in:
138
archives/scripts/modules/brush.js
Normal file
138
archives/scripts/modules/brush.js
Normal 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+"'>●</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;
|
||||
}
|
||||
}
|
146
archives/scripts/modules/brush.pointer.js
Normal file
146
archives/scripts/modules/brush.pointer.js
Normal 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();
|
||||
}
|
||||
}
|
301
archives/scripts/modules/cursor.js
Normal file
301
archives/scripts/modules/cursor.js
Normal 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); }
|
||||
}
|
||||
}
|
42
archives/scripts/modules/default.js
Normal file
42
archives/scripts/modules/default.js
Normal 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;
|
||||
}
|
||||
}
|
32
archives/scripts/modules/eye.js
Normal file
32
archives/scripts/modules/eye.js
Normal 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);
|
||||
}
|
||||
}
|
205
archives/scripts/modules/frame.js
Normal file
205
archives/scripts/modules/frame.js
Normal 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;
|
||||
}
|
||||
}
|
187
archives/scripts/modules/layer.js
Normal file
187
archives/scripts/modules/layer.js
Normal 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")
|
||||
}
|
||||
}
|
99
archives/scripts/modules/magnet.js
Normal file
99
archives/scripts/modules/magnet.js
Normal 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); }
|
||||
}
|
||||
}
|
167
archives/scripts/modules/module.js
Normal file
167
archives/scripts/modules/module.js
Normal 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>";
|
||||
}
|
||||
}
|
221
archives/scripts/modules/overlay.js
Normal file
221
archives/scripts/modules/overlay.js
Normal 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); }
|
||||
}
|
||||
}
|
149
archives/scripts/modules/path.js
Normal file
149
archives/scripts/modules/path.js
Normal 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;
|
||||
}
|
||||
}
|
37
archives/scripts/modules/render.js
Normal file
37
archives/scripts/modules/render.js
Normal 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.";
|
||||
}
|
||||
}
|
147
archives/scripts/modules/source.js
Normal file
147
archives/scripts/modules/source.js
Normal 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");
|
||||
}
|
||||
}
|
135
archives/scripts/modules/terminal.js
Normal file
135
archives/scripts/modules/terminal.js
Normal 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);
|
||||
}
|
21
archives/scripts/modules/terminal.widget.js
Normal file
21
archives/scripts/modules/terminal.widget.js
Normal 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;
|
||||
}
|
||||
}
|
62
archives/scripts/modules/type.js
Normal file
62
archives/scripts/modules/type.js
Normal 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); }
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user