Atlas48/pointvec
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Redesigned handles

Browse Source
This commit is contained in:
Devine Lu Linvega 2018-05-12 10:19:24 +12:00
parent fb808210a3
commit bacb523558
3 changed files with 53 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
desktop/sources/scripts/dotgrid.js
View File

@ -217,7 +217,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
if(o == "bezier"){ this.tool.cast("bezier"); return; }
if(o == "close"){ this.tool.cast("close"); return; }
if(o == "thickness"){ this.mod_thickness(); return; }
if(o == "thickness"){ this.mod_thickness(10,true,true); return; }
if(o == "linecap"){ this.mod_linecap(); return; }
if(o == "linejoin"){ this.mod_linejoin(); return; }
if(o == "mirror"){ this.tool.toggle_mirror(); return; }
@ -302,15 +302,16 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
// Toggles
this.mod_thickness = function(mod,step = false)
this.mod_thickness = function(mod = 10,step = false,cap = false)
{
if(!mod){ mod = 1; this.tool.style().thickness = this.tool.style().thickness > 30 ? 1 : this.tool.style().thickness }
if(cap){
this.tool.style().thickness = this.tool.style().thickness > 40 ? 1 : this.tool.style().thickness
}
if(step){
this.tool.style().thickness = parseInt(this.tool.style().thickness/5) * 5;
}
this.tool.style().thickness = Math.max(this.tool.style().thickness+mod,0);
this.tool.style().thickness = clamp(this.tool.style().thickness+mod,1,40);
dotgrid.guide.refresh();
}

76
desktop/sources/scripts/guide.js
View File

@ -21,9 +21,8 @@ function Guide()
this.clear();
this.draw_markers()
this.draw_vertices()
this.draw_handles()
this.draw_paths()
this.draw_overlays()
this.draw_handles()
this.draw_translation();
this.draw_cursor();
this.draw_preview();
@ -51,28 +50,15 @@ function Guide()
this.refresh();
}
this.draw_overlays = function()
{
if(!this.show_extras){ return; }
for(segment_id in dotgrid.tool.layer()){
var segment = dotgrid.tool.layer()[segment_id];
for(vertex_id in segment.vertices){
var vertex = segment.vertices[vertex_id];
this.draw_vertex(vertex,3);
}
}
}
this.draw_handles = function()
{
if(!this.show_extras){ return; }
for(segment_id in dotgrid.tool.layer()){
var segment = dotgrid.tool.layer()[segment_id];
for(vertex_id in segment.vertices){
var vertex = segment.vertices[vertex_id];
this.draw_handle(vertex);
this.draw_handle(vertex);
}
}
}
@ -110,6 +96,34 @@ function Guide()
ctx.closePath();
}
this.draw_handle = function(pos, radius = 6)
{
var ctx = this.el.getContext('2d');
ctx.beginPath();
ctx.setLineDash([0,0]);
ctx.lineWidth = 3;
ctx.lineCap="round";
ctx.arc(Math.abs(pos.x * -scale)+30, Math.abs(pos.y * scale)+30, radius+3, 0, 2 * Math.PI, false);
ctx.fillStyle = dotgrid.theme.active.f_high;
ctx.fill();
ctx.strokeStyle = dotgrid.theme.active.f_high;
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc((pos.x * scale)+30, (pos.y * scale)+30, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = dotgrid.theme.active.f_low;
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc((pos.x * scale)+30, (pos.y * scale)+30, radius-3, 0, 2 * Math.PI, false);
ctx.fillStyle = dotgrid.theme.active.f_high;
ctx.fill();
ctx.closePath();
}
this.draw_marker = function(pos,radius = 1,step)
{
var ctx = this.el.getContext('2d');
@ -151,19 +165,6 @@ function Guide()
ctx.stroke(p);
}
this.draw_handle = function(pos,radius = 15)
{
var ctx = this.el.getContext('2d');
ctx.beginPath();
ctx.setLineDash([0,0]);
ctx.lineWidth = 3;
ctx.lineCap="round";
ctx.arc((pos.x * scale)+30, (pos.y * scale)+30, radius, 0, 2 * Math.PI, false);
ctx.strokeStyle = pos_is_equal(pos,dotgrid.cursor.pos) ? dotgrid.theme.active.b_inv : dotgrid.theme.active.f_low;
ctx.stroke();
ctx.closePath();
}
this.draw_translation = function()
{
if(!dotgrid.cursor.translation){ return; }
@ -185,14 +186,24 @@ function Guide()
}
}
this.draw_cursor = function(pos = dotgrid.cursor.pos,radius = 10)
this.draw_cursor = function(pos = dotgrid.cursor.pos,radius = dotgrid.tool.style().thickness-1)
{
var ctx = this.el.getContext('2d');
ctx.beginPath();
ctx.setLineDash([0,0]);
ctx.lineWidth = 3;
ctx.lineCap="round";
ctx.arc(Math.abs(pos.x * -scale)+30, Math.abs(pos.y * scale)+30, radius, 0, 2 * Math.PI, false);
ctx.arc(Math.abs(pos.x * -scale)+30, Math.abs(pos.y * scale)+30, 3, 0, 2 * Math.PI, false);
ctx.fillStyle = dotgrid.theme.active.f_low;
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.setLineDash([0,0]);
ctx.lineWidth = 3;
ctx.lineCap="round";
ctx.arc(Math.abs(pos.x * -scale)+30, Math.abs(pos.y * scale)+30, clamp(radius,5,100), 0, 2 * Math.PI, false);
ctx.strokeStyle = dotgrid.theme.active.f_med;
ctx.stroke();
ctx.closePath();
@ -218,4 +229,5 @@ function Guide()
}
function pos_is_equal(a,b){ return a && b && Math.abs(a.x) == Math.abs(b.x) && Math.abs(a.y) == Math.abs(b.y) }
function clamp(v, min, max) { return v < min ? min : v > max ? max : v; }
}

6
desktop/sources/scripts/tool.js
View File

@ -4,9 +4,9 @@ function Tool()
this.settings = { size:{width:300,height:300} }
this.layers = [[],[],[]];
this.styles = [
{ thickness:2,strokeLinecap:"round",strokeLinejoin:"round",color:"#f00",fill:"none",mirror_style:0 },
{ thickness:2,strokeLinecap:"round",strokeLinejoin:"round",color:"#0f0",fill:"none",mirror_style:0 },
{ thickness:2,strokeLinecap:"round",strokeLinejoin:"round",color:"#00f",fill:"none",mirror_style:0 }
{ thickness:10,strokeLinecap:"round",strokeLinejoin:"round",color:"#f00",fill:"none",mirror_style:0 },
{ thickness:10,strokeLinecap:"round",strokeLinejoin:"round",color:"#0f0",fill:"none",mirror_style:0 },
{ thickness:10,strokeLinecap:"round",strokeLinejoin:"round",color:"#00f",fill:"none",mirror_style:0 }
];
this.vertices = [];
this.reqs = { line:2,arc_c:2,arc_r:2,bezier:3,close:0 };