Fixed path

links/main.css

@@ -2,22 +2,24 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
 *:focus {outline: none; }
 
 #ronin { background:#ddd; width:100%; height:100%; overflow:hidden; background-image:url(../media/graphics/grid.svg); background-position: center center; }
-#frame { background:#111; width:50vw; height:50vh; overflow:hidden; position:fixed; left: calc(40vw + 15px); top:100px;  border-radius: 3px}
+#frame { background:none; width:50vw; height:50vh; overflow:hidden; position:fixed; left: calc(40vw + 15px); top:100px;  border-radius: 3px}
 #frame > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
 #overlay { position:absolute; z-index:1000;}
 #frame { cursor:none;}
 
-#terminal { position: fixed;bottom: 0px;left: 0px;background: #eee;width: 100vw;height: 60px;overflow: hidden;}
+#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:red; font-family: 'input_mono_regular'}
-#terminal input:focus { color:#000; }
+#terminal input:focus { color:#fff; }
 
-#terminal #logs { position:fixed; bottom:30px; border-bottom:1px solid #fff; }
+#terminal #logs { position:fixed; bottom:30px; border-bottom:1px solid #222; }
 
 #terminal #widget { text-align: right}
+#terminal #widget .mouse { color:white; }
 
-#terminal #hint .module { display: inline-block; color:black; }
-#terminal #hint .method { display: inline-block; color:black; }
+#terminal #hint .module { display: inline-block; color:#999; }
+#terminal #hint .method { display: inline-block; color:#999; }
 #terminal #hint .params { display: inline-block; color:#999; font-style: italic }
+#terminal #hint .setting { display: inline-block; color:#fff; font-style: italic }

scripts/core/command.js

@@ -33,6 +33,13 @@ function Command(content)
     return module.methods[method_name] ? module.methods[method_name] : null;
   }
 
+  this.params = function()
+  {
+    var a = this.content.split(" ");
+    a.shift();
+    return a.join(" ").trim();
+  }
+
 
   this.inject_position = function(injection)
   {

scripts/core/ronin.js

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

scripts/modules/brush.js

@@ -116,15 +116,4 @@ function Brush(rune)
       ronin.brush.pointers[i].stop();
     }
   }
-
-  this.widget = function()
-  {
-    var s = "<i style='color:"+this.settings["color"]+"'>&#9679;</i> Brush "+ronin.brush.pointers.length+"x "+this.settings["size"]+"<br />";  
-
-    for(id in this.pointers){
-      s += this.pointers[id].widget();
-    }
-    return s;
-
-  }
 }

scripts/modules/brush.pointer.js

@@ -125,6 +125,6 @@ function Pointer(offset = new Position(), color = new Color('000000'))
 
   this.widget = function()
   {
-    return this.offset.render()+"<br />";
+    return this.offset.render();
   }
 }

scripts/modules/cursor.js

@@ -228,6 +228,11 @@ function Cursor(rune)
 
   this.widget = function()
   {
-    return this.mode.mouse_mode();
+    return "<span class='mouse'>"+this.mode.mouse_mode()+"</span>";
+  }
+  
+  this.key_escape = function()
+  {
+    if(this.layer){ this.layer.remove(this); }
   }
 }

scripts/modules/frame.js

@@ -152,18 +152,10 @@ function Frame(rune)
 
   this.widget = function()
   {
-    var s = "";
+    var count = 0;
     for(layer in this.layers){
-      if(this.active_layer.name == layer){
-        s += "<li class='active'>"+layer+" z"+this.layers[layer].depth+"</li>";
-      }
-      else if(this.layers[layer].manager){
-        s += "<li class='managed'>"+this.layers[layer].manager.constructor.name+"*</li>";
-      }
-      else{
-        s += "<li class='inactive'>"+layer+" z"+this.layers[layer].depth+"</li>";
-      }      
+      count += 1;
     }
-    return s;
+    return this.active_layer.name+(count > 1 ? "("+count+" layers)" : "");
   }
 }

scripts/modules/module.js

@@ -62,16 +62,11 @@ function Module(rune)
       for(id in this.methods){
         html += "<span class='method'>."+this.methods[id].name+"</span> ";
       }
+      for(id in this.settings){
+        html += "<span class='setting'>:"+id+"</span> ";
+      }
     }
 
-
-    // for(method in this.methods){
-    //   html += ".<b>"+method+"</b> ";
-    // }
-    // for(setting in this.settings){
-    //   html += setting+"="+this.settings[setting]+" ";
-    // }
-
     return html;
   }
 

scripts/modules/overlay.js

@@ -21,6 +21,7 @@ function Overlay(rune)
   
   this.draw = function(position,rect)
   {
+    if(!this.layer){ this.create_layer(); this.layer.is_blinking = true; }
     this.get_layer().clear();
     
     if(!position){ position = new Position("0,0"); }

scripts/modules/path.js

@@ -3,7 +3,7 @@ function Path(rune)
   Module.call(this,rune);
   
   this.parameters = [Any];
-  this.settings  = {"fill_color" : "#ff0000","line_width" : 1,"line_color" : "#ffffff", "line_cap" : "square"};
+  this.settings  = {"fill_color" : "#ff0000","line_width" : 3,"line_color" : "#999", "line_cap" : "square"};
 
   this.add_method(new Method("stroke",["Positions"],"Add point"));
   this.add_method(new Method("fill",["Positions"]),"Add point");
@@ -12,7 +12,7 @@ function Path(rune)
   this.last_pos = null;
   this.paths = [];
 
-  this.stroke = function(params,preview = false)
+  this.stroke = function(cmd,preview = false)
   {
     if(!ronin.path.layer){ ronin.path.create_layer(); ronin.path.layer.is_blinking = true; }
 
@@ -24,7 +24,7 @@ function Path(rune)
     context.lineCap = this.settings["line_cap"];
     context.lineWidth = this.settings["line_width"];
     context.strokeStyle = this.settings["line_color"];
-    context.stroke(new Path2D(params.content));
+    context.stroke(new Path2D(cmd.params()));
     context.closePath();
 
     if(!preview){ this.coordinates = []; this.last_pos = null; }
@@ -95,14 +95,14 @@ function Path(rune)
   {
     var line = "path.stroke "+this.create_path();
     line += "M"+position.render();
-    ronin.terminal.update_active_line(line);
+    ronin.terminal.update(line);
   }
   
   this.mouse_move = function(position)
   {
     var line = "path.stroke "+this.create_path();
     line += "L"+position.render();
-    ronin.terminal.update_active_line(line);
+    ronin.terminal.update(line);
   }
   
   this.mouse_up = function(position)
@@ -127,7 +127,7 @@ function Path(rune)
       }
     }
 
-    ronin.terminal.update_active_line("path.stroke "+this.create_path());
+    ronin.terminal.update("path.stroke "+this.create_path());
     this.last_pos = position;
   }
 
@@ -136,6 +136,5 @@ function Path(rune)
     if(this.layer){ this.layer.remove(this); }
     this.coordinates = [];
     this.last_pos = null;
-    ronin.terminal.passive();
   }
 }

scripts/modules/source.js

@@ -95,7 +95,7 @@ function Source(rune)
     if(this.layer){ this.layer.remove(this); }
     this.coordinates = [];
     this.last_pos = null;
-    ronin.terminal.input_element.value = "";
+    ronin.terminal.input.value = "";
     ronin.terminal.passive();
     ronin.overlay.get_layer(true).clear();
   }

scripts/modules/terminal.js

@@ -40,8 +40,9 @@ function Terminal(rune)
     this.input.value = "";
   }
 
-  this.update = function()
+  this.update = function(value = null)
   {
+    this.input.value = value ? value : this.input.value;
     var command = this.cmd();
     var module  = command.module();
     var method  = command.method();
@@ -51,6 +52,7 @@ function Terminal(rune)
     }
     this.hint_element.innerHTML = "<span class='input'>"+this.input.value+"</span>"+(this.input.value ? " " : "")+(module ? module.hint(method) : this.hint(method));
     ronin.cursor.set_mode(module);
+    this.input.focus();
   }
 
   this.hint = function(method)

scripts/modules/terminal.widget.js

@@ -12,33 +12,10 @@ function Widget(rune)
 
   this.update = function()
   {
-    this.element.innerHTML = ronin.cursor.widget();
-  }
-
-  this.update_widget = function()
-  {
-    if(!this.active_layer){ return; }
-
-    var s = "";
-    
-    s += "<span class='module'>";
+    var html = "";
     for (var key in ronin.modules){
-      s += ronin.modules[key].widget() ? ronin.modules[key].widget()+" " : "";
+      html += ronin.modules[key].widget() ? ronin.modules[key].widget()+" " : "";
     }
-    s += "</span>";
-  
-    s += "<span class='cursor'>"+ronin.cursor.mode.mouse_mode()+"</span>";
-    
-    var keys = Object.keys(ronin.frame.layers);
-    var loc = keys.indexOf(this.active_layer.name);
-
-    if(keys.length > 1){
-      s += "<span class='layer'>"+ronin.frame.active_layer.widget()+"("+(loc+1)+"/"+keys.length+")</span>";
-    }
-    else{
-      s += "<span class='layer'>"+ronin.frame.active_layer.widget()+"</span>";
-    }
-  
-    this.widget_element.innerHTML = s;
+    this.element.innerHTML = html;
   }
 }

scripts/modules/type.js

@@ -4,7 +4,7 @@ function Type(rune)
 
   this.add_method(new Method("write",["Position","Text"],"Add position"));
 
-  this.settings = {"color":"#ffffff","size":"10","font":"Din"};
+  this.settings = {"color":"#ffffff","size":"20","font":"Din"};
 
   this.write = function(params,preview = false)
   {
@@ -23,37 +23,37 @@ function Type(rune)
     target_layer.context().fillStyle = color; 
     target_layer.context().fillText(text,position.x,position.y);
 
-    return 1, preview ? "preview" : "ok";
+    if(!preview){ this.layer.clear(); }
+
+    return 1, "Wrote "+text+" at "+position.render();
   }
 
   // Mouse
 
   this.mouse_mode = function()
   {
-    return "Type";
+    return "Write";
   }
 
   this.mouse_down = function(position)
   {
     var str = ronin.terminal.cmd().text() ? ronin.terminal.cmd().text() : "Placeholder";
     var line = "type.write "+position.render()+" \""+str+"\"";
-    ronin.terminal.update_active_line(line);
+    ronin.terminal.update(line);
   }
   
   this.mouse_move = function(position,rect)
   {
     var str = ronin.terminal.cmd().text() ? ronin.terminal.cmd().text() : "Placeholder";
     var line = "type.write "+position.render()+" \""+str+"\"";
-    ronin.terminal.update_active_line(line);
+    ronin.terminal.update(line);
   }
   
   this.mouse_up = function(position)
   {
     var str = ronin.terminal.cmd().text() ? ronin.terminal.cmd().text() : "Placeholder";
     var line = "type.write "+position.render()+" \""+str+"\"";
-    ronin.terminal.update_active_line(line);
-    ronin.terminal.input.value += "\n";
-    ronin.cursor.release();
+    ronin.terminal.update(line);
   }
 
   this.key_escape = function()