diff --git a/README.md b/README.md index 1677ada..535f8fc 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,7 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved - `space` Mirror. - `escape` Remove control points. - `arrows` Move last control point. +- `tab` Toggle interface. ### Shortcuts diff --git a/main.js b/main.js index 69d88a8..0fc59bd 100644 --- a/main.js +++ b/main.js @@ -6,7 +6,7 @@ let win 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`) diff --git a/sources/links/main.css b/sources/links/main.css index f07e5c0..f78dbf1 100644 --- a/sources/links/main.css +++ b/sources/links/main.css @@ -1,7 +1,7 @@ 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;} -#dotgrid { margin:0px auto; position:relative; overflow: hidden; padding:10px;-webkit-app-region: no-drag; width:310px !important; height:310px !important;} +#wrapper { width: calc(100% - 50px); height: calc(100% - 50px); padding: 25px; background: inherit;-webkit-app-region: drag;} +#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_coord { font-size:10px; z-index: 10000; margin-left:15px; margin-top:-2px;} #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: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 #widgets { opacity: 0; transition: all 150ms; left: 5px;top: 5px; } #dotgrid:hover #guide { 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:hover { opacity: 0.5 } \ No newline at end of file +#interface svg:hover { opacity: 0.5 } + +#interface.hidden { display: none;opacity: 0 } +#interface.visible { display: block; opacity: 1 } \ No newline at end of file diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js index ef24ca7..56351be 100644 --- a/sources/scripts/dotgrid.js +++ b/sources/scripts/dotgrid.js @@ -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.fill = this.fill ? "black" : "none"; - //console.log(this.svg_el) - // Draw Mirror if(this.mirror_index == 1){ 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) { + pos.y = pos.y - 7.5 x = Math.round(pos.x/this.grid_width)*this.grid_width y = Math.round(pos.y/this.grid_height)*this.grid_height 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() { + return; this.scale = Math.min((window.innerWidth-90)/300,(window.innerHeight-100)/320) this.width = dotgrid.scale*300 this.height = dotgrid.scale*300 diff --git a/sources/scripts/interface.js b/sources/scripts/interface.js index bcb9416..3eb006a 100644 --- a/sources/scripts/interface.js +++ b/sources/scripts/interface.js @@ -2,6 +2,7 @@ function Interface() { this.el = document.createElement("div"); this.el.id = "interface"; + this.is_visible = true; this.start = function() { @@ -14,9 +15,9 @@ function Interface() ["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",""], ["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"], ["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("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); + } } \ No newline at end of file diff --git a/sources/scripts/keyboard.js b/sources/scripts/keyboard.js index 2946263..ffc903f 100644 --- a/sources/scripts/keyboard.js +++ b/sources/scripts/keyboard.js @@ -27,23 +27,39 @@ function Keyboard() 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 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 221 : dotgrid.mod_thickness(1); break; // ']' + + case "[" : 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 "space" : dotgrid.mod_linecap(1); break; // '/' case 32 : dotgrid.mod_mirror(); break; // 'space' + case "Escape" : dotgrid.mod_linecap(1); break; // '/' case 27 : dotgrid.reset(); break; // 'ESC' case 8 : dotgrid.erase(); break; // 'Backspace' 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 40 : dotgrid.mod_move(new Pos(0,15)); break; // 'down'