Adding missing files

src/graph.js

@@ -0,0 +1,64 @@
+/**
+ * Created by knut on 14-11-03.
+ */
+var mermaid;
+if(typeof mermaid === 'undefined') {
+    mermaid = {}
+}
+mermaid.vertices = {};
+mermaid.edges = [];
+
+mermaid.graph = {
+    addVertex: function (id, text, type, style) {
+        console.log('Got node ' + id + ' ' + type + ' ' + text + ' styles: ' + JSON.stringify(style));
+        if(typeof mermaid.vertices[id] === 'undefined'){
+            mermaid.vertices[id]={id:id, styles:[]};
+        }
+        if(typeof text !== 'undefined'){
+            mermaid.vertices[id].text = text;
+        }
+        if(typeof type !== 'undefined'){
+            mermaid.vertices[id].type = type;
+        }
+        if(typeof style !== 'undefined'){
+            if(style !== null){
+                console.log('Adding style: '+style);
+                style.forEach(function(s){
+                    mermaid.vertices[id].styles.push(s);
+                });
+            }
+        }
+    },
+    getVertices:function(){
+        return mermaid.vertices;
+    },
+    addLink: function (start, end, type, linktext) {
+        var edge = {start:start, end:end, type:undefined, text:''};
+        if(typeof linktext !== 'undefined'){
+            edge.text = linktext;
+        }
+
+        if(typeof type !== 'undefined'){
+            edge.type = type.type;
+        }
+        mermaid.edges.push(edge);
+        //console.log('Got link from ' + start + ' to ' + end + ' type:' + type.type + ' linktext:' + linktext);
+    },
+    updateLink: function (pos, style) {
+        //mermaid.edges.push(edge);
+        var position = pos.substr(1);
+        console.log('Got link style for ' + position + ' style ' + style);
+        mermaid.edges[position].style = style;
+    },
+    getEdges: function () {
+        return mermaid.edges;
+    },
+    clear:function(){
+        mermaid.vertices = {};
+        mermaid.edges = [];
+    },
+    defaultStyle:function(){
+        return "fill:#ffa;stroke: #f66; stroke-width: 3px; stroke-dasharray: 5, 5;fill:#ffa;stroke: #666;";
+    }
+};
+

src/main.js

@@ -0,0 +1,196 @@
+var mermaid;
+if (typeof mermaid === 'undefined') {
+    mermaid = {}
+}
+
+mermaid.addVertices = function (vert, g) {
+    var keys = Object.keys(vert);
+
+    keys.forEach(function (id) {
+        var vertice = vert[id];
+        var verticeText;
+
+
+        console.log(vertice.styles.length);
+
+        var i;
+        var style = '';
+        for (i = 0; i < vertice.styles.length; i++) {
+            if (typeof vertice.styles[i] !== 'undefined') {
+                style = style + vertice.styles[i] + ';';
+            }
+        }
+
+        if (vertice.text === undefined) {
+            verticeText = vertice.id;
+        }
+        else {
+            verticeText = vertice.text;
+        }
+
+
+        if (style === '') {
+            //style = graph.defaultStyle();
+        }
+
+        console.log('g.setNode("' + vertice.id + '",    { label: "' + verticeText + '" });');
+        if (vertice.type === 'round') {
+            g.setNode(vertice.id, {label: verticeText, rx: 5, ry: 5, style: style});
+        } else {
+            if (vertice.type === 'diamond') {
+                g.setNode(vertice.id, {shape: "question", label: verticeText, rx: 0, ry: 0, style: style});
+            } else {
+                g.setNode(vertice.id, {label: verticeText, rx: 0, ry: 0, style: style});
+            }
+        }
+    });
+};
+
+mermaid.addEdges = function (edges, g) {
+    edges.forEach(function (edge) {
+        var type, style;
+
+        if(typeof edge.type === 'undefined'){
+            type = 'arrow';
+        }else{
+            type = edge.type;
+        }
+        if(typeof edge.style === 'undefined'){
+            style = 'arrow';
+        }else{
+            type = edge.type;
+        }
+
+        var edgeText;
+        //console.log(vertice);
+        if (edge.text === 'undefined') {
+            if(typeof edge.style === 'undefined'){
+                g.setEdge(edge.start, edge.end,{ arrowheadStyle: "fill: #333"});
+            }else{
+                g.setEdge(edge.start, edge.end, {
+                    style: edge.style, arrowheadStyle: "fill: #333"
+                });
+            }
+
+        }
+        else {
+            if(typeof edge.style === 'undefined'){
+                g.setEdge(edge.start, edge.end,{label: edge.text, arrowheadStyle: "fill: #333"});
+            }else{
+                g.setEdge(edge.start, edge.end, {
+                    style: edge.style, arrowheadStyle: "fill: #333", label: edge.text
+                });
+            }
+        }
+        console.log('g.setEdge("' + edge.start + '","' + edge.end + '") ---');
+
+    });
+};
+
+mermaid.drawChart = function (text, id) {
+
+    console.log('drawing char with id:' + id);
+    console.log(text);
+    mermaid.graph.clear();
+    parser.yy = mermaid.graph;
+
+    var err = function () {
+        console.log('Syntax error!!!');
+    };
+
+    parser.parse(text);
+
+    var vert = mermaid.graph.getVertices();
+    var edges = mermaid.graph.getEdges();
+
+    console.log(edges);
+
+    var keys = Object.keys(vert);
+
+    // Create the input mermaid.graph
+    var g = new dagreD3.graphlib.Graph()
+        .setGraph({
+            //rankdir: "LR",
+            marginx: 20,
+            marginy: 20
+        })
+        .setDefaultEdgeLabel(function () {
+            return {};
+        });
+
+    console.log(g);
+
+    this.addVertices(vert, g);
+    this.addEdges(edges, g);
+
+    // Create the renderer
+    var render = new dagreD3.render();
+
+    // Add our custom shape
+    render.shapes().question = function (parent, bbox, node) {
+        var w = bbox.width,
+            h = bbox.height * 3,
+            points = [
+                {x: w / 2, y: 0},
+                {x: w, y: -h / 2},
+                {x: w / 2, y: -h},
+                {x: 0, y: -h / 2}
+            ];
+        shapeSvg = parent.insert("polygon", ":first-child")
+            .attr("points", points.map(function (d) {
+                return d.x + "," + d.y;
+            }).join(" "))
+            .style("fill", "#fff")
+            .style("stroke", "#333")
+            .attr("rx", 5)
+            .attr("ry", 5)
+            .attr("transform", "translate(" + (-w / 2) + "," + (h * 2 / 4) + ")");
+        node.intersect = function (point) {
+            return dagreD3.intersect.polygon(node, points, point);
+        };
+        return shapeSvg;
+    };
+    // Set up an SVG group so that we can translate the final graph.
+    var svg = d3.select("#" + id);
+    svgGroup = d3.select("#" + id + " g");
+
+    // Run the renderer. This is what draws the final graph.
+    render(d3.select("#" + id + " g"), g);
+
+    // Center the graph
+    var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
+    //svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");
+    svg.attr("height", g.graph().height + 40);
+};
+
+mermaid.init = function () {
+    var arr = document.querySelectorAll('.mermaid');
+
+
+    var cnt = 0;
+    for (i = 0; i < arr.length; i++) {
+        var element = arr[i];
+        var id;
+        //if(element.id.length === 0){
+        id = 'mermaidChart' + cnt;
+        //arr[i].id = id;
+        cnt++;
+        //}
+        //else{
+        //    id=element.id;
+        //}
+
+        var chartText = element.textContent.trim();
+
+        console.log(element);
+
+        element.innerHTML = '<svg id="' + id + '" width="100%">' +
+        '<g />' +
+        '</svg>';
+
+
+        this.drawChart(chartText, id);
+    }
+    ;
+};
+mermaid.init();