diff options
Diffstat (limited to 'js/ui')
| -rw-r--r-- | js/ui/canvas.js | 23 | ||||
| -rw-r--r-- | js/ui/controls.js | 67 | ||||
| -rw-r--r-- | js/ui/keys.js | 4 | ||||
| -rw-r--r-- | js/ui/selection.js | 71 |
4 files changed, 120 insertions, 45 deletions
diff --git a/js/ui/canvas.js b/js/ui/canvas.js index 7e75ef6..c70b135 100644 --- a/js/ui/canvas.js +++ b/js/ui/canvas.js @@ -2,7 +2,6 @@ var canvas = current_canvas = (function(){ var cols = 80 var rows = 24 - var last_point = [0,0] var exports = new Matrix (cols, rows, function(x,y){ var lex = new Lex (x,y) @@ -25,24 +24,20 @@ var canvas = current_canvas = (function(){ dragging = true current_canvas = canvas if (drawing) { - erasing = (e.which == "3" || e.ctrlKey) - if (e.shiftKey) { - line(lex, last_point, point, erasing) - } - else { - draw(lex, x, y, erasing) - } - last_point[0] = x - last_point[1] = y + draw.down(e, lex, point) + } + else if (selecting) { + selection.down(e, lex, point) } lex.focus() }) - lex.span.addEventListener("mousemove", function(){ + lex.span.addEventListener("mousemove", function(e){ if (! dragging) return if (drawing) { - line(lex, last_point, point, erasing) - last_point[0] = x - last_point[1] = y + draw.move(e, lex, point) + } + else if (selecting) { + selection.move(e, lex, point) } lex.focus() }) diff --git a/js/ui/controls.js b/js/ui/controls.js index bd475c1..ecaa875 100644 --- a/js/ui/controls.js +++ b/js/ui/controls.js @@ -7,6 +7,7 @@ var controls = (function(){ brush.generate = controls.circle.generate brush.generate() drawing = true + selection.hide() brush.modified = false } controls.circle.generate = function(){ @@ -27,8 +28,9 @@ var controls = (function(){ controls.square.use = function(){ brush.generate = controls.square.generate brush.generate() - drawing = true brush.modified = false + drawing = true + selection.hide() } controls.square.generate = function(){ var fg = brush.fg, bg = brush.bg @@ -40,6 +42,15 @@ var controls = (function(){ brush.generate = controls.text.generate brush.generate() drawing = false + selection.hide() + } + controls.text.generate = function(){ + } + + controls.select = new Tool (select_el) + controls.select.use = function(){ + drawing = false + selection.show() } controls.text.generate = function(){ } @@ -54,40 +65,41 @@ var controls = (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" - } + ClipboardTool = Tool.extend({ + blur: function(){ + this.__blur() + clipboard.hide() + } + }) + ShaderTool = Tool.extend({ + use: function(){ + shader_textarea.style.display = "block" + shader_textarea.focus() + }, + blur: function(){ + this.__blur() + shader_textarea.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.save = new Tool (save_el) + controls.save = new ClipboardTool (save_el) controls.save.use = function(){ clipboard.show() clipboard.export_mode() } - controls.save.blur = function(){ - Tool.prototype.blur.call(this) - clipboard.hide() - } - controls.load = new Tool (load_el) + controls.load = new ClipboardTool (load_el) controls.load.use = function(){ clipboard.show() clipboard.import_mode() } - controls.load.blur = function(){ - Tool.prototype.blur.call(this) - clipboard.hide() - } controls.animate = new Tool (animate_checkbox) controls.animate.use = function(){ @@ -119,6 +131,7 @@ var controls = (function(){ controls.square, controls.circle, controls.text, + controls.select, controls.clear, controls.grid, controls.shader, @@ -160,12 +173,6 @@ var controls = (function(){ controls.canvas_width.build() canvas.resize(w, canvas.h) } - controls.canvas_height.onBlur = function(){ - var h = parseInt(controls.canvas_height.char) || 1 - 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() @@ -176,6 +183,12 @@ var controls = (function(){ controls.canvas_height.build() canvas.resize(canvas.w, n) }) + controls.canvas_height.onBlur = function(){ + var h = parseInt(controls.canvas_height.char) || 1 + controls.canvas_height.char = h+"" + controls.canvas_height.build() + canvas.resize(canvas.w, h) + } } function int_key (f) { diff --git a/js/ui/keys.js b/js/ui/keys.js index 0070dff..1915333 100644 --- a/js/ui/keys.js +++ b/js/ui/keys.js @@ -5,7 +5,7 @@ var keys = (function(){ keys.bind = function(){ cursor_input.addEventListener('keydown', function(e){ - console.log("keycode:", e.keyCode) + // console.log("keycode:", e.keyCode) switch (e.keyCode) { case 27: // esc @@ -69,7 +69,7 @@ var keys = (function(){ var char = cursor_input.value cursor_input.value = "" - console.log("input:", char) + // console.log("input:", char) if (focused && char) { var y = focused.y, x = focused.x diff --git a/js/ui/selection.js b/js/ui/selection.js index cbeb051..f1e7e5e 100644 --- a/js/ui/selection.js +++ b/js/ui/selection.js @@ -1,6 +1,8 @@ var selection = (function(){ - var selection = new Matrix (1, 1, function(x,y){ + 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 @@ -15,7 +17,72 @@ var selection = (function(){ // - drag the selection to move it -- this "cuts" it and leaves a blank space on the canvas. // - shift-drag the selection to copy it - + var corner = [-1, -1] + var dimensions = [0, 0] + + function contains (point) { + var contains_x = corner[0] < point[0] && point[0] < corner[0] + dimensions[0] + var contains_y = corner[1] < point[1] && point[1] < corner[1] + dimensions[1] + return (contains_x && contains_y) + } + function reposition () { + var top_left = canvas.aa[corner[1]][corner[0]].span + var left = top_left.offsetLeft + var top = top_left.offsetTop + var width = top_left.offsetWidth + var height = top_left.offsetHeight + } + function down (e, lex, point){ + if (contains(point)) { + copying = false + moving = true + creating = false + } + else { + copying = false + moving = false + creating = true + corner[0] = point[0] + corner[1] = point[1] + dimensions[0] = 1 + dimensions[1] = 1 + } + show() + reposition() + } + function move (e, lex, point){ + if (creating) { + var x = point[0] - corner[0] + var y = point[1] - corner[1] + if (x < 0) { + corner[0] = point[0] + } + if (y < 0) { + corner[0] = point[0] + } + dimensions[0] = abs(x) + reposition() + } + else if (moving) { + } + } + function up (e) { + } + + function show () { + selecting = true + } + function hide () { + selecting = false + } + + var selection = {} + selection.down = down + selection.move = move + selection.up = up + selection.canvas = selection_canvas + selection.show = show + selection.hide = hide return selection })() |