diff --git a/LAYOUT.md b/LAYOUT.md index 63df9bb..4d6aee6 100644 --- a/LAYOUT.md +++ b/LAYOUT.md @@ -25,15 +25,15 @@ - Linecap: `Q` - Linejoin: `W` - Mirror: `E` -- Fill: `R` - Thicker: `}` - Thinner: `{` - Thicker +5: `]` - Thinner -5: `[` ### Layers -- Move Above: `P` -- Move Below: `L` +- Foreground: `CmdOrCtrl+1` +- Middleground: `CmdOrCtrl+2` +- Background: `CmdOrCtrl+3` ### View - Tools: `U` @@ -43,6 +43,7 @@ ### Mode - Toggle Size: `CmdOrCtrl+E` - Keyboard: `CmdOrCtrl+K` +- Picker: `CmdOrCtrl+P` ## keyboard Mode @@ -71,3 +72,18 @@ - Stop Keyboard Mode: `Escape` +## picker Mode + +### Edit +- undo: `undefined` +- redo: `undefined` +- cut: `undefined` +- copy: `undefined` +- paste: `undefined` +- delete: `undefined` +- selectall: `undefined` + +### Mode +- Stop Picker Mode: `Escape` + + diff --git a/LAYOUT.svg b/LAYOUT.svg index 0ecd08d..4302060 100644 --- a/LAYOUT.svg +++ b/LAYOUT.svg @@ -1 +1 @@ -ESCDESELECTDOCUMENT1234567890-PLUSBACKSPACEDELETERESETTABQLINECAPQUITWLINEJOINEMIRRORSIZERFILLTYUTOOLSIOOPENPMOVE ABO[THINNER]THICKER|CAPSALINESARCSAVEDARC REVFBEZIERGHGRIDHIDEJCONTROLKKEYBOARDLMOVE BEL;'ENTERFULLSCRESHIFTZCONNECTUNDOXCUTCCOPYVPASTEBNNEWM,ABOUT.INSPECT/CAPSLOCKCTRLCMDALTSPACECTRLPNFNALT \ No newline at end of file +ESCDESELECTDOCUMENT1FOREGROU2MIDDLEGR3BACKGROU4567890-PLUSBACKSPACEDELETERESETTABQLINECAPQUITWLINEJOINEMIRRORSIZERTYUTOOLSIOOPENPPICKER[THINNER]THICKER|CAPSALINESARCSAVEDARC REVFBEZIERGHGRIDHIDEJCONTROLKKEYBOARDL;'ENTERFULLSCRESHIFTZCONNECTUNDOXCUTCCOPYVPASTEBNNEWM,ABOUT.INSPECT/CAPSLOCKCTRLCMDALTSPACECTRLPNFNALT \ No newline at end of file diff --git a/README.md b/README.md index fcbbd37..678ede6 100644 --- a/README.md +++ b/README.md @@ -10,8 +10,6 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved ## Controls -## default Mode - ### File - New: `CmdOrCtrl+N` - Open: `CmdOrCtrl+O` @@ -37,15 +35,15 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved - Linecap: `Q` - Linejoin: `W` - Mirror: `E` -- Fill: `R` - Thicker: `}` - Thinner: `{` - Thicker +5: `]` - Thinner -5: `[` ### Layers -- Move Above: `P` -- Move Below: `L` +- Foreground: `CmdOrCtrl+1` +- Middleground: `CmdOrCtrl+2` +- Background: `CmdOrCtrl+3` ### View - Tools: `U` @@ -55,6 +53,7 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved ### Mode - Toggle Size: `CmdOrCtrl+E` - Keyboard: `CmdOrCtrl+K` +- Picker: `CmdOrCtrl+P` ## keyboard Mode @@ -81,6 +80,20 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved ### Mode - Stop Keyboard Mode: `Escape` +## picker Mode + +### Edit +- undo: `undefined` +- redo: `undefined` +- cut: `undefined` +- copy: `undefined` +- paste: `undefined` +- delete: `undefined` +- selectall: `undefined` + +### Mode +- Stop Picker Mode: `Escape` + ## Extras diff --git a/desktop/sources/index.html b/desktop/sources/index.html index 1594535..4c715cd 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -11,6 +11,7 @@ + diff --git a/desktop/sources/links/fonts.css b/desktop/sources/links/fonts.css index b6b11ea..be688de 100644 --- a/desktop/sources/links/fonts.css +++ b/desktop/sources/links/fonts.css @@ -1,6 +1,15 @@ +/* Input */ + @font-face { - font-family: 'din_regular'; - src: url('../media/fonts/din_regular.ttf') format('truetype'); - font-weight: normal; - font-style: normal; + font-family: 'input_mono_regular'; + src: url('../media/fonts/input_mono_regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'input_mono_medium'; + src: url('../media/fonts/input_mono_medium.ttf') format('truetype'); + font-weight: normal; + font-style: normal; } \ No newline at end of file diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css index 0bea271..7bb4435 100644 --- a/desktop/sources/links/main.css +++ b/desktop/sources/links/main.css @@ -1,4 +1,4 @@ -body { padding: 5px; font-family: 'din_regular'; -webkit-user-select: none; overflow: hidden; padding-left:5px; transition: background 500ms} +body { padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: none; overflow: hidden; padding-left:5px; transition: background 500ms} #app { display: flex; flex-direction: column; align-items: center;} #wrapper { padding: 25px; padding-bottom: 15px; -webkit-app-region: drag; padding-left:15px;} @@ -21,7 +21,7 @@ body { padding: 5px; font-family: 'din_regular'; -webkit-user-select: none; over svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px; height:300px; } -#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 315px; position:fixed; bottom:20px; left:calc(50vw - 155px);} +#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 315px; position:fixed; bottom:20px; left:calc(50vw - 155px); height:30px;} #interface svg.inactive { opacity: 0.2 } #interface svg path.inactive { opacity: 0.2 } #interface svg:hover { opacity: 0.5 } @@ -31,6 +31,10 @@ svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px; #interface.hidden { bottom:10px;opacity: 0 } #interface.visible { bottom:20px; opacity: 1 } +#interface #menu { opacity: 1; position: absolute; top:0px; transition: all 250ms; z-index: 900} +#interface #picker { background:red; position: absolute; line-height: 30px; z-index: 0; width:250px; top:5px; opacity: 0; transition: all 250ms;} +#interface.picker #menu { opacity: 0; top:-5px; z-index: 0 } +#interface.picker #picker { opacity: 1; top:0px; z-index: 900 } #preview { position: absolute; top:20px; left:20px; stroke-dasharray: 4,4; } /* Theme Defaults */ @@ -38,6 +42,7 @@ svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px; :root { --background: "#222"; --f_high: "#fff";--f_med: "#777";--f_low: "#444";--f_inv: "#000";--b_high: "#000";--b_med: "#affec7";--b_low: "#000";--b_inv: "#affec7"; } body { background:var(--background) !important; } +#picker { background:var(--background) !important; color:var(--f_high) !important; } .fh { color:var(--f_high) !important; stroke:var(--f_high) !important; } .fm { color:var(--f_med) !important ; stroke:var(--f_med) !important; } .fl { color:var(--f_low) !important ; stroke:var(--f_low) !important; } diff --git a/desktop/sources/media/fonts/din_regular.ttf b/desktop/sources/media/fonts/din_regular.ttf deleted file mode 100644 index 99775ac..0000000 Binary files a/desktop/sources/media/fonts/din_regular.ttf and /dev/null differ diff --git a/desktop/sources/media/fonts/input_mono_medium.ttf b/desktop/sources/media/fonts/input_mono_medium.ttf new file mode 100644 index 0000000..0d488bf Binary files /dev/null and b/desktop/sources/media/fonts/input_mono_medium.ttf differ diff --git a/desktop/sources/media/fonts/input_mono_regular.ttf b/desktop/sources/media/fonts/input_mono_regular.ttf new file mode 100644 index 0000000..c19c287 Binary files /dev/null and b/desktop/sources/media/fonts/input_mono_regular.ttf differ diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 21de86a..8cdd829 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -8,6 +8,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000") this.render = new Render(); this.tool = new Tool(); this.keyboard = new Keyboard(); + this.picker = new Picker(); this.width = width; this.height = height; @@ -158,6 +159,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000") this.controller.add("default","Mode","Toggle Size",() => { dotgrid.interface.toggle_zoom(); },"CmdOrCtrl+E"); this.controller.add("default","Mode","Keyboard",() => { dotgrid.keyboard.start(); },"CmdOrCtrl+K"); + this.controller.add("default","Mode","Picker",() => { dotgrid.picker.start(); },"CmdOrCtrl+P"); this.controller.add("keyboard","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,"); this.controller.add("keyboard","*","Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter"); @@ -187,6 +189,24 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000") this.controller.add("keyboard","Select","XXYY(9)",() => { dotgrid.keyboard.push(9); },"9"); this.controller.add("keyboard","Mode","Stop Keyboard Mode",() => { dotgrid.keyboard.stop(); },"Escape"); + + this.controller.add("picker","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,"); + this.controller.add("picker","*","Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter"); + this.controller.add("picker","*","Hide",() => { app.toggle_visible(); },"CmdOrCtrl+H"); + this.controller.add("picker","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+."); + this.controller.add("picker","*","Documentation",() => { dotgrid.controller.docs(); },"CmdOrCtrl+Esc"); + this.controller.add("picker","*","Reset",() => { dotgrid.reset(); dotgrid.theme.reset(); },"CmdOrCtrl+Backspace"); + this.controller.add("picker","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q"); + + this.controller.add_role("picker","Edit","undo"); + this.controller.add_role("picker","Edit","redo"); + this.controller.add_role("picker","Edit","cut"); + this.controller.add_role("picker","Edit","copy"); + this.controller.add_role("picker","Edit","paste"); + this.controller.add_role("picker","Edit","delete"); + this.controller.add_role("picker","Edit","selectall"); + + this.controller.add("picker","Mode","Stop Picker Mode",() => { dotgrid.picker.stop(); },"Escape"); this.controller.commit(); @@ -265,6 +285,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000") if(o == "linecap"){ this.mod_linecap(); } if(o == "linejoin"){ this.mod_linejoin(); } if(o == "mirror"){ this.mod_mirror(); } + if(o == "color"){ setTimeout(()=>{ this.picker.start(); }, 100) } if(o == "depth"){ this.toggle_layer(); } } @@ -352,7 +373,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000") this.tool.style().thickness = Math.max(this.tool.style().thickness+mod,0); this.cursor_x.textContent = this.tool.style().thickness; this.draw(); - console.log(mod,step,this.tool.style()) } this.mod_linecap_index = 1; diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js index 6ba0c00..3a621b4 100644 --- a/desktop/sources/scripts/interface.js +++ b/desktop/sources/scripts/interface.js @@ -3,12 +3,17 @@ function Interface() this.el = document.createElement("div"); this.el.id = "interface"; + this.el.appendChild(this.menu_el = document.createElement("div")); + this.menu_el.id = "menu"; + this.is_visible = true; this.zoom = false; this.start = function() { document.getElementById("app").appendChild(this.el); + this.el.appendChild(dotgrid.picker.el); + var html = "" var tools = { line: ["line","M60,60 L240,240",""], @@ -31,7 +36,7 @@ function Interface() var tool = tools[id]; html += `${id == "depth" ? `` : ""}${id}` } - this.el.innerHTML = html + this.menu_el.innerHTML = html } this.update = function() diff --git a/desktop/sources/scripts/keyboard.js b/desktop/sources/scripts/keyboard.js index 9011a61..37dbb70 100644 --- a/desktop/sources/scripts/keyboard.js +++ b/desktop/sources/scripts/keyboard.js @@ -1,11 +1,13 @@ function Keyboard() { this.memory = ""; + this.is_active = false; this.selector = {x:0,y:0}; this.start = function() { + this.is_active = true; dotgrid.controller.set("keyboard"); this.select({x:10,y:10}) dotgrid.cursor.className = "keyboard"; @@ -13,6 +15,7 @@ function Keyboard() this.stop = function() { + this.is_active = false; dotgrid.controller.set(); dotgrid.cursor.className = ""; } @@ -75,6 +78,8 @@ function Keyboard() this.listen = function(e) { + if(!this.is_active){ return; } + if(e.key == "ArrowRight"){ dotgrid.keyboard.move(-1,0); e.preventDefault(); diff --git a/desktop/sources/scripts/picker.js b/desktop/sources/scripts/picker.js new file mode 100644 index 0000000..e1a8f0b --- /dev/null +++ b/desktop/sources/scripts/picker.js @@ -0,0 +1,64 @@ +function Picker() +{ + this.memory = ""; + this.el = document.createElement("input"); + this.el.id = "picker" + this.el.setAttribute("placeholder","#ff0000") + this.el.setAttribute("maxlength","7") + this.original = null; + + this.start = function() + { + dotgrid.controller.set("picker"); + dotgrid.interface.el.className = "picker" + this.el.focus() + this.original = dotgrid.tool.style().color + this.el.value = "" + } + + this.stop = function() + { + this.cancel(); + dotgrid.controller.set(); + dotgrid.interface.el.className = "" + this.el.blur() + this.el.value = "" + } + + this.validate = function() + { + dotgrid.tool.style().color = this.el.value; + dotgrid.draw(); + dotgrid.controller.set(); + dotgrid.interface.el.className = "" + this.el.blur() + } + + this.cancel = function() + { + if(!this.original){ return; } + dotgrid.tool.style().color = this.original; + dotgrid.draw(); + } + + this.update = function() + { + if(this.el.value.length != 4 && this.el.value.length != 7){ return; } + + dotgrid.tool.style().color = this.el.value; + dotgrid.draw(); + } + + this.listen = function(e) + { + if(e.key == "Enter"){ + this.validate(); + e.preventDefault(); + return; + } + + this.update(); + } + + this.el.onkeyup = function(event){ dotgrid.picker.listen(event); }; +} \ No newline at end of file