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

Fuck folder structure, all sources are open.

Browse Source
This commit is contained in:
Devine Lu Linvega
2017-01-19 09:27:16 -07:00
parent feebbecf3b
commit 9d6db2a93c
61 changed files with 13 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
sources/scripts/core/command.js
View File

@@ -1,90 +0,0 @@
function Command(content)
{
this.content = content;
// Parser
this.any = function()
{
if(this.content.join() === ""){ return null; }
return new Any(this.content);
}
this.rect = function()
{
for (i = 0; i < this.content.length; i++) {
if(this.content[i].indexOf("x") >= 0 && this.content[i].indexOf("/") < 0){ return new Rect(this.content[i]); }
}
return null;
}
this.position = function()
{
for (i = 0; i < this.content.length; i++) {
if(this.content[i].indexOf(",") >= 0){ return new Position(this.content[i]); }
}
return null;
}
this.color = function()
{
for (i = 0; i < this.content.length; i++) {
if(this.content[i].indexOf("#") >= 0){ return new Color(this.content[i]); }
}
return null;
}
this.filepath = function()
{
for (i = 0; i < this.content.length; i++) {
if(this.content[i].indexOf("/") >= 0){ return new Filepath(this.content[i]); }
}
return null;
}
this.value = function()
{
for (i = 0; i < this.content.length; i++) {
var test = /[^$\-\d]/.test(this.content[i]);
if(!test && this.content[i] !== ""){ return new Value(this.content[i]); }
}
return null;
}
this.range = function()
{
for (i = 0; i < this.content.length; i++) {
if(this.content[i].indexOf("..") >= 0){ return new Range(this.content[i]); }
}
return null;
}
this.bang = function()
{
for (i = 0; i < this.content.length; i++) {
if(this.content[i].indexOf("!") >= 0){ return new Bang(); }
}
return null;
}
this.angle = function()
{
for (i = 0; i < this.content.length; i++) {
if(this.content[i].indexOf("'") >= 0){ return new Angle(this.content[i]); }
}
return null;
}
this.variable = function(name)
{
for (i = 0; i < this.content.length; i++) {
if(this.content[i].indexOf("=") >= 0){
var parts = this.content[i].split("=");
if(parts[0] == name){
return new Variable(parts[0],parts[1]);
}
}
}
return null;
}
}

38
sources/scripts/core/commander.hint.js
View File

@@ -1,38 +0,0 @@
function Hint(element)
{
Module.call(this);
this.element = element;
this.update = function(module,cmd)
{
if(module){
this.element.innerHTML = this.message(module,cmd);
this.element.style.display = "block";
}
else if(commander && commander.element_input.value != ""){
this.element.innerHTML = commander.element_input.value;
this.element.style.display = "block";
}
else{
this.element.innerHTML = this.default();
this.element.style.display = "block";
}
}
this.message = function(module,cmd)
{
return module.hint(cmd);
}
this.default = function()
{
var s = "<span class='module'>Modules</span>";
for (var key in ronin.modules){
s += "<span> <span class='value'>"+key+"</span> <span class='param'>"+ronin.modules[key].constructor.name+" ";
}
return s;
}
}

100
sources/scripts/core/commander.js
View File

@@ -1,100 +0,0 @@
function Commander(element,element_input)
{
this.element = element;
this.element_input = element_input;
this.hint = new Hint();
this.storage = [];
this.storage_index = 0;
this.always_show = false;
var queue = [];
this.query = function(input_str)
{
if(input_str.indexOf(";") > 0){
queue = input_str.split(";");
}
else{
queue.push(input_str)
}
run();
this.hide();
}
function run()
{
if(!queue[0]){ return; }
active(queue[0].trim());
queue.shift();
if(queue.length > 0){
setTimeout(function(){ run(); }, 100);
}
}
function active(content)
{
var key = content[0];
var cmd = new Command(content.substring(1).trim().split(" "));
if(ronin.modules[key]){
ronin.modules[key].active(cmd);
}
ronin.history.add(content);
}
this.passive = function(content)
{
var key = content[0];
var cmd = new Command(content.substring(1).split(" "));
ronin.module = null;
if(ronin.modules[key]){
ronin.modules[key].passive(cmd);
ronin.module = ronin.modules[key];
}
this.hint.update(ronin.module,cmd);
}
//
this.show = function()
{
this.element.setAttribute('class','visible');
this.element_input.focus();
this.element_input.value = "";
}
this.always = function() {
this.always_show = !this.always_show;
}
this.hide = function()
{
if (!this.always_show) {
this.element.setAttribute('class','hidden');
}
this.element_input.value = "";
}
this.clear = function()
{
this.element_input.value = "";
}
this.next_cmd = function()
{
this.storage_index += this.storage_index < this.storage.length ? 1 : 0;
this.element_input.value = this.storage[this.storage_index] ? this.storage[this.storage_index] : "";
}
this.prev_cmd = function()
{
this.storage_index -= this.storage_index < 1 ? 0 : 1;
this.element_input.value = this.storage[this.storage_index];
}
}

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

@@ -1,45 +0,0 @@
function Cursor()
{
this.mode = null;
this.position = new Position();
this.update = function(event)
{
if(event.ctrltKey === true && event.altKey === true && event.shiftKey === true){ /* */ }
else if(event.shiftKey === true && event.ctrlKey === true){ this.set_mode(ronin.eye); }
else if(event.shiftKey === true && event.altKey === true){ this.set_mode(ronin.surface.active_layer); }
else if(event.ctrltKey === true && event.altKey === true){ this.set_mode(ronin.overlay.compositor); }
else if(event.ctrlKey === true){ this.set_mode(ronin.overlay); }
else if(event.altKey === true){ this.set_mode(ronin.surface); }
else if(event.shiftKey === true){ this.set_mode(ronin.eraser); }
else{ this.set_mode(ronin.brush); }
}
this.set_mode = function(mode)
{
if(this.mode == mode){ return; }
this.mode = mode;
document.body.setAttribute("class",this.mode.constructor.name);
ronin.widget.update();
}
this.mouse_down = function(position)
{
this.position = position;
this.mode.mouse_down(position);
ronin.widget.update();
}
this.mouse_move = function(position)
{
this.position = position;
this.mode.mouse_move(position);
}
this.mouse_up = function(position)
{
this.position = position;
this.mode.mouse_up(position);
ronin.widget.update();
}
}

42
sources/scripts/core/init.js
View File

@@ -1,42 +0,0 @@
var ronin = new Ronin();
ronin.element = document.getElementById('ronin');
ronin.surface.element = document.getElementById('surface');
ronin.widget.element = document.getElementById('widget');
ronin.cursor.mode = ronin.brush;
var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));
commander.hint.element = document.getElementById('commander_hint');
// Cursor
document.addEventListener('mousedown', function(e){ ronin.cursor.mouse_down(ronin.position_in_canvas(e));}, false);
document.addEventListener('mousemove', function(e){ ronin.cursor.mouse_move(ronin.position_in_canvas(e));}, false);
document.addEventListener('mouseup', function(e){ ronin.cursor.mouse_up(ronin.position_in_canvas(e));}, false);
document.addEventListener('contextmenu', function(ev){ ev.preventDefault(); return false;}, false);
window.addEventListener('resize', function(){ ronin.on_resize(); }, true);
// Keyboard
var keyboard = new Keyboard();
document.onkeyup = function myFunction(){ keyboard.listen_onkeyup(event); };
document.onkeydown = function myFunction(){ keyboard.listen_onkeydown(event); };
ronin.install();
// Canvas
var starting_canvas = new Rect();
starting_canvas.width = window.innerWidth - 200;
starting_canvas.height = window.innerHeight - 400;
// Clamp
starting_canvas.width = parseInt(starting_canvas.width/40) * 40;
starting_canvas.height = parseInt(starting_canvas.height/40) * 40;
commander.query("~ "+ronin.timestamp());
commander.query("# "+starting_canvas.render());
commander.query("# layer=Background");
commander.query("# #ff0000");
commander.query("# layer=Main");
commander.query("> 1 ; > 0,0 ; > 1,1 ; > #ffffff");
commander.query("~ Ready.");

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

@@ -1,80 +0,0 @@
function Keyboard()
{
this.listen_onkeyup = function(event)
{
switch (event.key) {
case "Enter": this.key_enter(); break;
case "ArrowUp": this.key_arrow_up(); break;
case "ArrowDown": this.key_arrow_down(); break;
case "ArrowLeft": this.key_arrow_left(); break;
case "ArrowRight": this.key_arrow_right(); break;
// case ":": this.key_colon(); break;
case "Escape": this.key_escape(); break;
}
switch(event.which)
{
case 13: this.key_enter(); break;
case 186: if(event.shiftKey){this.key_colon();} break;
case 27: this.key_escape(); break;
case 219: ronin.brush.size_up(); break;
case 221: ronin.brush.size_down(); break;
case 38: ronin.surface.layer_up(); break;
case 40: ronin.surface.layer_down(); break;
}
// Passive
commander.passive(commander.element_input.value);
ronin.cursor.set_mode(ronin.brush);
ronin.widget.update();
};
this.listen_onkeydown = function(event)
{
ronin.cursor.update(event);
}
this.key_tab = function()
{
}
this.key_enter = function()
{
commander.query(commander.element_input.value);
}
this.key_space = function()
{
}
this.key_arrow_up = function()
{
commander.prev_cmd();
}
this.key_arrow_down = function()
{
commander.next_cmd();
}
this.key_arrow_left = function()
{
}
this.key_arrow_right = function()
{
}
this.key_colon = function()
{
commander.show();
return false;
}
this.key_escape = function()
{
commander.hide();
ronin.overlay.clear();
}
}

75
sources/scripts/core/ronin.js
View File

@@ -1,75 +0,0 @@
function Ronin()
{
this.modules = {};
this.element = null;
this.widget = new Widget();
this.surface = new Surface("#");
this.fileload = new FileLoad("/");
this.filesave = new FileSave("$");
this.history = new History("^");
this.overlay = new Overlay("|");
this.brush = new Brush(">");
this.eraser = new Eraser(".");
this.eye = new Eye("*");
this.render = new Render("%");
this.stroke = new Stroke("_");
this.vector = new Vector("+");
this.help = new Help("?");
this.typo = new Typographe("&");
this.cursor = new Cursor();
this.modules[this.surface.rune] = this.surface;
this.modules[this.fileload.rune] = this.fileload;
this.modules[this.filesave.rune] = this.filesave;
this.modules[this.history.rune] = this.history;
this.modules[this.overlay.rune] = this.overlay;
this.modules[this.render.rune] = this.render;
this.modules[this.brush.rune] = this.brush;
this.modules[this.eraser.rune] = this.eraser;
this.modules[this.eye.rune] = this.eye;
this.modules[this.typo.rune] = this.typo;
this.modules[this.stroke.rune] = this.stroke;
this.modules[this.vector.rune] = this.vector;
this.modules[this.help.rune] = this.help;
//
this.install = function()
{
for(var key in this.modules){
this.modules[key].install();
}
}
this.cursors = [];
this.position_in_canvas = function(e)
{
var x = e.clientX;
x -= (window.innerWidth - this.surface.size.width)/2;
x -= parseInt(this.surface.element.style.marginLeft) + (this.surface.size.width/2);
var y = e.clientY;
y -= (window.innerHeight - this.surface.size.height)/2;
y -= parseInt(this.surface.element.style.marginTop) + parseInt(this.surface.size.height/2);
return new Position(x,y);
}
this.position_in_window = function(p)
{
return new Position(p.x + parseInt(this.surface.element.style.marginLeft),p.y + parseInt(this.surface.element.style.marginTop));
}
this.timestamp = function()
{
var currentdate = new Date();
var date = currentdate.getFullYear()+""+(currentdate.getMonth()+1)+""+currentdate.getDate();
return date+" "+currentdate.getHours()+":"+currentdate.getMinutes()+":"+currentdate.getSeconds();
}
this.on_resize = function()
{
this.widget.on_resize();
}
}

26
sources/scripts/core/widget.js
View File

@@ -1,26 +0,0 @@
function Widget()
{
this.element = null;
this.update = function()
{
var s = "";
for (var key in ronin.modules){
s += ronin.modules[key].widget() ? "<div class='module'>"+ronin.modules[key].widget()+"</div>" : "";
}
s += "<div class='cursor'>"+ronin.cursor.mode.widget_cursor()+"</div>";
this.element.innerHTML = s;
}
this.on_resize = function()
{
this.element.style.left = (window.innerWidth/2)-(ronin.surface.size.width/2);
this.element.style.top = (window.innerHeight/2)+(ronin.surface.size.height/2)+20;
this.element.style.width = ronin.surface.size.width+"px";
this.update();
}
}

47
sources/scripts/filters/balance.js
View File

@@ -1,47 +0,0 @@
function Filter_Balance()
{
Filter.call(this);
this.parameters = [Color];
this.render = function(cmd)
{
if(!cmd.color()){ return; }
if(!cmd.color().rgb()){ return; }
this.draw(ronin.surface.active_layer.context(),cmd.color().rgb());
}
this.preview = function(cmd)
{
if(!cmd.color()){ return; }
if(!cmd.color().rgb()){ return; }
this.draw(ronin.render.layer.context(),cmd.color().rgb());
}
this.draw = function(context = this.context(), color_rgb)
{
var imageObj = new Image();
imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png');
var w = ronin.surface.size.width;
var h = ronin.surface.size.height;
var originalData = ronin.surface.active_layer.context().getImageData(0, 0, w*2, h*2);
var data = originalData.data;
var r = (color_rgb.r / 255) + 0.5;
var g = (color_rgb.g / 255) + 0.5;
var b = (color_rgb.b / 255) + 0.5;
for(var i = 0; i < data.length; i += 4) {
data[i] = data[i] * r;
data[i + 1] = data[i + 1] * g;
data[i + 2] = data[i + 2] * b;
}
ronin.render.layer.clear();
context.putImageData(originalData, 0, 0);
}
}

68
sources/scripts/filters/chromatic.js
View File

@@ -1,68 +0,0 @@
function Filter_Chromatic()
{
Filter.call(this);
this.parameters = [Value, Position];
//value is maximum distance pixels are shifted
//position is where the pixels are shifted from, defaults to half the image
this.render = function(cmd)
{
var position = cmd.position() ? cmd.position() : new Position(ronin.surface.size.width,ronin.surface.size.height);
var value = cmd.value() ? cmd.value().float : 5;
ronin.overlay.clear();
this.draw(this.context(),value,position);
ronin.overlay.clear();
}
this.preview = function(cmd)
{
if(cmd.position()){
ronin.overlay.clear();
ronin.overlay.draw_pointer(cmd.position());
}
}
this.draw = function(context = this.context(), value, position)
{
var w = ronin.surface.size.width;
var h = ronin.surface.size.height;
//no longer letting you set how far each chanel is shifted, not sure how to receive extra data any more
var s = {r:value,g:value*.5,b:0};
var context = ronin.surface.active_layer.context();
//now need two imagedatas to sample off of, for some reason I cant just dump the new pixels into an empty array :/
var originalData = context.getImageData(0, 0, w*2, h*2);
var imageData = context.getImageData(0, 0, w*2, h*2);
var maxLength = Math.sqrt(w*w+h*h);
for (var i=0; i<w*2; i++) {
for(var j=0; j<h*2; j++){
var x = i-position.x;
var y = j-position.y;
var a = Math.atan2(y,x);
var d = Math.sqrt(x*x+y*y);
var f = (d-s.r*d/maxLength);
x = Math.cos(a)*f+position.x;
y = Math.sin(a)*f+position.y;
var r = this.get_color_bilinear(originalData, x, y);
f = (d-s.g*d/maxLength);
x = Math.cos(a)*f+position.x;
y = Math.sin(a)*f+position.y;
var g = this.get_color_bilinear(originalData, x, y);
f = (d-s.b*d/maxLength);
x = Math.cos(a)*f+position.x;
y = Math.sin(a)*f+position.y;
var b = this.get_color_bilinear(originalData, x, y);
var c = {r:r.r, g:g.g, b:b.b,a:Math.max(r.a, Math.max(g.a,b.a))};
this.set_color(imageData, c, i,j);
}
}
ronin.surface.active_layer.clear();
context.putImageData(imageData, 0, 0);
}
}

60
sources/scripts/filters/filter.js
View File

@@ -1,60 +0,0 @@
function Filter()
{
this.name = "Unknown";
this.parameters = [];
this.render = function(cmd)
{
console.log("render: Nothing here.");
}
this.preview = function(cmd)
{
console.log("render: Nothing here.");
}
this.set_color = function(pixels, color, x, y)
{
x = Math.max(0,Math.min(x,pixels.width-1));
y = Math.max(0,Math.min(y,pixels.height-1));
var index = (x+y*pixels.width)*4;
pixels.data[index] = color.r;
pixels.data[index+1] = color.g;
pixels.data[index+2] = color.b;
pixels.data[index+3] = color.a;
}
this.get_color = function(pixels,x,y)
{
x = Math.max(0,Math.min(x,pixels.width-1));
y = Math.max(0,Math.min(y,pixels.height-1));
var index = (x+y*pixels.width)*4;
return {r:pixels.data[index], g:pixels.data[index+1], b:pixels.data[index+2], a:pixels.data[index+3]};
}
this.get_color_bilinear = function(pixels, x, y)
{
var c1 = this.get_color(pixels, Math.floor(x),Math.floor(y));
var c2 = this.get_color(pixels, Math.ceil(x),Math.floor(y));
var c3 = this.get_color(pixels, Math.floor(x),Math.ceil(y));
var c4 = this.get_color(pixels, Math.ceil(x),Math.ceil(y));
return this.lerp_color(this.lerp_color(c1,c2, x%1),this.lerp_color(c3,c4, x%1), y%1);
}
this.lerp_color = function(c1, c2, t)
{
return {r:c1.r+t*(c2.r-c1.r), g:c1.g+t*(c2.g-c1.g), b:c1.b+t*(c2.b-c1.b), a:c1.a+t*(c2.a-c1.a)};
}
//
this.context = function()
{
return ronin.surface.active_layer.context();
}
this.pixels = function()
{
return ronin.surface.active_layer.context().getImageData(0,0,ronin.surface.size.width * 2,ronin.surface.size.height * 2);
}
}

27
sources/scripts/filters/invert.js
View File

@@ -1,27 +0,0 @@
function Filter_Invert()
{
Filter.call(this);
this.parameters = [];
this.render = function(cmd)
{
var imageObj = new Image();
imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png');
var w = ronin.surface.size.width;
var h = ronin.surface.size.height;
var context = ronin.surface.active_layer.context();
var originalData = context.getImageData(0, 0, w*2, h*2);
var data = originalData.data;
for(var i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i];
data[i + 1] = 255 - data[i + 1];
data[i + 2] = 255 - data[i + 2];
}
ronin.surface.active_layer.clear();
context.putImageData(originalData, 0, 0);
}
}

42
sources/scripts/filters/rotate.js
View File

@@ -1,42 +0,0 @@
function Filter_Rotate()
{
Filter.call(this);
this.parameters = [Angle,Position];
this.render = function(cmd)
{
var position = cmd.position() ? cmd.position() : new Position(ronin.surface.size.width/2,ronin.surface.size.height/2);
var angle = cmd.angle() ? cmd.angle().degrees : 90;
ronin.overlay.clear();
this.draw(this.context(),angle,position);
ronin.overlay.clear();
}
this.preview = function(cmd)
{
if(cmd.position()){
ronin.overlay.clear();
ronin.overlay.draw_pointer(cmd.position());
}
}
this.draw = function(context = this.context(), angle, position)
{
var w = ronin.surface.size.width;
var h = ronin.surface.size.height;
ronin.overlay.context().drawImage(context.canvas,0,0,w,h);
ronin.surface.active_layer.clear();
context.save();
context.translate(position.x,position.y);
context.rotate(angle*Math.PI/180);
context.drawImage(ronin.overlay.context().canvas, -position.x, -position.y,w,h)
context.rotate(-angle*Math.PI/180);
context.restore();
}
}

53
sources/scripts/filters/saturation.js
View File

@@ -1,53 +0,0 @@
function Filter_Saturation()
{
Filter.call(this);
this.parameters = [Color];
this.render = function(cmd)
{
if(cmd.color() && cmd.color().rgb()){
this.draw(ronin.surface.active_layer.context(),cmd.color().rgb());
}
else{
this.draw(ronin.surface.active_layer.context());
}
}
this.preview = function(cmd)
{
if(cmd.color() && cmd.color().rgb()){
this.draw(ronin.render.layer.context(),cmd.color().rgb());
}
else{
this.draw(ronin.render.layer.context());
}
}
this.draw = function(context = this.context(), color_rgb = new Color("#36ba0e").rgb())
{
var imageObj = new Image();
imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png');
var w = ronin.surface.size.width;
var h = ronin.surface.size.height;
var originalData = ronin.surface.active_layer.context().getImageData(0, 0, w*2, h*2);
var data = originalData.data;
var _r = (color_rgb.r / 255);
var _g = (color_rgb.g / 255);
var _b = (color_rgb.b / 255);
for(var i = 0; i < data.length; i += 4) {
var r = data[i];
var g = data[i+1];
var b = data[i+2];
var v = _r*r + _g*g + _b*b;
data[i] = data[i+1] = data[i+2] = v
}
ronin.render.layer.clear();
context.putImageData(originalData, 0, 0);
}
}

81
sources/scripts/filters/stencil.js
View File

@@ -1,81 +0,0 @@
function Filter_Stencil()
{
Filter.call(this);
this.parameters = [Angle,Color];
this.render = function(cmd)
{
var angle = cmd.angle() ? cmd.angle().degrees : 20;
var color = cmd.color() ? cmd.color().hex : "#ffffff";
ronin.render.layer.clear();
this.draw(ronin.surface.active_layer.context(),angle,color);
}
this.preview = function(cmd)
{
var angle = cmd.angle() ? cmd.angle().degrees : 20;
var color = cmd.color() ? cmd.color().hex : "#ffffff";
ronin.render.layer.clear();
this.draw(ronin.render.layer.context(),angle,color);
}
this.draw = function(context = this.context(), angle, color)
{
var w = ronin.surface.size.width;
var h = ronin.surface.size.height;
context.translate(w/2,h/2);
context.rotate(angle*Math.PI/180);
this.line(context,-w,0,w,0,color);
this.line(context,w*0.4,-h,w*0.4,h,color);
this.line(context,-w*0.4,-h,-w*0.4,h,color);
this.line(context,-w,h*0.25,w,h*0.25,color);
this.line(context,-w,-h*0.25,w,-h*0.25,color);
this.line(context,w*0.1,0,w*0.1,h,color);
this.line(context,-w*0.1,0,-w*0.1,-h,color);
this.circle(context,w*0.4,-h*0.25,w*0.05,1,1.5,color);
this.circle(context,-w*0.4,h*0.25,w*0.05,0,0.5,color);
context.font = "5px Arial";
context.fillStyle = color;
context.fillText("GRID",(w*0.4)+10,10);
context.font = "5px Arial";
context.fillStyle = color;
context.fillText("GRID",(-w*0.4)-20,-10);
context.rotate(-angle*Math.PI/180);
context.translate(-w/2,-h/2);
}
this.line = function(context,x1,x2,y1,y2,color)
{
context.beginPath();
context.moveTo(x1,x2);
context.lineTo(y1,y2);
context.lineCap="round";
context.lineWidth = 0.5;
context.strokeStyle = color;
context.stroke();
context.closePath();
}
this.circle = function(context,x,y,r,c1,c2,color)
{
context.beginPath();
context.arc(x,y,r,c1*Math.PI,c2*Math.PI);
context.lineCap="round";
context.lineWidth = 0.5;
context.strokeStyle = color;
context.stroke();
context.closePath();
}
}

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

@@ -1,125 +0,0 @@
function Brush(rune)
{
Module.call(this,rune);
this.parameters = [Position,Rect,Angle,Color,Value,Bang];
this.variables = {"natural" : false,"banking" : false};
this.pointers = [];
this.size = 1;
this.opacity = 1;
this.color = new Color();
// Module
this.active = function(cmd)
{
if(cmd.bang()){ this.pointers = []; }
// Pointer
if(cmd.rect() || cmd.position() || cmd.angle()){
this.add_pointer(cmd);
}
// Global
if(cmd.color()){
this.color = cmd.color();
}
if(cmd.value()){
this.size = cmd.value().float;
}
this.update_variables(cmd);
}
this.passive = function(cmd)
{
if(cmd.rect()){
var x = isNaN(cmd.rect().width) ? 0 : cmd.rect().width;
var y = isNaN(cmd.rect().height) ? 0 : cmd.rect().height;
var pos = new Position(x+","+y);
ronin.overlay.draw(pos);
}
if(cmd.angle() && cmd.position()){
ronin.overlay.draw(cmd.position());
}
}
this.size_up = function()
{
this.size -= this.size > 1 ? 1 : 0;
ronin.widget.update();
}
this.size_down = function()
{
this.size += 1;
ronin.widget.update();
}
this.add_pointer = function(cmd)
{
var pointer = new Pointer();
if(cmd.position()){
pointer.offset = cmd.position();
}
if(cmd.rect()){
pointer.mirror = cmd.rect();
}
if(cmd.angle()){
pointer.angle = cmd.angle();
}
this.pointers.push(pointer);
}
this.widget_cursor = function()
{
var s = "> "+this.size+" "+this.color.hex+"<br />";
for (i = 0; i < ronin.brush.pointers.length; i++) {
s += ronin.brush.pointers[i].widget();
}
return s;
return this.pointers.length > 0 ? "Brush "+this.size+", "+this.pointers.length+" pointers" : "No Pointers";
}
// Cursor
this.is_drawing = false;
this.mouse_down = function(position)
{
this.is_drawing = true;
for (i = 0; i < ronin.brush.pointers.length; i++) {
ronin.brush.pointers[i].start();
}
ronin.stroke.new_stroke();
}
this.mouse_move = function(position)
{
if(this.is_drawing === false){ return; }
for (i = 0; i < ronin.brush.pointers.length; i++) {
ronin.brush.pointers[i].draw();
}
ronin.stroke.append_stroke(position);
}
this.mouse_up = function(position)
{
this.is_drawing = false;
for (i = 0; i < ronin.brush.pointers.length; i++) {
ronin.brush.pointers[i].stop();
}
ronin.stroke.save_stroke("brush");
}
}

123
sources/scripts/modules/brush.pointer.js
View File

@@ -1,123 +0,0 @@
function Pointer(offset = new Position(), color = new Color('000000'))
{
this.offset = offset;
this.mirror = null;
this.position_prev = null;
this.angle = null;
this.distance = 0;
// Parameters
this.thickness = function()
{
var ratio = 10/this.position().distance_to(this.position_prev[0]);
ratio = ratio > 1 ? 1 : ratio;
return ronin.brush.size * ratio;
}
//
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.surface.context().beginPath();
ronin.surface.context().globalCompositeOperation="source-over";
ronin.surface.context().moveTo(position_prev.x,position_prev.y);
//Choose direct line or curve line based on how many samples available
if(this.position_prev.length > 1 && position.distance_to(position_prev) > 13){
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.surface.context().quadraticCurveTo(tx,ty,position.x,position.y);
}
else {
ronin.surface.context().lineTo(position.x,position.y);
}
ronin.surface.context().lineCap="round";
ronin.surface.context().lineWidth = this.thickness();
ronin.surface.context().strokeStyle = ronin.brush.color.rgba();
ronin.surface.context().stroke();
ronin.surface.context().closePath();
this.position_prev.unshift(position);
}
this.position = function()
{
if(this.angle && this.offset){
return this.position_rotation();
}
else if(this.mirror && this.mirror.width > 0){
return this.position_mirror_x();
}
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.width) - (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.height) - (ronin.cursor.position.y + this.offset.y));
}
this.position_rotation = function()
{
var angle_radian = this.angle.degrees * 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()
{
}
this.stop = function()
{
this.position_prev = null;
}
this.widget = function()
{
return this.offset.render()+"<br />";
}
}

79
sources/scripts/modules/eraser.js
View File

@@ -1,79 +0,0 @@
function Eraser(rune)
{
Module.call(this,rune);
this.parameters = [Value];
this.size = 5;
// Module
this.position_prev = null;
this.draw = function()
{
if(!this.position_prev){this.position_prev = ronin.cursor.position; }
if(ronin.brush.size < 0){ this.erase(); return; }
var position = ronin.cursor.position;
this.distance += position.distance_to(this.position_prev);
ronin.surface.context().beginPath();
ronin.surface.context().globalCompositeOperation="destination-out";
ronin.surface.context().moveTo(this.position_prev.x,this.position_prev.y);
ronin.surface.context().lineTo(position.x,position.y);
ronin.surface.context().lineCap="round";
ronin.surface.context().lineWidth = this.size;
ronin.surface.context().strokeStyle = new Color("#ff0000").rgba();
ronin.surface.context().stroke();
ronin.surface.context().closePath();
this.position_prev = position;
}
this.active = function(cmd)
{
if(cmd.value()){
this.size = cmd.value().float;
}
}
this.passive = function(cmd)
{
}
this.widget_cursor = function()
{
return ". "+this.size;
}
// Cursor
this.is_drawing = false;
this.mouse_down = function(position)
{
this.is_drawing = true;
this.position_prev = null;
ronin.stroke.new_stroke();
}
this.mouse_move = function(position)
{
if(this.is_drawing === false){ return; }
this.draw();
ronin.stroke.append_stroke(position);
}
this.mouse_up = function(position)
{
this.is_drawing = false;
this.position_prev = null;
ronin.stroke.save_stroke("eraser");
}
}

45
sources/scripts/modules/eye.js
View File

@@ -1,45 +0,0 @@
function Eye(rune)
{
Module.call(this,rune);
// Module
this.active = function(cmd)
{
}
this.passive = function(cmd)
{
}
this.widget_cursor = function()
{
return "Eye";
}
this.color_picker = function(position)
{
var imgData = ronin.surface.context().getImageData(position.x, position.y, 1, 1).data;
var c = new Color();
commander.show();
commander.element_input.focus();
commander.element_input.value = "> "+(c.rgb_to_hex(imgData));
}
// Cursor
this.mouse_down = function(position)
{
this.color_picker(position);
}
this.mouse_move = function(position)
{
this.color_picker(position);
}
this.mouse_up = function(position)
{
this.color_picker(position);
}
}

49
sources/scripts/modules/file.load.js
View File

@@ -1,49 +0,0 @@
function FileLoad(rune)
{
Module.call(this,rune);
this.parameters = [Filepath,Position,Rect];
this.active = function(cmd)
{
ronin.overlay.clear();
if(!cmd.filepath() && !cmd.value()){ return; }
var position = cmd.position() ? cmd.position() : new Position();
base_image = new Image();
base_image.src = cmd.filepath().path;
base_image.src += '?'+new Date().getTime();
base_image.crossOrigin = "Anonymous";
base_image.onload = function(){
var width = base_image.naturalWidth;
var height = base_image.naturalHeight;
if(cmd.rect()){
width = cmd.rect().width;
height = cmd.rect().height;
position.normalize(cmd.rect());
}
// Scale with only 1 unit
width = isNaN(width) && height > 0 ? (height*base_image.naturalWidth)/base_image.naturalHeight : width;
height = isNaN(height) && width > 0 ? (width*base_image.naturalHeight)/base_image.naturalWidth : height;
ronin.surface.context().drawImage(base_image, position.x, position.y, width, height);
}
}
this.passive = function(cmd)
{
if(!cmd.filepath() && !cmd.value()){ return; }
var position = cmd.position() ? cmd.position() : new Position();
if(position && cmd.rect()){
ronin.overlay.draw(position,cmd.rect());
}
else if(position){
ronin.overlay.draw(position);
}
}
}

45
sources/scripts/modules/file.save.js
View File

@@ -1,45 +0,0 @@
function FileSave(rune)
{
Module.call(this,rune);
this.parameters = [Any];
this.variables = {"format" : "[png/jpg]"};
this.docs = "Creates a new window with a image of the resulting canvas in the specified format.";
this.layer = null;
this.install = function()
{
this.layer = new Layer("Save.Export",this);
ronin.surface.add_layer(this.layer);
}
this.active = function(cmd)
{
var d = null;
if(cmd.variable("format") && cmd.variable("format").value == "jpg"){
var d = this.merge().element.toDataURL('image/jpeg');
}
else{
var d = this.merge().element.toDataURL('image/png');
}
var w = window.open('about:blank','image from canvas');
w.document.write("<title>Untitled</title><body><img src='"+d+"' width='"+ronin.surface.size.width+"px' height='"+ronin.surface.size.height+"px'/></body>");
this.layer.clear();
}
this.merge = function()
{
var a = [];
Object.keys(ronin.surface.layers).forEach(function (key) {
a.push(ronin.surface.layers[key]);
});
for (i = 0; i < a.length; i++) {
this.layer.context().drawImage(a[i].context().canvas,0,0,ronin.surface.size.width,ronin.surface.size.height);
}
return this.layer;
}
}

125
sources/scripts/modules/help.js
View File

@@ -1,125 +0,0 @@
function Help(rune)
{
Module.call(this,rune);
this.active = function(cmd)
{
var w = window.open('about:blank','image from canvas');
var html = "";
html += this.view_intro();
html += this.view_controls();
html += this.view_modules();
html += this.view_filters();
html += this.view_units();
html += this.view_presets();
w.document.write("<title>Help</title><style>body { font-size:11px;background:#111; color:#fff; padding:20px} pre { font-family:Monaco,Courier} pre div{ border-left:5px solid #222; padding-left:20px;} pre div b { text-decoration:underline; color:#999; font-weight:normal} pre div i { font-style:normal; color:#72dec2}</style><pre>"+html+"</pre>");
}
//
this.view_intro = function()
{
var html = "Ronin\n\n";
html += "<div>Ronin is a drawing application and visual language. \nLaunch Ronin and press <b>:</b> to display the command prompt.</div>\n";
return html;
}
this.view_controls = function()
{
html = "Controls\n\n";
html += "<div>";
html += pad("ctrl",20)+"Draw Overlays\n";
html += pad("alt",20)+"Drag Surface\n";
html += pad("shift",20)+"Erase\n";
html += pad("shift+ctrl",20)+"Eyedrop\n";
html += pad("shift+alt",20)+"Move Layer\n";
html += "</div>";
html += "\n";
return html;
}
this.view_modules = function()
{
html = "Modules\n\n";
html += "<div>";
Object.keys(ronin.modules).forEach(function (key) {
var parameters = "";
html += pad("<i>"+key+"</i> "+ronin.modules[key].constructor.name,27);
for (i = 0; i < ronin.modules[key].parameters.length; i++) {
html += "<b>"+ronin.modules[key].parameters[i].name+"</b> ";
}
html += "\n";
});
html += "</div>";
html += "\n";
return html;
}
this.view_filters = function()
{
html = "Filters\n\n";
html += "<div>";
for(var filter in ronin.modules["%"].collection){
html += pad(filter,20);
for (i = 0; i < ronin.modules["%"].collection[filter].parameters.length; i++) {
html += "<b>"+ronin.modules["%"].collection[filter].parameters[i].name+"</b> ";
}
html += "\n";
}
html += "</div>";
html += "\n";
return html
}
this.view_units = function()
{
html = "Units\n\n";
html += "<div>";
html += pad("5",20)+"value: 5\n";
html += pad("5,7",20)+"position: 5x 7y\n";
html += pad("7x9",20)+"rect: 5w 7h\n";
html += pad("#ff0000",20)+"color: red\n";
html += pad("45'",20)+"degree: 45/365\n";
html += pad("rate=10",20)+"variable: rate=10\n";
html += "</div>";
html += "\n";
return html;
}
this.view_presets = function()
{
html = "Presets\n\n";
html += "<div>";
html += "Brushes\n";
html += pad("Radial Brush(8)",20)+"> 600,400 45';> 600,400 90';> 600,400 135';> 600,400 180';> 600,400 225';> 600,400 270';> 600,400 315'\n";
html += pad("Radial Brush(6)",20)+"> 600,400 60';> 600,400 120';> 600,400 180';> 600,400 240';> 600,400 300'\n";
html += pad("Symmetric Brush(XY)",20)+"> 400x 3\n";
html += pad("Angular brush",20)+"> 400x 1,1;> 400x 2,2;> 400x 3,3; > 1,1;> 2,2;> 3,3;\n";
html += "\nGraphics\n";
html += pad("Watermark",20)+"# 1280x720 ; / ../assets/photo.jpg 1280x 0,0 ; / ../assets/logo.png 60x60 20,640\n";
html += pad("Ronin Logo",20)+"+ M150,53 A-96,97 0 0,0 246,150 M150,246 A97,-96 0 0,0 53,150 M53,101 A-48,-48 0 0,0 101,53 M246,101 A48,-48 0 0,1 198,53 M53,198 A-48,48 0 0,1 101,246 M246,198 A48,48 0 0,0 198,246 stroke_width=45 line_cap=square stroke_color=black\n";
html += pad("Circle",20)+"+ M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0\n";
html += pad("Multiple Circles",20)+"+ M 64, 64 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0;+ M 64, 64 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0;+ M 64, 64 m -40, 0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0;+ M 64, 64 m -35, 0 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0;+ M 64, 64 m -30, 0 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0;+ M 64, 64 m -25, 0 a 25,25 0 1,0 50,0 a 25,25 0 1,0 -50,0;+ M 64, 64 m -20, 0 a 20,20 0 1,0 40,0 a 20,20 0 1,0 -40,0;+ M 64, 64 m -15, 0 a 15,15 0 1,0 30,0 a 15,15 0 1,0 -30,0;+ M 64, 64 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0;+ M 64, 64 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0\n";
html += "\nFilters\n";
html += pad("Darken",20)+"# 640x360 ; / ../assets/photo.jpg 640x 0,0 ; % balance #333333\n";
html += pad("Desaturate",20)+"# 640x360 ; / ../assets/photo.jpg 640x 0,0 ; % saturation #333333\n";
html += "</div>";
return html;
}
function pad(s,length)
{
if(!s){ return s; }
var new_string = s;
while(new_string.length < length){
new_string += " ";
}
return new_string;
}
}

30
sources/scripts/modules/history.js
View File

@@ -1,30 +0,0 @@
function History(rune)
{
Module.call(this,rune);
this.cmds = [];
this.active = function(cmd)
{
var w = window.open('about:blank','source');
var html = "";
for (i = 0; i < this.cmds.length; i++) {
if(this.cmds[i][0] == this.rune){ continue; }
html += this.cmds[i]+";<br />";
}
w.document.write("<title>Source</title><style>body { font-family:courier}</style>"+html+"");
}
this.add = function(content)
{
this.cmds.push(content);
}
this.widget = function()
{
if(this.cmds.length === 0){ return "";}
return "^ "+this.cmds.length+" ";
}
}

91
sources/scripts/modules/module.js
View File

@@ -1,91 +0,0 @@
function Module(rune)
{
this.rune = rune;
this.element = null;
this.parameters = [];
this.variables = {};
this.docs = "Missing documentation.";
this.install = function()
{
console.log("Installing "+ronin.modules[this.rune].constructor.name);
}
this.active = function(cmd)
{
console.log("Nothing to do.");
}
this.passive = function(cmd)
{
console.log("Nothing to do.");
}
this.update_variables = function(cmd)
{
for (var key in this.variables){
if(!cmd.variable(key)){ continue; }
this.variables[key] = cmd.variable(key).value;
}
}
this.hint = function(cmd)
{
var s = this.pad(cmd.content.join(" "));
s += cmd.content.join(" ").length == 0 ? "<span class='module'>"+this.constructor.name+"</span>" : "";
// Params
var e = 0;
while(e < 10){
if(!this.parameters[e]){ break; }
var param_name = this.parameters[e].name;
s += cmd[param_name.toLowerCase()]() ? "" : "<span class='param'>"+param_name+"</span>";
e += 1;
}
// Variables
if(this.variables){
for (var key in this.variables){
if(cmd.variable(key)){continue;}
s += "<span class='variable_key'>"+key+"</span>=<span class='variable_value'>"+this.variables[key]+"</span> ";
}
}
return s;
}
this.pad = function(input)
{
var s = "";
for (i = 0; i < input.length+2; i++){
s += "_";
}
return "<span style='color:#000'>"+s+"</span>";
}
this.widget = function()
{
return "";
}
this.widget_cursor = function()
{
return "Missing";
}
this.mouse_down = function(position)
{
}
this.mouse_move = function(position)
{
}
this.mouse_up = function(position)
{
}
}

163
sources/scripts/modules/overlay.js
View File

@@ -1,163 +0,0 @@
function Overlay(rune)
{
Module.call(this,rune);
this.parameters = [Position,Rect,Color];
this.color = new Color("#ffffff");
this.layer = null;
this.install = function()
{
this.layer = new Layer("Overlay.Guide",this);
this.layer.element.setAttribute("style","z-index:9000");
ronin.surface.add_layer(this.layer);
}
this.passive = function(cmd)
{
this.draw(cmd.position(),cmd.rect());
}
this.active = function(cmd)
{
if(cmd.bang()){ this.guides = []; }
if(cmd.color()){ this.color = cmd.color(); }
}
// draw
this.draw = function(position,rect)
{
this.clear();
if(!position){ position = new Position("0,0"); }
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,rect)
{
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);
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = this.color.hex;
this.context().stroke();
this.context().closePath();
}
this.draw_pointer = function(position)
{
this.context().beginPath();
this.context().moveTo(position.x,position.y);
this.context().lineTo(position.x + 10,position.y);
this.context().lineTo(position.x,position.y + 10);
this.context().lineTo(position.x,position.y);
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = this.color.hex;
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,this.element.height);
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = this.color.hex;
this.context().stroke();
this.context().closePath();
}
this.draw_horizontal_line = function(position)
{
this.context().beginPath();
this.context().moveTo(0,position.y);
this.context().lineTo(this.element.width,position.y);
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = this.color.hex;
this.context().stroke();
this.context().closePath();
}
this.context = function()
{
return this.layer.context();
}
this.clear = function()
{
this.context().clearRect(0, 0, ronin.surface.size.width, ronin.surface.size.height);
}
// Cursor
this.live_draw_from = null;
this.mouse_down = function(position)
{
ronin.overlay.clear();
ronin.overlay.draw_pointer(position);
this.live_draw_from = position;
commander.show();
commander.element_input.focus();
commander.element_input.value = "| "+this.live_draw_from.render();
}
this.mouse_move = function(position)
{
if(this.live_draw_from === null){ return; }
ronin.overlay.clear();
var rect = new Rect();
rect.width = position.x - this.live_draw_from.x;
rect.height = position.y - this.live_draw_from.y;
ronin.overlay.draw_rect(this.live_draw_from,rect);
commander.element_input.value = "| "+this.live_draw_from.render()+" "+rect.render();
}
this.mouse_up = function(position)
{
this.live_draw_from = null;
commander.element_input.focus();
}
// Widget
this.widget_cursor = function()
{
return "Guide";
}
}

59
sources/scripts/modules/render.js
View File

@@ -1,59 +0,0 @@
function Render(rune)
{
Module.call(this,rune);
this.parameters = [Any];
this.collection = {};
this.collection["rotate"] = new Filter_Rotate();
this.collection["balance"] = new Filter_Balance();
this.collection["saturation"] = new Filter_Saturation();
this.collection["stencil"] = new Filter_Stencil();
this.collection["invert"] = new Filter_Invert();
this.collection["chromatic"] = new Filter_Chromatic();
this.layer = null;
this.install = function()
{
this.layer = new Layer("Render.Preview",this);
this.layer.element.setAttribute("style","z-index:9000");
ronin.surface.add_layer(this.layer);
}
this.active = function(cmd)
{
var name = cmd.content[0];
if(!this.collection[name]){ return; }
return this.collection[name].render(cmd);
}
this.passive = function(cmd)
{
var name = cmd.content[0];
if(!this.collection[name]){ return; }
return this.collection[name].preview(cmd);
}
this.hint = function(cmd)
{
var input = cmd.content.join(" ").trim();
var s = this.pad(input);
if(this.collection[input]){
for (i = 0; i < this.collection[input].parameters.length; i++) {
s += this.collection[input].parameters[i].name+" ";
}
}
else{
for (var key in this.collection){
s += key+" ";
}
}
return s;
}
}

62
sources/scripts/modules/stroke.js
View File

@@ -1,62 +0,0 @@
function Stroke(rune)
{
Module.call(this,rune);
this.parameters = [Any];
// Create a stroke
this.positions = null;
this.new_stroke = function()
{
this.positions = [];
}
this.append_stroke = function(p)
{
this.positions.push(p);
}
this.save_stroke = function(mode)
{
// TODO
// s = "_ module="+mode+" ";
// for (i = 0; i < this.positions.length; i++) {
// s += this.positions[i].render()+" ";
// }
// if(this.positions.length > 0){ ronin.history.add(s); }
// this.positions = null;
}
// Module
this.passive = function(cmd)
{
}
this.active = function(cmd)
{
var prev = null
for (i = 1; i < cmd.content.length; i++) {
var p = new Position(cmd.content[i]);
if(prev){
this.draw(prev,p);
}
prev = p;
}
}
this.draw = function(pos1,pos2)
{
ronin.surface.context().beginPath();
ronin.surface.context().moveTo(pos1.x,pos1.y);
ronin.surface.context().lineTo(pos2.x,pos2.y);
ronin.surface.context().lineCap="round";
ronin.surface.context().lineWidth = 10;
ronin.surface.context().strokeStyle = ronin.brush.color.rgba();
ronin.surface.context().stroke();
ronin.surface.context().closePath();
}
}

171
sources/scripts/modules/surface.js
View File

@@ -1,171 +0,0 @@
function Surface(rune)
{
Module.call(this,rune);
this.element = null;
this.parameters = [Rect,Color,Bang];
this.variables = {"layer" : "main"};
this.layers = {};
this.active_layer = null;
this.render_layer = null;
this.size = new Rect("200x200");
this.active = function(cmd)
{
if(cmd.rect()){
this.resize(cmd.rect(),cmd.position());
}
if(cmd.color()){
this.context().beginPath();
this.context().rect(0, 0, this.active_layer.element.width, this.active_layer.element.height);
this.context().fillStyle = cmd.color().hex;
this.context().fill();
}
if(cmd.bang() && Object.keys(ronin.surface.layers).length > 1){
this.layers[this.active_layer.name].element.outerHTML = "";
delete this.layers[this.active_layer.name];
this.select_any_layer();
ronin.widget.update();
}
if(cmd.variable("layer")){
var name = cmd.variable("layer").value;
if(!this.layers[name]){
this.add_layer(new Layer(name));
}
this.select_layer(this.layers[name]);
}
}
this.select_layer = function(layer)
{
console.log("Selecting layer:"+layer.name);
this.active_layer = layer;
}
this.select_any_layer = function()
{
var layer_name = Object.keys(ronin.surface.layers)[0];
this.select_layer(ronin.surface.layers[layer_name]);
}
this.add_layer = function(layer)
{
console.log("Creating layer:"+layer.name+"("+(layer.manager ? layer.manager.constructor.name : "")+")");
this.layers[layer.name] = layer;
this.active_layer = layer;
this.element.appendChild(layer.element);
this.active_layer.resize(this.size);
}
this.passive = function(cmd)
{
if(cmd.rect()){
ronin.overlay.draw(cmd.position(),cmd.rect());
}
}
this.resize = function(rect, position = null)
{
this.size = rect;
Object.keys(ronin.surface.layers).forEach(function (key) {
ronin.surface.layers[key].resize(rect);
});
ronin.surface.element.width = rect.width * 2;
ronin.surface.element.height = rect.height * 2;
ronin.surface.element.style.width = rect.width+"px";
ronin.surface.element.style.height = rect.height+"px";
ronin.surface.element.style.marginLeft = -(rect.width/2);
ronin.surface.element.style.marginTop = -(rect.height/2);
ronin.on_resize();
}
this.widget = function()
{
if(!this.active_layer){ return ""; }
var s = "";
Object.keys(ronin.surface.layers).forEach(function (key) {
s = ronin.surface.layers[key].widget()+s;
});
return "# "+this.size.render()+"<br />"+s;
}
this.widget_cursor = function()
{
return "Drag";
}
// Commands
this.layer_up = function()
{
var keys = Object.keys(ronin.surface.layers);
var loc = keys.indexOf(this.active_layer.name);
if(loc >= keys.length-1){ console.log("Reached end"); return false; }
if(keys[loc+1] != null){this.select_layer(ronin.surface.layers[keys[loc+1]]);}
}
this.layer_down = function()
{
var keys = Object.keys(ronin.surface.layers);
var loc = keys.indexOf(this.active_layer.name);
if(keys[loc-1] != null){this.select_layer(ronin.surface.layers[keys[loc-1]]);}
}
// Layers
this.context = function()
{
return this.active_layer.context();
}
// Cursor
this.drag_from = null;
this.drag_offset_x = 0;
this.drag_offset_y = 0;
this.mouse_down = function(position)
{
this.drag_from = ronin.position_in_window(position);
}
this.mouse_move = function(position)
{
if(this.drag_from === null){ return; }
position = ronin.position_in_window(position);
var offset_x = this.drag_from.x - position.x;
var offset_y = this.drag_from.y - position.y;
this.drag_offset_x -= offset_x;
this.drag_offset_y -= offset_y;
ronin.surface.element.style.marginLeft = -(this.size.width/2) + this.drag_offset_x;
ronin.surface.element.style.marginTop = -(this.size.height/2) + this.drag_offset_y;
ronin.element.style.backgroundPosition = ((this.drag_offset_x/8))-(window.innerWidth % 20)+"px "+((this.drag_offset_y/8)-(window.innerWidth % 20))+"px";
ronin.widget.element.style.marginLeft = this.drag_offset_x;
ronin.widget.element.style.marginTop = this.drag_offset_y;
this.drag_from = new Position(position.x,position.y);
}
this.mouse_up = function(event)
{
this.drag_from = null;
}
}

93
sources/scripts/modules/surface.layer.js
View File

@@ -1,93 +0,0 @@
function Layer(name,manager = null)
{
this.name = name;
this.manager = manager;
this.element = document.createElement("canvas");
this.element.setAttribute("id","_"+name);
this.element.setAttribute("class","layer");
this.resize = function(rect)
{
console.log("Resize "+this.name+" to "+rect.render());
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.clear = function()
{
this.context().clearRect(0, 0, this.element.width, this.element.height);
}
this.context = function()
{
return this.element.getContext('2d');
}
this.image = function()
{
return this.element.toDataURL('image/png');
}
//
this.widget_cursor = function()
{
return "Move";
}
this.widget = function()
{
var e_name = "";
e_name += this.name;
var e_class = "";
e_class += "layer ";
if(ronin.surface.active_layer.name == this.name){ e_class += "highlight "; }
if(this.manager != null){ e_class += "managed "; }
var e_icon = this.manager ? "~" : "-";
return "<span class='"+e_class+"'>"+e_icon+" "+e_name+"</span><br />";
}
this.move_from = null;
this.mouse_down = function(position)
{
this.move_from = ronin.position_in_window(position);
ronin.stroke.new_stroke();
}
this.mouse_move = function(position)
{
if(this.move_from === null){ return; }
ronin.stroke.append_stroke(position); // Save to stroke
position = ronin.position_in_window(position);
var offset_x = this.move_from.x - position.x;
var offset_y = this.move_from.y - position.y;
var imageData = this.context().getImageData(0, 0, ronin.surface.size.width * 2, ronin.surface.size.height * 2);
this.clear();
this.context().putImageData(imageData, -offset_x * 2, -offset_y * 2);
this.move_from = new Position(position.x,position.y);
}
this.mouse_up = function(event)
{
this.move_from = null;
ronin.stroke.save_stroke("move");
}
}

49
sources/scripts/modules/typographe.js
View File

@@ -1,49 +0,0 @@
function Typographe(rune)
{
Module.call(this,rune);
this.parameters = [Position,Color,Value];
this.variables = {"text" : null, "font" : "Georgia"};
this.layer = null;
this.install = function()
{
this.layer = new Layer("Typographe.Preview",this);
this.layer.element.setAttribute("style","z-index:7000");
ronin.surface.add_layer(this.layer);
}
this.active = function(cmd)
{
var target = ronin.surface.active_layer;
target.clear();
if(cmd.variable("text")){
this.add_text(target.context(),cmd);
}
}
this.passive = function(cmd)
{
var target = this.layer;
target.clear();
if(cmd.variable("text")){
this.add_text(target.context(),cmd);
}
}
this.add_text = function(context,cmd)
{
var ctx = context;
var text = cmd.variable("text").value;
var position = cmd.position() ? cmd.position() : new Position(20,40);
var color = cmd.color() ? cmd.color() : new Color("#000000");
var size = cmd.value() ? cmd.value().int : 20;
var font = cmd.variable("font") ? cmd.variable("font").value : "Georgia";
ctx.font = size+"px "+font;
ctx.fillStyle = color.hex;
ctx.fillText(text,position.x,position.y);
}
}

36
sources/scripts/modules/vector.js
View File

@@ -1,36 +0,0 @@
function Vector(rune)
{
Module.call(this,rune);
this.parameters = [Any];
this.variables = {"fill_color" : "none","stroke_width" : 2,"stroke_color" : "#ffffff", "line_cap" : "square"};
this.layer = null;
this.install = function()
{
this.layer = new Layer("Vector.Preview",this);
this.layer.element.setAttribute("style","z-index:8000");
ronin.surface.add_layer(this.layer);
}
// Module
this.passive = function(cmd)
{
this.layer.clear();
this.layer.context().lineCap = cmd.variable("line_cap") ? cmd.variable("line_cap").value : "round";
this.layer.context().lineWidth = cmd.variable("stroke_width") ? cmd.variable("stroke_width").value : ronin.brush.size;
this.layer.context().strokeStyle = cmd.variable("stroke_color") ? cmd.variable("stroke_color").value : "#ffffff";
this.layer.context().stroke(new Path2D(cmd.content.join(" ")));
}
this.active = function(cmd)
{
this.layer.clear();
ronin.surface.active_layer.context().lineCap = cmd.variable("line_cap") ? cmd.variable("line_cap").value : "round";
ronin.surface.active_layer.context().lineWidth = cmd.variable("stroke_width") ? cmd.variable("stroke_width").value : ronin.brush.size;
ronin.surface.active_layer.context().strokeStyle = cmd.variable("stroke_color") ? cmd.variable("stroke_color").value : "#ffffff";
ronin.surface.active_layer.context().stroke(new Path2D(cmd.content.join(" ")));
}
}

13
sources/scripts/units/angle.js
View File

@@ -1,13 +0,0 @@
function Angle(angle_str = "0'")
{
Unit.call(this);
this.example = "45'";
this.degrees = parseFloat(angle_str.replace('\'',''));
this.render = function()
{
return this.degrees+"'";
}
}

12
sources/scripts/units/any.js
View File

@@ -1,12 +0,0 @@
function Any(str)
{
Unit.call(this);
this.example = "";
this.string = str;
this.render = function()
{
return this.string;
}
}

11
sources/scripts/units/bang.js
View File

@@ -1,11 +0,0 @@
function Bang()
{
Unit.call(this);
this.example = "";
this.render = function()
{
return "BANG";
}
}

32
sources/scripts/units/color.js
View File

@@ -1,32 +0,0 @@
function Color(hex = '#000000')
{
Unit.call(this);
this.example = "#ff0000";
this.hex = hex;
this.rgb = function()
{
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(this.hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
this.rgba = function()
{
return "rgba("+this.rgb().r+","+this.rgb().g+","+this.rgb().b+",1)";
}
this.render = function()
{
return this.hex;
}
this.rgb_to_hex = function(rgb)
{
return "#"+("0" + parseInt(rgb[0],10).toString(16)).slice(-2)+("0" + parseInt(rgb[1],10).toString(16)).slice(-2)+("0" + parseInt(rgb[2],10).toString(16)).slice(-2);
}
}

12
sources/scripts/units/filepath.js
View File

@@ -1,12 +0,0 @@
function Filepath(path_str)
{
Unit.call(this);
this.example = "assets/demo.png";
this.path = path_str;
this.render = function()
{
return this.path;
}
}

42
sources/scripts/units/position.js
View File

@@ -1,42 +0,0 @@
function Position(position_str = "0,0",y = null)
{
Unit.call(this);
this.example = "100,150";
this.position_str = position_str;
this.x = y != null ? position_str : parseFloat(this.position_str.split(",")[0]);
this.y = y != null ? y : parseFloat(this.position_str.split(",")[1]);
this.add = function(position)
{
return new Position(this.x + position.x, this.y + position.y);
}
this.is_equal = function(target)
{
if(target.x == this.x && target.y == this.y){ return true; }
return null;
}
this.distance_to = function(target)
{
if(!target){ return 0; }
return Math.sqrt( (this.x-target.x)*(this.x-target.x) + (this.y-target.y)*(this.y-target.y) );
}
this.normalize = function(rect)
{
if(this.x < 0){
this.x = ronin.canvas.element.width - rect.width - Math.abs(this.x);
}
if(this.y < 0){
this.y = ronin.canvas.element.height - rect.height - Math.abs(this.y);
}
}
this.render = function()
{
return (isNaN(this.x) ? 0 : this.x)+","+(isNaN(this.y) ? 0 : this.y);
}
}

15
sources/scripts/units/range.js
View File

@@ -1,15 +0,0 @@
function Range(range_str)
{
Unit.call(this);
this.example = "10..50";
this.range_str = range_str;
this.from = parseFloat(this.range_str.split("..")[0]);
this.to = parseFloat(this.range_str.split("..")[1]);
this.render = function()
{
return this.from+".."+this.to;
}
}

15
sources/scripts/units/rect.js
View File

@@ -1,15 +0,0 @@
function Rect(rect_str)
{
Unit.call(this);
this.example = "200x300";
this.rect_str = rect_str;
this.width = rect_str ? parseFloat(this.rect_str.split("x")[0]) : 0;
this.height = rect_str ? parseFloat(this.rect_str.split("x")[1]) : 0;
this.render = function()
{
return (isNaN(this.width) ? 0 : this.width)+"x"+(isNaN(this.height) ? 0 : this.height);
}
}

9
sources/scripts/units/unit.js
View File

@@ -1,9 +0,0 @@
function Unit()
{
this.example = "unknown";
this.render = function()
{
return "[MISSING]";
}
}

14
sources/scripts/units/value.js
View File

@@ -1,14 +0,0 @@
function Value(value_str)
{
Unit.call(this);
this.example = "20";
this.value = value_str;
this.float = parseFloat(this.value);
this.int = parseInt(this.value);
this.render = function()
{
return this.value;
}
}

16
sources/scripts/units/variable.js
View File

@@ -1,16 +0,0 @@
function Variable(key,value)
{
Unit.call(this);
this.candidates = [];
this.key = key;
if(value == "true"){ this.value = true; }
else if(value == "false"){ this.value = false; }
else{ this.value = value; }
this.render = function()
{
return this.key+"="+this.value;
}
}