From 8410a217e2a02257bd3a9d05e26c51cc8ae33086 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 24 Mar 2015 18:16:36 -0400 Subject: no tabs --- colors.html | 2 +- css/sally.css | 16 +- grid2.html | 2 +- index.html | 60 ++++---- js/app.js | 70 ++++----- js/blit.js | 98 ++++++------ js/clipboard.js | 334 ++++++++++++++++++++--------------------- js/color.js | 32 ++-- js/color_code.js | 16 +- js/draw.js | 78 +++++----- js/lex.js | 160 ++++++++++---------- js/matrix.js | 210 +++++++++++++------------- js/shader.js | 86 +++++------ js/tool.js | 42 +++--- js/ui/brush.js | 120 +++++++-------- js/ui/canvas.js | 84 +++++------ js/ui/controls.js | 430 ++++++++++++++++++++++++++--------------------------- js/ui/keys.js | 6 +- js/ui/palette.js | 48 +++--- js/ui/selection.js | 62 ++++---- js/util.js | 4 +- 21 files changed, 980 insertions(+), 980 deletions(-) diff --git a/colors.html b/colors.html index f063e09..9e14d08 100644 --- a/colors.html +++ b/colors.html @@ -83,7 +83,7 @@ var canvas = new Matrix (72, 35, function(x,y){ lerp_color(lex, start_color, end_color, t, xx, yy) } - lex.opacity = 1 + lex.opacity = 1 lex.build() return lex }) diff --git a/css/sally.css b/css/sally.css index a3ffc1a..6fe1bd2 100644 --- a/css/sally.css +++ b/css/sally.css @@ -27,7 +27,7 @@ a:link, a:visited {text-decoration: none; color: #3b3740} {overflow: auto;} .rapper, .block { - float: left; + float: left; height:auto; width:auto; padding:4px; @@ -61,16 +61,16 @@ textarea { font-size:12pt; width: 42%; height: 300px; background: #333; color: # #import_rapper { display: none; } #cursor_input { position: fixed; top: 0; right: 0; width:30px; opacity: 0; } .selector_el { - border: 1px dashed #fff !important; - padding-top: 1px; - position:absolute; - top:-999px;left:-999px; - pointer-events: none; + border: 1px dashed #fff !important; + padding-top: 1px; + position:absolute; + top:-999px;left:-999px; + pointer-events: none; } .selector_el.dragging { - color: #0f0; + color: #0f0; } .selector_el.creating div { - display: none; + display: none; } diff --git a/grid2.html b/grid2.html index 17a95ec..75e6dd2 100644 --- a/grid2.html +++ b/grid2.html @@ -44,7 +44,7 @@ var canvas = new Matrix (96, 64, function(x,y){ lex.char = "x" } - lex.opacity = 1 + lex.opacity = 1 lex.build() return lex }) diff --git a/index.html b/index.html index 4852a44..c65ecd5 100644 --- a/index.html +++ b/index.html @@ -10,15 +10,15 @@
-
-
-
+
+
+
x fg
x bg
x char
- square
+ square
circle
text
select
@@ -26,36 +26,36 @@
clear
_ grid
-
+
brush size: 5 x 5
canvas size: 100 x 24
- -
-
- shader - load - save -
- -
- - - - - - - - - -
- -
+ +
+
+ shader + load + save +
+ +
+ + + + + + + + + +
+ +
-
- _ animate
- -
+
+ _ animate
+ +
diff --git a/js/app.js b/js/app.js index 5a61bde..2d57a07 100644 --- a/js/app.js +++ b/js/app.js @@ -14,53 +14,53 @@ function init () { bind() } function build () { - shader.init() -// shader.run(canvas) - shader.animate() + shader.init() +// shader.run(canvas) + shader.animate() - canvas.append(canvas_rapper) - brush.append(brush_rapper) - palette.append(palette_rapper) - + canvas.append(canvas_rapper) + brush.append(brush_rapper) + palette.append(palette_rapper) + controls.circle.focus() // controls.shader.focus() - brush.bg = colors.red - brush.generate() - brush.build() + brush.bg = colors.red + brush.generate() + brush.build() - // controls.grid.use() + // controls.grid.use() } function bind () { - canvas.bind() - palette.bind() - brush.bind() - controls.bind() - keys.bind() - + canvas.bind() + palette.bind() + brush.bind() + controls.bind() + keys.bind() + window.addEventListener('mouseup', function(e){ dragging = erasing = false - if (current_tool.name != 'shader' && current_tool.name != 'load' && current_tool.name != 'save') { - cursor_input.focus() - } - if (selecting) { - selection.up(e) - } + if (current_tool.name != 'shader' && current_tool.name != 'load' && current_tool.name != 'save') { + cursor_input.focus() + } + if (selecting) { + selection.up(e) + } }) - window.addEventListener('mousedown', function(e){ - if (current_tool.name == "shader") { return } - cursor_input.focus() - }) + window.addEventListener('mousedown', function(e){ + if (current_tool.name == "shader") { return } + cursor_input.focus() + }) - document.addEventListener('DOMContentLoaded', function(){ - if (current_tool.name != 'shader') { cursor_input.focus() } - document.body.classList.remove('loading') - }) - - window.onbeforeunload = function() { - if (changed) return "You have edited this drawing." - } + document.addEventListener('DOMContentLoaded', function(){ + if (current_tool.name != 'shader') { cursor_input.focus() } + document.body.classList.remove('loading') + }) + + window.onbeforeunload = function() { + if (changed) return "You have edited this drawing." + } } init() diff --git a/js/blit.js b/js/blit.js index 8683f22..05fdcb8 100644 --- a/js/blit.js +++ b/js/blit.js @@ -1,51 +1,51 @@ var blit = (function(){ - var blit = {} - blit.and = blit.atop = function(A, B, x, y){ - x = x || 0 ; y = y || 0 - B.forEach(function(lex, u, v){ - var cell = A.getCell(u+x, v+y) - if (cell && lex.opacity > 0) { - cell.clone(lex) - } - }) - } - blit.or = blit.under = function(A, B, x, y){ - x = x || 0 ; y = y || 0 - B.forEach(function(lex, u, v){ - var cell = A.getCell(u+x, v+y) - if (cell && cell.opacity == 0) { - cell.clone(lex) - } - }) - } - // copy the region of A beginning at x,y into B - blit.copy_from = function(A, B, x, y){ - x = x || 0 ; y = y || 0 - B.forEach(function(lex, u, v){ - var cell = A.getCell(u+x, v+y) - if (cell) { - lex.clone(cell) - } - }) - } - blit.copy_to = function(A, B, x, y){ - x = x || 0 ; y = y || 0 - B.forEach(function(lex, u, v){ - var cell = A.getCell(u+x, v+y) - if (cell) { - cell.clone(lex) - } - }) - } - blit.invert = function(A, B, x, y){ - x = x || 0 ; y = y || 0 - B.forEach(function(lex, u, v){ - var cell = A.getCell(u+x, v+y) - if (cell && lex.opacity > 0) { - cell.fg = get_inverse(cell.fg) - cell.bg = get_inverse(cell.bg) - } - }) - } - return blit + var blit = {} + blit.and = blit.atop = function(A, B, x, y){ + x = x || 0 ; y = y || 0 + B.forEach(function(lex, u, v){ + var cell = A.getCell(u+x, v+y) + if (cell && lex.opacity > 0) { + cell.clone(lex) + } + }) + } + blit.or = blit.under = function(A, B, x, y){ + x = x || 0 ; y = y || 0 + B.forEach(function(lex, u, v){ + var cell = A.getCell(u+x, v+y) + if (cell && cell.opacity == 0) { + cell.clone(lex) + } + }) + } + // copy the region of A beginning at x,y into B + blit.copy_from = function(A, B, x, y){ + x = x || 0 ; y = y || 0 + B.forEach(function(lex, u, v){ + var cell = A.getCell(u+x, v+y) + if (cell) { + lex.clone(cell) + } + }) + } + blit.copy_to = function(A, B, x, y){ + x = x || 0 ; y = y || 0 + B.forEach(function(lex, u, v){ + var cell = A.getCell(u+x, v+y) + if (cell) { + cell.clone(lex) + } + }) + } + blit.invert = function(A, B, x, y){ + x = x || 0 ; y = y || 0 + B.forEach(function(lex, u, v){ + var cell = A.getCell(u+x, v+y) + if (cell && lex.opacity > 0) { + cell.fg = get_inverse(cell.fg) + cell.bg = get_inverse(cell.bg) + } + }) + } + return blit })() diff --git a/js/clipboard.js b/js/clipboard.js index 66df875..d2d1592 100644 --- a/js/clipboard.js +++ b/js/clipboard.js @@ -1,175 +1,175 @@ var clipboard = (function () { - var exports = { - format: "irssi", - importing: false, - visible: false, - - bind: function () { - import_ascii.addEventListener("change", exports.setFormat("ascii")) - import_irssi.addEventListener("change", exports.setFormat("irssi")) - import_mirc.addEventListener("change", exports.setFormat("mirc")) - import_button.addEventListener("click", exports.import_text) - import_html.addEventListener("click", exports.import_html) - export_button.addEventListener("click", exports.export_data) - import_textarea.addEventListener("focus", exports.focus) - import_textarea.addEventListener("blur", exports.blur) - import_textarea.addEventListener('paste', exports.paste) - import_irssi.setAttribute("checked", true) - }, - setFormat: function (name) { - return function () { - clipboard.format = name - if (! clipboard.importing) { clipboard.export_data() } - } - }, - show: function () { import_rapper.style.display = "block"; clipboard.visible = true }, - hide: function () { import_rapper.style.display = "none"; clipboard.visible = false }, - focus: function () { - if (! clipboard.importing) { - import_textarea.focus() - import_textarea.select() - } - }, - blur: function () { - }, + var exports = { + format: "irssi", + importing: false, + visible: false, + + bind: function () { + import_ascii.addEventListener("change", exports.setFormat("ascii")) + import_irssi.addEventListener("change", exports.setFormat("irssi")) + import_mirc.addEventListener("change", exports.setFormat("mirc")) + import_button.addEventListener("click", exports.import_text) + import_html.addEventListener("click", exports.import_html) + export_button.addEventListener("click", exports.export_data) + import_textarea.addEventListener("focus", exports.focus) + import_textarea.addEventListener("blur", exports.blur) + import_textarea.addEventListener('paste', exports.paste) + import_irssi.setAttribute("checked", true) + }, + setFormat: function (name) { + return function () { + clipboard.format = name + if (! clipboard.importing) { clipboard.export_data() } + } + }, + show: function () { import_rapper.style.display = "block"; clipboard.visible = true }, + hide: function () { import_rapper.style.display = "none"; clipboard.visible = false }, + focus: function () { + if (! clipboard.importing) { + import_textarea.focus() + import_textarea.select() + } + }, + blur: function () { + }, - import_mode: function () { - focus() - clipboard.importing = true - import_buttons.style.display = "inline-block" - export_button.style.display = format_group.style.display = "none" - import_textarea.value = "" - }, - export_mode: function () { - focus() - clipboard.importing = false - import_buttons.style.display = "none" - export_button.style.display = format_group.style.display = "inline-block" - clipboard.export_data() - }, + import_mode: function () { + focus() + clipboard.importing = true + import_buttons.style.display = "inline-block" + export_button.style.display = format_group.style.display = "none" + import_textarea.value = "" + }, + export_mode: function () { + focus() + clipboard.importing = false + import_buttons.style.display = "none" + export_button.style.display = format_group.style.display = "inline-block" + clipboard.export_data() + }, - paste: function (e) { - e.preventDefault() - // images will come through as files - var types = toArray(e.clipboardData.types) - import_textarea.value = "" - types.forEach(function(type, i){ - console.log(type) - // this can be text/plain or text/html.. - if (type.match('text/plain') && types.length > 1) { - return - } - else if (type.match('text/')) { - import_textarea.value = e.clipboardData.getData(type) - } - else { - console.error("unknown type!", item.type) - } - }) - - }, - - import_html: function () { - var alphabet = {} - toArray("ABCDEFGHIJKLMNOP").forEach(function(c,i){ alphabet[c] = i }) - - var rapper = document.createElement("div") - rapper.innerHTML = import_textarea.value - var y = 0; - toArray(rapper.childNodes).forEach(function(span){ - if (span.nodeName !== "SPAN") { return } - var x = 0; - var row = canvas.aa[y++] - if (! row) return - toArray(span.childNodes).forEach(function(el){ - if (x >= row.length) return; - var line; - var colorcode = el.nodeName; - if (colorcode === "SPAN") { - colorcode = "F" + css_lookup[el.style.color] - line = el.innerText || el.textContent - } - else if (colorcode === "#text") { - colorcode = "FA" - line = el.nodeValue - } - else { - line = el.innerText || el.textContent - } - if (colorcode[0] !== "F") { return } - if (colorcode.length == 2) { colorcode += "BB" } - - for (var i = 0; i < line.length; i++, x++) { - var lex = row[x] - if (! lex) return - lex.char = line[i] - lex.fg = alphabet[ colorcode[1] ] - lex.bg = alphabet[ colorcode[3] ] - lex.opacity = 1 - lex.build() - } - }) - }) - }, - - import_text: function () { - var data = import_textarea.value - lines = data.split("\n") - var width = lines.reduce(function(a,b){ console.log(a,b); return Math.max(a, b.length) }, 0) - var height = lines.length - if (width > 200) { - return alert("input too wide") - } - if (height > 200) { - return alert("input too tall") - } - canvas.clear() - lines.forEach(function(line, y){ - var row = canvas.aa[y] - if (! row) return - for (var x = 0; x < line.length; x++) { - var lex = row[x] - if (! lex) return - lex.char = line[x] - lex.fg = brush.bg - lex.opacity = 1 - lex.build() - } - }) - // TODO: some notion of a "selected" region which cuts/clones the underlying region - -// var pasted_region = new Matrix (width, height, function(x,y){ -// var lex = new Lex (x,y) -// lex.char = lines[y][x] || " " -// lex.build() -// return lex -// }) - }, - export_data: function () { - var output - switch (clipboard.format) { - case 'ascii': - output = canvas.ascii() - break - case 'mirc': - output = canvas.mirc() - break - case 'irssi': - output = canvas.irssi() - break - } - import_textarea.value = output - clipboard.focus() - return output - }, + paste: function (e) { + e.preventDefault() + // images will come through as files + var types = toArray(e.clipboardData.types) + import_textarea.value = "" + types.forEach(function(type, i){ + console.log(type) + // this can be text/plain or text/html.. + if (type.match('text/plain') && types.length > 1) { + return + } + else if (type.match('text/')) { + import_textarea.value = e.clipboardData.getData(type) + } + else { + console.error("unknown type!", item.type) + } + }) + + }, + + import_html: function () { + var alphabet = {} + toArray("ABCDEFGHIJKLMNOP").forEach(function(c,i){ alphabet[c] = i }) + + var rapper = document.createElement("div") + rapper.innerHTML = import_textarea.value + var y = 0; + toArray(rapper.childNodes).forEach(function(span){ + if (span.nodeName !== "SPAN") { return } + var x = 0; + var row = canvas.aa[y++] + if (! row) return + toArray(span.childNodes).forEach(function(el){ + if (x >= row.length) return; + var line; + var colorcode = el.nodeName; + if (colorcode === "SPAN") { + colorcode = "F" + css_lookup[el.style.color] + line = el.innerText || el.textContent + } + else if (colorcode === "#text") { + colorcode = "FA" + line = el.nodeValue + } + else { + line = el.innerText || el.textContent + } + if (colorcode[0] !== "F") { return } + if (colorcode.length == 2) { colorcode += "BB" } + + for (var i = 0; i < line.length; i++, x++) { + var lex = row[x] + if (! lex) return + lex.char = line[i] + lex.fg = alphabet[ colorcode[1] ] + lex.bg = alphabet[ colorcode[3] ] + lex.opacity = 1 + lex.build() + } + }) + }) + }, + + import_text: function () { + var data = import_textarea.value + lines = data.split("\n") + var width = lines.reduce(function(a,b){ console.log(a,b); return Math.max(a, b.length) }, 0) + var height = lines.length + if (width > 200) { + return alert("input too wide") + } + if (height > 200) { + return alert("input too tall") + } + canvas.clear() + lines.forEach(function(line, y){ + var row = canvas.aa[y] + if (! row) return + for (var x = 0; x < line.length; x++) { + var lex = row[x] + if (! lex) return + lex.char = line[x] + lex.fg = brush.bg + lex.opacity = 1 + lex.build() + } + }) + // TODO: some notion of a "selected" region which cuts/clones the underlying region + +// var pasted_region = new Matrix (width, height, function(x,y){ +// var lex = new Lex (x,y) +// lex.char = lines[y][x] || " " +// lex.build() +// return lex +// }) + }, + export_data: function () { + var output + switch (clipboard.format) { + case 'ascii': + output = canvas.ascii() + break + case 'mirc': + output = canvas.mirc() + break + case 'irssi': + output = canvas.irssi() + break + } + import_textarea.value = output + clipboard.focus() + return output + }, - } - - exports.bind() - - return exports - + } + + exports.bind() + + return exports + })() diff --git a/js/color.js b/js/color.js index 415ce5d..a61cdf2 100644 --- a/js/color.js +++ b/js/color.js @@ -34,20 +34,20 @@ function purple (n) { return colors[purple_names[mod(n, 4)|0]] } function dark_gray (n) { return colors[dark_gray_names[mod(n, 4)|0]] } var css_lookup = { - 'rgb(255, 255, 255)': 'A', - 'rgb(0, 0, 0)': 'B', - 'rgb(0, 0, 127)': 'C', - 'rgb(0, 147, 0)': 'D', - 'red': 'E', - 'rgb(127, 0, 0)': 'F', - 'rgb(156, 0, 156)': 'G', - 'rgb(252, 127, 0)': 'H', - 'rgb(255, 255, 0)': 'I', - 'rgb(0, 252, 0)': 'J', - 'rgb(0, 147, 147)': 'K', - 'rgb(0, 255, 255)': 'L', - 'rgb(0, 0, 252)': 'M', - 'rgb(255, 0, 255)': 'N', - 'rgb(127, 127, 127)': 'O', - 'rgb(210, 210, 210)': 'P', + 'rgb(255, 255, 255)': 'A', + 'rgb(0, 0, 0)': 'B', + 'rgb(0, 0, 127)': 'C', + 'rgb(0, 147, 0)': 'D', + 'red': 'E', + 'rgb(127, 0, 0)': 'F', + 'rgb(156, 0, 156)': 'G', + 'rgb(252, 127, 0)': 'H', + 'rgb(255, 255, 0)': 'I', + 'rgb(0, 252, 0)': 'J', + 'rgb(0, 147, 147)': 'K', + 'rgb(0, 255, 255)': 'L', + 'rgb(0, 0, 252)': 'M', + 'rgb(255, 0, 255)': 'N', + 'rgb(127, 127, 127)': 'O', + 'rgb(210, 210, 210)': 'P', }; diff --git a/js/color_code.js b/js/color_code.js index e1a4d55..a5bd376 100644 --- a/js/color_code.js +++ b/js/color_code.js @@ -33,10 +33,10 @@ var MircColor = (function(){ [0,255,255], [0,0,252], [255,0,255], - null, - null, + null, + null, ] - var GRAYS = [ + var GRAYS = [ [255,255,255], [0,0,0], null, @@ -69,8 +69,8 @@ var MircColor = (function(){ null, null, [255,0,255], - null, - null, + null, + null, ] var BLUES = [ [255,255,255], @@ -87,8 +87,8 @@ var MircColor = (function(){ [0,255,255], [0,0,252], [255,0,255], - null, - null, + null, + null, ] var colors = COLORS, recolor_fn = null function set_colors (a) { @@ -111,7 +111,7 @@ var MircColor = (function(){ } function distance(u, v){ - if (! v) return Math.Infinity + if (! v) return Math.Infinity var r = u[0] - v[0] var g = u[1] - v[1] var b = u[2] - v[2] diff --git a/js/draw.js b/js/draw.js index 36be079..4b03254 100644 --- a/js/draw.js +++ b/js/draw.js @@ -54,45 +54,45 @@ var draw = (function(){ } function fill (lex, x, y) { - var q = [ [x,y] ] - var target = canvas.aa[y][x].copy() - var n, w = 0, e = 0, j = 0 - var kk = 0 - // gets into a weird infinite loop if we don't break here.. :\ - if (target.eq(lex)) { return } - LOOP: while (q.length) { - n = q.shift() - if (canvas.aa[n[1]][n[0]].ne(target)) { - continue LOOP - } - w = e = n[0] - j = n[1] - WEST: while (w > 0) { - if (canvas.aa[j][w-1].eq(target)) { - w = w-1 - } - else { - break WEST - } - } - EAST: while (e < canvas.w-1) { - if (canvas.aa[j][e+1].eq(target)) { - e = e+1 - } - else { - break EAST - } - } - for (var i = w; i <= e; i++) { - canvas.aa[j][i].clone(lex) - if (j > 0 && canvas.aa[j-1][i].eq(target)) { - q.push([ i, j-1 ]) - } - if (j < canvas.h-1 && canvas.aa[j+1][i].eq(target)) { - q.push([ i, j+1 ]) - } - } - } + var q = [ [x,y] ] + var target = canvas.aa[y][x].copy() + var n, w = 0, e = 0, j = 0 + var kk = 0 + // gets into a weird infinite loop if we don't break here.. :\ + if (target.eq(lex)) { return } + LOOP: while (q.length) { + n = q.shift() + if (canvas.aa[n[1]][n[0]].ne(target)) { + continue LOOP + } + w = e = n[0] + j = n[1] + WEST: while (w > 0) { + if (canvas.aa[j][w-1].eq(target)) { + w = w-1 + } + else { + break WEST + } + } + EAST: while (e < canvas.w-1) { + if (canvas.aa[j][e+1].eq(target)) { + e = e+1 + } + else { + break EAST + } + } + for (var i = w; i <= e; i++) { + canvas.aa[j][i].clone(lex) + if (j > 0 && canvas.aa[j-1][i].eq(target)) { + q.push([ i, j-1 ]) + } + if (j < canvas.h-1 && canvas.aa[j+1][i].eq(target)) { + q.push([ i, j+1 ]) + } + } + } } var draw = {} diff --git a/js/lex.js b/js/lex.js index 4c08262..eb58753 100644 --- a/js/lex.js +++ b/js/lex.js @@ -1,123 +1,123 @@ function Lex (x,y) { - if (typeof x == "number") { - this.y = y - this.x = x - this.span = document.createElement("span") - } - else { - this.span = x - } - this.fg = colors.white - this.bg = colors.black - this.char = " " - this.opacity = 1 + if (typeof x == "number") { + this.y = y + this.x = x + this.span = document.createElement("span") + } + else { + this.span = x + } + this.fg = colors.white + this.bg = colors.black + this.char = " " + this.opacity = 1 } Lex.prototype.build = function(){ - this.span.className = this.css() - this.span.innerHTML = this.html() + this.span.className = this.css() + this.span.innerHTML = this.html() } Lex.prototype.css = function(){ - if (this.opacity == 0 && ! this.char) return "fabb" - return "f" + letters[mod(this.fg,16)] + "b" + letters[mod(this.bg,16)] + if (this.opacity == 0 && ! this.char) return "fabb" + return "f" + letters[mod(this.fg,16)] + "b" + letters[mod(this.bg,16)] } Lex.prototype.html = function(){ - return this.char == " " ? " " : this.char || " " + return this.char == " " ? " " : this.char || " " } Lex.prototype.read = function(){ - this.char = this.span.innerHTML - return this.char + this.char = this.span.innerHTML + return this.char } Lex.prototype.ascii = function(){ - return this.char || " " + return this.char || " " } Lex.prototype.sanitize = function(){ - switch (this.char) { - case "%": return "%%" - case undefined: - case "": return " " - default: return this.char - } + switch (this.char) { + case "%": return "%%" + case undefined: + case "": return " " + default: return this.char + } } var fgOnly = false Lex.prototype.mirc = function(){ - var char = this.char || " " - if (fgOnly) { - return "\x03" + (this.fg&15) + char - } - if ((this.bg&15) < 10 && parseInt(char)) { - return "\x03" + (this.fg&15) + ",0" + (this.bg&15) + char - } - else { - return "\x03" + (this.fg&15) + "," + (this.bg&15) + char - } + var char = this.char || " " + if (fgOnly) { + return "\x03" + (this.fg&15) + char + } + if ((this.bg&15) < 10 && parseInt(char)) { + return "\x03" + (this.fg&15) + ",0" + (this.bg&15) + char + } + else { + return "\x03" + (this.fg&15) + "," + (this.bg&15) + char + } } Lex.prototype.clone = function (lex){ - if (lex.opacity == 0) return - this.fg = lex.fg - this.bg = lex.bg - this.char = lex.char - this.opacity = lex.opacity - this.build() + if (lex.opacity == 0) return + this.fg = lex.fg + this.bg = lex.bg + this.char = lex.char + this.opacity = lex.opacity + this.build() } Lex.prototype.paint = function (lex){ - if (lex.opacity == 0) return - if (brush.draw_fg) this.fg = lex.fg - if (brush.draw_bg) this.bg = lex.bg - if (brush.draw_char) this.char = lex.char - this.opacity = 1 - this.build() + if (lex.opacity == 0) return + if (brush.draw_fg) this.fg = lex.fg + if (brush.draw_bg) this.bg = lex.bg + if (brush.draw_char) this.char = lex.char + this.opacity = 1 + this.build() } Lex.prototype.copy = function () { - var lex = new Lex (0,0) - lex.clone(this) - return lex + var lex = new Lex (0,0) + lex.clone(this) + return lex } Lex.prototype.erase = function (){ - this.fg = colors.white - this.bg = colors.black - this.char = " " - this.opacity = 0 - this.build() + this.fg = colors.white + this.bg = colors.black + this.char = " " + this.opacity = 0 + this.build() } Lex.prototype.fill = function(fg, bg){ - this.fg = fg - this.bg = bg - this.opacity = 1 - this.build() + this.fg = fg + this.bg = bg + this.opacity = 1 + this.build() } Lex.prototype.eq = function(lex){ - return lex && this.fg == lex.fg && this.bg == lex.bg && this.char == lex.char + return lex && this.fg == lex.fg && this.bg == lex.bg && this.char == lex.char } Lex.prototype.ne = function(lex){ - return ! this.eq(lex) + return ! this.eq(lex) } Lex.prototype.clear = function(){ - this.bg = 1 - this.fg = 0 - this.char = " " - this.opacity = 0 - this.build() + this.bg = 1 + this.fg = 0 + this.char = " " + this.opacity = 0 + this.build() } Lex.prototype.isClear = function(){ - return this.bg == 1 && this.fg == 0 && this.char == " " + return this.bg == 1 && this.fg == 0 && this.char == " " } Lex.prototype.focus = function(){ - if (focused) focused.blur() - this.span.classList.add('focused') - focused = this + if (focused) focused.blur() + this.span.classList.add('focused') + focused = this } Lex.prototype.blur = function(){ - this.span.classList.remove('focused') - focused = null - this.onBlur && this.onBlur() + this.span.classList.remove('focused') + focused = null + this.onBlur && this.onBlur() } Lex.prototype.demolish = function(){ - if (this.span.parentNode) { this.span.parentNode.removeChild(this.span) } - this.span = null + if (this.span.parentNode) { this.span.parentNode.removeChild(this.span) } + this.span = null } Lex.prototype.key = function(char, keyCode) { - if (! char) { return } - this.char = char - this.fg = brush.fg - this.build() + if (! char) { return } + this.char = char + this.fg = brush.fg + this.build() } diff --git a/js/matrix.js b/js/matrix.js index 08f5a79..95314b6 100644 --- a/js/matrix.js +++ b/js/matrix.js @@ -1,102 +1,102 @@ function Matrix (w,h,f){ - this.x = 0 - this.y = 0 - this.w = w - this.h = h - this.f = f - this.initialize() + this.x = 0 + this.y = 0 + this.w = w + this.h = h + this.f = f + this.initialize() } Matrix.prototype.initialize = function(){ - var w = this.w || 1, h = this.h || 1, f = this.f - var aa = new Array (h) - for (var y = 0; y < h; y++) { - aa[y] = new Array (w) - for (var x = 0; x < w; x++) { - aa[y][x] = f(x,y) - } - } - this.aa = aa + var w = this.w || 1, h = this.h || 1, f = this.f + var aa = new Array (h) + for (var y = 0; y < h; y++) { + aa[y] = new Array (w) + for (var x = 0; x < w; x++) { + aa[y][x] = f(x,y) + } + } + this.aa = aa } Matrix.prototype.rebuild = function (){ - this.demolish() - this.initialize() - this.append() - this.bind() - this.generate && this.generate() + this.demolish() + this.initialize() + this.append() + this.bind() + this.generate && this.generate() } Matrix.prototype.bind = function () {} Matrix.prototype.demolish = function (){ - this.forEach(function(lex){ - lex.demolish() - }) - while (this.rapper.firstChild) { + this.forEach(function(lex){ + lex.demolish() + }) + while (this.rapper.firstChild) { this.rapper.removeChild(this.rapper.firstChild); - } - this.aa.forEach(function(row){ - row.length = 0 - }) - this.aa.length = 0 + } + this.aa.forEach(function(row){ + row.length = 0 + }) + this.aa.length = 0 } Matrix.prototype.forEach = function(f){ - this.aa.forEach(function(row, y){ - row.forEach(function(lex, x){ - f(lex, x, y) - }) - }) + this.aa.forEach(function(row, y){ + row.forEach(function(lex, x){ + f(lex, x, y) + }) + }) } Matrix.prototype.focusLex = function(y,x){ - if (x < 0) { - y -= 1 - } - if (x > this.aa[0].length) { - y += 1 - } - this.aa[mod(y,this.h)][mod(x,this.w)].focus() + if (x < 0) { + y -= 1 + } + if (x > this.aa[0].length) { + y += 1 + } + this.aa[mod(y,this.h)][mod(x,this.w)].focus() } Matrix.prototype.clear = function(){ - this.forEach(function(lex,x,y){ lex.clear() }) + this.forEach(function(lex,x,y){ lex.clear() }) } Matrix.prototype.fill = function(fg, bg){ - this.fg = fg - this.bg = bg - this.forEach(function(lex,x,y){ - lex.fill(fg,bg) - lex.build() - }) + this.fg = fg + this.bg = bg + this.forEach(function(lex,x,y){ + lex.fill(fg,bg) + lex.build() + }) } Matrix.prototype.build = function(){ - this.forEach(function(lex,x,y){ - lex.build() - }) + this.forEach(function(lex,x,y){ + lex.build() + }) } Matrix.prototype.append = function(rapper){ - rapper = this.rapper = rapper || this.rapper + rapper = this.rapper = rapper || this.rapper this.aa.forEach(function(row, y){ - var div = document.createElement("div") - row.forEach(function(lex, x) { - div.appendChild(lex.span) - }) - rapper.appendChild( div ) - }) + var div = document.createElement("div") + row.forEach(function(lex, x) { + div.appendChild(lex.span) + }) + rapper.appendChild( div ) + }) } Matrix.prototype.region = function(w,h,x,y) { - w = w || 1 - h = h || 1 - x = x || 0 - y = y || 0 - var parent = this - var mat = new Matrix(w, h, function(x,y){ - return parent.aa[y][x] - }) - mat.f = this.f - return mat + w = w || 1 + h = h || 1 + x = x || 0 + y = y || 0 + var parent = this + var mat = new Matrix(w, h, function(x,y){ + return parent.aa[y][x] + }) + mat.f = this.f + return mat } Matrix.prototype.setCell = function(lex,x,y){ - this.aa[y] && this.aa[y][x] && this.aa[y][x].clone(lex) + this.aa[y] && this.aa[y][x] && this.aa[y][x].clone(lex) } Matrix.prototype.getCell = function(x,y){ - if (this.aa[y] && this.aa[y][x]) return this.aa[y][x] - else return null + if (this.aa[y] && this.aa[y][x]) return this.aa[y][x] + else return null } Matrix.prototype.resize = function(w,h){ var div, row, lex @@ -155,10 +155,10 @@ Matrix.prototype.ascii = function () { var lines = this.aa.map(function(row, y){ var last, line = "" row.forEach(function(lex, x) { - line += lex.ascii() - }) + line += lex.ascii() + }) return line // .replace(/\s+$/,"") - }) + }) var txt = lines.join("\n") return txt } @@ -166,22 +166,22 @@ Matrix.prototype.mirc = function () { var lines = this.aa.map(function(row, y){ var last, line = "" row.forEach(function(lex, x) { - if (lex.eq(last)) { - line += lex.sanitize() - } - else { - if (x > 0 && last) line += "\x03" - line += lex.mirc() - last = lex - } - }) - if (last && ! last.isClear()) { line += "\x03" } + if (lex.eq(last)) { + line += lex.sanitize() + } + else { + if (x > 0 && last) line += "\x03" + line += lex.mirc() + last = lex + } + }) + if (last && ! last.isClear()) { line += "\x03" } return line - }).filter(function(line){ return line.length > 0 }) - return lines.join("\n") + }).filter(function(line){ return line.length > 0 }) + return lines.join("\n") } Matrix.prototype.irssi = function(){ - var txt = this.mirc() + var txt = this.mirc() .replace(/\%/g, '%%') .replace(/\\/g, '\\x5C') .replace(/\"/g, '\\\"') @@ -194,23 +194,23 @@ Matrix.prototype.irssi = function(){ .replace(/\n/g, '\\n') .replace(/\x02/g, '\\x02') .replace(/\x03/g, '\\x03') - // console.log(txt.length) - var escaped_txt = "", kode - for (var i = 0; i < txt.length; i++) { - kode = txt.charCodeAt(i) - if (kode > 0x7f) { - kode = kode.toString(16) - switch (kode.length) { - case 2: - kode = "0" + kode - case 3: - kode = "0" + kode - } - escaped_txt += "\\u" + kode - } - else { - escaped_txt += txt[i] - } - } + // console.log(txt.length) + var escaped_txt = "", kode + for (var i = 0; i < txt.length; i++) { + kode = txt.charCodeAt(i) + if (kode > 0x7f) { + kode = kode.toString(16) + switch (kode.length) { + case 2: + kode = "0" + kode + case 3: + kode = "0" + kode + } + escaped_txt += "\\u" + kode + } + else { + escaped_txt += txt[i] + } + } return '/exec -out printf "' + escaped_txt + '"\n' } diff --git a/js/shader.js b/js/shader.js index 55bb2c7..8d13546 100644 --- a/js/shader.js +++ b/js/shader.js @@ -1,46 +1,46 @@ var shader = (function(){ - var fn_str, fn, lex - var exports = {} - var animating = false - - exports.init = function(){ - lex = new Lex (0, 0) - exports.build(demo_shader.innerHTML) - } - exports.build = function (fn_str){ - try { - new_fn = new Function('lex', 'x', 'y', 'w', 'h', 't', fn_str) - new_fn(lex, 0, 0, 1, 1, 0) - } - catch (e) { - throw 'Shader execution error' - } - exports.fn = fn = new_fn - return fn - } - exports.run = function(canvas){ - var t = +new Date, w = canvas.w, h = canvas.h - canvas.forEach(function(lex, x, y){ - fn(lex, x, y, w, h, t) - lex.build() - }) - } - exports.toggle = function(state){ - animating = typeof state == "boolean" ? state : ! animating - return animating - } - exports.pause = function(){ - animating = false - } - exports.play = function(){ - animating = true - } - exports.animate = function (t){ - requestAnimationFrame(exports.animate) - if (! animating) { return } - exports.run(canvas) - } - - return exports + var fn_str, fn, lex + var exports = {} + var animating = false + + exports.init = function(){ + lex = new Lex (0, 0) + exports.build(demo_shader.innerHTML) + } + exports.build = function (fn_str){ + try { + new_fn = new Function('lex', 'x', 'y', 'w', 'h', 't', fn_str) + new_fn(lex, 0, 0, 1, 1, 0) + } + catch (e) { + throw 'Shader execution error' + } + exports.fn = fn = new_fn + return fn + } + exports.run = function(canvas){ + var t = +new Date, w = canvas.w, h = canvas.h + canvas.forEach(function(lex, x, y){ + fn(lex, x, y, w, h, t) + lex.build() + }) + } + exports.toggle = function(state){ + animating = typeof state == "boolean" ? state : ! animating + return animating + } + exports.pause = function(){ + animating = false + } + exports.play = function(){ + animating = true + } + exports.animate = function (t){ + requestAnimationFrame(exports.animate) + if (! animating) { return } + exports.run(canvas) + } + + return exports })() diff --git a/js/tool.js b/js/tool.js index d3d40c1..3bd397c 100644 --- a/js/tool.js +++ b/js/tool.js @@ -1,23 +1,23 @@ var Tool = Model({ - init: function (span) { - this.el = span - this.lex = new Lex (span) - this.name = span.innerHTML - this.span = span - }, - use: function(){}, - focus: function(){ - // focused && focused.blur() - current_tool && current_tool.blur() - current_tool = this - this.span.classList.add('focused') - this.use() - if (this.name != 'shader') { cursor_input.focus() } - }, - blur: function(){ - current_tool = null - this.span.classList.remove('focused') - } + init: function (span) { + this.el = span + this.lex = new Lex (span) + this.name = span.innerHTML + this.span = span + }, + use: function(){}, + focus: function(){ + // focused && focused.blur() + current_tool && current_tool.blur() + current_tool = this + this.span.classList.add('focused') + this.use() + if (this.name != 'shader') { cursor_input.focus() } + }, + blur: function(){ + current_tool = null + this.span.classList.remove('focused') + } }) var Checkbox = Tool.extend({ @@ -28,7 +28,7 @@ var Checkbox = Tool.extend({ this.update(state) }, update: function(state){ - if (state) this.el.innerHTML = "x " + this.name - else this.el.innerHTML = "_ " + this.name + if (state) this.el.innerHTML = "x " + this.name + else this.el.innerHTML = "_ " + this.name } }) 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){ - - 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) { + 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) { 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 })() diff --git a/js/util.js b/js/util.js index 81e8f60..3dbc5ac 100644 --- a/js/util.js +++ b/js/util.js @@ -116,8 +116,8 @@ function weave(a){ return b } function cssRule (selector, declaration) { - var x = document.styleSheets, y = x.length-1; - x[y].insertRule(selector+"{"+declaration+"}", x[y].cssRules.length); + var x = document.styleSheets, y = x.length-1; + x[y].insertRule(selector+"{"+declaration+"}", x[y].cssRules.length); } // easing functions -- cgit v1.2.3-70-g09d2