Moved size into tool.settings

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("width",this.tool.settings.width+"px");
-    this.svg_el.setAttribute("height",this.height+"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.width = this.tool.settings.width;
-    this.svg_el.style.height = this.height;
+    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("width",this.tool.settings.width+"px");
-    this.preview_el.setAttribute("height",this.height+"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.width = this.tool.settings.width;
-    this.preview_el.style.height = this.height;
+    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.tool.settings.width = size.width
-    this.height = size.height
+    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.width = this.tool.settings.width;
-    this.svg_el.style.height = this.height;
+    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.tool.settings.width = 300
-    dotgrid.height = 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.tool.settings.width = 300
-    dotgrid.height = 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

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"

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:"#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:"#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:"#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)