From: Benjamin Auder <benjamin.auder@somewhere> Date: Sun, 11 Feb 2018 10:28:45 +0000 (+0100) Subject: Allow PNG file type, drop caching support X-Git-Url: https://git.auder.net/variants/Chakart/pieces/img/doc/DESCRIPTION?a=commitdiff_plain;h=40b4a9d230d105a61e22bef0a63a6e8d515524e9;p=erdiag.git Allow PNG file type, drop caching support --- 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,"<").replace(/>/g,">"); } @@ -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,"<").replace(/>/g,">"); } 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");