This commit is contained in:
Devine Lu Linvega 2017-11-27 17:35:53 +13:00
parent 9919b78648
commit b266dd6f19
4 changed files with 16 additions and 6 deletions

View File

@ -17,6 +17,7 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved
- `d` Draw Line.
- `f` Draw Bezier.
- `g` Close Path.
- `h` Fill Path.
### Parametric

View File

@ -96,7 +96,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.svg_el.style.height = this.height;
this.svg_el.style.stroke = this.color;
this.svg_el.style.strokeWidth = this.thickness;
this.svg_el.style.fill = this.fill ? "black" : "none !important";
this.svg_el.style.fill = "none";
this.svg_el.style.strokeLinecap = this.linecap;
this.element.appendChild(this.svg_el);
@ -138,6 +138,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
if(o == "thickness"){ this.mod_thickness(); }
if(o == "linecap"){ this.mod_linecap(); }
if(o == "mirror"){ this.mod_mirror(); }
if(o == "fill"){ this.toggle_fill(); }
if(o == "export"){ this.export(); }
}
@ -367,7 +368,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.svg_el.style.stroke = this.color;
this.svg_el.style.strokeLinecap = this.linecap;
this.svg_el.style.strokeWidth = this.thickness*this.scale;
this.svg_el.style.fill = this.fill ? "black" : "none";
this.svg_el.style.fill = this.fill ? this.theme.active.f_high : "none";
// Draw Mirror
if(this.mirror_index == 1){
@ -492,6 +493,10 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
if(this.segments.length == 0){ return; }
this.scale = 1
this.draw()
// Override fill color
if(dotgrid.fill){ dotgrid.svg_el.style.fill = "black" }
var svg = this.svg_el.outerHTML
dialog.showSaveDialog((fileName) => {
@ -501,6 +506,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
});
fs.writeFile(fileName+'.png', dotgrid.render.buffer());
fs.writeFile(fileName+'.dot', JSON.stringify(dotgrid.serializer.serialize()));
dotgrid.draw()
});
}

View File

@ -18,8 +18,9 @@ function Interface()
["close","close (g)","M60,60 A180,180 0 0,1 240,240 M60,60 A180,180 0 0,0 240,240",""],
["thickness","thickness ([ & ])","M60,60 L240,240","stroke-dasharray: 30,15"],
["linecap","linecap (/)","M60,60 L240,240 M240,180 L240,240 M180,240 L240,240"],
["mirror","mirror (space)","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210 "],
["linecap","linecap (/)","M60,60 L240,240 M240,180 L240,240 M180,240 L240,240"],
["mirror","mirror (space)","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210 "],
["fill","fill (h)","M60,60 L60,150 L150,150 L240,150 L240,240 Z "],
["export","export (ctrl s)","M150,50 L50,150 L150,250 L250,150 L150,50 Z"]
]
@ -41,6 +42,7 @@ function Interface()
document.getElementById("thickness").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("linecap").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("mirror").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("fill").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("close").className.baseVal = dotgrid.segments.length < 1 || (prev && prev.name == "close") ? "icon inactive" : "icon";
document.getElementById("export").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
}
@ -50,7 +52,6 @@ function Interface()
this.is_visible = this.is_visible ? false : true;
this.el.className = this.is_visible ? "visible" : "hidden";
const {dialog,app} = require('electron').remote;
var win = require('electron').remote.getCurrentWindow();
win.setSize(900,this.is_visible ? 420 : 400);

View File

@ -48,13 +48,15 @@ function Keyboard()
this.code_history = "";
}
switch(e.keyCode) {
switch(e.keyCode || e.key) {
case 65 : dotgrid.draw_arc(e.shiftKey ? "1,0" : "0,0"); break; // 'a/A'
case 83 : dotgrid.draw_arc(e.shiftKey ? "1,1" : "0,1"); break; // 's/S'
case 68 : dotgrid.draw_line(); break; // 'd'
case 70 : dotgrid.draw_bezier(); break; // 'f'
case "g" : dotgrid.draw_close(); break;
case 71 : dotgrid.draw_close(); break; // 'g'
case "h" : dotgrid.toggle_fill(); break;
case 72 : dotgrid.toggle_fill(); break; // 'g'
case "[" : dotgrid.mod_thickness(-1); break;
case 219 : dotgrid.mod_thickness(-1); break; // '['