dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Path preview layer

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-09-28 14:18:05 +13:00
parent fc203ea94a
commit 10be02f444
10 changed files with 69 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
sources/index.html
View File

@ -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>

3
sources/links/main.css
View File

@ -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; }

13
sources/scripts/core/commander.js
View File

@ -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()

27
sources/scripts/core/cursor.js
View File

@ -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;

1
sources/scripts/layers/grid.js
View File

@ -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){

6
sources/scripts/layers/preview.js Normal file
View File

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

1
sources/scripts/modules/frame.js
View File

@ -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);
}
}

6
sources/scripts/modules/magnet.js
View File

@ -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};
}
}

18
sources/scripts/modules/path.js
View File

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

6
sources/scripts/ronin.js
View File

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