From a486b678763f937b9256b82b54625e84c25fd507 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 21 Mar 2018 20:10:09 +1300 Subject: [PATCH] Fixed issue with blank color field --- LAYOUT.md | 2 ++ LAYOUT.svg | 2 +- README.md | 4 ++++ desktop/sources/scripts/dotgrid.js | 24 +++++++++++++++++++++++- desktop/sources/scripts/interface.js | 25 +++++++++++++------------ desktop/sources/scripts/picker.js | 8 ++++++++ desktop/sources/scripts/tool.js | 6 +++--- 7 files changed, 54 insertions(+), 17 deletions(-) diff --git a/LAYOUT.md b/LAYOUT.md index 4d6aee6..5724a52 100644 --- a/LAYOUT.md +++ b/LAYOUT.md @@ -25,6 +25,8 @@ - Linecap: `Q` - Linejoin: `W` - Mirror: `E` +- Fill: `R` +- Dash: `T` - Thicker: `}` - Thinner: `{` - Thicker +5: `]` diff --git a/LAYOUT.svg b/LAYOUT.svg index 4302060..5641b64 100644 --- a/LAYOUT.svg +++ b/LAYOUT.svg @@ -1 +1 @@ -ESCDESELECTDOCUMENT1FOREGROU2MIDDLEGR3BACKGROU4567890-PLUSBACKSPACEDELETERESETTABQLINECAPQUITWLINEJOINEMIRRORSIZERTYUTOOLSIOOPENPPICKER[THINNER]THICKER|CAPSALINESARCSAVEDARC REVFBEZIERGHGRIDHIDEJCONTROLKKEYBOARDL;'ENTERFULLSCRESHIFTZCONNECTUNDOXCUTCCOPYVPASTEBNNEWM,ABOUT.INSPECT/CAPSLOCKCTRLCMDALTSPACECTRLPNFNALT \ No newline at end of file +ESCDESELECTDOCUMENT1FOREGROU2MIDDLEGR3BACKGROU4567890-PLUSBACKSPACEDELETERESETTABQLINECAPQUITWLINEJOINEMIRRORSIZERFILLTDASHYUTOOLSIOOPENPPICKER[THINNER]THICKER|CAPSALINESARCSAVEDARC REVFBEZIERGHGRIDHIDEJCONTROLKKEYBOARDL;'ENTERFULLSCRESHIFTZCONNECTUNDOXCUTCCOPYVPASTEBNNEWM,ABOUT.INSPECT/CAPSLOCKCTRLCMDALTSPACECTRLPNFNALT \ No newline at end of file diff --git a/README.md b/README.md index 678ede6..2e64d7f 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,8 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved ## Controls +## default Mode + ### File - New: `CmdOrCtrl+N` - Open: `CmdOrCtrl+O` @@ -35,6 +37,8 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved - Linecap: `Q` - Linejoin: `W` - Mirror: `E` +- Fill: `R` +- Dash: `T` - Thicker: `}` - Thinner: `{` - Thicker +5: `]` diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 8d69030..8b39ff5 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -140,7 +140,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) 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","Fill",() => { dotgrid.mod_fill(); },"R"); - + this.controller.add("default","Effect","Dash",() => { dotgrid.mod_dash(); },"T"); + this.controller.add("default","Effect","Color",() => { dotgrid.picker.start(); },"G"); this.controller.add("default","Effect","Thicker",() => { dotgrid.mod_thickness(1) },"}"); this.controller.add("default","Effect","Thinner",() => { dotgrid.mod_thickness(-1) },"{"); this.controller.add("default","Effect","Thicker +5",() => { dotgrid.mod_thickness(5,true) },"]"); @@ -413,6 +414,16 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.draw(); } + this.dash_index = 0; + + this.mod_dash = function() + { + var styles = [[0,0],[0.1,1.25],[1.5,1.25],[2,1.25]] + this.dash_index += 1; + this.dash_index = this.dash_index > styles.length-1 ? 0 : this.dash_index; + this.tool.style().dash = styles[this.dash_index] + this.draw(); + } this.set_size = function(size = {width:300,height:300},interface = true) { var win = require('electron').remote.getCurrentWindow(); @@ -456,33 +467,39 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.layer_1.style.strokeLinejoin = this.tool.styles[0].strokeLinejoin; this.layer_1.style.stroke = this.tool.styles[0].color; this.layer_1.style.fill = this.tool.styles[0].fill; + this.layer_1.style.strokeDasharray = `${this.tool.styles[0].dash[0] * this.tool.styles[0].thickness},${this.tool.styles[0].dash[1] * this.tool.styles[0].thickness}`; this.mirror_layer_1.style.strokeWidth = this.tool.styles[0].thickness; this.mirror_layer_1.style.strokeLinecap = this.tool.styles[0].strokeLinecap; this.mirror_layer_1.style.strokeLinejoin = this.tool.styles[0].strokeLinejoin; this.mirror_layer_1.style.stroke = this.tool.styles[0].color; this.mirror_layer_1.style.fill = this.tool.styles[0].fill; + this.mirror_layer_1.style.strokeDasharray = `${this.tool.styles[0].dash[0] * this.tool.styles[0].thickness},${this.tool.styles[0].dash[1] * this.tool.styles[0].thickness}`; this.layer_2.style.strokeWidth = this.tool.styles[1].thickness; this.layer_2.style.strokeLinecap = this.tool.styles[1].strokeLinecap; this.layer_2.style.strokeLinejoin = this.tool.styles[1].strokeLinejoin; this.layer_2.style.stroke = this.tool.styles[1].color; this.layer_2.style.fill = this.tool.styles[1].fill; + this.layer_2.style.strokeDasharray = `${this.tool.styles[1].dash[0] * this.tool.styles[1].thickness},${this.tool.styles[1].dash[1] * this.tool.styles[1].thickness}`; this.mirror_layer_2.style.strokeWidth = this.tool.styles[1].thickness; this.mirror_layer_2.style.strokeLinecap = this.tool.styles[1].strokeLinecap; this.mirror_layer_2.style.strokeLinejoin = this.tool.styles[1].strokeLinejoin; this.mirror_layer_2.style.stroke = this.tool.styles[1].color; this.mirror_layer_2.style.fill = this.tool.styles[1].fill; + this.mirror_layer_2.style.strokeDasharray = `${this.tool.styles[1].dash[0] * this.tool.styles[1].thickness},${this.tool.styles[1].dash[1] * this.tool.styles[1].thickness}`; this.layer_3.style.strokeWidth = this.tool.styles[2].thickness; this.layer_3.style.strokeLinecap = this.tool.styles[2].strokeLinecap; this.layer_3.style.strokeLinejoin = this.tool.styles[2].strokeLinejoin; this.layer_3.style.stroke = this.tool.styles[2].color; this.layer_3.style.fill = this.tool.styles[2].fill; + this.layer_3.style.strokeDasharray = `${this.tool.styles[2].dash[0] * this.tool.styles[2].thickness},${this.tool.styles[2].dash[1] * this.tool.styles[2].thickness}`; this.mirror_layer_3.style.strokeWidth = this.tool.styles[2].thickness; this.mirror_layer_3.style.strokeLinecap = this.tool.styles[2].strokeLinecap; this.mirror_layer_3.style.strokeLinejoin = this.tool.styles[2].strokeLinejoin; this.mirror_layer_3.style.stroke = this.tool.styles[2].color; this.mirror_layer_3.style.fill = this.tool.styles[2].fill; + this.mirror_layer_3.style.strokeDasharray = `${this.tool.styles[2].dash[0] * this.tool.styles[2].thickness},${this.tool.styles[2].dash[1] * this.tool.styles[2].thickness}`; // Draw Mirror if(this.mirror_index == 1){ @@ -620,3 +637,8 @@ window.addEventListener('dragover',function(e) e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; }); + +String.prototype.capitalize = function() +{ + return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase(); +} \ No newline at end of file diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js index 909bc22..80655df 100644 --- a/desktop/sources/scripts/interface.js +++ b/desktop/sources/scripts/interface.js @@ -16,24 +16,25 @@ function Interface() var html = "" var tools = { - line: ["line","M60,60 L240,240",""], - arc_c: ["arc clockwise","M60,60 A180,180 0 0,1 240,240",""], - arc_r: ["arc reverse","M60,60 A180,180 0 0,0 240,240",""], - bezier: ["bezier","M60,60 Q60,150 150,150 Q240,150 240,240",""], - close: ["close","M60,60 A180,180 0 0,1 240,240 M60,60 A180,180 0 0,0 240,240",""], + line: ["line","M60,60 L240,240","A"], + arc_c: ["arc clockwise","M60,60 A180,180 0 0,1 240,240","S"], + arc_r: ["arc reverse","M60,60 A180,180 0 0,0 240,240","D"], + bezier: ["bezier","M60,60 Q60,150 150,150 Q240,150 240,240","F"], + close: ["close","M60,60 A180,180 0 0,1 240,240 M60,60 A180,180 0 0,0 240,240","Z"], - linecap: ["linecap","M60,60 L60,60 L180,180 L240,180 L240,240 L180,240 L180,180"], - linejoin: ["linejoin","M60,60 L120,120 L180,120 M120,180 L180,180 L240,240"], - 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","stroke-dasharray: 30,15"], + linecap: ["linecap","M60,60 L60,60 L180,180 L240,180 L240,240 L180,240 L180,180","Q"], + 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"], - fill: ["fill","M60,60 L60,150 L150,150 L240,150 L240,240 Z"], - 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"], + mirror: ["mirror","M60,60 L240,240 M180,120 L210,90 M120,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"], } for(id in tools){ var tool = tools[id]; - html += `${id == "depth" ? `` : ""}${id}` + var shortcut = tool[2]; + html += `${id == "depth" ? `` : ""}${id.capitalize()}${shortcut ? '('+shortcut+')' : ''}` } this.menu_el.innerHTML = html } diff --git a/desktop/sources/scripts/picker.js b/desktop/sources/scripts/picker.js index 204398c..035c02a 100644 --- a/desktop/sources/scripts/picker.js +++ b/desktop/sources/scripts/picker.js @@ -27,6 +27,8 @@ function Picker() this.validate = function() { + if(!is_valid(this.el.value)){ return; } + dotgrid.tool.style().color = this.el.value; dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? this.el.value : "none"; dotgrid.draw(); @@ -63,5 +65,11 @@ function Picker() this.update(); } + function is_valid(val) + { + var re = /[0-9A-Fa-f]{6}/g; + return re.test(val) + } + this.el.onkeyup = function(event){ dotgrid.picker.listen(event); }; } \ No newline at end of file diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index d545152..6e91957 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -3,9 +3,9 @@ function Tool() this.index = 0; this.layers = [[],[],[]]; this.styles = [ - {thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#f00",fill:"none"}, - {thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#0f0",fill:"none"}, - {thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#00f",fill:"none"} + {thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#f00",fill:"none",dash:[0,0]}, + {thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#0f0",fill:"none",dash:[0,0]}, + {thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#00f",fill:"none",dash:[0,0]} ]; this.verteces = []; this.reqs = {line:2,arc_c:2,arc_r:2,bezier:3,close:0};