Added interface toggle

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
 

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`)
 

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;}
+#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_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 }
+
+#interface.hidden { display: none;opacity: 0 }
+#interface.visible { display: block; opacity: 1 }

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

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);
+  }
 }

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'