Path preview layer

sources/index.html

@@ -13,6 +13,7 @@
     <script type="text/javascript" src="scripts/layers/grid.js"></script>
     <script type="text/javascript" src="scripts/layers/guide.js"></script>
     <script type="text/javascript" src="scripts/layers/render.js"></script>
+    <script type="text/javascript" src="scripts/layers/preview.js"></script>
 
     <script type="text/javascript" src="scripts/core/docs.js"></script>
     <script type="text/javascript" src="scripts/core/port.js"></script>

sources/links/main.css

@@ -9,7 +9,8 @@ yu { display:block; }
 #grid { z-index:1;position: fixed; }
 #guide { z-index:700;position: fixed; }
 #render { z-index:800; position: fixed; }
-#cursor { z-index:800; position: fixed; }
+#preview { z-index:800; position: fixed; }
+#cursor { z-index:890; position: fixed; }
 #commander { position: fixed; bottom:15px; left:5px; width:100vw; height:20px; line-height: 20px;  -webkit-user-select: none;-webkit-app-region: drag; z-index:900;}
 #commander input { background: transparent;width: calc(100vw - 30px);display: block;line-height: 20px;font-size: 11px;color: black; margin-left:20px; }
 #hint { position: fixed; bottom:15px; left:5px; width:100vw; height:20px; line-height: 20px; font-size: 11px;color: #999; margin-left:20px; }

sources/scripts/core/commander.js

@@ -38,12 +38,21 @@ function Commander()
     ronin.guide.update();
   }
 
-  this.on_input = function(e)
+  this.update = function()
   {
+    var q = ronin.commander.query();
+    if(ronin.modules[q.module] && ronin.modules[q.module]["preview"]){
+      ronin.modules[q.module].preview(q);
+    } 
     ronin.hint.update();
     ronin.guide.update();
   }
 
+  this.on_input = function(e)
+  {
+    ronin.commander.update();
+  }
+
   this.focus = function()
   {
     this.input_el.focus();
@@ -62,7 +71,7 @@ function Commander()
   this.inject = function(str)
   {
     ronin.commander.input_el.value = str;
-    ronin.guide.update();
+    ronin.commander.update();
   }
 
   this.query = function()

sources/scripts/core/cursor.js

@@ -29,10 +29,13 @@ function Cursor(rune)
   this.mouse_down = function(e)
   {
     e.preventDefault();
-    ronin.cursor.draw_cursor({x:e.clientX,y:e.clientY},true);
 
-    ronin.cursor.line.origin = {x:e.clientX,y:e.clientY};
-    ronin.cursor.line.from = {x:e.clientX,y:e.clientY};
+    var pos = ronin.magnet.filter({x:e.clientX,y:e.clientY});
+
+    ronin.cursor.draw_cursor({x:pos.x,y:pos.y},true);
+
+    ronin.cursor.line.origin = {x:pos.x,y:pos.y};
+    ronin.cursor.line.from = {x:pos.x,y:pos.y};
 
     // Save original query
     ronin.cursor.query = ronin.commander.input_el.value;
@@ -45,11 +48,14 @@ function Cursor(rune)
   this.mouse_move = function(e)
   {
     e.preventDefault();
-    ronin.cursor.draw_cursor({x:e.clientX,y:e.clientY});
+
+    var pos = ronin.magnet.filter({x:e.clientX,y:e.clientY});
+
+    ronin.cursor.draw_cursor({x:pos.x,y:pos.y});
 
     if(!ronin.cursor.line.from){ return; }
 
-    ronin.cursor.line.to = {x:e.clientX,y:e.clientY};
+    ronin.cursor.line.to = {x:pos.x,y:pos.y};
 
     if(ronin.commander.active_module()){
 
@@ -63,15 +69,18 @@ function Cursor(rune)
 
     ronin.cursor.inject_query();
     
-    ronin.cursor.line.from = {x:e.clientX,y:e.clientY};
+    ronin.cursor.line.from = {x:pos.x,y:pos.y};
   }
 
   this.mouse_up = function(e)
   {   
     e.preventDefault();
-    ronin.cursor.draw_cursor({x:e.clientX,y:e.clientY},true);
+
+    var pos = ronin.magnet.filter({x:e.clientX,y:e.clientY});
+
+    ronin.cursor.draw_cursor({x:pos.x,y:pos.y},true);
     
-    ronin.cursor.line.destination = {x:e.clientX,y:e.clientY};
+    ronin.cursor.line.destination = {x:pos.x,y:pos.y};
 
     ronin.cursor.inject_query();
     
@@ -84,7 +93,7 @@ function Cursor(rune)
 
   this.inject_query = function()
   {
-    if(ronin.cursor.query.indexOf("$") < 0){ return; }
+    if(ronin.cursor.query && ronin.cursor.query.indexOf("$") < 0){ return; }
 
     var a = ronin.cursor.line.origin;
     var b = ronin.cursor.line.destination ? ronin.cursor.line.destination : ronin.cursor.line.from;

sources/scripts/layers/grid.js

@@ -7,6 +7,7 @@ function Grid()
   this.draw = function(size = 60, step = 5)
   {
     var x = 1;
+    var size = size * 2;
     while(x < this.el.width/size){
       var y = 1;
       while(y < (this.el.height/size)-1){

sources/scripts/layers/preview.js

@@ -0,0 +1,6 @@
+function Preview()
+{
+  Layer.call(this);
+  
+  this.el.id = "preview";
+}

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 = "";

sources/scripts/ronin.js

@@ -12,6 +12,7 @@ function Ronin()
   this.grid = new Grid();
   this.guide = new Guide();
   this.render = new Render();
+  this.preview = new Preview();
 
   this.io = new IO();
   this.brush = new Brush();
@@ -25,7 +26,8 @@ function Ronin()
     grid : this.grid,
     guide : this.guide,
     render : this.render,
-    cursor : this.cursor
+    cursor : this.cursor,
+    preview : this.preview,
   };
 
   this.modules = {
@@ -47,6 +49,7 @@ function Ronin()
     this.grid.install();
     this.guide.install();
     this.render.install();
+    this.preview.install();
     this.cursor.install();
 
     this.commander.install();
@@ -70,6 +73,7 @@ function Ronin()
     this.grid.update();
     this.guide.update();
     this.cursor.update();
+    this.preview.update();
 
     // this.commander.input_el.value = "io import:~/Desktop/test.png anchor=$";
     // this.commander.input_el.value = "path stroke:$+";