diff options
Diffstat (limited to 'js/ui/controls.js')
| -rw-r--r-- | js/ui/controls.js | 136 |
1 files changed, 136 insertions, 0 deletions
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 |