From 22e364ef5a8a3101063c778424c2c4eb7796f3de Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Thu, 28 Sep 2017 11:16:24 +1300 Subject: [PATCH] Implemented basic path tool --- sources/scripts/core/commander.js | 6 ++++- sources/scripts/core/cursor.js | 39 ++++++++++++++++++++++++--- sources/scripts/core/keyboard.js | 6 +++++ sources/scripts/core/layer.js | 1 - sources/scripts/core/query.js | 12 +++++++++ sources/scripts/modules/path.js | 45 ++++++++++++++++++++++++++++++- sources/scripts/ronin.js | 3 ++- 7 files changed, 104 insertions(+), 8 deletions(-) diff --git a/sources/scripts/core/commander.js b/sources/scripts/core/commander.js index 299fb83..8cb83bb 100644 --- a/sources/scripts/core/commander.js +++ b/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(); diff --git a/sources/scripts/core/cursor.js b/sources/scripts/core/cursor.js index 9b1d76e..51bd8c6 100644 --- a/sources/scripts/core/cursor.js +++ b/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 = ""; + + 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) diff --git a/sources/scripts/core/keyboard.js b/sources/scripts/core/keyboard.js index b2f1faf..52ba068 100644 --- a/sources/scripts/core/keyboard.js +++ 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); diff --git a/sources/scripts/core/layer.js b/sources/scripts/core/layer.js index 8cc3f1e..c1be32d 100644 --- a/sources/scripts/core/layer.js +++ b/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); } } \ No newline at end of file diff --git a/sources/scripts/core/query.js b/sources/scripts/core/query.js index dc019b5..bfcf5aa 100644 --- a/sources/scripts/core/query.js +++ b/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; } } \ No newline at end of file diff --git a/sources/scripts/modules/path.js b/sources/scripts/modules/path.js index 71cd9e3..b745ac0 100644 --- a/sources/scripts/modules/path.js +++ b/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}; + } } \ No newline at end of file diff --git a/sources/scripts/ronin.js b/sources/scripts/ronin.js index 523eba8..2e4d09a 100644 --- a/sources/scripts/ronin.js +++ b/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:$+"; } } \ No newline at end of file