Some progress on documentation.

This commit is contained in:
Devine Lu Linvega 2018-01-13 16:24:18 +13:00
parent fe23311063
commit 9b0bf7611e
4 changed files with 87 additions and 173 deletions

142
docs.js
View File

@ -1,68 +1,5 @@
function Docs()
{
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:"del"},
{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"}]
this.generate = function(m)
{
var svg_html = "";
@ -70,25 +7,13 @@ function Docs()
for(id in this.layout){
var key = this.layout[id];
var acc = this.accelerator_for_key(key.name,m);
console.log(acc)
svg_html += `<rect x="${key.x + 1}" y="${key.y + 1}" width="${key.width - 2}" height="${key.height - 2}" rx="4" ry="4" title="${key.name}" stroke="#ccc" fill="none" stroke-width="1"/>`;
svg_html += `<rect x="${key.x + 3}" y="${key.y + 3}" width="${key.width - 6}" height="${key.height - 12}" rx="3" ry="3" title="${key.name}" stroke="${acc.basic || acc.ctrl ? '#000' : '#ccc'}" fill="${acc.basic || acc.ctrl ? '#000' : '#fff'}" stroke-width="1"/>`;
svg_html += `<text x="${key.x + 10}" y="${key.y + 20}" font-size='11' font-family='Input Mono' stroke-width='0' fill='${acc.basic || acc.ctrl ? '#fff' : '#000'}'>${key.name.toUpperCase()}</text>`;
svg_html += acc && acc.basic ? `<text x="${key.x + 10}" y="${key.y + 35}" font-size='7' font-family='Input Mono' stroke-width='0' fill='#fff'>${acc.basic}</text>` : '';
svg_html += acc && acc.ctrl ? `<text x="${key.x + 10}" y="${key.y + 45}" font-size='7' font-family='Input Mono' stroke-width='0' fill='#aaa'>${acc.ctrl}</text>` : '';
}
return `<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="900"
height="300"
version="1.0"
style="fill:none; stroke:black; stroke-width:2px; padding:50px">${svg_html}</svg>`;
return `<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="900" height="300" version="1.0" style="fill:none; stroke:black; stroke-width:2px; padding:50px">${svg_html}</svg>`;
}
this.accelerator_for_key = function(key,menu)
@ -102,9 +27,72 @@ function Docs()
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();

12
main.js
View File

@ -1,4 +1,4 @@
const {app, BrowserWindow, webFrame, Menu} = require('electron')
const {app, BrowserWindow, webFrame, Menu, dialog} = require('electron')
const path = require('path')
const url = require('url')
const shell = require('electron').shell
@ -27,10 +27,14 @@ app.inject_menu = function(m)
app.generate_docs = function(m)
{
console.log("Generating docs..");
var docs = require('./docs.js');
var fs = require('fs');
fs.writeFile("/Users/VillaMoirai/Desktop/keyboard.svg", docs.generate(m));
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;

View File

@ -1,78 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="900"
height="300"
version="1.0"
style="fill:none; stroke:black; stroke-width:2px; padding:30px">
<!-- ROW 1 -->
<rect x="0" y="0" width="60" height="60" rx="4" ry="4" title="escape"/>
<rect x="60" y="0" width="60" height="60" rx="4" ry="4" title="1" class='red'/>
<rect x="120" y="0" width="60" height="60" rx="4" ry="4" title="2"/>
<rect x="180" y="0" width="60" height="60" rx="4" ry="4" title="3"/>
<rect x="240" y="0" width="60" height="60" rx="4" ry="4" title="4"/>
<rect x="300" y="0" width="60" height="60" rx="4" ry="4" title="5"/>
<rect x="360" y="0" width="60" height="60" rx="4" ry="4" title="6"/>
<rect x="420" y="0" width="60" height="60" rx="4" ry="4" title="7"/>
<rect x="480" y="0" width="60" height="60" rx="4" ry="4" title="8"/>
<rect x="540" y="0" width="60" height="60" rx="4" ry="4" title="9"/>
<rect x="600" y="0" width="60" height="60" rx="4" ry="4" title="0"/>
<rect x="660" y="0" width="60" height="60" rx="4" ry="4" title="+"/>
<rect x="720" y="0" width="60" height="60" rx="4" ry="4" title="-"/>
<rect x="780" y="0" width="120" height="60" rx="4" ry="4" title="-"/>
<!-- ROW 2 -->
<rect x="0" y="60" width="90" height="60" rx="4" ry="4" title="tab"/>
<rect x="90" y="60" width="60" height="60" rx="4" ry="4" title="q"/>
<rect x="150" y="60" width="60" height="60" rx="4" ry="4" title="w"/>
<rect x="210" y="60" width="60" height="60" rx="4" ry="4" title="e"/>
<rect x="270" y="60" width="60" height="60" rx="4" ry="4" title="r"/>
<rect x="330" y="60" width="60" height="60" rx="4" ry="4" title="t"/>
<rect x="390" y="60" width="60" height="60" rx="4" ry="4" title="y"/>
<rect x="450" y="60" width="60" height="60" rx="4" ry="4" title="u"/>
<rect x="510" y="60" width="60" height="60" rx="4" ry="4" title="i"/>
<rect x="570" y="60" width="60" height="60" rx="4" ry="4" title="o"/>
<rect x="630" y="60" width="60" height="60" rx="4" ry="4" title="p"/>
<rect x="690" y="60" width="60" height="60" rx="4" ry="4" title="["/>
<rect x="750" y="60" width="60" height="60" rx="4" ry="4" title="]"/>
<rect x="810" y="60" width="90" height="60" rx="4" ry="4" title="¥"/>
<!-- ROW 3 -->
<rect x="0" y="120" width="105" height="60" rx="4" ry="4" title="capslock"/>
<rect x="105" y="120" width="60" height="60" rx="4" ry="4" title="s"/>
<rect x="165" y="120" width="60" height="60" rx="4" ry="4" title="d"/>
<rect x="225" y="120" width="60" height="60" rx="4" ry="4" title="f"/>
<rect x="285" y="120" width="60" height="60" rx="4" ry="4" title="g"/>
<rect x="345" y="120" width="60" height="60" rx="4" ry="4" title="h"/>
<rect x="405" y="120" width="60" height="60" rx="4" ry="4" title="j"/>
<rect x="465" y="120" width="60" height="60" rx="4" ry="4" title="k"/>
<rect x="525" y="120" width="60" height="60" rx="4" ry="4" title="l"/>
<rect x="585" y="120" width="60" height="60" rx="4" ry="4" title=";"/>
<rect x="645" y="120" width="60" height="60" rx="4" ry="4" title="'"/>
<rect x="705" y="120" width="60" height="60" rx="4" ry="4" title="a"/>
<rect x="765" y="120" width="135" height="60" rx="4" ry="4" title="enter"/>
<!-- ROW 4 -->
<rect x="0" y="180" width="135" height="60" rx="4" ry="4" title="shift"/>
<rect x="135" y="180" width="60" height="60" rx="4" ry="4" title="z"/>
<rect x="195" y="180" width="60" height="60" rx="4" ry="4" title="x"/>
<rect x="255" y="180" width="60" height="60" rx="4" ry="4" title="c"/>
<rect x="315" y="180" width="60" height="60" rx="4" ry="4" title="v"/>
<rect x="375" y="180" width="60" height="60" rx="4" ry="4" title="b"/>
<rect x="435" y="180" width="60" height="60" rx="4" ry="4" title="n"/>
<rect x="495" y="180" width="60" height="60" rx="4" ry="4" title="m"/>
<rect x="555" y="180" width="60" height="60" rx="4" ry="4" title=","/>
<rect x="615" y="180" width="60" height="60" rx="4" ry="4" title="."/>
<rect x="675" y="180" width="60" height="60" rx="4" ry="4" title="/"/>
<rect x="735" y="180" width="165" height="60" rx="4" ry="4" title="capslock"/>
<!-- ROW 5 -->
<rect x="0" y="240" width="90" height="60" rx="4" ry="4" title="ctrl"/>
<rect x="90" y="240" width="90" height="60" rx="4" ry="4" title="cmd"/>
<rect x="180" y="240" width="90" height="60" rx="4" ry="4" title="alt"/>
<rect x="270" y="240" width="270" height="60" rx="4" ry="4" title="space"/>
<rect x="810" y="240" width="90" height="60" rx="4" ry="4" title="ctrl"/>
<rect x="720" y="240" width="90" height="60" rx="4" ry="4" title="pn"/>
<rect x="630" y="240" width="90" height="60" rx="4" ry="4" title="fn"/>
<rect x="540" y="240" width="90" height="60" rx="4" ry="4" title="alt"/>
</svg>

Before

Width:  |  Height:  |  Size: 4.8 KiB

View File

@ -126,42 +126,42 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.guide.start();
this.interface.start();
this.controller.add("default","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,");
this.controller.add("default","*","Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter");
this.controller.add("default","*","Hide",() => { app.toggle_visible(); },"CmdOrCtrl+H");
this.controller.add("default","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+.");
this.controller.add("default","*","Documentation",() => { dotgrid.controller.docs(); },"CmdOrCtrl+Esc");
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","*","Generate Docs",() => { dotgrid.controller.docs(); },"CmdOrCtrl+Esc");
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","Edit","Add vertex",() => { dotgrid.add_point(); },"Enter");
this.controller.add("default","Edit","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","Delete",() => { dotgrid.undo(); },"Backspace");
this.controller.add("default","Edit","Move Up",() => { dotgrid.mod_move(new Pos(0,-15)); },"Up");
this.controller.add("default","Edit","Move Down",() => { dotgrid.mod_move(new Pos(0,15)); },"Down");
this.controller.add("default","Edit","Move Left",() => { dotgrid.mod_move(new Pos(-15,0)); },"Left");
this.controller.add("default","Edit","Move Right",() => { dotgrid.mod_move(new Pos(15,0)); },"Right");
this.controller.add("default","Edit","Deselect All",() => { dotgrid.reset(); },"Esc");
this.controller.add("default","Edit","Deselect",() => { dotgrid.reset(); },"Esc");
this.controller.add("default","Stroke","Line",() => { dotgrid.draw_line(); },"A");
this.controller.add("default","Stroke","Arc",() => { dotgrid.draw_arc("0,1"); },"S");
this.controller.add("default","Stroke","Arc Reverse",() => { dotgrid.draw_arc("0,0"); },"D");
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","Effect","Increase Thickness",() => { dotgrid.mod_thickness(1) },"]");
this.controller.add("default","Effect","Decrease Thickness",() => { dotgrid.mod_thickness(-1) },"[");
this.controller.add("default","Effect","Thicker",() => { dotgrid.mod_thickness(1) },"]");
this.controller.add("default","Effect","Thinner",() => { dotgrid.mod_thickness(-1) },"[");
this.controller.add("default","Effect","Linecap",() => { dotgrid.mod_linecap(); },"/");
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(); },";");
this.controller.add("default","View","Toggle Canvas Size",() => { dotgrid.interface.toggle_zoom(); },":");
this.controller.add("default","View","Toggle Grid",() => { dotgrid.guide.toggle(); },"H");
this.controller.add("default","View","Tools",() => { dotgrid.interface.toggle(); },";");
this.controller.add("default","View","Grid",() => { dotgrid.guide.toggle(); },"H");
this.controller.add("default","View","Expert",() => { dotgrid.interface.toggle_zoom(); },":");
this.controller.commit();