refactor how canvas resize fields work to support arrow keys

2 files changed, 77 insertions, 57 deletions

diff --git a/js/ui/controls.js b/js/ui/controls.js
index b1b1eb4..9580f98 100644
--- a/js/ui/controls.js
+++ b/js/ui/controls.js
@@ -232,65 +232,25 @@ var controls = (function(){
       })
     })
   
-    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 < 3) {
-        n = parseInt(controls.canvas_width.char) * 10 + n
-      }
-      controls.canvas_width.char = ""+n
-      controls.canvas_width.build()
-    })
-    controls.canvas_width.onBlur = function(){
-      var w = parseInt(controls.canvas_width.char)
-      if (! w) return;
-      controls.canvas_width.char = w+""
-      controls.canvas_width.build()
-      canvas.resize(w, canvas.h)
-    }
+    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, 10)
 
-    controls.canvas_height.key = int_key(function(n, keyCode){
-      controls.canvas_height.read()
-      if (controls.canvas_height.char.length < 3) {
-        n = parseInt(controls.canvas_height.char) * 10 + n
-      }
-      controls.canvas_height.char = ""+n
-      controls.canvas_height.build()
-    })
-    controls.canvas_height.onBlur = function(){
-      var h = parseInt(controls.canvas_height.char)
-      if (! h) return;
-      controls.canvas_height.char = h+""
-      controls.canvas_height.build()
-      canvas.resize(canvas.w, h)
-    }
-    
+    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, 10)
+
+    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.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)
+        
     add_custom_el.addEventListener("click", function(){
       custom.clone()
     })
 
   }
 
-  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 f76d562..8850aa2 100644
--- a/js/ui/keys.js
+++ b/js/ui/keys.js
@@ -9,7 +9,11 @@ var keys = (function(){
       if (e.altKey) {
         document.body.classList.add("dropper")
       }
-    
+      if (window.focused && focused.raw_key) {
+        focused.raw_key(e)
+        return
+      }
+
       switch (e.keyCode) {
         case 27: // esc
           if (focused) focused.blur()
@@ -77,8 +81,8 @@ var keys = (function(){
 
       if (focused && char) {
         var y = focused.y, x = focused.x
-        focused.key(char, e.keyCode)
-        if (! ('y' in focused && 'x' in focused) ) { return }
+        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])
       }
@@ -89,9 +93,65 @@ var keys = (function(){
         document.body.classList.remove("dropper")
       }
     })
-
   }
   
+  keys.int_key = function (f) {
+    return function (key, keyCode) {
+      var n = parseInt(key)
+      ! isNaN(n) && f(n)
+    }
+  }
+	keys.arrow_key = function (lex, canvas, prop, rebuild_prop, min, max) {
+		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]()
+					break
+				case 40: // down
+					e.preventDefault()
+					canvas[prop] = Math.max(canvas[prop]-1, min)
+					lex.char = "" + canvas[prop]
+					lex.build()
+					canvas[rebuild_prop]()
+					break
+			}
+		}
+	}
+	keys.single_numeral_key = function (lex, canvas, prop, min, max) {
+		return keys.int_key(function(n, keyCode){
+			if (n == 0) n = 10
+			lex.blur()
+			lex.char = ""+n
+			lex.build()
+			canvas[prop] = n
+			canvas.rebuild()
+		})
+	}
+	keys.multi_numeral_key = function (lex, digits){
+		return keys.int_key(function(n, keyCode){
+			lex.read()
+			if (lex.char.length < digits) {
+				n = parseInt(lex.char) * 10 + n
+			}
+			lex.char = ""+n
+			lex.build()
+		})
+	}
+	keys.multi_numeral_blur = function (lex, canvas, prop, min, max){
+		return function(){
+			var n = clamp(parseInt(lex.char), min, max)
+			if (! n) return;
+			lex.char = n+""
+			lex.build()
+			canvas[prop] = n
+			canvas.resize(canvas.w, canvas.h)
+		}
+	}
+  
   return keys
 })()