fix sizing issues

4 files changed, 15 insertions, 17 deletions

diff --git a/js/app.js b/js/app.js
index 55d432e..f41b7a6 100644
--- a/js/app.js
+++ b/js/app.js
@@ -5,6 +5,7 @@ var erasing = false
 var selecting = false
 var filling = false
 var changed = false
+var grid = false
 var focused
 
 var canvas, tools, palette, controls, brush, mode, current_tool, current_canvas
@@ -22,7 +23,7 @@ function build () {
   brush.append(brush_rapper)
   palette.append(palette_rapper)
   letters.append(letters_rapper)
-	letters.repaint("Basic Latin")
+  letters.repaint("Basic Latin")
   
   controls.circle.focus()
 //  controls.shader.focus()
diff --git a/js/matrix.js b/js/matrix.js
index ff513d9..0f38eeb 100644
--- a/js/matrix.js
+++ b/js/matrix.js
@@ -185,16 +185,20 @@ Matrix.prototype.resize = function(w,h){
   this.rapper && this.resize_rapper()
 }
 Matrix.prototype.resize_rapper = function(){
+	var cw = this.aa[0][0].span.offsetWidth
+	var ch = this.aa[0][0].span.offsetHeight
+	if (this.grid) { cw++; ch++ }
+	var width = cw * this.aa[0].length
+	var height = ch * this.aa.length
+	if (this.grid) { width++; height++ }
   if (this.rotated) {
     this.rapper.parentNode.classList.add("rotated")
-    this.rapper.parentNode.style.height = (this.rapper.firstChild.offsetWidth+20) + "px"
-    this.rapper.parentNode.style.width = (this.rapper.offsetHeight+20) + "px"
-    this.rapper.style.top = ((this.rapper.offsetWidth+20)/2) + "px"
+    this.rapper.parentNode.style.height = (width) + "px"
+    this.rapper.parentNode.style.width = (height) + "px"
+    this.rapper.style.top = (width/2) + "px"
     // this.rapper.style.left = ((canvas_rapper.offsetHeight+20)/2) + "px"
   }
   else {
-    var width = this.aa[0][0].span.offsetWidth * this.aa[0].length
-    console.log(width, this.rapper.firstChild.offsetWidth)
     this.rapper.parentNode.classList.remove("rotated")
     this.rapper.parentNode.style.height = ""
     this.rapper.style.width = 
diff --git a/js/ui/controls.js b/js/ui/controls.js
index b5ed6b1..f760353 100644
--- a/js/ui/controls.js
+++ b/js/ui/controls.js
@@ -95,19 +95,13 @@ var controls = (function(){
   controls.grid = new BlurredCheckbox (grid_el)
   controls.grid.use = function(){
     document.body.classList.toggle('grid')
+  	letters.grid = palette.grid = canvas.grid = document.body.classList.contains("grid")
+  	canvas.resize_rapper()
+  	palette.resize_rapper()
+  	letters.resize_rapper()
     if (!selection.hidden) selection.reposition()
     this.update( document.body.classList.contains("grid") )
   }
-  controls.grid.show = function(){
-    document.body.classList.add('grid')
-    if (!selection.hidden) selection.reposition()
-    this.update( true )
-  }
-  controls.grid.hide = function(){
-    document.body.classList.remove('grid')
-    if (!selection.hidden) selection.reposition()
-    this.update( false )
-  }
 
   ClipboardTool = Tool.extend({
     blur: function(){
diff --git a/js/ui/selection.js b/js/ui/selection.js
index abd7da2..a3c3694 100644
--- a/js/ui/selection.js
+++ b/js/ui/selection.js
@@ -132,7 +132,6 @@ var selection = (function(){
   
   function show () {
     selecting = true
-    controls.grid.show()
   }
   function hide () {
     reset()