starting to write this stuff the fishbone thing is screwing me up

6 files changed, 188 insertions, 76 deletions

diff --git a/js/app.js b/js/app.js
index 6deab95..65c883b 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,7 +1,8 @@
 
 var dragging = false
-var drawing = true
+var drawing = false
 var erasing = false
+var selecting = false
 var focused
 
 var canvas, tools, palette, controls, brush, mode, current_tool, current_canvas
@@ -35,9 +36,14 @@ function bind () {
 	controls.bind()
 	keys.bind()
 	
-  window.addEventListener('mouseup', function(){
+  window.addEventListener('mouseup', function(e){
     dragging = erasing = false
-		if (current_tool.name != 'shader' && current_tool.name != 'load' && current_tool.name != 'save') { cursor_input.focus() }
+		if (current_tool.name != 'shader' && current_tool.name != 'load' && current_tool.name != 'save') {
+		  cursor_input.focus()
+		}
+		if (selecting) {
+		  selection.up(e)
+		}
   });
   
 	window.addEventListener('mousedown', function(e){
diff --git a/js/draw.js b/js/draw.js
index 09e660b..d6b5d73 100644
--- a/js/draw.js
+++ b/js/draw.js
@@ -1,32 +1,63 @@
 
+var draw = (function(){
 
-function draw (lex, x, y, erasing) {
-	stamp (canvas, brush, x, y, erasing)
-}
+  var last_point = [0,0]
+  
+  function down (e, lex, point) {
+    erasing = (e.which == "3" || e.ctrlKey)
+    if (e.shiftKey) {
+      line (lex, last_point, point, erasing)
+    }
+    else {
+      stamp (canvas, brush, point[0], point[1], erasing)
+    }
+    last_point[0] = point[0]
+    last_point[1] = point[1]
+  }
+  
+  function move (e, lex, point) {
+    line(lex, last_point, point, erasing)
+    last_point[0] = point[0]
+    last_point[1] = point[1]
+  }
+  
+  function point (lex, x, y, erasing) {
+    stamp (canvas, brush, x, y, erasing)
+  }
 
-function line (lex, a, b, erasing) {
-	var len = dist(a[0], a[1], b[0], b[1])
-	var bw = 1
-	var x, y, i;
-	for (var i = 0; i < len; i += bw) {
-		x = lerp(i / len, a[0], b[0])
-		y = lerp(i / len, a[1], b[1])
-		stamp (canvas, brush, x, y, erasing)
-	}
-}
+  function line (lex, a, b, erasing) {
+    var len = dist(a[0], a[1], b[0], b[1])
+    var bw = 1
+    var x, y, i;
+    for (var i = 0; i < len; i += bw) {
+      x = lerp(i / len, a[0], b[0])
+      y = lerp(i / len, a[1], b[1])
+      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 = round( s + x-hh )
-		t = round( t + y-hh )
-		if (lex.opacity > 0 && 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 stamp (canvas, brush, x, y, erasing) {
+    hh = brush.w/2|0
+    brush.forEach(function(lex, s, t){
+      s = round( s + x-hh )
+      t = round( t + y-hh )
+      if (lex.opacity > 0 && 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)
+        }
+      }
+    })
+  }
+
+  var draw = {}
+  draw.down = down
+  draw.move = move
+  draw.stamp = stamp
+  draw.line = line
+  draw.point = point
+  return draw
+
+})()
diff --git a/js/ui/canvas.js b/js/ui/canvas.js
index 7e75ef6..c70b135 100644
--- a/js/ui/canvas.js
+++ b/js/ui/canvas.js
@@ -2,7 +2,6 @@ var canvas = current_canvas = (function(){
 
 	var cols = 80
 	var rows = 24
-  var last_point = [0,0]
 
 	var exports = new Matrix (cols, rows, function(x,y){
 		var lex = new Lex (x,y)
@@ -25,24 +24,20 @@ var canvas = current_canvas = (function(){
 				dragging = true
 				current_canvas = canvas
 				if (drawing) {
-					erasing = (e.which == "3" || e.ctrlKey)
-					if (e.shiftKey) {
-            line(lex, last_point, point, erasing)
-					}
-					else {
-					  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)
 				}
 				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 bd475c1..ecaa875 100644
--- a/js/ui/controls.js
+++ b/js/ui/controls.js
@@ -7,6 +7,7 @@ var controls = (function(){
 		brush.generate = controls.circle.generate
 		brush.generate()
 		drawing = true
+		selection.hide()
 		brush.modified = false
 	}
 	controls.circle.generate = function(){
@@ -27,8 +28,9 @@ var controls = (function(){
 	controls.square.use = function(){
 		brush.generate = controls.square.generate
 		brush.generate()
-		drawing = true
 		brush.modified = false
+		drawing = true
+		selection.hide()
 	}
 	controls.square.generate = function(){
 		var fg = brush.fg, bg = brush.bg
@@ -40,6 +42,15 @@ var controls = (function(){
 		brush.generate = controls.text.generate
 		brush.generate()
 		drawing = false
+		selection.hide()
+	}
+	controls.text.generate = function(){
+	}
+
+	controls.select = new Tool (select_el)
+	controls.select.use = function(){
+		drawing = false
+		selection.show()
 	}
 	controls.text.generate = function(){
 	}
@@ -54,40 +65,41 @@ var controls = (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"		
-	}
+	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(){
@@ -119,6 +131,7 @@ var controls = (function(){
 			controls.square,
 			controls.circle,
 			controls.text,
+			controls.select,
 			controls.clear,
 			controls.grid,
 			controls.shader,
@@ -160,12 +173,6 @@ var controls = (function(){
 		  controls.canvas_width.build()
 			canvas.resize(w, canvas.h)
 		}
-		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)
-		}
 
 		controls.canvas_height.key = int_key(function(n, keyCode){
 			controls.canvas_height.read()
@@ -176,6 +183,12 @@ var controls = (function(){
 			controls.canvas_height.build()
 			canvas.resize(canvas.w, n)
 		})
+		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) {
diff --git a/js/ui/keys.js b/js/ui/keys.js
index 0070dff..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,7 +69,7 @@ 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
diff --git a/js/ui/selection.js b/js/ui/selection.js
index cbeb051..f1e7e5e 100644
--- a/js/ui/selection.js
+++ b/js/ui/selection.js
@@ -1,6 +1,8 @@
 var selection = (function(){
 
-	var selection = new Matrix (1, 1, function(x,y){
+  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
@@ -15,7 +17,72 @@ var selection = (function(){
   // - 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 corner = [-1, -1]
+  var dimensions = [0, 0]
+  
+  function contains (point) {
+    var contains_x = corner[0] < point[0] && point[0] < corner[0] + dimensions[0]
+    var contains_y = corner[1] < point[1] && point[1] < corner[1] + dimensions[1]
+    return (contains_x && contains_y)
+  }
+  function reposition () {
+    var top_left = canvas.aa[corner[1]][corner[0]].span
+    var left = top_left.offsetLeft
+    var top = top_left.offsetTop
+    var width = top_left.offsetWidth
+    var height = top_left.offsetHeight
+  }
+  function down (e, lex, point){
+    if (contains(point)) {
+      copying = false
+      moving = true
+      creating = false
+    }
+    else {
+      copying = false
+      moving = false
+      creating = true
+      corner[0] = point[0]
+      corner[1] = point[1]
+      dimensions[0] = 1
+      dimensions[1] = 1
+    }
+    show()
+    reposition()
+  }
+  function move (e, lex, point){
+    if (creating) {
+      var x = point[0] - corner[0]
+      var y = point[1] - corner[1]
+      if (x < 0) {
+        corner[0] = point[0]
+      }
+      if (y < 0) {
+        corner[0] = point[0]
+      }
+      dimensions[0] = abs(x)
+      reposition()
+    }
+    else if (moving) {
+    }
+  }
+  function up (e) {
+  }
+  
+  function show () {
+    selecting = true
+  }
+  function hide () {
+    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
 
 })()