Draft of render-as-lines mode, renders the diagram as boxes instead of text

js-compiled.js

@@ -89,19 +89,19 @@ function ga(a) {
   for (var d = c.x;d < e.x;d++) {
     b.moveTo(9 * d - a.offset.x, 0 - a.offset.y), b.lineTo(9 * d - a.offset.x, 17 * a.state.cells.length - a.offset.y);
   }
-  for (var g = c.y;g < e.y;g++) {
+  for (d = c.y;d < e.y;d++) {
-    b.moveTo(0 - a.offset.x, 17 * g - a.offset.y), b.lineTo(9 * a.state.cells.length - a.offset.x, 17 * g - 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.font = "15px Courier New";
+  b.font = "15px Courier New";
   for (d = c.x;d < e.x;d++) {
-    for (g = c.y;g < e.y;g++) {
+    for (var h = c.y;h < e.y;h++) {
-      var h = A(a.state, new f(d, g));
+      var g = A(a.state, new f(d, h));
-      if (v(h) || null != h.f && " " != u(h)) {
+      if (v(g) || null != g.f && " " != u(g)) {
-        a.context.fillStyle = null != h.f ? "#DEF" : "#F5F5F5", b.fillRect(9 * d - a.offset.x, 17 * (g - 1) - a.offset.y, 9, 17);
+        a.context.fillStyle = null != g.f ? "#DEF" : "#F5F5F5", b.fillRect(9 * d - a.offset.x, 17 * (h - 1) - a.offset.y, 9, 17);
       }
-      h = C(a.state, new f(d, g));
+      g = C(a.state, new f(d, h));
-      null != h && (a.context.fillStyle = "#000000", b.fillText(h, 9 * d - a.offset.x, 17 * g - a.offset.y - 3));
+      null != g && (a.context.fillStyle = "#000000", b.fillText(g, 9 * d - a.offset.x, 17 * h - a.offset.y - 3));
     }
   }
 }
@@ -110,13 +110,13 @@ function z(a, b) {
 }
 ;function D(a, b, c, e, d) {
   d = d || "+";
-  var g = Math.min(b.x, c.x), h = 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 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;
-  for (e = e ? b.y : c.y;g++ < k;) {
+  for (e = e ? b.y : c.y;h++ < k;) {
-    var O = new f(g, e), H = a.getContext(new f(g, e));
+    var O = new f(h, e), H = a.getContext(new f(h, e));
     " " == d && 2 == H.n + H.j || E(a, O, d);
   }
-  for (;h++ < J;) {
+  for (;g++ < J;) {
-    O = new f(t, h), H = a.getContext(new f(t, h)), " " == d && 2 == H.left + H.right || E(a, O, d);
+    O = new f(t, g), H = a.getContext(new f(t, g)), " " == d && 2 == H.left + H.right || E(a, O, d);
   }
   F(a, b, d);
   F(a, c, d);
@@ -251,8 +251,8 @@ Q.prototype.start = function(a) {
   if (ba && !v(A(this.state, a))) {
     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) {
-      var g = a.add(b[d]), h = w(this.state.getContext(g));
+      var h = a.add(b[d]), g = w(this.state.getContext(h));
-      v(A(this.state, g)) && h > e && (c = b[d], e = h);
+      v(A(this.state, h)) && g > e && (c = b[d], e = g);
     }
     a = null == c ? a : a.add(c);
   }
@@ -291,11 +291,11 @@ Q.prototype.end = function() {
 };
 function R(a, b, c) {
   for (var e = b.clone(), d = [];;) {
-    var g = e.add(c);
+    var h = e.add(c);
-    if (!v(A(a.state, g))) {
+    if (!v(A(a.state, h))) {
       return l(b, e) || d.push(e), d;
     }
-    e = g;
+    e = h;
     3 == w(a.state.getContext(e)) && d.push(e);
   }
 }
@@ -362,15 +362,15 @@ function K(a, b) {
     return e.indexOf(e[b]) == b;
   });
   a.i.length = 0;
-  for (var g in d) {
+  for (var h in d) {
-    var h = d[g].w;
+    var g = d[h].w;
-    c.push(new ea(d[g].position, null != h.value ? h.value : " "));
+    c.push(new ea(d[h].position, null != g.value ? g.value : " "));
-    var k = u(h);
+    var k = u(g);
     if ("\u2009" == k || " " == k) {
       k = null;
     }
-    h.f = null;
+    g.f = null;
-    h.value = k;
+    g.value = k;
   }
   !b && 0 < c.length && (50 < a.q.length && a.q.shift(), a.q.push(c));
   a.d = !0;
@@ -394,13 +394,13 @@ function ha(a) {
   if (0 > c.x) {
     return "";
   }
-  for (var g = "", d = b.y;d <= c.y;d++) {
+  for (var h = "", d = b.y;d <= c.y;d++) {
-    for (var h = "", e = b.x;e <= c.x;e++) {
+    for (var g = "", e = b.x;e <= c.x;e++) {
-      var k = C(a, new f(e, d)), h = h + (null == k ? " " : k)
+      var k = C(a, new f(e, d)), g = g + (null == k ? " " : k)
     }
-    g += h.replace("\\s+$/g", "") + "\n";
+    h += g.replace("\\s+$/g", "") + "\n";
   }
-  return g;
+  return h;
 }
 ;function U(a, b) {
   this.view = a;
@@ -456,12 +456,12 @@ U.prototype.o = function() {
   $("#import-submit-button").click(function() {
     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 g = c[d], h = 0;h < g.length;h++) {
+      for (var h = c[d], g = 0;g < h.length;g++) {
-        var k = g.charAt(h);
+        var k = h.charAt(g);
         if ("\u2013" == k || "|" == k) {
           k = "+";
         }
-        F(a, (new f(h, d)).add(e), k);
+        F(a, (new f(g, d)).add(e), k);
       }
     }
     K(a);

js-lib/view.js

@@ -85,9 +85,14 @@ ascii.View.prototype.render = function() {
         j * CHAR_PIXELS_V - this.offset.y);
   }
   this.context.stroke();
+  this.renderCellsAsText(context, startOffset, endOffset);
+  //TODO: Add flag to control line vs. text drawing of structures.
+  //this.renderCellsAsLines(context, startOffset, endOffset);
+};
 
+ascii.View.prototype.renderCellsAsText = function(context, startOffset, endOffset) {
   // Render cells.
-  this.context.font = '15px Courier New';
+  context.font = '15px Courier New';
   for (var i = startOffset.x; i < endOffset.x; i++) {
     for (var j = startOffset.y; j < endOffset.y; j++) {
       var cell = this.state.getCell(new ascii.Vector(i, j));
@@ -110,6 +115,49 @@ ascii.View.prototype.render = function() {
       }
     }
   }
+}
+
+ascii.View.prototype.renderCellsAsLines = function(context, startOffset, endOffset) {
+  context.lineWidth = '1';
+  context.strokeStyle = '#000000';
+  context.beginPath();
+  for (var i = startOffset.x; i < endOffset.x; i++) {
+    var startY = false;
+    for (var j = startOffset.y; j < endOffset.y; j++) {
+      var cell = this.state.getCell(new ascii.Vector(i, j));
+      if (!cell.isSpecial() && startY) {
+        context.moveTo(
+            i * CHAR_PIXELS_H - this.offset.x + CHAR_PIXELS_H/2,
+            startY * CHAR_PIXELS_V - this.offset.y - CHAR_PIXELS_V/2);
+        context.lineTo(
+            i * CHAR_PIXELS_H - this.offset.x + CHAR_PIXELS_H/2,
+            (j - 1) * CHAR_PIXELS_V - this.offset.y - CHAR_PIXELS_V/2);
+        startY = false;
+      }
+      if (cell.isSpecial() && !startY) {
+        startY = j;
+      }
+    }
+  }
+  for (var j = startOffset.y; j < endOffset.y; j++) {
+    var startX = false;
+    for (var i = startOffset.x; i < endOffset.x; i++) {
+      var cell = this.state.getCell(new ascii.Vector(i, j));
+      if (!cell.isSpecial() && startX) {
+        context.moveTo(
+            startX * CHAR_PIXELS_H - this.offset.x + CHAR_PIXELS_H/2,
+            j * CHAR_PIXELS_V - this.offset.y - CHAR_PIXELS_V/2);
+        context.lineTo(
+            (i -1) * CHAR_PIXELS_H - this.offset.x + CHAR_PIXELS_H/2,
+            j * CHAR_PIXELS_V - this.offset.y - CHAR_PIXELS_V/2);
+        startX = false;
+      }
+      if (cell.isSpecial() && !startX) {
+        startX = i;
+      }
+    }
+  }
+  this.context.stroke();
 };
 
 /**