toggle grid

4 files changed, 34 insertions, 25 deletions

diff --git a/index.html b/index.html
index de811fc..1c04d1a 100644
--- a/index.html
+++ b/index.html
@@ -24,6 +24,7 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset
   <span id="circle_el" class="tool">circle</span>
   <span id="text_el" class="tool">text</span>
   <span id="clear_el" class="tool">clear</span>
+  <span id="grid_el" class="tool">grid</span>
 
   brush size: <span id="width_el" class="ed">5</span> x <span id="height_el" class="ed">5</span>
   canvas size: <span id="canvas_width_el" class="ed">80</span> x <span id="canvas_height_el" class="ed">24</span>
@@ -51,4 +52,5 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset
 <script src="js/matrix.js"></script>
 <script src="js/tool.js"></script>
 <script src="js/shader.js"></script>
+<script src="js/draw.js"></script>
 <script src="js/app.js"></script>
diff --git a/js/app.js b/js/app.js
index 9db7895..54553de 100644
--- a/js/app.js
+++ b/js/app.js
@@ -90,6 +90,10 @@ function build () {
 		canvas.clear()
 	}
 
+	controls.grid = new Tool (grid_el)
+	controls.grid.use = function(){
+		document.body.classList.toggle('grid')
+	}
 
 	controls.width = new Lex (width_el)
 	controls.height = new Lex (height_el)
@@ -151,7 +155,7 @@ function bind () {
 		})
 	});
 	
-	[controls.square, controls.circle, controls.text, controls.clear].forEach(function(tool){
+	[controls.square, controls.circle, controls.text, controls.clear, controls.grid].forEach(function(tool){
   	tool.span.addEventListener('mousedown', function(e){
 			tool.focus()
 		})
@@ -197,7 +201,7 @@ function bind () {
 		if (! e.metaKey && ! e.ctrlKey && ! e.altKey) {
 			e.preventDefault()
 		}
-		console.log(e.keyCode)
+		// console.log(e.keyCode)
 		switch (e.keyCode) {
 			case 27: // esc
 				if (focused) focused.blur()
@@ -218,6 +222,8 @@ function bind () {
 		}
 	})
 }
+
+
 function int_key (f) {
 	return function (key, keyCode) {
 		var n = parseInt(key)
@@ -225,25 +231,6 @@ function int_key (f) {
 	}
 }
 
-
-function draw (lex, x, y, erasing) {
-	stamp (canvas, brush, x, y, erasing)
-}
-function stamp (canvas, brush, x, y, erasing) {
-	hh = brush.w/2|0
-	brush.forEach(function(lex, s, t){
-		s += x-hh
-		t += y-hh
-		if (s >= 0 && s < canvas.w && t >= 0 && t < canvas.h) {
-		  if (erasing) {
-        canvas.aa[t][s].erase(lex)
-		  }
-		  else {
-        canvas.aa[t][s].clone(lex)
-		  }
-		}
-	})
-}
 function clamp (n,a,b){ return n < a ? a : n < b ? n : b }
 function mod (i,n) { return i - n * Math.floor(i / n) }
 
diff --git a/js/draw.js b/js/draw.js
new file mode 100644
index 0000000..cb7f816
--- /dev/null
+++ b/js/draw.js
@@ -0,0 +1,19 @@
+function draw (lex, x, y, erasing) {
+	stamp (canvas, brush, x, y, erasing)
+}
+function stamp (canvas, brush, x, y, erasing) {
+	hh = brush.w/2|0
+	brush.forEach(function(lex, s, t){
+		s += x-hh
+		t += y-hh
+		if (s >= 0 && s < canvas.w && t >= 0 && t < canvas.h) {
+		  if (erasing) {
+        canvas.aa[t][s].erase(lex)
+		  }
+		  else {
+        canvas.aa[t][s].clone(lex)
+		  }
+		}
+	})
+}
+
diff --git a/js/lex.js b/js/lex.js
index 086fc90..e98538c 100644
--- a/js/lex.js
+++ b/js/lex.js
@@ -74,6 +74,11 @@ Lex.prototype.blur = function(){
 	this.span.classList.remove('focused')
 	focused = null
 }
+Lex.prototype.demolish = function(){
+	this.span.parentNode.removeChild(this.span)
+	this.span = null
+}
+
 Lex.prototype.key = function(char, keyCode) {
 	console.log(keyCode, this.y, this.x)
 	switch (keyCode) {
@@ -110,7 +115,3 @@ Lex.prototype.key = function(char, keyCode) {
 			}
 	}
 }
-Lex.prototype.demolish = function(){
-	this.span.parentNode.removeChild(this.span)
-	this.span = null
-}