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 @@
-
\ No newline at end of file
+
\ 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 += ``
+ var shortcut = tool[2];
+ html += ``
}
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};