Progress on mouse_modes

README.md

@@ -28,8 +28,6 @@ Where `http://localhost:8022` will load the /presets/default.rin file, `http://l
     balance 0.8       ~ equal RGB balance
   Brush
     Texture paint
-    Natural brush(Expand stroke size from stroke lenght)
-    Color per pointer
   Save
     source.save 1280x800 ~ Export with size
   > Terminal

index.html

@@ -11,7 +11,10 @@
     <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/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>

links/main.css

@@ -11,13 +11,13 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
 
 #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 { 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}
+#terminal #widget { text-align: right; bottom:30px}
 #terminal #widget .mouse { color:white; }
 
 #terminal #hint .module { display: inline-block; color:#999; }
@@ -26,5 +26,9 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
 #terminal #hint .setting { display: inline-block; color:#fff; font-style: italic }
 
 #modal { position: fixed; bottom:80px; right:20px; width:100px; height:100px; background:#111; border-radius:3px; overflow:hidden; display: block}
+#modal.text { display: block;background: white;width:calc(60vw - 60px);height:calc(100vh - 160px);padding:30px;font-size:12px; white-space:pre; column-count: 2; line-height: 16px}
+#modal.text .module { font-family: 'input_mono_regular';}
+#modal.text .setting { font-style: italic; color:#999;}
+#modal.text .mode { text-decoration: underline}
 #modal.image img { display: block; max-height: 100%}
 #modal.hidden { display: none }

media/graphics/void.svg

@@ -1,3 +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="1" fill="#fff"></circle>
+  <circle cx="2.5" cy="2.5" r="0.5" fill="#fff"></circle>
 </svg>

presets/blank.rin

@@ -1,4 +1,5 @@
 frame.resize 400x400
 layer.fill #A1A1A1
 brush:color #333333
-brush:size 3
+brush:size 3
+source.help

presets/default.rin

@@ -1,7 +1,7 @@
 frame.resize 300x300 
 frame.select main 
-layer.fill #ffffff 
-render.stencil 45' #dddddd
+layer.fill #eeeeee 
+render.stencil 45' #cccccc
 path:line_width 43
 path:line_color #000000
 path:line_cap square

scripts/filters/balance.js

@@ -7,7 +7,7 @@ function Filter_Balance()
   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.settings["size"].width*2, ronin.frame.settings["size"].height*2);
+    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) {

scripts/filters/chromatic.js

@@ -8,7 +8,7 @@ function Filter_Chromatic()
 
   this.render = function(cmd)
   {
-    var position = cmd.position() ? cmd.position() : new Position(ronin.frame.settings["size"].width,ronin.frame.settings["size"].height);
+    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);
   }
@@ -23,8 +23,8 @@ function Filter_Chromatic()
 
   this.draw = function(context = this.context(), value, position)
   {
-    var w = ronin.frame.settings["size"].width;
-    var h = ronin.frame.settings["size"].height;
+    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};

scripts/filters/contrast.js

@@ -7,7 +7,7 @@ function Filter_Contrast()
   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.settings["size"].width*2, ronin.frame.settings["size"].height*2);
+    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) {

scripts/filters/filter.js

@@ -78,7 +78,7 @@ function Filter()
   
   this.pixels = function()
   {
-    return ronin.frame.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.size.width * 2,ronin.frame.size.height * 2);
   }
 
   this.hint = function()

scripts/filters/grey.js

@@ -7,7 +7,7 @@ function Filter_Grey()
   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.settings["size"].width*2, ronin.frame.settings["size"].height*2);
+    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) {

scripts/filters/invert.js

@@ -8,8 +8,8 @@ function Filter_Invert()
     var imageObj = new Image();
     imageObj.src = ronin.frame.active_layer.element.toDataURL('image/png');
 
-    var w = ronin.frame.settings["size"].width;
-    var h = ronin.frame.settings["size"].height;
+    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);

scripts/filters/saturate.js

@@ -7,7 +7,7 @@ function Filter_Saturate()
   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.settings["size"].width*2, ronin.frame.settings["size"].height*2);
+    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) {

scripts/filters/sharpen.js

@@ -9,8 +9,8 @@ function Filter_Sharpen()
     var imageObj = new Image();
     imageObj.src = ronin.frame.active_layer.element.toDataURL('image/png');
 
-    var w = ronin.frame.settings["size"].width;
-    var h = ronin.frame.settings["size"].height;
+    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);

scripts/filters/stencil.js

@@ -25,8 +25,8 @@ function Filter_Stencil()
 
   this.draw = function(context = this.context(), angle, color)
   {
-    var w = ronin.frame.settings["size"].width;
-    var h = ronin.frame.settings["size"].height;
+    var w = ronin.frame.size.width;
+    var h = ronin.frame.size.height;
     
     context.translate(w/2,h/2);
 

scripts/modules/brush.js

@@ -2,10 +2,12 @@ function Brush(rune)
 {
   Module.call(this,rune);
   
-  this.parameters = [];
-  this.settings  = {color:"#000000",size:2};
   this.pointers = [new Pointer(new Position("0,0"))];
 
+  this.add_mode(new Mode("paint"));
+  this.add_mode(new Mode("erase","alt"));
+  this.add_setting(new Setting("color","#00ff00"));
+  this.add_setting(new Setting("size","2"));
   this.add_method(new Method("add_pointer",["Position","Color","Scale"]));
 
   this.add_pointer = function(cmd, preview = false)
@@ -14,7 +16,7 @@ function Brush(rune)
 
     var pointer = new Pointer();
     pointer.offset = cmd.position() ? cmd.position() : new Position("0,0");
-    pointer.color = cmd.color().hex ? cmd.color().hex : this.settings.color;
+    pointer.color = cmd.color().hex ? cmd.color().hex : this.settings["color"].value;
     pointer.scale = cmd.value().float ? cmd.value().float : 1;
     this.pointers.push(pointer);
 
@@ -25,12 +27,14 @@ function Brush(rune)
 
   this.size_up = function()
   {
-    this.settings.size = parseInt(this.settings.size) + 1; 
+    var new_size = this.settings["size"].to_f() + 1;
+    this.settings["size"].update(new_size); 
   }
 
   this.size_down = function()
   {
-    this.settings.size -= parseInt(this.settings.size) > 1 ? 1 : 0;
+    var new_size = this.settings["size"].to_f() - 1;
+    this.settings["size"].update(new_size < 1 ? 1 : new_size);
   }
 
   // Eraser
@@ -46,7 +50,7 @@ function Brush(rune)
     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 * 3;
+    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();
@@ -58,16 +62,16 @@ function Brush(rune)
 
   this.mouse_pointer = function(position)
   {
-    return keyboard.shift_held == true ? ronin.cursor.draw_pointer_circle_eraser(position,this.settings.size * 3) : ronin.cursor.draw_pointer_circle(position,this.settings.size);
+    return keyboard.shift_held == true ? ronin.cursor.draw_pointer_circle_eraser(position,this.settings["size"].to_f() * 3) : ronin.cursor.draw_pointer_circle(position,this.settings["size"].to_f());
   }
   
   this.mouse_mode = function()
   {
     if(keyboard.shift_held == true){
-      return "Erase "+this.settings.size;
+      return "Erase "+this.settings["size"].to_f();
     }
     else{
-      return "Paint <i style='color:"+this.settings["color"]+"'>&#9679;</i> "+this.settings.size;  
+      return "Paint <i style='color:"+this.settings["color"].value+"'>&#9679;</i> "+this.settings["size"].to_f();  
     }
   }
   

scripts/modules/brush.pointer.js

@@ -15,13 +15,15 @@ function Pointer(offset = new Position(), color = null, scale = 1)
 
   this.thickness = function()
   {
-    var radius = parseFloat(ronin.brush.settings["size"]) * this.scale;
+    var radius = ronin.brush.settings["size"].to_f() * this.scale;
 
-    var ratio = 10/this.position().distance_to(this.position_prev[0]);
-    ratio = ratio > 1 ? 1 : ratio;
+    var ratio = this.position().distance_to(this.position_prev[0]);
+    // ratio = ratio > 1 ? 1 : ratio;
 
     var target = radius * ratio;
 
+    // return target;
+
     if(this.actual_thickness < target){ this.actual_thickness += 0.25; }
     if(this.actual_thickness > target){ this.actual_thickness -= 0.25; }
 
@@ -68,7 +70,7 @@ function Pointer(offset = new Position(), color = null, scale = 1)
 
     ronin.frame.context().lineCap="round";
     ronin.frame.context().lineWidth = this.thickness();
-    ronin.frame.context().strokeStyle = this.color ? this.color : ronin.brush.color;
+    ronin.frame.context().strokeStyle = this.color ? this.color : ronin.brush.settings["color"].value;
     ronin.frame.context().stroke();
     ronin.frame.context().closePath();
 
@@ -120,12 +122,12 @@ function Pointer(offset = new Position(), color = null, scale = 1)
   
   this.start = function()
   {
-    var radius = parseFloat(ronin.brush.settings["size"]) * this.scale;
+    var radius = ronin.brush.settings["size"].to_f() * this.scale;
     this.actual_thickness = radius/2;
     ronin.frame.context().beginPath();
     ronin.frame.context().arc(this.position().x, this.position().y, radius/2, 0, 2 * Math.PI, false);
     ronin.frame.context().lineWidth = 0;
-    ronin.frame.context().fillStyle = this.color ? this.color : ronin.brush.color;
+    ronin.frame.context().fillStyle = this.color ? this.color : ronin.brush.settings["color"].to_f();
     ronin.frame.context().fill();
     ronin.frame.context().closePath();
   }

scripts/modules/cursor.js

@@ -1,8 +1,9 @@
 function Cursor(rune)
 {
   Module.call(this,rune);
-  
-  this.settings = {color: "#000000",color_alt: "#fffffff"};
+
+  this.add_setting(new Setting("color","#000000"));
+  this.add_setting(new Setting("color_alt","#fffffff"));
 
   this.mode = null;
   this.position = new Position();
@@ -17,12 +18,12 @@ function Cursor(rune)
     if(this.is_inside){
       this.set_mode(ronin.default)
     }
+    else if(keyboard.shift_held,keyboard.alt_held){
+      this.set_mode(ronin.frame.active_layer);
+    }
     else if(ronin.terminal.cmd().module()){
       this.set_mode(ronin.terminal.cmd().module());
     }
-    else if(event && event.altKey == true && event.shiftKey == true){
-      this.set_mode(ronin.frame.active_layer);
-    }
     else if(event && event.altKey == true){
       this.set_mode(ronin.default);
     }
@@ -43,6 +44,9 @@ function Cursor(rune)
 
   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);
@@ -95,9 +99,11 @@ function Cursor(rune)
     this.position = ronin.magnet.update_mouse(position);
     this.position_in_window = new Position(e.clientX,e.clientY);
 
-    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.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; }
 
@@ -120,8 +126,6 @@ function Cursor(rune)
 
     this.is_inside = true;
     this.update();
-
-    console.log("over")
   }
 
   this.mouse_inside = function()
@@ -130,7 +134,6 @@ function Cursor(rune)
 
     this.is_inside = false;
     this.update();
-    console.log("off") 
   }
 
   this.draw_pointer_arrow = function(position,size = 1)

scripts/modules/default.js

@@ -18,13 +18,11 @@ function Default(rune)
 
   this.mouse_down = function(position)
   {
-    console.log("down")
     this.drag_from = ronin.cursor.position_in_window;
   }
   
   this.mouse_move = function(position)
   {
-    console.log("move")
     if(this.drag_from === null){ return; }
 
     var offset = ronin.cursor.position_in_window.offset(this.drag_from);
@@ -39,7 +37,6 @@ function Default(rune)
   
   this.mouse_up = function(event)
   {
-    console.log("up")
     this.drag_from = null;
   }
 }

scripts/modules/eye.js

@@ -1,37 +1,31 @@
 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 imgData = ronin.frame.context().getImageData(position.x*2, position.y*2, 1, 1).data;
-    var c = new Color();
-    // ronin.terminal.input_element.value = "* "+(c.rgb_to_hex(imgData));
-    ronin.terminal.update_hint();
+    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,"Color at "+position.render()+" is "+hex));
   }
   
   // Mouse
 
-  this.mouse_mode = function()
-  {
-    return "Eye";
-  }
-
   this.mouse_down = function(position)
   {
-    // ronin.overlay.draw(position);
     this.color_picker(position);
   }
   
   this.mouse_move = function(position,rect)
   {
-    ronin.overlay.draw(this.mouse_from,rect);
-    this.color_picker(position,rect);
+    this.color_picker(position);
   }
   
   this.mouse_up = function(position,rect)
   {
-    this.color_picker(position,rect);
+    this.color_picker(position);
   }
 }

scripts/modules/frame.js

@@ -3,7 +3,8 @@ function Frame(rune)
   Module.call(this,rune);
   
   this.element = null;
-  this.settings = {size:new Rect("200x200")};
+
+  this.size = new Rect("200x200");
 
   this.layers = {};
   this.active_layer = null;
@@ -11,6 +12,7 @@ function Frame(rune)
 
   this.add_method(new Method("resize",[new Position().name,new Rect().name]));
   this.add_method(new Method("select",["text"]));
+  this.add_mode(new Mode("crop"));
   
   this.install = function()
   {
@@ -53,9 +55,9 @@ function Frame(rune)
 
     ronin.on_resize();
 
-    this.settings.size = rect;
+    this.size = rect;
 
-    return 1, "Resized to "+this.settings.size.render();
+    return 1, "Resized to "+this.size.render();
   }
 
   this.select = function(params, preview = false)
@@ -108,7 +110,7 @@ function Frame(rune)
   this.add_layer = function(layer)
   {
     if(this.active_layer){layer.set_depth(this.active_layer.depth+1);}
-    layer.resize(this.settings["size"]);
+    layer.resize(this.size);
     this.layers[layer.name] = layer;
     this.element.appendChild(layer.element);
   }
@@ -161,7 +163,7 @@ function Frame(rune)
   {
     var html = ""
 
-    html += this.settings.size.render()+" ";
+    html += this.size.render()+" ";
     html += this.active_layer.name+" ";
 
     var user_layers = 0;

scripts/modules/layer.js

@@ -35,8 +35,8 @@ function Layer(name,manager = null)
     var position = params.position();
     var angle = params.angle().degrees;
 
-    var w = ronin.frame.settings["size"].width;
-    var h = ronin.frame.settings["size"].height;
+    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);
@@ -138,7 +138,7 @@ function Layer(name,manager = null)
 
   this.data = function()
   {
-    return this.context().getImageData(0, 0, ronin.frame.settings["size"].width * 2, ronin.frame.settings["size"].height * 2);
+    return this.context().getImageData(0, 0, ronin.frame.size.width * 2, ronin.frame.size.height * 2);
   }
 
   //

scripts/modules/magnet.js

@@ -1,23 +1,24 @@
 function Magnet(rune)
 {
   Module.call(this,rune);
-  
-  this.settings = {"grid" : new Rect("1x1"), "marker": new Position("4,4")};
+
+  this.add_setting(new Setting("grid","1x1"));
+  this.add_setting(new Setting("marker","4,4"));
 
   this.add_method(new Method("grid",["rect","position"]));
 
-  this.grid = function(params,preview = false)
+  this.grid = function(cmd,preview = false)
   {
-    if(!params.rect()){ return 0, "Rect?"; }
+    if(!cmd.rect()){ return 0, "Rect?"; }
 
     if(!this.layer){ this.create_layer(); }
 
     this.layer.clear();
-    this.draw_grid(params.rect(),params.position());
+    this.draw_grid(cmd.rect(),cmd.position());
 
     if(preview == false){
-      this.settings["grid"] = params.rect();
-      this.settings["market"] = params.position();
+      this.settings["grid"].update(cmd.rect().render());
+      this.settings["marker"].update(cmd.position().render());
     }
 
     return 1, preview ? "preview" : "ok";
@@ -28,13 +29,13 @@ function Magnet(rune)
     if(!rect){ rect = new Rect("20x20"); }
     if(!grid){ grid = new Position("4,4"); }
 
-    this.settings["grid"] = rect;
-    this.settings["marker"] = grid;
+    this.settings["grid"].update(rect.render());
+    this.settings["marker"].update(grid.render());
 
     if(rect.width < 5 || rect.height < 5){ return; }
 
-    var horizontal = ronin.frame.settings["size"].width/rect.width;
-    var vertical = ronin.frame.settings["size"].height/rect.height;
+    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++) {
@@ -48,7 +49,7 @@ function Magnet(rune)
 
   this.draw_helper = function(position)
   {    
-    if(this.settings["grid"].width < 5 || this.settings["grid"].height < 5){ return; }
+    if(this.settings["grid"].to_rect().width < 5 || this.settings["grid"].to_rect().height < 5){ return; }
 
     var magnetized = this.magnetic_position(position);
     this.context().beginPath();
@@ -69,19 +70,19 @@ function Magnet(rune)
 
   this.magnetic_position = function(position)
   {
-    var x = parseInt(position.x / this.settings["grid"].width) * this.settings["grid"].width;
-    var y = parseInt(position.y / this.settings["grid"].width) * this.settings["grid"].width;
+    var x = parseInt(position.x / this.settings["grid"].to_rect().width) * this.settings["grid"].to_rect().width;
+    var y = parseInt(position.y / this.settings["grid"].to_rect().width) * this.settings["grid"].to_rect().width;
 
     return new Position(x,y);
   }
 
   this.update_mouse = function(position)
   {
-    if(this.settings["grid"].width > 4 || this.settings["grid"].height > 4){ 
+    if(this.settings["grid"].to_rect().width > 4 || this.settings["grid"].to_rect().height > 4){ 
       if(!this.layer){ this.create_layer(); }
       this.layer.clear();
       this.draw_helper(position);
-      this.draw_grid(this.settings["grid"],this.settings["marker"]);
+      this.draw_grid(this.settings["grid"].to_rect(),this.settings["marker"].to_pos());
     }
     
     return this.magnetic_position(position); 

scripts/modules/module.js

@@ -5,11 +5,30 @@ function Module(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()
   {
   }
@@ -31,18 +50,6 @@ function Module(rune)
     if(!this.layer){ this.create_layer(); this.layer.is_blinking = is_blinking }
     return this.layer;
   }
-
-  this.update_setting = function(name,value)
-  {
-    this.settings[name] = value.content.join(" ");
-    return 1, "ok";
-  }
-
-  this.add_method = function(method)
-  {
-    method.host = this;
-    this.methods[method.name] = method;
-  }
   
   this.hint = function(method)
   {

scripts/modules/overlay.js

@@ -2,8 +2,6 @@ function Overlay(rune)
 {
   Module.call(this,rune);
   
-  this.parameters = [Position,Rect,Color];
-  
   this.color = new Color("#ffffff");
 
   // draw

scripts/modules/path.js

@@ -1,9 +1,11 @@
 function Path(rune)
 {
   Module.call(this,rune);
-  
-  this.parameters = [Any];
-  this.settings  = {"fill_color" : "#ff0000","line_width" : 3,"line_color" : "#999", "line_cap" : "square"};
+
+  this.add_setting(new Setting("fill_color","#ff0000"));
+  this.add_setting(new Setting("line_width","3"));
+  this.add_setting(new Setting("line_color","#999"));
+  this.add_setting(new Setting("line_cap","square"));
 
   this.add_method(new Method("stroke",["Positions"],"Add point"));
   this.add_method(new Method("fill",["Positions"]),"Add point");
@@ -21,9 +23,9 @@ function Path(rune)
     var context = preview ? this.context() : ronin.frame.context();
 
     context.beginPath();
-    context.lineCap = this.settings["line_cap"];
-    context.lineWidth = this.settings["line_width"];
-    context.strokeStyle = this.settings["line_color"];
+    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();
 
@@ -41,7 +43,7 @@ function Path(rune)
     var context = preview ? this.context() : ronin.frame.context();
 
     context.beginPath();
-    context.fillStyle = this.settings["fill_color"];
+    context.fillStyle = this.settings["fill_color"].value;
     context.fill(new Path2D(cmd.values()));
     context.closePath();
 
@@ -66,7 +68,7 @@ function Path(rune)
   {
     var s = "";
 
-    s += "<svg width='"+ronin.frame.settings["size"].width+"' height='"+ronin.frame.settings["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 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;'>";
 
     for (var i = 0; i < this.paths.length; i++) {
       s += "<path d='"+this.paths[i]+"' />";

scripts/modules/render.js

@@ -32,22 +32,4 @@ function Render(rune)
     if(preview){ f.preview(cmd); }
     else{ f.render(cmd); }
   }
-
-  this.hint = function(method)
-  {
-    var html = "";
-    var filter_name = ronin.terminal.input.value.split(" ")[0].split(".")[1];
-
-    if(this.filters[filter_name]){
-      return this.filters[filter_name].hint();
-    }
-    else{
-      for (var key in this.filters){
-        html += key+" ";
-      }  
-    }
-
-    return html;  
-  }
-
 }

scripts/modules/source.js

@@ -4,10 +4,12 @@ function Source(rune)
 
   this.modal_element = null;
 
-  this.settings  = {format:"png",quality:"1"};
+  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"]),"Add point");
+  this.add_method(new Method("load",["path","position","rect"]));
+  this.add_method(new Method("help"));
     
   this.install = function()
   {
@@ -66,8 +68,8 @@ function Source(rune)
 
     this.modal();
 
-    if(this.settings.format == "jpg"){
-      this.modal("image","<img src='"+this.merge().element.toDataURL('image/jpeg',parseFloat(this.settings.quality))+"' />");
+    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')+"'/>");
@@ -87,7 +89,30 @@ function Source(rune)
     
     this.layer.remove(this);
 
-    return 1,"Rendered the "+this.settings.format+" image, quality "+this.settings.quality+"."
+    return 1,"Rendered the "+this.settings.format+" image, quality "+this.settings["quality"].to_f()+"."
+  }
+
+  this.help = function(params,preview = false)
+  {
+    if(preview){ return; }
+
+    html = "";
+
+    for(module_id in ronin.modules){
+      html += "<span class='module'>"+ronin.modules[module_id].name+"</span><br/>";
+
+      for(mode_id in ronin.modules[module_id].modes){
+        html += "  <span class='mode'>~"+(ronin.modules[module_id].modes[mode_id].key ? '['+ronin.modules[module_id].modes[mode_id].key+']' : "")+""+ronin.modules[module_id].modes[mode_id].name+"</span><br />"
+      }
+      for(setting_id in ronin.modules[module_id].settings){
+        html += "  <span class='setting'>:"+ronin.modules[module_id].settings[setting_id].name+"</span><br />"
+      }
+      for(method_id in ronin.modules[module_id].methods){
+        html += "  <span class='method'>."+ronin.modules[module_id].methods[method_id].name+"</span><br />"
+      }
+    }
+
+    this.modal("text",html);
   }
 
   this.modal = function(type,content)
@@ -104,7 +129,7 @@ function Source(rune)
       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.settings["size"].width,ronin.frame.settings["size"].height);
+      this.layer.context().drawImage(a[i].context().canvas,0,0,ronin.frame.size.width,ronin.frame.size.height);
     }
     return this.layer;
   }

scripts/modules/terminal.js

@@ -40,7 +40,7 @@ function Terminal(rune)
       method.run(command);
     }
     if(setting){
-      module.settings[setting] = command.values();
+      module.settings[setting].update(command.values());
       this.log(new Log(module,setting+" = "+command.values()));
     }
     this.hint_element.innerHTML = "";
@@ -60,7 +60,7 @@ function Terminal(rune)
       method.preview(command);
     }
     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);
+    ronin.cursor.update();
   }
 
   this.run_multi = function(lines)

scripts/modules/type.js

@@ -3,20 +3,22 @@ function Type(rune)
   Module.call(this,rune);
 
   this.add_method(new Method("write",["Position","Text"],"Add position"));
+  this.add_mode(new Mode("write"));
+  this.add_setting(new Setting("color","#ffffff"));
+  this.add_setting(new Setting("size","20"));
+  this.add_setting(new Setting("font","Din"));
 
-  this.settings = {"color":"#ffffff","size":"20","font":"Din"};
-
-  this.write = function(params,preview = false)
+  this.write = function(cmd,preview = false)
   {
     if(!this.layer){ this.create_layer(); this.layer.is_blinking = true; }
-
+    
     this.layer.clear();
 
-    var text = params.text() ? params.text() : "Placeholder";
-    var position = params.position() ? params.position() : new Position(40,80);
-    var color = this.settings["color"];
-    var size = this.settings["size"];
-    var font = this.settings["font"];
+    var text = cmd.text() ? cmd.text() : "Placeholder";
+    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;

scripts/units/color.js

@@ -33,7 +33,7 @@ function Color(hex = '#000000')
   
   this.rgb_to_hex = function(rgb)
   {
-    return "#"+("0" + parseInt(rgb[0],10).toString(16)).slice(-2)+("0" + parseInt(rgb[1],10).toString(16)).slice(-2)+("0" + parseInt(rgb[2],10).toString(16)).slice(-2);
+    return "#"+parseInt(rgb.r,10).toString(16)+parseInt(rgb.g,10).toString(16)+parseInt(rgb.b,10).toString(16);
   }
 
   this.brightness = function()

scripts/units/mode.js

@@ -0,0 +1,13 @@
+function Mode(name,key = "")
+{
+  Unit.call(this);
+  
+  this.host = null;
+  this.name = name;
+  this.key = key;
+
+  this.render = function()
+  {
+    return "?";
+  }
+}

scripts/units/setting.js

@@ -1,16 +1,33 @@
-function Setting(key,value)
+function Setting(name,value)
 {
   Unit.call(this);
   
-  this.candidates = [];
-  this.key = key;
-  
-  if(value == "true"){ this.value = true; }
-  else if(value == "false"){ this.value = false; }
-  else{ this.value = value; }
+  this.host = null;
+  this.name = name;
+  this.value = value;
   
   this.render = function()
   {
-    return this.key+"="+this.value;
+    return "?";
+  }
+
+  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);
   }
 }