Various updates

links/main.css

@@ -11,7 +11,7 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
 #overlay { position:absolute; z-index:1000;}
 #frame { cursor:none;}
 
-#terminal { position: fixed; bottom:0px; left:0px; background:#000; width:100vw; height: 120px;overflow: hidden;}
+#terminal { position: fixed; bottom:0px; left:0px; background:#000; width:100vw; height: 125px;overflow: hidden;}
 #terminal input { display: block; position:absolute; bottom:0px; width:100vw; padding:0px 5px; font-size:10px; line-height: 20px; background:none; z-index:900; color:white;}
 #terminal hint { background:#000; position:absolute; bottom:0px; line-height: 20px; padding:0px 5px; width:100vw; color:#777; font-size:10px; white-space: pre;}
 #terminal hint b { font-family: "input_mono_regular"; color:#999; }
@@ -22,3 +22,6 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
 #terminal logs log.error .rune { color:red; }
 #terminal logs log.input { color:white; }
 #terminal menu { display: inline-block;position: absolute;bottom: 0px;right: 0px;padding: 0px 5px;font-size: 10px;line-height: 20px;color:white }
+
+#terminal.hide { height:25px; }
+#terminal.mini { height:120px; }

presets/template.cover.rin

@@ -0,0 +1,17 @@
+terminal.display hide ; 
+frame.resize 700x700 ; 
+layer.fill #ffcc00 ; 
+brush:color #000000 ; magnet.grid 10x10 4,4 ; 
+frame.select main ; 
+path:line_color black ; 
+path:line_width 20 ; 
+path:line_cap butt ; 
+path.stroke M200,400 a40,40 0 0,1 40,40 a-40,40 0 0,1 -40,40 l-40,0 a-40,-40 0 0,1 -40,-40 a40,-40 0 0,1 40,-40 l40,0 M280,490 l0,-90 l60,0 a20,20 0 0,1 20,20 a-20,20 0 0,1 -20,20 l-60,0 M390,400 l70,0 a20,20 0 0,1 20,20 a-20,20 0 0,1 -20,20 l-40,0 a-20,20 0 0,0 -20,20 l0,20 l90,0 M520,390 l0,30 a20,20 0 0,0 20,20 l60,0 M600,390 l0,100 ;
+path:line_color #ffcc00 ; 
+path:line_cap round ;
+path:line_width 1 ;
+path.stroke M200,400 a40,40 0 0,1 40,40 a-40,40 0 0,1 -40,40 l-40,0 a-40,-40 0 0,1 -40,-40 a40,-40 0 0,1 40,-40 l40,0 M280,490 l0,-90 l60,0 a20,20 0 0,1 20,20 a-20,20 0 0,1 -20,20 l-60,0 M390,400 l70,0 a20,20 0 0,1 20,20 a-20,20 0 0,1 -20,20 l-40,0 a-20,20 0 0,0 -20,20 l0,20 l90,0 M520,390 l0,30 a20,20 0 0,0 20,20 l60,0 M600,390 l0,100 ;
+type.write:size 20 ;
+type.write 110,540 "SUPERWORKER" ;
+type.write:size 20 ;
+type.write 110,560 "オフィス" ;

scripts/core/ronin.js

@@ -32,7 +32,7 @@ function Ronin()
   // this.modules[this.magnet.constructor.name]   = this.magnet;
 
   this.modules[this.cursor.constructor.name]   = this.cursor;
-  // this.modules[this.terminal.constructor.name] = this.terminal;
+  this.modules[this.terminal.constructor.name] = this.terminal;
 
   // 
 

scripts/filters/balance.js

@@ -9,7 +9,7 @@ function Filter_Balance()
     if(!cmd.color()){ return; }
     if(!cmd.color().rgb()){ return; }
 
-    this.draw(ronin.frame.active_layer.context(),cmd.color().rgb());
+    this.draw(ronin.frame.context(),cmd.color().rgb());
   }
 
   this.preview = function(cmd)
@@ -28,7 +28,7 @@ function Filter_Balance()
     var w = ronin.frame.settings["size"].width;
     var h = ronin.frame.settings["size"].height;
 
-    var originalData = ronin.frame.active_layer.context().getImageData(0, 0, w*2, h*2);
+    var originalData = ronin.frame.context().getImageData(0, 0, w*2, h*2);
     var data = originalData.data;
 
     var r = (color_rgb.r / 255) + 0.5;

scripts/filters/chromatic.js

@@ -32,7 +32,7 @@ function Filter_Chromatic()
     //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.active_layer.context();
+    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);

scripts/filters/filter.js

@@ -73,11 +73,11 @@ function Filter()
 
   this.context = function()
   {
-    return ronin.frame.active_layer.context();
+    return ronin.frame.context();
   }
   
   this.pixels = function()
   {
-    return ronin.frame.active_layer.context().getImageData(0,0,ronin.frame.settings["size"].width * 2,ronin.frame.settings["size"].height * 2);
+    return ronin.frame.context().getImageData(0,0,ronin.frame.settings["size"].width * 2,ronin.frame.settings["size"].height * 2);
   }
 }

scripts/filters/grey.js

@@ -7,10 +7,10 @@ function Filter_Grey()
   this.render = function(cmd)
   {
     if(cmd.color() && cmd.color().rgb()){
-      this.draw(ronin.frame.active_layer.context(),cmd.color().rgb());
+      this.draw(ronin.frame.context(),cmd.color().rgb());
     }
     else{
-      this.draw(ronin.frame.active_layer.context());
+      this.draw(ronin.frame.context());
     }
   }
 
@@ -32,7 +32,7 @@ function Filter_Grey()
     var w = ronin.frame.settings["size"].width;
     var h = ronin.frame.settings["size"].height;
 
-    var originalData = ronin.frame.active_layer.context().getImageData(0, 0, w*2, h*2);
+    var originalData = ronin.frame.context().getImageData(0, 0, w*2, h*2);
     var data = originalData.data;
 
     var _r = (color_rgb.r / 255);

scripts/filters/invert.js

@@ -10,7 +10,7 @@ function Filter_Invert()
 
     var w = ronin.frame.settings["size"].width;
     var h = ronin.frame.settings["size"].height;
-    var context = ronin.frame.active_layer.context();
+    var context = ronin.frame.context();
 
     var originalData = context.getImageData(0, 0, w*2, h*2);
     var data = originalData.data;

scripts/filters/sharpen.js

@@ -11,7 +11,7 @@ function Filter_Sharpen()
 
     var w = ronin.frame.settings["size"].width;
     var h = ronin.frame.settings["size"].height;
-    var context = ronin.frame.active_layer.context();
+    var context = ronin.frame.context();
 
     var originalData = context.getImageData(0, 0, w*2, h*2);
     var data = originalData.data;

scripts/filters/stencil.js

@@ -9,7 +9,7 @@ function Filter_Stencil()
     var color = cmd.color() ? cmd.color().hex : "#ffffff";
 
     ronin.render.layer.clear();
-    this.draw(ronin.frame.active_layer.context(),angle,color);
+    this.draw(ronin.frame.context(),angle,color);
   }
 
   this.preview = function(cmd)

scripts/modules/frame.js

@@ -11,6 +11,7 @@ function Frame(rune)
 
   this.add_method(new Method("resize",[new Rect().name]));
   this.add_method(new Method("crop",[new Position().name,new Rect().name]));
+  this.add_method(new Method("select",["text"]));
 
   this.widget_element = document.createElement("widget");
   
@@ -53,8 +54,10 @@ function Frame(rune)
     if(preview){ronin.overlay.draw_rect(params.position(),params.rect());}
   }
 
-  this.select = function(params)
+  this.select = function(params, preview = false)
   {
+    if(preview){ return; }
+
     var layer_name = params.content;
     if(!ronin.frame.layers[layer_name]){
       this.add_layer(new Layer(layer_name));
@@ -64,6 +67,11 @@ function Frame(rune)
     ronin.layer = this.layers[layer_name];
   }
 
+  this.context = function()
+  {
+    return this.active_layer.context();
+  }
+
   // Misc
 
   this.blink = function()

scripts/modules/layer.js

@@ -2,10 +2,12 @@ function Layer(name,manager = null)
 {
   Module.call(this,"#");
 
-  this.add_method(new Method("fill",["color","position","rect"],"Add position"));
+  this.add_method(new Method("translate",["position"]));
+  this.add_method(new Method("clear",[]));
   this.add_method(new Method("rotate",["position","angle"]));
-  this.add_method(new Method("resize",["position","rect"]));
   this.add_method(new Method("mirror",["position"]));
+  this.add_method(new Method("fill",["color","position","rect"],"Add position"));
+  
   this.add_method(new Method("rename",["text"]));
 
   this.name = name;
@@ -15,6 +17,17 @@ function Layer(name,manager = null)
   this.element.setAttribute("id","_"+name);
   this.element.setAttribute("class","layer");
 
+  this.translate = function(params,preview = false)
+  {
+    if(!params.position()){ return; }
+    if(preview){ 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();
+  }
+
   this.fill = function(params,preview = false)
   {
     if(preview){ return; }
@@ -40,6 +53,13 @@ function Layer(name,manager = null)
     ronin.terminal.log(new Log(this,"Renamed layer "+this.name+" to "+params.text())); 
   }
 
+  this.clear = function(params, preview = false)
+  {
+    if(preview){ return; }
+
+    this.context().clearRect(0, 0, this.element.width, this.element.height);
+  }
+
   this.resize = function(rect)
   {
     ronin.terminal.log(new Log(this,"Resize "+this.name+" to "+rect.render()));
@@ -54,11 +74,6 @@ function Layer(name,manager = null)
     this.context().scale(2,2);
   }
 
-  this.clear = function()
-  {
-    this.context().clearRect(0, 0, this.element.width, this.element.height);
-  }
-
   this.remove = function(manager)
   {
     ronin.terminal.log(new Log(this,"Removing layer "+this.name));
@@ -77,6 +92,11 @@ function Layer(name,manager = null)
     return this.element.toDataURL('image/png');
   }
 
+  this.data = function()
+  {
+    return this.context().getImageData(0, 0, ronin.frame.settings["size"].width * 2, ronin.frame.settings["size"].height * 2);
+  }
+
   //
 
   this.widget = function()
@@ -92,7 +112,7 @@ function Layer(name,manager = null)
 
   this.mouse_pointer = function(position)
   {
-    return ronin.cursor.draw_pointer_drag(position);
+    return ronin.cursor.draw_pointer_arrow(position);
   }
 
   this.mouse_mode = function()
@@ -100,35 +120,91 @@ function Layer(name,manager = null)
     return "Move";
   }
 
-  this.move_from = null;
-
   this.mouse_down = function(position)
   {
-    this.move_from = ronin.position_in_window(position);
+    ronin.terminal.input_element.value = "layer."+ronin.terminal.method_name+" 0,0";
+    ronin.terminal.passive();
   }
   
   this.mouse_move = function(position)
   {
-    if(this.move_from === null){ return; }
+    var offset = new Position((-this.mouse_from.x + position.x)+","+(-this.mouse_from.y + position.y));
 
-    position = ronin.position_in_window(position);
+    ronin.overlay.get_layer(true).clear();
-    
+    ronin.overlay.draw_cross(this.mouse_from);
-    var offset_x = this.move_from.x - position.x;
+    ronin.overlay.draw_cross(position);
-    var offset_y = this.move_from.y - position.y;
+    ronin.overlay.draw_line(this.mouse_from,position);
-
-    var imageData = this.context().getImageData(0, 0, ronin.frame.settings["size"].width * 2, ronin.frame.settings["size"].height * 2);
-    this.clear();
-    this.context().putImageData(imageData, -offset_x * 2, -offset_y * 2);
-
-    this.move_from = new Position(position.x,position.y);
 
+    ronin.terminal.input_element.value = "layer."+ronin.terminal.method_name+" "+offset.render();
+    ronin.terminal.passive();
   }
   
-  this.mouse_up = function(event)
+  this.mouse_up = function(position)
   {
-    this.move_from = null;
+    var offset = new Position((-this.mouse_from.x + position.x)+","+(-this.mouse_from.y + position.y));
+
+    ronin.overlay.get_layer(true).clear();
+    ronin.overlay.draw_circle(position);
+    ronin.overlay.draw_circle(this.mouse_from);
+    ronin.overlay.draw_line(this.mouse_from,position);
+
+    ronin.terminal.input_element.value = "layer."+ronin.terminal.method_name+" "+offset.render();
+    ronin.terminal.passive();
+
+    // if(this.coordinates.length == 0){
+    //   this.coordinates.push("M"+position.render());
+    // }
+    // 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.render());
+    //   }
+    //   else if(keyboard.shift_held == true){
+    //     this.coordinates.push("a"+offset.render()+" 0 0,1 "+offset.render());
+    //   }
+    //   else if(keyboard.alt_held == true){
+    //    this.coordinates.push("a"+offset.render()+" 0 0,0 "+offset.render()); 
+    //   }
+    //   else{
+    //     this.coordinates.push("l"+offset.render());
+    //   }
+    // }
+
+    // ronin.terminal.input_element.value = "path."+ronin.terminal.method_name+" "+this.create_path();
+    // this.last_pos = position;
+    // ronin.terminal.passive();
   }
   
+  // this.move_from = null;
+
+  // this.mouse_down = function(position)
+  // {
+  //   this.move_from = ronin.position_in_window(position);
+  // }
+  
+  // this.mouse_move = function(position)
+  // {
+  //   if(this.move_from === null){ return; }
+
+  //   position = ronin.position_in_window(position);
+    
+  //   var offset_x = this.move_from.x - position.x;
+  //   var offset_y = this.move_from.y - position.y;
+
+  //   var imageData = this.context().getImageData(0, 0, ronin.frame.settings["size"].width * 2, ronin.frame.settings["size"].height * 2);
+  //   this.clear();
+  //   this.context().putImageData(imageData, -offset_x * 2, -offset_y * 2);
+
+  //   this.move_from = new Position(position.x,position.y);
+    
+  // }
+  
+  // this.mouse_up = function(event)
+  // {
+  //   this.move_from = null;
+  // }
+
   // Blink
 
   this.is_blinking = false;

scripts/modules/module.js

@@ -42,7 +42,7 @@ function Module(rune)
   this.update_setting = function(name,value)
   {
     this.settings[name] = value.content.join(" ");
-    ronin.terminal.log(new Log(this,"Updated setting: "+name));
+    ronin.terminal.log(new Log(this,"Updated setting: "+name+", to "+this.settings[name]));
   }
 
   this.add_method = function(method)

scripts/modules/overlay.js

@@ -99,6 +99,50 @@ function Overlay(rune)
     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="round";
+    this.context().lineWidth = 1;
+    this.context().strokeStyle = this.color.hex;
+    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().lineWidth = 1;
+    this.context().strokeStyle = "white";
+    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="round";
+    this.context().lineWidth = 1;
+    this.context().strokeStyle = this.color.hex;
+    this.context().stroke();
+    this.context().closePath();
+  }
+  
   this.draw_vertical_line = function(position)
   {
     this.context().beginPath();

scripts/modules/path.js

@@ -16,14 +16,19 @@ function Path(rune)
   {
     if(!ronin.path.layer){ ronin.path.create_layer(); ronin.path.layer.is_blinking = true; }
 
+    ronin.terminal.log(new Log(this,"Stroke path!("+preview+")"));
+
     this.layer.clear();
 
-    var target_layer = preview ? this.layer : ronin.frame.active_layer;
+    var context = preview ? this.context() : ronin.frame.context();
 
-    target_layer.context().lineCap = this.settings["line_cap"];
+    console.log(this.settings["line_width"]);
-    target_layer.context().lineWidth = this.settings["line_width"];
+    context.beginPath();
-    target_layer.context().strokeStyle = this.settings["line_color"];
+    context.lineCap = this.settings["line_cap"];
-    target_layer.context().stroke(new Path2D(params.content));
+    context.lineWidth = this.settings["line_width"];
+    context.strokeStyle = this.settings["line_color"];
+    context.stroke(new Path2D(params.content));
+    context.closePath();
   }
 
   this.fill = function(params,preview = false)

scripts/modules/terminal.js

@@ -10,6 +10,15 @@ function Terminal(rune)
 
   this.history = [];
 
+  this.add_method(new Method("save",["text"]));
+  this.add_method(new Method("display",["mini/hide/full"]));
+
+  this.display = function(params,preview = false)
+  {
+    if(preview){ return; }
+    this.element.setAttribute("class",params.content);
+  }
+
   // Module
   this.install = function(cmd)
   {
@@ -66,7 +75,7 @@ function Terminal(rune)
 
   function active(content)
   {
-    ronin.terminal.log(new Log(this,content,"input"));
+    ronin.terminal.log(new Log(ronin.terminal,content,"input"));
 
     if(content.indexOf(".") > -1){
       var module_name = content.split(" ")[0].split(".")[0]
@@ -90,8 +99,11 @@ function Terminal(rune)
     else if(ronin[module_name] && ronin[module_name].settings[setting_name]){
       ronin[module_name].update_setting(setting_name,parameters);
     }
+    else if(ronin[module_name]){
+      ronin.terminal.log(new Log(ronin.terminal,"Unknown method: "+method_name));
+    }
     else{
-      ronin.terminal.log(new Log(ronin.terminal,"Unknown module"));
+      ronin.terminal.log(new Log(ronin.terminal,"Unknown module: "+module_name));
     }
 
     // var key = content[0];

scripts/modules/type.js

@@ -15,13 +15,15 @@ function Type(rune)
     var text = params.text() ? params.text() : "Placeholder";
     var position = params.position() ? params.position() : new Position(40,80);
     var color = params.color() ? params.color() :new Color("#ffffff");
-    var size = 40;
+    var size = this.settings["size"];
-    var font = "Georgia";
+    var font = this.settings["font"];
 
     var target_layer = preview ? this.layer : ronin.frame.active_layer;
     target_layer.context().font = size+"px "+font;
     target_layer.context().fillStyle = color.hex; 
     target_layer.context().fillText(text,position.x,position.y);
+
+    console.log(target_layer.context());
   }
 
   // Mouse