merge

6 files changed, 262 insertions, 68 deletions

diff --git a/js/ui/brush.js b/js/ui/brush.js
index a055a97..50f6e07 100644
--- a/js/ui/brush.js
+++ b/js/ui/brush.js
@@ -7,20 +7,6 @@ var brush = (function(){
 	})
 
 	brush.modified = false
-	
-	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.bind = function(){
 
@@ -70,8 +56,22 @@ var brush = (function(){
 		})
 	}
 
+  brush.expand = function(i){
+    var w = this.w = clamp(this.w+i, 1, 9), h = this.h = clamp(this.h+i, 1, 9)
+    controls.width.char = ""+w
+    controls.width.build()
+    controls.height.char = ""+h
+    controls.height.build()
+    this.rebuild()
+  }
+  brush.contract = function(i){
+    this.expand(-i)
+  }
+
+	brush.char = " "
 	brush.fg = 0
 	brush.bg = 1
+	brush.opacity = 1
 	
 	return brush
 
diff --git a/js/ui/canvas.js b/js/ui/canvas.js
index 4b595a5..206cbee 100644
--- a/js/ui/canvas.js
+++ b/js/ui/canvas.js
@@ -1,4 +1,4 @@
-var canvas = (function(){
+var canvas = current_canvas = (function(){
 
 	var cols = 80
 	var rows = 24
@@ -11,8 +11,6 @@ var canvas = (function(){
 
   exports.bind = function(){
 
-		var last_point = [0,0]
-
   	exports.forEach(function(lex, x, y){
 
   		if (lex.bound) return
@@ -26,19 +24,23 @@ var canvas = (function(){
 				dragging = true
 				current_canvas = canvas
 				if (drawing) {
-					erasing = (e.which == "3" || e.ctrlKey)
-					draw(lex, x, y, erasing)
-					last_point[0] = x
-					last_point[1] = y
+					draw.down(e, lex, point)
+				}
+				else if (selecting) {
+					selection.down(e, lex, point)
+				}
+				else if (filling) {
+					draw.fill(brush, x, y)
 				}
 				lex.focus()
 			})
-			lex.span.addEventListener("mousemove", function(){
+			lex.span.addEventListener("mousemove", function(e){
 				if (! dragging) return
 				if (drawing) {
-					line(lex, last_point, point, erasing)
-					last_point[0] = x
-					last_point[1] = y
+          draw.move(e, lex, point)
+				}
+				else if (selecting) {
+					selection.move(e, lex, point)
 				}
 				lex.focus()
 			})
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
diff --git a/js/ui/keys.js b/js/ui/keys.js
index 7711e9d..1915333 100644
--- a/js/ui/keys.js
+++ b/js/ui/keys.js
@@ -5,7 +5,7 @@ var keys = (function(){
   keys.bind = function(){
     cursor_input.addEventListener('keydown', function(e){
 
-      console.log("keycode:", e.keyCode)
+      // console.log("keycode:", e.keyCode)
     
       switch (e.keyCode) {
         case 27: // esc
@@ -69,12 +69,14 @@ var keys = (function(){
       var char = cursor_input.value
       cursor_input.value = ""
 
-      console.log("input:", char)
+      // console.log("input:", char)
 
       if (focused && char) {
         var y = focused.y, x = focused.x
         focused.key(char, e.keyCode)
-        current_canvas.focusLex(y + direction[0], focused.x + direction[1])
+        if (! ('y' in focused && 'x' in focused) ) { return }
+        // console.log(y, direction[0], x, direction[1])
+        current_canvas.focusLex(y + direction[0], x + direction[1])
       }
     })
   }
diff --git a/js/ui/palette.js b/js/ui/palette.js
index ce8078e..54211fb 100644
--- a/js/ui/palette.js
+++ b/js/ui/palette.js
@@ -2,7 +2,7 @@ var palette = (function(){
 
 	var palette = new Matrix (32, 2, function(x,y){
 		var lex = new Lex (x,y)
-		lex.bg = all_hue(x>>1)
+		lex.bg = all_inv_hue(x>>1)
 		lex.build()
 		return lex
 	})
diff --git a/js/ui/selection.js b/js/ui/selection.js
new file mode 100644
index 0000000..cbd15bf
--- /dev/null
+++ b/js/ui/selection.js
@@ -0,0 +1,148 @@
+var selection = (function(){
+
+  var creating = false, moving = false, copying = false
+  
+	var selection_canvas = new Matrix (1, 1, function(x,y){
+		var lex = new Lex (x,y)
+		lex.build()
+		return lex
+	})
+	
+	var selector_el = document.createElement("div")
+	selector_el.className = "selector_el"
+	selection_canvas.append(selector_el)
+	document.body.appendChild(selector_el)
+
+  // in selection mode..
+  // - we start by clicking the canvas. this positions the selection, and copies
+  //   the character
+  // - then we drag down and to the right. this resizes the selection and pushes new
+  //   rows and columns. each of these copies the character underneath.
+  // - on mouseup, the selection is locked. then..
+  // - drag the selection to move it -- this "cuts" it and leaves a blank space on the canvas.
+  // - shift-drag the selection to copy it
+  
+  var a = [0, 0]
+  var b = [0, 0]
+  var c = [0, 0]
+  var d = [0, 0]
+  
+  function reset () {
+  	a[0] = a[1] = b[0] = b[1] = 0
+  }
+  function left (a,b) { return min(a[0],b[0]) }
+  function top (a,b) { return min(a[1],b[1]) }
+  function right (a,b) { return max(a[0],b[0]) }
+  function bottom (a,b) { return max(a[1],b[1]) }
+  function width (a,b) { return abs(a[0]-b[0])+1 }
+  function height (a,b) { return abs(a[1]-b[1])+1 }
+  function mag_x (a,b) { return a[0]-b[0] }
+  function mag_y (a,b) { return a[1]-b[1] }
+  function orient (a,b) {
+  	var l = left(a,b), m = top(a,b), n = right(a,b), o = bottom(a,b)
+  	a[0] = l ; a[1] = m ; b[0] = n ; b[1] = o
+  }
+  
+  function contains (a,b,point) {
+    var contains_x = a[0] <= point[0] && point[0] <= b[0]
+    var contains_y = a[1] <= point[1] && point[1] <= b[1]
+    return (contains_x && contains_y)
+  }
+  function reposition (a,b) {
+    var cell = canvas.aa[top(a,b)][left(a,b)].span
+    var cell_left = cell.offsetLeft
+    var cell_top = cell.offsetTop
+    var cell_width = 9
+    var cell_height = 17
+    var w = width(a,b)
+    var h = height(a,b)
+    selector_el.style.top = (cell_top-1) + "px"
+    selector_el.style.left = (cell_left-2) + "px"
+    selector_el.style.width = (cell_width*w+1) + "px"
+    selector_el.style.height = (cell_height*h+1) + "px"
+  }
+  function down (e, lex, point){
+    if ( ! contains(a,b,point) ) {
+      copying = false
+      moving = false
+      creating = true
+      a[0] = point[0]
+      a[1] = point[1]
+      b[0] = point[0]
+      b[1] = point[1]
+			reposition(a,b)
+      selector_el.classList.add("creating")
+		} else {
+      copying = false
+      moving = true
+      creating = false
+      c[0] = point[0]
+      c[1] = point[1]
+      d[0] = point[0]
+      d[1] = point[1]
+    }
+    show()
+		selector_el.classList.remove("dragging")
+  }
+  function move (e, lex, point){
+    if (creating) {
+      b[0] = point[0]
+      b[1] = point[1]
+      reposition(a,b)
+    }
+    else if (moving) {
+      d[0] = point[0]
+      d[1] = point[1]
+      var dx = - clamp( mag_x(c,d), b[0] - canvas.w + 1, a[0] )
+      var dy = - clamp( mag_y(c,d), b[1] - canvas.h + 1, a[1] )
+      reposition( [ a[0] + dx, a[1] + dy ], [ b[0] + dx, b[1] + dy ])
+    }
+    else if (copying) {
+    }
+  }
+  function up (e) {
+  	if (creating) {
+  		orient(a,b)
+  		selection_canvas.resize(width(a,b), height(a,b))
+  		blit.copy_from( canvas, selection_canvas, a[0], a[1] )
+  		selection_canvas.build()
+      selector_el.classList.remove("creating")
+  	}
+  	if (moving) {
+      var dx = - clamp( mag_x(c,d), b[0] - canvas.w + 1, a[0] )
+      var dy = - clamp( mag_y(c,d), b[1] - canvas.h + 1, a[1] )
+      a[0] += dx
+      a[1] += dy
+      b[0] += dx
+      b[1] += dy
+  		blit.copy_to( canvas, selection_canvas, a[0], a[1] )
+  	}
+  	if (copying) {
+  	}
+  	creating = moving = copying = false
+		selector_el.classList.remove("dragging")
+  }
+  
+  function show () {
+    selecting = true
+    controls.grid.show()
+  }
+  function hide () {
+  	reset()
+    selector_el.style.top = "-9999px"
+    selector_el.style.left = "-9999px"
+    selector_el.style.width = "0px"
+    selector_el.style.height = "0px"
+    selecting = false
+  }
+  
+  var selection = {}
+  selection.down = down
+  selection.move = move
+  selection.up = up
+  selection.canvas = selection_canvas
+  selection.show = show
+  selection.hide = hide
+	return selection
+
+})()