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 == "bezier"){ this.tool.cast("bezier"); return; }
if(o == "close"){ this.tool.cast("close"); 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 == "linecap"){ this.mod_linecap(); return; }
if(o == "linejoin"){ this.mod_linejoin(); return; } if(o == "linejoin"){ this.mod_linejoin(); return; }
if(o == "mirror"){ this.tool.toggle_mirror(); 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 // 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){ if(step){
this.tool.style().thickness = parseInt(this.tool.style().thickness/5) * 5; 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(); dotgrid.guide.refresh();
} }

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

@ -21,9 +21,8 @@ function Guide()
this.clear(); this.clear();
this.draw_markers() this.draw_markers()
this.draw_vertices() this.draw_vertices()
this.draw_handles()
this.draw_paths() this.draw_paths()
this.draw_overlays() this.draw_handles()
this.draw_translation(); this.draw_translation();
this.draw_cursor(); this.draw_cursor();
this.draw_preview(); this.draw_preview();
@ -51,28 +50,15 @@ function Guide()
this.refresh(); 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() this.draw_handles = function()
{ {
if(!this.show_extras){ return; } if(!this.show_extras){ return; }
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.vertices){ for(vertex_id in segment.vertices){
var vertex = segment.vertices[vertex_id]; var vertex = segment.vertices[vertex_id];
this.draw_handle(vertex); this.draw_handle(vertex);
} }
} }
} }
@ -110,6 +96,34 @@ function Guide()
ctx.closePath(); 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) this.draw_marker = function(pos,radius = 1,step)
{ {
var ctx = this.el.getContext('2d'); var ctx = this.el.getContext('2d');
@ -151,19 +165,6 @@ function Guide()
ctx.stroke(p); 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() this.draw_translation = function()
{ {
if(!dotgrid.cursor.translation){ return; } 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'); var ctx = this.el.getContext('2d');
ctx.beginPath(); ctx.beginPath();
ctx.setLineDash([0,0]); ctx.setLineDash([0,0]);
ctx.lineWidth = 3; ctx.lineWidth = 3;
ctx.lineCap="round"; 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.strokeStyle = dotgrid.theme.active.f_med;
ctx.stroke(); ctx.stroke();
ctx.closePath(); 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 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.settings = { size:{width:300,height:300} }
this.layers = [[],[],[]]; this.layers = [[],[],[]];
this.styles = [ this.styles = [
{ thickness:2,strokeLinecap:"round",strokeLinejoin:"round",color:"#f00",fill:"none",mirror_style:0 }, { thickness:10,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:10,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:"#00f",fill:"none",mirror_style:0 }
]; ];
this.vertices = []; this.vertices = [];
this.reqs = { line:2,arc_c:2,arc_r:2,bezier:3,close:0 }; this.reqs = { line:2,arc_c:2,arc_r:2,bezier:3,close:0 };