Added cursor modes.

links/main.css

@@ -8,6 +8,7 @@ canvas:hover { cursor: crosshair;}
 #overlay { position:absolute; z-index:1000;}
 #workspace { position:absolute; background:#efefef; border-radius:3px;}
 #widget { color:#efefef; position:absolute; font-size:11px; line-height:30px;}
+#widget .cursor { float:right;}
 
 #commander { display:none; z-index: 2000; position:fixed; }
 #commander.visible { display:block; }

scripts/cursor.js

@@ -14,6 +14,7 @@ function Cursor()
   {
     if(this.mode.name == mode.name){ return; }
     this.mode = mode;
+    document.body.setAttribute("class",this.mode.name);
     ronin.widget.update();
   }
   

scripts/modes/mode.drag.js

@@ -4,18 +4,28 @@ function Mode_Drag()
   
   this.name = "Drag";
   
+  this.drag_from = null;
+
   this.mouse_down = function(event)
   {
-    ronin.drag_start(event); ronin.drag(event);
+    this.drag_from = new Position(event.clientX,event.clientY);
   }
   
   this.mouse_move = function(event)
   {
-    ronin.drag(event);
+    if(this.drag_from == null){ return; }
+    
+    var offset_x = this.drag_from.x - event.clientX;
+    var offset_y = this.drag_from.y - event.clientY;
+    
+    ronin.surface.style.left = ronin.surface.style.left ? parseInt(ronin.surface.style.left) - offset_x : offset_x;
+    ronin.surface.style.top = ronin.surface.style.top ? parseInt(ronin.surface.style.top) - offset_y : offset_y;
+    
+    this.drag_from = new Position(event.clientX,event.clientY);
   }
   
   this.mouse_up = function(event)
   {
-    ronin.drag_stop(event);
+    this.drag_from = null;
   }
 }

scripts/modes/mode.guide.js

@@ -4,18 +4,34 @@ function Mode_Guide()
   
   this.name = "Guide";
   
+  this.live_draw_from = null;
+
   this.mouse_down = function(event)
   {
-    ronin.overlay.live_draw_start(event);
+    ronin.overlay.clear();
+    ronin.overlay.draw_pointer(ronin.position_in_canvas(event));
+    this.live_draw_from = ronin.position_in_canvas(event);
+    commander.show();
+    commander.element_input.focus();
+    commander.element_input.value = "| "+this.live_draw_from.render();
   }
   
   this.mouse_move = function(event)
   {
-    ronin.overlay.live_draw(event);
+    if(this.live_draw_from == null){ return; }
+    
+    ronin.overlay.clear();
+    
+    var rect = new Rect();
+    rect.width = ronin.position_in_canvas(event).x - this.live_draw_from.x;
+    rect.height = ronin.position_in_canvas(event).y - this.live_draw_from.y;
+  
+    ronin.overlay.draw_rect(this.live_draw_from,rect);
+    commander.element_input.value = "| "+this.live_draw_from.render()+" "+rect.render();
   }
   
   this.mouse_up = function(event)
   {
-    
+    commander.element_input.focus();
   }
 }

scripts/modules/canvas.js

@@ -42,6 +42,7 @@ function Canvas(rune)
     
     ronin.widget.element.style.left = (window.innerWidth/2)-(rect.width/2);
     ronin.widget.element.style.top = (window.innerHeight/2)+(rect.height/2);
+    ronin.widget.element.style.width = rect.width+"px";
     
     ronin.widget.update();
     

scripts/modules/overlay.js

@@ -101,33 +101,6 @@ function Overlay(rune)
     this.context().closePath();
   }
   
-  // Live Draw(Ctrl)
-  
-  this.live_draw_from = null;
-  
-  this.live_draw_start = function(e)
-  {
-    this.clear();
-    
-    this.draw_pointer(ronin.position_in_canvas(e));
-    this.live_draw_from = ronin.position_in_canvas(e);
-    commander.show();
-    commander.element_input.focus();
-    commander.element_input.value = "| "+this.live_draw_from.render();
-  }
-  
-  this.live_draw = function(e)
-  {
-    this.clear();
-    
-    var rect = new Rect();
-    rect.width = ronin.position_in_canvas(e).x - this.live_draw_from.x;
-    rect.height = ronin.position_in_canvas(e).y - this.live_draw_from.y;
-  
-    this.draw_rect(this.live_draw_from,rect);
-    commander.element_input.value = "| "+this.live_draw_from.render()+" "+rect.render();
-  }
-  
   this.resize = function(rect)
   {
     this.element.setAttribute('width',rect.width+"px");

scripts/ronin.js

@@ -32,29 +32,4 @@ function Ronin()
   {
     return 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));
   }
-  
-  // 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 = position_in_canvas(e);
-  }
-  
-  this.drag_stop = function(e)
-  {
-    this.drag_from = null;
-  }
 }

scripts/widget.js

@@ -10,7 +10,7 @@ function Widget()
       s += ronin.modules[key].widget();
     }
   
-    s += ronin.cursor.mode.widget();
+    s += "<span class='cursor'>"+ronin.cursor.mode.widget()+"</span>";
     
     this.element.innerHTML = s;
   }