Improved guide

This commit is contained in:
Devine Lu Linvega 2018-05-08 10:59:38 +12:00
parent 8e3d496719
commit 5afd2906b3
4 changed files with 27 additions and 38 deletions

View File

@ -1,14 +1,10 @@
body { padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: none; overflow: hidden; padding-left:5px; transition: background 500ms} body { padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: none; overflow: hidden; padding-left:5px; transition: background 500ms}
#app { display: flex; flex-direction: column; align-items: center;} #app { display: flex; flex-direction: column; align-items: center; -webkit-app-region: drag;}
#wrapper { padding: 25px; padding-bottom: 15px; -webkit-app-region: drag; padding-left:15px;} #wrapper { padding: 25px; padding-bottom: 15px; -webkit-app-region: drag; padding-left:15px;}
#dotgrid { margin:0px auto; position:relative; padding:10px;-webkit-app-region: no-drag; width:310px; height:310px; } #dotgrid { margin:0px auto; position:relative; padding:10px;-webkit-app-region: no-drag; width:310px; height:310px; }
#cursor { opacity: 1; width:6px; height:6px; position:absolute; z-index:25; border-radius:5px; border:2px solid black;} #cursor { opacity: 1; width:6px; height:6px; position:absolute; z-index:25; border-radius:15px; background:white; margin-left:2px; margin-top:2px;}
#cursor_from { width:4px; height:4px; margin-top:2px; margin-left:2px; position:absolute; z-index:2500; border-radius:10px; left:-100px;border:1px solid black;}
#cursor_to { width:4px; height:4px; margin-top:2px; margin-left:2px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
#cursor_end { width:4px; height:4px; margin-top:2px; margin-left:2px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
#cursor_x { position: absolute; top:0px; display: block; width:20px; height:10px; font-size: 11px; text-align: center; margin-left:10px; transition: left 100ms } #cursor_x { position: absolute; top:0px; display: block; width:20px; height:10px; font-size: 11px; text-align: center; margin-left:10px; transition: left 100ms }
#cursor_y { position: absolute; left:-10px; display: block; width:20px; height:10px; font-size: 11px; text-align: right; margin-top:15px; transition: top 100ms } #cursor_y { position: absolute; left:-10px; display: block; width:20px; height:10px; font-size: 11px; text-align: right; margin-top:15px; transition: top 100ms }
@ -54,6 +50,6 @@ body { background:var(--background) !important; }
.icon { color:var(--f_high) !important; stroke:var(--f_high) !important; } .icon { color:var(--f_high) !important; stroke:var(--f_high) !important; }
#dotgrid svg.vector { stroke:var(--f_high) !important; } #dotgrid svg.vector { stroke:var(--f_high) !important; }
#dotgrid #preview { stroke:var(--f_high) !important; } #dotgrid #preview { stroke:var(--f_high) !important; }
#dotgrid #cursor { border-color:var(--f_med); } #dotgrid #cursor { background:var(--f_med); }
#dotgrid #cursor.keyboard { border-color:var(--f_high) !Important; } #dotgrid #cursor.keyboard { border-color:var(--f_high) !Important; }

View File

@ -283,7 +283,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
dotgrid.preview(e.target.getAttribute("ar")); dotgrid.preview(e.target.getAttribute("ar"));
dotgrid.move_cursor(pos) dotgrid.move_cursor(pos)
dotgrid.guide.update(); dotgrid.guide.refresh();
e.preventDefault(); e.preventDefault();
} }
@ -490,7 +490,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.preview(); this.preview();
this.render.draw(); this.render.draw();
this.interface.update(); this.interface.update();
this.guide.update(); this.guide.refresh();
} }
// Draw // Draw

View File

@ -10,7 +10,7 @@ function Guide()
this.start = function() this.start = function()
{ {
this.clear(); this.clear();
this.draw(); this.refresh();
} }
this.toggle = function() this.toggle = function()
@ -18,19 +18,6 @@ function Guide()
this.el.style.opacity = !this.el.style.opacity || this.el.style.opacity == 1 ? 0 : 1; this.el.style.opacity = !this.el.style.opacity || this.el.style.opacity == 1 ? 0 : 1;
} }
this.draw = function()
{
for (var x = dotgrid.grid_x; x >= 0; x--) {
for (var y = dotgrid.grid_y; y >= 0; y--) {
var pos_x = parseInt(x * dotgrid.grid_width) + dotgrid.grid_width ;
var pos_y = parseInt(y * dotgrid.grid_height) + dotgrid.grid_height ;
var is_step = x % dotgrid.block_x == 0 && y % dotgrid.block_y == 0;
var radius = is_step ? 2.5 : 1.5;
dotgrid.guide.draw_marker({x:pos_x,y:pos_y},radius,is_step);
}
}
}
this.resize = function(size) this.resize = function(size)
{ {
this.el.width = (size.width+40)*2; this.el.width = (size.width+40)*2;
@ -38,7 +25,7 @@ function Guide()
this.el.style.width = (size.width+40)+"px"; this.el.style.width = (size.width+40)+"px";
this.el.style.height = (size.height+40)+"px"; this.el.style.height = (size.height+40)+"px";
this.update(); this.refresh();
} }
this.clear = function() this.clear = function()
@ -46,14 +33,28 @@ function Guide()
this.el.getContext('2d').clearRect(0, 0, this.el.width*2, this.el.height*2); this.el.getContext('2d').clearRect(0, 0, this.el.width*2, this.el.height*2);
} }
this.update = function() this.refresh = function()
{ {
console.log("refresh")
this.clear(); this.clear();
// Markers
for (var x = dotgrid.grid_x; x >= 0; x--) {
for (var y = dotgrid.grid_y; y >= 0; y--) {
var pos_x = parseInt(x * dotgrid.grid_width) + dotgrid.grid_width ;
var pos_y = parseInt(y * dotgrid.grid_height) + dotgrid.grid_height ;
var is_step = x % dotgrid.block_x == 0 && y % dotgrid.block_y == 0;
var radius = is_step ? 2.5 : 1.5;
this.draw_marker({x:pos_x,y:pos_y},radius,is_step);
}
}
// Verteces
for(id in dotgrid.tool.verteces){ for(id in dotgrid.tool.verteces){
this.draw_vertex(dotgrid.tool.verteces[id]); this.draw_vertex(dotgrid.tool.verteces[id]);
} }
// Handles
for(segment_id in dotgrid.tool.layer()){ for(segment_id in dotgrid.tool.layer()){
var segment = dotgrid.tool.layer()[segment_id]; var segment = dotgrid.tool.layer()[segment_id];
for(vertex_id in segment.verteces){ for(vertex_id in segment.verteces){
@ -66,7 +67,6 @@ function Guide()
if(dotgrid.translation){ if(dotgrid.translation){
this.draw_translation(); this.draw_translation();
} }
this.draw();
} }
this.draw_vertex = function(pos, radius = 5) this.draw_vertex = function(pos, radius = 5)
@ -101,13 +101,6 @@ function Guide()
ctx.strokeStyle = dotgrid.theme.active.f_low; ctx.strokeStyle = dotgrid.theme.active.f_low;
ctx.stroke(); ctx.stroke();
ctx.closePath(); ctx.closePath();
ctx.beginPath();
ctx.arc((pos.x * 2)+30, (pos.y * 2)+30, 2, 0, 2 * Math.PI, false);
ctx.fillStyle = dotgrid.theme.active.f_high;
ctx.fill();
ctx.strokeStyle = dotgrid.theme.active.background;
ctx.stroke();
ctx.closePath();
} }
this.draw_translation = function() this.draw_translation = function()

View File

@ -24,28 +24,28 @@ function Keyboard()
{ {
this.selector = {x:pos.x * -dotgrid.grid_width,y:pos.y * dotgrid.grid_height}; this.selector = {x:pos.x * -dotgrid.grid_width,y:pos.y * dotgrid.grid_height};
dotgrid.move_cursor(this.selector) dotgrid.move_cursor(this.selector)
dotgrid.guide.update(); dotgrid.guide.refresh();
dotgrid.draw(); dotgrid.draw();
} }
this.deselect = function() this.deselect = function()
{ {
dotgrid.tool.clear(); dotgrid.tool.clear();
dotgrid.guide.update(); dotgrid.guide.refresh();
dotgrid.draw(); dotgrid.draw();
} }
this.confirm = function() this.confirm = function()
{ {
dotgrid.tool.add_vertex({x:this.selector.x * -1,y:this.selector.y}); dotgrid.tool.add_vertex({x:this.selector.x * -1,y:this.selector.y});
dotgrid.guide.update(); dotgrid.guide.refresh();
dotgrid.draw(); dotgrid.draw();
} }
this.erase = function() this.erase = function()
{ {
dotgrid.tool.remove_segments_at(this.selector); dotgrid.tool.remove_segments_at(this.selector);
dotgrid.guide.update(); dotgrid.guide.refresh();
dotgrid.draw(); dotgrid.draw();
} }
@ -56,7 +56,7 @@ function Keyboard()
this.selector.x = this.selector.x > 0 ? 0 : this.selector.x; this.selector.x = this.selector.x > 0 ? 0 : this.selector.x;
this.selector.y = this.selector.y < 0 ? 0 : this.selector.y; this.selector.y = this.selector.y < 0 ? 0 : this.selector.y;
dotgrid.move_cursor(this.selector) dotgrid.move_cursor(this.selector)
dotgrid.guide.update(); dotgrid.guide.refresh();
dotgrid.draw(); dotgrid.draw();
} }