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

Starting to implement into Electron.

Browse Source
This commit is contained in:
Devine Lu Linvega
2017-09-19 10:08:37 +13:00
parent fe65660544
commit f10671fec6
63 changed files with 154 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
sources/index.html Normal file
View File

@@ -0,0 +1,69 @@
<html>
<head>
<script type="text/javascript" src="scripts/units/unit.js"></script>
<script type="text/javascript" src="scripts/units/rect.js"></script>
<script type="text/javascript" src="scripts/units/color.js"></script>
<script type="text/javascript" src="scripts/units/position.js"></script>
<script type="text/javascript" src="scripts/units/bang.js"></script>
<script type="text/javascript" src="scripts/units/angle.js"></script>
<script type="text/javascript" src="scripts/units/value.js"></script>
<script type="text/javascript" src="scripts/units/filepath.js"></script>
<script type="text/javascript" src="scripts/units/any.js"></script>
<script type="text/javascript" src="scripts/units/setting.js"></script>
<script type="text/javascript" src="scripts/units/range.js"></script>
<script type="text/javascript" src="scripts/units/option.js"></script>
<script type="text/javascript" src="scripts/units/method.js"></script>
<script type="text/javascript" src="scripts/units/setting.js"></script>
<script type="text/javascript" src="scripts/units/mode.js"></script>
<script type="text/javascript" src="scripts/modules/default.js"></script>
<script type="text/javascript" src="scripts/modules/cursor.js"></script>
<script type="text/javascript" src="scripts/modules/terminal.js"></script>
<script type="text/javascript" src="scripts/modules/module.js"></script>
<script type="text/javascript" src="scripts/modules/path.js"></script>
<script type="text/javascript" src="scripts/modules/overlay.js"></script>
<script type="text/javascript" src="scripts/modules/brush.js"></script>
<script type="text/javascript" src="scripts/modules/brush.pointer.js"></script>
<script type="text/javascript" src="scripts/modules/source.js"></script>
<script type="text/javascript" src="scripts/modules/frame.js"></script>
<script type="text/javascript" src="scripts/modules/layer.js"></script>
<script type="text/javascript" src="scripts/modules/eye.js"></script>
<script type="text/javascript" src="scripts/modules/type.js"></script>
<script type="text/javascript" src="scripts/modules/render.js"></script>
<script type="text/javascript" src="scripts/modules/magnet.js"></script>
<script type="text/javascript" src="scripts/modules/terminal.widget.js"></script>
<script type="text/javascript" src="scripts/filters/filter.js"></script>
<script type="text/javascript" src="scripts/filters/stencil.js"></script>
<script type="text/javascript" src="scripts/filters/invert.js"></script>
<script type="text/javascript" src="scripts/filters/chromatic.js"></script>
<script type="text/javascript" src="scripts/filters/balance.js"></script>
<script type="text/javascript" src="scripts/filters/grey.js"></script>
<script type="text/javascript" src="scripts/filters/sharpen.js"></script>
<script type="text/javascript" src="scripts/filters/saturate.js"></script>
<script type="text/javascript" src="scripts/filters/contrast.js"></script>
<script type="text/javascript" src="scripts/core/keyboard.js"></script>
<script type="text/javascript" src="scripts/core/command.js"></script>
<script type="text/javascript" src="scripts/core/ronin.js"></script>
<link rel="stylesheet" type="text/css" href="links/reset.css"/>
<link rel="stylesheet" type="text/css" href="links/fonts.css"/>
<link rel="stylesheet" type="text/css" href="links/main.css"/>
<title>Ronin</title>
</head>
<body>
<div id='ronin'>
<div id='cursor'></div>
<div id='frame'></div>
<div id='terminal'></div>
</div>
<script type="text/javascript">
var ronin = new Ronin();
var keyboard = new Keyboard();
ronin.install();
ronin.start(window.location.hash);
</script>
</body>
</html>

15
sources/links/fonts.css Normal file
View File

@@ -0,0 +1,15 @@
/* Input Mono */
@font-face {
font-family: 'input_mono_regular';
src: url('../media/fonts/input_mono_regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'input_mono_medium';
src: url('../media/fonts/input_mono_medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

42
sources/links/main.css Normal file
View File

@@ -0,0 +1,42 @@
body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace;}
*:focus {outline: none; }
#ronin { background:#ddd; width:100%; height:100%; overflow:hidden; background-image:url(../media/graphics/grid.svg); background-position: 0px 0px;}
#frame { width:50vw; height:50vh; overflow:hidden; position:fixed; left: calc(40vw + 15px); top:100px; background-image:url(../media/graphics/void.svg); background-position:0px 0px; }
#frame > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
@keyframes blink { 0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;} }
#frame > .layer.blink { animation: blink 0.1s; animation-iteration-count: infinite; }
#overlay { position:absolute; z-index:1000;}
#frame { cursor:none;}
#terminal { position: fixed;bottom: 0px;left: 0px;background: #111;width: 100vw;height: 60px;overflow: hidden; color:#999;}
#terminal #hint, #terminal #widget, #terminal input, #terminal #logs { display: block;position: fixed;bottom: 0px;line-height: 20px; width:calc(100vw - 40px); background:none; color:#777; font-size:11px; padding:5px 20px; white-space: pre; }
#terminal input { z-index: 9000; color:#999; font-family: 'input_mono_regular'}
#terminal input:focus { color:#fff; }
#terminal #logs { position:fixed; bottom:30px; border-bottom:1px solid #222; }
#terminal #logs .module { font-family: 'input_mono_regular'; color:#ccc; }
#terminal #widget { text-align: right; bottom:30px}
#terminal #widget .mouse { color:white; }
span.autocomplete { background:white; color:black; }
span.module { display: inline-block; color:#999; }
span.method { display: inline-block; color:#999; }
span.method .name { color:#fff; }
span.method .options { color:#555; }
span.params { display: inline-block; color:#999; }
span.setting { display: inline-block; color:#fff; }
span.setting .value { color:#999; }
span.mode { color:#999; }
span.mode .name { text-decoration: underline; color:white; }
#modal { position: fixed; bottom:80px; right:20px; height:100px; border-radius:3px; overflow:hidden; display: block}
#modal.text { display: block;background: #000;width: calc(100vw - 100px);height: calc(100vh - 160px);padding: 30px;font-size: 12px;white-space: pre;column-count: 3;line-height: 20px;color:white}
#modal.image img { display: block; max-height: 100%; width:inherit;}
#modal.hidden { display: none }

1
sources/links/reset.css Normal file
View File

@@ -0,0 +1 @@
* { margin:0;padding:0;border:0;outline:0;text-decoration:none;font-weight:inherit;font-style:inherit;color:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;list-style:none;border-collapse:collapse;border-spacing:0; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

BIN
sources/media/fonts/input_mono_medium.ttf Normal file
View File

Binary file not shown.

BIN
sources/media/fonts/input_mono_regular.ttf Normal file
View File

Binary file not shown.

6
sources/media/graphics/grid.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="40px" height="40px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1">
<!-- <line x1="15" y1="13" x2="15" y2="17" stroke="#ccc"></line> -->
<line x1="0" y1="20" x2="40" y2="20" stroke="#ccc" stroke-dasharray="1,3" stroke-width="1"></line>
<line x1="20" y1="0" x2="20" y2="40" stroke="#ccc" stroke-dasharray="1,3" stroke-width="1"></line>
<circle cx="20" cy="20" r="1.5" fill="#ccc"></circle>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 436 B

3
sources/media/graphics/void.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="5" height="5" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1">
<circle cx="2.5" cy="2.5" r="0.5" fill="#fff"></circle>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 161 B

149
sources/scripts/core/command.js Normal file
View File

@@ -0,0 +1,149 @@
function Command(content)
{
this.content = content;
this.parts = content.split(" ");
this.module_name = null;
this.method_name = null;
this.setting_name = null;
this.module = null;
this.setthing = null;
this.module = function()
{
var module_name = null;
if(this.parts[0].indexOf(".") > -1){
module_name = this.parts[0].split(" ")[0].split(".")[0]
}
else if(this.parts[0].indexOf(":") > -1){
module_name = this.parts[0].split(" ")[0].split(":")[0]
}
else{
module_name = this.parts[0].split(" ")[0];
}
return ronin.modules[module_name] ? ronin.modules[module_name] : null;
}
this.method = function()
{
var module = this.module();
if(!module || content.indexOf(".") < 0){ return null; }
var method_name = content.indexOf(".") > -1 ? content.split(" ")[0].split(".")[1] : "default";
return module.methods[method_name] ? module.methods[method_name] : null;
}
this.setting = function()
{
var content = this.content;
var module = this.module();
if(!module){ return null; }
if(content.indexOf(":") < 0){ return null; }
var setting_name = this.parts[0].split(":")[1];
return module.settings[setting_name] ? setting_name : null;
}
this.values = function()
{
var a = this.content.split(" ");
a.shift();
return a.join(" ").trim();
}
this.inject_position = function(injection)
{
console.log("> "+injection);
console.log("- "+content);
}
// Parser
this.any = function()
{
return new Any(this.content);
}
this.rect = function()
{
for (i = 0; i < this.parts.length; i++) {
if(this.parts[i].indexOf("x") >= 0 && this.parts[i].indexOf("/") < 0){ return new Rect(this.parts[i]); }
}
return null;
}
this.position = function()
{
for (i = 0; i < this.parts.length; i++) {
if(this.parts[i].indexOf(",") >= 0){ return new Position(this.parts[i]); }
}
return null;
}
this.color = function()
{
for (i = 0; i < this.parts.length; i++) {
if(this.parts[i].indexOf("#") >= 0){ return new Color(this.parts[i]); }
}
return null;
}
this.filepath = function()
{
for (i = 0; i < this.parts.length; i++) {
if(this.parts[i].indexOf("/") >= 0){ return new Filepath(this.parts[i]); }
}
return null;
}
this.value = function()
{
for (i = 0; i < this.parts.length; i++) {
var test = /[^$\-\d]/.test(this.parts[i]);
if(!test && this.parts[i] !== ""){ return new Value(this.parts[i]); }
}
return null;
}
this.range = function()
{
for (i = 0; i < this.parts.length; i++) {
if(this.parts[i].indexOf("..") >= 0){ return new Range(this.parts[i]); }
}
return null;
}
this.option = function(name)
{
for (i = 0; i < this.parts.length; i++) {
if(this.parts[i].indexOf(name+"=") >= 0){ return new Option(this.parts[i]); }
}
return null;
}
this.bang = function()
{
for (i = 0; i < this.parts.length; i++) {
if(this.parts[i].indexOf("!") >= 0){ return new Bang(); }
}
return null;
}
this.angle = function()
{
for (i = 0; i < this.parts.length; i++) {
if(this.parts[i].indexOf("'") >= 0){ return new Angle(this.parts[i]); }
}
return null;
}
this.text = function()
{
var content_str = this.parts.join(" ");
if(content_str.indexOf("\"") < 0){ return null; }
return content_str.split("\"")[1];
}
}

118
sources/scripts/core/keyboard.js Normal file
View File

@@ -0,0 +1,118 @@
function Keyboard()
{
this.shift_held = false;
this.alt_held = false;
document.onkeyup = function myFunction(){ keyboard.listen_onkeyup(event); };
document.onkeydown = function myFunction(){ keyboard.listen_onkeydown(event); };
this.listen_onkeydown = function(event)
{
if(event.shiftKey == true){
this.shift_held = true;
}
if(event.altKey == true){
this.alt_held = true;
}
// Autocomplete with tab
if(event.keyCode === 9){
event.preventDefault();
var ac = ronin.terminal.find_autocomplete();
if(ac){
ronin.terminal.input.value += ac;
}
}
ronin.cursor.update(event);
ronin.widget.update();
ronin.terminal.update();
}
this.listen_onkeyup = function(event)
{
this.shift_held = false;
this.alt_held = false;
event.preventDefault();
switch (event.key || event.keyCode || event.which) {
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 "]": ronin.brush.size_up(); break;
case "[": ronin.brush.size_down(); break;
case ":": this.key_colon(); break;
case "Escape": this.key_escape(); break;
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: this.key_arrow_up(); break;
case 40: this.key_arrow_down(); break;
case 8: this.key_delete(); break;
}
console.log(event)
// Passive
ronin.widget.update();
ronin.terminal.update();
ronin.cursor.update();
};
this.key_tab = function()
{
}
this.key_enter = function()
{
ronin.terminal.run();
}
this.key_space = function()
{
}
this.key_arrow_up = function()
{
ronin.frame.select_layer(ronin.frame.layer_above());
}
this.key_arrow_down = function()
{
ronin.frame.select_layer(ronin.frame.layer_below());
}
this.key_arrow_left = function()
{
if(ronin.module){ ronin.module.key_arrow_left(); }
}
this.key_arrow_right = function()
{
if(ronin.module){ ronin.module.key_arrow_right(); }
}
this.key_colon = function()
{
return false;
}
this.key_escape = function()
{
ronin.overlay.key_escape();
for(var key in ronin.modules){
ronin.modules[key].key_escape();
}
}
this.key_delete = function()
{
if(ronin.module){ ronin.module.key_delete(); }
}
}

174
sources/scripts/core/ronin.js Normal file
View File

@@ -0,0 +1,174 @@
function Ronin()
{
this.modules = {};
this.element = document.getElementById('ronin');
this.default = new Default("`");
this.frame = new Frame("@");
this.path = new Path("+");
this.type = new Type("&");
this.brush = new Brush("-");
this.source = new Source("$");
this.eye = new Eye("*");
this.render = new Render("%");
this.magnet = new Magnet("^");
this.overlay = new Overlay("|");
this.terminal = new Terminal(">");
this.cursor = new Cursor(".");
this.widget = new Widget("?");
this.modules[this.frame.name] = this.frame;
this.modules[this.type.name] = this.type;
this.modules[this.path.name] = this.path;
this.modules[this.brush.name] = this.brush;
this.modules[this.source.name] = this.source;
this.modules[this.render.name] = this.render;
this.modules[this.eye.name] = this.eye;
this.modules[this.magnet.name] = this.magnet;
this.modules[this.cursor.name] = this.cursor;
this.modules[this.terminal.name] = this.terminal;
// document.addEventListener('contextmenu', function(ev){ ev.preventDefault(); return false;}, false);
window.addEventListener('resize', function(){ ronin.on_resize(); }, true);
this.install = function()
{
ronin.frame.element = document.getElementById('frame');
ronin.cursor.element = document.getElementById('cursor');
ronin.terminal.element = document.getElementById('terminal');
for(var key in this.modules){
this.modules[key].install();
}
this.widget.install();
ronin.cursor.mode = ronin.brush;
this.on_drag();
}
this.start = function(hash = null)
{
var target_file = hash.length > 2 ? hash.substr(1,hash.length-1)+".rin" : "default.rin"
ronin.terminal.update();
ronin.widget.update();
ronin.terminal.input.focus();
ronin.load(target_file);
}
this.hint = function(method)
{
var html = "";
if(this.terminal.input.value){
for(id in ronin.modules){
if(this.terminal.input.value != ronin.modules[id].name.substr(0,this.terminal.input.value.length)){ continue; }
html += "<span class='module'>"+ronin.modules[id].name+"</span> ";
}
}
else{
for(id in ronin.modules){
html += "<span class='module'>"+ronin.modules[id].name+"</span> ";
}
}
return html;
}
this.cursors = [];
this.position_in_canvas = function(e)
{
// x -= parseInt(this.frame.element.style.left) - parseInt(this.frame.element.style.width/2);
var x = e.clientX - parseInt(this.frame.element.style.left);
var y = e.clientY - parseInt(this.frame.element.style.top);
return new Position(x,y);
}
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()
{
ronin.frame.center();
}
this.on_drag = function()
{
// Position Background
var bg_offset_parts = ronin.element.style.backgroundPosition == "" ? [0,0] : ronin.element.style.backgroundPosition.split(" ");
var x = parseInt(ronin.frame.element.style.left)/4;
var y = parseInt(ronin.frame.element.style.top)/4;
ronin.element.style.backgroundPosition = x+"px "+y+"px";
}
this.filename = "default.rin";
this.load = function readTextFile(name)
{
this.filename = name;
var file = "presets/"+name+'?'+new Date().getTime();
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
ronin.terminal.log(new Log(null,"Loaded file "+name));
ronin.terminal.run_multi(allText.split("\n").join(";"));
}
}
}
rawFile.send(null);
ronin.widget.update();
ronin.terminal.update();
}
// Drag file on canvas
this.element.addEventListener('dragover',function(e)
{
e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'copy';
});
this.element.addEventListener('drop', function(e)
{
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
var file = files[0];
if (!file.type.match(/image.*/)) { console.log("Not image"); return false; }
var reader = new FileReader();
reader.onload = function(event)
{
base_image = new Image();
base_image.src = event.target.result;
var width = base_image.naturalWidth;
var height = base_image.naturalHeight;
// Display as large as the canvas
var ratio = ronin.frame.size.width/width;
ronin.frame.active_layer.context().drawImage(base_image, 0,0,width * ratio,height * ratio);
}
reader.readAsDataURL(file);
});
}

21
sources/scripts/filters/balance.js Normal file
View File

@@ -0,0 +1,21 @@
function Filter_Balance()
{
Filter.call(this);
this.parameters = [Color];
this.render = function(params)
{
var color = params.color() ? params.color().floats() : new Color("#999999").floats();
var originalData = ronin.frame.context().getImageData(0, 0, ronin.frame.size.width*2, ronin.frame.size.height*2);
var data = originalData.data;
for(var i = 0; i < data.length; i += 4) {
data[i] = data[i] * (color.r + 0.5);
data[i + 1] = data[i + 1] * (color.g + 0.5);
data[i + 2] = data[i + 2] * (color.b + 0.5);
}
ronin.frame.context().putImageData(originalData, 0, 0);
}
}

64
sources/scripts/filters/chromatic.js Normal file
View File

@@ -0,0 +1,64 @@
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.frame.size.width,ronin.frame.size.height);
var value = cmd.value() ? cmd.value().float : 5;
this.draw(this.context(),value,position);
}
this.preview = function(cmd)
{
if(cmd.position()){
ronin.overlay.draw(cmd.position());
}
}
this.draw = function(context = this.context(), value, position)
{
var w = ronin.frame.size.width;
var h = ronin.frame.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.frame.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.frame.active_layer.clear();
context.putImageData(imageData, 0, 0);
}
}

23
sources/scripts/filters/contrast.js Normal file
View File

@@ -0,0 +1,23 @@
function Filter_Contrast()
{
Filter.call(this);
this.parameters = [Value];
this.render = function(params)
{
var color = params.color() ? params.color().floats() : new Color("#999999").floats();
var originalData = ronin.frame.context().getImageData(0, 0, ronin.frame.size.width*2, ronin.frame.size.height*2);
var data = originalData.data;
for(var i = 0; i < data.length; i += 4) {
var average = parseFloat(data[i] + data[i+1] + data[i+2])/3;
var distance = 50;
data[i] = data[i] + distance;
data[i + 1] = data[i+1] + distance;
data[i + 2] = data[i+2] + distance;
}
ronin.frame.context().putImageData(originalData, 0, 0);
}
}

93
sources/scripts/filters/filter.js Normal file
View File

@@ -0,0 +1,93 @@
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.get_neighbors = function(pixels,x,y)
{
return [
this.get_color(pixels,x-1,y-1),this.get_color(pixels,x,y-1),this.get_color(pixels,x+1,y-1),
this.get_color(pixels,x-1,y),this.get_color(pixels,x,y),this.get_color(pixels,x+1,y),
this.get_color(pixels,x-1,y+1),this.get_color(pixels,x,y+1),this.get_color(pixels,x+1,y+1),
];
}
this.get_neighbors_average = function(pixels,x,y,weight_map = [1,1,1,1,1,1,1,1,1])
{
var n = this.get_neighbors(pixels,x,y);
var r = 0;
var g = 0;
var b = 0;
for (var i = 0; i < n.length; i++){
r += n[i].r * weight_map[i];
g += n[i].g * weight_map[i];
b += n[i].b * weight_map[i];
}
return {r:r/n.length,g:g/n.length,b:b/n.length}
}
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.frame.context();
}
this.pixels = function()
{
return ronin.frame.context().getImageData(0,0,ronin.frame.size.width * 2,ronin.frame.size.height * 2);
}
this.hint = function()
{
var html = "";
for(id in this.parameters){
html += this.parameters[id]+" ";
}
return html;
}
}

22
sources/scripts/filters/grey.js Normal file
View File

@@ -0,0 +1,22 @@
function Filter_Grey()
{
Filter.call(this);
this.parameters = [Color];
this.render = function(params)
{
var color = params.color() ? params.color().floats() : new Color("#36ba0e").floats();
var originalData = ronin.frame.context().getImageData(0, 0, ronin.frame.size.width*2, ronin.frame.size.height*2);
var data = originalData.data;
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 = color.r*r + color.g*g + color.b*b;
data[i] = data[i+1] = data[i+2] = v
}
ronin.frame.context().putImageData(originalData, 0, 0);
}
}

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

@@ -0,0 +1,27 @@
function Filter_Invert()
{
Filter.call(this);
this.parameters = [];
this.render = function(cmd)
{
var imageObj = new Image();
imageObj.src = ronin.frame.active_layer.element.toDataURL('image/png');
var w = ronin.frame.size.width;
var h = ronin.frame.size.height;
var context = ronin.frame.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.frame.active_layer.clear();
context.putImageData(originalData, 0, 0);
}
}

22
sources/scripts/filters/saturate.js Normal file
View File

@@ -0,0 +1,22 @@
function Filter_Saturate()
{
Filter.call(this);
this.parameters = [Color];
this.render = function(params)
{
var color = params.color() ? params.color().floats() : new Color("#999999").floats();
var originalData = ronin.frame.context().getImageData(0, 0, ronin.frame.size.width*2, ronin.frame.size.height*2);
var data = originalData.data;
for(var i = 0; i < data.length; i += 4) {
var average = parseFloat(data[i] + data[i+1] + data[i+2])/3;
data[i] = (average+(data[i]*color.r))/2;
data[i + 1] = (average+(data[i+1]*color.g))/2;
data[i + 2] = (average+(data[i+2]*color.b))/2;
}
ronin.frame.context().putImageData(originalData, 0, 0);
}
}

57
sources/scripts/filters/sharpen.js Normal file
View File

@@ -0,0 +1,57 @@
function Filter_Sharpen()
{
Filter.call(this);
this.parameters = [Value];
this.render = function(cmd)
{
var imageObj = new Image();
imageObj.src = ronin.frame.active_layer.element.toDataURL('image/png');
var w = ronin.frame.size.width;
var h = ronin.frame.size.height;
var context = ronin.frame.context();
var originalData = context.getImageData(0, 0, w*2, h*2);
var data = originalData.data;
var newImage = context.getImageData(0, 0, w*2, h*2);
var strenght = cmd.value() ? cmd.value().float : 1;
var ver = -1;
var dia = 1;
var cen = 8;
var weight_map = [
dia * strenght, ver * strenght, dia * strenght,
ver * strenght, cen * strenght, ver * strenght,
dia * strenght, ver * strenght, dia * strenght
];
for(var i = 0; i < data.length; i += 4) {
var p = i / 4;
var x = (p % originalData.width);
var y = parseInt(p/originalData.width);
var average = this.get_neighbors_average(originalData,x,y,weight_map);
newImage.data[i] = parseInt(average.r);
newImage.data[i+1] = parseInt(average.g);
newImage.data[i+2] = parseInt(average.b);
}
ronin.frame.active_layer.clear();
context.putImageData(newImage, 0, 0);
}
this.preview = function(cmd)
{
}
this.draw = function(context = this.context(), value, position)
{
}
}

83
sources/scripts/filters/stencil.js Normal file
View File

@@ -0,0 +1,83 @@
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 : "#000000";
this.draw(ronin.frame.context(),angle,color);
if(ronin.render.layer){ ronin.render.layer.remove(this); }
return 1, "ok";
}
this.preview = function(cmd)
{
var angle = cmd.angle() ? cmd.angle().degrees : 20;
var color = cmd.color() ? cmd.color().hex : "#000000";
ronin.render.get_layer().clear();
this.draw(ronin.render.layer.context(),angle,color);
}
this.draw = function(context = this.context(), angle, color)
{
var w = ronin.frame.size.width;
var h = ronin.frame.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(angle+"'",(w*0.4)+10,10);
context.font = "5px Arial";
context.fillStyle = color;
context.fillText(angle+"'",(-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();
}
}

138
sources/scripts/modules/brush.js Normal file
View File

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

146
sources/scripts/modules/brush.pointer.js Normal file
View File

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

301
sources/scripts/modules/cursor.js Normal file
View File

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

42
sources/scripts/modules/default.js Normal file
View File

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

32
sources/scripts/modules/eye.js Normal file
View File

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

205
sources/scripts/modules/frame.js Normal file
View File

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

187
sources/scripts/modules/layer.js Normal file
View File

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

99
sources/scripts/modules/magnet.js Normal file
View File

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

167
sources/scripts/modules/module.js Normal file
View File

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

221
sources/scripts/modules/overlay.js Normal file
View File

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

149
sources/scripts/modules/path.js Normal file
View File

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

37
sources/scripts/modules/render.js Normal file
View File

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

147
sources/scripts/modules/source.js Normal file
View File

@@ -0,0 +1,147 @@
function Source(rune)
{
Module.call(this,rune);
this.modal_element = null;
this.add_setting(new Setting("format","png"));
this.add_setting(new Setting("quality","1"));
this.add_method(new Method("save",["name","rect","format"]));
this.add_method(new Method("load",["path","position","rect"]));
this.add_method(new Method("help"));
this.install = function()
{
this.modal_element = document.createElement("modal");
this.modal_element.id = "modal";
this.modal_element.setAttribute("class","hidden");
ronin.element.appendChild(this.modal_element);
}
this.load = function(params,preview = false) // source.load /01.jpg 0,0 100x100
{
if(!params.filepath()){ return 0, "Path?"; }
if(!params.rect()){ return 0,"Rect?"; }
var position = params.position() ? params.position() : new Position("0,0");
var rect = params.rect() ? params.rect() : new Rect("50,50");
ronin.overlay.draw(position,rect);
if(preview){ return; }
if(this.is_locked){ console.log("Locked!"); return 0,"The source module is locked."; }
this.lock();
base_image = new Image();
base_image.src = "../assets/"+params.filepath().path;
base_image.src += '?'+new Date().getTime();
base_image.crossOrigin = "Anonymous";
base_image.onload = function(){
var width = base_image.naturalWidth;
var height = base_image.naturalHeight;
if(params.rect()){
width = params.rect().width;
height = params.rect().height;
position.normalize(params.rect());
}
// Scale with only 1 unit
width = isNaN(width) && height > 0 ? (height*base_image.naturalWidth)/base_image.naturalHeight : width;
height = isNaN(height) && width > 0 ? (width*base_image.naturalHeight)/base_image.naturalWidth : height;
ronin.frame.active_layer.context().drawImage(base_image, position.x, position.y, width, height);
ronin.overlay.clear();
ronin.source.unlock();
}
return 1,"Loaded "+params.filepath().path+" at "+position.toString();
}
this.save = function(params,preview = false)
{
if(preview){ return; }
if(!this.layer){ this.create_layer(); }
var d = null;
this.modal();
if(this.settings["format"].value == "jpg"){
this.modal("image","<img src='"+this.merge().element.toDataURL('image/jpeg',this.settings["quality"].to_f())+"' />");
}
else{
this.modal("image","<img src='"+this.merge().element.toDataURL('image/png')+"'/>");
}
/*
if(params.setting("format") && params.setting("format").value == "svg"){
ronin.terminal.log(new Log(this,ronin.path.create_svg(),"image"));
}
else if(params.setting("format") && params.setting("format").value == "rin"){
var w = window.open('about:blank','source');
var html = "";
for (i = 0; i < ronin.terminal.history.length; i++) { html += ronin.terminal.history[i]+";<br />"; }
w.document.write("<title>Source</title><pre>"+html+"</pre>");
}
else
*/
this.layer.remove(this);
return 1,"Rendered the "+this.settings.format+" image, "+this.settings.quality+"."
}
this.help = function(params,preview = false)
{
if(preview){ return; }
html = "";
for(module_id in ronin.modules){
html += ronin.modules[module_id]+"\n";
for(mode_id in ronin.modules[module_id].modes){
html += " "+ronin.modules[module_id].modes[mode_id]+"\n";
}
for(setting_id in ronin.modules[module_id].settings){
html += " "+ronin.modules[module_id].settings[setting_id]+"\n";
}
for(method_id in ronin.modules[module_id].methods){
html += " "+ronin.modules[module_id].methods[method_id]+"\n";
}
}
this.modal("text",html);
}
this.modal = function(type,content)
{
this.modal_element.setAttribute("class",type);
this.modal_element.innerHTML = content;
}
this.merge = function()
{
var a = [];
for(layer_name in ronin.frame.layers){
if(ronin.frame.layers[layer_name].manager){ continue; }
a.push(ronin.frame.layers[layer_name]);
}
for (i = 0; i < a.length; i++) {
this.layer.context().drawImage(a[i].context().canvas,0,0,ronin.frame.size.width,ronin.frame.size.height);
}
return this.layer;
}
this.key_escape = function()
{
if(this.layer){ this.layer.remove(this); }
this.coordinates = [];
this.last_pos = null;
ronin.terminal.input.value = "";
this.modal_element.innerHTML = "";
this.modal_element.setAttribute("class","hidden");
}
}

135
sources/scripts/modules/terminal.js Normal file
View File

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

21
sources/scripts/modules/terminal.widget.js Normal file
View File

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

62
sources/scripts/modules/type.js Normal file
View File

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

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

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

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

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

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

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

48
sources/scripts/units/color.js Normal file
View File

@@ -0,0 +1,48 @@
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.floats = function()
{
var rgb = this.rgb();
return { r:rgb.r/255, g:rgb.g/255, b:rgb.b/255 }
}
this.toString = function()
{
return this.hex;
}
this.rgb_to_hex = function(rgb)
{
return "#"+parseInt(rgb.r,10).toString(16)+parseInt(rgb.g,10).toString(16)+parseInt(rgb.b,10).toString(16);
}
this.brightness = function()
{
return this.rgb() ? (this.rgb().r + this.rgb().g + this.rgb().b)/3 : 0;
}
this.style = function()
{
return this.brightness() > 150 ? "bright" : "dark";
}
}

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

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

37
sources/scripts/units/method.js Normal file
View File

@@ -0,0 +1,37 @@
function Method(name,params,options = null)
{
Unit.call(this);
this.host = null;
this.name = name;
this.params = params;
this.options = options;
this.example = "";
this.toString = function()
{
var params_str = "";
for(param in this.params){
params_str += this.params[param]+","
}
params_str = params_str.substr(0,params_str.length-1);
var options_str = "";
for(option in this.options){
options_str += this.options[option]+","
}
options_str = options_str.substr(0,options_str.length-1);
return "<span class='method'>.<span class='name'>"+this.name+"</span> "+params_str+(this.options ? ' <span class=\'options\'>['+options_str+']</span>' : '')+"</span>";
}
this.preview = function(cmd)
{
return this.host[this.name] ? this.host[this.name](cmd,true) : "";
}
this.run = function(cmd)
{
return this.host[this.name] ? ronin.terminal.log(new Log(this.host,this.host[this.name](cmd,false))) : null;
}
}

13
sources/scripts/units/mode.js Normal file
View File

@@ -0,0 +1,13 @@
function Mode(name,key = null)
{
Unit.call(this);
this.host = null;
this.name = name;
this.key = key;
this.toString = function()
{
return "<span class='mode'><span class='name'>~"+this.name+"</span>"+(this.key ? ' <span class="key">'+this.key+'</span>' : '')+"</span>"
}
}

7
sources/scripts/units/option.js Normal file
View File

@@ -0,0 +1,7 @@
function Option(name)
{
Unit.call(this);
this.name = name.split("=")[0];
this.value = name.split("=")[1];
}

56
sources/scripts/units/position.js Normal file
View File

@@ -0,0 +1,56 @@
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(position_str.split(",")[0]);
this.y = y != null ? y : parseFloat(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.offset = function(position = new Position(0,0))
{
return new Position(this.x - position.x,this.y - position.y);
}
this.normalize = function(rect)
{
if(this.x == null){
this.x = ronin.canvas.element.width - rect.width - Math.abs(this.x);
}
if(this.y == null){
this.y = ronin.canvas.element.height - rect.height - Math.abs(this.y);
}
}
this.toString = function()
{
return (isNaN(this.x) ? 0 : this.x)+","+(isNaN(this.y) ? 0 : this.y);
}
this.is_outside = function()
{
if(this.x < 0){ return true; }
if(this.y < 0){ return true; }
if(this.x > ronin.frame.element.width/2){ return true; }
if(this.y > ronin.frame.element.height/2){ return true; }
return false;
}
}

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

@@ -0,0 +1,15 @@
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.toString = function()
{
return this.from+".."+this.to;
}
}

16
sources/scripts/units/rect.js Normal file
View File

@@ -0,0 +1,16 @@
function Rect(rect_str)
{
Unit.call(this);
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.example = "200x300";
this.toString = function()
{
return (isNaN(this.width) ? 0 : this.width)+"x"+(isNaN(this.height) ? 0 : this.height);
}
}

39
sources/scripts/units/setting.js Normal file
View File

@@ -0,0 +1,39 @@
function Setting(name,value)
{
Unit.call(this);
this.host = null;
this.name = name;
this.value = value;
this.toString = function()
{
return "?";
}
this.toString = function()
{
return "<span class='setting'>:"+this.name+(this.value ? ' <span class="value">'+this.value+'</span>' : '')+"</span>"
}
this.update = function(value)
{
this.value = value;
}
this.to_f = function()
{
return parseFloat(this.value);
}
this.to_rect = function()
{
return new Rect(this.value);
}
this.to_pos = function()
{
return new Position(this.value);
}
}

5
sources/scripts/units/unit.js Normal file
View File

@@ -0,0 +1,5 @@
function Unit()
{
this.example = "unknown";
this.name = this.constructor.name;
}

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

@@ -0,0 +1,14 @@
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.toString = function()
{
return this.value;
}
}