From 40b4a9d230d105a61e22bef0a63a6e8d515524e9 Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Sun, 11 Feb 2018 11:28:45 +0100
Subject: [PATCH] Allow PNG file type, drop caching support

---
 index.html               |  8 ++++++-
 parser.js                | 50 +++++-----------------------------------
 scripts/getGraphSvg.php  |  8 -------
 scripts/getGraph_png.php |  4 ++++
 scripts/getGraph_svg.php |  4 ++++
 5 files changed, 21 insertions(+), 53 deletions(-)
 delete mode 100644 scripts/getGraphSvg.php
 create mode 100644 scripts/getGraph_png.php
 create mode 100644 scripts/getGraph_svg.php

diff --git a/index.html b/index.html
index 4aa7e9e..3123c2f 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,11 @@
 			<input type="radio" name="output" value="graph" checked/> drawn graph
 			<input type="radio" name="output" value="text"/> graphviz input
 		</div>
+		<div>
+			<span>Image type:</span>
+			<input type="radio" name="image" value="svg" checked/> SVG
+			<input type="radio" name="image" value="png"/> PNG
+		</div>
 
 		<textarea id="graphDesc" rows="15" style="width:100%"></textarea>
 		<div id="result" style="display:none">
@@ -45,7 +50,8 @@
 				const graphDesc = document.getElementById("graphDesc").value;
 				const mcdType = getRadioValue("mcd");
 				const outputType = getRadioValue("output");
-				const er = new ErDiags(graphDesc, outputType);
+				const imageType = getRadioValue("image");
+				const er = new ErDiags(graphDesc, outputType, imageType);
 				er.drawMcd("mcd", mcdType);
 				er.drawMld("mld");
 				er.fillSql("sql");
diff --git a/parser.js b/parser.js
index 218906c..2919c56 100644
--- a/parser.js
+++ b/parser.js
@@ -1,7 +1,7 @@
 // ER diagram description parser
 class ErDiags
 {
-	constructor(description, output)
+	constructor(description, output, image)
 	{
 		this.entities = { };
 		this.inheritances = [ ];
@@ -9,14 +9,8 @@ class ErDiags
 		this.tables = { };
 		this.mcdParsing(description);
 		this.mldParsing();
-		this.output = output;
-		if (output == "graph")
-		{
-			// Cache SVG graphs returned by server (in addition to server cache = good perfs)
-			this.mcdGraph = "";
-			this.mldGraph = "";
-		}
-		this.sqlText = "";
+		this.output = output || "compact";
+		this.image = image || "svg";
 	}
 
 	static CARDINAL(symbol)
@@ -288,28 +282,12 @@ class ErDiags
 	// DRAWING + GET SQL FROM PARSING
 	/////////////////////////////////
 
-	static AjaxGet(dotInput, callback)
-	{
-		let xhr = new XMLHttpRequest();
-		xhr.onreadystatechange = function() {
-			if (this.readyState == 4 && this.status == 200)
-				callback(this.responseText);
-		};
-		xhr.open("GET", "scripts/getGraphSvg.php?dot=" + encodeURIComponent(dotInput), true);
-		xhr.send();
-	}
-
 	// "Modèle conceptuel des données". TODO: option for graph size
 	// NOTE: randomizing helps to obtain better graphs (sometimes)
 	drawMcd(id, mcdStyle) //mcdStyle: bubble, or compact
 	{
 		let element = document.getElementById(id);
 		mcdStyle = mcdStyle || "compact";
-		if (!!this.mcdGraph)
-		{
-			element.innerHTML = this.mcdGraph;
-			return;
-		}
 		// Build dot graph input
 		let mcdDot = 'graph {\n';
 		mcdDot += 'rankdir="LR";\n';
@@ -423,14 +401,8 @@ class ErDiags
 			});
 		});
 		mcdDot += '}';
-		if (this.output == "graph")
-		{
-			// Draw graph in element
-			ErDiags.AjaxGet(mcdDot, graphSvg => {
-				this.mcdGraph = graphSvg;
-				element.innerHTML = graphSvg;
-			});
-		}
+		if (this.output == "graph") //draw graph in element
+			element.innerHTML = "<img src='scripts/getGraph_" + this.image + ".php?dot=" + encodeURIComponent(mcdDot) + "'/>";
 		else //just show dot input
 			element.innerHTML = mcdDot.replace(/</g,"&lt;").replace(/>/g,"&gt;");
 	}
@@ -439,11 +411,6 @@ class ErDiags
 	drawMld(id)
 	{
 		let element = document.getElementById(id);
-		if (!!this.mldGraph)
-		{
-			element.innerHTML = this.mcdGraph;
-			return;
-		}
 		// Build dot graph input (assuming foreign keys not already present...)
 		let mldDot = 'graph {\n';
 		mldDot += 'rankdir="LR";\n';
@@ -470,12 +437,7 @@ class ErDiags
 		mldDot += links + '\n';
 		mldDot += '}';
 		if (this.output == "graph")
-		{
-			ErDiags.AjaxGet(mldDot, graphSvg => {
-				this.mldGraph = graphSvg;
-				element.innerHTML = graphSvg;
-			});
-		}
+			element.innerHTML = "<img src='scripts/getGraph_" + this.image + ".php?dot=" + encodeURIComponent(mldDot) + "'/>";
 		else
 			element.innerHTML = mldDot.replace(/</g,"&lt;").replace(/>/g,"&gt;");
 	}
diff --git a/scripts/getGraphSvg.php b/scripts/getGraphSvg.php
deleted file mode 100644
index 659b44d..0000000
--- a/scripts/getGraphSvg.php
+++ /dev/null
@@ -1,8 +0,0 @@
-<?php
-
-$dotInput = $_GET["dot"];
-
-// Call dot program on $dotInput, output as svg [TODO: offer more options]
-passthru("echo '" . $dotInput . "' | dot -Tsvg -Nfontname=Roboto -Nfontsize=14 -Efontname=Roboto -Efontsize=14");
-
-?>
diff --git a/scripts/getGraph_png.php b/scripts/getGraph_png.php
new file mode 100644
index 0000000..2b8b11d
--- /dev/null
+++ b/scripts/getGraph_png.php
@@ -0,0 +1,4 @@
+<?php
+header('Content-Type: image/png');
+$dotInput = $_GET["dot"];
+passthru("printf '$dotInput' | dot -Tpng -Nfontname=Roboto -Nfontsize=14 -Efontname=Roboto -Efontsize=14");
diff --git a/scripts/getGraph_svg.php b/scripts/getGraph_svg.php
new file mode 100644
index 0000000..0725f15
--- /dev/null
+++ b/scripts/getGraph_svg.php
@@ -0,0 +1,4 @@
+<?php
+header('Content-Type: image/svg+xml');
+$dotInput = $_GET["dot"];
+passthru("printf '$dotInput' | dot -Tsvg -Nfontname=Roboto -Nfontsize=14 -Efontname=Roboto -Efontsize=14");
-- 
2.44.0