Improved layout and added widget.

scripts/init.js

@@ -2,6 +2,8 @@ var ronin = new Ronin();
 ronin.canvas.element = document.getElementById('workspace');
 ronin.overlay.element = document.getElementById('overlay');
 ronin.hint.element = document.getElementById('commander_hint');
+ronin.surface = document.getElementById('surface');
+ronin.widget.element = document.getElementById('widget');
 
 var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));
 
@@ -9,15 +11,15 @@ var commander = new Commander(document.getElementById("commander"),document.getE
 
 document.addEventListener('mousemove', function(e)  {
   if(e.which == 1){ ronin.brush.draw(e); }
-  if(e.which == 2){ ronin.canvas.drag(e); ronin.overlay.drag(e); }
+  if(e.which == 2){ ronin.drag(e); }
 }, false);
 document.addEventListener('mousedown', function(e)  {
   if(e.which == 1){ ronin.brush.draw_start(e); ronin.brush.draw(e); }
-  if(e.which == 2){ ronin.canvas.drag_start(e); ronin.canvas.drag(e); ronin.overlay.drag_start(e); ronin.overlay.drag(e); }
+  if(e.which == 2){ ronin.drag_start(e); ronin.drag(e); }
 }, false);
 document.addEventListener('mouseup',   function(e)  {
   if(e.which == 1){ ronin.brush.draw_stop(e); }
-  if(e.which == 2){ ronin.canvas.drag_stop(e); ronin.overlay.drag_stop(e);  }
+  if(e.which == 2){ ronin.drag_stop(e) }
   document.getElementById("commander_input").focus();
 }, false);
 

scripts/module.js

@@ -16,4 +16,9 @@ function Module()
   {
     return "unknown";
   }
+  
+  this.widget = function()
+  {
+    return "";
+  }
 }

scripts/modules/brush.js

@@ -41,6 +41,7 @@ function Brush()
     if(cmd.value()){
       this.size = cmd.value().float;
     }
+    ronin.widget.update();
   }
   
   this.passive = function(cmd)
@@ -67,7 +68,7 @@ function Brush()
   {
     if(this.is_drawing === false){return;}
     
-    this.position = new Position(e.clientX - parseFloat(ronin.canvas.element.style.left),e.clientY- parseFloat(ronin.canvas.element.style.top));
+    this.position = new Position(e.clientX - parseFloat(ronin.surface.style.left) - parseFloat(ronin.canvas.element.style.left),e.clientY- parseFloat(ronin.surface.style.top) - parseFloat(ronin.canvas.element.style.top));
     
     for (i = 0; i < this.pointers.length; i++) {
       this.pointers[i].draw();
@@ -92,4 +93,8 @@ function Brush()
     }
   }
   
+  this.widget = function()
+  {
+    return "> "+this.size+" <span style='color:"+this.color.render()+"'>"+this.color.render()+"</span> ";
+  }
 }

scripts/modules/canvas.js

@@ -37,6 +37,11 @@ function Canvas(element)
     this.element.setAttribute('height',rect.height+"px");
     this.element.style.left = (window.innerWidth/2)-(rect.width/2);
     this.element.style.top = (window.innerHeight/2)-(rect.height/2);
+    
+    ronin.widget.element.style.left = (window.innerWidth/2)-(rect.width/2);
+    ronin.widget.element.style.top = (window.innerHeight/2)+(rect.height/2);
+    
+    ronin.widget.update();
   }
   
   this.context = function()
@@ -49,28 +54,8 @@ function Canvas(element)
     this.context().clearRect(0, 0, this.element.width, this.element.height);
   }
   
-  // Drag
-  
-  this.drag_from = null;
-  
-  this.drag_start = function(e)
+  this.widget = function()
   {
-    this.drag_from = new Position(e.clientX,e.clientY);
-  }
-  
-  this.drag = function(e)
-  {
-    if(e.which != 2){ return; }
-    
-    var offset_x = this.drag_from.x - e.clientX;
-    this.element.style.left = parseInt(this.element.style.left) - offset_x;
-    var offset_y = this.drag_from.y - e.clientY;
-    this.element.style.top = parseInt(this.element.style.top) - offset_y;
-    this.drag_from = new Position(e.clientX,e.clientY);
-  }
-  
-  this.drag_stop = function(e)
-  {
-    this.drag_from = null;
+    return "@ "+this.element.width+"x"+this.element.height+" ";
   }
 }

scripts/modules/overlay.js

@@ -137,29 +137,4 @@ function Overlay(element)
   {
     this.context().clearRect(0, 0, ronin.canvas.element.width, ronin.canvas.element.height);
   }
-  
-  // Drag
-  
-  this.drag_from = null;
-  
-  this.drag_start = function(e)
-  {
-    this.drag_from = new Position(e.clientX,e.clientY);
-  }
-  
-  this.drag = function(e)
-  {
-    if(e.which != 2){ return; }
-    
-    var offset_x = this.drag_from.x - e.clientX;
-    this.element.style.left = parseInt(this.element.style.left) - offset_x;
-    var offset_y = this.drag_from.y - e.clientY;
-    this.element.style.top = parseInt(this.element.style.top) - offset_y;
-    this.drag_from = new Position(e.clientX,e.clientY);
-  }
-  
-  this.drag_stop = function(e)
-  {
-    this.drag_from = null;
-  }
 }

scripts/ronin.js

@@ -3,6 +3,9 @@ function Ronin()
   this.modules  = {};
   
   this.hint     = new Hint();
+  this.widget   = new Widget();
+  this.surface  = null;
+  
   this.canvas   = new Canvas();
   this.overlay  = new Overlay();
   this.brush    = new Brush();
@@ -18,4 +21,29 @@ function Ronin()
   this.modules[":"] = this.filter;
   this.modules["-"] = this.stroke;
   this.modules["+"] = this.vector;
+  
+  // Drag
+  
+  this.drag_from = null;
+  
+  this.drag_start = function(e)
+  {
+    this.drag_from = new Position(e.clientX,e.clientY);
+  }
+  
+  this.drag = function(e)
+  {
+    if(e.which != 2){ return; }
+    
+    var offset_x = this.drag_from.x - e.clientX;
+    this.surface.style.left = this.surface.style.left ? parseInt(this.surface.style.left) - offset_x : offset_x;
+    var offset_y = this.drag_from.y - e.clientY;
+    this.surface.style.top = this.surface.style.top ? parseInt(this.surface.style.top) - offset_y : offset_y;
+    this.drag_from = new Position(e.clientX,e.clientY);
+  }
+  
+  this.drag_stop = function(e)
+  {
+    this.drag_from = null;
+  }
 }

scripts/widget.js

@@ -0,0 +1,15 @@
+function Widget()
+{
+  this.element = null;
+  
+  this.update = function()
+  {
+    var s = "";
+    
+    for (var key in ronin.modules){
+      s += ronin.modules[key].widget();
+    }
+    
+    this.element.innerHTML = s;
+  }
+}