Added interface toggle
This commit is contained in:
Devine Lu Linvega
parent
ae0e4a8ba9
commit
a4cce3eb85
|
|
@ -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
|
||||
|
||||
|
|
|
|||
2
main.js
2
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`)
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
#interface svg:hover { opacity: 0.5 }
|
||||
|
||||
#interface.hidden { display: none;opacity: 0 }
|
||||
#interface.visible { display: block; opacity: 1 }
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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'
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user