finally hook up undo

5 files changed, 162 insertions, 87 deletions

diff --git a/js/ui/brush.js b/js/ui/brush.js
index e1d140d..90422b7 100644
--- a/js/ui/brush.js
+++ b/js/ui/brush.js
@@ -43,7 +43,8 @@ var brush = (function(){
           fillColor = brush.bg
           lex.fill(brush)
         }
-        lex.focus()
+        brush.focus(x, y)
+        // lex.focus()
       })
       lex.span.addEventListener('mousemove', function(e){
         e.preventDefault()
@@ -57,7 +58,8 @@ var brush = (function(){
         else {
           lex.fill(brush)
         }
-        lex.focus()
+        brush.focus(x, y)
+        //lex.focus()
       })
     })
     window.addEventListener('mouseup', function(e){
@@ -65,16 +67,35 @@ 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()
+  brush.resize = function(w, h, min, max){
+    this.w = clamp(w, this.min, this.max)
+    this.h = clamp(h, this.min, this.max)
+    // brush.__proto__.resize.call(brush, w, h)
+    // this.w = w
+    // this.h = h
     this.rebuild()
+    //brush.__proto__.rebuild.call(brush, w, h)
+    controls.brush_w.char = ""+this.w
+    controls.brush_w.build()
+    controls.brush_h.char = ""+this.h
+    controls.brush_h.build()
+  }
+  brush.size_add = function(w, h){
+    brush.resize(brush.w + w, brush.h + h)
+  }
+
+  brush.expand = function(i){
+    brush.size_add(i, 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.size_add(-i, -i)
+    // this.expand(-i)
   }
   
   brush.load = function(lex){
@@ -84,6 +105,9 @@ var brush = (function(){
     brush.opacity = 1
   }
 
+  brush.min = 1
+  brush.max = 100
+
   brush.char = " "
   brush.fg = 0
   brush.bg = 1
@@ -95,4 +119,4 @@ var brush = (function(){
   
   return brush
 
-})()
\ No newline at end of file
+})()
diff --git a/js/ui/canvas.js b/js/ui/canvas.js
index 4822527..e241fd1 100644
--- a/js/ui/canvas.js
+++ b/js/ui/canvas.js
@@ -3,15 +3,15 @@ var canvas = current_canvas = (function(){
   var cols = 100
   var rows = 30
 
-  var exports = new Matrix (cols, rows, function(x,y){
+  var canvas = new Matrix (cols, rows, function(x,y){
     var lex = new Lex (x,y)
     lex.build()
     return lex
   })
 
-  exports.bind = function(){
+  canvas.bind = function(){
 
-    exports.forEach(function(lex, x, y){
+    canvas.forEach(function(lex, x, y){
 
       if (lex.bound) return
       lex.bound = true
@@ -27,7 +27,7 @@ var canvas = current_canvas = (function(){
         if (e.altKey) {
           if (e.shiftKey) {
             blit.copy_from(canvas, brush, floor(x-brush.w/2), floor(y-brush.h/2))
-						brush.mask(brush)
+            brush.mask(brush)
             draw.set_last_point(e, point)
           }
           else {
@@ -38,15 +38,17 @@ var canvas = current_canvas = (function(){
           return
         }
         else if (drawing) {
+          undo.new()
           draw.down(e, lex, point)
         }
         else if (selecting) {
           selection.down(e, lex, point)
         }
         else if (filling) {
+          undo.new()
           draw.fill(brush, x, y)
         }
-        lex.focus()
+        canvas.focus(x, y)
       })
 
       lex.span.addEventListener("mousemove", function(e){
@@ -58,50 +60,77 @@ var canvas = current_canvas = (function(){
         else if (selecting) {
           selection.move(e, lex, point)
         }
-        lex.focus()
+        canvas.focus(x, y)
       })
 
     })
 
     if (is_mobile) {
-      exports.rapper.addEventListener('touchstart', function(e){
+      canvas.rapper.addEventListener('touchstart', function(e){
         e.preventDefault()
         var x, y, point, lex
-        x = (e.touches[0].pageX - exports.rapper.offsetTop) / exports.aa[0][0].span.offsetWidth
-        y = (e.touches[0].pageY - exports.rapper.offsetTop) / exports.aa[0][0].span.offsetHeight
-        x = ~~clamp(x, 0, exports.aa[0].length-1)
-        y = ~~clamp(y, 0, exports.aa.length-1)
+        x = (e.touches[0].pageX - canvas.rapper.offsetTop) / canvas.aa[0][0].span.offsetWidth
+        y = (e.touches[0].pageY - canvas.rapper.offsetTop) / canvas.aa[0][0].span.offsetHeight
+        x = ~~clamp(x, 0, canvas.aa[0].length-1)
+        y = ~~clamp(y, 0, canvas.aa.length-1)
         point = [x,y]
-        lex = exports.aa[y][x]
+        lex = canvas.aa[y][x]
         dragging = true
         if (drawing) {
+          undo.new()
           draw.down(e, lex, point)
         }
         else if (filling) {
+          undo.new()
           draw.fill(brush, x, y)
         }
-        lex.focus()
+        canvas.focus(x, y)
       })
-      exports.rapper.addEventListener("touchmove", function(e){
+      canvas.rapper.addEventListener("touchmove", function(e){
         e.preventDefault()
         var x, y, point, lex
-        x = (e.touches[0].pageX - exports.rapper.offsetTop) / exports.aa[0][0].span.offsetWidth
-        y = (e.touches[0].pageY - exports.rapper.offsetTop) / exports.aa[0][0].span.offsetHeight
-        x = ~~clamp(x, 0, exports.aa[0].length-1)
-        y = ~~clamp(y, 0, exports.aa.length-1)
+        x = (e.touches[0].pageX - canvas.rapper.offsetTop) / canvas.aa[0][0].span.offsetWidth
+        y = (e.touches[0].pageY - canvas.rapper.offsetTop) / canvas.aa[0][0].span.offsetHeight
+        x = ~~clamp(x, 0, canvas.aa[0].length-1)
+        y = ~~clamp(y, 0, canvas.aa.length-1)
         point = [x,y]
-        lex = exports.aa[y][x]
+        lex = canvas.aa[y][x]
         if (! dragging) return
         shader_el.innerHTML = point.join(",")
         if (drawing) {
           draw.move(e, lex, point)
         }
-        lex.focus()
+        canvas.focus(x, y)
       })
     }
 
   }
 
-  return exports
+  canvas.min = 1
+  canvas.max = 999
+
+  // canvas.resize(1, 1, true) // wont create undo state
+  canvas.resize = function(w, h, no_undo){
+    var old_w = this.w, old_h = this.h
+    w = this.w = clamp(w, this.min, this.max)
+    h = this.h = clamp(h, this.min, this.max)
+    if (old_w === w && old_h === h) return;
+
+    if (!no_undo){
+      undo.new()
+      undo.save_resize(w, h, old_w, old_h)
+     } 
+
+    canvas.__proto__.resize.call(canvas, w, h)
+    controls.canvas_w.char = "" + w
+    controls.canvas_w.build()
+    controls.canvas_h.char = "" + h
+    controls.canvas_h.build()
+  }
+  canvas.size_add = function(w, h){
+    canvas.resize(canvas.w + w, canvas.h + h)
+  }
+
+  return canvas
 
 })()
diff --git a/js/ui/controls.js b/js/ui/controls.js
index a0a7268..84a9d9b 100644
--- a/js/ui/controls.js
+++ b/js/ui/controls.js
@@ -4,7 +4,7 @@ var controls = (function(){
 
   controls.cross = new Tool (cross_el)
   controls.cross.use = function(){
-		brush.mask = blit.cross
+    brush.mask = blit.cross
     brush.generate()
     drawing = true
     brush.modified = false
@@ -15,7 +15,7 @@ var controls = (function(){
 
   controls.circle = new Tool (circle_el)
   controls.circle.use = function(){
-		brush.mask = blit.circle
+    brush.mask = blit.circle
     brush.generate()
     drawing = true
     brush.modified = false
@@ -26,7 +26,7 @@ var controls = (function(){
   
   controls.square = new Tool (square_el)
   controls.square.use = function(){
-		brush.mask = blit.square
+    brush.mask = blit.square
     brush.generate()
     brush.modified = false
     drawing = true
@@ -56,7 +56,17 @@ var controls = (function(){
     filling = false
     document.body.classList.remove("bucket")
   }
-  
+ 
+  controls.undo = new BlurredTool (undo_el)
+  controls.undo.use = function(){
+    undo.undo()
+  }
+
+  controls.redo = new BlurredTool (redo_el)
+  controls.redo.use = function(){
+    undo.redo()
+  }
+
   controls.clear = new BlurredTool (clear_el)
   controls.clear.use = function(){
     if (confirm("really delete this colorcode?")) {
@@ -208,19 +218,19 @@ var controls = (function(){
 
   //
   
-  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.brush_w = new Lex (brush_w_el)
+  controls.brush_h = new Lex (brush_h_el)
+  controls.canvas_w = new Lex (canvas_w_el)
+  controls.canvas_h = new Lex (canvas_h_el)
 
   // bind  
   
   controls.bind = function(){
     [
-      controls.width,
-      controls.height,
-      controls.canvas_width,
-      controls.canvas_height
+      controls.brush_w,
+      controls.brush_h,
+      controls.canvas_w,
+      controls.canvas_h
     ].forEach(function(lex){
       lex.span.addEventListener('mousedown', function(e){
         lex.focus()
@@ -234,6 +244,8 @@ var controls = (function(){
       controls.text,
       controls.fill,
       controls.select,
+      controls.undo,
+      controls.redo,
       controls.clear,
       controls.grid,
       controls.webcam,
@@ -256,21 +268,21 @@ var controls = (function(){
 				tool.use( localStorage.getItem("ascii.tools." + tool.name) == "true" )
       }
     })
-  
-    controls.width.key = keys.single_numeral_key(controls.width, brush, "w", 1, 10)
-    controls.width.raw_key = keys.arrow_key(controls.width, brush, "w", "rebuild", 1, 100)
 
-    controls.height.key = keys.single_numeral_key(controls.height, brush, "h", 1, 10)
-    controls.height.raw_key = keys.arrow_key(controls.height, brush, "h", "rebuild", 1, 100)
+    controls.brush_w.key = keys.single_numeral_key(controls.brush_w, function(w){ brush.resize(w, brush.h) })
+    controls.brush_w.raw_key = keys.arrow_key(function(w){ brush.size_add(w, 0) })
 
-    controls.canvas_width.raw_key = keys.arrow_key(controls.canvas_width, canvas, "w", "resize", 1, 999)
-    controls.canvas_width.key = keys.multi_numeral_key(controls.canvas_width, 3)
-    controls.canvas_width.onBlur = keys.multi_numeral_blur(controls.canvas_width, canvas, "w", 1, 999)
+    controls.brush_h.key = keys.single_numeral_key(controls.brush_h, function(h){ brush.resize(brush.w, h) })
+    controls.brush_h.raw_key = keys.arrow_key(function(h){ brush.size_add(0, h) })
+    
+    controls.canvas_w.key = keys.multi_numeral_key(controls.canvas_w, 3)
+    controls.canvas_w.onBlur = keys.multi_numeral_blur(controls.canvas_w, function(w){ canvas.resize(w, canvas.h) })
+    controls.canvas_w.raw_key = keys.arrow_key(function(w){ canvas.size_add(w, 0) })
 
-    controls.canvas_height.raw_key = keys.arrow_key(controls.canvas_height, canvas, "h", "resize", 1, 999)
-    controls.canvas_height.key = keys.multi_numeral_key(controls.canvas_height, 3)
-    controls.canvas_height.onBlur = keys.multi_numeral_blur(controls.canvas_height, canvas, "h", 1, 999)
-        
+    controls.canvas_h.key = keys.multi_numeral_key(controls.canvas_h, 3)
+    controls.canvas_h.onBlur = keys.multi_numeral_blur(controls.canvas_h, function(h){ canvas.resize(canvas.w, h) })
+    controls.canvas_h.raw_key = keys.arrow_key(function(h){ canvas.size_add(0, h) })
+    
     add_custom_el.addEventListener("click", function(){
       custom.clone()
     })
diff --git a/js/ui/keys.js b/js/ui/keys.js
index 2ce681e..6dc013f 100644
--- a/js/ui/keys.js
+++ b/js/ui/keys.js
@@ -1,7 +1,6 @@
 var keys = (function(){
 
   var keys = {}
-  var direction = [0,1]
   keys.bind = function(){
     cursor_input.addEventListener('keydown', function(e){
 
@@ -42,9 +41,13 @@ var keys = (function(){
             brush.modified = false
           }
           break
-        case 8:
+        case 8: // backspace
           e.preventDefault()
-          current_canvas.focusLex(focused.y, focused.x - 1)
+          if (current_canvas === canvas)
+            undo.new()
+          current_canvas.focus_add(-1, 0)
+          if (current_canvas === canvas)
+            undo.save_focused_lex()
           focused.char = " "
           focused.build()
           return
@@ -54,19 +57,35 @@ var keys = (function(){
           return
         case 38: // up
           e.preventDefault()
-          current_canvas.focusLex(focused.y - 1, focused.x + 0)
+          current_canvas.focus_add(0, -1)
           break
         case 40: // down
           e.preventDefault()
-          current_canvas.focusLex(focused.y + 1, focused.x + 0)
+          current_canvas.focus_add(0, 1)
           break
         case 37: // left
           e.preventDefault()
-          current_canvas.focusLex(focused.y + 0, focused.x - 1)
+          current_canvas.focus_add(-1, 0)
           break
         case 39: // right
           e.preventDefault()
-          current_canvas.focusLex(focused.y + 0, focused.x + 1)
+          current_canvas.focus_add(1, 0)
+          break
+        // use typical windows and os x shortcuts
+        // undo: ctrl-z or cmd-z
+        // redo: ctrl-y or shift-cmd-z
+        case 89: // y
+          if (!e.ctrlKey && !e.metaKey) break;
+          e.preventDefault();
+          undo.redo();
+          break
+        case 90: // z
+          if (!e.ctrlKey && !e.metaKey) break;
+          e.preventDefault();
+          if (e.shiftKey)
+            undo.redo();
+          else
+            undo.undo(); 
           break
   //      default:
   //        if (focused) { focused.key(undefined, e.keyCode) }
@@ -102,10 +121,13 @@ var keys = (function(){
 
       if (focused && char) {
         var y = focused.y, x = focused.x
+        if (current_canvas === canvas){
+          undo.new()
+          undo.save_focused_lex()
+        }
         var moving = focused.key(char, e.keyCode)
         if ( ! moving || ! ('y' in focused && 'x' in focused) ) { return }
-        // console.log(y, direction[0], x, direction[1])
-        current_canvas.focusLex(y + direction[0], x + direction[1])
+        current_canvas.focus_add(1, 0)
       }
     })
     
@@ -122,35 +144,26 @@ var keys = (function(){
       ! isNaN(n) && f(n)
     }
   }
-  
-  keys.arrow_key = function (lex, canvas, prop, rebuild_prop, min, max) {
+
+  keys.arrow_key = function (fn) {
     return function (e){
       switch (e.keyCode) {
         case 38: // up
           e.preventDefault()
-          canvas[prop] = Math.min(canvas[prop]+1, max)
-          lex.char = "" + canvas[prop]
-          lex.build()
-          canvas[rebuild_prop]()
+          fn(1)
           break
         case 40: // down
           e.preventDefault()
-          canvas[prop] = Math.max(canvas[prop]-1, min)
-          lex.char = "" + canvas[prop]
-          lex.build()
-          canvas[rebuild_prop]()
+          fn(-1)
           break
       }
     }
   }
-  keys.single_numeral_key = function (lex, canvas, prop, min, max) {
+  keys.single_numeral_key = function (lex, fn) {
     return keys.int_key(function(n, keyCode){
       if (n == 0) n = 10
       lex.blur()
-      lex.char = ""+n
-      lex.build()
-      canvas[prop] = n
-      canvas.rebuild()
+      fn(n)
     })
   }
   keys.multi_numeral_key = function (lex, digits){
@@ -163,18 +176,13 @@ var keys = (function(){
       lex.build()
     })
   }
-  keys.multi_numeral_blur = function (lex, canvas, prop, min, max){
+  keys.multi_numeral_blur = function (lex, fn){
     return function(){
       var current = parseInt(lex.char)
-      var n = clamp(current, min, max)
-      if (! n || isNaN(current)) return
-      lex.char = n+""
-      lex.build()
-      canvas[prop] = n
-      canvas.resize(canvas.w, canvas.h)
+      fn(current)
     }
   }
-  
+
   return keys
 })()
 
diff --git a/js/ui/selection.js b/js/ui/selection.js
index fe0c943..a2720cb 100644
--- a/js/ui/selection.js
+++ b/js/ui/selection.js
@@ -121,6 +121,8 @@ var selection = (function(){
       a[1] += dy
       b[0] += dx
       b[1] += dy
+      undo.new()
+      undo.save_rect(a[0], a[1], b[0] - a[0] + 1, b[1] - a[1] + 1)
       blit.copy_to( canvas, selection_canvas, a[0], a[1] )
     }
     if (copying) {