making a selection and dragging it

4 files changed, 96 insertions, 35 deletions

diff --git a/css/sally.css b/css/sally.css
index 61f544e..f3356df 100644
--- a/css/sally.css
+++ b/css/sally.css
@@ -60,8 +60,19 @@ body { transition: 0.1s linear; }
 textarea { font-size:12pt; width: 45%; height: 300px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; outline: 0; border: 1px solid #333; background:#010;}
 #import_rapper { display: none; }
 #cursor_input { position: absolute; top: 0; right: 0; width:30px; opacity: 0; }
-
-
+.selector_el {
+	border: 1px dashed #fff !important;
+	padding-top: 1px;
+	position:absolute;
+	top:-999px;left:-999px;
+	pointer-events: none;
+}
+.selector_el.dragging {
+	color: #0f0;
+}
+.selector_el.creating div {
+	display: none;
+}
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   #nvgovy{white-space:pre;}
 }
diff --git a/js/app.js b/js/app.js
index 65c883b..6c234c0 100644
--- a/js/app.js
+++ b/js/app.js
@@ -28,6 +28,7 @@ function build () {
 	brush.build()
 
 	controls.grid.use()
+	controls.select.use()
 }
 function bind () {
 	canvas.bind()
diff --git a/js/draw.js b/js/draw.js
index d6b5d73..8a12467 100644
--- a/js/draw.js
+++ b/js/draw.js
@@ -29,7 +29,7 @@ var draw = (function(){
     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) {
+    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)
diff --git a/js/ui/selection.js b/js/ui/selection.js
index f1e7e5e..43b1a75 100644
--- a/js/ui/selection.js
+++ b/js/ui/selection.js
@@ -7,6 +7,11 @@ var selection = (function(){
 		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
@@ -17,56 +22,100 @@ 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]
+  var a = [-1, -1]
+  var b = [0, 0]
+  var c = [0, 0]
+  var d = [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]
+  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 () {
-    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 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(point)) {
-      copying = false
-      moving = true
-      creating = false
-    }
-    else {
+    if ( ! contains(a,b,point) ) {
       copying = false
       moving = false
       creating = true
-      corner[0] = point[0]
-      corner[1] = point[1]
-      dimensions[0] = 1
-      dimensions[1] = 1
+      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()
-    reposition()
+		selector_el.classList.remove("dragging")
   }
   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()
+      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))
+  		// copy canvas here..
+      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
+  	}
+  	if (copying) {
+  	}
+  	creating = moving = copying = false
+		selector_el.classList.remove("dragging")
   }
   
   function show () {