Improved Widgets

index.html

@@ -28,6 +28,7 @@
     <script type="text/javascript" src="scripts/modules/type.js"></script>
     <script type="text/javascript" src="scripts/modules/render.js"></script>
     <script type="text/javascript" src="scripts/modules/magnet.js"></script>
+    <script type="text/javascript" src="scripts/modules/widget.js"></script>
     
     <script type="text/javascript" src="scripts/filters/filter.js"></script>
     <script type="text/javascript" src="scripts/filters/stencil.js"></script>

links/main.css

@@ -4,9 +4,6 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
 #ronin { width:100%; height:100%; overflow:hidden; background:#111; background-image:url(../media/graphics/grid.svg); background-position: center center; }
 #frame { width:50vw; height:50vh; overflow:hidden; position:fixed; left:50%; top:50%; background:none; border-radius:5px; border:1px solid #333;}
 #frame > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
-#frame widget { position: absolute; top:0px; left:0px; line-height: 20px; font-size:10px; z-index:9000; color:white; width:100%; height:100%; }
-#frame widget span { display:inline-block; padding:2px 10px; }
-#frame widget .cursor { position:absolute; bottom:0px; right:0px; }
 #frame.bright widget { color:#000; }
 #overlay { position:absolute; z-index:1000;}
 #frame { cursor:none;}
@@ -26,4 +23,13 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
 
 #terminal.hide { height:25px; }
 #terminal.mini { height:120px; }
-#terminal.full { height:100vh; }
+#terminal.full { height:100vh; }
+
+#widget { position: absolute; top:0px; left:0px; line-height: 20px; font-size:10px; z-index:9000; color:white; width:100%; height:100%; }
+#widget span { display:inline-block; line-height:15px; padding:0px 5px; vertical-align: top; }
+#widget span name { display: block; border-bottom: 1px solid #333; line-height:25px; margin-bottom:5px;}
+#widget .cursor {  }
+#widget li { display:block; }
+#widget li.active { color:#72dec2; }
+#widget li.inactive { color:#fff; }
+#widget li.managed { color:#777; }

presets/default.rin

@@ -1,3 +1,5 @@
 frame.select main ; 
 frame.resize 400x400 ; 
-brush:color #ff00ff ;
+brush:color #ff0000 ;
+brush.add_pointer 1,1 ;
+brush.add_pointer 2,2 ;

scripts/core/init.js

@@ -35,4 +35,4 @@ ronin.terminal.query("terminal.load default.rin");
 
 ronin.terminal.input_element.focus();
 ronin.terminal.update_hint();
-ronin.frame.update_widget();
+ronin.widget.update();

scripts/core/keyboard.js

@@ -12,7 +12,7 @@ function Keyboard()
       this.alt_held = true;
     }
     ronin.cursor.update(event);
-    ronin.frame.update_widget();
+    ronin.widget.update();
     ronin.terminal.update_hint();
   }
 
@@ -45,7 +45,7 @@ function Keyboard()
 
     // Passive
     ronin.terminal.passive(ronin.terminal.input_element.value);
-    ronin.frame.update_widget();
+    ronin.widget.update();
     ronin.terminal.update_hint();
   };
 

scripts/core/ronin.js

@@ -19,6 +19,7 @@ function Ronin()
   this.overlay  = new Overlay("|");
   this.terminal = new Terminal(">");
   this.cursor   = new Cursor(".");
+  this.widget   = new Widget("?");
   
   this.modules[this.frame.constructor.name]    = this.frame;
   this.modules[this.type.constructor.name]     = this.type;
@@ -43,6 +44,7 @@ function Ronin()
     }
 
     this.terminal.install();
+    this.widget.install();
   }
   
   this.cursors = [];

scripts/modules/brush.js

@@ -17,7 +17,8 @@ function Brush(rune)
     pointer.offset = params.position() ? params.position() : new Position("0,0");
     this.pointers.push(pointer);
 
-    ronin.terminal.log(new Log(this,"Added pointer at: "+pointer.offset));
+    ronin.terminal.log(new Log(this,"Added pointer at: "+pointer.offset.render()));
+    ronin.widget.update();
   }
   
   this.passive = function(cmd)
@@ -36,14 +37,14 @@ function Brush(rune)
   this.size_up = function()
   {
     this.settings["size"] -= this.settings["size"] > 1 ? 1 : 0;
-    ronin.frame.update_widget();
+    ronin.frame.widget.update();
     ronin.terminal.log(new Log(this,"Increased pointer size to: "+this.settings["size"]));
   }
 
   this.size_down = function()
   {
     this.settings["size"] += 1;
-    ronin.frame.update_widget();
+    ronin.frame.widget.update();
     ronin.terminal.log(new Log(this,"Decreased pointer size to: "+this.settings["size"]));
   }
 
@@ -81,7 +82,7 @@ function Brush(rune)
       return "Eraser "+this.settings["size"];
     }
     else{
-      return "<i style='color:"+this.settings["color"]+"'>&#9679;</i> Brush "+ronin.brush.pointers.length+"x "+this.settings["size"];  
+      return "Brush "+this.settings["size"];  
     }
   }
   
@@ -119,4 +120,15 @@ 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/cursor.js

@@ -206,4 +206,9 @@ function Cursor(rune)
     ronin.terminal.update_hint();
     this.mode.mouse_from = null;
   }
+
+  this.widget = function()
+  {
+    return this.mode.mouse_mode();
+  }
 }

scripts/modules/frame.js

@@ -12,12 +12,9 @@ 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");
   
   this.install = function()
   {
-    this.element.appendChild(this.widget_element);
     this.blink();
   }
 
@@ -99,42 +96,6 @@ function Frame(rune)
     this.element.appendChild(layer.element);
   }
 
-  this.widget = function()
-  {
-    if(!this.active_layer){ return ""; }
-
-    return this.rune+" "+this.settings["size"].render();
-  }
-
-  // Widget
-
-  this.update_widget = function()
-  {
-    if(!this.active_layer){ return; }
-
-    var s = "";
-    
-    s += "<span class='module'>";
-    for (var key in ronin.modules){
-      s += 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;
-  }
-
   // Commands
 
   this.layer_up = function()
@@ -177,4 +138,21 @@ function Frame(rune)
   this.mouse_up = function(position,rect)
   {
   }
+
+  this.widget = function()
+  {
+    var s = "";
+    for(layer in this.layers){
+      if(this.active_layer.name == layer){
+        s += "<li class='active'>"+layer+"</li>";
+      }
+      else if(this.layers[layer].manager){
+        s += "<li class='managed'>"+this.layers[layer].manager.constructor.name+"*</li>";
+      }
+      else{
+        s += "<li class='inactive'>"+layer+"</li>";
+      }      
+    }
+    return s;
+  }
 }

scripts/modules/layer.js

@@ -131,17 +131,6 @@ function Layer(name,manager = null)
 
   //
 
-  this.widget = function()
-  {
-    var e_name = this.name;
-    var e_class = "";
-    
-    if(ronin.frame.active_layer.name == this.name){ e_class += "highlight "; }
-    if(this.manager != null){ e_class += "managed "; }
-
-    return "<span class='"+e_class+"'>"+e_name+"</span>";
-  }
-
   this.mouse_pointer = function(position)
   {
     return ronin.cursor.draw_pointer_arrow(position);

scripts/modules/magnet.js

@@ -72,13 +72,13 @@ function Magnet(rune)
 
   this.update_mouse = function(position)
   {
-    if(!this.layer){ this.create_layer(); }
-
-    this.layer.clear();
-
-    this.draw_helper(position);
-    this.draw_grid(this.settings["grid"],this.settings["marker"]);
-
+    if(this.settings["grid"].width > 4 || this.settings["grid"].height > 4){ 
+      if(!this.layer){ this.create_layer(); }
+      this.layer.clear();
+      this.draw_helper(position);
+      this.draw_grid(this.settings["grid"],this.settings["marker"]);
+    }
+    
     return this.magnetic_position(position); 
   }
 

scripts/modules/module.js

@@ -20,6 +20,7 @@ function Module(rune)
 
   this.create_layer = function()
   {
+    console.info("!!!!",this);
     this.layer = new Layer(this.constructor.name+".Preview",this);
     this.layer.element.setAttribute("style","z-index:7000");
     ronin.frame.add_layer(this.layer);
@@ -43,7 +44,7 @@ function Module(rune)
   {
     this.settings[name] = value.content.join(" ");
     ronin.terminal.log(new Log(this,"Updated setting: "+name+", to "+this.settings[name]));
-    ronin.frame.update_widget();
+    ronin.widget.update();
   }
 
   this.add_method = function(method)
@@ -120,6 +121,7 @@ function Module(rune)
 
   this.key_escape = function()
   { 
+    
   }
 
   this.key_delete = function()

scripts/modules/terminal.js

@@ -94,8 +94,9 @@ function Terminal(rune)
   
   this.query = function(input_str)
   {
+    if(input_str.trim() == ""){ return; }
     if(this.locks.length > 0){ console.warn("Trying: "+input_str+", Locked: ",this.locks); return; }
-    console.warn(input_str);
+
     this.lock("query");
     this.input_element.value = "";
 

scripts/modules/widget.js

@@ -0,0 +1,59 @@
+function Widget(rune)
+{
+  Module.call(this,rune);
+
+  this.element = document.createElement("div");
+  this.element.setAttribute("id","widget");
+
+  this.install = function()
+  {
+    ronin.element.appendChild(this.element);
+  }
+
+  this.update = function()
+  {
+    var s = "";
+
+    for (var key in ronin.modules){
+      s += ronin.modules[key].widget() ? "<span class='"+key+"'><name>"+key+"</name>"+ronin.modules[key].widget()+"</span> " : "";
+    }
+
+    this.element.innerHTML = s;
+  }
+
+  // this.widget = function()
+  // {
+  //   if(!this.active_layer){ return ""; }
+
+  //   return this.rune+" "+this.settings["size"].render();
+  // }
+
+  // // Widget
+
+  this.update_widget = function()
+  {
+    if(!this.active_layer){ return; }
+
+    var s = "";
+    
+    s += "<span class='module'>";
+    for (var key in ronin.modules){
+      s += 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;
+  }
+}