diff --git a/docs.js b/docs.js new file mode 100644 index 0000000..f476104 --- /dev/null +++ b/docs.js @@ -0,0 +1,110 @@ +function Docs() +{ + this.layout = [ + {x:0, y:0, width:60, height:60, name:"esc"}, + {x:60, y:0, width:60, height:60, name:"1"}, + {x:120, y:0, width:60, height:60, name:"2"}, + {x:180, y:0, width:60, height:60, name:"3"}, + {x:240, y:0, width:60, height:60, name:"4"}, + {x:300, y:0, width:60, height:60, name:"5"}, + {x:360, y:0, width:60, height:60, name:"6"}, + {x:420, y:0, width:60, height:60, name:"7"}, + {x:480, y:0, width:60, height:60, name:"8"}, + {x:540, y:0, width:60, height:60, name:"9"}, + {x:600, y:0, width:60, height:60, name:"0"}, + {x:660, y:0, width:60, height:60, name:"-"}, + {x:720, y:0, width:60, height:60, name:"+"}, + {x:780, y:0, width:120, height:60, name:"del"}, + {x:0, y:60, width:90, height:60, name:"tab"}, + {x:90, y:60, width:60, height:60, name:"q"}, + {x:150, y:60, width:60, height:60, name:"w"}, + {x:210, y:60, width:60, height:60, name:"e"}, + {x:270, y:60, width:60, height:60, name:"r"}, + {x:330, y:60, width:60, height:60, name:"t"}, + {x:390, y:60, width:60, height:60, name:"y"}, + {x:450, y:60, width:60, height:60, name:"u"}, + {x:510, y:60, width:60, height:60, name:"i"}, + {x:570, y:60, width:60, height:60, name:"o"}, + {x:630, y:60, width:60, height:60, name:"p"}, + {x:690, y:60, width:60, height:60, name:"["}, + {x:750, y:60, width:60, height:60, name:"]"}, + {x:810, y:60, width:90, height:60, name:"|"}, + {x:0, y:120, width:105, height:60, name:"caps"}, + {x:105, y:120, width:60, height:60, name:"a"}, + {x:165, y:120, width:60, height:60, name:"s"}, + {x:225, y:120, width:60, height:60, name:"d"}, + {x:285, y:120, width:60, height:60, name:"f"}, + {x:345, y:120, width:60, height:60, name:"g"}, + {x:405, y:120, width:60, height:60, name:"h"}, + {x:465, y:120, width:60, height:60, name:"j"}, + {x:525, y:120, width:60, height:60, name:"k"}, + {x:585, y:120, width:60, height:60, name:"l"}, + {x:645, y:120, width:60, height:60, name:";"}, + {x:705, y:120, width:60, height:60, name:"'"}, + {x:765, y:120, width:135, height:60, name:"enter"}, + {x:0, y:180, width:135, height:60, name:"shift"}, + {x:135, y:180, width:60, height:60, name:"z"}, + {x:195, y:180, width:60, height:60, name:"x"}, + {x:255, y:180, width:60, height:60, name:"c"}, + {x:315, y:180, width:60, height:60, name:"v"}, + {x:375, y:180, width:60, height:60, name:"b"}, + {x:435, y:180, width:60, height:60, name:"n"}, + {x:495, y:180, width:60, height:60, name:"m"}, + {x:555, y:180, width:60, height:60, name:","}, + {x:615, y:180, width:60, height:60, name:"."}, + {x:675, y:180, width:60, height:60, name:"/"}, + {x:735, y:180, width:165, height:60, name:"capslock"}, + {x:0, y:240, width:90, height:60, name:"ctrl"}, + {x:90, y:240, width:90, height:60, name:"cmd"}, + {x:180, y:240, width:90, height:60, name:"alt"}, + {x:270, y:240, width:270, height:60, name:"space"}, + {x:810, y:240, width:90, height:60, name:"ctrl"}, + {x:720, y:240, width:90, height:60, name:"pn"}, + {x:630, y:240, width:90, height:60, name:"fn"}, + {x:540, y:240, width:90, height:60, name:"alt"}] + + this.generate = function(m) + { + var svg_html = ""; + + for(id in this.layout){ + var key = this.layout[id]; + var acc = this.accelerator_for_key(key.name,m); + console.log(acc) + svg_html += ``; + svg_html += ``; + + svg_html += `${key.name.toUpperCase()}`; + svg_html += acc && acc.basic ? `${acc.basic}` : ''; + svg_html += acc && acc.ctrl ? `${acc.ctrl}` : ''; + } + + return `${svg_html}`; + } + + this.accelerator_for_key = function(key,menu) + { + var acc = {basic:null,ctrl:null} + for(cat in menu){ + var options = menu[cat]; + for(id in options.submenu){ + var option = options.submenu[id]; + acc.basic = (option.accelerator.toLowerCase() == key.toLowerCase()) ? option.label.toUpperCase().replace("TOGGLE ","").substr(0,8).trim() : acc.basic; + acc.ctrl = (option.accelerator.toLowerCase() == ("CmdOrCtrl+"+key).toLowerCase()) ? option.label.toUpperCase().replace("TOGGLE ","").substr(0,8).trim() : acc.ctrl; + } + } + + return acc; + } +} + +module.exports = new Docs(); \ No newline at end of file diff --git a/main.js b/main.js index b6b8dde..c8b259d 100644 --- a/main.js +++ b/main.js @@ -3,22 +3,21 @@ const path = require('path') const url = require('url') const shell = require('electron').shell -let win let is_shown = true; app.inspect = function() { - this.win.webContents.openDevTools(); + app.win.toggleDevTools(); } app.toggle_fullscreen = function() { - win.setFullScreen(win.isFullScreen() ? false : true); + app.win.setFullScreen(app.win.isFullScreen() ? false : true); } app.toggle_visible = function() { - if(is_shown){ win.hide(); } else{ win.show(); } + if(is_shown){ app.win.hide(); } else{ app.win.show(); } } app.inject_menu = function(m) @@ -26,24 +25,32 @@ app.inject_menu = function(m) Menu.setApplicationMenu(Menu.buildFromTemplate(m)); } -app.win = win; +app.generate_docs = function(m) +{ + console.log("Generating docs.."); + var docs = require('./docs.js'); + var fs = require('fs'); + fs.writeFile("/Users/VillaMoirai/Desktop/keyboard.svg", docs.generate(m)); +} + +app.win = null; app.on('ready', () => { - win = new BrowserWindow({width: 400, height: 420, minWidth: 400, minHeight: 400, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'}) + app.win = new BrowserWindow({width: 400, height: 420, minWidth: 400, minHeight: 400, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'}) - win.loadURL(`file://${__dirname}/sources/index.html`); + app.win.loadURL(`file://${__dirname}/sources/index.html`); - win.on('closed', () => { + app.win.on('closed', () => { win = null app.quit() }) - win.on('hide',function() { + app.win.on('hide',function() { is_shown = false; }) - win.on('show',function() { + app.win.on('show',function() { is_shown = true; }) }) @@ -54,7 +61,7 @@ app.on('window-all-closed', () => }) app.on('activate', () => { - if (win === null) { + if (app.win === null) { createWindow() } else{ diff --git a/package.json b/package.json index ff7ce52..5d649da 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "theme_osx" : "cp -R ~/Github/HundredRabbits/Themes/themes ~/Desktop/Dotgrid-darwin-x64/", "theme_linux" : "cp -R ~/Github/HundredRabbits/Themes/themes ~/Desktop/Dotgrid-linux-x64/", "theme_win" : "cp -R ~/Github/HundredRabbits/Themes/themes ~/Desktop/Dotgrid-win32-x64/", + "docs" : "electron . docs", "push" : "npm run build ; npm run theme ; npm run push_osx ; npm run push_linux ; npm run push_win ; npm run clean ; npm run push_status" }, "devDependencies": { diff --git a/sources/index.html b/sources/index.html index bb640c8..27adff9 100644 --- a/sources/index.html +++ b/sources/index.html @@ -6,7 +6,6 @@ - @@ -27,9 +26,6 @@ dotgrid = new Dotgrid(300,300,20,20,4,4, 10,"square","#000000"); dotgrid.install(); - var keyboard = new Keyboard(); - - document.onkeyup = function myFunction(event){ keyboard.listen(event); }; document.addEventListener('mousedown', function(e){ dotgrid.mouse_down(e); }, false); document.addEventListener('mousemove', function(e){ dotgrid.mouse_move(e); }, false); document.addEventListener('mouseup', function(e){ dotgrid.mouse_up(e);}, false); diff --git a/sources/media/vectors/keyboard.svg b/sources/media/vectors/keyboard.svg new file mode 100644 index 0000000..3c2b408 --- /dev/null +++ b/sources/media/vectors/keyboard.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/sources/scripts/controller.js b/sources/scripts/controller.js index 216da63..efc1f99 100644 --- a/sources/scripts/controller.js +++ b/sources/scripts/controller.js @@ -14,10 +14,10 @@ function Controller() if(!this.menu[mode]){ this.menu[mode] = {}; } if(!this.menu[mode][cat]){ this.menu[mode][cat] = {}; } this.menu[mode][cat][label] = {fn:fn,accelerator:accelerator}; - console.log("Added control",mode,cat,label,accelerator) + console.log(`${mode}/${cat}/${label} <${accelerator}>`); } - this.commit = function() + this.format = function() { var f = []; var m = this.menu[this.mode]; @@ -29,7 +29,18 @@ function Controller() } f.push({label:cat,submenu:submenu}); } - this.app.inject_menu(f); + return f; + } + + this.commit = function() + { + this.app.inject_menu(this.format()); + } + + this.docs = function() + { + console.log("Generating docs.."); + this.app.generate_docs(this.format()); } } diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js index 694712b..ef4aba2 100644 --- a/sources/scripts/dotgrid.js +++ b/sources/scripts/dotgrid.js @@ -125,11 +125,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.theme.start(); this.guide.start(); this.interface.start(); - this.controller.start(); this.controller.add("default","*","Reset",() => { dotgrid.reset(); dotgrid.theme.reset(); },"CmdOrCtrl+Backspace"); this.controller.add("default","*","About Dotgrid",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,"); - this.controller.add("default","*","Developer Tools",() => { app.inspect },"CmdOrCtrl+."); + this.controller.add("default","*","Developer Tools",() => { app.inspect(); },"CmdOrCtrl+."); + this.controller.add("default","*","Generate Docs",() => { dotgrid.controller.docs(); },"CmdOrCtrl+Esc"); this.controller.add("default","*","Toggle Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter"); this.controller.add("default","*","Toggle Visible",() => { app.toggle_visible(); },"CmdOrCtrl+H"); this.controller.add("default","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q"); @@ -149,7 +149,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.controller.add("default","Stroke","Line",() => { dotgrid.draw_line(); },"A"); this.controller.add("default","Stroke","Arc",() => { dotgrid.draw_arc("0,1"); },"S"); - this.controller.add("default","Stroke","Arc(CC)",() => { dotgrid.draw_arc("0,0"); },"D"); + this.controller.add("default","Stroke","Arc Reverse",() => { dotgrid.draw_arc("0,0"); },"D"); this.controller.add("default","Stroke","Bezier",() => { dotgrid.draw_bezier(); },"F"); this.controller.add("default","Stroke","Close",() => { dotgrid.draw_close(); },"Z"); diff --git a/sources/scripts/interface.js b/sources/scripts/interface.js index e395147..2a1d22a 100644 --- a/sources/scripts/interface.js +++ b/sources/scripts/interface.js @@ -10,16 +10,16 @@ function Interface() // Interface var html = "" var path_arr = [ - ["line","line (d)","M60,60 L240,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",""], - ["bezier","bezier (f)","M60,60 Q60,150 150,150 Q240,150 240,240 ",""], - ["close","close (g)","M60,60 A180,180 0 0,1 240,240 M60,60 A180,180 0 0,0 240,240",""], + ["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",""], - ["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 "], - ["fill","fill (h)","M60,60 L60,150 L150,150 L240,150 L240,240 Z "], + ["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","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 "], ["export","export (ctrl s)","M150,50 L50,150 L150,250 L250,150 L150,50 Z"] ] diff --git a/sources/scripts/keyboard.js b/sources/scripts/keyboard.js deleted file mode 100644 index aa6f7ca..0000000 --- a/sources/scripts/keyboard.js +++ /dev/null @@ -1,96 +0,0 @@ -function Keyboard() -{ - this.listen = function(e) - { - // // zoom - // if(e.key == "~" || e.keyCode == 192){ - // dotgrid.interface.toggle_zoom(); - // e.preventDefault(); - // return; - // } - - // // undo - // if(e.key == "z" && (e.ctrlKey || e.metaKey)){ - // e.preventDefault(); - // dotgrid.erase(); - // return; - // } - - // // Reset - // if((e.key == "Backspace" || e.key == "Delete") && e.ctrlKey && e.shiftKey){ - // e.preventDefault(); - // dotgrid.theme.reset(); - // return; - // } - - // var numbers = ["0","1","2","3","4","5","6","7","8","9"] - // if(numbers.indexOf(e.key) > -1 || e.code == "Digit0" || e.keyCode == 48){ - // keyboard.cheatcode(e.key); - // return; - // } - // else{ - // this.code_history = ""; - // } - - // 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; // '[' - // 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.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' - // case 37 : dotgrid.mod_move(new Pos(-15,0)); break; // 'left' - // case 39 : dotgrid.mod_move(new Pos(15,0)); break; // 'right' - // } - // dotgrid.draw(); - } - - this.code_history = ""; - - this.cheatcode = function(key) - { - if(key.length != 1){ return; } - this.code_history += key; - - if(this.code_history.length == 2){ - var x = this.code_history.substr(0,2); - var y = 15; - dotgrid.move_cursor(new Pos(x * -15,y * 15)) - } - if(this.code_history.length > 3){ - var x = this.code_history.substr(0,2); - var y = this.code_history.substr(2,2); - dotgrid.add_point(new Pos(x * -15,y * 15)) - dotgrid.move_cursor(new Pos(x * -15,y * 15)) - this.code_history = ""; - } - } -}