Saving RIN file

This commit is contained in:
Devine Lu Linvega 2017-03-11 15:00:52 -07:00
parent 52a044b78e
commit 4040964505
14 changed files with 103 additions and 269 deletions

View File

@ -15,7 +15,6 @@
<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/stroke.js"></script>
<script type="text/javascript" src="scripts/modules/vector.js"></script>
<script type="text/javascript" src="scripts/modules/overlay.js"></script>
<script type="text/javascript" src="scripts/modules/brush.js"></script>
@ -23,7 +22,6 @@
<script type="text/javascript" src="scripts/modules/file.load.js"></script>
<script type="text/javascript" src="scripts/modules/file.save.js"></script>
<script type="text/javascript" src="scripts/modules/help.js"></script>
<script type="text/javascript" src="scripts/modules/history.js"></script>
<script type="text/javascript" src="scripts/modules/eraser.js"></script>
<script type="text/javascript" src="scripts/modules/surface.js"></script>
<script type="text/javascript" src="scripts/modules/surface.layer.js"></script>

View File

@ -19,3 +19,4 @@ canvas:hover { cursor: none;}
#terminal logs { display: block;position: absolute;bottom:20px;width:100vw;color:white}
#terminal logs log { display: block; font-size:10px; line-height:25px; padding:0px 5px; color:#666;}
#terminal logs log .rune { color:white; }
#terminal menu { display: inline-block;position: absolute;bottom: 0px;right: 0px;padding: 0px 5px;font-size: 10px;line-height: 20px;color:white }

View File

@ -1,41 +0,0 @@
function Hint(element)
{
Module.call(this);
this.element = element;
this.update = function()
{
var module = ronin.module;
var cmd = commander.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;
}
}

View File

@ -1,111 +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;
this.queue = [];
this.query = function(input_str)
{
if(input_str.indexOf(";") > 0){
this.queue = input_str.split(";");
}
else{
this.queue = [];
this.queue.push(input_str)
}
this.run();
this.hide();
}
this.run = function()
{
if(!commander.queue[0]){ console.log("Finished queue"); return; }
active(commander.queue[0].trim());
commander.queue.shift();
setTimeout(function(){ commander.run(); }, 100);
}
function active(content)
{
console.info(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).trim().split(" "));
ronin.module = null;
if(ronin.modules[key]){
ronin.modules[key].passive(cmd);
ronin.module = ronin.modules[key];
ronin.cursor.set_mode(ronin.module);
}
else{
ronin.cursor.set_mode(ronin.brush);
}
this.hint.update();
}
this.cmd = function()
{
var content = this.element_input.value.trim();
var key = content[0];
var cmd = new Command(content.substring(1).trim().split(" "));
return 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];
}
}

View File

@ -37,8 +37,9 @@ ronin.terminal.query("@ layer=Main");
ronin.terminal.query("- 0,0");
ronin.terminal.query("- 1,1");
ronin.terminal.query("- 2,2");
ronin.terminal.query("- #ff00ff");
ronin.terminal.query("- #ff0000");
ronin.terminal.query("~ Ready.");
ronin.terminal.input_element.focus();
ronin.terminal.update_hint();
ronin.surface.update_widget();

View File

@ -38,8 +38,8 @@ function Keyboard()
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;
case 38: this.key_arrow_up(); break;
case 40: this.key_arrow_down(); break;
case 8: this.key_delete(); break;
}
@ -64,18 +64,22 @@ function Keyboard()
this.key_arrow_up = function()
{
if(ronin.module){ ronin.module.key_arrow_up(); }
}
this.key_arrow_down = function()
{
if(ronin.module){ ronin.module.key_arrow_down(); }
}
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()

View File

@ -6,12 +6,10 @@ function Ronin()
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.eye = new Eye("*");
this.render = new Render("%");
this.stroke = new Stroke("_");
this.vector = new Vector("+");
this.help = new Help("?");
this.typo = new Typographe("&");
@ -21,13 +19,11 @@ function Ronin()
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.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.modules[this.terminal.rune] = this.terminal;

View File

@ -17,29 +17,48 @@ function Eye(rune)
return "Eye";
}
this.color_picker = function(position)
// TODO: If a rect is given, return the average color
this.color_picker = function(position,rect = null)
{
var imgData = ronin.surface.context().getImageData(position.x, position.y, 1, 1).data;
var imgData = ronin.surface.context().getImageData(position.x*2, position.y*2, 1, 1).data;
var c = new Color();
commander.show();
commander.element_input.focus();
commander.element_input.value = "> "+(c.rgb_to_hex(imgData));
ronin.terminal.input_element.value = "* "+(c.rgb_to_hex(imgData));
ronin.terminal.update_hint();
}
// Cursor
this.live_draw_from = null;
this.mouse_down = function(position)
{
this.click = true;
this.live_draw_from = position;
ronin.overlay.draw(position);
this.color_picker(position);
}
this.mouse_move = function(position)
{
this.color_picker(position);
if(!this.click){ return; }
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(this.live_draw_from,rect);
this.color_picker(position,rect);
}
this.mouse_up = function(position)
{
this.color_picker(position);
this.click = null;
var rect = new Rect();
rect.width = position.x - this.live_draw_from.x;
rect.height = position.y - this.live_draw_from.y;
this.color_picker(position,rect);
}
}

View File

@ -3,7 +3,7 @@ function FileSave(rune)
Module.call(this,rune);
this.parameters = [];
this.variables = {"format" : "[png/jpg/svg]"};
this.variables = {"format" : "[png/jpg/svg/rin]"};
this.docs = "Creates a new window with a image of the resulting canvas in the specified format.";
@ -21,6 +21,12 @@ function FileSave(rune)
else if(cmd.variable("format") && cmd.variable("format").value == "jpg"){
w.document.write("<title>Untitled</title><body><img src='"+this.merge().element.toDataURL('image/jpeg')+"' width='"+ronin.surface.size.width+"px' height='"+ronin.surface.size.height+"px'/></body>");
}
else if(cmd.variable("format") && cmd.variable("format").value == "rin"){
var w = window.open('about:blank','source');
var html = "";
for (i = 0; i < ronin.terminal.history.length; i++) { html += ronin.terminal.history[i]+";<br />"; }
w.document.write("<title>Source</title><pre>"+html+"</pre>");
}
else{
w.document.write("<title>Untitled</title><body><img src='"+this.merge().element.toDataURL('image/png')+"' width='"+ronin.surface.size.width+"px' height='"+ronin.surface.size.height+"px'/></body>");
}

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+" ";
}
}

View File

@ -102,4 +102,22 @@ function Module(rune)
this.key_delete = function()
{
}
this.key_arrow_up = function()
{
ronin.surface.layer_up();
}
this.key_arrow_down = function()
{
ronin.surface.layer_down();
}
this.key_arrow_left = function()
{
}
this.key_arrow_right = function()
{
}
}

View File

@ -62,10 +62,14 @@ function Overlay(rune)
{
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().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="round";
this.context().lineWidth = 1;

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();
}
}

View File

@ -6,6 +6,9 @@ function Terminal(rune)
this.input_element = document.createElement("input");
this.hint_element = document.createElement("hint");
this.logs_element = document.createElement("logs");
this.menu_element = document.createElement("menu");
this.history = [];
// Module
this.install = function(cmd)
@ -13,6 +16,7 @@ function Terminal(rune)
this.element.appendChild(this.input_element);
this.element.appendChild(this.hint_element);
this.element.appendChild(this.logs_element);
this.element.appendChild(this.menu_element);
this.hint_element.innerHTML = "_";
@ -26,7 +30,7 @@ function Terminal(rune)
this.passive = function(content)
{
var key = content[0];
var cmd = new Command(content.substring(1).trim().split(" "));
var cmd = this.cmd();
ronin.module = null;
this.hint_element.innerHTML = "";
@ -85,7 +89,9 @@ function Terminal(rune)
if(ronin.modules[key]){
ronin.modules[key].active(cmd);
ronin.history.add(content);
ronin.terminal.history.push(content);
ronin.terminal.history_index = ronin.terminal.history.length-1;
ronin.terminal.update_menu();
}
else{
ronin.terminal.log(new Log(ronin.terminal,"Unknown module: "+key));
@ -134,7 +140,10 @@ function Terminal(rune)
}
}
else{
var h = padding+" ";
var h = "";
for(module in ronin.modules){
h += module+" ";
}
}
this.hint_element.innerHTML = h;
@ -142,11 +151,33 @@ function Terminal(rune)
ronin.terminal.input_element.setAttribute("style","color:"+ronin.brush.color.hex);
}
this.update_menu = function()
{
this.menu_element.innerHTML = ronin.terminal.history.length;
}
this.key_escape = function()
{
this.input_element.value = "";
}
this.key_arrow_up = function()
{
this.history_index -= 1;
if(this.history_index < 0){ this.history_index = 0; }
ronin.terminal.input_element.value = "> "+ronin.terminal.history[this.history_index];
}
this.key_arrow_down = function()
{
this.history_index += 1;
if(this.history_index >= this.history.length){ this.history_index = this.history.length-1; }
ronin.terminal.input_element.value = "> "+ronin.terminal.history[this.history_index];
}
}
// Log