diff options
Diffstat (limited to 'js/ui')
| -rw-r--r-- | js/ui/brush.js | 27 | ||||
| -rw-r--r-- | js/ui/canvas.js | 42 | ||||
| -rw-r--r-- | js/ui/controls.js | 136 | ||||
| -rw-r--r-- | js/ui/palette.js | 31 |
4 files changed, 236 insertions, 0 deletions
diff --git a/js/ui/brush.js b/js/ui/brush.js new file mode 100644 index 0000000..1b01081 --- /dev/null +++ b/js/ui/brush.js @@ -0,0 +1,27 @@ +var brush = (function(){ + var brush = new Matrix (5, 5, function(x,y){ + var lex = new Lex (x,y) + lex.build() + return lex + }) + + brush.bind = function(){ + brush.forEach(function(lex, x, y){ + if (lex.bound) return + lex.bound = true + + lex.span.addEventListener('mousedown', function(e){ + e.preventDefault() + dragging = true + // lex.fill(lex.fg, lex.bg) + }) + + }) + } + + brush.fg = 0 + brush.bg = 1 + + return brush + +})()
\ No newline at end of file diff --git a/js/ui/canvas.js b/js/ui/canvas.js new file mode 100644 index 0000000..7e85fcf --- /dev/null +++ b/js/ui/canvas.js @@ -0,0 +1,42 @@ +var canvas = (function(){ + + var cols = 80 + var rows = 24 + + 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){ + if (lex.bound) return + lex.bound = true + + lex.span.addEventListener('contextmenu', function(e){ + e.preventDefault() + }) + lex.span.addEventListener('mousedown', function(e){ + e.preventDefault() + dragging = true + if (drawing) { + erasing = (e.which == "3" || e.ctrlKey) + draw(lex, x, y, erasing) + } + lex.focus() + }) + lex.span.addEventListener("mousemove", function(){ + if (! dragging) return + if (drawing) { + draw(lex, x, y, erasing) + } + lex.focus() + }) + + }) + } + + return exports + +})() diff --git a/js/ui/controls.js b/js/ui/controls.js new file mode 100644 index 0000000..6f56727 --- /dev/null +++ b/js/ui/controls.js @@ -0,0 +1,136 @@ +var controls = (function(){ + + var controls = {} + controls.circle = new Tool (circle_el) + controls.circle.use = function(){ + brush.generate = controls.circle.generate + brush.generate() + drawing = true + } + 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() + drawing = true + } + 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 + } + controls.text.generate = function(){ + } + + controls.clear = new Tool (clear_el) + controls.clear.use = function(){ + canvas.clear() + } + + controls.grid = new Tool (grid_el) + controls.grid.use = function(){ + document.body.classList.toggle('grid') + } + + controls.shader = new Tool (shader_el) + controls.shader.use = function(){ + shader_textarea.style.display = "block" + // setTimeout(function(){ shader_textarea.focus() }) + shader_textarea.focus() + } + controls.shader.blur = function(){ + Tool.prototype.blur.call(this) + shader_textarea.style.display = "none" + } + 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 Tool (animate_checkbox) + controls.animate.use = function(){ + var state = shader.toggle() + if (state) animate_checkbox.innerHTML = "x animate" + else animate_checkbox.innerHTML = "_ animate" + } + + 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.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.clear, controls.grid, controls.shader, controls.animate].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.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 == 1) { + n = parseInt(controls.canvas_width.char) * 10 + n + } + controls.canvas_width.char = ""+n + controls.canvas_width.build() + canvas.w = n + canvas.rebuild() + canvas.build() + }) + controls.canvas_height.key = int_key(function(n, keyCode){ + controls.canvas_height.read() + if (controls.canvas_height.char.length == 1) { + n = parseInt(controls.canvas_height.char) * 10 + n + } + controls.canvas_height.char = ""+n + controls.canvas_height.build() + canvas.h = n + canvas.rebuild() + canvas.build() + }) + } + + return controls +})()
\ No newline at end of file diff --git a/js/ui/palette.js b/js/ui/palette.js new file mode 100644 index 0000000..605c08b --- /dev/null +++ b/js/ui/palette.js @@ -0,0 +1,31 @@ +var palette = (function(){ +console.log("hi") + var palette = new Matrix (32, 2, function(x,y){ + var lex = new Lex (x,y) + lex.bg = hue(x>>1) + lex.build() + console.log(lex.bg, lex.css()) + return lex + }) + + 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.fg + brush.bg = lex.bg + brush.generate() + }) + + }) + } + + return palette + +})() + |