diff --git a/desktop/sources/index.html b/desktop/sources/index.html index 7dcfea1..e8fd44a 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -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(); diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 5bd2bc2..b307671 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -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) diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index e368640..c427813 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -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() diff --git a/index.html b/index.html new file mode 100644 index 0000000..4381d2f --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + Dotgrid(Icon) + + +
+ +
+ +