From b1260ec54779359ac866bd9465788aca18351e2c Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Mon, 18 May 2015 19:06:13 +0200 Subject: refactor how canvas resize fields work to support arrow keys --- js/lex.js | 1 + js/matrix.js | 5 +++- js/ui/controls.js | 66 +++++++++++------------------------------------------ js/ui/keys.js | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++---- 4 files changed, 82 insertions(+), 58 deletions(-) diff --git a/js/lex.js b/js/lex.js index b554d85..5fdf707 100644 --- a/js/lex.js +++ b/js/lex.js @@ -123,4 +123,5 @@ Lex.prototype.key = function(char, keyCode) { this.char = char this.fg = brush.fg this.build() + return true } diff --git a/js/matrix.js b/js/matrix.js index 7327727..ee80381 100644 --- a/js/matrix.js +++ b/js/matrix.js @@ -131,8 +131,11 @@ Matrix.prototype.getCell = function(x,y){ else return null } Matrix.prototype.resize = function(w,h){ + w = w || canvas.w + h = h || canvas.h + console.log("resize to", w, h) var div, row, lex - var f = this.f, old_h = this.h, old_w = this.w + var f = this.f, old_h = this.aa.length, old_w = this.aa[0].length var rapper = this.rapper w = max(w, 1) h = max(h, 1) 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 })() -- cgit v1.2.3-70-g09d2