1 files changed, 81 insertions, 39 deletions

diff --git a/js/ui/controls.js b/js/ui/controls.js
index d575725..81403db 100644
--- a/js/ui/controls.js
+++ b/js/ui/controls.js
@@ -2,12 +2,13 @@ var controls = (function(){
 
 	var controls = {}
 	
-	
 	controls.circle = new Tool (circle_el)
 	controls.circle.use = function(){
 		brush.generate = controls.circle.generate
 		brush.generate()
 		drawing = true
+		filling = false
+		selection.hide()
 		brush.modified = false
 	}
 	controls.circle.generate = function(){
@@ -28,80 +29,100 @@ var controls = (function(){
 	controls.square.use = function(){
 		brush.generate = controls.square.generate
 		brush.generate()
-		drawing = true
 		brush.modified = false
+		drawing = true
+		filling = false
+		selection.hide()
 	}
 	controls.square.generate = function(){
 		var fg = brush.fg, bg = brush.bg
 		brush.fill(fg,bg)
 	}
-
-
+	
 	controls.text = new Tool (text_el)
 	controls.text.use = function(){
 		brush.generate = controls.text.generate
 		brush.generate()
 		drawing = false
+		filling = false
+		selection.hide()
 	}
 	controls.text.generate = function(){
 	}
-	
 
+	controls.select = new Tool (select_el)
+	controls.select.use = function(){
+		drawing = false
+		filling = false
+		selection.show()
+	}
+
+	controls.fill = new Tool (fill_el)
+	controls.fill.use = function(){
+		drawing = false
+		filling = true
+		selection.hide()
+	}
+	
 	controls.clear = new Tool (clear_el)
 	controls.clear.use = function(){
 		canvas.clear()
 	}
 	
-
 	controls.grid = new Tool (grid_el)
 	controls.grid.use = function(){
 		document.body.classList.toggle('grid')
 	}
-
-
-	controls.shader = new Tool (shader_el)
-	controls.shader.use = function(){
-		shader_textarea.style.display = "block"
-		// setTimeout(function(){ shader_textarea.focus() })
-		shader_textarea.focus()
+	controls.grid.show = function(){
+		document.body.classList.add('grid')
 	}
-	controls.shader.blur = function(){
-		Tool.prototype.blur.call(this)
-		shader_textarea.style.display = "none"		
+	controls.grid.hide = function(){
+		document.body.classList.remove('grid')
 	}
+
+	ClipboardTool = Tool.extend({
+	  blur: function(){
+      this.__blur()
+      clipboard.hide()
+	  }
+	})
+	ShaderTool = Tool.extend({
+	  use: function(){
+      shader_textarea.style.display = "block"
+      shader_textarea.focus()
+    },
+	  blur: function(){
+      this.__blur()
+      shader_textarea.style.display = "none"
+	  }
+	})	
+
+	controls.shader = new ShaderTool (shader_el)
+
 	shader_textarea.value = demo_shader.innerHTML
 	shader_textarea.addEventListener("input", function(){
 		var fn = shader.build(shader_textarea.value)
 		fn && shader.run(canvas)
 	})
 	
-	controls.save = new Tool (save_el)
+	controls.save = new ClipboardTool (save_el)
 	controls.save.use = function(){
 		clipboard.show()
 		clipboard.export_mode()
 	}
-	controls.save.blur = function(){
-		Tool.prototype.blur.call(this)
-		clipboard.hide()
-	}
-	controls.load = new Tool (load_el)
+	controls.load = new ClipboardTool (load_el)
 	controls.load.use = function(){
 		clipboard.show()
 		clipboard.import_mode()
 	}
-	controls.load.blur = function(){
-		Tool.prototype.blur.call(this)
-		clipboard.hide()
-	}
 		
 	controls.animate = new Tool (animate_checkbox)
 	controls.animate.use = function(){
 		var state = shader.toggle()
-		if (state) animate_checkbox.innerHTML = "x animate"
-		else       animate_checkbox.innerHTML = "_ animate"
+		if (state) this.el.innerHTML = "x animate"
+		else       this.el.innerHTML = "_ animate"
 	}
 	
-	
 	controls.width = new Lex (width_el)
 	controls.height = new Lex (height_el)
 	controls.canvas_width = new Lex (canvas_width_el)
@@ -110,7 +131,12 @@ var controls = (function(){
 	// bind	
 	
 	controls.bind = function(){
-		[controls.width, controls.height, controls.canvas_width, controls.canvas_height].forEach(function(lex){
+		[
+		  controls.width,
+		  controls.height,
+		  controls.canvas_width,
+		  controls.canvas_height
+		].forEach(function(lex){
 			lex.span.addEventListener('mousedown', function(e){
 				lex.focus()
 			})
@@ -120,6 +146,8 @@ var controls = (function(){
 			controls.square,
 			controls.circle,
 			controls.text,
+			controls.fill,
+			controls.select,
 			controls.clear,
 			controls.grid,
 			controls.shader,
@@ -133,14 +161,14 @@ var controls = (function(){
 		})
 	
 		controls.width.key = int_key(function(n, keyCode){
-			controls.width.blur()
+      controls.width.blur()
 			controls.width.char = ""+n
 			controls.width.build()
 			brush.w = n
 			brush.rebuild()
 		})
 		controls.height.key = int_key(function(n, keyCode){
-			controls.height.blur()
+      controls.height.blur()
 			controls.height.char = ""+n
 			controls.height.build()
 			brush.h = n
@@ -154,22 +182,36 @@ var controls = (function(){
 			}
 			controls.canvas_width.char = ""+n
 			controls.canvas_width.build()
-			canvas.w = n
-			canvas.rebuild()
-			canvas.build()
 		})
+		controls.canvas_width.onBlur = function(){
+		  var w = parseInt(controls.canvas_width.char) || 1
+		  controls.canvas_width.char = w+""
+		  controls.canvas_width.build()
+			canvas.resize(w, canvas.h)
+		}
+
 		controls.canvas_height.key = int_key(function(n, keyCode){
 			controls.canvas_height.read()
-			if (controls.canvas_height.char.length == 1) {
+			if (controls.canvas_height.char.length < 3) {
 				n = parseInt(controls.canvas_height.char) * 10 + n
 			}
 			controls.canvas_height.char = ""+n
 			controls.canvas_height.build()
-			canvas.h = n
-			canvas.rebuild()
-			canvas.build()
 		})
+		controls.canvas_height.onBlur = function(){
+		  var h = parseInt(controls.canvas_height.char) || 1
+		  controls.canvas_height.char = h+""
+		  controls.canvas_height.build()
+			canvas.resize(canvas.w, h)
+		}
 	}
 
+  function int_key (f) {
+    return function (key, keyCode) {
+      var n = parseInt(key)
+      ! isNaN(n) && f(n)
+    }
+  }
+
 	return controls
 })()
\ No newline at end of file