Progress on live version.
This commit is contained in:
Devine Lu Linvega
parent
6f4b7d4517
commit
446ec315f2
@ -27,6 +27,80 @@
|
||||
const fs = require('fs');
|
||||
|
||||
dotgrid = new Dotgrid(300,300,20,20,4,4);
|
||||
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.toggle_fullscreen(); },"CmdOrCtrl+Enter");
|
||||
dotgrid.controller.add("default","*","Hide",() => { app.toggle_visible(); },"CmdOrCtrl+H");
|
||||
dotgrid.controller.add("default","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+.");
|
||||
dotgrid.controller.add("default","*","Documentation",() => { dotgrid.controller.docs(); },"CmdOrCtrl+Esc");
|
||||
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","Edit","Copy",() => { document.execCommand('copy'); },"CmdOrCtrl+C");
|
||||
dotgrid.controller.add("default","Edit","Cut",() => { document.execCommand('cut'); },"CmdOrCtrl+X");
|
||||
dotgrid.controller.add("default","Edit","Paste",() => { document.execCommand('paste'); },"CmdOrCtrl+V");
|
||||
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","Edit","Delete",() => { dotgrid.tool.remove_segment(); },"Backspace");
|
||||
dotgrid.controller.add("default","Edit","Deselect",() => { dotgrid.tool.clear(); },"Esc");
|
||||
|
||||
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","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","Color",() => { dotgrid.picker.start(); },"G");
|
||||
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","Manual","Add Point",() => { dotgrid.tool.add_vertex(dotgrid.cursor.pos); dotgrid.guide.refresh() },"Enter");
|
||||
dotgrid.controller.add("default","Manual","Move Up",() => { dotgrid.cursor.pos.y -= 15; dotgrid.guide.refresh() },"Up");
|
||||
dotgrid.controller.add("default","Manual","Move Right",() => { dotgrid.cursor.pos.x -= 15; dotgrid.guide.refresh() },"Right");
|
||||
dotgrid.controller.add("default","Manual","Move Down",() => { dotgrid.cursor.pos.y += 15; dotgrid.guide.refresh() },"Down");
|
||||
dotgrid.controller.add("default","Manual","Move Left",() => { dotgrid.cursor.pos.x += 15; dotgrid.guide.refresh() },"Left");
|
||||
dotgrid.controller.add("default","Manual","Remove Point",() => { dotgrid.tool.remove_segments_at(dotgrid.cursor.pos); },"CmdOrCtrl+Backspace");
|
||||
|
||||
dotgrid.controller.add("default","Layers","Foreground",() => { dotgrid.tool.select_layer(0) },"CmdOrCtrl+1");
|
||||
dotgrid.controller.add("default","Layers","Middleground",() => { dotgrid.tool.select_layer(1) },"CmdOrCtrl+2");
|
||||
dotgrid.controller.add("default","Layers","Background",() => { dotgrid.tool.select_layer(2) },"CmdOrCtrl+3");
|
||||
|
||||
dotgrid.controller.add("default","View","Tools",() => { dotgrid.interface.toggle(); },"U");
|
||||
dotgrid.controller.add("default","View","Grid",() => { dotgrid.guide.toggle(); },"H");
|
||||
|
||||
dotgrid.controller.add("picker","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,");
|
||||
dotgrid.controller.add("picker","*","Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter");
|
||||
dotgrid.controller.add("picker","*","Hide",() => { app.toggle_visible(); },"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.add("picker","Mode","Stop Picker Mode",() => { dotgrid.picker.stop(); },"Escape");
|
||||
|
||||
dotgrid.controller.commit();
|
||||
|
||||
dotgrid.install();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
|
||||
{
|
||||
this.controller = new Controller();
|
||||
this.controller = null;
|
||||
this.theme = new Theme();
|
||||
this.interface = new Interface();
|
||||
this.history = new History();
|
||||
@ -24,78 +24,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
|
||||
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","*","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(.grid)",() => { dotgrid.save(); },"CmdOrCtrl+S");
|
||||
this.controller.add("default","File","Render(.png)",() => { dotgrid.render(); },"CmdOrCtrl+R");
|
||||
this.controller.add("default","File","Export(.svg)",() => { dotgrid.export(); },"CmdOrCtrl+E");
|
||||
|
||||
this.controller.add("default","Edit","Copy",() => { document.execCommand('copy'); },"CmdOrCtrl+C");
|
||||
this.controller.add("default","Edit","Cut",() => { document.execCommand('cut'); },"CmdOrCtrl+X");
|
||||
this.controller.add("default","Edit","Paste",() => { document.execCommand('paste'); },"CmdOrCtrl+V");
|
||||
this.controller.add("default","Edit","Undo",() => { dotgrid.tool.undo(); },"CmdOrCtrl+Z");
|
||||
this.controller.add("default","Edit","Redo",() => { dotgrid.tool.redo(); },"CmdOrCtrl+Shift+Z");
|
||||
this.controller.add("default","Edit","Delete",() => { dotgrid.tool.remove_segment(); },"Backspace");
|
||||
this.controller.add("default","Edit","Deselect",() => { dotgrid.tool.clear(); },"Esc");
|
||||
|
||||
this.controller.add("default","Stroke","Line",() => { dotgrid.tool.cast("line"); },"A");
|
||||
this.controller.add("default","Stroke","Arc",() => { dotgrid.tool.cast("arc_c"); },"S"); // 0,1
|
||||
this.controller.add("default","Stroke","Arc Rev",() => { dotgrid.tool.cast("arc_r")},"D"); // 0,0
|
||||
this.controller.add("default","Stroke","Bezier",() => { dotgrid.tool.cast("bezier") },"F");
|
||||
this.controller.add("default","Stroke","Close",() => { dotgrid.tool.cast("close") },"Z");
|
||||
|
||||
this.controller.add("default","Effect","Linecap",() => { dotgrid.tool.toggle("linecap"); },"Q");
|
||||
this.controller.add("default","Effect","Linejoin",() => { dotgrid.tool.toggle("linejoin"); },"W");
|
||||
this.controller.add("default","Effect","Mirror",() => { dotgrid.tool.toggle("mirror"); },"E");
|
||||
this.controller.add("default","Effect","Fill",() => { dotgrid.tool.toggle("fill"); },"R");
|
||||
this.controller.add("default","Effect","Color",() => { dotgrid.picker.start(); },"G");
|
||||
this.controller.add("default","Effect","Thicker",() => { dotgrid.tool.toggle("thickness",1) },"}");
|
||||
this.controller.add("default","Effect","Thinner",() => { dotgrid.tool.toggle("thickness",-1) },"{");
|
||||
this.controller.add("default","Effect","Thicker +5",() => { dotgrid.tool.toggle("thickness",5) },"]");
|
||||
this.controller.add("default","Effect","Thinner -5",() => { dotgrid.tool.toggle("thickness",-5) },"[");
|
||||
|
||||
this.controller.add("default","Manual","Add Point",() => { dotgrid.tool.add_vertex(dotgrid.cursor.pos); dotgrid.guide.refresh() },"Enter");
|
||||
this.controller.add("default","Manual","Move Up",() => { dotgrid.cursor.pos.y -= 15; dotgrid.guide.refresh() },"Up");
|
||||
this.controller.add("default","Manual","Move Right",() => { dotgrid.cursor.pos.x -= 15; dotgrid.guide.refresh() },"Right");
|
||||
this.controller.add("default","Manual","Move Down",() => { dotgrid.cursor.pos.y += 15; dotgrid.guide.refresh() },"Down");
|
||||
this.controller.add("default","Manual","Move Left",() => { dotgrid.cursor.pos.x += 15; dotgrid.guide.refresh() },"Left");
|
||||
this.controller.add("default","Manual","Remove Point",() => { dotgrid.tool.remove_segments_at(dotgrid.cursor.pos); },"CmdOrCtrl+Backspace");
|
||||
|
||||
this.controller.add("default","Layers","Foreground",() => { dotgrid.tool.select_layer(0) },"CmdOrCtrl+1");
|
||||
this.controller.add("default","Layers","Middleground",() => { dotgrid.tool.select_layer(1) },"CmdOrCtrl+2");
|
||||
this.controller.add("default","Layers","Background",() => { dotgrid.tool.select_layer(2) },"CmdOrCtrl+3");
|
||||
|
||||
this.controller.add("default","View","Tools",() => { dotgrid.interface.toggle(); },"U");
|
||||
this.controller.add("default","View","Grid",() => { dotgrid.guide.toggle(); },"H");
|
||||
|
||||
this.controller.add("picker","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,");
|
||||
this.controller.add("picker","*","Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter");
|
||||
this.controller.add("picker","*","Hide",() => { app.toggle_visible(); },"CmdOrCtrl+H");
|
||||
this.controller.add("picker","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+.");
|
||||
this.controller.add("picker","*","Documentation",() => { dotgrid.controller.docs(); },"CmdOrCtrl+Esc");
|
||||
this.controller.add("picker","*","Reset",() => { dotgrid.reset(); dotgrid.theme.reset(); },"CmdOrCtrl+Backspace");
|
||||
this.controller.add("picker","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q");
|
||||
|
||||
this.controller.add_role("picker","Edit","undo");
|
||||
this.controller.add_role("picker","Edit","redo");
|
||||
this.controller.add_role("picker","Edit","cut");
|
||||
this.controller.add_role("picker","Edit","copy");
|
||||
this.controller.add_role("picker","Edit","paste");
|
||||
this.controller.add_role("picker","Edit","delete");
|
||||
this.controller.add_role("picker","Edit","selectall");
|
||||
|
||||
this.controller.add("picker","Mode","Stop Picker Mode",() => { dotgrid.picker.stop(); },"Escape");
|
||||
|
||||
this.controller.commit();
|
||||
|
||||
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);
|
||||
@ -180,9 +108,14 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
|
||||
this.tool.settings.size.width = size.width
|
||||
this.tool.settings.size.height = size.height
|
||||
|
||||
var win = require('electron').remote.getCurrentWindow();
|
||||
win.setSize((size.width+100)*scale,(size.height+100+(interface ? 10 : 0))*scale,true);
|
||||
|
||||
try{
|
||||
var win = require('electron').remote.getCurrentWindow();
|
||||
win.setSize((size.width+100)*scale,(size.height+100+(interface ? 10 : 0))*scale,true);
|
||||
}
|
||||
catch(err){
|
||||
console.log("No window")
|
||||
}
|
||||
|
||||
this.grid_x = size.width/15
|
||||
this.grid_y = size.height/15
|
||||
|
||||
@ -198,7 +131,13 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
|
||||
this.set_zoom = function(scale)
|
||||
{
|
||||
this.set_size({width:this.tool.settings.size.width,height:this.tool.settings.size.height},true,scale)
|
||||
webFrame.setZoomFactor(scale)
|
||||
|
||||
try{
|
||||
webFrame.setZoomFactor(scale)
|
||||
}
|
||||
catch(err){
|
||||
console.log("Cannot zoom")
|
||||
}
|
||||
}
|
||||
|
||||
// Draw
|
||||
@ -206,6 +145,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
|
||||
this.reset = function()
|
||||
{
|
||||
this.tool.clear();
|
||||
this.refresh();
|
||||
}
|
||||
|
||||
this.clear = function()
|
||||
@ -217,6 +157,25 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
|
||||
dotgrid.interface.refresh(true);
|
||||
}
|
||||
|
||||
this.refresh = function()
|
||||
{
|
||||
var size = {width:step(window.innerWidth-90,15),height:step(window.innerHeight-120,15)}
|
||||
|
||||
dotgrid.tool.settings.size.width = size.width
|
||||
dotgrid.tool.settings.size.height = size.height
|
||||
|
||||
dotgrid.grid_x = size.width/15
|
||||
dotgrid.grid_y = size.height/15
|
||||
|
||||
dotgrid.grid_width = dotgrid.tool.settings.size.width/dotgrid.grid_x;
|
||||
dotgrid.grid_height = dotgrid.tool.settings.size.height/dotgrid.grid_y;
|
||||
|
||||
dotgrid.guide.resize(size);
|
||||
|
||||
dotgrid.interface.refresh();
|
||||
dotgrid.guide.refresh();
|
||||
}
|
||||
|
||||
this.drag = function(e)
|
||||
{
|
||||
e.preventDefault();
|
||||
@ -281,22 +240,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
|
||||
|
||||
window.addEventListener('resize', function(e)
|
||||
{
|
||||
var size = {width:step(window.innerWidth-90,15),height:step(window.innerHeight-120,15)}
|
||||
|
||||
dotgrid.tool.settings.size.width = size.width
|
||||
dotgrid.tool.settings.size.height = size.height
|
||||
|
||||
dotgrid.grid_x = size.width/15
|
||||
dotgrid.grid_y = size.height/15
|
||||
|
||||
dotgrid.grid_width = dotgrid.tool.settings.size.width/dotgrid.grid_x;
|
||||
dotgrid.grid_height = dotgrid.tool.settings.size.height/dotgrid.grid_y;
|
||||
|
||||
dotgrid.guide.resize(size);
|
||||
|
||||
dotgrid.interface.refresh();
|
||||
dotgrid.guide.refresh();
|
||||
|
||||
dotgrid.refresh();
|
||||
}, false);
|
||||
|
||||
window.addEventListener('dragover',function(e)
|
||||
|
||||
@ -8,7 +8,7 @@ function Guide()
|
||||
this.el.style.height = "320px";
|
||||
this.show_extras = true;
|
||||
|
||||
this.scale = 2; // require('electron').remote.getCurrentWindow().scaleFactor;
|
||||
this.scale = 2;
|
||||
|
||||
this.start = function()
|
||||
{
|
||||
@ -18,9 +18,10 @@ function Guide()
|
||||
|
||||
this.refresh = function(force = false)
|
||||
{
|
||||
|
||||
this.clear();
|
||||
|
||||
|
||||
this.el.getContext('2d').restore();
|
||||
|
||||
if(dotgrid.tool.index == 2){ this.draw_markers() ; this.draw_vertices() }
|
||||
this.draw_path(new Generator(dotgrid.tool.layers[2],dotgrid.tool.styles[2]).toString({x:0,y:0},this.scale),dotgrid.tool.styles[2])
|
||||
if(dotgrid.tool.index == 1){ this.draw_markers() ; this.draw_vertices() }
|
||||
@ -166,8 +167,10 @@ function Guide()
|
||||
if(style.strokeLineDash){
|
||||
ctx.setLineDash(style.strokeLineDash);
|
||||
}
|
||||
else{
|
||||
ctx.setLineDash([]);
|
||||
}
|
||||
ctx.stroke(p);
|
||||
ctx.setLineDash([0,0]);
|
||||
}
|
||||
|
||||
this.draw_translation = function()
|
||||
|
||||
29
index.html
Normal file
29
index.html
Normal file
@ -0,0 +1,29 @@
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript" src="desktop/sources/scripts/lib/theme.js"></script>
|
||||
<script type="text/javascript" src="desktop/sources/scripts/lib/history.js"></script>
|
||||
|
||||
<script type="text/javascript" src="desktop/sources/scripts/dotgrid.js"></script>
|
||||
<script type="text/javascript" src="desktop/sources/scripts/cursor.js"></script>
|
||||
<script type="text/javascript" src="desktop/sources/scripts/guide.js"></script>
|
||||
<script type="text/javascript" src="desktop/sources/scripts/renderer.js"></script>
|
||||
<script type="text/javascript" src="desktop/sources/scripts/interface.js"></script>
|
||||
<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>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="desktop/sources/links/reset.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="desktop/sources/links/fonts.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="desktop/sources/links/main.css"/>
|
||||
<title>Dotgrid(Icon)</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<script>
|
||||
dotgrid = new Dotgrid(300,300,20,20,4,4);
|
||||
dotgrid.install();
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user