Лu Лinveгa
GitHub
commit
7e84a0fa9c
|
|
@ -5,6 +5,6 @@
|
|||
"node": true
|
||||
},
|
||||
"globals": {
|
||||
"DOTGRID": true
|
||||
"dotgrid": true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ app.win = null
|
|||
|
||||
app.on('ready', () => {
|
||||
app.win = new BrowserWindow({
|
||||
width: 700,
|
||||
height: 430,
|
||||
width: 660,
|
||||
height: 390,
|
||||
minWidth: 320,
|
||||
minHeight: 320,
|
||||
backgroundColor: '#000',
|
||||
|
|
@ -24,7 +24,7 @@ app.on('ready', () => {
|
|||
})
|
||||
|
||||
app.win.loadURL(`file://${__dirname}/sources/index.html`)
|
||||
// app.inspect()
|
||||
app.inspect()
|
||||
|
||||
app.win.on('closed', () => {
|
||||
win = null
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
"dependencies": {},
|
||||
"standard": {
|
||||
"globals": [
|
||||
"DOTGRID"
|
||||
"dotgrid"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<!-- Dotgrid -->
|
||||
<script type="text/javascript" src="scripts/dotgrid.js"></script>
|
||||
<script type="text/javascript" src="scripts/manager.js"></script>
|
||||
<script type="text/javascript" src="scripts/source.js"></script>
|
||||
<script type="text/javascript" src="scripts/renderer.js"></script>
|
||||
<script type="text/javascript" src="scripts/cursor.js"></script>
|
||||
<script type="text/javascript" src="scripts/interface.js"></script>
|
||||
|
|
@ -33,94 +34,97 @@
|
|||
const {dialog,app} = require('electron').remote;
|
||||
const fs = require('fs');
|
||||
|
||||
DOTGRID.controller = new Controller();
|
||||
const dotgrid = new Dotgrid()
|
||||
|
||||
dotgrid.controller = new Controller();
|
||||
|
||||
DOTGRID.controller.add("default","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,");
|
||||
DOTGRID.controller.add("default","*","Fullscreen",() => { app.toggleFullscreen(); },"CmdOrCtrl+Enter");
|
||||
DOTGRID.controller.add("default","*","Hide",() => { app.toggleVisible(); },"CmdOrCtrl+H");
|
||||
DOTGRID.controller.add("default","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+.");
|
||||
DOTGRID.controller.add("default","*","Reset",() => { DOTGRID.reset(); DOTGRID.theme.reset(); },"CmdOrCtrl+Backspace");
|
||||
DOTGRID.controller.add("default","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q");
|
||||
dotgrid.controller.add("default","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,");
|
||||
dotgrid.controller.add("default","*","Fullscreen",() => { app.toggleFullscreen(); },"CmdOrCtrl+Enter");
|
||||
dotgrid.controller.add("default","*","Hide",() => { app.toggleVisible(); },"CmdOrCtrl+H");
|
||||
dotgrid.controller.add("default","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+.");
|
||||
dotgrid.controller.add("default","*","Reset",() => { dotgrid.reset(); dotgrid.theme.reset(); },"CmdOrCtrl+Backspace");
|
||||
dotgrid.controller.add("default","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q");
|
||||
|
||||
DOTGRID.controller.add("default","File","New",() => { DOTGRID.new(); },"CmdOrCtrl+N");
|
||||
DOTGRID.controller.add("default","File","Open",() => { DOTGRID.open(); },"CmdOrCtrl+O");
|
||||
DOTGRID.controller.add("default","File","Save(.grid)",() => { DOTGRID.save(); },"CmdOrCtrl+S");
|
||||
DOTGRID.controller.add("default","File","Render(.png)",() => { DOTGRID.render(); },"CmdOrCtrl+R");
|
||||
DOTGRID.controller.add("default","File","Export(.svg)",() => { DOTGRID.export(); },"CmdOrCtrl+E");
|
||||
dotgrid.controller.add("default","File","New",() => { dotgrid.source.new(); },"CmdOrCtrl+N");
|
||||
dotgrid.controller.add("default","File","Open",() => { dotgrid.source.open(); },"CmdOrCtrl+O");
|
||||
dotgrid.controller.add("default","File","Save(.grid)",() => { dotgrid.source.save(); },"CmdOrCtrl+S");
|
||||
dotgrid.controller.add("default","File","Render(.png)",() => { dotgrid.source.render(); },"CmdOrCtrl+R");
|
||||
dotgrid.controller.add("default","File","Export(.svg)",() => { dotgrid.source.export(); },"CmdOrCtrl+E");
|
||||
|
||||
DOTGRID.controller.add_role("default","Edit","copy");
|
||||
DOTGRID.controller.add_role("default","Edit","cut");
|
||||
DOTGRID.controller.add_role("default","Edit","paste");
|
||||
DOTGRID.controller.add("default","Edit","Undo",() => { DOTGRID.tool.undo() },"CmdOrCtrl+Z");
|
||||
DOTGRID.controller.add("default","Edit","Redo",() => { DOTGRID.tool.redo() },"CmdOrCtrl+Shift+Z");
|
||||
dotgrid.controller.addRole("default","Edit","copy");
|
||||
dotgrid.controller.addRole("default","Edit","cut");
|
||||
dotgrid.controller.addRole("default","Edit","paste");
|
||||
dotgrid.controller.add("default","Edit","Undo",() => { dotgrid.tool.undo() },"CmdOrCtrl+Z");
|
||||
dotgrid.controller.add("default","Edit","Redo",() => { dotgrid.tool.redo() },"CmdOrCtrl+Shift+Z");
|
||||
|
||||
DOTGRID.controller.add("default","Stroke","Line",() => { DOTGRID.tool.cast("line"); },"A");
|
||||
DOTGRID.controller.add("default","Stroke","Arc",() => { DOTGRID.tool.cast("arc_c"); },"S"); // 0,1
|
||||
DOTGRID.controller.add("default","Stroke","Arc Rev",() => { DOTGRID.tool.cast("arc_r")},"D"); // 0,0
|
||||
DOTGRID.controller.add("default","Stroke","Bezier",() => { DOTGRID.tool.cast("bezier") },"F");
|
||||
DOTGRID.controller.add("default","Stroke","Close",() => { DOTGRID.tool.cast("close") },"Z");
|
||||
DOTGRID.controller.add("default","Stroke","Arc(full)",() => { DOTGRID.tool.cast("arc_c_full"); },"T"); // 1,1
|
||||
DOTGRID.controller.add("default","Stroke","Arc Rev(full)",() => { DOTGRID.tool.cast("arc_r_full")},"Y"); // 1,0
|
||||
DOTGRID.controller.add("default","Stroke","Clear Selection",() => { DOTGRID.tool.clear(); },"Escape");
|
||||
dotgrid.controller.add("default","Stroke","Line",() => { dotgrid.tool.cast("line"); },"A");
|
||||
dotgrid.controller.add("default","Stroke","Arc",() => { dotgrid.tool.cast("arc_c"); },"S"); // 0,1
|
||||
dotgrid.controller.add("default","Stroke","Arc Rev",() => { dotgrid.tool.cast("arc_r")},"D"); // 0,0
|
||||
dotgrid.controller.add("default","Stroke","Bezier",() => { dotgrid.tool.cast("bezier") },"F");
|
||||
dotgrid.controller.add("default","Stroke","Close",() => { dotgrid.tool.cast("close") },"Z");
|
||||
dotgrid.controller.add("default","Stroke","Arc(full)",() => { dotgrid.tool.cast("arc_c_full"); },"T"); // 1,1
|
||||
dotgrid.controller.add("default","Stroke","Arc Rev(full)",() => { dotgrid.tool.cast("arc_r_full")},"Y"); // 1,0
|
||||
dotgrid.controller.add("default","Stroke","Clear Selection",() => { dotgrid.tool.clear(); },"Escape");
|
||||
|
||||
DOTGRID.controller.add("default","Effect","Linecap",() => { DOTGRID.tool.toggle("linecap"); },"Q");
|
||||
DOTGRID.controller.add("default","Effect","Linejoin",() => { DOTGRID.tool.toggle("linejoin"); },"W");
|
||||
DOTGRID.controller.add("default","Effect","Mirror",() => { DOTGRID.tool.toggle("mirror"); },"E");
|
||||
DOTGRID.controller.add("default","Effect","Fill",() => { DOTGRID.tool.toggle("fill"); },"R");
|
||||
DOTGRID.controller.add("default","Effect","Thicker",() => { DOTGRID.tool.toggle("thickness",1) },"}");
|
||||
DOTGRID.controller.add("default","Effect","Thinner",() => { DOTGRID.tool.toggle("thickness",-1) },"{");
|
||||
DOTGRID.controller.add("default","Effect","Thicker +5",() => { DOTGRID.tool.toggle("thickness",5) },"]");
|
||||
DOTGRID.controller.add("default","Effect","Thinner -5",() => { DOTGRID.tool.toggle("thickness",-5) },"[");
|
||||
DOTGRID.controller.add("default","Effect","Toggle Crest",() => { DOTGRID.tool.toggleCrest(); }, "CmdOrCtrl+K");
|
||||
dotgrid.controller.add("default","Effect","Linecap",() => { dotgrid.tool.toggle("linecap"); },"Q");
|
||||
dotgrid.controller.add("default","Effect","Linejoin",() => { dotgrid.tool.toggle("linejoin"); },"W");
|
||||
dotgrid.controller.add("default","Effect","Mirror",() => { dotgrid.tool.toggle("mirror"); },"E");
|
||||
dotgrid.controller.add("default","Effect","Fill",() => { dotgrid.tool.toggle("fill"); },"R");
|
||||
dotgrid.controller.add("default","Effect","Thicker",() => { dotgrid.tool.toggle("thickness",1) },"}");
|
||||
dotgrid.controller.add("default","Effect","Thinner",() => { dotgrid.tool.toggle("thickness",-1) },"{");
|
||||
dotgrid.controller.add("default","Effect","Thicker +5",() => { dotgrid.tool.toggle("thickness",5) },"]");
|
||||
dotgrid.controller.add("default","Effect","Thinner -5",() => { dotgrid.tool.toggle("thickness",-5) },"[");
|
||||
dotgrid.controller.add("default","Effect","Toggle Crest",() => { dotgrid.tool.toggleCrest(); }, "CmdOrCtrl+K");
|
||||
|
||||
DOTGRID.controller.add("default","Manual","Add Point",() => { DOTGRID.tool.addVertex(DOTGRID.cursor.pos); DOTGRID.renderer.update() },"Enter");
|
||||
DOTGRID.controller.add("default","Manual","Move Up",() => { DOTGRID.cursor.pos.y -= 15; DOTGRID.renderer.update() },"Up");
|
||||
DOTGRID.controller.add("default","Manual","Move Right",() => { DOTGRID.cursor.pos.x += 15; DOTGRID.renderer.update() },"Right");
|
||||
DOTGRID.controller.add("default","Manual","Move Down",() => { DOTGRID.cursor.pos.y += 15; DOTGRID.renderer.update() },"Down");
|
||||
DOTGRID.controller.add("default","Manual","Move Left",() => { DOTGRID.cursor.pos.x -= 15; DOTGRID.renderer.update() },"Left");
|
||||
DOTGRID.controller.add("default","Manual","Remove Point",() => { DOTGRID.tool.removeSegmentsAt(DOTGRID.cursor.pos); },"Shift+Backspace");
|
||||
DOTGRID.controller.add("default","Manual","Remove Segment",() => { DOTGRID.tool.removeSegment(); },"Backspace");
|
||||
dotgrid.controller.add("default","Manual","Add Point",() => { dotgrid.tool.addVertex(dotgrid.cursor.pos); dotgrid.renderer.update() },"Enter");
|
||||
dotgrid.controller.add("default","Manual","Move Up",() => { dotgrid.cursor.pos.y -= 15; dotgrid.renderer.update() },"Up");
|
||||
dotgrid.controller.add("default","Manual","Move Right",() => { dotgrid.cursor.pos.x += 15; dotgrid.renderer.update() },"Right");
|
||||
dotgrid.controller.add("default","Manual","Move Down",() => { dotgrid.cursor.pos.y += 15; dotgrid.renderer.update() },"Down");
|
||||
dotgrid.controller.add("default","Manual","Move Left",() => { dotgrid.cursor.pos.x -= 15; dotgrid.renderer.update() },"Left");
|
||||
dotgrid.controller.add("default","Manual","Remove Point",() => { dotgrid.tool.removeSegmentsAt(dotgrid.cursor.pos); },"Shift+Backspace");
|
||||
dotgrid.controller.add("default","Manual","Remove Segment",() => { dotgrid.tool.removeSegment(); },"Backspace");
|
||||
|
||||
DOTGRID.controller.add("default","Layers","Foreground",() => { DOTGRID.tool.selectLayer(0) },"CmdOrCtrl+1");
|
||||
DOTGRID.controller.add("default","Layers","Middleground",() => { DOTGRID.tool.selectLayer(1) },"CmdOrCtrl+2");
|
||||
DOTGRID.controller.add("default","Layers","Background",() => { DOTGRID.tool.selectLayer(2) },"CmdOrCtrl+3");
|
||||
DOTGRID.controller.add("default","Layers","Next Layer",() => { DOTGRID.tool.selectNextLayer() });
|
||||
DOTGRID.controller.add("default","Layers","Prev Layer",() => { DOTGRID.tool.selectPrevLayer() });
|
||||
DOTGRID.controller.add("default","Layers","Merge Layers",() => { DOTGRID.tool.merge() },"M");
|
||||
dotgrid.controller.add("default","Layers","Foreground",() => { dotgrid.tool.selectLayer(0) },"CmdOrCtrl+1");
|
||||
dotgrid.controller.add("default","Layers","Middleground",() => { dotgrid.tool.selectLayer(1) },"CmdOrCtrl+2");
|
||||
dotgrid.controller.add("default","Layers","Background",() => { dotgrid.tool.selectLayer(2) },"CmdOrCtrl+3");
|
||||
dotgrid.controller.add("default","Layers","Next Layer",() => { dotgrid.tool.selectNextLayer() });
|
||||
dotgrid.controller.add("default","Layers","Prev Layer",() => { dotgrid.tool.selectPrevLayer() });
|
||||
dotgrid.controller.add("default","Layers","Merge Layers",() => { dotgrid.tool.merge() },"M");
|
||||
|
||||
DOTGRID.controller.add("default","View","Zoom In",() => { DOTGRID.modZoom(0.25) },"CmdOrCtrl+=")
|
||||
DOTGRID.controller.add("default","View","Zoom Out",() => { DOTGRID.modZoom(-0.25) },"CmdOrCtrl+-")
|
||||
DOTGRID.controller.add("default","View","Zoom Reset",() => { DOTGRID.modZoom(1,true) },"CmdOrCtrl+0")
|
||||
DOTGRID.controller.add("default","View","Color Picker",() => { DOTGRID.picker.start(); },"G");
|
||||
DOTGRID.controller.add("default","View","Toggle Grid",() => { DOTGRID.renderer.toggle(); },"H");
|
||||
DOTGRID.controller.add("default","View","Toggle Interface",() => { DOTGRID.interface.toggle(); },"Tab");
|
||||
dotgrid.controller.add("default","View","Zoom In",() => { dotgrid.modZoom(0.25) },"CmdOrCtrl+=")
|
||||
dotgrid.controller.add("default","View","Zoom Out",() => { dotgrid.modZoom(-0.25) },"CmdOrCtrl+-")
|
||||
dotgrid.controller.add("default","View","Zoom Reset",() => { dotgrid.modZoom(1,true) },"CmdOrCtrl+0")
|
||||
dotgrid.controller.add("default","View","Color Picker",() => { dotgrid.picker.start(); },"G");
|
||||
dotgrid.controller.add("default","View","Toggle Grid",() => { dotgrid.renderer.toggle(); },"H");
|
||||
dotgrid.controller.add("default","View","Toggle Interface",() => { dotgrid.interface.toggle(); },"Tab");
|
||||
|
||||
DOTGRID.controller.add("default","Theme","Open Theme",() => { DOTGRID.theme.open(); },"CmdOrCtrl+Shift+o")
|
||||
DOTGRID.controller.add("default","Theme","Reset Theme",() => { DOTGRID.theme.reset(); },"CmdOrCtrl+Shift+Backspace")
|
||||
DOTGRID.controller.add("default","Theme","Download Themes..",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes'); })
|
||||
dotgrid.controller.add("default","Theme","Open Theme",() => { dotgrid.theme.open(); },"CmdOrCtrl+Shift+o")
|
||||
dotgrid.controller.add("default","Theme","Reset Theme",() => { dotgrid.theme.reset(); },"CmdOrCtrl+Shift+Backspace")
|
||||
dotgrid.controller.add("default","Theme","Download Themes..",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes'); })
|
||||
|
||||
DOTGRID.controller.add("picker","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,");
|
||||
DOTGRID.controller.add("picker","*","Fullscreen",() => { app.toggleFullscreen(); },"CmdOrCtrl+Enter");
|
||||
DOTGRID.controller.add("picker","*","Hide",() => { app.toggleVisible(); },"CmdOrCtrl+H");
|
||||
DOTGRID.controller.add("picker","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+.");
|
||||
DOTGRID.controller.add("picker","*","Documentation",() => { DOTGRID.controller.docs(); },"CmdOrCtrl+Esc");
|
||||
DOTGRID.controller.add("picker","*","Reset",() => { DOTGRID.reset(); DOTGRID.theme.reset(); },"CmdOrCtrl+Backspace");
|
||||
DOTGRID.controller.add("picker","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q");
|
||||
dotgrid.controller.add("picker","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,");
|
||||
dotgrid.controller.add("picker","*","Fullscreen",() => { app.toggleFullscreen(); },"CmdOrCtrl+Enter");
|
||||
dotgrid.controller.add("picker","*","Hide",() => { app.toggleVisible(); },"CmdOrCtrl+H");
|
||||
dotgrid.controller.add("picker","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+.");
|
||||
dotgrid.controller.add("picker","*","Documentation",() => { dotgrid.controller.docs(); },"CmdOrCtrl+Esc");
|
||||
dotgrid.controller.add("picker","*","Reset",() => { dotgrid.reset(); dotgrid.theme.reset(); },"CmdOrCtrl+Backspace");
|
||||
dotgrid.controller.add("picker","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q");
|
||||
|
||||
DOTGRID.controller.add_role("picker","Edit","undo");
|
||||
DOTGRID.controller.add_role("picker","Edit","redo");
|
||||
DOTGRID.controller.add_role("picker","Edit","cut");
|
||||
DOTGRID.controller.add_role("picker","Edit","copy");
|
||||
DOTGRID.controller.add_role("picker","Edit","paste");
|
||||
DOTGRID.controller.add_role("picker","Edit","delete");
|
||||
DOTGRID.controller.add_role("picker","Edit","selectall");
|
||||
dotgrid.controller.addRole("picker","Edit","undo");
|
||||
dotgrid.controller.addRole("picker","Edit","redo");
|
||||
dotgrid.controller.addRole("picker","Edit","cut");
|
||||
dotgrid.controller.addRole("picker","Edit","copy");
|
||||
dotgrid.controller.addRole("picker","Edit","paste");
|
||||
dotgrid.controller.addRole("picker","Edit","delete");
|
||||
dotgrid.controller.addRole("picker","Edit","selectall");
|
||||
|
||||
DOTGRID.controller.add("picker","Mode","Stop Picker Mode",() => { DOTGRID.picker.stop(); },"Escape");
|
||||
dotgrid.controller.add("picker","Mode","Stop Picker Mode",() => { dotgrid.picker.stop(); },"Escape");
|
||||
|
||||
DOTGRID.controller.commit();
|
||||
dotgrid.controller.commit();
|
||||
|
||||
DOTGRID.install(document.body);
|
||||
DOTGRID.start();
|
||||
dotgrid.install(document.body);
|
||||
|
||||
window.addEventListener('load', () => { dotgrid.start(); })
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@ body { padding: 0px; font-family: 'input_mono_regular'; -webkit-user-select: non
|
|||
|
||||
/* Core */
|
||||
|
||||
#guide { position: absolute;width: 300px;height: 300px; transition: opacity 150ms; -webkit-app-region: no-drag; border-radius: 3px}
|
||||
#guide { position: absolute;width: 300px;height: 300px; transition: opacity 150ms; -webkit-app-region: no-drag; border-radius: 3px;}
|
||||
#render { display: none }
|
||||
#vector { z-index: 1000;position: relative;width:300px; height:300px; }
|
||||
|
||||
/* Interface */
|
||||
|
||||
#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 100%; position:fixed; bottom:30px; left:40px; height:30px; max-width:calc(100vw - 85px); overflow: hidden;}
|
||||
#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 100%; position:fixed; bottom:30px; left:40px; height:30px; max-width:calc(100vw - 75px); overflow: hidden;}
|
||||
#interface.hidden { bottom:10px !important;opacity: 0 !important }
|
||||
#interface.visible { bottom:30px !important; opacity: 1 !important}
|
||||
#interface #menu { opacity: 1; position: absolute; top:0px; transition: all 250ms; z-index: 900; overflow: hidden; height:30px; width:100%;}
|
||||
|
|
|
|||
|
|
@ -20,12 +20,12 @@ function Cursor () {
|
|||
this.pos = this.atEvent(e)
|
||||
|
||||
// Translation
|
||||
if (DOTGRID.tool.vertexAt(this.pos)) {
|
||||
if (dotgrid.tool.vertexAt(this.pos)) {
|
||||
this.translate(this.pos, this.pos, e.shiftKey, e.ctrlKey || e.metaKey, e.altKey)
|
||||
}
|
||||
|
||||
DOTGRID.renderer.update()
|
||||
DOTGRID.interface.update()
|
||||
dotgrid.renderer.update()
|
||||
dotgrid.interface.update()
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
|
|
@ -40,10 +40,10 @@ function Cursor () {
|
|||
}
|
||||
|
||||
if (this.last_pos.x !== this.pos.x || this.last_pos.y !== this.pos.y) {
|
||||
DOTGRID.renderer.update()
|
||||
dotgrid.renderer.update()
|
||||
}
|
||||
|
||||
DOTGRID.interface.update()
|
||||
dotgrid.interface.update()
|
||||
e.preventDefault()
|
||||
|
||||
this.last_pos = this.pos
|
||||
|
|
@ -53,26 +53,26 @@ function Cursor () {
|
|||
this.pos = this.atEvent(e)
|
||||
|
||||
if (this.translation && !isEqual(this.translation.from, this.translation.to)) {
|
||||
if (this.translation.layer === true) { DOTGRID.tool.translateLayer(this.translation.from, this.translation.to) } else if (this.translation.copy) { DOTGRID.tool.translateCopy(this.translation.from, this.translation.to) } else if (this.translation.multi) { DOTGRID.tool.translateMulti(this.translation.from, this.translation.to) } else { DOTGRID.tool.translate(this.translation.from, this.translation.to) }
|
||||
if (this.translation.layer === true) { dotgrid.tool.translateLayer(this.translation.from, this.translation.to) } else if (this.translation.copy) { dotgrid.tool.translateCopy(this.translation.from, this.translation.to) } else if (this.translation.multi) { dotgrid.tool.translateMulti(this.translation.from, this.translation.to) } else { dotgrid.tool.translate(this.translation.from, this.translation.to) }
|
||||
} else if (e.target.id === 'guide') {
|
||||
DOTGRID.tool.addVertex({ x: this.pos.x, y: this.pos.y })
|
||||
DOTGRID.picker.stop()
|
||||
dotgrid.tool.addVertex({ x: this.pos.x, y: this.pos.y })
|
||||
dotgrid.picker.stop()
|
||||
}
|
||||
|
||||
this.translate()
|
||||
|
||||
DOTGRID.interface.update()
|
||||
DOTGRID.renderer.update()
|
||||
dotgrid.interface.update()
|
||||
dotgrid.renderer.update()
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
this.alt = function (e) {
|
||||
this.pos = this.atEvent(e)
|
||||
|
||||
DOTGRID.tool.removeSegmentsAt(this.pos)
|
||||
dotgrid.tool.removeSegmentsAt(this.pos)
|
||||
e.preventDefault()
|
||||
|
||||
setTimeout(() => { DOTGRID.tool.clear() }, 150)
|
||||
setTimeout(() => { dotgrid.tool.clear() }, 150)
|
||||
}
|
||||
|
||||
// Position Mods
|
||||
|
|
@ -83,15 +83,15 @@ function Cursor () {
|
|||
|
||||
this.relativePos = function (pos) {
|
||||
return {
|
||||
x: pos.x - DOTGRID.renderer.el.offsetLeft,
|
||||
y: pos.y - DOTGRID.renderer.el.offsetTop
|
||||
x: pos.x - dotgrid.renderer.el.offsetLeft,
|
||||
y: pos.y - dotgrid.renderer.el.offsetTop
|
||||
}
|
||||
}
|
||||
|
||||
this.snapPos = function (pos) {
|
||||
return {
|
||||
x: clamp(step(pos.x, 15), 15, DOTGRID.tool.settings.size.width),
|
||||
y: clamp(step(pos.y, 15), 15, DOTGRID.tool.settings.size.height)
|
||||
x: clamp(step(pos.x, 15), 15, dotgrid.tool.settings.size.width - 15),
|
||||
y: clamp(step(pos.y, 15), 15, dotgrid.tool.settings.size.height - 15)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,8 +16,11 @@ function Dotgrid () {
|
|||
// ISU
|
||||
|
||||
this.install = function (host) {
|
||||
console.info('Dotgrid', 'Installing..')
|
||||
this.theme = new Theme(defaultTheme)
|
||||
this.history = new History()
|
||||
|
||||
this.source = new Source(this)
|
||||
this.manager = new Manager(this)
|
||||
this.renderer = new Renderer(this)
|
||||
this.tool = new Tool(this)
|
||||
|
|
@ -30,34 +33,38 @@ function Dotgrid () {
|
|||
|
||||
this.manager.install()
|
||||
this.interface.install(host)
|
||||
this.theme.install(host, this.update)
|
||||
this.theme.install(host, () => { this.update() })
|
||||
}
|
||||
|
||||
this.start = function () {
|
||||
console.info('Dotgrid', 'Starting..')
|
||||
this.theme.start()
|
||||
this.tool.start()
|
||||
this.renderer.start()
|
||||
this.interface.start()
|
||||
|
||||
document.addEventListener('mousedown', function (e) { DOTGRID.cursor.down(e) }, false)
|
||||
document.addEventListener('mousemove', function (e) { DOTGRID.cursor.move(e) }, false)
|
||||
document.addEventListener('contextmenu', function (e) { DOTGRID.cursor.alt(e) }, false)
|
||||
document.addEventListener('mouseup', function (e) { DOTGRID.cursor.up(e) }, false)
|
||||
document.addEventListener('copy', function (e) { DOTGRID.copy(e) }, false)
|
||||
document.addEventListener('cut', function (e) { DOTGRID.cut(e) }, false)
|
||||
document.addEventListener('paste', function (e) { DOTGRID.paste(e) }, false)
|
||||
window.addEventListener('drop', DOTGRID.drag)
|
||||
// Add events
|
||||
document.addEventListener('mousedown', function (e) { dotgrid.cursor.down(e) }, false)
|
||||
document.addEventListener('mousemove', function (e) { dotgrid.cursor.move(e) }, false)
|
||||
document.addEventListener('contextmenu', function (e) { dotgrid.cursor.alt(e) }, false)
|
||||
document.addEventListener('mouseup', function (e) { dotgrid.cursor.up(e) }, false)
|
||||
document.addEventListener('copy', function (e) { dotgrid.copy(e) }, false)
|
||||
document.addEventListener('cut', function (e) { dotgrid.cut(e) }, false)
|
||||
document.addEventListener('paste', function (e) { dotgrid.paste(e) }, false)
|
||||
window.addEventListener('resize', function (e) { dotgrid.onResize() }, false)
|
||||
window.addEventListener('dragover', function (e) { e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'copy' })
|
||||
window.addEventListener('drop', dotgrid.drag)
|
||||
|
||||
this.new()
|
||||
this.source.new()
|
||||
this.onResize()
|
||||
|
||||
setTimeout(() => { document.body.className += ' ready' }, 250)
|
||||
}
|
||||
|
||||
this.update = function () {
|
||||
DOTGRID.resize()
|
||||
DOTGRID.manager.update()
|
||||
DOTGRID.interface.update()
|
||||
DOTGRID.renderer.update()
|
||||
this.manager.update()
|
||||
this.interface.update()
|
||||
this.renderer.update()
|
||||
}
|
||||
|
||||
this.clear = function () {
|
||||
|
|
@ -73,93 +80,7 @@ function Dotgrid () {
|
|||
this.update()
|
||||
}
|
||||
|
||||
// File
|
||||
|
||||
this.new = function () {
|
||||
this.setZoom(1.0)
|
||||
this.history.push(this.tool.layers)
|
||||
this.clear()
|
||||
}
|
||||
|
||||
this.open = function () {
|
||||
if (!dialog) { return }
|
||||
|
||||
const paths = dialog.showOpenDialog({ properties: ['openFile'], filters: [{ name: 'Dotgrid Image', extensions: ['dot', 'grid'] }] })
|
||||
|
||||
if (!paths) { console.warn('Nothing to load'); return }
|
||||
|
||||
fs.readFile(paths[0], 'utf-8', (err, data) => {
|
||||
if (err) { alert('An error ocurred reading the file :' + err.message); return }
|
||||
this.tool.replace(JSON.parse(data.toString().trim()))
|
||||
this.renderer.update()
|
||||
})
|
||||
}
|
||||
|
||||
this.save = function () {
|
||||
if (DOTGRID.tool.length() < 1) { console.warn('Nothing to save'); return }
|
||||
this.manager.toGRID(grab)
|
||||
}
|
||||
|
||||
this.export = function () {
|
||||
if (DOTGRID.tool.length() < 1) { console.warn('Nothing to export'); return }
|
||||
this.manager.toSVG(grab)
|
||||
}
|
||||
|
||||
this.render = function () {
|
||||
if (DOTGRID.tool.length() < 1) { console.warn('Nothing to render'); return }
|
||||
this.manager.toPNG({ width: DOTGRID.tool.settings.size.width * 2, height: DOTGRID.tool.settings.size.height * 2 }, grab)
|
||||
}
|
||||
|
||||
function grab (base64, name) {
|
||||
const link = document.createElement('a')
|
||||
link.setAttribute('href', base64)
|
||||
link.setAttribute('download', name)
|
||||
link.dispatchEvent(new MouseEvent(`click`, { bubbles: true, cancelable: true, view: window }))
|
||||
}
|
||||
|
||||
// Basics
|
||||
|
||||
this.getSize = function () {
|
||||
return { markers: {
|
||||
w: parseInt(this.tool.settings.size.width / 15),
|
||||
h: parseInt(this.tool.settings.size.height / 15) }
|
||||
}
|
||||
}
|
||||
|
||||
this.setSize = function (size = { width: 600, height: 300 }, ui = true, scale = window.devicePixelRatio) {
|
||||
size = { width: clamp(step(size.width, 15), 105, 1080), height: clamp(step(size.height, 15), 120, 1080) }
|
||||
|
||||
this.tool.settings.size.width = size.width
|
||||
this.tool.settings.size.height = size.height
|
||||
|
||||
try {
|
||||
const win = require('electron').remote.getCurrentWindow()
|
||||
win.setSize((size.width + 100) * scale, (size.height + 100) * scale, false)
|
||||
} catch (err) {
|
||||
console.log('No window')
|
||||
}
|
||||
|
||||
this.renderer.resize(size)
|
||||
this.interface.update()
|
||||
this.renderer.update()
|
||||
}
|
||||
|
||||
this.resize = function () {
|
||||
const size = { width: step(window.innerWidth - 90, 15), height: step(window.innerHeight - 120, 15) }
|
||||
|
||||
if (size.width === this.tool.settings.size.width && size.height === this.tool.settings.size.height) {
|
||||
return
|
||||
}
|
||||
|
||||
console.log(`Resized to: ${size.width}x${size.height}`)
|
||||
|
||||
this.tool.settings.size.width = size.width
|
||||
this.tool.settings.size.height = size.height
|
||||
|
||||
this.renderer.resize(size)
|
||||
|
||||
document.title = `Dotgrid — ${size.width}x${size.height}`
|
||||
}
|
||||
// Methods
|
||||
|
||||
this.modZoom = function (mod = 0, set = false) {
|
||||
try {
|
||||
|
|
@ -180,6 +101,69 @@ function Dotgrid () {
|
|||
}
|
||||
}
|
||||
|
||||
// Resize Tools
|
||||
|
||||
this.fitSize = function () {
|
||||
if (this.requireResize() === false) { return }
|
||||
console.log('Dotgrid', `Will resize to: ${printSize(this.getRequiredSize())}`)
|
||||
this.setWindowSize(this.getRequiredSize())
|
||||
this.update()
|
||||
}
|
||||
|
||||
this.setWindowSize = function (size) {
|
||||
console.log('Dotgrid', `Resizing to ${printSize(size)}`)
|
||||
const win = require('electron').remote.getCurrentWindow()
|
||||
win.setSize(size.width, size.height, false)
|
||||
document.title = `Dotgrid — ${size.width}x${size.height}`
|
||||
this.update()
|
||||
}
|
||||
|
||||
this.getPadding = function () {
|
||||
return { x: 60, y: 90 }
|
||||
}
|
||||
|
||||
this.getWindowSize = function () {
|
||||
return { width: window.innerWidth, height: window.innerHeight }
|
||||
}
|
||||
|
||||
this.getProjectSize = function () {
|
||||
return this.tool.settings.size
|
||||
}
|
||||
|
||||
this.getPaddedSize = function () {
|
||||
const rect = this.getWindowSize()
|
||||
const pad = this.getPadding()
|
||||
return { width: step(rect.width - pad.x, 15), height: step(rect.height - pad.y, 15) }
|
||||
}
|
||||
|
||||
this.getRequiredSize = function () {
|
||||
const rect = this.getProjectSize()
|
||||
const pad = this.getPadding()
|
||||
return { width: step(rect.width, 15) + pad.x, height: step(rect.height, 15) + pad.y }
|
||||
}
|
||||
|
||||
this.requireResize = function () {
|
||||
const _window = this.getWindowSize()
|
||||
const _required = this.getRequiredSize()
|
||||
const offset = sizeOffset(_window, _required)
|
||||
if (offset.width !== 0 || offset.height !== 0) {
|
||||
console.log(`Dotgrid`, `Require ${printSize(_required)}, but window is ${printSize(_window)}(${printSize(offset)})`)
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
this.onResize = function () {
|
||||
const _project = this.getProjectSize()
|
||||
const _padded = this.getPaddedSize()
|
||||
const offset = sizeOffset(_padded, _project)
|
||||
if (offset.width !== 0 || offset.height !== 0) {
|
||||
console.log(`Dotgrid`, `Resize project to ${printSize(_padded)}`)
|
||||
this.tool.settings.size = _padded
|
||||
}
|
||||
this.update()
|
||||
}
|
||||
|
||||
// Events
|
||||
|
||||
this.drag = function (e) {
|
||||
|
|
@ -195,40 +179,39 @@ function Dotgrid () {
|
|||
|
||||
reader.onload = function (e) {
|
||||
const data = e.target && e.target.result ? e.target.result : ''
|
||||
if (data && !isJson(data)) { return }
|
||||
DOTGRID.tool.replace(JSON.parse(`${data}`))
|
||||
DOTGRID.renderer.update()
|
||||
dotgrid.source.load(filename, data)
|
||||
dotgrid.fitSize()
|
||||
}
|
||||
reader.readAsText(file)
|
||||
}
|
||||
|
||||
this.copy = function (e) {
|
||||
DOTGRID.renderer.update()
|
||||
dotgrid.renderer.update()
|
||||
|
||||
if (e.target !== this.picker.input) {
|
||||
e.clipboardData.setData('text/source', DOTGRID.tool.export(DOTGRID.tool.layer()))
|
||||
e.clipboardData.setData('text/plain', DOTGRID.tool.path())
|
||||
e.clipboardData.setData('text/html', DOTGRID.manager.el.outerHTML)
|
||||
e.clipboardData.setData('text/svg+xml', DOTGRID.manager.el.outerHTML)
|
||||
e.clipboardData.setData('text/source', dotgrid.tool.export(dotgrid.tool.layer()))
|
||||
e.clipboardData.setData('text/plain', dotgrid.tool.path())
|
||||
e.clipboardData.setData('text/html', dotgrid.manager.el.outerHTML)
|
||||
e.clipboardData.setData('text/svg+xml', dotgrid.manager.el.outerHTML)
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
DOTGRID.renderer.update()
|
||||
dotgrid.renderer.update()
|
||||
}
|
||||
|
||||
this.cut = function (e) {
|
||||
DOTGRID.renderer.update()
|
||||
dotgrid.renderer.update()
|
||||
|
||||
if (e.target !== this.picker.input) {
|
||||
e.clipboardData.setData('text/source', DOTGRID.tool.export(DOTGRID.tool.layer()))
|
||||
e.clipboardData.setData('text/plain', DOTGRID.tool.export(DOTGRID.tool.layer()))
|
||||
e.clipboardData.setData('text/html', DOTGRID.manager.el.outerHTML)
|
||||
e.clipboardData.setData('text/svg+xml', DOTGRID.manager.el.outerHTML)
|
||||
DOTGRID.tool.layers[DOTGRID.tool.index] = []
|
||||
e.clipboardData.setData('text/source', dotgrid.tool.export(dotgrid.tool.layer()))
|
||||
e.clipboardData.setData('text/plain', dotgrid.tool.export(dotgrid.tool.layer()))
|
||||
e.clipboardData.setData('text/html', dotgrid.manager.el.outerHTML)
|
||||
e.clipboardData.setData('text/svg+xml', dotgrid.manager.el.outerHTML)
|
||||
dotgrid.tool.layers[dotgrid.tool.index] = []
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
DOTGRID.renderer.update()
|
||||
dotgrid.renderer.update()
|
||||
}
|
||||
|
||||
this.paste = function (e) {
|
||||
|
|
@ -236,32 +219,22 @@ function Dotgrid () {
|
|||
let data = e.clipboardData.getData('text/source')
|
||||
if (isJson(data)) {
|
||||
data = JSON.parse(data.trim())
|
||||
DOTGRID.tool.import(data)
|
||||
dotgrid.tool.import(data)
|
||||
}
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
DOTGRID.renderer.update()
|
||||
dotgrid.renderer.update()
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function (e) {
|
||||
DOTGRID.update()
|
||||
}, false)
|
||||
|
||||
window.addEventListener('dragover', function (e) {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
e.dataTransfer.dropEffect = 'copy'
|
||||
})
|
||||
|
||||
String.prototype.capitalize = function () {
|
||||
return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase()
|
||||
}
|
||||
|
||||
function sizeOffset (a, b) { return { width: a.width - b.width, height: a.height - b.height } }
|
||||
function printSize (size) { return `${size.width}x${size.height}` }
|
||||
function isJson (text) { try { JSON.parse(text); return true } catch (error) { return false } }
|
||||
function isEqual (a, b) { return a && b && a.x === b.x && a.y === b.y }
|
||||
function clamp (v, min, max) { return v < min ? min : v > max ? max : v }
|
||||
function step (v, s) { return Math.round(v / s) * s }
|
||||
|
||||
const DOTGRID = new Dotgrid()
|
||||
|
|
|
|||
|
|
@ -10,15 +10,15 @@ function Generator (layer, style) {
|
|||
for (const k1 in l) {
|
||||
const seg = l[k1]
|
||||
for (const k2 in seg.vertices) {
|
||||
if (mirror === 1 || mirror === 3) { seg.vertices[k2].x = (DOTGRID.tool.settings.size.width) - seg.vertices[k2].x + 15 }
|
||||
if (mirror === 2 || mirror === 3) { seg.vertices[k2].y = (DOTGRID.tool.settings.size.height) - seg.vertices[k2].y + 15 }
|
||||
if (mirror === 1 || mirror === 3) { seg.vertices[k2].x = (dotgrid.tool.settings.size.width) - seg.vertices[k2].x }
|
||||
if (mirror === 2 || mirror === 3) { seg.vertices[k2].y = (dotgrid.tool.settings.size.height) - seg.vertices[k2].y }
|
||||
|
||||
// Offset
|
||||
seg.vertices[k2].x += offset.x
|
||||
seg.vertices[k2].y += offset.y
|
||||
|
||||
// Rotate
|
||||
const center = { x: (DOTGRID.tool.settings.size.width / 2) + offset.x + (7.5), y: (DOTGRID.tool.settings.size.height / 2) + offset.y + 30 }
|
||||
const center = { x: (dotgrid.tool.settings.size.width / 2) + offset.x + (7.5), y: (dotgrid.tool.settings.size.height / 2) + offset.y + 30 }
|
||||
seg.vertices[k2] = rotatePoint(seg.vertices[k2], center, angle)
|
||||
|
||||
// Scale
|
||||
|
|
|
|||
|
|
@ -51,10 +51,10 @@ function Interface (dotgrid) {
|
|||
<svg
|
||||
id="option_${name}"
|
||||
title="${name.capitalize()}"
|
||||
onmouseout="DOTGRID.interface.out('${type}','${name}')"
|
||||
onmouseup="DOTGRID.interface.up('${type}','${name}')"
|
||||
onmousedown="DOTGRID.interface.down('${type}','${name}')"
|
||||
onmouseover="DOTGRID.interface.over('${type}','${name}')"
|
||||
onmouseout="dotgrid.interface.out('${type}','${name}')"
|
||||
onmouseup="dotgrid.interface.up('${type}','${name}')"
|
||||
onmousedown="dotgrid.interface.down('${type}','${name}')"
|
||||
onmouseover="dotgrid.interface.over('${type}','${name}')"
|
||||
viewBox="0 0 300 300"
|
||||
class="icon ${type}">
|
||||
<path id="${name}_path" class="icon_path" d="${tool.icon}"/>${name === 'depth' ? `<path class="icon_path inactive" d=""/>` : ''}
|
||||
|
|
@ -148,7 +148,7 @@ function Interface (dotgrid) {
|
|||
|
||||
document.onkeydown = function (e) {
|
||||
if (e.key === 'Tab') {
|
||||
DOTGRID.interface.toggle()
|
||||
dotgrid.interface.toggle()
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ function Controller () {
|
|||
this.menu[mode][cat][label] = { fn: fn, accelerator: accelerator }
|
||||
}
|
||||
|
||||
this.add_role = function (mode, cat, label) {
|
||||
this.addRole = function (mode, cat, label) {
|
||||
if (!this.menu[mode]) { this.menu[mode] = {} }
|
||||
if (!this.menu[mode][cat]) { this.menu[mode][cat] = {} }
|
||||
this.menu[mode][cat][label] = { role: label }
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ function Theme (_default) {
|
|||
this.load = function (data) {
|
||||
const theme = parse(data)
|
||||
if (!validate(theme)) { console.warn('Theme', 'Not a theme', theme); return }
|
||||
console.log('Theme', `Load theme, background: ${theme.background}.`)
|
||||
console.log('Theme', `Loaded theme!`)
|
||||
this.el.innerHTML = `:root { --background: ${theme.background}; --f_high: ${theme.f_high}; --f_med: ${theme.f_med}; --f_low: ${theme.f_low}; --f_inv: ${theme.f_inv}; --b_high: ${theme.b_high}; --b_med: ${theme.b_med}; --b_low: ${theme.b_low}; --b_inv: ${theme.b_inv}; }`
|
||||
localStorage.setItem('theme', JSON.stringify(theme))
|
||||
this.active = theme
|
||||
|
|
|
|||
|
|
@ -19,23 +19,23 @@ function Manager (dotgrid) {
|
|||
}
|
||||
|
||||
this.update = function () {
|
||||
this.el.setAttribute('width', (DOTGRID.tool.settings.size.width + 15) + 'px')
|
||||
this.el.setAttribute('height', (DOTGRID.tool.settings.size.height + 15) + 'px')
|
||||
this.el.style.width = (DOTGRID.tool.settings.size.width + 15)
|
||||
this.el.style.height = DOTGRID.tool.settings.size.height + 15
|
||||
this.el.setAttribute('width', (dotgrid.tool.settings.size.width) + 'px')
|
||||
this.el.setAttribute('height', (dotgrid.tool.settings.size.height) + 'px')
|
||||
this.el.style.width = (dotgrid.tool.settings.size.width)
|
||||
this.el.style.height = dotgrid.tool.settings.size.height
|
||||
|
||||
const styles = DOTGRID.tool.styles
|
||||
const paths = DOTGRID.tool.paths()
|
||||
const styles = dotgrid.tool.styles
|
||||
const paths = dotgrid.tool.paths()
|
||||
|
||||
for (const id in this.layers) {
|
||||
let style = styles[id]
|
||||
let path = paths[id]
|
||||
let layer = this.layers[id]
|
||||
// Easter Egg
|
||||
if (DOTGRID.tool.settings.crest === true) {
|
||||
if (dotgrid.tool.settings.crest === true) {
|
||||
style = styles[0]
|
||||
path = paths[0]
|
||||
layer.setAttribute('transform', `rotate(${parseInt(id) * 120} ${(DOTGRID.tool.settings.size.width / 2) + 7.5} ${(DOTGRID.tool.settings.size.height / 2) + 7.5})`)
|
||||
layer.setAttribute('transform', `rotate(${parseInt(id) * 120} ${(dotgrid.tool.settings.size.width / 2) + 7.5} ${(dotgrid.tool.settings.size.height / 2) + 7.5})`)
|
||||
}
|
||||
|
||||
layer.style.strokeWidth = style.thickness
|
||||
|
|
@ -57,7 +57,7 @@ function Manager (dotgrid) {
|
|||
|
||||
// Exporters
|
||||
|
||||
this.toPNG = function (size = DOTGRID.tool.settings.size, callback) {
|
||||
this.toPNG = function (size = dotgrid.tool.settings.size, callback) {
|
||||
this.update()
|
||||
|
||||
let image64 = this.svg64()
|
||||
|
|
@ -82,7 +82,7 @@ function Manager (dotgrid) {
|
|||
this.toGRID = function (callback) {
|
||||
this.update()
|
||||
|
||||
const text = DOTGRID.tool.export()
|
||||
const text = dotgrid.tool.export()
|
||||
const file = new Blob([text], { type: 'text/plain' })
|
||||
callback(URL.createObjectURL(file), 'export.grid')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@ function Picker (dotgrid) {
|
|||
|
||||
this.isActive = true
|
||||
|
||||
this.input.setAttribute('placeholder', `${DOTGRID.tool.style().color.replace('#', '').trim()}`)
|
||||
this.input.setAttribute('placeholder', `${dotgrid.tool.style().color.replace('#', '').trim()}`)
|
||||
this.input.setAttribute('maxlength', 6)
|
||||
|
||||
DOTGRID.interface.el.className = 'picker'
|
||||
dotgrid.interface.el.className = 'picker'
|
||||
this.input.focus()
|
||||
this.input.value = ''
|
||||
|
||||
try { DOTGRID.controller.set('picker') } catch (err) { }
|
||||
try { dotgrid.controller.set('picker') } catch (err) { }
|
||||
}
|
||||
|
||||
this.update = function () {
|
||||
|
|
@ -40,13 +40,13 @@ function Picker (dotgrid) {
|
|||
|
||||
this.isActive = false
|
||||
|
||||
DOTGRID.interface.el.className = ''
|
||||
dotgrid.interface.el.className = ''
|
||||
this.input.blur()
|
||||
this.input.value = ''
|
||||
|
||||
try { DOTGRID.controller.set() } catch (err) { console.log('No controller') }
|
||||
try { dotgrid.controller.set() } catch (err) { console.log('No controller') }
|
||||
|
||||
setTimeout(() => { DOTGRID.interface.update(true); DOTGRID.renderer.update() }, 250)
|
||||
setTimeout(() => { dotgrid.interface.update(true); dotgrid.renderer.update() }, 250)
|
||||
}
|
||||
|
||||
this.validate = function () {
|
||||
|
|
@ -54,8 +54,8 @@ function Picker (dotgrid) {
|
|||
|
||||
const hex = `#${this.input.value}`
|
||||
|
||||
DOTGRID.tool.style().color = hex
|
||||
DOTGRID.tool.style().fill = DOTGRID.tool.style().fill !== 'none' ? hex : 'none'
|
||||
dotgrid.tool.style().color = hex
|
||||
dotgrid.tool.style().fill = dotgrid.tool.style().fill !== 'none' ? hex : 'none'
|
||||
|
||||
this.stop()
|
||||
}
|
||||
|
|
@ -95,6 +95,6 @@ function Picker (dotgrid) {
|
|||
return re.test(val)
|
||||
}
|
||||
|
||||
this.input.onkeydown = function (event) { DOTGRID.picker.listen(event, true) }
|
||||
this.input.onkeyup = function (event) { DOTGRID.picker.listen(event) }
|
||||
this.input.onkeydown = function (event) { dotgrid.picker.listen(event, true) }
|
||||
this.input.onkeyup = function (event) { dotgrid.picker.listen(event) }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ function Renderer (dotgrid) {
|
|||
}
|
||||
|
||||
this.update = function (force = false) {
|
||||
this.resize()
|
||||
dotgrid.manager.update()
|
||||
let render = new Image()
|
||||
render.onload = () => {
|
||||
|
|
@ -48,14 +49,18 @@ function Renderer (dotgrid) {
|
|||
dotgrid.interface.update(true)
|
||||
}
|
||||
|
||||
this.resize = function (size) {
|
||||
const pad = 15
|
||||
this.el.width = (size.width + pad) * this.scale
|
||||
this.el.height = (size.height + pad) * this.scale
|
||||
this.el.style.width = (size.width + pad) + 'px'
|
||||
this.el.style.height = (size.height + pad) + 'px'
|
||||
|
||||
this.update()
|
||||
this.resize = function () {
|
||||
const _target = dotgrid.getPaddedSize()
|
||||
const _current = { width: this.el.width / this.scale, height: this.el.height / this.scale }
|
||||
const offset = sizeOffset(_target, _current)
|
||||
if (offset.width === 0 && offset.height === 0) {
|
||||
return
|
||||
}
|
||||
console.log('Renderer', `Require resize: ${printSize(_target)}, from ${printSize(_current)}`)
|
||||
this.el.width = (_target.width) * this.scale
|
||||
this.el.height = (_target.height) * this.scale
|
||||
this.el.style.width = (_target.width) + 'px'
|
||||
this.el.style.height = (_target.height) + 'px'
|
||||
}
|
||||
|
||||
// Collections
|
||||
|
|
@ -97,19 +102,17 @@ function Renderer (dotgrid) {
|
|||
if (!this.showExtras) { return }
|
||||
|
||||
const cursor = { x: parseInt(dotgrid.cursor.pos.x / 15), y: parseInt(dotgrid.cursor.pos.y / 15) }
|
||||
const markers = dotgrid.getSize().markers
|
||||
const markers = { w: parseInt(dotgrid.tool.settings.size.width / 15), h: parseInt(dotgrid.tool.settings.size.height / 15) }
|
||||
|
||||
for (let x = markers.w - 1; x >= 0; x--) {
|
||||
for (let y = markers.h - 1; y >= 0; y--) {
|
||||
let is_step = x % 4 === 0 && y % 4 === 0
|
||||
// Color
|
||||
let color = is_step ? dotgrid.theme.active.b_med : dotgrid.theme.active.b_low
|
||||
if ((y === 0 || y === markers.h) && cursor.x === x + 1) { color = dotgrid.theme.active.b_high } else if ((x === 0 || x === markers.w - 1) && cursor.y === y + 1) { color = dotgrid.theme.active.b_high } else if (cursor.x === x + 1 && cursor.y === y + 1) { color = dotgrid.theme.active.b_high }
|
||||
|
||||
let isStep = x % 4 === 0 && y % 4 === 0
|
||||
// Don't draw margins
|
||||
if (x === 0 || y === 0) { continue }
|
||||
this.drawMarker({
|
||||
x: parseInt(x * 15) + 15,
|
||||
y: parseInt(y * 15) + 15
|
||||
}, is_step ? 2.5 : 1.5, color)
|
||||
x: parseInt(x * 15),
|
||||
y: parseInt(y * 15)
|
||||
}, isStep ? 2.5 : 1.5, isStep ? dotgrid.theme.active.b_med : dotgrid.theme.active.b_low)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -262,6 +265,8 @@ function Renderer (dotgrid) {
|
|||
this.context.drawImage(render, 0, 0, this.el.width, this.el.height)
|
||||
}
|
||||
|
||||
function printSize (size) { return `${size.width}x${size.height}` }
|
||||
function sizeOffset (a, b) { return { width: a.width - b.width, height: a.height - b.height } }
|
||||
function isEqual (a, b) { return a && b && Math.abs(a.x) === Math.abs(b.x) && Math.abs(a.y) === Math.abs(b.y) }
|
||||
function clamp (v, min, max) { return v < min ? min : v > max ? max : v }
|
||||
}
|
||||
|
|
|
|||
72
desktop/sources/scripts/source.js
Normal file
72
desktop/sources/scripts/source.js
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
'use strict'
|
||||
|
||||
function Source (dotgrid) {
|
||||
this.path = null
|
||||
|
||||
this.new = function () {
|
||||
dotgrid.setZoom(1.0)
|
||||
dotgrid.history.push(dotgrid.tool.layers)
|
||||
dotgrid.clear()
|
||||
this.path = null
|
||||
}
|
||||
|
||||
this.open = function () {
|
||||
if (!dialog) { return }
|
||||
|
||||
const paths = dialog.showOpenDialog({ properties: ['openFile'], filters: [{ name: 'Dotgrid Image', extensions: ['dot', 'grid'] }] })
|
||||
|
||||
if (!paths) { console.warn('Nothing to load'); return }
|
||||
|
||||
fs.readFile(paths[0], 'utf-8', (err, data) => {
|
||||
if (err) { alert('An error ocurred reading the file :' + err.message); return }
|
||||
this.load(paths[0], data)
|
||||
})
|
||||
}
|
||||
|
||||
this.load = function (path, data) {
|
||||
if (!path || isJson(data) === false) { return }
|
||||
const parsed = JSON.parse(`${data}`)
|
||||
dotgrid.tool.replace(parsed)
|
||||
this.path = path
|
||||
}
|
||||
|
||||
this.save = function () {
|
||||
if (dotgrid.tool.length() < 1) { console.warn('Nothing to save'); return }
|
||||
|
||||
if (this.canWrite() === true) {
|
||||
this.write(this.path, dotgrid.tool.export())
|
||||
} else {
|
||||
dotgrid.manager.toGRID(grab)
|
||||
}
|
||||
}
|
||||
|
||||
this.canWrite = function () {
|
||||
return fs && fs.existsSync(this.path)
|
||||
}
|
||||
|
||||
this.write = function (path, data) {
|
||||
console.log('Source', 'Writing ' + path)
|
||||
fs.writeFile(path, data, (err) => {
|
||||
if (err) { alert('An error ocurred updating the file' + err.message); console.warn(err) }
|
||||
})
|
||||
}
|
||||
|
||||
this.export = function () {
|
||||
if (dotgrid.tool.length() < 1) { console.warn('Nothing to export'); return }
|
||||
dotgrid.manager.toSVG(grab)
|
||||
}
|
||||
|
||||
this.render = function () {
|
||||
if (dotgrid.tool.length() < 1) { console.warn('Nothing to render'); return }
|
||||
dotgrid.manager.toPNG({ width: dotgrid.tool.settings.size.width * 2, height: dotgrid.tool.settings.size.height * 2 }, grab)
|
||||
}
|
||||
|
||||
function grab (base64, name) {
|
||||
const link = document.createElement('a')
|
||||
link.setAttribute('href', base64)
|
||||
link.setAttribute('download', name)
|
||||
link.dispatchEvent(new MouseEvent(`click`, { bubbles: true, cancelable: true, view: window }))
|
||||
}
|
||||
|
||||
function isJson (text) { try { JSON.parse(text); return true } catch (error) { return false } }
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
function Tool (dotgrid) {
|
||||
this.index = 0
|
||||
this.settings = { size: { width: 0, height: 0 }, crest: false }
|
||||
this.settings = { size: { width: 600, height: 300 }, crest: false }
|
||||
this.layers = [[], [], []]
|
||||
this.styles = [
|
||||
{ thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#f00', fill: 'none', mirror_style: 0, transform: 'rotate(45)' },
|
||||
|
|
@ -77,15 +77,13 @@ function Tool (dotgrid) {
|
|||
if (dot.settings.width && dot.settings.height) {
|
||||
dot.settings.size = { width: dot.settings.width, height: dot.settings.height }
|
||||
}
|
||||
if (this.settings && (this.settings.size.width !== dot.settings.size.width || this.settings.size.height !== dot.settings.size.height)) {
|
||||
dotgrid.setSize({ width: dot.settings.size.width / 15, height: dot.settings.size.height / 15 })
|
||||
}
|
||||
|
||||
this.layers = dot.layers
|
||||
this.styles = dot.styles
|
||||
this.settings = dot.settings
|
||||
|
||||
this.clear()
|
||||
dotgrid.fitSize()
|
||||
dotgrid.renderer.update()
|
||||
dotgrid.interface.update(true)
|
||||
dotgrid.history.push(this.layers)
|
||||
|
|
@ -215,10 +213,10 @@ function Tool (dotgrid) {
|
|||
if (type === 'grid') { dotgrid.renderer.toggle() }
|
||||
if (type === 'screen') { app.toggleFullscreen() }
|
||||
|
||||
if (type === 'open') { dotgrid.open() }
|
||||
if (type === 'save') { dotgrid.save() }
|
||||
if (type === 'render') { dotgrid.render() }
|
||||
if (type === 'export') { dotgrid.export() }
|
||||
if (type === 'open') { dotgrid.source.open() }
|
||||
if (type === 'save') { dotgrid.source.save() }
|
||||
if (type === 'render') { dotgrid.source.render() }
|
||||
if (type === 'export') { dotgrid.source.export() }
|
||||
}
|
||||
|
||||
this.canAppend = function (content, index = this.index) {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
{
|
||||
"settings": {
|
||||
"size": {
|
||||
"width": 315,
|
||||
"height": 300
|
||||
}
|
||||
"width": 300,
|
||||
"height": 285
|
||||
},
|
||||
"crest": false
|
||||
},
|
||||
"layers": [
|
||||
[
|
||||
|
|
@ -11,12 +12,12 @@
|
|||
"type": "arc_r",
|
||||
"vertices": [
|
||||
{
|
||||
"x": 135,
|
||||
"y": 225
|
||||
"x": 120,
|
||||
"y": 210
|
||||
},
|
||||
{
|
||||
"x": 195,
|
||||
"y": 165
|
||||
"x": 180,
|
||||
"y": 150
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -24,20 +25,20 @@
|
|||
"type": "arc_c",
|
||||
"vertices": [
|
||||
{
|
||||
"x": 135,
|
||||
"y": 165
|
||||
"x": 120,
|
||||
"y": 150
|
||||
},
|
||||
{
|
||||
"x": 195,
|
||||
"y": 105
|
||||
"x": 180,
|
||||
"y": 90
|
||||
},
|
||||
{
|
||||
"x": 195,
|
||||
"y": 105
|
||||
"x": 180,
|
||||
"y": 90
|
||||
},
|
||||
{
|
||||
"x": 255,
|
||||
"y": 165
|
||||
"x": 240,
|
||||
"y": 150
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -45,12 +46,12 @@
|
|||
"type": "arc_c",
|
||||
"vertices": [
|
||||
{
|
||||
"x": 135,
|
||||
"y": 225
|
||||
"x": 120,
|
||||
"y": 210
|
||||
},
|
||||
{
|
||||
"x": 75,
|
||||
"y": 165
|
||||
"x": 60,
|
||||
"y": 150
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -58,24 +59,24 @@
|
|||
"type": "arc_c",
|
||||
"vertices": [
|
||||
{
|
||||
"x": 135,
|
||||
"y": 165
|
||||
"x": 120,
|
||||
"y": 150
|
||||
},
|
||||
{
|
||||
"x": 165,
|
||||
"y": 135
|
||||
"x": 150,
|
||||
"y": 120
|
||||
},
|
||||
{
|
||||
"x": 195,
|
||||
"y": 165
|
||||
"x": 180,
|
||||
"y": 150
|
||||
},
|
||||
{
|
||||
"x": 165,
|
||||
"y": 195
|
||||
"x": 150,
|
||||
"y": 180
|
||||
},
|
||||
{
|
||||
"x": 135,
|
||||
"y": 165
|
||||
"x": 120,
|
||||
"y": 150
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -83,24 +84,24 @@
|
|||
"type": "arc_c",
|
||||
"vertices": [
|
||||
{
|
||||
"x": 165,
|
||||
"y": 75
|
||||
"x": 150,
|
||||
"y": 60
|
||||
},
|
||||
{
|
||||
"x": 255,
|
||||
"y": 165
|
||||
"x": 240,
|
||||
"y": 150
|
||||
},
|
||||
{
|
||||
"x": 165,
|
||||
"y": 255
|
||||
"x": 150,
|
||||
"y": 240
|
||||
},
|
||||
{
|
||||
"x": 75,
|
||||
"y": 165
|
||||
"x": 60,
|
||||
"y": 150
|
||||
},
|
||||
{
|
||||
"x": 165,
|
||||
"y": 75
|
||||
"x": 150,
|
||||
"y": 60
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -114,24 +115,24 @@
|
|||
"type": "arc_r",
|
||||
"vertices": [
|
||||
{
|
||||
"x": 255,
|
||||
"y": 165
|
||||
"x": 240,
|
||||
"y": 150
|
||||
},
|
||||
{
|
||||
"x": 165,
|
||||
"y": 75
|
||||
"x": 150,
|
||||
"y": 60
|
||||
},
|
||||
{
|
||||
"x": 75,
|
||||
"y": 165
|
||||
"x": 60,
|
||||
"y": 150
|
||||
},
|
||||
{
|
||||
"x": 135,
|
||||
"y": 225
|
||||
"x": 120,
|
||||
"y": 210
|
||||
},
|
||||
{
|
||||
"x": 195,
|
||||
"y": 165
|
||||
"x": 180,
|
||||
"y": 150
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -139,32 +140,32 @@
|
|||
"type": "arc_c",
|
||||
"vertices": [
|
||||
{
|
||||
"x": 195,
|
||||
"y": 165
|
||||
"x": 180,
|
||||
"y": 150
|
||||
},
|
||||
{
|
||||
"x": 195,
|
||||
"y": 165
|
||||
"x": 180,
|
||||
"y": 150
|
||||
},
|
||||
{
|
||||
"x": 165,
|
||||
"y": 195
|
||||
"x": 150,
|
||||
"y": 180
|
||||
},
|
||||
{
|
||||
"x": 135,
|
||||
"y": 165
|
||||
"x": 120,
|
||||
"y": 150
|
||||
},
|
||||
{
|
||||
"x": 135,
|
||||
"y": 165
|
||||
"x": 120,
|
||||
"y": 150
|
||||
},
|
||||
{
|
||||
"x": 195,
|
||||
"y": 105
|
||||
"x": 180,
|
||||
"y": 90
|
||||
},
|
||||
{
|
||||
"x": 255,
|
||||
"y": 165
|
||||
"x": 240,
|
||||
"y": 150
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
<script type="text/javascript" src="desktop/sources/scripts/tool.js"></script>
|
||||
<script type="text/javascript" src="desktop/sources/scripts/generator.js"></script>
|
||||
<script type="text/javascript" src="desktop/sources/scripts/picker.js"></script>
|
||||
<script type="text/javascript" src="desktop/sources/scripts//source.js"></script>
|
||||
<!-- Web Specific -->
|
||||
<script type="text/javascript" src="web/events.js"></script>
|
||||
<!-- Styles -->
|
||||
|
|
@ -44,8 +45,11 @@
|
|||
'use strict';
|
||||
function Listener(){}
|
||||
const dialog = null;
|
||||
DOTGRID.install(document.body);
|
||||
DOTGRID.start();
|
||||
|
||||
const dotgrid = new Dotgrid()
|
||||
dotgrid.install(document.body);
|
||||
|
||||
window.addEventListener('load', () => { dotgrid.start(); })
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -7,46 +7,46 @@ document.onkeyup = (e) =>
|
|||
if(e.target && e.target.id === "picker_input"){ return; }
|
||||
|
||||
// Output
|
||||
if((e.ctrlKey || e.metaKey) && ch === "s"){ DOTGRID.save(); e.preventDefault(); return; }
|
||||
if((e.ctrlKey || e.metaKey) && ch === "r"){ DOTGRID.render(); e.preventDefault(); return; }
|
||||
if((e.ctrlKey || e.metaKey) && ch === "e"){ DOTGRID.export(); e.preventDefault(); return; }
|
||||
if((e.ctrlKey || e.metaKey) && ch === "k"){ DOTGRID.tool.toggleCrest(); e.preventDefault(); return; }
|
||||
if((e.ctrlKey || e.metaKey) && ch === "s"){ dotgrid.save(); e.preventDefault(); return; }
|
||||
if((e.ctrlKey || e.metaKey) && ch === "r"){ dotgrid.render(); e.preventDefault(); return; }
|
||||
if((e.ctrlKey || e.metaKey) && ch === "e"){ dotgrid.export(); e.preventDefault(); return; }
|
||||
if((e.ctrlKey || e.metaKey) && ch === "k"){ dotgrid.tool.toggleCrest(); e.preventDefault(); return; }
|
||||
|
||||
if(ch === "backspace" && e.ctrlKey){ DOTGRID.theme.reset(); e.preventDefault(); }
|
||||
if(ch === "backspace"){ DOTGRID.tool.removeSegment(); e.preventDefault(); }
|
||||
if(ch === "escape"){ DOTGRID.tool.clear(); DOTGRID.picker.stop(); e.preventDefault(); }
|
||||
if(ch === "backspace" && e.ctrlKey){ dotgrid.theme.reset(); e.preventDefault(); }
|
||||
if(ch === "backspace"){ dotgrid.tool.removeSegment(); e.preventDefault(); }
|
||||
if(ch === "escape"){ dotgrid.tool.clear(); dotgrid.picker.stop(); e.preventDefault(); }
|
||||
|
||||
if(ch === "1"){ DOTGRID.tool.selectLayer(0); e.preventDefault(); }
|
||||
if(ch === "2"){ DOTGRID.tool.selectLayer(1); e.preventDefault(); }
|
||||
if(ch === "3"){ DOTGRID.tool.selectLayer(2); e.preventDefault(); }
|
||||
if(ch === "1"){ dotgrid.tool.selectLayer(0); e.preventDefault(); }
|
||||
if(ch === "2"){ dotgrid.tool.selectLayer(1); e.preventDefault(); }
|
||||
if(ch === "3"){ dotgrid.tool.selectLayer(2); e.preventDefault(); }
|
||||
|
||||
if(ch === "h"){ DOTGRID.renderer.toggle(); e.preventDefault(); }
|
||||
if(ch === "?"){ DOTGRID.reset(); DOTGRID.theme.reset(); e.preventDefault(); }
|
||||
if(ch === "h"){ dotgrid.renderer.toggle(); e.preventDefault(); }
|
||||
if(ch === "?"){ dotgrid.reset(); dotgrid.theme.reset(); e.preventDefault(); }
|
||||
|
||||
if(ch === "a"){ DOTGRID.tool.cast("line"); e.preventDefault(); }
|
||||
if(ch === "s"){ DOTGRID.tool.cast("arc_c"); e.preventDefault(); }
|
||||
if(ch === "d"){ DOTGRID.tool.cast("arc_r"); e.preventDefault(); }
|
||||
if(ch === "t"){ DOTGRID.tool.cast("arc_c_full"); e.preventDefault(); }
|
||||
if(ch === "y"){ DOTGRID.tool.cast("arc_r_full"); e.preventDefault(); }
|
||||
if(ch === "f"){ DOTGRID.tool.cast("bezier"); e.preventDefault(); }
|
||||
if(ch === "z"){ DOTGRID.tool.cast("close"); e.preventDefault(); }
|
||||
if(ch === "a"){ dotgrid.tool.cast("line"); e.preventDefault(); }
|
||||
if(ch === "s"){ dotgrid.tool.cast("arc_c"); e.preventDefault(); }
|
||||
if(ch === "d"){ dotgrid.tool.cast("arc_r"); e.preventDefault(); }
|
||||
if(ch === "t"){ dotgrid.tool.cast("arc_c_full"); e.preventDefault(); }
|
||||
if(ch === "y"){ dotgrid.tool.cast("arc_r_full"); e.preventDefault(); }
|
||||
if(ch === "f"){ dotgrid.tool.cast("bezier"); e.preventDefault(); }
|
||||
if(ch === "z"){ dotgrid.tool.cast("close"); e.preventDefault(); }
|
||||
|
||||
if(ch === "q"){ DOTGRID.tool.toggle("linecap"); e.preventDefault(); }
|
||||
if(ch === "w"){ DOTGRID.tool.toggle("linejoin"); e.preventDefault(); }
|
||||
if(ch === "e"){ DOTGRID.tool.toggle("mirror"); e.preventDefault(); }
|
||||
if(ch === "r"){ DOTGRID.tool.toggle("fill"); e.preventDefault(); }
|
||||
if(ch === "g"){ DOTGRID.picker.start(); e.preventDefault(); }
|
||||
if(ch === "}"){ DOTGRID.tool.toggle("thickness",1); e.preventDefault(); }
|
||||
if(ch === "{"){ DOTGRID.tool.toggle("thickness",-1); e.preventDefault(); }
|
||||
if(ch === "]"){ DOTGRID.tool.toggle("thickness",5); e.preventDefault(); }
|
||||
if(ch === "["){ DOTGRID.tool.toggle("thickness",-5); e.preventDefault(); }
|
||||
if(ch === "q"){ dotgrid.tool.toggle("linecap"); e.preventDefault(); }
|
||||
if(ch === "w"){ dotgrid.tool.toggle("linejoin"); e.preventDefault(); }
|
||||
if(ch === "e"){ dotgrid.tool.toggle("mirror"); e.preventDefault(); }
|
||||
if(ch === "r"){ dotgrid.tool.toggle("fill"); e.preventDefault(); }
|
||||
if(ch === "g"){ dotgrid.picker.start(); e.preventDefault(); }
|
||||
if(ch === "}"){ dotgrid.tool.toggle("thickness",1); e.preventDefault(); }
|
||||
if(ch === "{"){ dotgrid.tool.toggle("thickness",-1); e.preventDefault(); }
|
||||
if(ch === "]"){ dotgrid.tool.toggle("thickness",5); e.preventDefault(); }
|
||||
if(ch === "["){ dotgrid.tool.toggle("thickness",-5); e.preventDefault(); }
|
||||
|
||||
if(ch === "m"){ DOTGRID.tool.merge(); e.preventDefault(); }
|
||||
if(ch === "m"){ dotgrid.tool.merge(); e.preventDefault(); }
|
||||
|
||||
if(ch === "i"){ DOTGRID.theme.invert(); e.preventDefault(); }
|
||||
if(ch === "i"){ dotgrid.theme.invert(); e.preventDefault(); }
|
||||
}
|
||||
|
||||
document.onkeydown = (e) =>
|
||||
{
|
||||
if(e.keyCode === 9){ DOTGRID.tool.selectNextLayer(); e.preventDefault(); }
|
||||
if(e.keyCode === 9){ dotgrid.tool.selectNextLayer(); e.preventDefault(); }
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user