diff --git a/desktop/main.js b/desktop/main.js index aadb6b4..bc60638 100644 --- a/desktop/main.js +++ b/desktop/main.js @@ -32,8 +32,7 @@ app.on('ready', () => app.win = new BrowserWindow({width: 400, height: 420, minWidth: 400, minHeight: 420,webPreferences: {zoomFactor: 1.0}, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'}) app.win.loadURL(`file://${__dirname}/sources/index.html`); - app.win.scaleFactor = require('electron').screen.getPrimaryDisplay().scaleFactor - app.win.toggleDevTools(); + app.win.scaleFactor = require('electron').screen.getPrimaryDisplay().scaleFactor; app.win.on('closed', () => { win = null diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index f380704..e2771b1 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -37,7 +37,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) 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","File","Build Icons",() => { dotgrid.build(); },"CmdOrCtrl+B"); this.controller.add("default","Edit","Copy",() => { document.execCommand('copy'); },"CmdOrCtrl+C"); this.controller.add("default","Edit","Cut",() => { document.execCommand('cut'); },"CmdOrCtrl+X"); @@ -61,7 +60,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) 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.mod_thickness("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"); @@ -76,10 +75,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.controller.add("default","View","Tools",() => { dotgrid.interface.toggle(); },"U"); this.controller.add("default","View","Grid",() => { dotgrid.guide.toggle(); },"H"); - this.controller.add("default","View","Zoom Reset",() => { dotgrid.set_zoom(1.0) },"-"); - this.controller.add("default","View","Zoom 150%",() => { dotgrid.set_zoom(1.5) },"Plus"); - - this.controller.add("default","Mode","Picker",() => { dotgrid.picker.start(); },"CmdOrCtrl+P"); 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"); @@ -171,50 +166,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) }); } - this.bundle = {} - - this.build = function() - { - this.bundle = {} - - var sizes = [ - {width:16,height:16}, - {width:32,height:32}, - {width:52,height:52}, - {width:64,height:64}, - {width:72,height:72}, - {width:96,height:96}, - {width:128,height:128}, - {width:256,height:256}, - {width:512,height:512} - ] - - for(id in sizes){ - this.renderer.to_png(sizes[id],dotgrid.package) - } - } - - this.package = function(n = null, ready,size) - { - dotgrid.bundle[`${size.width}x${size.height}`] = ready - - console.log(`Rendered ${size.width}x${size.height}`,`${Object.keys(dotgrid.bundle).length}/9`) - - if(Object.keys(dotgrid.bundle).length == 9){ - dialog.showSaveDialog({title:"Export to Icons"},(fileName) => { - if (fileName === undefined){ return; } - for(id in dotgrid.bundle){ - fs.writeFileSync(`${fileName}.${id}.png`, dotgrid.bundle[id]); - } - }); - } - } - // Basics this.set_size = function(size = {width:300,height:300},interface = true,scale = 1) { - size = { width:clamp(parseInt(size.width/15)*15,120,1000),height:clamp(parseInt(size.height/15)*15,120,1000)} + 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 diff --git a/desktop/sources/scripts/generator.js b/desktop/sources/scripts/generator.js index 1d927cb..fdcf064 100644 --- a/desktop/sources/scripts/generator.js +++ b/desktop/sources/scripts/generator.js @@ -18,7 +18,7 @@ function Generator(layer,style) seg.vertices[k2].y += offset.y // Rotate - var center = {x:(dotgrid.tool.settings.size.width/2)+offset.x-15,y:(dotgrid.tool.settings.size.height/2)+offset.y} + var 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] = rotate_point(seg.vertices[k2],center,angle) // Scale diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index 09d4f21..4cf6259 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -46,11 +46,11 @@ function Guide() this.resize = function(size) { - var offset = 30 + var offset = 15 this.el.width = (size.width+offset)*this.scale; - this.el.height = (size.height+offset)*this.scale; + this.el.height = (size.height+(offset*2))*this.scale; this.el.style.width = (size.width+offset)+"px"; - this.el.style.height = (size.height+offset)+"px"; + this.el.style.height = (size.height+(offset*2))+"px"; this.refresh(); } diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js index 133b88c..6f35c41 100644 --- a/desktop/sources/scripts/interface.js +++ b/desktop/sources/scripts/interface.js @@ -72,6 +72,13 @@ function Interface() { if(this.prev_operation == dotgrid.cursor.operation && force == false){ return; } + var multi_vertices = null; + var segments = dotgrid.tool.layer() + + for(id in segments){ + if(segments[id].vertices.length > 2){ multi_vertices = true; break; } + } + document.getElementById("line").className.baseVal = !dotgrid.tool.can_cast("line") ? "icon inactive" : "icon"; document.getElementById("arc_c").className.baseVal = !dotgrid.tool.can_cast("arc_c") ? "icon inactive" : "icon"; document.getElementById("arc_r").className.baseVal = !dotgrid.tool.can_cast("arc_r") ? "icon inactive" : "icon"; @@ -80,7 +87,7 @@ function Interface() document.getElementById("thickness").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; document.getElementById("linecap").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; - document.getElementById("linejoin").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; + document.getElementById("linejoin").className.baseVal = dotgrid.tool.layer().length < 1 || !multi_vertices ? "icon inactive" : "icon"; document.getElementById("mirror").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; document.getElementById("fill").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index 7c59cb6..b83f56c 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -17,10 +17,10 @@ function Renderer() this.refresh = function() { - this.svg_el.setAttribute("width",dotgrid.tool.settings.size.width+"px"); - this.svg_el.setAttribute("height",dotgrid.tool.settings.size.height+"px"); - this.svg_el.style.width = dotgrid.tool.settings.size.width; - this.svg_el.style.height = dotgrid.tool.settings.size.height; + this.svg_el.setAttribute("width",(dotgrid.tool.settings.size.width-(5))+"px"); + this.svg_el.setAttribute("height",(dotgrid.tool.settings.size.height+(10))+"px"); + this.svg_el.style.width = (dotgrid.tool.settings.size.width-(5)); + this.svg_el.style.height = dotgrid.tool.settings.size.height+(10); this.svg_el.style.strokeWidth = dotgrid.tool.style().thickness; var styles = dotgrid.tool.styles @@ -60,13 +60,13 @@ function Renderer() var canvas = document.createElement("canvas"); - canvas.width = size.width; - canvas.height = size.height; + canvas.width = (size.width)*2; + canvas.height = (size.height+30)*2; var ctx = canvas.getContext('2d'); img.onload = function(){ - ctx.drawImage(img, 0, 0, size.width, size.height); + ctx.drawImage(img, 0, 0, (size.width)*2, (size.height+30)*2); var data = canvas.toDataURL('image/png').replace(/^data:image\/\w+;base64,/, ""); dotgrid.renderer.to_png_ready(callback, new Buffer(data, 'base64'),size) };