Progress on zoom

sources/scripts/core/commander.js

@@ -117,6 +117,16 @@ function Commander()
     ronin.commander.update();    
   }
 
+  this.show = function()
+  {
+    this.el.style.display = "block";
+  }
+
+  this.hide = function()
+  {
+    this.el.style.display = "none";
+  }
+
   this.query = function()
   {
     return new Query(ronin.commander.input_el.value);

sources/scripts/core/cursor.js

@@ -8,10 +8,11 @@ function Cursor(rune)
   this.query = null;
   this.mode = "vertex";
 
-  this.color = "#444444"
+  this.color = "#000000"
   this.color_alt = "#ff0000"
   this.size = 4;
   this.under = false;
+  this.pos = {x:0,y:0};
 
   this.draw_cursor = function(pos,touch = false)
   {
@@ -33,11 +34,26 @@ function Cursor(rune)
     ctx.closePath();
   }
 
+  this.mouse_pos = function(e)
+  {
+    var pos = {x:e.clientX,y:e.clientY};
+
+    pos.x = ((pos.x/ronin.frame.width) / ronin.frame.zoom.scale) * ronin.frame.width;
+    pos.y = ((pos.y/ronin.frame.height) / ronin.frame.zoom.scale) * ronin.frame.height;
+
+    pos.x -= (ronin.frame.zoom.offset.x / ronin.frame.zoom.scale);
+    pos.y -= (ronin.frame.zoom.offset.y / ronin.frame.zoom.scale);
+
+    var magnet_pos = ronin.magnet.filter({x:pos.x,y:pos.y});
+    return magnet_pos;
+  }
+
   this.mouse_down = function(e)
   {
     e.preventDefault();
 
-    var pos = ronin.magnet.filter({x:e.clientX,y:e.clientY});
+    var pos = ronin.cursor.mouse_pos(e);
+    ronin.cursor.pos = pos;
 
     // Color Pick
     if(ronin.commander.input_el.value == "~"){
@@ -77,7 +93,8 @@ function Cursor(rune)
   {
     e.preventDefault();
 
-    var pos = ronin.magnet.filter({x:e.clientX,y:e.clientY});
+    var pos = ronin.cursor.mouse_pos(e);
+    ronin.cursor.pos = pos;
 
     ronin.cursor.draw_cursor({x:pos.x,y:pos.y});
 
@@ -107,7 +124,8 @@ function Cursor(rune)
   {   
     e.preventDefault();
 
-    var pos = ronin.magnet.filter({x:e.clientX,y:e.clientY});
+    var pos = ronin.cursor.mouse_pos(e);
+    ronin.cursor.pos = pos;
 
     ronin.cursor.draw_cursor({x:pos.x,y:pos.y},true);
     
@@ -120,10 +138,11 @@ function Cursor(rune)
     ronin.cursor.mode = "vertex";
 
     ronin.cursor.query = ronin.commander.input_el.value;
+  }
 
-    if(ronin.cursor.under){
-      ronin.cursor.flatten();
-    }
+  this.mouse_alt = function(e)
+  {
+    console.log(e);
   }
 
   this.flatten = function()
@@ -149,10 +168,11 @@ function Cursor(rune)
 
   this.drag = function(line)
   {
+    var target = this.under ? ronin.layers.under : ronin.layers.render;
     var offset = make_offset(line.from,line.to);
-    var data = ronin.render.select();
-    ronin.render.clear();
-    ronin.render.context().putImageData(data, offset.x * -2, offset.y * -2);
+    var data = target.select();
+    target.clear();
+    target.context().putImageData(data, offset.x * -2, offset.y * -2);
   }
 
   this.swap_colors = function()

sources/scripts/core/keyboard.js

@@ -31,12 +31,16 @@ function Keyboard()
       ronin.guide.clear();
       ronin.guide.inspect = false;
       ronin.preview.clear();
+      if(!ronin.commander.is_focused()){
+        ronin.commander.hide();
+      }
     }
 
     if(e.key == "tab" || e.keyCode == 9){
       e.preventDefault();
       ronin.cursor.update();
       ronin.commander.autocomplete();
+      ronin.commander.show();
       return;
     }
 
@@ -88,6 +92,21 @@ function Keyboard()
       ronin.cursor.swap_layer();
     }
 
+    if(e.key == "1"){
+      e.preventDefault();
+      ronin.frame.methods.zoom.run(1);
+    }
+
+    if(e.key == "2"){
+      e.preventDefault();
+      ronin.frame.methods.zoom.run(2);
+    }
+
+    if(e.key == "3"){
+      e.preventDefault();
+      ronin.frame.methods.zoom.run(4);
+    }
+
     ronin.hint.update(e);
   }
 }

sources/scripts/core/layer.js

@@ -1,6 +1,7 @@
 function Layer()
 {
   this.el = document.createElement('canvas');
+  this.className = "layer";
 
   this.install = function()
   {