From e1cbb0d9034358b5191a4d6da0900b9504950e69 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 22 Nov 2014 10:24:05 -0500 Subject: toggle grid --- index.html | 2 ++ js/app.js | 29 ++++++++--------------------- js/draw.js | 19 +++++++++++++++++++ js/lex.js | 9 +++++---- 4 files changed, 34 insertions(+), 25 deletions(-) create mode 100644 js/draw.js diff --git a/index.html b/index.html index de811fc..1c04d1a 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,7 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset circle text clear + grid brush size: 5 x 5 canvas size: 80 x 24 @@ -51,4 +52,5 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset + diff --git a/js/app.js b/js/app.js index 9db7895..54553de 100644 --- a/js/app.js +++ b/js/app.js @@ -90,6 +90,10 @@ function build () { canvas.clear() } + controls.grid = new Tool (grid_el) + controls.grid.use = function(){ + document.body.classList.toggle('grid') + } controls.width = new Lex (width_el) controls.height = new Lex (height_el) @@ -151,7 +155,7 @@ function bind () { }) }); - [controls.square, controls.circle, controls.text, controls.clear].forEach(function(tool){ + [controls.square, controls.circle, controls.text, controls.clear, controls.grid].forEach(function(tool){ tool.span.addEventListener('mousedown', function(e){ tool.focus() }) @@ -197,7 +201,7 @@ function bind () { if (! e.metaKey && ! e.ctrlKey && ! e.altKey) { e.preventDefault() } - console.log(e.keyCode) + // console.log(e.keyCode) switch (e.keyCode) { case 27: // esc if (focused) focused.blur() @@ -218,6 +222,8 @@ function bind () { } }) } + + function int_key (f) { return function (key, keyCode) { var n = parseInt(key) @@ -225,25 +231,6 @@ function int_key (f) { } } - -function draw (lex, x, y, erasing) { - stamp (canvas, brush, x, y, erasing) -} -function stamp (canvas, brush, x, y, erasing) { - hh = brush.w/2|0 - brush.forEach(function(lex, s, t){ - s += x-hh - t += y-hh - if (s >= 0 && s < canvas.w && t >= 0 && t < canvas.h) { - if (erasing) { - canvas.aa[t][s].erase(lex) - } - else { - canvas.aa[t][s].clone(lex) - } - } - }) -} function clamp (n,a,b){ return n < a ? a : n < b ? n : b } function mod (i,n) { return i - n * Math.floor(i / n) } diff --git a/js/draw.js b/js/draw.js new file mode 100644 index 0000000..cb7f816 --- /dev/null +++ b/js/draw.js @@ -0,0 +1,19 @@ +function draw (lex, x, y, erasing) { + stamp (canvas, brush, x, y, erasing) +} +function stamp (canvas, brush, x, y, erasing) { + hh = brush.w/2|0 + brush.forEach(function(lex, s, t){ + s += x-hh + t += y-hh + if (s >= 0 && s < canvas.w && t >= 0 && t < canvas.h) { + if (erasing) { + canvas.aa[t][s].erase(lex) + } + else { + canvas.aa[t][s].clone(lex) + } + } + }) +} + diff --git a/js/lex.js b/js/lex.js index 086fc90..e98538c 100644 --- a/js/lex.js +++ b/js/lex.js @@ -74,6 +74,11 @@ Lex.prototype.blur = function(){ this.span.classList.remove('focused') focused = null } +Lex.prototype.demolish = function(){ + this.span.parentNode.removeChild(this.span) + this.span = null +} + Lex.prototype.key = function(char, keyCode) { console.log(keyCode, this.y, this.x) switch (keyCode) { @@ -110,7 +115,3 @@ Lex.prototype.key = function(char, keyCode) { } } } -Lex.prototype.demolish = function(){ - this.span.parentNode.removeChild(this.span) - this.span = null -} -- cgit v1.2.3-70-g09d2