From 10be02f444074ea8fa47e710b4757cb539332f49 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Thu, 28 Sep 2017 14:18:05 +1300 Subject: [PATCH] Path preview layer --- sources/index.html | 1 + sources/links/main.css | 3 ++- sources/scripts/core/commander.js | 13 +++++++++++-- sources/scripts/core/cursor.js | 27 ++++++++++++++++++--------- sources/scripts/layers/grid.js | 1 + sources/scripts/layers/preview.js | 6 ++++++ sources/scripts/modules/frame.js | 1 + sources/scripts/modules/magnet.js | 6 ++++++ sources/scripts/modules/path.js | 18 ++++++++++++++++++ sources/scripts/ronin.js | 6 +++++- 10 files changed, 69 insertions(+), 13 deletions(-) create mode 100644 sources/scripts/layers/preview.js diff --git a/sources/index.html b/sources/index.html index 97c29c2..d8817f7 100644 --- a/sources/index.html +++ b/sources/index.html @@ -13,6 +13,7 @@ + diff --git a/sources/links/main.css b/sources/links/main.css index 39877e1..a08e8c8 100644 --- a/sources/links/main.css +++ b/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; } diff --git a/sources/scripts/core/commander.js b/sources/scripts/core/commander.js index 8cb83bb..36a41ee 100644 --- a/sources/scripts/core/commander.js +++ b/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() diff --git a/sources/scripts/core/cursor.js b/sources/scripts/core/cursor.js index d89ee43..3108ec7 100644 --- a/sources/scripts/core/cursor.js +++ b/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; diff --git a/sources/scripts/layers/grid.js b/sources/scripts/layers/grid.js index 465e64a..ac7012a 100644 --- a/sources/scripts/layers/grid.js +++ b/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){ diff --git a/sources/scripts/layers/preview.js b/sources/scripts/layers/preview.js new file mode 100644 index 0000000..5f0ef77 --- /dev/null +++ b/sources/scripts/layers/preview.js @@ -0,0 +1,6 @@ +function Preview() +{ + Layer.call(this); + + this.el.id = "preview"; +} \ No newline at end of file diff --git a/sources/scripts/modules/frame.js b/sources/scripts/modules/frame.js index f29230e..32f8a35 100644 --- a/sources/scripts/modules/frame.js +++ b/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); } } \ No newline at end of file diff --git a/sources/scripts/modules/magnet.js b/sources/scripts/modules/magnet.js index 8ad39bf..946c828 100644 --- a/sources/scripts/modules/magnet.js +++ b/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}; + } } \ No newline at end of file diff --git a/sources/scripts/modules/path.js b/sources/scripts/modules/path.js index b745ac0..0e2c0ce 100644 --- a/sources/scripts/modules/path.js +++ b/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 = ""; diff --git a/sources/scripts/ronin.js b/sources/scripts/ronin.js index 6af93ab..ec86c53 100644 --- a/sources/scripts/ronin.js +++ b/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:$+";