Improved menus

main.js

@@ -4,10 +4,21 @@ const url = require('url')
 const shell = require('electron').shell
 
 let win
+let is_shown = true;
 
 app.inspect = function()
 {
-  win.webContents.openDevTools(); 
+  this.win.webContents.openDevTools(); 
+}
+
+app.toggle_fullscreen = function()
+{
+  win.setFullScreen(win.isFullScreen() ? false : true);
+}
+
+app.toggle_visible = function()
+{
+  if(is_shown){ win.hide(); } else{ win.show(); }
 }
 
 app.inject_menu = function(m)
@@ -15,32 +26,13 @@ app.inject_menu = function(m)
   Menu.setApplicationMenu(Menu.buildFromTemplate(m));
 }
 
+app.win = win;
+
 app.on('ready', () => 
 {
   win = new BrowserWindow({width: 400, height: 420, minWidth: 400, minHeight: 400, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'})
 
-  let is_shown = true;
-
-  Menu.setApplicationMenu(Menu.buildFromTemplate([
-    { label: 'File', submenu: [
-        { label: 'Inspector', accelerator: 'CmdOrCtrl+.', click: () => { win.webContents.openDevTools(); }},
-        { label: 'Guide', accelerator: 'CmdOrCtrl+,', click: () => { shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); }},
-        { label: 'Quit', accelerator: 'CmdOrCtrl+Q', click: () => { force_quit=true; app.exit(); }}
-      ]
-    },
-    { label: 'Window', submenu : [
-        { label: 'Hide', accelerator: 'CmdOrCtrl+H',click: () => { if(is_shown){ win.hide(); } else{ win.show(); }}},
-        { label: 'Minimize', accelerator: 'CmdOrCtrl+M',click: () => { win.minimize(); }},
-        { label: 'Fullscreen', accelerator: 'CmdOrCtrl+Enter',click: () => { win.setFullScreen(win.isFullScreen() ? false : true); }}
-      ]
-    }
-  ]));
-
-  win.loadURL(`file://${__dirname}/sources/index.html`)
-
-  win.webContents.on('did-finish-load', () => { 
-    win.webContents.send('controller-access', "hello");
-  })
+  win.loadURL(`file://${__dirname}/sources/index.html`);
 
   win.on('closed', () => {
     win = null
@@ -52,7 +44,6 @@ app.on('ready', () =>
   })
 
   win.on('show',function() {
-    var something = {name:"fuck"}
     is_shown = true;
   })
 })

sources/links/main.css

@@ -1,4 +1,4 @@
-body { padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: none; overflow: hidden;}
+body { padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: none; overflow: hidden; padding-left:5px;}
 #app { display: flex; flex-direction: column; align-items: center;}
 
 #wrapper { padding: 25px; padding-bottom: 15px; -webkit-app-region: drag;}
@@ -10,7 +10,7 @@ body { padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: non
 #cursor_to { width:4px; height:4px; margin-top:2px; margin-left:2px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
 #cursor_end { width:4px; height:4px; margin-top:2px; margin-left:2px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
 
-#guide,#widgets { position: absolute;width: 300px;height: 300px; margin-left: -5px; margin-top: -5px;}
+#guide,#widgets { position: absolute;width: 300px;height: 300px; margin-left: -5px; margin-top: -5px; transition: opacity 250ms}
 #widgets { z-index: 9000; margin-left: 0; margin-top: 0; }
 #render { display: none }
 
@@ -19,11 +19,6 @@ body { padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: non
 
 svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px; height:300px; }
 
-#dotgrid #guide { opacity: 0;  }
-#dotgrid #widgets { opacity: 0; }
-#dotgrid:hover #guide { opacity: 1 }
-#dotgrid:hover #widgets { opacity: 1 }
-
 #interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 50ms; width: 315px; position:fixed; bottom:20px; left:calc(50vw - 150px);}
 #interface svg.inactive { opacity: 0.2 }
 #interface svg:hover { opacity: 0.5 }

sources/scripts/dotgrid.js

@@ -127,11 +127,18 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     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","*","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");
+
     this.controller.add("default","File","New",() => { dotgrid.new(); },"CmdOrCtrl+N");
     this.controller.add("default","File","Open",() => { dotgrid.open(); },"CmdOrCtrl+O");
     this.controller.add("default","File","Save",() => { dotgrid.save(); },"CmdOrCtrl+S");
-    this.controller.add("default","File","Quit",() => { app.exit(); },"CmdOrCtrl+Q");
 
+    this.controller.add("default","Edit","Add vertex",() => { dotgrid.add_point(); },"Enter");
     this.controller.add("default","Edit","Undo",() => { dotgrid.undo(); },"CmdOrCtrl+Z");
     this.controller.add("default","Edit","Delete Last",() => { dotgrid.undo(); },"Backspace");
     this.controller.add("default","Edit","Move Up",() => { dotgrid.mod_move(new Pos(0,-15)); },"Up");
@@ -152,10 +159,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.controller.add("default","Effect","Mirror",() => { dotgrid.mod_mirror(); },"Space");
     this.controller.add("default","Effect","Fill",() => { dotgrid.toggle_fill(); },"G");
     
-    this.controller.add("default","View","Toggle Tools",() => { dotgrid.interface.toggle(); },"Tab");
+    this.controller.add("default","View","Toggle Tools",() => { dotgrid.interface.toggle(); },";");
     this.controller.add("default","View","Toggle Canvas Size",() => { dotgrid.interface.toggle_zoom(); },":");
-
-    this.controller.add("default","Develop","Inspect",app.inspect,"CmdOrCtrl+.");
+    this.controller.add("default","View","Toggle Grid",() => { dotgrid.guide.toggle(); },"H");
 
     this.controller.commit();
 
@@ -357,7 +363,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     }
   }
 
-  this.add_point = function(pos)
+  this.add_point = function(pos = new Pos(0,0))
   {
     if(from === null){ this.set_from(pos.scale(1/this.scale)); }
     else if(to === null){ this.set_to(pos.scale(1/this.scale)); }

sources/scripts/guide.js

@@ -20,6 +20,11 @@ function Guide()
     this.draw();
   }
 
+  this.toggle = function()
+  {
+    this.el.style.opacity = !this.el.style.opacity || this.el.style.opacity == 1 ? 0 : 1;
+  }
+
   this.draw = function()
   {
     for (var x = dotgrid.grid_x; x >= 0; x--) {