<button onClick="processGraphDesc()">Send</button>
<div>
<span>MCD graph type:</span>
- <input type="radio" name="output" value="compact" checked/> compact
- <input type="radio" name="output" value="bubble"/> bubble
+ <input type="radio" name="mcd" value="compact" checked/> compact
+ <input type="radio" name="mcd" value="bubble"/> bubble
+ </div>
+ <div>
+ <span>Output type:</span>
+ <input type="radio" name="output" value="graph" checked/> drawn graph
+ <input type="radio" name="output" value="text"/> graphviz input
</div>
<textarea id="graphDesc" rows="15" style="width:100%"></textarea>
<script src="parser.js"></script>
<script>
const result = document.getElementById("result");
- function processGraphDesc() {
- const graphDesc = document.getElementById("graphDesc").value;
- const er = new ErDiags(graphDesc);
- let mode = "compact";
- for (let el of document.getElementsByName("output"))
+ function getRadioValue(name) {
+ for (let el of document.getElementsByName(name))
{
if (el.checked)
- {
- mode = el.value;
- break;
- }
+ return el.value;
}
- er.drawMcd("mcd", mode);
+ }
+ function processGraphDesc() {
+ const graphDesc = document.getElementById("graphDesc").value;
+ const mcdType = getRadioValue("mcd");
+ const outputType = getRadioValue("output");
+ const er = new ErDiags(graphDesc, outputType);
+ er.drawMcd("mcd", mcdType);
er.drawMld("mld");
er.fillSql("sql");
result.style.display = "block";
// ER diagram description parser
class ErDiags
{
- constructor(description, callDot)
+ constructor(description, output)
{
this.entities = { };
this.inheritances = [ ];
this.tables = { };
this.mcdParsing(description);
this.mldParsing();
- this.callDot = !!callDot;
- if (this.callDot)
+ this.output = output;
+ if (output == "graph")
{
// Cache SVG graphs returned by server (in addition to server cache = good perfs)
this.mcdGraph = "";
name: attr.name,
type: attr.type,
isKey: attr.isKey,
- qualifiers: attr.qualifiers,
};
if (!!attr.qualifiers && !!attr.qualifiers.match(/references/i))
{
Object.assign(newField, {ref: attr.qualifiers.match(/references ([^\s]+)/i)[1]});
- attr.qualifiers = attr.qualifiers.replace(/references [^\s]+/i, "");
+ newField.qualifiers = attr.qualifiers.replace(/references [^\s]+/i, "");
}
newTable.push(newField);
});
});
});
mcdDot += '}';
- if (this.callDot)
+ if (this.output == "graph")
{
// Draw graph in element
ErDiags.AjaxGet(mcdDot, graphSvg => {
});
mldDot += links + '\n';
mldDot += '}';
- if (this.callDot)
+ if (this.output == "graph")
{
ErDiags.AjaxGet(mldDot, graphSvg => {
this.mldGraph = graphSvg;