Added mouse drag and various minor visual changes.

scripts/commander.js

@@ -47,8 +47,8 @@ function Commander(element,element_input)
     this.storage.push(content.join(" "));
     this.storage_index = this.storage.length;
     
-    var key = content[0];
-    content.shift();
+    var key = content[0][0];
+    content[0] = content[0].slice(1);
     var cmd = new Command(content);
     
     switch(key) {
@@ -94,8 +94,8 @@ function Commander(element,element_input)
   
   this.passive = function(content)
   {
-    var key = content[0];
-    content.shift();
+    var key = content[0][0];
+    content[0] = content[0].slice(1);
     this.cmd = new Command(content);
     ronin.module = null;
     

scripts/init.js

@@ -7,11 +7,26 @@ var commander = new Commander(document.getElementById("commander"),document.getE
 
 // Interactive
 
-document.addEventListener('mousemove', function(e)  { ronin.brush.draw(e); ;
+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); }
+}, 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); }
+}, 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);  }
+  document.getElementById("commander_input").focus();
 }, false);
-document.addEventListener('mousedown', function(e)  { if(e.which != 1){ return; } ronin.brush.draw_start(e); ronin.brush.draw(e) }, false);
-document.addEventListener('mouseup',   function(e)  { ronin.brush.draw_stop(e); document.getElementById("commander_input").focus();}, false);
-
 
 var keyboard = new Keyboard();
 document.onkeyup = function myFunction(){ keyboard.listen(event); };
+
+var starting_canvas = new Rect();
+starting_canvas.width = window.innerWidth - 200;
+starting_canvas.height = window.innerHeight - 200;
+
+ronin.canvas.resize(starting_canvas);
+ronin.overlay.resize(starting_canvas);

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;
+  }
 }

scripts/ronin.js

@@ -1,11 +1,21 @@
 function Ronin()
 {
+  this.modules  = {};
+  
+  this.hint     = new Hint();
   this.canvas   = new Canvas();
   this.overlay  = new Overlay();
   this.brush    = new Brush();
   this.file     = new File();
-  this.hint     = new Hint();
   this.filter   = new Filter();
   this.stroke   = new Stroke();
   this.vector   = new Vector();
+  
+  this.modules["@"] = this.canvas;
+  this.modules["|"] = this.overlay;
+  this.modules[">"] = this.brush;
+  this.modules["/"] = this.file;
+  this.modules[":"] = this.filter;
+  this.modules["-"] = this.stroke;
+  this.modules["+"] = this.vector;
 }

scripts/units/rect.js

@@ -4,8 +4,8 @@ function Rect(rect_str)
   
   this.rect_str = rect_str;
   
-  this.width = parseFloat(this.rect_str.split("x")[0]);
-  this.height = parseFloat(this.rect_str.split("x")[1]);
+  this.width = rect_str ? parseFloat(this.rect_str.split("x")[0]) : 0;
+  this.height = rect_str ? parseFloat(this.rect_str.split("x")[1]) : 0;
   
   this.render = function()
   {