Added interface toggle

This commit is contained in:
Devine Lu Linvega 2017-11-15 10:57:17 +13:00
parent ae0e4a8ba9
commit a4cce3eb85
6 changed files with 45 additions and 13 deletions

View File

@ -29,6 +29,7 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved
- `space` Mirror. - `space` Mirror.
- `escape` Remove control points. - `escape` Remove control points.
- `arrows` Move last control point. - `arrows` Move last control point.
- `tab` Toggle interface.
### Shortcuts ### Shortcuts

View File

@ -6,7 +6,7 @@ let win
app.on('ready', () => app.on('ready', () =>
{ {
win = new BrowserWindow({width: 400, height: 420, minWidth: 400, minHeight: 420, maxWidth: 400, maxHeight: 420, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'}) win = new BrowserWindow({width: 400, height: 420, minWidth: 400, minHeight: 400, maxWidth: 400, maxHeight: 420, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'})
win.loadURL(`file://${__dirname}/sources/index.html`) win.loadURL(`file://${__dirname}/sources/index.html`)

View File

@ -1,7 +1,7 @@
body { background:#fff; padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: none; overflow: hidden;} body { background:#fff; padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: none; overflow: hidden;}
#wrapper { width: calc(100% - 50px); height: calc(100% - 50px); padding: 25px; background: inherit; -webkit-app-region: drag;} #wrapper { width: calc(100% - 50px); height: calc(100% - 50px); padding: 25px; background: inherit;-webkit-app-region: drag;}
#dotgrid { margin:0px auto; position:relative; overflow: hidden; padding:10px;-webkit-app-region: no-drag; width:310px !important; height:310px !important;} #dotgrid { margin:0px auto; position:fixed; overflow: hidden; padding:10px;-webkit-app-region: no-drag; width:310px !important; height:310px !important; left:35px; top:35px;}
#cursor { opacity: 1; transition: all 50ms; width:8px; height:8px; margin-top:-5px; margin-left:-5px; position:absolute; z-index:25; border-radius:5px; border:1px solid black;} #cursor { opacity: 1; transition: all 50ms; width:8px; height:8px; margin-top:-5px; margin-left:-5px; position:absolute; z-index:25; border-radius:5px; border:1px solid black;}
#cursor_coord { font-size:10px; z-index: 10000; margin-left:15px; margin-top:-2px;} #cursor_coord { font-size:10px; z-index: 10000; margin-left:15px; margin-top:-2px;}
#cursor_coord.left { margin-left:-110px; text-align: right; width:100px; } #cursor_coord.left { margin-left:-110px; text-align: right; width:100px; }
@ -16,13 +16,16 @@ body { background:#fff; padding: 5px; font-family: 'input_mono_regular'; -webkit
.icon { width:25px; height:25px; margin-right:5px; opacity: 1} .icon { width:25px; height:25px; margin-right:5px; opacity: 1}
.icon:hover { cursor: pointer; opacity: 1 } .icon:hover { cursor: pointer; opacity: 1 }
svg.vector { z-index: 1000;position: relative; left:5px; top:5px; } svg.vector { z-index: 1000;position: relative; left:5px; top:5px; width:300px !important; height:300px !important; }
#dotgrid #guide { opacity: 0; transition: all 500ms; } #dotgrid #guide { opacity: 0; transition: all 500ms; }
#dotgrid #widgets { opacity: 0; transition: all 150ms; left: 5px;top: 5px; } #dotgrid #widgets { opacity: 0; transition: all 150ms; left: 5px;top: 5px; }
#dotgrid:hover #guide { opacity: 1 } #dotgrid:hover #guide { opacity: 1 }
#dotgrid:hover #widgets { opacity: 1 } #dotgrid:hover #widgets { opacity: 1 }
#interface { max-width: 295px;margin: 0px auto;font-size: 11px;line-height: 30px;text-transform: uppercase;margin-top: 15px;-webkit-app-region: no-drag;position: fixed;bottom: 25px;left: 45px;} #interface { max-width: 295px;margin: 0px auto;font-size: 11px;line-height: 30px;text-transform: uppercase;margin-top: 15px;-webkit-app-region: no-drag;position: fixed;bottom: 25px;left: 45px; transition: all 50ms;}
#interface svg.inactive { opacity: 0.2 } #interface svg.inactive { opacity: 0.2 }
#interface svg:hover { opacity: 0.5 } #interface svg:hover { opacity: 0.5 }
#interface.hidden { display: none;opacity: 0 }
#interface.visible { display: block; opacity: 1 }

View File

@ -327,8 +327,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.svg_el.style.strokeWidth = this.thickness*this.scale; 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 ? "black" : "none";
//console.log(this.svg_el)
// Draw Mirror // Draw Mirror
if(this.mirror_index == 1){ if(this.mirror_index == 1){
this.mirror_path.setAttribute("d",d); this.mirror_path.setAttribute("d",d);
@ -476,6 +474,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.position_on_grid = function(pos) this.position_on_grid = function(pos)
{ {
pos.y = pos.y - 7.5
x = Math.round(pos.x/this.grid_width)*this.grid_width x = Math.round(pos.x/this.grid_width)*this.grid_width
y = Math.round(pos.y/this.grid_height)*this.grid_height y = Math.round(pos.y/this.grid_height)*this.grid_height
off = (x<-this.width || x>0 || y>this.height || y<0) off = (x<-this.width || x>0 || y>this.height || y<0)
@ -488,6 +487,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.resize = function() this.resize = function()
{ {
return;
this.scale = Math.min((window.innerWidth-90)/300,(window.innerHeight-100)/320) this.scale = Math.min((window.innerWidth-90)/300,(window.innerHeight-100)/320)
this.width = dotgrid.scale*300 this.width = dotgrid.scale*300
this.height = dotgrid.scale*300 this.height = dotgrid.scale*300

View File

@ -2,6 +2,7 @@ function Interface()
{ {
this.el = document.createElement("div"); this.el = document.createElement("div");
this.el.id = "interface"; this.el.id = "interface";
this.is_visible = true;
this.start = function() this.start = function()
{ {
@ -14,9 +15,9 @@ function Interface()
["arc_c","arc clockwise (s)","M60,60 A180,180 0 0,1 240,240",""], ["arc_c","arc clockwise (s)","M60,60 A180,180 0 0,1 240,240",""],
["arc_r","arc reverse (a)","M60,60 A180,180 0 0,0 240,240",""], ["arc_r","arc reverse (a)","M60,60 A180,180 0 0,0 240,240",""],
["bezier","bezier (f)","M60,60 Q60,150 150,150 Q240,150 240,240 ",""], ["bezier","bezier (f)","M60,60 Q60,150 150,150 Q240,150 240,240 ",""],
["close","close (r)","M60,60 A180,180 0 0,1 240,240 M60,60 A180,180 0 0,0 240,240",""], ["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"], ["thickness","thickness ([ & ])","M60,60 L240,240","stroke-dasharray: 30,15"],
["linecap","linecap (/)","M60,60 L240,240 M240,180 L240,240 M180,240 L240,240"], ["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 "], ["mirror","mirror (space)","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210 "],
@ -43,4 +44,15 @@ function Interface()
document.getElementById("close").className.baseVal = dotgrid.segments.length < 1 || (prev && prev.name == "close") ? "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"; document.getElementById("export").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
} }
this.toggle = function()
{
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

@ -27,23 +27,39 @@ function Keyboard()
return; return;
} }
switch (e.keyCode) { switch(e.key){
}
switch(e.keyCode) {
case 65 : dotgrid.draw_arc(e.shiftKey ? "1,0" : "0,0"); break; // 'a/A' 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 83 : dotgrid.draw_arc(e.shiftKey ? "1,1" : "0,1"); break; // 's/S'
case 68 : dotgrid.draw_line(); break; // 'd' case 68 : dotgrid.draw_line(); break; // 'd'
case 70 : dotgrid.draw_bezier(); break; // 'f' case 70 : dotgrid.draw_bezier(); break; // 'f'
case "g" : dotgrid.draw_close(); break;
case 71 : dotgrid.draw_close(); break; // 'g' case 71 : dotgrid.draw_close(); break; // 'g'
case 221 : dotgrid.mod_thickness(1); break; // ']'
case "[" : dotgrid.mod_thickness(-1); break;
case 219 : dotgrid.mod_thickness(-1); break; // '[' case 219 : dotgrid.mod_thickness(-1); break; // '['
case "]" : dotgrid.mod_thickness(1); break;
case 221 : dotgrid.mod_thickness(1); break; // ']'
case "+" : dotgrid.mod_thickness(1); break;
case "-" : dotgrid.mod_thickness(-1); break;
case "<" : dotgrid.mod_thickness(1); break;
case ">" : dotgrid.mod_thickness(-1); break;
case "/" : dotgrid.mod_linecap(1); break; // '/'
case 191 : dotgrid.mod_linecap(1); break; // '/' case 191 : dotgrid.mod_linecap(1); break; // '/'
case "space" : dotgrid.mod_linecap(1); break; // '/'
case 32 : dotgrid.mod_mirror(); break; // 'space' case 32 : dotgrid.mod_mirror(); break; // 'space'
case "Escape" : dotgrid.mod_linecap(1); break; // '/'
case 27 : dotgrid.reset(); break; // 'ESC' case 27 : dotgrid.reset(); break; // 'ESC'
case 8 : dotgrid.erase(); break; // 'Backspace' case 8 : dotgrid.erase(); break; // 'Backspace'
case 13 : dotgrid.export(); break; // 'Enter' case 13 : dotgrid.export(); break; // 'Enter'
case 9 : dotgrid.toggle_fill(); e.preventDefault(); break; // 'tab' case 9 : dotgrid.interface.toggle(); e.preventDefault(); break; // 'tab'
case 38 : dotgrid.mod_move(new Pos(0,-15)); break; // 'up' case 38 : dotgrid.mod_move(new Pos(0,-15)); break; // 'up'
case 40 : dotgrid.mod_move(new Pos(0,15)); break; // 'down' case 40 : dotgrid.mod_move(new Pos(0,15)); break; // 'down'