From ff63f27b557c004f866328f36d4f6a4b6a04060a Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Fri, 11 May 2018 09:37:47 +1200 Subject: [PATCH] Re-Implement all paths drawing --- desktop/sources/scripts/dotgrid.js | 11 ++--------- desktop/sources/scripts/generator.js | 14 ++++++++++---- desktop/sources/scripts/guide.js | 7 +++---- desktop/sources/scripts/interface.js | 23 ++++++++++++++++++++--- desktop/sources/scripts/tool.js | 10 ++++++++++ 5 files changed, 45 insertions(+), 20 deletions(-) diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 3119768..45c4ee2 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -53,7 +53,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.controller.add("default","Effect","Linecap",() => { dotgrid.mod_linecap(); },"Q"); this.controller.add("default","Effect","Linejoin",() => { dotgrid.mod_linejoin(); },"W"); - this.controller.add("default","Effect","Mirror",() => { dotgrid.mod_mirror(); },"E"); + this.controller.add("default","Effect","Mirror",() => { dotgrid.tool.toggle_mirror(); },"E"); this.controller.add("default","Effect","Fill",() => { dotgrid.mod_fill(); },"R"); this.controller.add("default","Effect","Color",() => { dotgrid.picker.start(); },"G"); this.controller.add("default","Effect","Thicker",() => { dotgrid.mod_thickness(1) },"}"); @@ -162,7 +162,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) if(o == "thickness"){ this.mod_thickness(); return; } if(o == "linecap"){ this.mod_linecap(); return; } if(o == "linejoin"){ this.mod_linejoin(); return; } - if(o == "mirror"){ this.mod_mirror(); return; } + if(o == "mirror"){ this.tool.toggle_mirror(); return; } if(o == "fill"){ this.mod_fill(); return; } if(o == "color"){ setTimeout(()=>{ this.picker.start(); }, 100); return; } if(o == "depth"){ this.tool.select_next_layer(); return; } @@ -276,13 +276,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) dotgrid.guide.refresh(); } - this.mod_mirror = function() - { - this.tool.style().mirror_style += 1; - this.tool.style().mirror_style = this.tool.style().mirror_style > 7 ? 0 : this.tool.style().mirror_style; - dotgrid.guide.refresh(); - } - this.mod_fill = function() { this.tool.style().fill = this.tool.style().fill == "none" ? this.tool.style().color : "none"; diff --git a/desktop/sources/scripts/generator.js b/desktop/sources/scripts/generator.js index e0d1dd6..487b080 100644 --- a/desktop/sources/scripts/generator.js +++ b/desktop/sources/scripts/generator.js @@ -62,18 +62,24 @@ function Generator(layer) return html } - this.toString = function(offset = {x:0,y:0}, scale = 1) + this.convert = function(layer) { var s = "" - var layer = operate(this.layer,offset,scale) - for(id in layer){ var seg = layer[id]; s += `${this.render(seg)}` } - return s.trim() + return s.trim(); + } + + this.toString = function(offset = {x:0,y:0}, scale = 1, mirror = dotgrid.tool.style().mirror_style) + { + var s = "" + var layer = operate(this.layer,offset,scale) + s += this.convert(layer) + return s } function copy(data){ return data ? JSON.parse(JSON.stringify(data)) : []; } diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index 61e76b1..6e6bc59 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -123,10 +123,9 @@ function Guide() this.draw_paths = function() { - var path = new Generator(dotgrid.tool.layer()).toString({x:15,y:15},scale) - var style = dotgrid.tool.style() - - this.draw_path(path,style) + this.draw_path(new Generator(dotgrid.tool.layers[2]).toString({x:15,y:15},scale),dotgrid.tool.styles[2]) + this.draw_path(new Generator(dotgrid.tool.layers[1]).toString({x:15,y:15},scale),dotgrid.tool.styles[1]) + this.draw_path(new Generator(dotgrid.tool.layers[0]).toString({x:15,y:15},scale),dotgrid.tool.styles[0]) } this.draw_path = function(path,style) diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js index e570898..01b9194 100644 --- a/desktop/sources/scripts/interface.js +++ b/desktop/sources/scripts/interface.js @@ -26,7 +26,7 @@ function Interface() linejoin: ["linejoin","M60,60 L120,120 L180,120 M120,180 L180,180 L240,240","W"], thickness: ["thickness","M120,90 L120,90 L90,120 L180,210 L210,180 Z M105,105 L105,105 L60,60 M195,195 L195,195 L240,240"], - mirror: ["mirror","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210","E"], + mirror: ["mirror","M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210","E"], fill: ["fill","M60,60 L60,150 L150,150 L240,150 L240,240 Z","R"], color: ["color","M150,60 A90,90 0 0,1 240,150 A-90,90 0 0,1 150,240 A-90,-90 0 0,1 60,150 A90,-90 0 0,1 150,60","G"], } @@ -34,13 +34,17 @@ function Interface() for(id in tools){ var tool = tools[id]; var shortcut = tool[2]; - html += `${id == "depth" ? `` : ""}${id.capitalize()}${shortcut ? '('+shortcut+')' : ''}` + html += `${id == "depth" ? `` : ""}${id.capitalize()}${shortcut ? '('+shortcut+')' : ''}` } this.menu_el.innerHTML = html } - this.refresh = function() + this.prev_operation = null; + + this.refresh = function(force = false) { + if(this.prev_operation == dotgrid.cursor.operation && force == false){ return; } + 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"; @@ -56,6 +60,19 @@ function Interface() document.getElementById("color").children[0].style.fill = dotgrid.tool.style().color; document.getElementById("color").children[0].style.stroke = dotgrid.tool.style().color; document.getElementById("color").className.baseVal = "icon"; + + // Mirror + if(dotgrid.tool.style().mirror_style == 0){ + document.getElementById("mirror_path").setAttribute("d","M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210") + } + else if(dotgrid.tool.style().mirror_style == 1){ + document.getElementById("mirror_path").setAttribute("d","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210") + } + else if(dotgrid.tool.style().mirror_style == 2){ + document.getElementById("mirror_path").setAttribute("d","M210,90 L210,90 L90,210 M60,60 L60,60 L120,120 M180,180 L180,180 L240,240") + } + + this.prev_operation = dotgrid.cursor.operation; } this.toggle = function() diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index f41de61..4df6e8a 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -223,6 +223,16 @@ function Tool() dotgrid.guide.refresh(); } + // Toggles + + this.toggle_mirror = function() + { + this.style().mirror_style = this.style().mirror_style > 1 ? 0 : this.style().mirror_style+1; + + dotgrid.guide.refresh(); + dotgrid.interface.refresh(true); + } + // Style this.style = function()