Improved hints

links/main.css

@@ -20,16 +20,17 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
 #terminal #widget { text-align: right; bottom:30px}
 #terminal #widget .mouse { color:white; }
 
-#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 }
+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; background:#111; 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.text .module { font-family: 'input_mono_regular'; border-bottom:1px solid #333; display: block; line-height: 30px}
-/*#modal.text .module:before { content: "-";margin-left:-15px;margin-right:15px;display:inline-block }*/
-#modal.text .setting { font-style: italic; color:#999;}
-#modal.text .mode { text-decoration: underline}
 #modal.image img { display: block; max-height: 100%; width:inherit;}
 #modal.hidden { display: none }

presets/blank.rin

@@ -1,8 +1,7 @@
 frame.resize 500x500
 layer.fill #eeeeee
-brush:color #333333
+brush:color #000000
 brush:size 3
 frame.select main
 brush.add 1,1
-brush.add 2,2
-brush.add 3,3
+brush.add -1,-1

presets/default.rin

@@ -11,6 +11,7 @@ path.stroke M120,60 a60,60 0 0,1 60,60 M240,120 a-60,60 0 0,1 -60,60 M180,240 a-
 path.stroke M120,90 a30,30 0 0,1 30,30 M210,120 a-30,30 0 0,1 -30,30 M180,210 a-30,-30 0 0,1 -30,-30 M90,180 a30,-30 0 0,1 30,-30 
 magnet.grid 1x1 4,4
 type:size 11
+type:color #ffffff
 type:font "DIN Medium"
 type.write 45,280 "RONIN"
 type:font "DIN"

scripts/modules/brush.js

@@ -8,7 +8,7 @@ function Brush(rune)
   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","mirror_x","mirror_y"]));
+  this.add_method(new Method("add",["Position","Color","Scale"],["mirror_x","mirror_y"]));
   this.add_method(new Method("clear"));
 
   this.add = function(cmd, preview = false)
@@ -85,7 +85,7 @@ function Brush(rune)
   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_circle(position,this.settings["size"].to_f());
+    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()

scripts/modules/cursor.js

@@ -144,13 +144,24 @@ function Cursor(rune)
 
     this.layer.context().beginPath();
     
-    this.layer.context().moveTo(position.x + 10,position.y);
+    // 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 + 10);
+    this.layer.context().lineTo(position.x,position.y + 5);
+    
+    this.layer.context().lineCap="round";
+    this.layer.context().lineWidth = 3;
+    this.layer.context().strokeStyle = "#000000";
+    this.layer.context().stroke();
+    
+    // Overlay
+    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="round";
     this.layer.context().lineWidth = 1;
-    this.layer.context().strokeStyle = this.settings.color;
+    this.layer.context().strokeStyle = "#ffffff";
     this.layer.context().stroke();
     this.layer.context().closePath();
 
@@ -186,31 +197,24 @@ function Cursor(rune)
     this.pointer_last = position;
   }
 
-  this.draw_pointer_circle = function(position,size = 1)
+  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, 0.5, 0, 2 * Math.PI, false);
-    this.layer.context().lineWidth = 1;
-    this.layer.context().strokeStyle = this.settings.color;
-    this.layer.context().stroke();
-    this.layer.context().closePath();
 
-    this.layer.context().beginPath();
+    this.layer.context().arc(position.x, position.y, size/2, 0, 2 * Math.PI, false);
+    this.layer.context().lineWidth = 3;
+    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.color;
+    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.layer.context().beginPath();
-    this.layer.context().arc(position.x, position.y, (size/2)+2, 0, 2 * Math.PI, false);
-    this.layer.context().lineWidth = 1;
-    this.layer.context().strokeStyle = this.settings.color;
-    this.layer.context().stroke();
     this.layer.context().closePath();
 
     this.pointer_last = position;

scripts/modules/eye.js

@@ -9,7 +9,8 @@ function Eye(rune)
   {
     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.toString()+" is "+hex));
+    ronin.terminal.log(new Log(this,"Pixel on "+ronin.frame.active_layer.name+" layer at "+position.toString()+" is "+hex));
+    ronin.terminal.input.focus();
   }
   
   // Mouse

scripts/modules/frame.js

@@ -12,7 +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.add_mode(new Mode("resize"));
   
   this.install = function()
   {

scripts/modules/layer.js

@@ -8,7 +8,7 @@ function Layer(name,manager = null)
   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"],"Add position"));
+  this.add_method(new Method("fill",["color","position","rect"]));
   
   this.add_method(new Method("rename",["text"]));
 

scripts/modules/magnet.js

@@ -2,8 +2,9 @@ function Magnet(rune)
 {
   Module.call(this,rune);
 
-  this.add_setting(new Setting("grid","1x1"));
-  this.add_setting(new Setting("marker","4,4"));
+  this.size = new Rect("1x1");
+  this.rate = null;
+
   this.add_setting(new Setting("color","#000000"));
 
   this.add_method(new Method("grid",["rect","position"]));
@@ -18,20 +19,20 @@ function Magnet(rune)
     this.draw_grid(cmd.rect(),cmd.position());
 
     if(preview == false){
-      if(cmd.rect()){ this.settings["grid"].update(cmd.rect().toString());}
-      if(cmd.position()){ this.settings["marker"].update(cmd.position().toString());}
+      if(cmd.rect()){ this.size = cmd.rect(); }
+      if(cmd.position()){ this.rate = cmd.rect();  }
     }
 
     return 1, preview ? "preview" : "ok";
   }
 
-  this.draw_grid = function(rect,grid)
+  this.draw_grid = function(rect,position)
   {
     if(!rect){ rect = new Rect("20x20"); }
-    if(!grid){ grid = new Position("4,4"); }
+    if(!position){ position = new Position("4,4"); }
 
-    this.settings["grid"].update(rect.toString());
-    this.settings["marker"].update(grid.toString());
+    this.size = rect;
+    this.rate = position;
 
     if(rect.width < 5 || rect.height < 5){ return; }
 
@@ -42,7 +43,7 @@ function Magnet(rune)
       for (var y = 1; y < vertical; y++) {
         var dot_position = new Position(x * rect.width, y * rect.height);
         var size = 0.5;
-        if(grid && x % grid.x == 0 && y % grid.y == 0){ size = 1; }
+        if(position && x % position.x == 0 && y % position.y == 0){ size = 1; }
         this.draw_marker(dot_position,size);
       }
     }
@@ -50,7 +51,7 @@ function Magnet(rune)
 
   this.draw_helper = function(position)
   {    
-    if(this.settings["grid"].to_rect().width < 5 || this.settings["grid"].to_rect().height < 5){ return; }
+    if(this.size.width < 5 || this.size.height < 5){ return; }
 
     var magnetized = this.magnetic_position(position);
     this.context().beginPath();
@@ -71,19 +72,19 @@ function Magnet(rune)
 
   this.magnetic_position = function(position)
   {
-    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;
+    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.settings["grid"].to_rect().width > 4 || this.settings["grid"].to_rect().height > 4){ 
+    if(this.size.width > 4 || this.size.height > 4){ 
       if(!this.layer){ this.create_layer(); }
       this.layer.clear();
       this.draw_helper(position);
-      this.draw_grid(this.settings["grid"].to_rect(),this.settings["marker"].to_pos());
+      this.draw_grid(this.size,this.rate);
     }
     
     return this.magnetic_position(position); 
@@ -91,8 +92,8 @@ function Magnet(rune)
 
   this.widget = function()
   {
-    if(this.settings["grid"].to_rect().width < 2 || this.settings["grid"].to_rect().height < 2){ return ""; }
-    return this.settings["grid"].value;
+    if(this.size.width < 2 || this.size.height < 2){ return ""; }
+    return this.size.value;
   }
 
   this.key_escape = function()

scripts/modules/module.js

@@ -56,7 +56,7 @@ function Module(rune)
     var html = "";
 
     if(method){
-      html += method.hint();
+      html += method;
     }
     else{
       for(id in this.methods){
@@ -101,6 +101,11 @@ function Module(rune)
 
   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;
   }
 

scripts/modules/path.js

@@ -12,8 +12,8 @@ function Path(rune)
   this.add_setting(new Setting("line_color","#ffffff"));
   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");
+  this.add_method(new Method("stroke",["Positions"]));
+  this.add_method(new Method("fill",["Positions"]));
 
   this.coordinates = [];
   this.last_pos = null;
@@ -72,16 +72,10 @@ function Path(rune)
   this.create_svg = function()
   {
     var s = "";
-
-    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]+"' />";
     }
-
-    s += "</svg>";
-    console.log(s);
-    return s;
+    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

scripts/modules/render.js

@@ -4,9 +4,9 @@ function Render(rune)
   
   this.filters = {};
 
-  this.add_method(new Method("balance",["Position","Color","Scale"]));
-  this.add_method(new Method("stencil",["Position","Color","Scale"]));
-  this.add_method(new Method("chromatic",["Position","Color","Scale"]));
+  this.add_method(new Method("balance",["color"]));
+  this.add_method(new Method("stencil",["angle","color"]));
+  this.add_method(new Method("chromatic",["float"]));
 
   this.filters["balance"] = new Filter_Balance();
   this.filters["grey"] = new Filter_Grey();

scripts/modules/terminal.js

@@ -47,7 +47,7 @@ function Terminal(rune)
     this.update();
   }
 
-  this.update = function(value = null)
+  this.update = function(value = null, preview = true)
   {
     if(value){ this.input.value = value; this.input.focus(); }
 
@@ -55,10 +55,10 @@ function Terminal(rune)
     var module  = command.module();
     var method  = command.method();
 
-    if(method){
+    if(method && preview){
       method.preview(command);
     }
-    this.hint_element.innerHTML = "<span class='input'>"+this.input.value+"</span>"+(this.input.value ? " " : "")+(module ? module.hint(method) : ronin.hint(method));
+    this.hint_element.innerHTML = "<span class='input'>"+this.input.value+"</span>"+(this.input.value ? " > " : "")+(module ? module.hint(method) : ronin.hint(method));
     ronin.cursor.update();
   }
 

scripts/modules/type.js

@@ -2,11 +2,11 @@ function Type(rune)
 {
   Module.call(this,rune);
 
-  this.add_method(new Method("write",["Position","Text"],"Add position"));
+  this.add_method(new Method("write",["Position","Text"]));
   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.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)
   {
@@ -14,7 +14,7 @@ function Type(rune)
     
     this.layer.clear();
 
-    var text = cmd.text() ? cmd.text() : "Placeholder";
+    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);
@@ -39,7 +39,7 @@ function Type(rune)
 
   this.mouse_down = function(position)
   {
-    var str = ronin.terminal.cmd().text() ? ronin.terminal.cmd().text() : "Placeholder";
+    var str = ronin.terminal.cmd().text() ? ronin.terminal.cmd().text() : "Text";
     var line = "type.write "+position.toString()+" \""+str+"\"";
     ronin.terminal.update(line);
   }
@@ -50,7 +50,7 @@ function Type(rune)
   
   this.mouse_up = function(position)
   {
-    var str = ronin.terminal.cmd().text() ? ronin.terminal.cmd().text() : "Placeholder";
+    var str = ronin.terminal.cmd().text() ? ronin.terminal.cmd().text() : "Text";
     var line = "type.write "+position.toString()+" \""+str+"\"";
     ronin.terminal.update(line);
   }

scripts/units/method.js

@@ -1,33 +1,28 @@
-function Method(name,params,mouse_event)
+function Method(name,params,options = null)
 {
   Unit.call(this);
   
   this.host = null;
   this.name = name;
   this.params = params;
-  this.mouse_event = mouse_event;
+  this.options = options;
   this.example = "";
 
   this.toString = function()
   {
-    var s = "";
+    var params_str = "";
     for(param in this.params){
-      s += this.params[param]+","
+      params_str += this.params[param]+","
     }
-    s = s.substr(0,s.length-1);
+    params_str = params_str.substr(0,params_str.length-1);
 
-    return "<span class='method'>."+this.name+"("+s+")</span>";
-  }
-
-  this.hint = function()
-  {
-    var s = "";
-    for(id in this.params){
-      s += "<span class='params'>"+this.params[id]+"</span> ";
+    var options_str = "";
+    for(option in this.options){
+      options_str += this.options[option]+","
     }
-    s = s.substr(0,s.length-1);
+    options_str = options_str.substr(0,options_str.length-1);
 
-    return s;
+    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)

scripts/units/mode.js

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

scripts/units/setting.js

@@ -13,7 +13,7 @@ function Setting(name,value)
 
   this.toString = function()
   {
-    return "<span class='setting'>:"+this.name+(this.key ? '['+this.value+']' : '')+"</span>"
+    return "<span class='setting'>:"+this.name+(this.value ? ' <span class="value">'+this.value+'</span>' : '')+"</span>"
   }
 
   this.update = function(value)