From bacb523558bdd2d118506efc501a0bf65d947c9e Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Sat, 12 May 2018 10:19:24 +1200 Subject: [PATCH] Redesigned handles --- desktop/sources/scripts/dotgrid.js | 11 +++-- desktop/sources/scripts/guide.js | 76 +++++++++++++++++------------- desktop/sources/scripts/tool.js | 6 +-- 3 files changed, 53 insertions(+), 40 deletions(-) diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index a3a9a96..1afb489 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -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(); } diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index 6e6bc59..d7d58d5 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -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; } } diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index 87e4b8b..522d454 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -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 };