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 @@
<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>
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:$+";