Path preview layer

sources/scripts/modules/frame.js

@@ -53,5 +53,6 @@ function Frame()
     ronin.grid.resize_to(size);
     ronin.guide.resize_to(size);
     ronin.cursor.resize_to(size);
+    ronin.preview.resize_to(size);
   }
 }

sources/scripts/modules/magnet.js

@@ -19,4 +19,10 @@ function Magnet()
   {
     console.log(q)    
   }
+
+  this.filter = function(pos)
+  {
+    var s = this.settings.size;
+    return {x:parseInt(pos.x/s)*s,y:parseInt(pos.y/s)*s};
+  }
 }

sources/scripts/modules/path.js

@@ -4,6 +4,8 @@ function Path()
 
   this.methods.stroke = function(q)
   {
+    ronin.preview.clear();
+
     var path = ronin.path.create_path(q);
 
     var ctx = ronin.render.context();
@@ -21,6 +23,22 @@ function Path()
     
   }
 
+  this.preview = function(q)
+  {
+    if(!q.methods.stroke){ return; }
+
+    ronin.preview.clear();
+    var path = ronin.path.create_path(q.methods.stroke);
+
+    var ctx = ronin.preview.context();
+    ctx.beginPath();
+    ctx.lineCap = "butt";
+    ctx.lineWidth = 30;
+    ctx.strokeStyle = "black";
+    ctx.stroke(new Path2D(path));
+    ctx.closePath();
+  }
+
   this.create_path = function(q_array)
   {
     var svg_path = "";