Allow PNG file type, drop caching support

diff --git a/index.html b/index.html
index 4aa7e9e..3123c2f 100644 (file)
--- 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>
                        <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">
 
                <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 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");
                                er.drawMcd("mcd", mcdType);
                                er.drawMld("mld");
                                er.fillSql("sql");

diff --git a/parser.js b/parser.js
index 218906c..2919c56 100644 (file)
--- a/parser.js
+++ b/parser.js
@@ -1,7 +1,7 @@
 // ER diagram description parser
 class ErDiags
 {
 // ER diagram description parser
 class ErDiags
 {

-       constructor(description, output)
+       constructor(description, output, image)

        {
                this.entities = { };
                this.inheritances = [ ];
        {
                this.entities = { };
                this.inheritances = [ ];


@@ -9,14 +9,8 @@ class ErDiags
                this.tables = { };
                this.mcdParsing(description);
                this.mldParsing();
                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)
        }
 
        static CARDINAL(symbol)


@@ -288,28 +282,12 @@ class ErDiags
        // DRAWING + GET SQL FROM PARSING
        /////////////////////////////////
 
        // 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";
        // "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';
                // Build dot graph input
                let mcdDot = 'graph {\n';
                mcdDot += 'rankdir="LR";\n';


@@ -423,14 +401,8 @@ class ErDiags
                        });
                });
                mcdDot += '}';
                        });
                });
                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;");
        }
                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);
        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';
                // 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")
                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;");
        }
                else
                        element.innerHTML = mldDot.replace(/</g,"&lt;").replace(/>/g,"&gt;");
        }

diff --git a/scripts/getGraphSvg.php b/scripts/getGraphSvg.php
deleted file mode 100644 (file)
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 (file)
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 (file)
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");