Added mouse drag and various minor visual changes.

scripts/modules/brush.js

@@ -67,7 +67,7 @@ function Brush()
   {
     if(this.is_drawing === false){return;}
     
-    this.position = new Position(e.clientX,e.clientY);
+    this.position = new Position(e.clientX - parseFloat(ronin.canvas.element.style.left),e.clientY- parseFloat(ronin.canvas.element.style.top));
     
     for (i = 0; i < this.pointers.length; i++) {
       this.pointers[i].draw();

scripts/modules/canvas.js

@@ -35,6 +35,8 @@ function Canvas(element)
   {
     this.element.setAttribute('width',rect.width+"px");
     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);
   }
   
   this.context = function()
@@ -46,4 +48,29 @@ 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.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/modules/filter.eval.js

@@ -13,10 +13,10 @@ Filter.prototype.filter_eval = function(pixels = this.pixels(),p = null)
     
     var q = (x % parseInt(p[0]) === 0 && y % parseInt(p[1]) === 0);
     
-    if(q === true){
-      data[i]     = 255;     // red
-      data[i + 1] = 0; // green
-      data[i + 2] = 0; // blue
+    if(x % 20 == 0 && y % 20 == 0){
+      data[i]     = 50;     // red
+      data[i + 1] = 50; // green
+      data[i + 2] = 50; // blue
       data[i + 3] = 255; // alpha?
     }
   }

scripts/modules/hint.js

@@ -11,7 +11,8 @@ function Hint(element)
       this.element.style.display = "block";
     }
     else{
-      this.element.style.display = "none";
+      this.element.innerHTML = this.default();
+      this.element.style.display = "block";
     }
   }
   
@@ -29,4 +30,15 @@ function Hint(element)
     
     return s;
   }
+  
+  this.default = function()
+  {
+    var s = "<span class='module'>Modules</span>";
+    
+    for (var key in ronin.modules){
+      s += "<span class='param'>"+ronin.modules[key].constructor.name+"<span> <span class='value'>"+key+"</span> ";
+    }
+    
+    return s;
+  }
 }

scripts/modules/overlay.js

@@ -106,6 +106,8 @@ function Overlay(element)
   {
     this.element.setAttribute('width',rect.width+"px");
     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);
   }
   
   this.show_guide = function(position,rect)
@@ -135,4 +137,29 @@ 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;
+  }
 }