haskal
/
asciiflow2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixed lines mode, added mode dialog so you can switch, removed buggy tooltips from mobile for now.

This commit is contained in:
Lewis Hemens 2014-03-10 22:54:02 +00:00
parent 007aafe54a
commit a7386ac4bc
5 changed files with 210 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -119,12 +119,17 @@ textarea {
display: none; display: none;
} }
/* Horrible hack to stop touble tap events on mobile/tablet. */
/* TODO: Enable tooltips on mobile without double tap .*/
media(min-width:800px) {
.tool:hover > .tooltip { .tool:hover > .tooltip {
display: block; display: block;
position: fixed; position: fixed;
bottom: 5px; bottom: 5px;
left: 5px; left: 5px;
} }
}
</style> </style>
</head> </head>
@ -163,7 +168,8 @@ textarea {
<button id="export-button" class="tool">Export</button> <button id="export-button" class="tool">Export</button>
<button id="import-button" class="tool">Import</button> <button id="import-button" class="tool">Import</button>
<button id="save-button" class="tool">Save</button> <button id="save-button" class="tool">Save</button>
<button id="save-button" class="tool">Open</button> <!-- <button id="save-button" class="tool">Open</button> -->
<button id="options-button" class="tool">Mode</button>
</div> </div>
<div id="edit-tools"> <div id="edit-tools">
<button id="clear-button" class="tool">Clear</button> <button id="clear-button" class="tool">Clear</button>
@ -177,6 +183,12 @@ textarea {
<textarea id="export-area"></textarea> <textarea id="export-area"></textarea>
<button class="close-dialog-button">Close</button> <button class="close-dialog-button">Close</button>
</div> </div>
<div id="options-button-dialog" class="dialog">
<button id="use-lines-button">Lines Mode</button>
<button id="use-ascii-button">ASCII Mode</button>
</div>
<div id="import-button-dialog" class="dialog"> <div id="import-button-dialog" class="dialog">
<textarea id="import-area"></textarea> <textarea id="import-area"></textarea>
<button class="close-dialog-button">Close</button> <button class="close-dialog-button">Close</button>

309
js-compiled.js
View File

@ -1,7 +1,7 @@
try { try {
throw 1; throw 1;
} catch (aa) { } catch (aa) {
window.B = window.B || {}; window.C = window.C || {};
} }
var ba = "ontouchstart" in window || "onmsgesturechange" in window; var ba = "ontouchstart" in window || "onmsgesturechange" in window;
function f(a, b) { function f(a, b) {
@ -30,11 +30,11 @@ var n = new f(-1, 0), p = new f(1, 0), q = new f(0, -1), r = new f(0, 1), s = [n
function ca() { function ca() {
this.f = this.value = null; this.f = this.value = null;
} }
function u(a) { function v(a) {
return null != a.f ? a.f : a.value; return null != a.f ? a.f : a.value;
} }
function v(a) { function w(a) {
return "+" == u(a); return "+" == v(a);
} }
function da(a, b, c, e) { function da(a, b, c, e) {
this.left = a; this.left = a;
@ -42,7 +42,7 @@ function da(a, b, c, e) {
this.n = c; this.n = c;
this.j = e; this.j = e;
} }
function w(a) { function x(a) {
return a.left + a.right + a.n + a.j; return a.left + a.right + a.n + a.j;
} }
function ea(a, b) { function ea(a, b) {
@ -51,25 +51,25 @@ function ea(a, b) {
} }
function fa(a, b) { function fa(a, b) {
this.position = a; this.position = a;
this.w = b; this.A = b;
} }
;function x(a) { ;function y(a) {
this.state = a; this.state = a;
this.canvas = document.getElementById("ascii-canvas"); this.canvas = document.getElementById("ascii-canvas");
this.context = this.canvas.getContext("2d"); this.context = this.canvas.getContext("2d");
this.zoom = 1; this.zoom = 1;
this.offset = new f(7500, 7500); this.offset = new f(7500, 7500);
this.d = !0; this.s = this.c = !0;
y(this); z(this);
} }
function y(a) { function z(a) {
a.canvas.width = document.documentElement.clientWidth; a.canvas.width = document.documentElement.clientWidth;
a.canvas.height = document.documentElement.clientHeight; a.canvas.height = document.documentElement.clientHeight;
a.d = !0; a.c = !0;
} }
x.prototype.animate = function() { y.prototype.animate = function() {
if (this.d || this.state.d) { if (this.c || this.state.c) {
this.d = !1, this.state.d = !1, ga(this); this.c = !1, this.state.c = !1, ga(this);
} }
var a = this; var a = this;
window.requestAnimationFrame(function() { window.requestAnimationFrame(function() {
@ -82,7 +82,7 @@ function ga(a) {
b.clearRect(0, 0, a.canvas.width, a.canvas.height); b.clearRect(0, 0, a.canvas.width, a.canvas.height);
b.scale(a.zoom, a.zoom); b.scale(a.zoom, a.zoom);
b.translate(a.canvas.width / 2 / a.zoom, a.canvas.height / 2 / a.zoom); b.translate(a.canvas.width / 2 / a.zoom, a.canvas.height / 2 / a.zoom);
var c = z(a, new f(-70, -70)), e = z(a, new f(a.canvas.width + 70, a.canvas.height + 70)); var c = m(A(a, new f(0, 0)), new f(3, 3)), e = A(a, new f(a.canvas.width, a.canvas.height)).add(new f(3, 3));
b.lineWidth = "1"; b.lineWidth = "1";
b.strokeStyle = "#EEEEEE"; b.strokeStyle = "#EEEEEE";
b.beginPath(); b.beginPath();
@ -93,55 +93,72 @@ function ga(a) {
b.moveTo(0 - a.offset.x, 17 * d - a.offset.y), b.lineTo(9 * a.state.cells.length - a.offset.x, 17 * d - a.offset.y); b.moveTo(0 - a.offset.x, 17 * d - a.offset.y), b.lineTo(9 * a.state.cells.length - a.offset.x, 17 * d - a.offset.y);
} }
a.context.stroke(); a.context.stroke();
d = !a.s;
b.font = "15px Courier New"; b.font = "15px Courier New";
for (d = c.x;d < e.x;d++) { for (var g = c.x;g < e.x;g++) {
for (var h = c.y;h < e.y;h++) { for (var k = c.y;k < e.y;k++) {
var g = A(a.state, new f(d, h)); var h = B(a.state, new f(g, k));
if (v(g) || null != g.f && " " != u(g)) { if (w(h) || null != h.f && " " != v(h)) {
a.context.fillStyle = null != g.f ? "#DEF" : "#F5F5F5", b.fillRect(9 * d - a.offset.x, 17 * (h - 1) - a.offset.y, 9, 17); a.context.fillStyle = null != h.f ? "#DEF" : "#F5F5F5", b.fillRect(9 * g - a.offset.x, 17 * (k - 1) - a.offset.y, 9, 17);
} }
g = C(a.state, new f(d, h)); var t = D(a.state, new f(g, k));
null != g && (a.context.fillStyle = "#000000", b.fillText(g, 9 * d - a.offset.x, 17 * h - a.offset.y - 3)); null == t || w(h) && !d || (a.context.fillStyle = "#000000", b.fillText(t, 9 * g - a.offset.x, 17 * k - a.offset.y - 3));
} }
} }
if (a.s) {
b.lineWidth = "1";
b.strokeStyle = "#000000";
b.beginPath();
for (d = c.x;d < e.x;d++) {
for (h = !1, g = c.y;g < e.y;g++) {
k = B(a.state, new f(d, g)), w(k) && g != e.y - 1 || !h || (b.moveTo(9 * d - a.offset.x + 4.5, 17 * h - a.offset.y - 8.5), b.lineTo(9 * d - a.offset.x + 4.5, 17 * (g - 1) - a.offset.y - 8.5), h = !1), w(k) && !h && (h = g);
}
}
for (g = c.y;g < e.y;g++) {
for (h = !1, d = c.x;d < e.x;d++) {
k = B(a.state, new f(d, g)), w(k) && d != e.x - 1 || !h || (b.moveTo(9 * h - a.offset.x + 4.5, 17 * g - a.offset.y - 8.5), b.lineTo(9 * (d - 1) - a.offset.x + 4.5, 17 * g - a.offset.y - 8.5), h = !1), w(k) && !h && (h = d);
}
}
a.context.stroke();
}
} }
function z(a, b) { function A(a, b) {
return new f(Math.min(Math.max(1, Math.round(((new f((b.x - a.canvas.width / 2) / a.zoom + a.offset.x, (b.y - a.canvas.height / 2) / a.zoom + a.offset.y)).x - 4.5) / 9)), 1998), Math.min(Math.max(1, Math.round(((new f((b.x - a.canvas.width / 2) / a.zoom + a.offset.x, (b.y - a.canvas.height / 2) / a.zoom + a.offset.y)).y + 8.5) / 17)), 598)); return new f(Math.min(Math.max(1, Math.round(((new f((b.x - a.canvas.width / 2) / a.zoom + a.offset.x, (b.y - a.canvas.height / 2) / a.zoom + a.offset.y)).x - 4.5) / 9)), 1998), Math.min(Math.max(1, Math.round(((new f((b.x - a.canvas.width / 2) / a.zoom + a.offset.x, (b.y - a.canvas.height / 2) / a.zoom + a.offset.y)).y + 8.5) / 17)), 598));
} }
;function D(a, b, c, e, d) { ;function E(a, b, c, e, d) {
d = d || "+"; d = d || "+";
var h = Math.min(b.x, c.x), g = Math.min(b.y, c.y), k = Math.max(b.x, c.x), J = Math.max(b.y, c.y), t = e ? c.x : b.x; var g = Math.min(b.x, c.x), k = Math.min(b.y, c.y), h = Math.max(b.x, c.x), t = Math.max(b.y, c.y), u = e ? c.x : b.x;
for (e = e ? b.y : c.y;h++ < k;) { for (e = e ? b.y : c.y;g++ < h;) {
var O = new f(h, e), H = a.getContext(new f(h, e)); var O = new f(g, e), J = a.getContext(new f(g, e));
" " == d && 2 == H.n + H.j || E(a, O, d); " " == d && 2 == J.n + J.j || F(a, O, d);
} }
for (;g++ < J;) { for (;k++ < t;) {
O = new f(t, g), H = a.getContext(new f(t, g)), " " == d && 2 == H.left + H.right || E(a, O, d); O = new f(u, k), J = a.getContext(new f(u, k)), " " == d && 2 == J.left + J.right || F(a, O, d);
} }
F(a, b, d); G(a, b, d);
F(a, c, d); G(a, c, d);
E(a, new f(t, e), d); F(a, new f(u, e), d);
} }
function G(a) { function H(a) {
this.state = a; this.state = a;
this.a = null; this.a = null;
} }
G.prototype.start = function(a) { H.prototype.start = function(a) {
this.a = a; this.a = a;
}; };
G.prototype.move = function(a) { H.prototype.move = function(a) {
this.l = a; this.l = a;
I(this.state); I(this.state);
D(this.state, this.a, a, !0); E(this.state, this.a, a, !0);
D(this.state, this.a, a, !1); E(this.state, this.a, a, !1);
}; };
G.prototype.end = function() { H.prototype.end = function() {
K(this.state); K(this.state);
}; };
G.prototype.m = function() { H.prototype.m = function() {
return "crosshair"; return "crosshair";
}; };
G.prototype.h = function() { H.prototype.h = function() {
}; };
function L(a) { function L(a) {
this.state = a; this.state = a;
@ -153,7 +170,7 @@ L.prototype.start = function(a) {
L.prototype.move = function(a) { L.prototype.move = function(a) {
I(this.state); I(this.state);
var b = this.state.getContext(this.a), c = this.state.getContext(a); var b = this.state.getContext(this.a), c = this.state.getContext(a);
D(this.state, this.a, a, b.n && b.j || c.left && c.right); E(this.state, this.a, a, b.n && b.j || c.left && c.right);
}; };
L.prototype.end = function() { L.prototype.end = function() {
K(this.state); K(this.state);
@ -168,10 +185,10 @@ function M(a, b) {
this.value = b; this.value = b;
} }
M.prototype.start = function(a) { M.prototype.start = function(a) {
F(this.state, a, this.value); G(this.state, a, this.value);
}; };
M.prototype.move = function(a) { M.prototype.move = function(a) {
F(this.state, a, this.value); G(this.state, a, this.value);
}; };
M.prototype.end = function() { M.prototype.end = function() {
K(this.state); K(this.state);
@ -189,8 +206,8 @@ function N(a) {
N.prototype.start = function(a) { N.prototype.start = function(a) {
this.e = this.a = a; this.e = this.a = a;
I(this.state); I(this.state);
var b = u(A(this.state, a)); var b = v(B(this.state, a));
F(this.state, a, null == b ? "\u2009" : b); G(this.state, a, null == b ? "\u2009" : b);
}; };
N.prototype.move = function() { N.prototype.move = function() {
}; };
@ -202,18 +219,18 @@ N.prototype.m = function() {
N.prototype.h = function(a) { N.prototype.h = function(a) {
if (null != this.e) { if (null != this.e) {
var b = this.e.add(p); var b = this.e.add(p);
if ("<enter>" == a || v(A(this.state, b))) { if ("<enter>" == a || w(B(this.state, b))) {
I(this.state), this.a = b = this.a.add(r); I(this.state), this.a = b = this.a.add(r);
} }
"<backspace>" == a && this.a.x <= b.x && (I(this.state), b = this.e.add(n), b.x < this.a.x && (b.x = this.a.x), F(this.state, b, "\u2009"), K(this.state)); "<backspace>" == a && this.a.x <= b.x && (I(this.state), b = this.e.add(n), b.x < this.a.x && (b.x = this.a.x), G(this.state, b, "\u2009"), K(this.state));
"<up>" == a && (I(this.state), this.a = b = this.e.add(q)); "<up>" == a && (I(this.state), this.a = b = this.e.add(q));
"<left>" == a && (I(this.state), this.a = b = this.e.add(n)); "<left>" == a && (I(this.state), this.a = b = this.e.add(n));
"<right>" == a && (I(this.state), this.a = b = this.e.add(p)); "<right>" == a && (I(this.state), this.a = b = this.e.add(p));
"<down>" == a && (I(this.state), this.a = b = this.e.add(r)); "<down>" == a && (I(this.state), this.a = b = this.e.add(r));
1 == a.length && (F(this.state, this.e, a), K(this.state)); 1 == a.length && (G(this.state, this.e, a), K(this.state));
this.e = b; this.e = b;
a = u(A(this.state, b)); a = v(B(this.state, b));
F(this.state, b, null == a ? "\u2009" : a); G(this.state, b, null == a ? "\u2009" : a);
} }
}; };
function P(a) { function P(a) {
@ -231,7 +248,7 @@ P.prototype.move = function(a) {
a = Math.min(this.a.y, this.l.y); a = Math.min(this.a.y, this.l.y);
for (var c = Math.max(this.a.x, this.l.x), e = Math.max(this.a.y, this.l.y);b <= c;b++) { for (var c = Math.max(this.a.x, this.l.x), e = Math.max(this.a.y, this.l.y);b <= c;b++) {
for (var d = a;d <= e;d++) { for (var d = a;d <= e;d++) {
F(this.state, new f(b, d), "\u2009"); G(this.state, new f(b, d), "\u2009");
} }
} }
}; };
@ -248,27 +265,27 @@ function Q(a) {
this.g = this.a = null; this.g = this.a = null;
} }
Q.prototype.start = function(a) { Q.prototype.start = function(a) {
if (ba && !v(A(this.state, a))) { if (ba && !w(B(this.state, a))) {
var b = s.concat([n.add(q), n.add(r), p.add(q), p.add(r)]), c = null, e = 0, d; var b = s.concat([n.add(q), n.add(r), p.add(q), p.add(r)]), c = null, e = 0, d;
for (d in b) { for (d in b) {
var h = a.add(b[d]), g = w(this.state.getContext(h)); var g = a.add(b[d]), k = x(this.state.getContext(g));
v(A(this.state, h)) && g > e && (c = b[d], e = g); w(B(this.state, g)) && k > e && (c = b[d], e = k);
} }
a = null == c ? a : a.add(c); a = null == c ? a : a.add(c);
} }
this.a = a; this.a = a;
this.g = null; this.g = null;
if (v(A(this.state, this.a))) { if (w(B(this.state, this.a))) {
this.state.getContext(this.a); this.state.getContext(this.a);
a = []; a = [];
for (var k in s) { for (var h in s) {
var b = R(this, this.a, s[k]), J; var b = R(this, this.a, s[h]), t;
for (J in b) { for (t in b) {
if (c = b[J], e = 0 != s[k].x, 1 == w(this.state.getContext(c))) { if (c = b[t], e = 0 != s[h].x, 1 == x(this.state.getContext(c))) {
a.push({position:c, t:e}); a.push({position:c, u:e});
} else { } else {
for (var t in s) { for (var u in s) {
0 != s[k].add(s[t]).length() && 2 != s[k].add(s[t]).length() && (d = R(this, c, s[t]), 0 != d.length && a.push({position:d[d.length - 1], t:e})); 0 != s[h].add(s[u]).length() && 2 != s[h].add(s[u]).length() && (d = R(this, c, s[u]), 0 != d.length && a.push({position:d[d.length - 1], u:e}));
} }
} }
} }
@ -280,10 +297,10 @@ Q.prototype.start = function(a) {
Q.prototype.move = function(a) { Q.prototype.move = function(a) {
I(this.state); I(this.state);
for (var b in this.g) { for (var b in this.g) {
D(this.state, this.a, this.g[b].position, this.g[b].t, " "); E(this.state, this.a, this.g[b].position, this.g[b].u, " ");
} }
for (b in this.g) { for (b in this.g) {
D(this.state, a, this.g[b].position, this.g[b].t); E(this.state, a, this.g[b].position, this.g[b].u);
} }
}; };
Q.prototype.end = function() { Q.prototype.end = function() {
@ -291,23 +308,23 @@ Q.prototype.end = function() {
}; };
function R(a, b, c) { function R(a, b, c) {
for (var e = b.clone(), d = [];;) { for (var e = b.clone(), d = [];;) {
var h = e.add(c); var g = e.add(c);
if (!v(A(a.state, h))) { if (!w(B(a.state, g))) {
return l(b, e) || d.push(e), d; return l(b, e) || d.push(e), d;
} }
e = h; e = g;
3 == w(a.state.getContext(e)) && d.push(e); 3 == x(a.state.getContext(e)) && d.push(e);
} }
} }
Q.prototype.m = function(a) { Q.prototype.m = function(a) {
return v(A(this.state, a)) ? "pointer" : "default"; return w(B(this.state, a)) ? "pointer" : "default";
}; };
Q.prototype.h = function() { Q.prototype.h = function() {
}; };
function S() { function S() {
this.cells = Array(2E3); this.cells = Array(2E3);
this.i = []; this.i = [];
this.d = !0; this.c = !0;
this.q = []; this.q = [];
for (var a = 0;a < this.cells.length;a++) { for (var a = 0;a < this.cells.length;a++) {
this.cells[a] = Array(600); this.cells[a] = Array(600);
@ -319,31 +336,31 @@ function S() {
S.prototype.clear = function() { S.prototype.clear = function() {
for (var a = 0;a < this.cells.length;a++) { for (var a = 0;a < this.cells.length;a++) {
for (var b = 0;b < this.cells[a].length;b++) { for (var b = 0;b < this.cells[a].length;b++) {
null != u(this.cells[a][b]) && F(this, new f(a, b), "\u2009"); null != v(this.cells[a][b]) && G(this, new f(a, b), "\u2009");
} }
} }
K(this); K(this);
}; };
function A(a, b) { function B(a, b) {
return a.cells[b.x][b.y]; return a.cells[b.x][b.y];
} }
function F(a, b, c) { function G(a, b, c) {
var e = A(a, b); var e = B(a, b);
a.i.push(new fa(b, e)); a.i.push(new fa(b, e));
e.f = c; e.f = c;
a.d = !0; a.c = !0;
} }
function E(a, b, c) { function F(a, b, c) {
u(A(a, b)) != c && F(a, b, c); v(B(a, b)) != c && G(a, b, c);
} }
function I(a) { function I(a) {
for (var b in a.i) { for (var b in a.i) {
a.i[b].w.f = null; a.i[b].A.f = null;
} }
a.i.length = 0; a.i.length = 0;
} }
function C(a, b) { function D(a, b) {
var c = A(a, b), c = null != c.f ? c.f : c.value; var c = B(a, b), c = null != c.f ? c.f : c.value;
if ("+" != c) { if ("+" != c) {
return c; return c;
} }
@ -351,8 +368,8 @@ function C(a, b) {
return c.left && c.right && !c.n && !c.j ? "\u2013" : !c.left && !c.right && c.n && c.j ? "|" : c.left && c.right && c.n && c.j ? "\u2013" : "+"; return c.left && c.right && !c.n && !c.j ? "\u2013" : !c.left && !c.right && c.n && c.j ? "|" : c.left && c.right && c.n && c.j ? "\u2013" : "+";
} }
S.prototype.getContext = function(a) { S.prototype.getContext = function(a) {
var b = v(A(this, a.add(n))), c = v(A(this, a.add(p))), e = v(A(this, a.add(q))); var b = w(B(this, a.add(n))), c = w(B(this, a.add(p))), e = w(B(this, a.add(q)));
a = v(A(this, a.add(r))); a = w(B(this, a.add(r)));
return new da(b, c, e, a); return new da(b, c, e, a);
}; };
function K(a, b) { function K(a, b) {
@ -362,25 +379,25 @@ function K(a, b) {
return e.indexOf(e[b]) == b; return e.indexOf(e[b]) == b;
}); });
a.i.length = 0; a.i.length = 0;
for (var h in d) { for (var g in d) {
var g = d[h].w; var k = d[g].A;
c.push(new ea(d[h].position, null != g.value ? g.value : " ")); c.push(new ea(d[g].position, null != k.value ? k.value : " "));
var k = u(g); var h = v(k);
if ("\u2009" == k || " " == k) { if ("\u2009" == h || " " == h) {
k = null; h = null;
} }
g.f = null; k.f = null;
g.value = k; k.value = h;
} }
!b && 0 < c.length && (50 < a.q.length && a.q.shift(), a.q.push(c)); !b && 0 < c.length && (50 < a.q.length && a.q.shift(), a.q.push(c));
a.d = !0; a.c = !0;
} }
function T(a) { function T(a) {
if (0 != a.q.length) { if (0 != a.q.length) {
var b = a.q.pop(), c; var b = a.q.pop(), c;
for (c in b) { for (c in b) {
var e = b[c]; var e = b[c];
F(a, e.position, e.value); G(a, e.position, e.value);
} }
K(a, !0); K(a, !0);
} }
@ -388,51 +405,51 @@ function T(a) {
function U(a) { function U(a) {
for (var b = new f(Number.MAX_VALUE, Number.MAX_VALUE), c = new f(-1, -1), e = 0;e < a.cells.length;e++) { for (var b = new f(Number.MAX_VALUE, Number.MAX_VALUE), c = new f(-1, -1), e = 0;e < a.cells.length;e++) {
for (var d = 0;d < a.cells[e].length;d++) { for (var d = 0;d < a.cells[e].length;d++) {
null != u(a.cells[e][d]) && (e < b.x && (b.x = e), d < b.y && (b.y = d), e > c.x && (c.x = e), d > c.y && (c.y = d)); null != v(a.cells[e][d]) && (e < b.x && (b.x = e), d < b.y && (b.y = d), e > c.x && (c.x = e), d > c.y && (c.y = d));
} }
} }
if (0 > c.x) { if (0 > c.x) {
return ""; return "";
} }
for (var h = "", d = b.y;d <= c.y;d++) { for (var g = "", d = b.y;d <= c.y;d++) {
for (var g = "", e = b.x;e <= c.x;e++) { for (var k = "", e = b.x;e <= c.x;e++) {
var k = C(a, new f(e, d)), g = g + (null == k ? " " : k) var h = D(a, new f(e, d)), k = k + (null == h ? " " : h)
} }
h += g.replace("\\s+$/g", "") + "\n"; g += k.replace("\\s+$/g", "") + "\n";
} }
return h; return g;
} }
;function V(a, b) { ;function V(a, b) {
this.view = a; this.view = a;
this.state = b; this.state = b;
this.c = new G(b); this.d = new H(b);
this.mode = 0; this.mode = 0;
this.o(); this.o();
} }
V.prototype.r = function(a) { V.prototype.r = function(a) {
var b = z(this.view, a); var b = A(this.view, a);
null == this.p && (this.p = b); null == this.p && (this.p = b);
l(b, this.p) || (this.view.canvas.style.cursor = this.c.m(b)); l(b, this.p) || (this.view.canvas.style.cursor = this.d.m(b));
2 != this.mode || l(b, this.p) || this.c.move(b); 2 != this.mode || l(b, this.p) || this.d.move(b);
if (1 == this.mode) { if (1 == this.mode) {
var c = this.view; var c = this.view;
a = this.v.add(m(this.u, a).scale(1 / this.view.zoom)); a = this.w.add(m(this.v, a).scale(1 / this.view.zoom));
c.offset = a; c.offset = a;
c.d = !0; c.c = !0;
} }
this.p = b; this.p = b;
}; };
function W(a) { function W(a) {
(a.mode = 2) && a.c.end(); (a.mode = 2) && a.d.end();
a.mode = 0; a.mode = 0;
a.u = null;
a.v = null; a.v = null;
a.w = null;
a.p = null; a.p = null;
} }
V.prototype.o = function() { V.prototype.o = function() {
var a = this; var a = this;
$(window).resize(function() { $(window).resize(function() {
y(a.view); z(a.view);
}); });
$("button.tool").click(function(a) { $("button.tool").click(function(a) {
a = a.target.id; a = a.target.id;
@ -440,12 +457,12 @@ V.prototype.o = function() {
$(".dialog").removeClass("visible"); $(".dialog").removeClass("visible");
$("#" + a).toggleClass("active"); $("#" + a).toggleClass("active");
$("#" + a + "-dialog").toggleClass("visible"); $("#" + a + "-dialog").toggleClass("visible");
"box-button" == a && (this.c = new G(this.state)); "box-button" == a && (this.d = new H(this.state));
"line-button" == a && (this.c = new L(this.state)); "line-button" == a && (this.d = new L(this.state));
"freeform-button" == a && (this.c = new M(this.state, "+")); "freeform-button" == a && (this.d = new M(this.state, "+"));
"erase-button" == a && (this.c = new P(this.state)); "erase-button" == a && (this.d = new P(this.state));
"move-button" == a && (this.c = new Q(this.state)); "move-button" == a && (this.d = new Q(this.state));
"text-button" == a && (this.c = new N(this.state)); "text-button" == a && (this.d = new N(this.state));
"export-button" == a && $("#export-area").val(U(this.state)); "export-button" == a && $("#export-area").val(U(this.state));
"clear-button" == a && this.state.clear(); "clear-button" == a && this.state.clear();
"undo-button" == a && T(this.state); "undo-button" == a && T(this.state);
@ -455,20 +472,30 @@ V.prototype.o = function() {
}.bind(this)); }.bind(this));
$("#import-submit-button").click(function() { $("#import-submit-button").click(function() {
this.state.clear(); this.state.clear();
for (var a = this.state, c = $("#import-area").val(), e = z(this.view, new f(this.view.canvas.width / 4, this.view.canvas.height / 4)), c = c.split("\n"), d = 0;d < c.length;d++) { for (var a = this.state, c = $("#import-area").val(), e = A(this.view, new f(this.view.canvas.width / 4, this.view.canvas.height / 4)), c = c.split("\n"), d = 0;d < c.length;d++) {
for (var h = c[d], g = 0;g < h.length;g++) { for (var g = c[d], k = 0;k < g.length;k++) {
var k = h.charAt(g); var h = g.charAt(k);
if ("\u2013" == k || "|" == k) { if ("\u2013" == h || "|" == h) {
k = "+"; h = "+";
} }
F(a, (new f(g, d)).add(e), k); G(a, (new f(k, d)).add(e), h);
} }
} }
K(a); K(a);
$("#import-area").val(""); $("#import-area").val("");
}.bind(this)); }.bind(this));
$("#use-lines-button").click(function() {
$(".dialog").removeClass("visible");
this.view.s = !0;
this.view.c = !0;
}.bind(this));
$("#use-ascii-button").click(function() {
$(".dialog").removeClass("visible");
this.view.s = !1;
this.view.c = !1;
}.bind(this));
$(window).keypress(function(a) { $(window).keypress(function(a) {
a.ctrlKey || a.metaKey || 13 == a.keyCode || this.c.h(String.fromCharCode(a.keyCode)); a.ctrlKey || a.metaKey || 13 == a.keyCode || this.d.h(String.fromCharCode(a.keyCode));
}.bind(this)); }.bind(this));
$(window).keydown(function(a) { $(window).keydown(function(a) {
var c = null; var c = null;
@ -481,7 +508,7 @@ V.prototype.o = function() {
40 == a.keyCode && (c = "<down>"); 40 == a.keyCode && (c = "<down>");
37 == a.keyCode && (c = "<left>"); 37 == a.keyCode && (c = "<left>");
39 == a.keyCode && (c = "<right>"); 39 == a.keyCode && (c = "<right>");
null != c && this.c.h(c); null != c && this.d.h(c);
}.bind(this)); }.bind(this));
}; };
function X(a) { function X(a) {
@ -532,17 +559,17 @@ ka.prototype.o = function() {
a = Math.max(Math.min(a, 5), 0.2); a = Math.max(Math.min(a, 5), 0.2);
var c = this.b.view; var c = this.b.view;
c.zoom = a; c.zoom = a;
c.d = !0; c.c = !0;
}.bind(this)); }.bind(this));
$(a).mousedown(function(a) { $(a).mousedown(function(a) {
if (a.ctrlKey || a.metaKey) { if (a.ctrlKey || a.metaKey) {
var c = this.b; var c = this.b;
a = new f(a.clientX, a.clientY); a = new f(a.clientX, a.clientY);
c.mode = 1; c.mode = 1;
c.u = a; c.v = a;
c.v = c.view.offset; c.w = c.view.offset;
} else { } else {
c = this.b, a = new f(a.clientX, a.clientY), c.mode = 2, c.c.start(z(c.view, a)); c = this.b, a = new f(a.clientX, a.clientY), c.mode = 2, c.d.start(A(c.view, a));
} }
}.bind(this)); }.bind(this));
$(a).mouseup(function() { $(a).mouseup(function() {
@ -557,34 +584,34 @@ ka.prototype.o = function() {
}; };
function Y(a) { function Y(a) {
this.b = a; this.b = a;
this.s = this.k = !1; this.t = this.k = !1;
this.o(); this.o();
} }
function la(a, b) { function la(a, b) {
a.A = b; a.B = b;
a.D = $.now(); a.F = $.now();
a.k = !1; a.k = !1;
window.setTimeout(function() { window.setTimeout(function() {
if (!this.k && !this.s) { if (!this.k && !this.t) {
var a = this.b; var a = this.b;
a.mode = 2; a.mode = 2;
a.c.start(z(a.view, b)); a.d.start(A(a.view, b));
} }
}.bind(a), 130); }.bind(a), 130);
} }
Y.prototype.r = function(a) { Y.prototype.r = function(a) {
if (!this.k && 130 > $.now() - this.D && 3 < m(a, this.A).length()) { if (!this.k && 130 > $.now() - this.F && 3 < m(a, this.B).length()) {
this.k = !0; this.k = !0;
var b = this.b; var b = this.b;
b.mode = 1; b.mode = 1;
b.u = a; b.v = a;
b.v = b.view.offset; b.w = b.view.offset;
} }
this.b.r(a); this.b.r(a);
}; };
Y.prototype.reset = function() { Y.prototype.reset = function() {
this.s = this.k = !1; this.t = this.k = !1;
this.A = null; this.B = null;
}; };
Y.prototype.o = function() { Y.prototype.o = function() {
var a = this.b.view.canvas; var a = this.b.view.canvas;
@ -597,10 +624,10 @@ Y.prototype.o = function() {
var c = new f(a.originalEvent.touches[0].pageX, a.originalEvent.touches[0].pageY); var c = new f(a.originalEvent.touches[0].pageX, a.originalEvent.touches[0].pageY);
a = new f(a.originalEvent.touches[1].pageX, a.originalEvent.touches[1].pageY); a = new f(a.originalEvent.touches[1].pageX, a.originalEvent.touches[1].pageY);
W(this.b); W(this.b);
this.s = !0; this.t = !0;
this.k = !1; this.k = !1;
this.F = m(c, a).length(); this.G = m(c, a).length();
this.C = this.b.view.zoom; this.D = this.b.view.zoom;
} }
} }
}.bind(this)); }.bind(this));
@ -612,7 +639,7 @@ Y.prototype.o = function() {
if (1 < a.originalEvent.touches.length) { if (1 < a.originalEvent.touches.length) {
var c = new f(a.originalEvent.touches[0].pageX, a.originalEvent.touches[0].pageY); var c = new f(a.originalEvent.touches[0].pageX, a.originalEvent.touches[0].pageY);
a = new f(a.originalEvent.touches[1].pageX, a.originalEvent.touches[1].pageY); a = new f(a.originalEvent.touches[1].pageX, a.originalEvent.touches[1].pageY);
this.s && (c = this.C * m(c, a).length() / this.F, c = Math.max(Math.min(c, 5), 0.5), a = this.b.view, a.zoom = c, a.d = !0); this.t && (c = this.D * m(c, a).length() / this.G, c = Math.max(Math.min(c, 5), 0.5), a = this.b.view, a.zoom = c, a.c = !0);
} }
} }
}.bind(this)); }.bind(this));
@ -622,7 +649,7 @@ Y.prototype.o = function() {
W(this.b); W(this.b);
}.bind(this)); }.bind(this));
}; };
var Z = new S, ma = new x(Z), na = new V(ma, Z); var Z = new S, ma = new y(Z), na = new V(ma, Z);
new Y(na); new Y(na);
new ka(na); new ka(na);
new X(Z); new X(Z);

2
js-lib/common.js
View File

@ -29,7 +29,7 @@ try {
/** @const */ var CHAR_PIXELS_H = 9; /** @const */ var CHAR_PIXELS_H = 9;
/** @const */ var CHAR_PIXELS_V = 17; /** @const */ var CHAR_PIXELS_V = 17;
/** @const */ var RENDER_PADDING = 70; /** @const */ var RENDER_PADDING_CELLS = 3;
/** @const */ var KEY_RETURN = '<enter>'; /** @const */ var KEY_RETURN = '<enter>';
/** @const */ var KEY_BACKSPACE = '<backspace>'; /** @const */ var KEY_BACKSPACE = '<backspace>';

11
js-lib/controller.js
View File

@ -118,6 +118,17 @@ ascii.Controller.prototype.installBindings = function() {
$('#import-area').val(''); $('#import-area').val('');
}.bind(this)); }.bind(this));
$('#use-lines-button').click(function(e) {
$('.dialog').removeClass('visible');
this.view.useLines = true;
this.view.dirty = true;
}.bind(this));
$('#use-ascii-button').click(function(e) {
$('.dialog').removeClass('visible');
this.view.useLines = false;
this.view.dirty = false;
}.bind(this));
$(window).keypress(function(e) { $(window).keypress(function(e) {
this.handleKeyPress(e); this.handleKeyPress(e);
}.bind(this)); }.bind(this));

28
js-lib/view.js
View File

@ -13,6 +13,7 @@ ascii.View = function(state) {
/** @type {number} */ this.zoom = 1; /** @type {number} */ this.zoom = 1;
/** @type {ascii.Vector} */ this.offset = new ascii.Vector(7500, 7500); /** @type {ascii.Vector} */ this.offset = new ascii.Vector(7500, 7500);
/** @type {boolean} */ this.dirty = true; /** @type {boolean} */ this.dirty = true;
/** @type {boolean} */ this.useLines = true;
this.resizeCanvas(); this.resizeCanvas();
}; };
@ -58,11 +59,15 @@ ascii.View.prototype.render = function() {
// Only render grid lines and cells that are visible. // Only render grid lines and cells that are visible.
var startOffset = this.screenToCell(new ascii.Vector( var startOffset = this.screenToCell(new ascii.Vector(
-RENDER_PADDING, 0,
-RENDER_PADDING)); 0))
.subtract(new ascii.Vector(
RENDER_PADDING_CELLS, RENDER_PADDING_CELLS));
var endOffset = this.screenToCell(new ascii.Vector( var endOffset = this.screenToCell(new ascii.Vector(
this.canvas.width + RENDER_PADDING, this.canvas.width,
this.canvas.height + RENDER_PADDING)); this.canvas.height))
.add(new ascii.Vector(
RENDER_PADDING_CELLS, RENDER_PADDING_CELLS));
// Render the grid. // Render the grid.
context.lineWidth = '1'; context.lineWidth = '1';
@ -85,12 +90,13 @@ ascii.View.prototype.render = function() {
j * CHAR_PIXELS_V - this.offset.y); j * CHAR_PIXELS_V - this.offset.y);
} }
this.context.stroke(); this.context.stroke();
this.renderCellsAsText(context, startOffset, endOffset); this.renderText(context, startOffset, endOffset, !this.useLines);
//TODO: Add flag to control line vs. text drawing of structures. if (this.useLines) {
//this.renderCellsAsLines(context, startOffset, endOffset); this.renderCellsAsLines(context, startOffset, endOffset);
}
}; };
ascii.View.prototype.renderCellsAsText = function(context, startOffset, endOffset) { ascii.View.prototype.renderText = function(context, startOffset, endOffset, drawSpecials) {
// Render cells. // Render cells.
context.font = '15px Courier New'; context.font = '15px Courier New';
for (var i = startOffset.x; i < endOffset.x; i++) { for (var i = startOffset.x; i < endOffset.x; i++) {
@ -107,7 +113,7 @@ ascii.View.prototype.renderCellsAsText = function(context, startOffset, endOffse
CHAR_PIXELS_H, CHAR_PIXELS_V); CHAR_PIXELS_H, CHAR_PIXELS_V);
} }
var cellValue = this.state.getDrawValue(new ascii.Vector(i, j)); var cellValue = this.state.getDrawValue(new ascii.Vector(i, j));
if (cellValue != null) { if (cellValue != null && (!cell.isSpecial() || drawSpecials)) {
this.context.fillStyle = '#000000'; this.context.fillStyle = '#000000';
context.fillText(cellValue, context.fillText(cellValue,
i * CHAR_PIXELS_H - this.offset.x, i * CHAR_PIXELS_H - this.offset.x,
@ -125,7 +131,7 @@ ascii.View.prototype.renderCellsAsLines = function(context, startOffset, endOffs
var startY = false; var startY = false;
for (var j = startOffset.y; j < endOffset.y; j++) { for (var j = startOffset.y; j < endOffset.y; j++) {
var cell = this.state.getCell(new ascii.Vector(i, j)); var cell = this.state.getCell(new ascii.Vector(i, j));
if (!cell.isSpecial() && startY) { if ((!cell.isSpecial() || j == endOffset.y - 1) && startY) {
context.moveTo( context.moveTo(
i * CHAR_PIXELS_H - this.offset.x + CHAR_PIXELS_H/2, i * CHAR_PIXELS_H - this.offset.x + CHAR_PIXELS_H/2,
startY * CHAR_PIXELS_V - this.offset.y - CHAR_PIXELS_V/2); startY * CHAR_PIXELS_V - this.offset.y - CHAR_PIXELS_V/2);
@ -143,7 +149,7 @@ ascii.View.prototype.renderCellsAsLines = function(context, startOffset, endOffs
var startX = false; var startX = false;
for (var i = startOffset.x; i < endOffset.x; i++) { for (var i = startOffset.x; i < endOffset.x; i++) {
var cell = this.state.getCell(new ascii.Vector(i, j)); var cell = this.state.getCell(new ascii.Vector(i, j));
if (!cell.isSpecial() && startX) { if ((!cell.isSpecial() || i == endOffset.x - 1) && startX) {
context.moveTo( context.moveTo(
startX * CHAR_PIXELS_H - this.offset.x + CHAR_PIXELS_H/2, startX * CHAR_PIXELS_H - this.offset.x + CHAR_PIXELS_H/2,
j * CHAR_PIXELS_V - this.offset.y - CHAR_PIXELS_V/2); j * CHAR_PIXELS_V - this.offset.y - CHAR_PIXELS_V/2);