diff options
Diffstat (limited to 'js/ui')
| -rw-r--r-- | js/ui/brush.js | 14 | ||||
| -rw-r--r-- | js/ui/canvas.js | 20 | ||||
| -rw-r--r-- | js/ui/controls.js | 74 | ||||
| -rw-r--r-- | js/ui/keys.js | 16 | ||||
| -rw-r--r-- | js/ui/palette.js | 61 |
5 files changed, 99 insertions, 86 deletions
diff --git a/js/ui/brush.js b/js/ui/brush.js index 730cfc0..53c0e46 100644 --- a/js/ui/brush.js +++ b/js/ui/brush.js @@ -32,8 +32,8 @@ var brush = (function(){ lex.erase() } else { - fillColor = brush.bg - lex.fill(brush.fg, brush.bg) + fillColor = brush.bg + lex.fill(brush) } lex.focus() }) @@ -47,7 +47,7 @@ var brush = (function(){ lex.erase() } else { - lex.fill(brush.fg, brush.bg) + lex.fill(brush) } lex.focus() }) @@ -70,10 +70,10 @@ var brush = (function(){ } brush.assign = function(lex){ - brush.char = lex.char - brush.fg = lex.fg - brush.bg = lex.bg - brush.opacity = 1 + brush.char = lex.char + brush.fg = lex.fg + brush.bg = lex.bg + brush.opacity = 1 } brush.char = " " diff --git a/js/ui/canvas.js b/js/ui/canvas.js index 059b24c..75131c1 100644 --- a/js/ui/canvas.js +++ b/js/ui/canvas.js @@ -24,16 +24,16 @@ var canvas = current_canvas = (function(){ dragging = true current_canvas = canvas if (e.altKey) { - if (e.shiftKey) { - blit.copy_from(canvas, brush, floor(x-brush.w/2), floor(y-brush.h/2)) - draw.set_last_point(e, point) - } - else { - brush.assign(lex) - brush.generate() - dragging = false - } - return + if (e.shiftKey) { + blit.copy_from(canvas, brush, floor(x-brush.w/2), floor(y-brush.h/2)) + draw.set_last_point(e, point) + } + else { + brush.assign(lex) + brush.generate() + dragging = false + } + return } else if (drawing) { draw.down(e, lex, point) diff --git a/js/ui/controls.js b/js/ui/controls.js index 734472d..1a8011c 100644 --- a/js/ui/controls.js +++ b/js/ui/controls.js @@ -7,18 +7,14 @@ var controls = (function(){ brush.generate = controls.cross.generate brush.generate() drawing = true - filling = false brush.modified = false } controls.cross.generate = function(){ - brush.forEach(function(lex,x,y) { - if ((x+y)%2) { - lex.clear() - } - else { - lex.assign(brush) - } - }) + brush.fill(brush) + blit.cross(brush) + } + controls.cross.done = function(){ + drawing = false } controls.circle = new Tool (circle_el) @@ -29,20 +25,11 @@ var controls = (function(){ brush.modified = false } controls.circle.generate = function(){ - var fg = brush.fg, bg = brush.bg - var hw = brush.w/2|0, hh = brush.h/2|0 - brush.forEach(function(lex,x,y) { - var len = Math.sqrt(Math.pow(x-hw,2)+Math.pow(y-hh,2)) - if (len > Math.abs(hw)) { - lex.clear() - } - else { - lex.assign(brush) - } - }) + brush.fill(brush) + blit.circle(brush) } controls.circle.done = function(){ - drawing = false + drawing = false } controls.square = new Tool (square_el) @@ -53,11 +40,10 @@ var controls = (function(){ drawing = true } controls.square.generate = function(){ - var fg = brush.fg, bg = brush.bg - brush.fill(fg,bg) + brush.fill(brush) } controls.square.done = function(){ - drawing = false + drawing = false } controls.text = new Tool (text_el) @@ -82,7 +68,7 @@ var controls = (function(){ document.body.classList.add("bucket") } controls.fill.done = function(){ - filling = false + filling = false document.body.classList.remove("bucket") } @@ -93,26 +79,26 @@ var controls = (function(){ controls.webcam = new Tool (webcam_el) controls.webcam.load = function(){ - this.loaded = true - webcam_close.addEventListener("click", function(){ controls.webcam.blur() }) - window.addEventListener("message", function(e){ - if (e.origin !== window.location.origin) return - controls.webcam.blur() - controls.circle.focus() - import_textarea.value = e.data - clipboard.import_colorcode() - }) + this.loaded = true + webcam_close.addEventListener("click", function(){ controls.webcam.blur() }) + window.addEventListener("message", function(e){ + if (e.origin !== window.location.origin) return + controls.webcam.blur() + controls.circle.focus() + import_textarea.value = e.data + clipboard.import_colorcode() + }) } controls.webcam.use = function(){ - if (! this.loaded) { - this.load() - } - webcam_iframe.src = "webcam.html" - webcam_rapper.style.display = "block" + if (! this.loaded) { + this.load() + } + webcam_iframe.src = "webcam.html" + webcam_rapper.style.display = "block" } controls.webcam.done = function(){ - webcam_iframe.src = "" - webcam_rapper.style.display = "none" + webcam_iframe.src = "" + webcam_rapper.style.display = "none" } controls.grid = new Checkbox (grid_el) @@ -281,9 +267,9 @@ var controls = (function(){ canvas.resize(canvas.w, h) } - add_custom_el.addEventListener("click", function(){ - custom.clone() - }) + add_custom_el.addEventListener("click", function(){ + custom.clone() + }) } diff --git a/js/ui/keys.js b/js/ui/keys.js index fc958b0..f76d562 100644 --- a/js/ui/keys.js +++ b/js/ui/keys.js @@ -7,7 +7,7 @@ var keys = (function(){ // console.log("keycode:", e.keyCode) if (e.altKey) { - document.body.classList.add("dropper") + document.body.classList.add("dropper") } switch (e.keyCode) { @@ -19,7 +19,7 @@ var keys = (function(){ e.preventDefault() brush.contract(1) brush.modified = false - check_if_lost_focus() + check_if_lost_focus() break } case 221: // ] @@ -83,12 +83,12 @@ var keys = (function(){ current_canvas.focusLex(y + direction[0], x + direction[1]) } }) - - cursor_input.addEventListener("keyup", function(e){ + + cursor_input.addEventListener("keyup", function(e){ if (! e.altKey) { - document.body.classList.remove("dropper") + document.body.classList.remove("dropper") } - }) + }) } @@ -96,6 +96,6 @@ var keys = (function(){ })() function check_if_lost_focus() { - if (! focused || ! focused.span) - focused = canvas.aa[0][0] + if (! focused || ! focused.span) + focused = canvas.aa[0][0] }
\ No newline at end of file diff --git a/js/ui/palette.js b/js/ui/palette.js index 871dd74..f42ad6b 100644 --- a/js/ui/palette.js +++ b/js/ui/palette.js @@ -1,15 +1,32 @@ +var fillColor = 1 // black + var palette = (function(){ - var palette_index = localStorage.getItem("ascii.palette") || 1 - var palette_list = [all_hue, all_inv_hue, mirc_color, mirc_color_reverse] - var palette_fn = palette_list[palette_index] - var palette = new Matrix (32, 2, function(x,y){ + var palette_index = localStorage.getItem("ascii.palette") || 1 + var palette_list = [all_hue, all_inv_hue, mirc_color, mirc_color_reverse] + var palette_fn = palette_list[palette_index] + var palette_chars = " ▓▒░" + var palette = new Matrix (32, 5, function(x,y){ var lex = new Lex (x,y) - lex.bg = palette_fn(x>>1) - lex.opacity = 1 - lex.build() return lex }) + palette.repaint = function(){ + palette.forEach(function(lex,x,y){ + if (y < 2) { + lex.bg = palette_fn(x>>1) + lex.fg = fillColor + } + else { + lex.bg = fillColor + lex.fg = palette_fn(x>>1) + } + lex.char = palette_chars[y] + lex.opacity = 1 + lex.build() + if (lex.char == "_") lex.char = " " + }) + } + palette.repaint() palette.bind = function(){ palette.forEach(function(lex, x, y){ @@ -19,25 +36,35 @@ var palette = (function(){ lex.span.addEventListener('mousedown', function(e){ e.preventDefault() if (e.shiftKey) { - palette_index = (palette_index+1) % palette_list.length - localStorage.setItem("ascii.palette", palette_index) - palette_fn = palette_list[palette_index] - palette.forEach(function(lex,x,y){ - lex.bg = palette_fn(x>>1) - lex.build() - }) - return + palette_index = (palette_index+1) % palette_list.length + localStorage.setItem("ascii.palette", palette_index) + palette_fn = palette_list[palette_index] + palette.repaint() + return } - brush.fg = lex.bg + brush.fg = lex.fg brush.bg = lex.bg + brush.char = lex.char + brush.opacity = lex.opacity if (! brush.modified) { brush.generate() } if (filling || e.ctrlKey) { - fillColor = lex.bg + fillColor = lex.bg } }) + lex.span.addEventListener('contextmenu', function(e){ + e.preventDefault() + fillColor = y ? lex.fg : lex.bg + palette.repaint() + brush.fg = lex.fg + brush.char = lex.char + brush.opacity = lex.opacity + brush.generate() + return + }) + }) } |