Fixed issue with blank color field
This commit is contained in:
parent
e71b577cec
commit
a486b67876
@ -25,6 +25,8 @@
|
|||||||
- Linecap: `Q`
|
- Linecap: `Q`
|
||||||
- Linejoin: `W`
|
- Linejoin: `W`
|
||||||
- Mirror: `E`
|
- Mirror: `E`
|
||||||
|
- Fill: `R`
|
||||||
|
- Dash: `T`
|
||||||
- Thicker: `}`
|
- Thicker: `}`
|
||||||
- Thinner: `{`
|
- Thinner: `{`
|
||||||
- Thicker +5: `]`
|
- Thicker +5: `]`
|
||||||
|
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
@ -10,6 +10,8 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved
|
|||||||
|
|
||||||
## Controls
|
## Controls
|
||||||
|
|
||||||
|
## default Mode
|
||||||
|
|
||||||
### File
|
### File
|
||||||
- New: `CmdOrCtrl+N`
|
- New: `CmdOrCtrl+N`
|
||||||
- Open: `CmdOrCtrl+O`
|
- Open: `CmdOrCtrl+O`
|
||||||
@ -35,6 +37,8 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved
|
|||||||
- Linecap: `Q`
|
- Linecap: `Q`
|
||||||
- Linejoin: `W`
|
- Linejoin: `W`
|
||||||
- Mirror: `E`
|
- Mirror: `E`
|
||||||
|
- Fill: `R`
|
||||||
|
- Dash: `T`
|
||||||
- Thicker: `}`
|
- Thicker: `}`
|
||||||
- Thinner: `{`
|
- Thinner: `{`
|
||||||
- Thicker +5: `]`
|
- Thicker +5: `]`
|
||||||
|
@ -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","Linejoin",() => { dotgrid.mod_linejoin(); },"W");
|
||||||
this.controller.add("default","Effect","Mirror",() => { dotgrid.mod_mirror(); },"E");
|
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","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","Thicker",() => { dotgrid.mod_thickness(1) },"}");
|
||||||
this.controller.add("default","Effect","Thinner",() => { 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) },"]");
|
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.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)
|
this.set_size = function(size = {width:300,height:300},interface = true)
|
||||||
{
|
{
|
||||||
var win = require('electron').remote.getCurrentWindow();
|
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.strokeLinejoin = this.tool.styles[0].strokeLinejoin;
|
||||||
this.layer_1.style.stroke = this.tool.styles[0].color;
|
this.layer_1.style.stroke = this.tool.styles[0].color;
|
||||||
this.layer_1.style.fill = this.tool.styles[0].fill;
|
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.strokeWidth = this.tool.styles[0].thickness;
|
||||||
this.mirror_layer_1.style.strokeLinecap = this.tool.styles[0].strokeLinecap;
|
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.strokeLinejoin = this.tool.styles[0].strokeLinejoin;
|
||||||
this.mirror_layer_1.style.stroke = this.tool.styles[0].color;
|
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.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.strokeWidth = this.tool.styles[1].thickness;
|
||||||
this.layer_2.style.strokeLinecap = this.tool.styles[1].strokeLinecap;
|
this.layer_2.style.strokeLinecap = this.tool.styles[1].strokeLinecap;
|
||||||
this.layer_2.style.strokeLinejoin = this.tool.styles[1].strokeLinejoin;
|
this.layer_2.style.strokeLinejoin = this.tool.styles[1].strokeLinejoin;
|
||||||
this.layer_2.style.stroke = this.tool.styles[1].color;
|
this.layer_2.style.stroke = this.tool.styles[1].color;
|
||||||
this.layer_2.style.fill = this.tool.styles[1].fill;
|
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.strokeWidth = this.tool.styles[1].thickness;
|
||||||
this.mirror_layer_2.style.strokeLinecap = this.tool.styles[1].strokeLinecap;
|
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.strokeLinejoin = this.tool.styles[1].strokeLinejoin;
|
||||||
this.mirror_layer_2.style.stroke = this.tool.styles[1].color;
|
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.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.strokeWidth = this.tool.styles[2].thickness;
|
||||||
this.layer_3.style.strokeLinecap = this.tool.styles[2].strokeLinecap;
|
this.layer_3.style.strokeLinecap = this.tool.styles[2].strokeLinecap;
|
||||||
this.layer_3.style.strokeLinejoin = this.tool.styles[2].strokeLinejoin;
|
this.layer_3.style.strokeLinejoin = this.tool.styles[2].strokeLinejoin;
|
||||||
this.layer_3.style.stroke = this.tool.styles[2].color;
|
this.layer_3.style.stroke = this.tool.styles[2].color;
|
||||||
this.layer_3.style.fill = this.tool.styles[2].fill;
|
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.strokeWidth = this.tool.styles[2].thickness;
|
||||||
this.mirror_layer_3.style.strokeLinecap = this.tool.styles[2].strokeLinecap;
|
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.strokeLinejoin = this.tool.styles[2].strokeLinejoin;
|
||||||
this.mirror_layer_3.style.stroke = this.tool.styles[2].color;
|
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.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
|
// Draw Mirror
|
||||||
if(this.mirror_index == 1){
|
if(this.mirror_index == 1){
|
||||||
@ -620,3 +637,8 @@ window.addEventListener('dragover',function(e)
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.dataTransfer.dropEffect = 'copy';
|
e.dataTransfer.dropEffect = 'copy';
|
||||||
});
|
});
|
||||||
|
|
||||||
|
String.prototype.capitalize = function()
|
||||||
|
{
|
||||||
|
return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase();
|
||||||
|
}
|
@ -16,24 +16,25 @@ function Interface()
|
|||||||
|
|
||||||
var html = ""
|
var html = ""
|
||||||
var tools = {
|
var tools = {
|
||||||
line: ["line","M60,60 L240,240",""],
|
line: ["line","M60,60 L240,240","A"],
|
||||||
arc_c: ["arc clockwise","M60,60 A180,180 0 0,1 240,240",""],
|
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",""],
|
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",""],
|
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",""],
|
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"],
|
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"],
|
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","stroke-dasharray: 30,15"],
|
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"],
|
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"],
|
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"],
|
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){
|
for(id in tools){
|
||||||
var tool = tools[id];
|
var tool = tools[id];
|
||||||
html += `<svg id="${id}" ar="${id}" title="${tool[0]}" viewBox="0 0 300 300" class="icon"><path class="icon_path" d="${tool[1]}"/>${id == "depth" ? `<path class="icon_path inactive" d=""/>` : ""}<rect ar="${id}" width="300" height="300" opacity="0"><title>${id}</title></rect></svg>`
|
var shortcut = tool[2];
|
||||||
|
html += `<svg id="${id}" ar="${id}" title="${tool[0].capitalize()}" viewBox="0 0 300 300" class="icon"><path class="icon_path" d="${tool[1]}"/>${id == "depth" ? `<path class="icon_path inactive" d=""/>` : ""}<rect ar="${id}" width="300" height="300" opacity="0"><title>${id.capitalize()}${shortcut ? '('+shortcut+')' : ''}</title></rect></svg>`
|
||||||
}
|
}
|
||||||
this.menu_el.innerHTML = html
|
this.menu_el.innerHTML = html
|
||||||
}
|
}
|
||||||
|
@ -27,6 +27,8 @@ function Picker()
|
|||||||
|
|
||||||
this.validate = function()
|
this.validate = function()
|
||||||
{
|
{
|
||||||
|
if(!is_valid(this.el.value)){ return; }
|
||||||
|
|
||||||
dotgrid.tool.style().color = this.el.value;
|
dotgrid.tool.style().color = this.el.value;
|
||||||
dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? this.el.value : "none";
|
dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? this.el.value : "none";
|
||||||
dotgrid.draw();
|
dotgrid.draw();
|
||||||
@ -63,5 +65,11 @@ function Picker()
|
|||||||
this.update();
|
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); };
|
this.el.onkeyup = function(event){ dotgrid.picker.listen(event); };
|
||||||
}
|
}
|
@ -3,9 +3,9 @@ function Tool()
|
|||||||
this.index = 0;
|
this.index = 0;
|
||||||
this.layers = [[],[],[]];
|
this.layers = [[],[],[]];
|
||||||
this.styles = [
|
this.styles = [
|
||||||
{thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#f00",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"},
|
{thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#0f0",fill:"none",dash:[0,0]},
|
||||||
{thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#00f",fill:"none"}
|
{thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#00f",fill:"none",dash:[0,0]}
|
||||||
];
|
];
|
||||||
this.verteces = [];
|
this.verteces = [];
|
||||||
this.reqs = {line:2,arc_c:2,arc_r:2,bezier:3,close:0};
|
this.reqs = {line:2,arc_c:2,arc_r:2,bezier:3,close:0};
|
||||||
|
Loading…
Reference in New Issue
Block a user