From 07bb62fc522bb9cefdd722989f1e386ceccce238 Mon Sep 17 00:00:00 2001
From: liulinwj <liulinwjzx@gmail.com>
Date: Mon, 7 Oct 2019 02:09:06 +0800
Subject: [PATCH 1/5] add download page

---
 generator-and-download.html | 147 ++++++++++++++++++++++++++++++++++++
 railroad-diagrams.js        |   5 ++
 2 files changed, 152 insertions(+)
 create mode 100644 generator-and-download.html
diff --git a/generator-and-download.html b/generator-and-download.html
new file mode 100644
index 0000000..815e3fb
--- /dev/null
+++ b/generator-and-download.html
@@ -0,0 +1,147 @@
+<!doctype html>
+<title>Railroad Diagram Generator</title>
+<style id="svg-rule">
+	/* To make svg file alone, move CSS here for written to svg file. */
+	svg.railroad-diagram {
+			background-color: hsl(30,20%,95%);
+	}
+	svg.railroad-diagram path {
+			stroke-width: 3;
+			stroke: black;
+			fill: rgba(0,0,0,0);
+	}
+	svg.railroad-diagram text {
+			font: bold 14px monospace;
+			text-anchor: middle;
+			white-space: pre;
+	}
+	svg.railroad-diagram text.diagram-text {
+			font-size: 12px;
+	}
+	svg.railroad-diagram text.diagram-arrow {
+			font-size: 16px;
+	}
+	svg.railroad-diagram text.label {
+			text-anchor: start;
+	}
+	svg.railroad-diagram text.comment {
+			font: italic 12px monospace;
+	}
+	svg.railroad-diagram g.non-terminal text {
+			/*font-style: italic;*/
+	}
+	svg.railroad-diagram rect {
+			stroke-width: 3;
+			stroke: black;
+			fill: hsl(120,100%,90%);
+	}
+	svg.railroad-diagram path.diagram-text {
+			stroke-width: 3;
+			stroke: black;
+			fill: white;
+			cursor: help;
+	}
+	svg.railroad-diagram g.diagram-text:hover path.diagram-text {
+			fill: #eee;
+	}
+</style>
+
+<textarea class='input'>Diagram(
+  Optional('+', 'skip'),
+  Choice(0,
+    NonTerminal('name-start char'),
+    NonTerminal('escape')),
+  ZeroOrMore(
+    Choice(0,
+      NonTerminal('name char'),
+			NonTerminal('escape'))))</textarea>
+			
+<div class="aaaa">
+	<input type="button" class="btn js-download-svg" value="Download SVG">
+</div>
+
+
+<div class='output-image'></div>
+<textarea class='output-text' readonly></textarea>
+<script src="railroad-diagrams.js"></script>
+<script>
+const find = document.querySelector.bind(document);
+
+find('.input').addEventListener('input', e=>process(e.target.value), false);
+document.addEventListener('DOMContentLoaded', initialProcess, false);
+window.addEventListener('hashchange', hashProcess, false);
+
+function initialProcess() {
+	if(location.hash && location.hash.length > 1) {
+		const code = decodeURIComponent(location.hash.substr(1));
+		const input = find('.input');
+		input.textContent = code;
+	}
+	process();
+}
+
+function hashProcess() {
+	if(location.hash && location.hash.length > 1) {
+		const code = decodeURIComponent(location.hash.substr(1));
+		const input = find('.input');
+		if(input.value != code) {
+			input.textContent = code;
+			process(code);
+		}
+	}
+}
+
+function process(input) {
+	if(!input) input = find('.input').value;
+	try {
+		var result = eval(input).format();
+		location.hash = "#" + encodeURIComponent(input);
+	} catch (e) {
+		find('.output-text').textContent = "Invalid input.\n" + e
+		throw e;
+	}
+	console.info(result);
+	find('.output-image').innerHTML = '';
+	result.addTo(find('.output-image'));
+	find('.output-text').textContent = result;
+}
+
+
+find(".js-download-svg").addEventListener("click", function(e) {
+	var content = find(".output-text").value;
+	var svgRule = find("#svg-rule");
+	content = content.replace(/^(<svg[^\r\n<>]+>[\r\n])/, "$1" + svgRule.outerHTML + "\n");
+	console.info(content);
+	var blob = new Blob([content]);
+	Object.assign(document.createElement("a"), {
+		download: "railroad-diagram.svg",
+		href: URL.createObjectURL(blob),
+	}).click();
+	URL.revokeObjectURL(blob);
+});
+</script>
+
+<style>
+@media all and (min-width: 400px) {
+	html, body { margin: 0; padding: 0; height: 100%; }
+	body {
+		display: grid;
+		grid-template:
+			"input  code" 1fr
+			"output expl" 1fr
+			/ 1fr   1fr;
+	}
+}
+.input {
+	grid-area: input;
+}
+.output-text {
+	grid-area: code;
+}
+.output-image {
+	grid-area: output;
+}
+.explanation {
+	grid-area: expl;
+}
+</style>
diff --git a/railroad-diagrams.js b/railroad-diagrams.js
index 26c9d58..eca291a 100644
--- a/railroad-diagrams.js
+++ b/railroad-diagrams.js
@@ -86,6 +86,11 @@ and can be changed before creating a Diagram.
 		else this.children = [];
 		this.tagName = tagName;
 		this.attrs = unnull(attrs, {});
+		if (tagName === "svg") {
+			// Add namespace for svg so that some browers (e.g. Chrome) can show svg directly,
+			// but not show the source of svg file.
+			this.attrs.xmlns = "http://www.w3.org/2000/svg";
+		}
 		return this;
 	};
 	FakeSVG.prototype.format = function(x, y, width) {

From db69ac581caa5ad2451a45b2953c601d5ecc2bb0 Mon Sep 17 00:00:00 2001
From: liulinwj <liulinwjzx@gmail.com>
Date: Mon, 7 Oct 2019 23:31:28 +0800
Subject: [PATCH 2/5] nest source code

---
 generator-and-download.html | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/generator-and-download.html b/generator-and-download.html
index 815e3fb..741ab48 100644
--- a/generator-and-download.html
+++ b/generator-and-download.html
@@ -55,7 +55,7 @@
     Choice(0,
       NonTerminal('name char'),
 			NonTerminal('escape'))))</textarea>
-			
+
 <div class="aaaa">
 	<input type="button" class="btn js-download-svg" value="Download SVG">
 </div>
@@ -66,11 +66,9 @@
 <script src="railroad-diagrams.js"></script>
 <script>
 const find = document.querySelector.bind(document);
-
 find('.input').addEventListener('input', e=>process(e.target.value), false);
 document.addEventListener('DOMContentLoaded', initialProcess, false);
 window.addEventListener('hashchange', hashProcess, false);
-
 function initialProcess() {
 	if(location.hash && location.hash.length > 1) {
 		const code = decodeURIComponent(location.hash.substr(1));
@@ -79,7 +77,6 @@
 	}
 	process();
 }
-
 function hashProcess() {
 	if(location.hash && location.hash.length > 1) {
 		const code = decodeURIComponent(location.hash.substr(1));
@@ -90,7 +87,6 @@
 		}
 	}
 }
-
 function process(input) {
 	if(!input) input = find('.input').value;
 	try {
@@ -100,18 +96,15 @@
 		find('.output-text').textContent = "Invalid input.\n" + e
 		throw e;
 	}
-	console.info(result);
 	find('.output-image').innerHTML = '';
 	result.addTo(find('.output-image'));
 	find('.output-text').textContent = result;
 }
-
-
 find(".js-download-svg").addEventListener("click", function(e) {
 	var content = find(".output-text").value;
 	var svgRule = find("#svg-rule");
 	content = content.replace(/^(<svg[^\r\n<>]+>[\r\n])/, "$1" + svgRule.outerHTML + "\n");
-	console.info(content);
+	content += `\n\n<!-- Railroad Diagram Source -->\n<!--\n${find(".input").value}\n-->`
 	var blob = new Blob([content]);
 	Object.assign(document.createElement("a"), {
 		download: "railroad-diagram.svg",

From ae5499c6c9b0b71002488f189cf095a3149591f6 Mon Sep 17 00:00:00 2001
From: liulinwj <liulinwjzx@gmail.com>
Date: Mon, 7 Oct 2019 23:35:07 +0800
Subject: [PATCH 3/5] nest source code

---
 generator-and-download.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/generator-and-download.html b/generator-and-download.html
index 741ab48..da593d9 100644
--- a/generator-and-download.html
+++ b/generator-and-download.html
@@ -104,7 +104,7 @@
 	var content = find(".output-text").value;
 	var svgRule = find("#svg-rule");
 	content = content.replace(/^(<svg[^\r\n<>]+>[\r\n])/, "$1" + svgRule.outerHTML + "\n");
-	content += `\n\n<!-- Railroad Diagram Source -->\n<!--\n${find(".input").value}\n-->`
+	content += `\n\n<!-- Railroad Diagram Source -->\n<!--\n${find(".input").value}\n-->`;
 	var blob = new Blob([content]);
 	Object.assign(document.createElement("a"), {
 		download: "railroad-diagram.svg",

From 9a925abc54562fd094d333286eb79fa1b66e867d Mon Sep 17 00:00:00 2001
From: liulinwj <liulinwjzx@gmail.com>
Date: Mon, 7 Oct 2019 23:37:18 +0800
Subject: [PATCH 4/5] nest source code

---
 generator-and-download.html | 96 ++++++++++++++++++++-----------------
 1 file changed, 53 insertions(+), 43 deletions(-)

diff --git a/generator-and-download.html b/generator-and-download.html
index da593d9..8029af2 100644
--- a/generator-and-download.html
+++ b/generator-and-download.html
@@ -1,49 +1,59 @@
 <!doctype html>
 <title>Railroad Diagram Generator</title>
 <style id="svg-rule">
-	/* To make svg file alone, move CSS here for written to svg file. */
-	svg.railroad-diagram {
-			background-color: hsl(30,20%,95%);
-	}
-	svg.railroad-diagram path {
-			stroke-width: 3;
-			stroke: black;
-			fill: rgba(0,0,0,0);
-	}
-	svg.railroad-diagram text {
-			font: bold 14px monospace;
-			text-anchor: middle;
-			white-space: pre;
-	}
-	svg.railroad-diagram text.diagram-text {
-			font-size: 12px;
-	}
-	svg.railroad-diagram text.diagram-arrow {
-			font-size: 16px;
-	}
-	svg.railroad-diagram text.label {
-			text-anchor: start;
-	}
-	svg.railroad-diagram text.comment {
-			font: italic 12px monospace;
-	}
-	svg.railroad-diagram g.non-terminal text {
-			/*font-style: italic;*/
-	}
-	svg.railroad-diagram rect {
-			stroke-width: 3;
-			stroke: black;
-			fill: hsl(120,100%,90%);
-	}
-	svg.railroad-diagram path.diagram-text {
-			stroke-width: 3;
-			stroke: black;
-			fill: white;
-			cursor: help;
-	}
-	svg.railroad-diagram g.diagram-text:hover path.diagram-text {
-			fill: #eee;
-	}
+  /* To make svg file alone, move CSS here for written to svg file. */
+  svg.railroad-diagram {
+    background-color: hsl(30, 20%, 95%);
+  }
+
+  svg.railroad-diagram path {
+    stroke-width: 3;
+    stroke: black;
+    fill: rgba(0, 0, 0, 0);
+  }
+
+  svg.railroad-diagram text {
+    font: bold 14px monospace;
+    text-anchor: middle;
+    white-space: pre;
+  }
+
+  svg.railroad-diagram text.diagram-text {
+    font-size: 12px;
+  }
+
+  svg.railroad-diagram text.diagram-arrow {
+    font-size: 16px;
+  }
+
+  svg.railroad-diagram text.label {
+    text-anchor: start;
+  }
+
+  svg.railroad-diagram text.comment {
+    font: italic 12px monospace;
+  }
+
+  svg.railroad-diagram g.non-terminal text {
+    /*font-style: italic;*/
+  }
+
+  svg.railroad-diagram rect {
+    stroke-width: 3;
+    stroke: black;
+    fill: hsl(120, 100%, 90%);
+  }
+
+  svg.railroad-diagram path.diagram-text {
+    stroke-width: 3;
+    stroke: black;
+    fill: white;
+    cursor: help;
+  }
+
+  svg.railroad-diagram g.diagram-text:hover path.diagram-text {
+    fill: #eee;
+  }
 </style>
 
 <textarea class='input'>Diagram(

From ba12988a8dbf77330d6192ac77451fbcdfea28db Mon Sep 17 00:00:00 2001
From: liulinwj <liulinwjzx@gmail.com>
Date: Thu, 20 Feb 2020 02:54:19 +0800
Subject: [PATCH 5/5] add

---
 generator-and-download.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/generator-and-download.html b/generator-and-download.html
index 8029af2..b1dcc0a 100644
--- a/generator-and-download.html
+++ b/generator-and-download.html
@@ -66,7 +66,7 @@
       NonTerminal('name char'),
 			NonTerminal('escape'))))</textarea>
 
-<div class="aaaa">
+<div>
 	<input type="button" class="btn js-download-svg" value="Download SVG">
 </div>
 
