Migrated Canvas to the new unit systems.

index.html

@@ -5,6 +5,7 @@
     <script type="text/javascript" src="scripts/unit.rect.js"></script>
     <script type="text/javascript" src="scripts/unit.color.js"></script>
     <script type="text/javascript" src="scripts/unit.position.js"></script>
+    <script type="text/javascript" src="scripts/unit.command.js"></script>
     
     <script type="text/javascript" src="scripts/ronin.module.js"></script>
     <script type="text/javascript" src="scripts/ronin.canvas.js"></script>

scripts/commander.js

@@ -15,16 +15,15 @@ function Commander(element,element_input)
     this.element_input.value = "";
   }
   
-  this.active = function(command)
+  this.active = function(cmd_array)
   {
-    var parts = command;
+    var key = cmd_array[0];
-    var key = parts[0];
+    cmd_array.shift();
-    parts.shift();
+    var cmd = new Command(cmd_array);
-    var params = parts;
     
     switch(key) {
       case "@":
-        ronin.canvas.active(params);
+        ronin.canvas.active(cmd);
         break;
       case "~":
         ronin.history.active(params);
@@ -42,7 +41,7 @@ function Commander(element,element_input)
         ronin.pointer.active(params);
         break;
       case "|":
-        ronin.guide.active(params);
+        ronin.overlay.active(params);
         break;
       case "^":
         ronin.translate.active(params);
@@ -111,16 +110,15 @@ function Commander(element,element_input)
     */
   }
   
-  this.passive = function(command)
+  this.passive = function(cmd_array)
   {
-    var parts = command;
+    var key = cmd_array[0];
-    var key = parts[0];
+    cmd_array.shift();
-    parts.shift();
+    var cmd = new Command(cmd_array);
-    var params = parts;
     
     switch(key) {
       case "@":
-        ronin.canvas.passive(params);
+        ronin.canvas.passive(cmd);
         break;
       case "~":
         ronin.history.passive(params);
@@ -135,7 +133,7 @@ function Commander(element,element_input)
         ronin.pointer.passive(params);
         break;
       case "|":
-        ronin.guide.passive(params);
+        ronin.overlay.passive(params);
         break;
       case "^":
         ronin.translate.passive(params);

scripts/ronin.canvas.js

@@ -4,28 +4,27 @@ function Canvas(element)
   
   this.element = element;
   
-  this.active = function(p)
+  this.active = function(cmd)
   {
-    if(p[0].indexOf("x") >= 0){
+    if(cmd.rect()){
-      var rect = new Rect(p[0]);
+      this.resize(cmd.rect());
-      this.resize(rect);
+      ronin.overlay.resize(cmd.rect());
-      ronin.overlay.resize(rect);
     }
     
-    if(p.length > 1 && p[1].indexOf("#") >= 0){
+    if(cmd.color()){
-      var color = new Color(p[1]);
+      console.log(cmd.color());
-      console.log(color);
-      
       this.element.getContext('2d').beginPath();
       this.element.getContext('2d').rect(0, 0, canvas.width, canvas.height);
-      this.element.getContext('2d').fillStyle = color.hex;
+      this.element.getContext('2d').fillStyle = cmd.color().hex;
       this.element.getContext('2d').fill();
     }
   }
   
-  this.passive = function(p)
+  this.passive = function(cmd)
   {
-    console.log("TODO: Show guide");
+    if(cmd.rect()){
+      ronin.overlay.show_guide(null,cmd.rect());
+    }
   }
   
   //

scripts/ronin.overlay.js

@@ -4,9 +4,43 @@ function Overlay(element)
   
   this.element = element;
   
+  // Module
+  
+  this.passive = function(p)
+  {
+  }
+  
   this.resize = function(rect)
   {
     this.element.setAttribute('width',rect.width+"px");
     this.element.setAttribute('height',rect.height+"px");
   }
+  
+  this.show_guide = function(position,rect)
+  {
+    this.clear();
+    context.beginPath();
+    
+    this.context().moveTo(0,0);
+    this.context().lineTo(rect.width,0);
+    this.context().lineTo(rect.width,rect.height);
+    this.context().lineTo(0,rect.height);
+    this.context().lineTo(0,0);
+    
+    context.lineCap="round";
+    context.lineWidth = 1;
+    context.strokeStyle = "#ff0000";
+    context.stroke();
+    context.closePath();
+  }
+  
+  this.context = function()
+  {
+    return this.element.getContext('2d');
+  }
+  
+  this.clear = function()
+  {
+    this.context().clearRect(0, 0, canvas.width, canvas.height);
+  }
 }

scripts/unit.command.js

@@ -0,0 +1,28 @@
+function Command(cmd_array)
+{
+  this.cmd_array = cmd_array;
+  
+  this.rect = function()
+  {
+    for (i = 0; i < this.cmd_array.length; i++) {
+      if(this.cmd_array[i].indexOf("x") >= 0){ return new Rect(this.cmd_array[i]); }
+    }
+    return null;
+  }
+  
+  this.position = function()
+  {
+    for (i = 0; i < this.cmd_array.length; i++) {
+      if(this.cmd_array[i].indexOf(",") >= 0){ return new Position(this.cmd_array[i]); }
+    }
+    return null;
+  }
+  
+  this.color = function()
+  {
+    for (i = 0; i < this.cmd_array.length; i++) {
+      if(this.cmd_array[i].indexOf("#") >= 0){ return new Color(this.cmd_array[i]); }
+    }
+    return null;
+  }
+}