diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 5450f32..61f9036 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -10,8 +10,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.keyboard = new Keyboard(); this.picker = new Picker(); - this.width = width; - this.height = height; this.grid_x = grid_x; this.grid_y = grid_y; this.block_x = block_x; @@ -20,15 +18,10 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) // Dotgrid this.element = document.createElement("div"); this.element.id = "dotgrid"; - this.element.style.width = this.width; - this.element.style.height = this.height; this.wrapper = document.createElement("div"); this.wrapper.id = "wrapper"; - this.grid_width = this.width/this.grid_x; - this.grid_height = this.height/this.grid_y; - var cursor = null; this.svg_el = null; @@ -63,14 +56,14 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) // Vector this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg"); this.svg_el.setAttribute("class","vector"); - this.svg_el.setAttribute("width",this.width+"px"); - this.svg_el.setAttribute("height",this.height+"px"); + this.svg_el.setAttribute("width",this.tool.settings.width+"px"); + this.svg_el.setAttribute("height",this.tool.settings.height+"px"); this.svg_el.setAttribute("xmlns","http://www.w3.org/2000/svg"); this.svg_el.setAttribute("baseProfile","full"); this.svg_el.setAttribute("version","1.1"); - this.svg_el.style.width = this.width; - this.svg_el.style.height = this.height; + this.svg_el.style.width = this.tool.settings.width; + this.svg_el.style.height = this.tool.settings.height; this.svg_el.style.fill = "none"; this.svg_el.style.strokeWidth = this.tool.style().thickness; this.element.appendChild(this.svg_el); @@ -78,13 +71,13 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.preview_el = document.createElementNS("http://www.w3.org/2000/svg", "svg"); this.preview_el.id = "preview" this.preview_el.setAttribute("class","vector"); - this.preview_el.setAttribute("width",this.width+"px"); - this.preview_el.setAttribute("height",this.height+"px"); + this.preview_el.setAttribute("width",this.tool.settings.width+"px"); + this.preview_el.setAttribute("height",this.tool.settings.height+"px"); this.preview_el.setAttribute("xmlns","http://www.w3.org/2000/svg"); this.preview_el.setAttribute("baseProfile","full"); this.preview_el.setAttribute("version","1.1"); - this.preview_el.style.width = this.width; - this.preview_el.style.height = this.height; + this.preview_el.style.width = this.tool.settings.width; + this.preview_el.style.height = this.tool.settings.height; this.preview_el.style.strokeWidth = 2; this.preview_el.style.strokeLinecap = "round"; this.preview_el.style.fill = "none"; @@ -440,8 +433,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) var win = require('electron').remote.getCurrentWindow(); win.setSize(size.width+100,size.height+100+(interface ? 10 : 0),true); - this.width = size.width - this.height = size.height + this.tool.settings.width = size.width + this.tool.settings.height = size.height this.element.style.width = size.width+10 this.element.style.height = size.height+10 this.grid_x = size.width/15 @@ -453,6 +446,12 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.preview_el.setAttribute("width",size.width+"px"); this.preview_el.setAttribute("height",size.height+"px"); + this.element.style.width = this.tool.settings.width; + this.element.style.height = this.tool.settings.height; + + this.grid_width = this.tool.settings.width/this.grid_x; + this.grid_height = this.tool.settings.height/this.grid_y; + dotgrid.guide.resize(size); this.interface.update(); this.draw(); @@ -467,8 +466,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.layer_2.setAttribute("d",paths[1]); this.layer_3.setAttribute("d",paths[2]); - this.svg_el.style.width = this.width; - this.svg_el.style.height = this.height; + this.svg_el.style.width = this.tool.settings.width; + this.svg_el.style.height = this.tool.settings.height; this.layer_1.style.strokeWidth = this.tool.styles[0].thickness; this.layer_1.style.strokeLinecap = this.tool.styles[0].strokeLinecap; @@ -533,8 +532,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.copy = function(e) { - dotgrid.width = 300 - dotgrid.height = 300 + dotgrid.tool.settings.width = 300 + dotgrid.tool.settings.height = 300 dotgrid.draw(); var svg = dotgrid.svg_el.outerHTML; @@ -549,8 +548,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.cut = function(e) { - dotgrid.width = 300 - dotgrid.height = 300 + dotgrid.tool.settings.width = 300 + dotgrid.tool.settings.height = 300 dotgrid.draw(); var svg = dotgrid.svg_el.outerHTML; @@ -576,7 +575,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.position_in_grid = function(pos) { - return {x:(window.innerWidth/2) - (this.width/2) - pos.x,y:pos.y - (30+10)} + return {x:(window.innerWidth/2) - (this.tool.settings.width/2) - pos.x,y:pos.y - (30+10)} } this.position_on_grid = function(pos) @@ -585,7 +584,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) pos.x = pos.x + 7.5 x = Math.round(pos.x/this.grid_width)*this.grid_width y = Math.round(pos.y/this.grid_height)*this.grid_height - off = (x<-this.width || x>0 || y>this.height || y<0) + off = (x<-this.tool.settings.width || x>0 || y>this.tool.settings.height || y<0) if(off) { x = 50 y = -50 diff --git a/desktop/sources/scripts/picker.js b/desktop/sources/scripts/picker.js index 08cf368..8c815c6 100644 --- a/desktop/sources/scripts/picker.js +++ b/desktop/sources/scripts/picker.js @@ -7,7 +7,7 @@ function Picker() this.start = function() { - this.el.setAttribute("placeholder",`${dotgrid.tool.style().color} ${dotgrid.width}x${dotgrid.height}`) + this.el.setAttribute("placeholder",`${dotgrid.tool.style().color} ${dotgrid.tool.settings.width}x${dotgrid.tool.settings.height}`) dotgrid.controller.set("picker"); dotgrid.interface.el.className = "picker" diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index fe3f8e1..dc68709 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -1,14 +1,15 @@ function Tool() { this.index = 0; + this.settings = { width:300,height:300 } this.layers = [[],[],[]]; this.styles = [ - {thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#f00",fill:"none",dash:[0,0],mirror_style:0}, - {thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#0f0",fill:"none",dash:[0,0],mirror_style:0}, - {thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#00f",fill:"none",dash:[0,0],mirror_style:0} + { thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#f00",fill:"none",dash:[0,0],mirror_style:0 }, + { thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#0f0",fill:"none",dash:[0,0],mirror_style:0 }, + { thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#00f",fill:"none",dash:[0,0],mirror_style:0 } ]; this.verteces = []; - this.reqs = {line:2,arc_c:2,arc_r:2,bezier:3,close:0}; + this.reqs = { line:2,arc_c:2,arc_r:2,bezier:3,close:0 }; this.start = function() { @@ -45,7 +46,7 @@ function Tool() // I/O - this.export = function(target = {layers:this.layers,styles:this.styles}) + this.export = function(target = {settings:this.settings,layers:this.layers,styles:this.styles}) { return JSON.stringify(copy(target), null, 2); } @@ -261,12 +262,12 @@ function Tool() if(!vertex){ return null; } if(mirror_x == true){ - return {x:(dotgrid.width - vertex.x),y:vertex.y} + return {x:(dotgrid.tool.settings.width - vertex.x),y:vertex.y} } if(mirror_y == true){ - return {x:vertex.x,y:(dotgrid.height - vertex.y)+(dotgrid.height/2)} + return {x:vertex.x,y:(dotgrid.tool.settings.height - vertex.y)+(dotgrid.height/2)} } - return rotate_point(vertex.x,vertex.y,dotgrid.width/2,dotgrid.height/2,angle) + return rotate_point(vertex.x,vertex.y,dotgrid.tool.settings.width/2,dotgrid.tool.settings.height/2,angle) } function rotate_point(pointX, pointY, originX, originY, angle)