Implemented basic path tool

sources/scripts/core/commander.js

@@ -40,11 +40,15 @@ function Commander()
 
   this.on_input = function(e)
   {
-    console.log("input");
     ronin.hint.update();
     ronin.guide.update();
   }
 
+  this.focus = function()
+  {
+    this.input_el.focus();
+  }
+
   this.blur = function()
   {
     this.input_el.blur();

sources/scripts/core/cursor.js

@@ -5,6 +5,13 @@ function Cursor(rune)
 
   this.query = null;
 
+  this.mode = "vertex";
+
+  // default vertex
+  // shift rect
+  // alt -> arc_to_clockwise
+  // ctrl -> arc_to_counterclockwise
+
   this.mouse_down = function(e)
   {
     e.preventDefault();
@@ -14,6 +21,10 @@ function Cursor(rune)
 
     // Save original query
     ronin.cursor.query = ronin.commander.input_el.value;
+
+    if(e.shiftKey){ ronin.cursor.mode = "rect"; }
+    if(e.altKey){ ronin.cursor.mode = "arc_to"; }
+    if(e.ctrlKey){ ronin.cursor.mode = "cc_arc_to"; }
   }
 
   this.mouse_move = function(e)
@@ -49,6 +60,9 @@ function Cursor(rune)
     
     ronin.cursor.is_down = false;
     ronin.cursor.line = {};
+    ronin.cursor.mode = "vertex";
+
+    ronin.cursor.query = ronin.commander.input_el.value;
   }
 
   this.inject_query = function()
@@ -58,15 +72,32 @@ function Cursor(rune)
     var a = ronin.cursor.line.origin;
     var b = ronin.cursor.line.destination ? ronin.cursor.line.destination : ronin.cursor.line.from;
 
-    if(distance_between(a,b) > 10){
+    var str = "<error>";
+
+    if(ronin.cursor.mode == "vertex"){
+      str = b.x+","+b.y;
+    }
+    else if(ronin.cursor.mode == "rect"){
       var offset = a.x+","+a.y;
       var rect = (b.x - a.x)+"x"+(b.y - a.y);
-      var str = offset+"|"+rect;
+      str = offset+"|"+rect;
+    }
+    else if(ronin.cursor.mode == "arc_to"){
+      str = "@>"+b.x+","+b.y;
+    }
+    else if(ronin.cursor.mode == "cc_arc_to"){
+      str = "@<"+b.x+","+b.y;
+    }
+
+    // 
+    var i = ronin.cursor.query.indexOf("$");
+    var i1 = ronin.cursor.query.substr(i,1);
+    if(i1 == "$"){
+      ronin.commander.inject(ronin.cursor.query.replace("$+",str+"&$+"));
     }
     else{
-      var str = a.x+","+a.y;
+      ronin.commander.inject(ronin.cursor.query.replace("$",str));
     }
-    ronin.commander.inject(ronin.cursor.query.replace("$",str));
   }
 
   function distance_between(a,b)

sources/scripts/core/keyboard.js

@@ -19,6 +19,12 @@ function Keyboard()
       ronin.guide.update();
     }
 
+    if(e.key == "tab" || e.keyCode == 9){
+      e.preventDefault();
+      ronin.commander.focus();
+      return;
+    }
+
     if(e.key == "]"){
       e.preventDefault();
       ronin.brush.mod_size(1);

sources/scripts/core/layer.js

@@ -47,7 +47,6 @@ function Layer()
 
   this.clear = function()
   {
-    console.log("Clear")
     this.context().clearRect(0, 0, this.el.width * 2, this.el.height * 2);
   }
 }

sources/scripts/core/query.js

@@ -82,21 +82,33 @@ function Query(query_str = "")
 
   function parse_unit(unit_str)
   {
+    // Arc
+    if(unit_str.indexOf("@") == 0 ){
+      unit_str = unit_str.substr(1,unit_str.length-1);
+      var clockwise = unit_str.indexOf(">") == 0 ? true : false;
+      unit_str = unit_str.substr(1,unit_str.length-1);
+      return {x:parseInt(unit_str.split(",")[0]),y:parseInt(unit_str.split(",")[1]),clockwise:clockwise};
+    }
     if(unit_str.indexOf(".") > -1 && unit_str.indexOf("/") > -1 ){
       return unit_str;
     }
+    // Rect
     if(unit_str.indexOf("|") > -1 && unit_str.indexOf(",") > -1 && unit_str.indexOf("x") > -1){
       return Object.assign(parse_unit(unit_str.split("|")[0]), parse_unit(unit_str.split("|")[1]));
     }
+    // Pos
     if(unit_str.indexOf(",") > -1){
       return {x:parseInt(unit_str.split(",")[0]),y:parseInt(unit_str.split(",")[1])};
     }
+    // Size
     if(unit_str.indexOf("x") > -1){
       return {width:parseInt(unit_str.split("x")[0]),height:parseInt(unit_str.split("x")[1])};
     }
+    // Float
     if(unit_str.indexOf(".") > -1 ){
       return parseFloat(unit_str);
     }
+    // Any
     return unit_str;
   }
 }

sources/scripts/modules/path.js

@@ -2,13 +2,56 @@ function Path()
 {
   Module.call(this,"path");
 
-  this.methods.stroke = function()
+  this.methods.stroke = function(q)
   {
+    var path = ronin.path.create_path(q);
 
+    var ctx = ronin.render.context();
+
+    ctx.beginPath();
+    ctx.lineCap = "butt";
+    ctx.lineWidth = 30;
+    ctx.strokeStyle = "black";
+    ctx.stroke(new Path2D(path));
+    ctx.closePath();
   }
 
   this.methods.fill = function()
   {
     
   }
+
+  this.create_path = function(q_array)
+  {
+    var svg_path = "";
+    var prev = {x:0,y:0};
+    for(q_id in q_array){
+      var coord = q_array[q_id];
+      if(!coord.x || !coord.y){ continue; }
+      coord.x *= 2; coord.y *= 2;
+      if(svg_path == ""){
+        var origin = {x:coord.x,y:coord.y};
+        svg_path += "M"+(coord.x)+","+(coord.y)+" ";
+      }
+      else if(coord.clockwise == true){
+        var offset = make_offset(coord,prev);
+        svg_path += "a"+(offset.x)+","+(offset.y)+" 0 0,1 "+(offset.x)+","+(offset.y);
+      }
+      else if(coord.clockwise == false){
+        var offset = make_offset(coord,prev);
+        svg_path += "a"+(offset.x)+","+(offset.y)+" 0 0,0 "+(offset.x)+","+(offset.y);        
+      }
+      else{
+        var offset = make_offset(coord,prev);
+        svg_path += "l"+(offset.x)+","+(offset.y)+" ";  
+      }
+      prev = coord;
+    }
+    return svg_path;
+  }
+
+  function make_offset(a,b)
+  {
+    return {x:a.x-b.x,y:a.y-b.y};
+  }
 }

sources/scripts/ronin.js

@@ -68,6 +68,7 @@ function Ronin()
     this.grid.update();
     this.guide.update();
 
-    this.commander.input_el.value = "io import:~/Desktop/test.png anchor=$";
+    // this.commander.input_el.value = "io import:~/Desktop/test.png anchor=$";
+    this.commander.input_el.value = "path stroke:$+";
   }
 }