Added Stencil

sources/links/main.css

@@ -1,4 +1,4 @@
-body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace;}
+body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace; background:red;}
 *:focus {outline: none; }
 
 * { cursor: none }

sources/scripts/layers/guide.js

@@ -3,6 +3,7 @@ function Guide()
   Layer.call(this);
   
   this.el.id = "guide";
+  this.inspect = true;
 
   this.update = function()
   {
@@ -22,15 +23,18 @@ function Guide()
     }
   }
 
-  this.draw = function(u)
+  this.draw = function(u = null)
   { 
-    if(u.x && u.y){
+    if(u && u.x && u.y){
       this.draw_pos(u);
     }
-    if(u.width && u.height){
+    if(u && u.width && u.height){
       this.draw_rect(u);
       this.draw_pos({x:u.x + (u.width/2),y:u.y + (u.height/2)});
     }
+    if(this.inspect){
+      this.draw_inspector();
+    }
   }
 
   this.draw_rect = function(u)
@@ -59,6 +63,22 @@ function Guide()
     ctx.closePath();
   }
 
+
+  this.draw_line = function(u1,u2, color = "#000")
+  {
+    var ctx = this.context();
+
+    ctx.beginPath();
+    ctx.globalCompositeOperation="source-over";
+    ctx.moveTo(u1.x * 2,u1.y * 2);
+    ctx.lineTo(u2.x * 2,u2.y * 2);
+    ctx.lineCap="round";
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = color;
+    ctx.stroke();
+    ctx.closePath();
+  }
+
   this.draw_pos = function(u)
   {
     var ctx = this.context();
@@ -103,14 +123,72 @@ function Guide()
         a = a.concat(params);  
       }
     }
-
-    // for(setting in q.settings){
-    //   var params = q.settings[method_id];
-    //   if(!params){ return null; }
-    //   if(params[0]){ return params[0]; }
-    //   return params;
-    // }
-
     return a;
   }
+
+  this.draw_inspector = function()
+  {
+    // 
+    this.draw_line({x:ronin.frame.width/2,y:0},{x:ronin.frame.width/2,y:ronin.frame.height},"red");
+    this.draw_line({x:0,y:ronin.frame.height/2},{x:ronin.frame.width,y:ronin.frame.height/2},"red");
+
+    var ctx = this.context();
+
+    var w = ronin.frame.width * 2;
+    var h = ronin.frame.height * 2;
+    var angle = parseInt(ronin.commander.query().methods.inspect) > 0 ? parseInt(ronin.commander.query().methods.inspect) : 0;
+    var color = "red"
+    
+    ctx.translate(w/2,h/2);
+
+    ctx.rotate(angle*Math.PI/180);
+
+    this.line(ctx,-w,0,w,0,color);
+
+    this.line(ctx,w*0.4,-h,w*0.4,h,color);
+    this.line(ctx,-w*0.4,-h,-w*0.4,h,color);
+
+    this.line(ctx,-w,h*0.25,w,h*0.25,color);
+    this.line(ctx,-w,-h*0.25,w,-h*0.25,color);
+
+    this.line(ctx,w*0.1,0,w*0.1,h,color);
+    this.line(ctx,-w*0.1,0,-w*0.1,-h,color);
+
+    this.circle(ctx,w*0.4,-h*0.25,w*0.05,1,1.5,color);
+    this.circle(ctx,-w*0.4,h*0.25,w*0.05,0,0.5,color);
+
+    ctx.font = "5px Arial";
+    ctx.fillStyle = color; 
+    ctx.fillText(angle+"'",(w*0.4)+10,10);
+
+    ctx.font = "5px Arial";
+    ctx.fillStyle = color; 
+    ctx.fillText(angle+"'",(-w*0.4)-20,-10);
+
+    ctx.rotate(-angle*Math.PI/180);
+    ctx.translate(-w/2,-h/2);
+  }
+
+  this.line = function(context,x1,x2,y1,y2,color)
+  {
+    context.beginPath();
+    context.moveTo(x1,x2);
+    context.lineTo(y1,y2);
+    context.lineCap="round";
+    context.lineWidth = 0.5;
+    context.strokeStyle = color;
+    context.stroke();
+    context.closePath();
+  }
+
+  this.circle = function(context,x,y,r,c1,c2,color)
+  {
+    context.beginPath();
+    context.arc(x,y,r,c1*Math.PI,c2*Math.PI);
+    context.lineCap="round";
+    context.lineWidth = 0.5;
+    context.strokeStyle = color;
+    context.stroke();
+    context.closePath();
+  }
 }

sources/scripts/modules/frame.js

@@ -41,6 +41,11 @@ function Frame()
     ronin.render.fill(q);
   });
 
+  this.methods.inspect = new Method("inspect","","View canvas details",function(q){
+    ronin.layers.guide.inspect = ronin.layers.guide.inspect ? false : true;
+    ronin.layers.guide.draw();
+  });
+
   this.resize_to = function(size)
   {
     ronin.frame.width = size.width;

sources/scripts/modules/io.js

@@ -55,7 +55,8 @@ function IO()
   {
     var width = parseInt(img.naturalWidth * 0.5);
     var height = parseInt(img.naturalHeight * 0.5);
-    var scale = (params.width/width) * 2;
+
+    var scale = params.width > params.height ? (params.width/width) * 2 : (params.height/height) * 2;
 
     ctx.drawImage(img, params.x * 2,params.y * 2,width * scale,height * scale);    
   }

sources/scripts/modules/magnet.js

@@ -4,7 +4,7 @@ function Magnet()
 
   this.settings = {size:0,step:4};
 
-  this.methods.lock = new Method("lock","10x10","Magnetize cursor",function(q){
+  this.methods.lock = new Method("lock","10","Magnetize cursor",function(q){
     var size = parseInt(q);
     if(size < 5){ this.unlock(); return; }
     ronin.magnet.settings.size = size;

sources/scripts/ronin.js

@@ -17,7 +17,6 @@ function Ronin()
   this.io = new IO();
   this.brush = new Brush();
   this.frame = new Frame();
-  this.line = new Line();
   this.path = new Path();
   this.magnet = new Magnet();
   this.filter = new Filter();
@@ -34,7 +33,6 @@ function Ronin()
   this.modules = {
     brush : this.brush,
     frame : this.frame,
-    line : this.line,
     io : this.io,
     path : this.path,
     magnet : this.magnet,