diff --git a/LAYOUT.svg b/LAYOUT.svg new file mode 100644 index 0000000..3b4d9f0 --- /dev/null +++ b/LAYOUT.svg @@ -0,0 +1 @@ +ESCDESELECTDOCUMENT1234567890-+BACKSPACEDELETERESETTABQQUITWERTYUIOOPENP[THINNER]THICKER|CAPSALINESARCSAVEDARC REVFBEZIERGFILLHGRIDHIDEJKL;TOOLS'ENTERINSERTFULLSCRESHIFTZCONNECTUNDOXCCOPYVPASTEBNNEWM,ABOUT.INSPECT/LINECAPCAPSLOCKCTRLCMDALTSPACEMIRRORCTRLPNFNALT \ No newline at end of file diff --git a/README.md b/README.md index 4f5119d..f4c6253 100644 --- a/README.md +++ b/README.md @@ -10,41 +10,7 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved ## Controls -### Segments - -- `a` Draw Arc(counter-clockwise). -- `s` Draw Arc(clockwise). -- `d` Draw Line. -- `f` Draw Bezier. -- `g` Close Path. -- `h` Fill Path. - -### Parametric - -- `arrows` Move last control point. -- `click/drag` Translate target control point. -- `click+alt` Erase target control point. - -### Shortcuts - -- `]` Increase stroke size. -- `[` Reduce stroke size. -- `/` Toggle linecap. -- `space` Mirror. -- `escape` Remove control points. -- `~` Toggle canvas size. - -### System - -- `ctrl+n` New canvas. -- `ctrl+s` Export canvas. -- `ctrl+z` Delete last segment. -- `ctrl+shift+backspace` Reset. - -## Hacker Mode(Cheatmode) - -- `tab` Toggle interface. -- `1204` Will add a control point at x:12,y:4. + ## Extras diff --git a/docs.js b/docs.js deleted file mode 100644 index c6f0c0f..0000000 --- a/docs.js +++ /dev/null @@ -1,98 +0,0 @@ -function Docs() -{ - 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); - 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; - } - - 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:"backspace"}, - {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"} - ] -} - -module.exports = new Docs(); \ No newline at end of file diff --git a/main.js b/main.js index 9069305..25f5413 100644 --- a/main.js +++ b/main.js @@ -25,18 +25,6 @@ app.inject_menu = function(m) Menu.setApplicationMenu(Menu.buildFromTemplate(m)); } -app.generate_docs = function(m) -{ - var fs = require('fs'); - var docs = require('./docs.js'); - - dialog.showSaveDialog((fileName) => { - if (fileName === undefined){ return; } - fileName = fileName.substr(-4,4) != ".svg" ? fileName+".svg" : fileName; - fs.writeFile(fileName, docs.generate(m)); - }); -} - app.win = null; app.on('ready', () => diff --git a/sources/index.html b/sources/index.html index 27adff9..1bd18e2 100644 --- a/sources/index.html +++ b/sources/index.html @@ -25,12 +25,7 @@ dotgrid = new Dotgrid(300,300,20,20,4,4, 10,"square","#000000"); dotgrid.install(); - - 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); - document.addEventListener('copy', function(e){ dotgrid.copy(e);}, false); - document.addEventListener('paste', function(e){ dotgrid.paste(e);}, false); + diff --git a/sources/links/main.css b/sources/links/main.css index 9392d7d..43aec38 100644 --- a/sources/links/main.css +++ b/sources/links/main.css @@ -19,12 +19,12 @@ 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; } -#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 { 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 - 150px);} #interface svg.inactive { opacity: 0.2 } #interface svg:hover { opacity: 0.5 } #interface svg.icon:last-child { margin-right: 0; margin-left: 15px; } -#interface.hidden { bottom:30px;opacity: 0 } +#interface.hidden { bottom:10px;opacity: 0 } #interface.visible { bottom:20px; opacity: 1 } #preview { position: absolute; top:20px; left:20px; stroke-dasharray: 4,4; } diff --git a/sources/scripts/controller.js b/sources/scripts/controller.js index efc1f99..8df6084 100644 --- a/sources/scripts/controller.js +++ b/sources/scripts/controller.js @@ -17,6 +17,12 @@ function Controller() console.log(`${mode}/${cat}/${label} <${accelerator}>`); } + this.set = function(mode) + { + this.mode = mode; + this.commit(); + } + this.format = function() { var f = []; @@ -40,8 +46,107 @@ function Controller() this.docs = function() { console.log("Generating docs.."); - this.app.generate_docs(this.format()); + var svg = this.generate(this.format()) + dialog.showSaveDialog((fileName) => { + if (fileName === undefined){ return; } + fileName = fileName.substr(-4,4) != ".svg" ? fileName+".svg" : fileName; + fs.writeFile(fileName,svg); + }); } + + 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); + 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; + } + + 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:"backspace"}, + {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"} + ]; } module.exports = new Controller(); \ No newline at end of file diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js index 9dcae8a..8412197 100644 --- a/sources/scripts/dotgrid.js +++ b/sources/scripts/dotgrid.js @@ -138,7 +138,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.controller.add("default","File","Open",() => { dotgrid.open(); },"CmdOrCtrl+O"); this.controller.add("default","File","Save",() => { dotgrid.save(); },"CmdOrCtrl+S"); - this.controller.add("default","Edit","Vertex",() => { dotgrid.add_point(); },"Enter"); + this.controller.add("default","Edit","Insert",() => { dotgrid.add_point(); },"Enter"); + this.controller.add("default","Edit","Copy",() => { document.execCommand('copy'); },"CmdOrCtrl+C"); + this.controller.add("default","Edit","Paste",() => { document.execCommand('paste'); },"CmdOrCtrl+V"); this.controller.add("default","Edit","Undo",() => { dotgrid.undo(); },"CmdOrCtrl+Z"); this.controller.add("default","Edit","Delete",() => { dotgrid.undo(); },"Backspace"); this.controller.add("default","Edit","Move Up",() => { dotgrid.mod_move(new Pos(0,-15)); },"Up"); @@ -151,7 +153,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.controller.add("default","Stroke","Arc",() => { dotgrid.draw_arc("0,1"); },"S"); this.controller.add("default","Stroke","Arc Rev",() => { 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"); + this.controller.add("default","Stroke","Connect",() => { dotgrid.draw_close(); },"Z"); this.controller.add("default","Effect","Thicker",() => { dotgrid.mod_thickness(1) },"]"); this.controller.add("default","Effect","Thinner",() => { dotgrid.mod_thickness(-1) },"["); @@ -165,6 +167,12 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.controller.commit(); + 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); + document.addEventListener('copy', function(e){ dotgrid.copy(e); e.preventDefault(); }, false); + document.addEventListener('paste', function(e){ dotgrid.paste(e); e.preventDefault(); }, false); + window.addEventListener('drop', dotgrid.drag); dotgrid.set_size({width:300,height:300}); @@ -634,17 +642,18 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.copy = function(e) { - if(this.segments.length == 0){ return; } - this.scale = 1 - this.width = 300 - this.height = 300 - this.draw(); + if(dotgrid.segments.length == 0){ return; } - var svg = this.svg_el.outerHTML - e.clipboardData.items.add(JSON.stringify(this.serializer.serialize()), "text/plain"); - e.clipboardData.items.add(svg, "text/html"); - e.clipboardData.items.add(svg, "text/svg+xml"); - e.preventDefault(); + dotgrid.scale = 1 + dotgrid.width = 300 + dotgrid.height = 300 + dotgrid.draw(); + + var svg = dotgrid.svg_el.outerHTML; + + e.clipboardData.setData('text/plain', JSON.stringify(dotgrid.serializer.serialize())); + e.clipboardData.setData('text/html', svg); + e.clipboardData.setData('text/svg+xml', svg); } this.paste = function(e) @@ -654,7 +663,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca data = JSON.parse(data.trim()); if (!data || !data.dotgrid) throw null; } catch (err) { - // Not a dotgrid JSON. return; } @@ -711,4 +719,4 @@ window.addEventListener('dragover',function(e) e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; -}); \ No newline at end of file +});