From 76ebb3ecad4f7a4bce574d0128c5f5fa7bf1d4a5 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Tue, 6 Feb 2018 16:27:48 +1300 Subject: [PATCH] Progress on implementing tools --- sources/scripts/dotgrid.js | 86 ++++-------------------------------- sources/scripts/guide.js | 2 +- sources/scripts/interface.js | 8 ++-- sources/scripts/tool.js | 42 +++++++++++++++--- 4 files changed, 50 insertions(+), 88 deletions(-) diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js index 4281c0e..28f17de 100644 --- a/sources/scripts/dotgrid.js +++ b/sources/scripts/dotgrid.js @@ -128,8 +128,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.controller.add("default","Edit","Insert",() => { dotgrid.add_point(); },"I"); this.controller.add("default","Edit","Copy",() => { document.execCommand('copy'); },"CmdOrCtrl+C"); this.controller.add("default","Edit","Paste",() => { document.execCommand('paste'); },"CmdOrCtrl+V"); - this.controller.add("default","Edit","Undo",() => { dotgrid.undo(); },"CmdOrCtrl+Z"); - this.controller.add("default","Edit","Redo",() => { dotgrid.redo(); },"CmdOrCtrl+Shift+Z"); + this.controller.add("default","Edit","Undo",() => { dotgrid.tool.undo(); },"CmdOrCtrl+Z"); + this.controller.add("default","Edit","Redo",() => { dotgrid.tool.redo(); },"CmdOrCtrl+Shift+Z"); this.controller.add("default","Edit","Delete",() => { dotgrid.tool.remove_segment(); },"Backspace"); this.controller.add("default","Edit","Move Up",() => { dotgrid.mod_move(new Pos(0,-15)); },"Up"); this.controller.add("default","Edit","Move Down",() => { dotgrid.mod_move(new Pos(0,15)); },"Down"); @@ -138,10 +138,10 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.controller.add("default","Edit","Deselect",() => { dotgrid.tool.clear(); },"Esc"); this.controller.add("default","Stroke","Line",() => { dotgrid.tool.cast("line"); },"A"); - this.controller.add("default","Stroke","Arc",() => { dotgrid.draw_arc("0,1"); },"S"); - this.controller.add("default","Stroke","Arc Rev",() => { dotgrid.draw_arc("0,0"); },"D"); - this.controller.add("default","Stroke","Bezier",() => { dotgrid.draw_bezier(); },"F"); - this.controller.add("default","Stroke","Connect",() => { dotgrid.draw_close(); },"Z"); + this.controller.add("default","Stroke","Arc",() => { dotgrid.tool.cast("arc_c"); },"S"); // 0,1 + this.controller.add("default","Stroke","Arc Rev",() => { dotgrid.tool.cast("arc_r")},"D"); // 0,0 + this.controller.add("default","Stroke","Bezier",() => { dotgrid.tool.cast("bezier") },"F"); + this.controller.add("default","Stroke","Connect",() => { dotgrid.tool.cast("close") },"Z"); this.controller.add("default","Effect","Thicker",() => { dotgrid.mod_thickness(1) },"}"); this.controller.add("default","Effect","Thinner",() => { dotgrid.mod_thickness(-1) },"{"); @@ -176,6 +176,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.new = function() { + this.history.push(this.tool.layers); dotgrid.clear(); } @@ -213,82 +214,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca // EDIT - this.undo = function() - { - // this.segments = this.history.prev(); - this.draw(); - } - - this.redo = function() - { - // this.segments = this.history.next(); - this.draw(); - } - this.delete_at = function(pos) { - // var segs = []; - - // for(id in this.segments){ - // var s = this.segments[id]; - // if(s.from && s.from.is_equal(pos)){ continue; } - // if(s.to && s.to.is_equal(pos)){ continue; } - // if(s.end && s.end.is_equal(pos)){ continue; } - // segs.push(s); - // } - // this.segments = segs; - // dotgrid.history.push(dotgrid.segments); this.draw(); } - // STROKE - - this.draw_arc = function(orientation = "0,0") - { - if(from === null || to === null){ return; } - - to = new Pos(to.x * -1, to.y).sub(dotgrid.offset) - from = new Pos(from.x * -1,from.y).sub(dotgrid.offset) - end = end ? new Pos(end.x * -1,end.y).sub(dotgrid.offset) : null; - - dotgrid.segments.push(new Path_Arc(from,to,orientation,end)); - dotgrid.history.push(dotgrid.segments); - - dotgrid.reset(); - dotgrid.draw(); - dotgrid.reset(); - } - - this.draw_bezier = function() - { - if(from === null || to === null || end === null){ return; } - - to = new Pos(to.x * -1, to.y).sub(dotgrid.offset) - from = new Pos(from.x * -1,from.y).sub(dotgrid.offset) - end = new Pos(end.x * -1,end.y).sub(dotgrid.offset) - - dotgrid.segments.push(new Path_Bezier(from,to,end)); - dotgrid.history.push(dotgrid.segments); - - dotgrid.reset(); - dotgrid.draw(); - dotgrid.reset(); - } - - this.draw_close = function() - { - if(dotgrid.segments.length == 0){ return; } - if(dotgrid.segments[dotgrid.segments.length-1].name == "close"){ return; } - - dotgrid.segments.push(new Path_Close()); - dotgrid.history.push(dotgrid.segments); - - dotgrid.reset(); - dotgrid.draw(); - dotgrid.reset(); - } - - // Cursor this.translation = null; @@ -601,7 +531,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.reset(); this.segments = []; this.thickness = 10 - this.linecap = "square" + this.linecap = "round" this.linejoin = "round" this.color = "#000000" this.draw(); diff --git a/sources/scripts/guide.js b/sources/scripts/guide.js index 9e20446..3fedd15 100644 --- a/sources/scripts/guide.js +++ b/sources/scripts/guide.js @@ -92,7 +92,7 @@ function Guide() var ctx = this.el.getContext('2d'); ctx.beginPath(); ctx.arc((pos.x * 2)+30, (pos.y * 2)+30, radius, 0, 2 * Math.PI, false); - ctx.fillStyle = "red"; + ctx.fillStyle = dotgrid.theme.active.f_med; ctx.fill(); ctx.closePath(); } diff --git a/sources/scripts/interface.js b/sources/scripts/interface.js index 5d89f83..b938e23 100644 --- a/sources/scripts/interface.js +++ b/sources/scripts/interface.js @@ -37,10 +37,10 @@ function Interface() { let prev = dotgrid.segments[dotgrid.segments.length-1] - document.getElementById("line").className.baseVal = dotgrid.tool.verteces.length < 2 ? "icon inactive" : "icon"; - document.getElementById("arc_c").className.baseVal = dotgrid.tool.verteces.length < 2 ? "icon inactive" : "icon"; - document.getElementById("arc_r").className.baseVal = dotgrid.tool.verteces.length < 2 ? "icon inactive" : "icon"; - document.getElementById("bezier").className.baseVal = dotgrid.tool.verteces.length < 3 ? "icon inactive" : "icon"; + document.getElementById("line").className.baseVal = !dotgrid.tool.can_cast("line") ? "icon inactive" : "icon"; + document.getElementById("arc_c").className.baseVal = !dotgrid.tool.can_cast("arc_c") ? "icon inactive" : "icon"; + document.getElementById("arc_r").className.baseVal = !dotgrid.tool.can_cast("arc_r") ? "icon inactive" : "icon"; + document.getElementById("bezier").className.baseVal = !dotgrid.tool.can_cast("bezier") ? "icon inactive" : "icon"; document.getElementById("close").className.baseVal = dotgrid.segments.length < 1 || (prev && prev.name == "close") ? "icon inactive" : "icon"; document.getElementById("thickness").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; diff --git a/sources/scripts/tool.js b/sources/scripts/tool.js index f94a266..dc9d43a 100644 --- a/sources/scripts/tool.js +++ b/sources/scripts/tool.js @@ -6,7 +6,6 @@ function Tool() this.layer = function() { - console.log(this.layers) if(!this.layers[this.index]){ this.layers[this.index] = []; } @@ -23,20 +22,26 @@ function Tool() this.add_vertex = function(pos) { this.verteces.push(pos); - console.log(this.verteces); } this.cast = function(type) { if(!this.layer()){ this.layers[this.index] = []; } + if(!this.can_cast(type)){ console.log("Not enough verteces"); return; } this.layer().push({type:type,verteces:this.verteces.slice()}) this.clear(); dotgrid.draw(); + dotgrid.history.push(this.layers); console.log(`Casted ${type}+${this.layer().length}`); } + this.can_cast = function(type) + { + return this.verteces.length >= {line:2,arc_c:2,arc_r:2,bezier:3}[type]; + } + this.path = function() { var html = ""; @@ -52,12 +57,26 @@ function Tool() { var type = segment.type; var verteces = segment.verteces; - var html = `M${verteces[0].x},${verteces[0].y} `; + var html = ``; + var skip = 0; for(id in verteces){ - if(id == 0){ continue; } + if(skip > 0){ skip -= 1; continue; } + if(id == 0){ html += `M${verteces[0].x},${verteces[0].y} `; continue; } var vertex = verteces[id]; - html += `L${vertex.x},${vertex.y} `; + var next = verteces[parseInt(id)+1] + + if(type == "line"){ + html += `L${vertex.x},${vertex.y} `; + } + else if(type == "arc_c" && next){ + html += `A${next.x - vertex.x},${next.y - vertex.y} 0 0,1 ${next.x},${next.y} `; + skip = 1 + } + else if(type == "arc_r" && next){ + html += `A${next.x - vertex.x},${next.y - vertex.y} 0 0,0 ${next.x},${next.y} `; + skip = 1 + } } return html @@ -88,6 +107,7 @@ function Tool() } } } + dotgrid.history.push(this.layers); dotgrid.draw(); } @@ -96,4 +116,16 @@ function Tool() this.verteces = []; dotgrid.draw(); } + + this.undo = function() + { + this.layers = dotgrid.history.prev(); + dotgrid.draw(); + } + + this.redo = function() + { + this.layers = dotgrid.history.next(); + dotgrid.draw(); + } } \ No newline at end of file