splitting up ui code

10 files changed, 287 insertions, 209 deletions

diff --git a/index.html b/index.html
index bdc8747..f56f77d 100644
--- a/index.html
+++ b/index.html
@@ -57,10 +57,17 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset
 */
 </script>
 <script src="js/util.js"></script>
+<script src="js/color.js"></script>
+
 <script src="js/lex.js"></script>
 <script src="js/matrix.js"></script>
 <script src="js/tool.js"></script>
 <script src="js/shader.js"></script>
-<script src="js/color.js"></script>
 <script src="js/draw.js"></script>
+
+<script src="js/ui/brush.js"></script>
+<script src="js/ui/canvas.js"></script>
+<script src="js/ui/controls.js"></script>
+<script src="js/ui/palette.js"></script>
+
 <script src="js/app.js"></script>
diff --git a/js/app.js b/js/app.js
index 70f46f1..7bc392b 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,122 +1,24 @@
-var contentType = 'text/plain;charset=utf-8'
 
-var cols = 80
-var rows = 24
 var dragging = false
 var drawing = true
 var erasing = false
 var focused
 
-var canvas, tools, palette, brush, mode, current_tool
+var canvas, tools, palette, controls, brush, mode, current_tool
 
 function init () {
   build()
   bind()
 }
 function build () {
-	canvas = new Matrix (cols, rows, function(x,y){
-		var lex = new Lex (x,y)
-//		lex.build()
-		return lex
-	})
 	shader.init()
 	shader.run(canvas)
 	shader.animate()
 
-	brush = new Matrix (5, 5, function(x,y){
-		var lex = new Lex (x,y)
-		lex.build()
-		return lex
-	})
-	palette = new Matrix (32, 2, function(x,y){
-		var lex = new Lex (x,y)
-		lex.bg = colors[color_hue_order[y>>1]]
-		lex.build()
-		console.log(lex.bg, lex.css())
-		return lex
-	})
 	canvas.append(canvas_rapper)
 	brush.append(brush_rapper)
 	palette.append(palette_rapper)
 	
-	controls.circle = new Tool (circle_el)
-	controls.circle.use = function(){
-		brush.generate = controls.circle.generate
-		brush.generate()
-		drawing = true
-	}
-	controls.circle.generate = function(){
-		var fg = brush.fg, bg = brush.bg
-		var hw = brush.w/2|0, hh = brush.h/2|0
-		brush.forEach(function(lex,x,y) {
-			var len = Math.sqrt(Math.pow(x-hw,2)+Math.pow(y-hh,2))
-			if (len > Math.abs(hw)) {
-				lex.clear()
-			}
-			else {
-				lex.fill(fg,bg)
-			}
-		})
-	}
-	
-	controls.square = new Tool (square_el)
-	controls.square.use = function(){
-		brush.generate = controls.square.generate
-		brush.generate()
-		drawing = true
-	}
-	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
-	}
-	controls.text.generate = function(){
-	}
-
-	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.shader.blur = function(){
-		Tool.prototype.blur.call(this)
-		shader_textarea.style.display = "none"		
-	}
-	shader_textarea.value = demo_shader.innerHTML
-	shader_textarea.addEventListener("input", function(){
-		var fn = shader.build(shader_textarea.value)
-		fn && shader.run(canvas)
-	})
-	
-	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"
-	}
-	
-	controls.width = new Lex (width_el)
-	controls.height = new Lex (height_el)
-	controls.canvas_width = new Lex (canvas_width_el)
-	controls.canvas_height = new Lex (canvas_height_el)
-	
   controls.circle.focus()
 //  controls.shader.focus()
 
@@ -125,99 +27,16 @@ function build () {
 	brush.build()
 }
 function bind () {
-  canvas.forEach(function(lex, x, y){
-  	lex.span.addEventListener('contextmenu', function(e){
-  	  e.preventDefault()
-    })
-  	lex.span.addEventListener('mousedown', function(e){
-      e.preventDefault()
-			dragging = true
-      if (drawing) {
-				erasing = (e.which == "3" || e.ctrlKey)
-				draw(lex, x, y, erasing)
-			}
-			lex.focus()
-    })
-    lex.span.addEventListener("mousemove", function(){
-			if (! dragging) return
-			if (drawing) {
-				draw(lex, x, y, erasing)
-			}
-			lex.focus()
-    })
-  })
-  palette.forEach(function(lex, x, y){
-  	lex.span.addEventListener('mousedown', function(e){
-      e.preventDefault()
-      dragging = true
-      erasing = e.which == "3"
-			brush.fg = lex.fg
-			brush.bg = lex.bg
-			brush.generate()
-    })
-	})
-  brush.forEach(function(lex, x, y){
-  	lex.span.addEventListener('mousedown', function(e){
-      e.preventDefault()
-      dragging = true
-// 			lex.fill(lex.fg, lex.bg)
-    })
-	})
+	canvas.bind()
+	palette.bind()
+	brush.bind()
+	controls.bind()
+	
   window.addEventListener('mouseup', function(){
     dragging = erasing = false
 		if (current_tool.name != 'shader') { cursor_input.focus() }
   });
   
-	[controls.width, controls.height, controls.canvas_width, controls.canvas_height].forEach(function(lex){
-  	lex.span.addEventListener('mousedown', function(e){
-			lex.focus()
-		})
-	});
-	
-	[controls.square, controls.circle, controls.text, controls.clear, controls.grid, controls.shader, controls.animate].forEach(function(tool){
-  	tool.span.addEventListener('mousedown', function(e){
-			tool.focus()
-		})
-	})
-
-	controls.width.key = int_key(function(n, keyCode){
-		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.char = ""+n
-		controls.height.build()
-		brush.h = n
-		brush.rebuild()
-	})
-
-	controls.canvas_width.key = int_key(function(n, keyCode){
-		controls.canvas_width.read()
-		if (controls.canvas_width.char.length == 1) {
-			n = parseInt(controls.canvas_width.char) * 10 + n
-		}
-		controls.canvas_width.char = ""+n
-		controls.canvas_width.build()
-		canvas.w = n
-		canvas.rebuild()
-		canvas.build()
-	})
-	controls.canvas_height.key = int_key(function(n, keyCode){
-		controls.canvas_height.read()
-		if (controls.canvas_height.char.length == 1) {
-			n = parseInt(controls.canvas_height.char) * 10 + n
-		}
-		controls.canvas_height.char = ""+n
-		controls.canvas_height.build()
-		canvas.h = n
-		canvas.rebuild()
-		canvas.build()
-	})
-
 	window.addEventListener('mousedown', function(e){
 		if (current_tool.name == "shader") { return }
 		cursor_input.focus()
@@ -258,6 +77,17 @@ function bind () {
 		}
 	})
 
+	var contentType = 'text/plain;charset=utf-8'
+	document.body.addEventListener('copy', function (e) {
+		if (e.clipboardData) {
+			e.preventDefault();
+			e.clipboardData.setData(contentType, canvas.ascii());
+		}
+		if (window.clipboardData) {
+			e.returnValue = false;
+			window.clipboardData.setData(contentType, canvas.ascii());
+		}
+	}, false);
 
 	document.addEventListener('DOMContentLoaded', function(){
 		if (current_tool.name != 'shader') { cursor_input.focus() }
@@ -273,18 +103,4 @@ function int_key (f) {
 	}
 }
 
-function clamp (n,a,b){ return n < a ? a : n < b ? n : b }
-function mod (i,n) { return i - n * Math.floor(i / n) }
-
-document.body.addEventListener('copy', function (e) {
-  if (e.clipboardData) {
-    e.preventDefault();
-    e.clipboardData.setData(contentType, canvas.ascii());
-  }
-  if (window.clipboardData) {
-    e.returnValue = false;
-    window.clipboardData.setData(contentType, canvas.ascii());
-  }
-}, false);
-
 init()
diff --git a/js/color.js b/js/color.js
index f469a8f..14df600 100644
--- a/js/color.js
+++ b/js/color.js
@@ -6,7 +6,7 @@ var color_hue_order = ("black dark-blue purple dark-red red orange " +
 var gray_names = ("black dark-gray light-gray white").split(" ")
 var red_names = ("black dark-red red orange yellow white cyan").split(" ")
 var letters = "abcdefghijklmnop";
-var colors = {}, controls = {}
+var colors = {}
 color_names.forEach(function(name, i){ colors[name] = i })
 
 
diff --git a/js/draw.js b/js/draw.js
index 6ccdda7..c72ca08 100644
--- a/js/draw.js
+++ b/js/draw.js
@@ -1,6 +1,9 @@
+
+
 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){
diff --git a/js/lex.js b/js/lex.js
index d61f561..a35829f 100644
--- a/js/lex.js
+++ b/js/lex.js
@@ -2,8 +2,8 @@ direction = [1,0]
 
 function Lex (x,y) {
 	if (typeof x == "number") {
-		this.x = x
 		this.y = y
+		this.x = x
 		this.span = document.createElement("span")
 	}
 	else {
@@ -53,6 +53,7 @@ Lex.prototype.erase = function (lex){
 Lex.prototype.fill = function(fg,bg){
 	this.fg = fg
 	this.bg = bg
+	this.opacity = 1
 	this.build()
 }
 Lex.prototype.eq = function(lex){
@@ -62,6 +63,7 @@ Lex.prototype.clear = function(){
 	this.bg = 1
 	this.fg = 0
 	this.char = " "
+	this.opacity = 0
 	this.build()
 }
 Lex.prototype.isClear = function(){
diff --git a/js/matrix.js b/js/matrix.js
index 8975f15..87cb0fe 100644
--- a/js/matrix.js
+++ b/js/matrix.js
@@ -7,10 +7,10 @@ function Matrix (w,h,f){
 Matrix.prototype.initialize = function(){
 	var w = this.w || 1, h = this.h || 1, f = this.f
 	var aa = new Array (h)
-	for (var i = 0; i < h; i++) {
-		aa[i] = new Array (w)
-		for (var j = 0; j < w; j++) {
-			aa[i][j] = f(i,j)
+	for (var y = 0; y < h; y++) {
+		aa[y] = new Array (w)
+		for (var x = 0; x < w; x++) {
+			aa[y][x] = f(x,y)
 		}
 	}
 	this.aa = aa
@@ -19,8 +19,10 @@ Matrix.prototype.rebuild = function (){
 	this.demolish()
 	this.initialize()
 	this.append()
+	this.bind()
 	this.generate && this.generate()
 }
+Matrix.prototype.bind = function () {}
 Matrix.prototype.demolish = function (){
 	this.forEach(function(lex){
 		lex.demolish()
@@ -40,7 +42,7 @@ Matrix.prototype.forEach = function(f){
 		})
 	})
 }
-Matrix.prototype.focusLex = function(x,y){
+Matrix.prototype.focusLex = function(y,x){
 	this.aa[mod(y,this.h)][mod(x,this.w)].focus()
 }
 Matrix.prototype.clear = function(){
@@ -70,6 +72,17 @@ Matrix.prototype.append = function(rapper){
 		rapper.appendChild( div )
 	})
 }
+Matrix.prototype.region = function(w,h,x,y) {
+	w = w || 1
+	h = h || 1
+	x = x || 0
+	y = y || 0
+	var parent = this
+	var mat = new Matrix(w, h, function(x,y){
+		return parent.aa[y][x]
+	})
+	mat.f = this.f
+}
 Matrix.prototype.ascii = function () {
   var lines = this.aa.map(function(row, y){
     var last, line = ""
@@ -83,6 +96,7 @@ Matrix.prototype.ascii = function () {
 				last = lex
 			}
 		})
+		if (last && ! last.isClear()) { line += "\\x03" }
     return line.replace(/\s+$/,"")
 	}).filter(function(line){ return line.length > 0 })
   var txt = '/exec -out printf "' + lines.join("\\n") + '"\n'
diff --git a/js/ui/brush.js b/js/ui/brush.js
new file mode 100644
index 0000000..1b01081
--- /dev/null
+++ b/js/ui/brush.js
@@ -0,0 +1,27 @@
+var brush = (function(){
+	var brush = new Matrix (5, 5, function(x,y){
+		var lex = new Lex (x,y)
+		lex.build()
+		return lex
+	})
+	
+	brush.bind = function(){
+		brush.forEach(function(lex, x, y){
+  		if (lex.bound) return
+  		lex.bound = true
+
+			lex.span.addEventListener('mousedown', function(e){
+				e.preventDefault()
+				dragging = true
+	// 			lex.fill(lex.fg, lex.bg)
+			})
+
+		})
+	}
+	
+	brush.fg = 0
+	brush.bg = 1
+	
+	return brush
+
+})()
\ No newline at end of file
diff --git a/js/ui/canvas.js b/js/ui/canvas.js
new file mode 100644
index 0000000..7e85fcf
--- /dev/null
+++ b/js/ui/canvas.js
@@ -0,0 +1,42 @@
+var canvas = (function(){
+
+	var cols = 80
+	var rows = 24
+
+	var exports = new Matrix (cols, rows, function(x,y){
+		var lex = new Lex (x,y)
+//		lex.build()
+		return lex
+	})
+
+  exports.bind = function(){
+  	exports.forEach(function(lex, x, y){
+  		if (lex.bound) return
+  		lex.bound = true
+
+			lex.span.addEventListener('contextmenu', function(e){
+				e.preventDefault()
+			})
+			lex.span.addEventListener('mousedown', function(e){
+				e.preventDefault()
+				dragging = true
+				if (drawing) {
+					erasing = (e.which == "3" || e.ctrlKey)
+					draw(lex, x, y, erasing)
+				}
+				lex.focus()
+			})
+			lex.span.addEventListener("mousemove", function(){
+				if (! dragging) return
+				if (drawing) {
+					draw(lex, x, y, erasing)
+				}
+				lex.focus()
+			})
+
+		})
+	}
+
+	return exports
+
+})()
diff --git a/js/ui/controls.js b/js/ui/controls.js
new file mode 100644
index 0000000..6f56727
--- /dev/null
+++ b/js/ui/controls.js
@@ -0,0 +1,136 @@
+var controls = (function(){
+
+	var controls = {}
+	controls.circle = new Tool (circle_el)
+	controls.circle.use = function(){
+		brush.generate = controls.circle.generate
+		brush.generate()
+		drawing = true
+	}
+	controls.circle.generate = function(){
+		var fg = brush.fg, bg = brush.bg
+		var hw = brush.w/2|0, hh = brush.h/2|0
+		brush.forEach(function(lex,x,y) {
+			var len = Math.sqrt(Math.pow(x-hw,2)+Math.pow(y-hh,2))
+			if (len > Math.abs(hw)) {
+				lex.clear()
+			}
+			else {
+				lex.fill(fg,bg)
+			}
+		})
+	}
+	
+	controls.square = new Tool (square_el)
+	controls.square.use = function(){
+		brush.generate = controls.square.generate
+		brush.generate()
+		drawing = true
+	}
+	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
+	}
+	controls.text.generate = function(){
+	}
+
+	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.shader.blur = function(){
+		Tool.prototype.blur.call(this)
+		shader_textarea.style.display = "none"		
+	}
+	shader_textarea.value = demo_shader.innerHTML
+	shader_textarea.addEventListener("input", function(){
+		var fn = shader.build(shader_textarea.value)
+		fn && shader.run(canvas)
+	})
+	
+	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"
+	}
+	
+	controls.width = new Lex (width_el)
+	controls.height = new Lex (height_el)
+	controls.canvas_width = new Lex (canvas_width_el)
+	controls.canvas_height = new Lex (canvas_height_el)
+	//
+	
+	controls.bind = function(){
+		[controls.width, controls.height, controls.canvas_width, controls.canvas_height].forEach(function(lex){
+			lex.span.addEventListener('mousedown', function(e){
+				lex.focus()
+			})
+		});
+		
+		[controls.square, controls.circle, controls.text, controls.clear, controls.grid, controls.shader, controls.animate].forEach(function(tool){
+			tool.span.addEventListener('mousedown', function(e){
+				tool.focus()
+			})
+		})
+	
+		controls.width.key = int_key(function(n, keyCode){
+			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.char = ""+n
+			controls.height.build()
+			brush.h = n
+			brush.rebuild()
+		})
+	
+		controls.canvas_width.key = int_key(function(n, keyCode){
+			controls.canvas_width.read()
+			if (controls.canvas_width.char.length == 1) {
+				n = parseInt(controls.canvas_width.char) * 10 + n
+			}
+			controls.canvas_width.char = ""+n
+			controls.canvas_width.build()
+			canvas.w = n
+			canvas.rebuild()
+			canvas.build()
+		})
+		controls.canvas_height.key = int_key(function(n, keyCode){
+			controls.canvas_height.read()
+			if (controls.canvas_height.char.length == 1) {
+				n = parseInt(controls.canvas_height.char) * 10 + n
+			}
+			controls.canvas_height.char = ""+n
+			controls.canvas_height.build()
+			canvas.h = n
+			canvas.rebuild()
+			canvas.build()
+		})
+	}
+
+	return controls
+})()
\ No newline at end of file
diff --git a/js/ui/palette.js b/js/ui/palette.js
new file mode 100644
index 0000000..605c08b
--- /dev/null
+++ b/js/ui/palette.js
@@ -0,0 +1,31 @@
+var palette = (function(){
+console.log("hi")
+	var palette = new Matrix (32, 2, function(x,y){
+		var lex = new Lex (x,y)
+		lex.bg = hue(x>>1)
+		lex.build()
+		console.log(lex.bg, lex.css())
+		return lex
+	})
+
+	palette.bind = function(){
+		palette.forEach(function(lex, x, y){
+  		if (lex.bound) return
+  		lex.bound = true
+
+			lex.span.addEventListener('mousedown', function(e){
+				e.preventDefault()
+				dragging = true
+				erasing = e.which == "3"
+				brush.fg = lex.fg
+				brush.bg = lex.bg
+				brush.generate()
+			})
+
+		})
+	}
+	
+	return palette
+
+})()
+