diff --git a/images/arrow-icon.gif b/images/arrow-icon.gif new file mode 100644 index 0000000..bad0376 Binary files /dev/null and b/images/arrow-icon.gif differ diff --git a/index.html b/index.html index b0956c8..4eaa191 100755 --- a/index.html +++ b/index.html @@ -339,6 +339,7 @@ textarea { .box-image { background-image: url('images/box-icon.gif'); } .line-image { background-image: url('images/line-icon.gif'); } +.arrow-image { background-image: url('images/arrow-icon.gif'); } .freeform-image { background-image: url('images/freeform-icon.gif'); } .erase-image { background-image: url('images/erase-icon.gif'); } .move-image { background-image: url('images/move-icon.gif'); } @@ -488,6 +489,7 @@ textarea {
+ @@ -525,6 +527,7 @@ textarea { Mobile: Drag quickly to move. Press and hold to start drawing. Pinch to zoom in/out.

Draw boxes. You can resize them later with the Resize tool.

Draw lines. Connect it to another line to change the orientation.

+
Draw arrows. Connect it to another line to change the orientation.

Draw freehand. Press a character on the keyboard and draw with it.

Erase. Drag out an area to remove its contents from the canvas.

Resize boxes and lines. Drag a line to change its size/shape.

diff --git a/js-compiled.js b/js-compiled.js index 8dc833f..3277d1b 100644 --- a/js-compiled.js +++ b/js-compiled.js @@ -4,99 +4,99 @@ try { } catch (aa) { window.O = window.O || {}; } -var g = "ontouchstart" in window || "onmsgesturechange" in window; -function m(a, b) { +var g = ["+", "\u2012", "\u2013"], m = [">", "<", "^", "v"], ba = g.concat(m), n = "ontouchstart" in window || "onmsgesturechange" in window; +function p(a, b) { this.x = a; this.y = b; } -function n(a, b) { +function q(a, b) { return null != b && a.x == b.x && a.y == b.y; } -function p(a, b) { - return new m(a.x - b.x, a.y - b.y); +function r(a, b) { + return new p(a.x - b.x, a.y - b.y); } -m.prototype.add = function(a) { - return new m(this.x + a.x, this.y + a.y); +p.prototype.add = function(a) { + return new p(this.x + a.x, this.y + a.y); }; -m.prototype.clone = function() { - return new m(this.x, this.y); +p.prototype.clone = function() { + return new p(this.x, this.y); }; -m.prototype.length = function() { +p.prototype.length = function() { return Math.sqrt(this.x * this.x + this.y * this.y); }; -m.prototype.scale = function(a) { - return new m(this.x * a, this.y * a); +p.prototype.scale = function(a) { + return new p(this.x * a, this.y * a); }; -function q(a, b) { +function s(a, b) { this.v = Math.min(a.x, b.x); this.w = Math.min(a.y, b.y); this.I = Math.max(a.x, b.x); this.J = Math.max(a.y, b.y); } -function r(a) { - return new m(a.v, a.w); +function t(a) { + return new p(a.v, a.w); } -q.prototype.contains = function(a) { +s.prototype.contains = function(a) { return a.x >= this.v && a.x <= this.I && a.y >= this.w && a.y <= this.J; }; -var s = new m(-1, 0), t = new m(1, 0), u = new m(0, -1), v = new m(0, 1), y = [s, t, u, v]; -function ba() { +var u = new p(-1, 0), v = new p(1, 0), w = new p(0, -1), z = new p(0, 1), A = [u, v, w, z]; +function ca() { this.g = this.value = null; } -function z(a) { +function C(a) { return null != a.g ? a.g : a.value; } -function B(a) { - return "+" == z(a); +function D(a) { + return-1 != ba.indexOf(C(a)); } -function ca(a, b, c, d) { +function da(a, b, c, d) { this.left = a; this.right = b; - this.m = c; - this.k = d; + this.l = c; + this.j = d; } -function C(a) { - return a.left + a.right + a.m + a.k; +function E(a) { + return a.left + a.right + a.l + a.j; } -function D(a, b) { +function ea(a, b) { this.position = a; this.value = b; } -function da(a, b) { +function fa(a, b) { this.position = a; this.n = b; } -;function E(a) { +;function ga(a) { this.state = a; this.canvas = document.getElementById("ascii-canvas"); this.context = this.canvas.getContext("2d"); this.zoom = 1; - this.offset = new m(9E3, 5100); + this.offset = new p(9E3, 5100); this.e = !0; this.A = !1; - F(this); + ha(this); } -function F(a) { +function ha(a) { a.canvas.width = document.documentElement.clientWidth; a.canvas.height = document.documentElement.clientHeight; a.e = !0; } -E.prototype.animate = function() { +ga.prototype.animate = function() { if (this.e || this.state.e) { - this.e = !1, this.state.e = !1, ea(this); + this.e = !1, this.state.e = !1, ia(this); } var a = this; window.requestAnimationFrame(function() { a.animate(); }); }; -function ea(a) { +function ia(a) { var b = a.context; b.setTransform(1, 0, 0, 1, 0, 0); b.clearRect(0, 0, a.canvas.width, a.canvas.height); b.scale(a.zoom, a.zoom); b.translate(a.canvas.width / 2 / a.zoom, a.canvas.height / 2 / a.zoom); - var c = p(G(a, new m(0, 0)), new m(3, 3)), d = G(a, new m(a.canvas.width, a.canvas.height)).add(new m(3, 3)); + var c = r(F(a, new p(0, 0)), new p(3, 3)), d = F(a, new p(a.canvas.width, a.canvas.height)).add(new p(3, 3)); c.x = Math.max(0, Math.min(c.x, 2E3)); d.x = Math.max(0, Math.min(d.x, 2E3)); c.y = Math.max(0, Math.min(c.y, 600)); @@ -115,12 +115,12 @@ function ea(a) { b.font = "15px Courier New"; for (var h = c.x;h < d.x;h++) { for (var l = c.y;l < d.y;l++) { - var k = H(a.state, new m(h, l)); - if (B(k) || null != k.g && " " != z(k)) { + var k = G(a.state, new p(h, l)); + if (D(k) || null != k.g && " " != C(k)) { a.context.fillStyle = null != k.g ? "#DEF" : "#F5F5F5", b.fillRect(9 * h - a.offset.x, 17 * (l - 1) - a.offset.y, 9, 17); } - var w = fa(a.state, new m(h, l)); - null == w || B(k) && !e || (a.context.fillStyle = "#000000", b.fillText(w, 9 * h - a.offset.x, 17 * l - a.offset.y - 3)); + var x = ja(a.state, new p(h, l)); + null == x || D(k) && !e || (a.context.fillStyle = "#000000", b.fillText(x, 9 * h - a.offset.x, 17 * l - a.offset.y - 3)); } } if (a.A) { @@ -129,114 +129,116 @@ function ea(a) { b.beginPath(); for (e = c.x;e < d.x;e++) { for (k = !1, h = c.y;h < d.y;h++) { - l = H(a.state, new m(e, h)), B(l) && h != d.y - 1 || !k || (b.moveTo(9 * e - a.offset.x + 4.5, 17 * k - a.offset.y - 8.5), b.lineTo(9 * e - a.offset.x + 4.5, 17 * (h - 1) - a.offset.y - 8.5), k = !1), B(l) && !k && (k = h); + l = G(a.state, new p(e, h)), D(l) && h != d.y - 1 || !k || (b.moveTo(9 * e - a.offset.x + 4.5, 17 * k - a.offset.y - 8.5), b.lineTo(9 * e - a.offset.x + 4.5, 17 * (h - 1) - a.offset.y - 8.5), k = !1), D(l) && !k && (k = h); } } for (h = c.y;h < d.y;h++) { for (k = !1, e = c.x;e < d.x;e++) { - l = H(a.state, new m(e, h)), B(l) && e != d.x - 1 || !k || (b.moveTo(9 * k - a.offset.x + 4.5, 17 * h - a.offset.y - 8.5), b.lineTo(9 * (e - 1) - a.offset.x + 4.5, 17 * h - a.offset.y - 8.5), k = !1), B(l) && !k && (k = e); + l = G(a.state, new p(e, h)), D(l) && e != d.x - 1 || !k || (b.moveTo(9 * k - a.offset.x + 4.5, 17 * h - a.offset.y - 8.5), b.lineTo(9 * (e - 1) - a.offset.x + 4.5, 17 * h - a.offset.y - 8.5), k = !1), D(l) && !k && (k = e); } } a.context.stroke(); } } -function G(a, b) { - return new m(Math.min(Math.max(1, Math.round(((new m((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 m((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 F(a, b) { + return new p(Math.min(Math.max(1, Math.round(((new p((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 p((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 I(a, b, c, d, e) { +;function H(a, b, c, d, e) { e = e || "+"; - var h = new q(b, c), l = h.v, k = h.w, w = h.I, h = h.J, x = d ? c.x : b.x; - for (d = d ? b.y : c.y;l++ < w;) { - var M = new m(l, d), A = a.getContext(new m(l, d)); - " " == e && 2 == A.m + A.k || J(a, M, e); + var h = new s(b, c), l = h.v, k = h.w, x = h.I, h = h.J, y = d ? c.x : b.x; + for (d = d ? b.y : c.y;l++ < x;) { + var M = new p(l, d), B = a.getContext(new p(l, d)); + " " == e && 2 == B.l + B.j || I(a, M, e); } for (;k++ < h;) { - M = new m(x, k), A = a.getContext(new m(x, k)), " " == e && 2 == A.left + A.right || J(a, M, e); + M = new p(y, k), B = a.getContext(new p(y, k)), " " == e && 2 == B.left + B.right || I(a, M, e); } - K(a, b, e); - K(a, c, e); - J(a, new m(x, d), e); + J(a, b, e); + J(a, c, e); + I(a, new p(y, d), e); } -function L(a) { +function K(a) { this.state = a; this.a = null; } -f = L.prototype; +f = K.prototype; f.start = function(a) { this.a = a; }; f.move = function(a) { this.b = a; - N(this.state); - I(this.state, this.a, a, !0); - I(this.state, this.a, a, !1); + L(this.state); + H(this.state, this.a, a, !0); + H(this.state, this.a, a, !1); }; f.end = function() { - P(this.state); + N(this.state); }; -f.j = function() { +f.k = function() { return "crosshair"; }; f.f = function() { }; -function ga(a) { +function P(a, b) { this.state = a; + this.P = b; this.a = null; } -f = ga.prototype; +f = P.prototype; f.start = function(a) { this.a = a; }; f.move = function(a) { - N(this.state); + L(this.state); var b = this.state.getContext(this.a), c = this.state.getContext(a); - I(this.state, this.a, a, b.m && b.k || c.left && c.right); + H(this.state, this.a, a, b.l && b.j || c.left && c.right); + this.P && J(this.state, a, "^"); }; f.end = function() { - P(this.state); + N(this.state); }; -f.j = function() { +f.k = function() { return "crosshair"; }; f.f = function() { }; -function ha(a, b) { +function ka(a, b) { this.state = a; this.value = b; - g && ($("#freeform-tool-input").val(""), $("#freeform-tool-input").hide(0, function() { + n && ($("#freeform-tool-input").val(""), $("#freeform-tool-input").hide(0, function() { $("#freeform-tool-input").show(0, function() { $("#freeform-tool-input").focus(); }); })); } -f = ha.prototype; +f = ka.prototype; f.start = function(a) { - K(this.state, a, this.value); + J(this.state, a, this.value); }; f.move = function(a) { - K(this.state, a, this.value); + J(this.state, a, this.value); }; f.end = function() { - P(this.state); + N(this.state); }; -f.j = function() { +f.k = function() { return "crosshair"; }; f.f = function(a) { - g && (this.value = $("#freeform-tool-input").val().substr(0, 1), $("#freeform-tool-input").blur(), $("#freeform-tool-input").hide(0)); + n && (this.value = $("#freeform-tool-input").val().substr(0, 1), $("#freeform-tool-input").blur(), $("#freeform-tool-input").hide(0)); 1 == a.length && (this.value = a); }; -function ia(a) { +function la(a) { this.state = a; this.a = null; } -f = ia.prototype; +f = la.prototype; f.start = function(a) { - P(this.state); + N(this.state); $("#text-tool-input").val(""); this.a = a; - a = z(H(this.state, this.a)); - K(this.state, this.a, null == a ? "\u2009" : a); + a = C(G(this.state, this.a)); + J(this.state, this.a, null == a ? "\u2009" : a); }; f.move = function() { }; @@ -247,14 +249,14 @@ f.end = function() { }); })); }; -f.j = function() { +f.k = function() { return "pointer"; }; f.f = function() { var a = $("#text-tool-input").val(); - N(this.state); + L(this.state); for (var b = 0, c = 0, d = 0;d < a.length;d++) { - "\n" == a[d] ? (c++, b = 0) : (K(this.state, this.b.add(new m(b, c)), a[d]), b++); + "\n" == a[d] ? (c++, b = 0) : (J(this.state, this.b.add(new p(b, c)), a[d]), b++); } }; function Q(a) { @@ -267,51 +269,51 @@ f.start = function(a) { this.move(a); }; f.move = function(a) { - N(this.state); + L(this.state); this.b = a; var b = Math.min(this.a.x, this.b.x); a = Math.min(this.a.y, this.b.y); for (var c = Math.max(this.a.x, this.b.x), d = Math.max(this.a.y, this.b.y);b <= c;b++) { for (var e = a;e <= d;e++) { - K(this.state, new m(b, e), "\u2009"); + J(this.state, new p(b, e), "\u2009"); } } }; f.end = function() { - P(this.state); + N(this.state); }; -f.j = function() { +f.k = function() { return "crosshair"; }; f.f = function() { }; -function ja(a) { +function ma(a) { this.state = a; this.h = this.a = null; } -f = ja.prototype; +f = ma.prototype; f.start = function(a) { - if (g && !B(H(this.state, a))) { - var b = y.concat([s.add(u), s.add(v), t.add(u), t.add(v)]), c = null, d = 0, e; + if (n && !D(G(this.state, a))) { + var b = A.concat([u.add(w), u.add(z), v.add(w), v.add(z)]), c = null, d = 0, e; for (e in b) { - var h = a.add(b[e]), l = C(this.state.getContext(h)); - B(H(this.state, h)) && l > d && (c = b[e], d = l); + var h = a.add(b[e]), l = E(this.state.getContext(h)); + D(G(this.state, h)) && l > d && (c = b[e], d = l); } a = null == c ? a : a.add(c); } this.a = a; this.h = null; - if (B(H(this.state, this.a))) { + if (D(G(this.state, this.a))) { this.state.getContext(this.a); a = []; - for (var k in y) { - var b = ka(this, this.a, y[k]), w; - for (w in b) { - if (c = b[w], d = 0 != y[k].x, 1 == C(this.state.getContext(c))) { + for (var k in A) { + var b = na(this, this.a, A[k]), x; + for (x in b) { + if (c = b[x], d = 0 != A[k].x, 1 == E(this.state.getContext(c))) { a.push({position:c, D:d}); } else { - for (var x in y) { - 0 != y[k].add(y[x]).length() && 2 != y[k].add(y[x]).length() && (e = ka(this, c, y[x]), 0 != e.length && a.push({position:e[e.length - 1], D:d})); + for (var y in A) { + 0 != A[k].add(A[y]).length() && 2 != A[k].add(A[y]).length() && (e = na(this, c, A[y]), 0 != e.length && a.push({position:e[e.length - 1], D:d})); } } } @@ -321,97 +323,97 @@ f.start = function(a) { } }; f.move = function(a) { - N(this.state); + L(this.state); for (var b in this.h) { - I(this.state, this.a, this.h[b].position, this.h[b].D, " "); + H(this.state, this.a, this.h[b].position, this.h[b].D, " "); } for (b in this.h) { - I(this.state, a, this.h[b].position, this.h[b].D); + H(this.state, a, this.h[b].position, this.h[b].D); } }; f.end = function() { - P(this.state); + N(this.state); }; -function ka(a, b, c) { +function na(a, b, c) { for (var d = b.clone(), e = [];;) { var h = d.add(c); - if (!B(H(a.state, h))) { - return n(b, d) || e.push(d), e; + if (!D(G(a.state, h))) { + return q(b, d) || e.push(d), e; } d = h; - 3 == C(a.state.getContext(d)) && e.push(d); + 3 == E(a.state.getContext(d)) && e.push(d); } } -f.j = function(a) { - return B(H(this.state, a)) ? "pointer" : "default"; +f.k = function(a) { + return D(G(this.state, a)) ? "pointer" : "default"; }; f.f = function() { }; -function la(a) { +function oa(a) { this.state = a; this.F = this.o = this.b = this.a = null; this.K = !0; this.u = null; } -f = la.prototype; +f = oa.prototype; f.start = function(a) { - null != this.a && null != this.b && (new q(this.a, this.b)).contains(a) ? (this.o = a, ma(this), na(this, a)) : (this.a = a, this.b = null, this.K = !1, this.move(a)); + null != this.a && null != this.b && (new s(this.a, this.b)).contains(a) ? (this.o = a, pa(this), qa(this, a)) : (this.a = a, this.b = null, this.K = !1, this.move(a)); }; -function ma(a) { +function pa(a) { var b = a.state.i.filter(function(a) { - return null != z(a.n) && "\u2009" != z(a.n); - }), c = r(new q(a.a, a.b)); + return null != C(a.n) && "\u2009" != C(a.n); + }), c = t(new s(a.a, a.b)); a.u = b.map(function(a) { - return new D(p(a.position, c), z(a.n)); + return new ea(r(a.position, c), C(a.n)); }); } f.move = function(a) { if (null != this.o) { - na(this, a); + qa(this, a); } else { if (!0 != this.K) { this.b = a; - N(this.state); - a = new q(this.a, a); + L(this.state); + a = new s(this.a, a); for (var b = a.v;b <= a.I;b++) { for (var c = a.w;c <= a.J;c++) { - var d = new m(b, c), e = z(H(this.state, d)); - K(this.state, d, null == e ? "\u2009" : e); + var d = new p(b, c), e = C(G(this.state, d)); + J(this.state, d, null == e ? "\u2009" : e); } } } } }; -function na(a, b) { +function qa(a, b) { a.F = b; - N(a.state); + L(a.state); var c = new Q(a.state); c.start(a.a); c.move(a.b); - c = p(a.F, a.o).add(r(new q(a.a, a.b))); - oa(a, c); + c = r(a.F, a.o).add(t(new s(a.a, a.b))); + ra(a, c); } -function oa(a, b) { +function ra(a, b) { for (var c in a.u) { - K(a.state, a.u[c].position.add(b), a.u[c].value); + J(a.state, a.u[c].position.add(b), a.u[c].value); } } f.end = function() { - null != this.o && (P(this.state), this.b = this.a = null); + null != this.o && (N(this.state), this.b = this.a = null); this.F = this.o = null; this.K = !0; }; -f.j = function(a) { - return null != this.a && null != this.b && (new q(this.a, this.b)).contains(a) ? "pointer" : "default"; +f.k = function(a) { + return null != this.a && null != this.b && (new s(this.a, this.b)).contains(a) ? "pointer" : "default"; }; f.f = function(a) { - if (null != this.a && null != this.b && ("" != a && "" != a || ma(this), "" == a)) { + if (null != this.a && null != this.b && ("" != a && "" != a || pa(this), "" == a)) { var b = new Q(this.state); b.start(this.a); b.move(this.b); - P(this.state); + N(this.state); } - "" == a && (oa(this, this.a), P(this.state)); + "" == a && (ra(this, this.a), N(this.state)); }; function R() { this.cells = Array(2E3); @@ -422,50 +424,90 @@ function R() { for (var a = 0;a < this.cells.length;a++) { this.cells[a] = Array(600); for (var b = 0;b < this.cells[a].length;b++) { - this.cells[a][b] = new ba; + this.cells[a][b] = new ca; } } } R.prototype.clear = function() { for (var a = 0;a < this.cells.length;a++) { for (var b = 0;b < this.cells[a].length;b++) { - null != z(this.cells[a][b]) && K(this, new m(a, b), "\u2009"); + null != C(this.cells[a][b]) && J(this, new p(a, b), "\u2009"); } } - P(this); + N(this); }; -function H(a, b) { +function G(a, b) { return a.cells[b.x][b.y]; } -function K(a, b, c) { - var d = H(a, b); - a.i.push(new da(b, d)); +function J(a, b, c) { + var d = G(a, b); + a.i.push(new fa(b, d)); d.g = c; a.e = !0; } -function J(a, b, c) { - z(H(a, b)) != c && K(a, b, c); +function I(a, b, c) { + C(G(a, b)) != c && J(a, b, c); } -function N(a) { +function L(a) { for (var b in a.i) { a.i[b].n.g = null; } a.i.length = 0; } -function fa(a, b) { - var c = H(a, b), c = null != c.g ? c.g : c.value; - if ("+" != c) { +function ja(a, b) { + var c = G(a, b), c = null != c.g ? c.g : c.value; + if ("+" != c && "^" != c) { return c; } - c = a.getContext(b); - return c.left && c.right && !c.m && !c.k ? "\u2013" : !c.left && !c.right && c.m && c.k ? "|" : c.left && c.right && c.m && c.k ? "\u2013" : "+"; + var d = a.getContext(b); + if (d.left && d.right && !d.l && !d.j) { + return "\u2012"; + } + if (!d.left && !d.right && d.l && d.j) { + return "|"; + } + if (4 == E(d)) { + return "\u2012"; + } + if ("+" == c && 3 == E(d)) { + return "+"; + } + if ("^" == c && 3 == E(d)) { + if (!d.left) { + return "<"; + } + if (!d.l) { + return "^"; + } + if (!d.j) { + return "v"; + } + if (!d.right) { + return ">"; + } + } + if ("^" == c && 1 == E(d)) { + if (d.left) { + return ">"; + } + if (d.l) { + return "v"; + } + if (d.j) { + return "^"; + } + if (d.right) { + return "<"; + } + } + return c; } R.prototype.getContext = function(a) { - var b = B(H(this, a.add(s))), c = B(H(this, a.add(t))), d = B(H(this, a.add(u))); - a = B(H(this, a.add(v))); - return new ca(b, c, d, a); + var b = D(G(this, a.add(u))), c = D(G(this, a.add(v))), d = D(G(this, a.add(w))); + a = D(G(this, a.add(z))); + return new da(b, c, d, a); }; -function P(a, b) { +function N(a, b) { var c = [], d = a.i.map(function(a) { return a.position.x.toString() + a.position.y.toString(); }), e = a.i.filter(function(a, b) { @@ -474,8 +516,8 @@ function P(a, b) { a.i.length = 0; for (var h in e) { var l = e[h].n; - c.push(new D(e[h].position, null != l.value ? l.value : " ")); - var k = z(l); + c.push(new ea(e[h].position, null != l.value ? l.value : " ")); + var k = C(l); if ("\u2009" == k || " " == k) { k = null; } @@ -486,30 +528,30 @@ function P(a, b) { 0 < c.length && (50 < e.length && e.shift(), e.push(c)); a.e = !0; } -function pa(a) { +function sa(a) { if (0 != a.N.length) { var b = a.N.pop(), c; for (c in b) { var d = b[c]; - K(a, d.position, d.value); + J(a, d.position, d.value); } - P(a, !0); + N(a, !0); } } -function qa(a) { +function ta(a) { if (0 != a.M.length) { var b = a.M.pop(), c; for (c in b) { var d = b[c]; - K(a, d.position, d.value); + J(a, d.position, d.value); } - P(a); + N(a); } } function S(a) { - for (var b = new m(Number.MAX_VALUE, Number.MAX_VALUE), c = new m(-1, -1), d = 0;d < a.cells.length;d++) { + for (var b = new p(Number.MAX_VALUE, Number.MAX_VALUE), c = new p(-1, -1), d = 0;d < a.cells.length;d++) { for (var e = 0;e < a.cells[d].length;e++) { - null != z(a.cells[d][e]) && (d < b.x && (b.x = d), e < b.y && (b.y = e), d > c.x && (c.x = d), e > c.y && (c.y = e)); + null != C(a.cells[d][e]) && (d < b.x && (b.x = d), e < b.y && (b.y = e), d > c.x && (c.x = d), e > c.y && (c.y = e)); } } if (0 > c.x) { @@ -517,42 +559,41 @@ function S(a) { } for (var h = "", e = b.y;e <= c.y;e++) { for (var l = "", d = b.x;d <= c.x;d++) { - var k = fa(a, new m(d, e)), l = l + (null == k ? " " : k) + var k = ja(a, new p(d, e)), l = l + (null == k ? " " : k) } h += l.replace("\\s+$/g", "") + "\n"; } return h; } -function ra(a, b, c) { +function ua(a, b, c) { b = b.split("\n"); - for (var d = new m(0, Math.round(b.length / 2)), e = 0;e < b.length;e++) { + for (var d = new p(0, Math.round(b.length / 2)), e = 0;e < b.length;e++) { d.x = Math.max(d.x, Math.round(b[e].length / 2)); } for (e = 0;e < b.length;e++) { for (var h = b[e], l = 0;l < h.length;l++) { var k = h.charAt(l); - if ("\u2013" == k || "|" == k) { - k = "+"; - } - K(a, p((new m(l, e)).add(c), d), k); + -1 != g.indexOf(k) && (k = "+"); + -1 != m.indexOf(k) && (k = "^"); + J(a, r((new p(l, e)).add(c), d), k); } } } ;function T(a, b) { this.view = a; this.state = b; - this.d = new L(b); + this.d = new K(b); this.mode = 0; this.p(); } T.prototype.t = function(a) { - var b = G(this.view, a); + var b = F(this.view, a); null == this.r && (this.r = b); - n(b, this.r) || (this.view.canvas.style.cursor = this.d.j(b)); - 2 != this.mode || n(b, this.r) || this.d.move(b); + q(b, this.r) || (this.view.canvas.style.cursor = this.d.k(b)); + 2 != this.mode || q(b, this.r) || this.d.move(b); if (1 == this.mode) { var c = this.view; - a = this.H.add(p(this.G, a).scale(1 / this.view.zoom)); + a = this.H.add(r(this.G, a).scale(1 / this.view.zoom)); c.offset = a; c.e = !0; } @@ -568,7 +609,7 @@ function U(a) { T.prototype.p = function() { var a = this; $(window).resize(function() { - F(a.view); + ha(a.view); }); $("#draw-tools > button.tool").click(function(a) { $("#text-tool-widget").hide(0); @@ -576,14 +617,15 @@ T.prototype.p = function() { $("#draw-tools > button.tool").removeClass("active"); $("#" + a).toggleClass("active"); $(".dialog").removeClass("visible"); - "box-button" == a && (this.d = new L(this.state)); - "line-button" == a && (this.d = new ga(this.state)); - "freeform-button" == a && (this.d = new ha(this.state, "X")); + "box-button" == a && (this.d = new K(this.state)); + "line-button" == a && (this.d = new P(this.state, !1)); + "arrow-button" == a && (this.d = new P(this.state, !0)); + "freeform-button" == a && (this.d = new ka(this.state, "X")); "erase-button" == a && (this.d = new Q(this.state)); - "move-button" == a && (this.d = new ja(this.state)); - "text-button" == a && (this.d = new ia(this.state)); - "select-button" == a && (this.d = new la(this.state)); - P(this.state); + "move-button" == a && (this.d = new ma(this.state)); + "text-button" == a && (this.d = new la(this.state)); + "select-button" == a && (this.d = new oa(this.state)); + N(this.state); this.view.canvas.focus(); }.bind(this)); $("#file-tools > button.tool").click(function(a) { @@ -593,16 +635,16 @@ T.prototype.p = function() { "import-button" == a && ($("#import-area").val(""), $("#import-area").focus()); "export-button" == a && ($("#export-area").val(S(this.state)), $("#export-area").select()); "clear-button" == a && this.state.clear(); - "undo-button" == a && pa(this.state); - "redo-button" == a && qa(this.state); + "undo-button" == a && sa(this.state); + "redo-button" == a && ta(this.state); }.bind(this)); $("button.close-dialog-button").click(function() { $(".dialog").removeClass("visible"); }.bind(this)); $("#import-submit-button").click(function() { this.state.clear(); - ra(this.state, $("#import-area").val(), G(this.view, new m(this.view.canvas.width / 2, this.view.canvas.height / 2))); - P(this.state); + ua(this.state, $("#import-area").val(), F(this.view, new p(this.view.canvas.width / 2, this.view.canvas.height / 2))); + N(this.state); $("#import-area").val(""); $(".dialog").removeClass("visible"); }.bind(this)); @@ -624,7 +666,7 @@ T.prototype.p = function() { $(window).keydown(function(a) { var c = null; if (a.ctrlKey || a.metaKey) { - 67 == a.keyCode && (c = ""), 86 == a.keyCode && (c = ""), 90 == a.keyCode && pa(this.state), 89 == a.keyCode && qa(this.state), 88 == a.keyCode && (c = ""); + 67 == a.keyCode && (c = ""), 86 == a.keyCode && (c = ""), 90 == a.keyCode && sa(this.state), 89 == a.keyCode && ta(this.state), 88 == a.keyCode && (c = ""); } 8 == a.keyCode && (c = ""); 13 == a.keyCode && (c = ""); @@ -642,27 +684,27 @@ T.prototype.p = function() { }.bind(this)); $("#text-tool-close").click(function() { $("#text-tool-widget").hide(); - P(this.state); + N(this.state); }.bind(this)); }; -function sa(a, b) { +function va(a, b) { this.s = !1; this.state = a; this.view = b; this.file = null; - ta(this); + wa(this); $("#drive-button").click(function() { - this.s ? ua(this) : (V(this, !1), va(this)); + this.s ? xa(this) : (V(this, !1), ya(this)); }.bind(this)); $("#drive-filename").click(function() { var a = "" + $("#drive-filename").text(), a = prompt("Enter new filename:", a); this.file.title = a; this.save(); - wa(this); + za(this); }.bind(this)); - xa(this); + Aa(this); $(window).bind("hashchange", function() { - ya(this); + Ba(this); }.bind(this)); $("#drive-new-file-button").click(function() { this.file = null; @@ -675,32 +717,32 @@ function sa(a, b) { function V(a, b) { window.gapi.auth.authorize({client_id:"125643747010-9s9n1ne2fnnuh5v967licfkt83r4vba5.apps.googleusercontent.com", scope:"https://www.googleapis.com/auth/drive", immediate:b}, function(a) { !a || a.error || this.s || (this.s = !0, $("#drive-button").addClass("active"), window.setTimeout(function() { - ya(this); + Ba(this); }.bind(this), 500)); }.bind(a)); } -function ta(a) { +function wa(a) { window.gapi && window.gapi.auth && window.gapi.auth.authorize ? V(a, !0) : window.setTimeout(function() { - ta(this); + wa(this); }.bind(a), 500); } -function va(a) { +function ya(a) { window.setTimeout(function() { - this.s ? ua(this) : (V(this, !0), va(this)); + this.s ? xa(this) : (V(this, !0), ya(this)); }.bind(a), 1E3); } -function za(a, b) { +function Ca(a, b) { a.file = b; $("#drive-filename").text(b.title); window.location.hash = b.id; } -function ua(a) { +function xa(a) { $("#drive-dialog").addClass("visible"); var b = S(a.state); 5 < b.length && b != a.C && a.save(); - wa(a); + za(a); } -function wa(a) { +function za(a) { W(window.gapi.client.request({path:"/drive/v2/files", params:{q:"mimeType = 'text/plain' and trashed = false"}, method:"GET"}), function(a) { $("#drive-file-list").children().remove(); a = a.items; @@ -724,40 +766,40 @@ function W(a, b) { } catch (c) { } } -function xa(a) { +function Aa(a) { S(a.state) != a.C && a.file && a.file.editable && a.save(); window.setTimeout(function() { - xa(this); + Aa(this); }.bind(a), 5E3); } -sa.prototype.save = function() { +va.prototype.save = function() { var a = S(this.state); $("#drive-save-state").text("Saving..."); - W(Aa(this, a), function(b) { - za(this, b); + W(Da(this, a), function(b) { + Ca(this, b); $("#drive-save-state").text("Saved"); this.C = a; }.bind(this)); }; -function ya(a) { +function Ba(a) { 1 < window.location.hash.length && ($("#drive-save-state").text("Loading..."), W(window.gapi.client.request({path:"/drive/v2/files/" + window.location.hash.substr(1, window.location.hash.length - 1), method:"GET"}), function(a) { - za(this, a); - Ba(this); + Ca(this, a); + Ea(this); }.bind(a))); } -function Ba(a) { - Ca(a.file.downloadUrl, function(a) { +function Ea(a) { + Fa(a.file.downloadUrl, function(a) { $("#drive-save-state").text("Loaded"); this.state.clear(); - ra(this.state, a, G(this.view, new m(this.view.canvas.width / 2, this.view.canvas.height / 2))); + ua(this.state, a, F(this.view, new p(this.view.canvas.width / 2, this.view.canvas.height / 2))); this.C = S(this.state); }.bind(a)); } -function Aa(a, b) { +function Da(a, b) { var c = "\r\n---------314159265358979323846\r\nContent-Type: application/json\r\n\r\n" + JSON.stringify({title:null == a.file ? "Untitled ASCII Diagram" : a.file.title, mimeType:"text/plain"}) + "\r\n---------314159265358979323846\r\nContent-Type: text/plain\r\n\r\n" + b + "\r\n---------314159265358979323846--"; return window.gapi.client.request({path:"/upload/drive/v2/files" + (null == a.file ? "" : "/" + a.file.id), method:null == a.file ? "POST" : "PUT", params:{uploadType:"multipart"}, headers:{"Content-Type":'multipart/mixed; boundary="-------314159265358979323846"'}, body:c}); } -function Ca(a, b) { +function Fa(a, b) { var c = window.gapi.auth.getToken().access_token, d = new XMLHttpRequest; d.open("GET", a); d.setRequestHeader("Authorization", "Bearer " + c); @@ -769,11 +811,11 @@ function Ca(a, b) { }; d.send(); } -;function Da(a) { +;function Ga(a) { this.c = a; this.p(); } -Da.prototype.p = function() { +Ga.prototype.p = function() { var a = this.c.view.canvas; $(a).bind("mousewheel", function(a) { a = this.c.view.zoom * (0 < a.originalEvent.wheelDelta ? 1.1 : 0.9); @@ -785,12 +827,12 @@ Da.prototype.p = function() { $(a).mousedown(function(a) { if (a.ctrlKey || a.metaKey) { var c = this.c; - a = new m(a.clientX, a.clientY); + a = new p(a.clientX, a.clientY); c.mode = 1; c.G = a; c.H = c.view.offset; } else { - c = this.c, a = new m(a.clientX, a.clientY), c.mode = 2, c.d.start(G(c.view, a)); + c = this.c, a = new p(a.clientX, a.clientY), c.mode = 2, c.d.start(F(c.view, a)); } }.bind(this)); $(a).mouseup(function() { @@ -800,29 +842,29 @@ Da.prototype.p = function() { U(this.c); }.bind(this)); $(a).mousemove(function(a) { - this.c.t(new m(a.clientX, a.clientY)); + this.c.t(new p(a.clientX, a.clientY)); }.bind(this)); }; function X(a) { this.c = a; - this.B = this.l = !1; + this.B = this.m = !1; this.p(); } -function Ea(a, b) { +function Ha(a, b) { a.L = b; - a.Q = $.now(); - a.l = !1; + a.R = $.now(); + a.m = !1; window.setTimeout(function() { - if (!this.l && !this.B && null != this.L) { + if (!this.m && !this.B && null != this.L) { var a = this.c; a.mode = 2; - a.d.start(G(a.view, b)); + a.d.start(F(a.view, b)); } }.bind(a), 150); } X.prototype.t = function(a) { - if (!this.l && 150 > $.now() - this.Q && 6 < p(a, this.L).length()) { - this.l = !0; + if (!this.m && 150 > $.now() - this.R && 6 < r(a, this.L).length()) { + this.m = !0; var b = this.c; b.mode = 1; b.G = a; @@ -831,7 +873,7 @@ X.prototype.t = function(a) { this.c.t(a); }; X.prototype.reset = function() { - this.B = this.l = !1; + this.B = this.m = !1; this.L = null; }; X.prototype.p = function() { @@ -839,28 +881,28 @@ X.prototype.p = function() { $(a).bind("touchstart", function(a) { a.preventDefault(); if (1 == a.originalEvent.touches.length) { - Ea(this, new m(a.originalEvent.touches[0].pageX, a.originalEvent.touches[0].pageY)); + Ha(this, new p(a.originalEvent.touches[0].pageX, a.originalEvent.touches[0].pageY)); } else { if (1 < a.originalEvent.touches.length) { - var c = new m(a.originalEvent.touches[0].pageX, a.originalEvent.touches[0].pageY); - a = new m(a.originalEvent.touches[1].pageX, a.originalEvent.touches[1].pageY); + var c = new p(a.originalEvent.touches[0].pageX, a.originalEvent.touches[0].pageY); + a = new p(a.originalEvent.touches[1].pageX, a.originalEvent.touches[1].pageY); U(this.c); this.B = !0; - this.l = !1; - this.R = p(c, a).length(); - this.P = this.c.view.zoom; + this.m = !1; + this.S = r(c, a).length(); + this.Q = this.c.view.zoom; } } }.bind(this)); $(a).bind("touchmove", function(a) { a.preventDefault(); if (1 == a.originalEvent.touches.length) { - this.t(new m(a.originalEvent.touches[0].pageX, a.originalEvent.touches[0].pageY)); + this.t(new p(a.originalEvent.touches[0].pageX, a.originalEvent.touches[0].pageY)); } else { if (1 < a.originalEvent.touches.length) { - var c = new m(a.originalEvent.touches[0].pageX, a.originalEvent.touches[0].pageY); - a = new m(a.originalEvent.touches[1].pageX, a.originalEvent.touches[1].pageY); - this.B && (c = this.P * p(c, a).length() / this.R, c = Math.max(Math.min(c, 5), 0.5), a = this.c.view, a.zoom = c, a.e = !0); + var c = new p(a.originalEvent.touches[0].pageX, a.originalEvent.touches[0].pageY); + a = new p(a.originalEvent.touches[1].pageX, a.originalEvent.touches[1].pageY); + this.B && (c = this.Q * r(c, a).length() / this.S, c = Math.max(Math.min(c, 5), 0.5), a = this.c.view, a.zoom = c, a.e = !0); } } }.bind(this)); @@ -870,9 +912,9 @@ X.prototype.p = function() { U(this.c); }.bind(this)); }; -var Y = new R, Z = new E(Y), Fa = new T(Z, Y); -new X(Fa); -new Da(Fa); -new sa(Y, Z); +var Y = new R, Z = new ga(Y), Ia = new T(Z, Y); +new X(Ia); +new Ga(Ia); +new va(Y, Z); Z.animate(); diff --git a/js-lib/common.js b/js-lib/common.js index 99fdc09..532059b 100644 --- a/js-lib/common.js +++ b/js-lib/common.js @@ -15,10 +15,18 @@ try { /** @const */ var MAX_GRID_HEIGHT = 600; /** @const */ var SPECIAL_VALUE = '+'; +/** @const */ var ALT_SPECIAL_VALUE = '^'; +/** @const */ var SPECIAL_ARROW_LEFT = '<'; +/** @const */ var SPECIAL_ARROW_UP = '^'; +/** @const */ var SPECIAL_ARROW_RIGHT = '>'; +/** @const */ var SPECIAL_ARROW_DOWN = 'v'; +/** @const */ var SPECIAL_VALUES = ['+', '\u2012', '\u2013']; +/** @const */ var ALT_SPECIAL_VALUES = ['>', '<', '^', 'v']; +/** @const */ var ALL_SPECIAL_VALUES = SPECIAL_VALUES.concat(ALT_SPECIAL_VALUES); /** @const */ var MAX_UNDO = 50; -/** @const */ var SPECIAL_LINE_H = '\u2013'; +/** @const */ var SPECIAL_LINE_H = '\u2012'; /** @const */ var SPECIAL_LINE_V = '|'; /** @const */ var ERASE_CHAR = '\u2009'; @@ -155,7 +163,7 @@ ascii.Cell.prototype.getRawValue = function() { /** @return {boolean} */ ascii.Cell.prototype.isSpecial = function() { - return this.getRawValue() == SPECIAL_VALUE; + return ALL_SPECIAL_VALUES.indexOf(this.getRawValue()) != -1; }; /** @return {boolean} */ diff --git a/js-lib/controller.js b/js-lib/controller.js index 0f5be18..9a295b4 100644 --- a/js-lib/controller.js +++ b/js-lib/controller.js @@ -168,7 +168,10 @@ ascii.Controller.prototype.handleDrawButton = function(id) { this.drawFunction = new ascii.DrawBox(this.state); } if (id == 'line-button') { - this.drawFunction = new ascii.DrawLine(this.state); + this.drawFunction = new ascii.DrawLine(this.state, false); + } + if (id == 'arrow-button') { + this.drawFunction = new ascii.DrawLine(this.state, true); } if (id == 'freeform-button') { this.drawFunction = new ascii.DrawFreeform(this.state, "X"); diff --git a/js-lib/draw.js b/js-lib/draw.js index d940fc5..d9bb9dd 100644 --- a/js-lib/draw.js +++ b/js-lib/draw.js @@ -104,9 +104,11 @@ ascii.DrawBox.prototype.handleKey = function(value) {}; * @constructor * @implements {ascii.DrawFunction} * @param {ascii.State} state + * @param {boolean} isArrow */ -ascii.DrawLine = function(state) { +ascii.DrawLine = function(state, isArrow) { this.state = state; + this.isArrow = isArrow; /** @type {ascii.Vector} */ this.startPosition = null; }; @@ -127,6 +129,9 @@ ascii.DrawLine.prototype.move = function(position) { (endContext.left && endContext.right); drawLine(this.state, this.startPosition, position, clockwise); + if (this.isArrow) { + this.state.drawValue(position, ALT_SPECIAL_VALUE); + } }; /** @inheritDoc */ diff --git a/js-lib/state.js b/js-lib/state.js index 9834704..39ad53b 100644 --- a/js-lib/state.js +++ b/js-lib/state.js @@ -95,7 +95,7 @@ ascii.State.prototype.clearDraw = function() { ascii.State.prototype.getDrawValue = function(position) { var cell = this.getCell(position); var value = cell.scratchValue != null ? cell.scratchValue : cell.value; - if (value != SPECIAL_VALUE) { + if (value != SPECIAL_VALUE && value != ALT_SPECIAL_VALUE) { return value; } @@ -108,10 +108,41 @@ ascii.State.prototype.getDrawValue = function(position) { if (!context.left && !context.right && context.up && context.down) { return SPECIAL_LINE_V; } - if (context.left && context.right && context.up && context.down) { + if (context.sum() == 4) { return SPECIAL_LINE_H; } - return SPECIAL_VALUE; + if (value == SPECIAL_VALUE && context.sum() == 3) { + return SPECIAL_VALUE; + } + if (value == ALT_SPECIAL_VALUE && context.sum() == 3) { + if (!context.left) { + return SPECIAL_ARROW_LEFT; + } + if (!context.up) { + return SPECIAL_ARROW_UP; + } + if (!context.down) { + return SPECIAL_ARROW_DOWN; + } + if (!context.right) { + return SPECIAL_ARROW_RIGHT; + } + } + if (value == ALT_SPECIAL_VALUE && context.sum() == 1) { + if (context.left) { + return SPECIAL_ARROW_RIGHT; + } + if (context.up) { + return SPECIAL_ARROW_DOWN; + } + if (context.down) { + return SPECIAL_ARROW_UP; + } + if (context.right) { + return SPECIAL_ARROW_LEFT; + } + } + return value; }; /** @@ -257,9 +288,12 @@ ascii.State.prototype.fromText = function(value, offset) { // Convert special output back to special chars. // TODO: This is a horrible hack, need to handle multiple special chars // correctly and preserve them through line drawing etc. - if (char == SPECIAL_LINE_H || char == SPECIAL_LINE_V) { + if (SPECIAL_VALUES.indexOf(char) != -1) { char = SPECIAL_VALUE; } + if (ALT_SPECIAL_VALUES.indexOf(char) != -1) { + char = ALT_SPECIAL_VALUE; + } this.drawValue(new ascii.Vector(i, j).add(offset).subtract(middle), char); } }