diff options
Diffstat (limited to 'js/ui')
| -rw-r--r-- | js/ui/brush.js | 120 | ||||
| -rw-r--r-- | js/ui/canvas.js | 82 | ||||
| -rw-r--r-- | js/ui/controls.js | 430 | ||||
| -rw-r--r-- | js/ui/keys.js | 6 | ||||
| -rw-r--r-- | js/ui/palette.js | 48 | ||||
| -rw-r--r-- | js/ui/selection.js | 62 |
6 files changed, 374 insertions, 374 deletions
diff --git a/js/ui/brush.js b/js/ui/brush.js index 9bc80a5..4cf7495 100644 --- a/js/ui/brush.js +++ b/js/ui/brush.js @@ -1,60 +1,60 @@ var brush = (function(){ - - var brush = new Matrix (5, 5, function(x,y){ - var lex = new Lex (x,y) - lex.build() - return lex - }) + + var brush = new Matrix (5, 5, function(x,y){ + var lex = new Lex (x,y) + lex.build() + return lex + }) - brush.modified = false + brush.modified = false brush.bind = function(){ - var last_point = [0,0] - var dragging = false + var last_point = [0,0] + var dragging = false - brush.forEach(function(lex, x, y){ + brush.forEach(function(lex, x, y){ - if (lex.bound) return - lex.bound = true - - var point = [x,y] - lex.span.addEventListener('contextmenu', function(e){ - e.preventDefault() - }) - lex.span.addEventListener('mousedown', function(e){ - e.preventDefault() - current_canvas = brush - brush.modified = true - dragging = true - erasing = (e.which == "3" || e.ctrlKey) - if (erasing) { - lex.clear() - } - else { - lex.fill(brush.fg, brush.bg) - } - lex.focus() - }) - lex.span.addEventListener('mousemove', function(e){ - e.preventDefault() - if (! dragging) { - return - } - erasing = (e.which == "3" || e.ctrlKey) - if (erasing) { - lex.clear() - } - else { - lex.fill(brush.fg, brush.bg) - } - lex.focus() - }) - }) - window.addEventListener("mouseup", function(){ - dragging = false - }) - } + if (lex.bound) return + lex.bound = true + + var point = [x,y] + lex.span.addEventListener('contextmenu', function(e){ + e.preventDefault() + }) + lex.span.addEventListener('mousedown', function(e){ + e.preventDefault() + current_canvas = brush + brush.modified = true + dragging = true + erasing = (e.which == "3" || e.ctrlKey) + if (erasing) { + lex.clear() + } + else { + lex.fill(brush.fg, brush.bg) + } + lex.focus() + }) + lex.span.addEventListener('mousemove', function(e){ + e.preventDefault() + if (! dragging) { + return + } + erasing = (e.which == "3" || e.ctrlKey) + if (erasing) { + lex.clear() + } + else { + lex.fill(brush.fg, brush.bg) + } + lex.focus() + }) + }) + window.addEventListener("mouseup", function(){ + dragging = false + }) + } brush.expand = function(i){ var w = this.w = clamp(this.w+i, 1, 9), h = this.h = clamp(this.h+i, 1, 9) @@ -68,15 +68,15 @@ var brush = (function(){ this.expand(-i) } - brush.char = " " - brush.fg = 0 - brush.bg = 1 - brush.opacity = 1 - - brush.draw_fg = true - brush.draw_bg = true - brush.draw_char = true - - return brush + brush.char = " " + brush.fg = 0 + brush.bg = 1 + brush.opacity = 1 + + brush.draw_fg = true + brush.draw_bg = true + brush.draw_char = true + + return brush })()
\ No newline at end of file diff --git a/js/ui/canvas.js b/js/ui/canvas.js index e157623..67250b8 100644 --- a/js/ui/canvas.js +++ b/js/ui/canvas.js @@ -1,53 +1,53 @@ var canvas = current_canvas = (function(){ - var cols = 100 - var rows = 24 + var cols = 100 + var rows = 24 - var exports = new Matrix (cols, rows, function(x,y){ - var lex = new Lex (x,y) - lex.build() - return lex - }) + var exports = new Matrix (cols, rows, function(x,y){ + var lex = new Lex (x,y) + lex.build() + return lex + }) exports.bind = function(){ - exports.forEach(function(lex, x, y){ + exports.forEach(function(lex, x, y){ - if (lex.bound) return - lex.bound = true - var point = [x,y] - lex.span.addEventListener('contextmenu', function(e){ - e.preventDefault() - }) - lex.span.addEventListener('mousedown', function(e){ - e.preventDefault() - dragging = true - current_canvas = canvas - if (drawing) { - draw.down(e, lex, point) - } - else if (selecting) { - selection.down(e, lex, point) - } - else if (filling) { - draw.fill(brush, x, y) - } - lex.focus() - }) - lex.span.addEventListener("mousemove", function(e){ - if (! dragging) return - if (drawing) { + if (lex.bound) return + lex.bound = true + var point = [x,y] + lex.span.addEventListener('contextmenu', function(e){ + e.preventDefault() + }) + lex.span.addEventListener('mousedown', function(e){ + e.preventDefault() + dragging = true + current_canvas = canvas + if (drawing) { + draw.down(e, lex, point) + } + else if (selecting) { + selection.down(e, lex, point) + } + else if (filling) { + draw.fill(brush, x, y) + } + lex.focus() + }) + lex.span.addEventListener("mousemove", function(e){ + if (! dragging) return + if (drawing) { draw.move(e, lex, point) - } - else if (selecting) { - selection.move(e, lex, point) - } - lex.focus() - }) + } + else if (selecting) { + selection.move(e, lex, point) + } + lex.focus() + }) - }) - } + }) + } - return exports + return exports })() diff --git a/js/ui/controls.js b/js/ui/controls.js index 485f690..2f98398 100644 --- a/js/ui/controls.js +++ b/js/ui/controls.js @@ -1,238 +1,238 @@ var controls = (function(){ - var controls = {} + var controls = {} - controls.circle = new Tool (circle_el) - controls.circle.use = function(){ - brush.generate = controls.circle.generate - brush.generate() - drawing = true - filling = false - selection.hide() - 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.fill(fg,bg) - } - }) - } - - controls.square = new Tool (square_el) - controls.square.use = function(){ - brush.generate = controls.square.generate - brush.generate() - brush.modified = false - drawing = true - filling = false - selection.hide() - } - controls.square.generate = function(){ - var fg = brush.fg, bg = brush.bg - brush.fill(fg,bg) - } - - controls.text = new Tool (text_el) - controls.text.use = function(){ - brush.generate = controls.text.generate - brush.generate() - drawing = false - filling = false - selection.hide() - } - controls.text.generate = function(){ - } + controls.circle = new Tool (circle_el) + controls.circle.use = function(){ + brush.generate = controls.circle.generate + brush.generate() + drawing = true + filling = false + selection.hide() + 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.fill(fg,bg) + } + }) + } + + controls.square = new Tool (square_el) + controls.square.use = function(){ + brush.generate = controls.square.generate + brush.generate() + brush.modified = false + drawing = true + filling = false + selection.hide() + } + controls.square.generate = function(){ + var fg = brush.fg, bg = brush.bg + brush.fill(fg,bg) + } + + controls.text = new Tool (text_el) + controls.text.use = function(){ + brush.generate = controls.text.generate + brush.generate() + drawing = false + filling = false + selection.hide() + } + controls.text.generate = function(){ + } - controls.select = new Tool (select_el) - controls.select.use = function(){ - drawing = false - filling = false - selection.show() - } + controls.select = new Tool (select_el) + controls.select.use = function(){ + drawing = false + filling = false + selection.show() + } - controls.fill = new Tool (fill_el) - controls.fill.use = function(){ - drawing = false - filling = true - selection.hide() - } - - controls.clear = new Tool (clear_el) - controls.clear.use = function(){ - canvas.clear() - } - - controls.grid = new Checkbox (grid_el) - controls.grid.use = function(){ - document.body.classList.toggle('grid') - this.update( document.body.classList.contains("grid") ) - } - controls.grid.show = function(){ - document.body.classList.add('grid') - this.update( true ) - } - controls.grid.hide = function(){ - document.body.classList.remove('grid') - this.update( false ) - } + controls.fill = new Tool (fill_el) + controls.fill.use = function(){ + drawing = false + filling = true + selection.hide() + } + + controls.clear = new Tool (clear_el) + controls.clear.use = function(){ + canvas.clear() + } + + controls.grid = new Checkbox (grid_el) + controls.grid.use = function(){ + document.body.classList.toggle('grid') + this.update( document.body.classList.contains("grid") ) + } + controls.grid.show = function(){ + document.body.classList.add('grid') + this.update( true ) + } + controls.grid.hide = function(){ + document.body.classList.remove('grid') + this.update( false ) + } - ClipboardTool = Tool.extend({ - blur: function(){ + ClipboardTool = Tool.extend({ + blur: function(){ this.__blur() clipboard.hide() - } - }) - controls.save = new ClipboardTool (save_el) - controls.save.use = function(){ - clipboard.show() - clipboard.export_mode() - } - controls.load = new ClipboardTool (load_el) - controls.load.use = function(){ - clipboard.show() - clipboard.import_mode() - } - - // + } + }) + controls.save = new ClipboardTool (save_el) + controls.save.use = function(){ + clipboard.show() + clipboard.export_mode() + } + controls.load = new ClipboardTool (load_el) + controls.load.use = function(){ + clipboard.show() + clipboard.import_mode() + } + + // - ShaderTool = Tool.extend({ - use: function(){ + ShaderTool = Tool.extend({ + use: function(){ shader_rapper.style.display = "block" shader_textarea.focus() }, - blur: function(){ + blur: function(){ this.__blur() shader_rapper.style.display = "none" - } - }) - controls.shader = new ShaderTool (shader_el) - shader_textarea.value = demo_shader.innerHTML - shader_textarea.addEventListener("input", function(){ - var fn = shader.build(shader_textarea.value) - fn && shader.run(canvas) - }) - controls.animate = new Checkbox (animate_checkbox) - controls.animate.use = function(state){ - var state = shader.toggle() - this.update(state) - } + } + }) + controls.shader = new ShaderTool (shader_el) + shader_textarea.value = demo_shader.innerHTML + shader_textarea.addEventListener("input", function(){ + var fn = shader.build(shader_textarea.value) + fn && shader.run(canvas) + }) + controls.animate = new Checkbox (animate_checkbox) + controls.animate.use = function(state){ + var state = shader.toggle() + this.update(state) + } - // - - controls.fg = new Checkbox (fg_checkbox) - controls.fg.use = function(state){ - brush.draw_fg = state || ! brush.draw_fg - this.update(brush.draw_fg) - } + // + + controls.fg = new Checkbox (fg_checkbox) + controls.fg.use = function(state){ + brush.draw_fg = state || ! brush.draw_fg + this.update(brush.draw_fg) + } - controls.bg = new Checkbox (bg_checkbox) - controls.bg.use = function(state){ - brush.draw_bg = state || ! brush.draw_bg - this.update(brush.draw_bg) - } + controls.bg = new Checkbox (bg_checkbox) + controls.bg.use = function(state){ + brush.draw_bg = state || ! brush.draw_bg + this.update(brush.draw_bg) + } - controls.char = new Checkbox (char_checkbox) - controls.char.use = function(state){ - brush.draw_char = state || ! brush.draw_char - this.update(brush.draw_char) - } - - // - - 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.char = new Checkbox (char_checkbox) + controls.char.use = function(state){ + brush.draw_char = state || ! brush.draw_char + this.update(brush.draw_char) + } + + // + + 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) - // bind - - controls.bind = function(){ - [ - controls.width, - controls.height, - controls.canvas_width, - controls.canvas_height - ].forEach(function(lex){ - lex.span.addEventListener('mousedown', function(e){ - lex.focus() - }) - }); - - [ - controls.square, - controls.circle, - controls.text, - controls.fill, - controls.select, - controls.clear, - controls.grid, - controls.fg, - controls.bg, - controls.char, - controls.shader, - controls.animate, - controls.save, - controls.load - ].forEach(function(tool){ - tool.span.addEventListener('mousedown', function(e){ - tool.focus() - }) - }) - - controls.width.key = int_key(function(n, keyCode){ + // bind + + controls.bind = function(){ + [ + controls.width, + controls.height, + controls.canvas_width, + controls.canvas_height + ].forEach(function(lex){ + lex.span.addEventListener('mousedown', function(e){ + lex.focus() + }) + }); + + [ + controls.square, + controls.circle, + controls.text, + controls.fill, + controls.select, + controls.clear, + controls.grid, + controls.fg, + controls.bg, + controls.char, + controls.shader, + controls.animate, + controls.save, + controls.load + ].forEach(function(tool){ + tool.span.addEventListener('mousedown', function(e){ + tool.focus() + }) + }) + + 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.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.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.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.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) + } + } function int_key (f) { return function (key, keyCode) { @@ -241,5 +241,5 @@ var controls = (function(){ } } - return controls + return controls })()
\ No newline at end of file diff --git a/js/ui/keys.js b/js/ui/keys.js index 1915333..57c73a9 100644 --- a/js/ui/keys.js +++ b/js/ui/keys.js @@ -1,7 +1,7 @@ var keys = (function(){ var keys = {} - var direction = [0,1] + var direction = [0,1] keys.bind = function(){ cursor_input.addEventListener('keydown', function(e){ @@ -51,8 +51,8 @@ var keys = (function(){ e.preventDefault() current_canvas.focusLex(focused.y + 0, focused.x + 1) break - // default: - // if (focused) { focused.key(undefined, e.keyCode) } + // default: + // if (focused) { focused.key(undefined, e.keyCode) } } }) diff --git a/js/ui/palette.js b/js/ui/palette.js index 3976100..04f56c2 100644 --- a/js/ui/palette.js +++ b/js/ui/palette.js @@ -1,31 +1,31 @@ var palette = (function(){ - var palette = new Matrix (32, 2, function(x,y){ - var lex = new Lex (x,y) - lex.bg = all_inv_hue(x>>1) - lex.build() - return lex - }) + var palette = new Matrix (32, 2, function(x,y){ + var lex = new Lex (x,y) + lex.bg = all_inv_hue(x>>1) + lex.build() + return lex + }) - palette.bind = function(){ - palette.forEach(function(lex, x, y){ - if (lex.bound) return - lex.bound = true + palette.bind = function(){ + palette.forEach(function(lex, x, y){ + if (lex.bound) return + lex.bound = true - lex.span.addEventListener('mousedown', function(e){ - e.preventDefault() - dragging = true - erasing = e.which == "3" - brush.fg = lex.bg - brush.bg = lex.bg - if (! brush.modified) { - brush.generate() - } - }) + lex.span.addEventListener('mousedown', function(e){ + e.preventDefault() + dragging = true + erasing = e.which == "3" + brush.fg = lex.bg + brush.bg = lex.bg + if (! brush.modified) { + brush.generate() + } + }) - }) - } - - return palette + }) + } + + return palette })() diff --git a/js/ui/selection.js b/js/ui/selection.js index cbd15bf..f818d04 100644 --- a/js/ui/selection.js +++ b/js/ui/selection.js @@ -2,16 +2,16 @@ var selection = (function(){ var creating = false, moving = false, copying = false - var selection_canvas = new Matrix (1, 1, function(x,y){ - var lex = new Lex (x,y) - 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) + var selection_canvas = new Matrix (1, 1, function(x,y){ + var lex = new Lex (x,y) + 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 @@ -28,7 +28,7 @@ var selection = (function(){ var d = [0, 0] function reset () { - a[0] = a[1] = b[0] = b[1] = 0 + a[0] = a[1] = b[0] = b[1] = 0 } function left (a,b) { return min(a[0],b[0]) } function top (a,b) { return min(a[1],b[1]) } @@ -39,8 +39,8 @@ var selection = (function(){ 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 + 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) { @@ -70,9 +70,9 @@ var selection = (function(){ a[1] = point[1] b[0] = point[0] b[1] = point[1] - reposition(a,b) + reposition(a,b) selector_el.classList.add("creating") - } else { + } else { copying = false moving = true creating = false @@ -82,7 +82,7 @@ var selection = (function(){ d[1] = point[1] } show() - selector_el.classList.remove("dragging") + selector_el.classList.remove("dragging") } function move (e, lex, point){ if (creating) { @@ -101,26 +101,26 @@ var selection = (function(){ } } function up (e) { - if (creating) { - orient(a,b) - selection_canvas.resize(width(a,b), height(a,b)) - blit.copy_from( canvas, selection_canvas, a[0], a[1] ) - selection_canvas.build() + if (creating) { + orient(a,b) + selection_canvas.resize(width(a,b), height(a,b)) + blit.copy_from( canvas, selection_canvas, a[0], a[1] ) + selection_canvas.build() selector_el.classList.remove("creating") - } - if (moving) { + } + 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 - blit.copy_to( canvas, selection_canvas, a[0], a[1] ) - } - if (copying) { - } - creating = moving = copying = false - selector_el.classList.remove("dragging") + blit.copy_to( canvas, selection_canvas, a[0], a[1] ) + } + if (copying) { + } + creating = moving = copying = false + selector_el.classList.remove("dragging") } function show () { @@ -128,7 +128,7 @@ var selection = (function(){ controls.grid.show() } function hide () { - reset() + reset() selector_el.style.top = "-9999px" selector_el.style.left = "-9999px" selector_el.style.width = "0px" @@ -143,6 +143,6 @@ var selection = (function(){ selection.canvas = selection_canvas selection.show = show selection.hide = hide - return selection + return selection })() |