From 8e9890d6e1713305952533f3a16d23609dac2b10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Westr=C3=B6m?= <bjowes@gmail.com>
Date: Wed, 14 Jan 2015 00:02:58 +0100
Subject: [PATCH] New shape, text labels

Added support to configure mermaid to use plain text labels for better
SVG compatibility
Added a reverse asymmetric shape, not in the graph syntax yet
---
 src/diagrams/flowchart/flowRenderer.js | 40 ++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index e35e1bf69..1f3f9a906 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -61,7 +61,7 @@ exports.addVertices = function (vert, g) {
         }
 
         var labelTypeStr = '';
-        if(equals('html',mermaid_config.labelType)) {
+        if(global.mermaid.htmlLabels) {
             labelTypeStr = 'html';
         } else {
             verticeText = verticeText.replace(/<br>/g, "\n");
@@ -86,6 +86,9 @@ exports.addVertices = function (vert, g) {
             case 'odd':
                 _shape = 'rect_left_inv_arrow';
                 break;
+            case 'odd_right':
+                _shape = 'rect_left_inv_arrow';
+                break;
             case 'circle':
                 _shape = 'circle';
                 break;
@@ -155,11 +158,14 @@ exports.addEdges = function (edges, g) {
         else {
             var edgeText = edge.text.replace(/<br>/g, "\n");
             if(typeof edge.style === 'undefined'){
-                //g.setEdge(edge.start, edge.end,{labelType: "text", style: "stroke: #333; stroke-width: 1.5px;fill:none", labelpos:'c', label: edgeText, arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
-                g.setEdge(edge.start, edge.end,{labelType: "html",style: style, labelpos:'c', label: '<span style="background:#e8e8e8">'+edge.text+'</span>', arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
-            }else{
+                if (global.mermaid.htmlLabels){
+                    g.setEdge(edge.start, edge.end,{labelType: "html",style: style, labelpos:'c', label: '<span style="background:#e8e8e8">'+edge.text+'</span>', arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
+                }else{
+                    g.setEdge(edge.start, edge.end,{labelType: "text", style: "stroke: #333; stroke-width: 1.5px;fill:none", labelpos:'c', label: edgeText, arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
+                }
+             }else{
                 g.setEdge(edge.start, edge.end, {
-                    labelType: "text",style: style, arrowheadStyle: "fill: #333", label: edgeText, arrowhead: aHead
+                    labelType: "text", style: style, arrowheadStyle: "fill: #333", label: edgeText, arrowhead: aHead
                 },cnt);
             }
         }
@@ -192,7 +198,7 @@ exports.getClasses = function (text, isDot) {
     // Add default class if undefined
     if(typeof(classes.default) === 'undefined') {
         classes.default = {id:'default'};
-        classes.default.styles = ['fill:#eaeaea','stroke:#666','stroke-width:1.5px'];
+        classes.default.styles = ['fill:#ffa','stroke:#666','stroke-width:3px'];
         classes.default.nodeLabelStyles = ['fill:#000','stroke:none','font-weight:300','font-family:"Helvetica Neue",Helvetica,Arial,sans-serf','font-size:14px'];
         classes.default.edgeLabelStyles = ['fill:#000','stroke:none','font-weight:300','font-family:"Helvetica Neue",Helvetica,Arial,sans-serf','font-size:14px'];
     }
@@ -321,6 +327,28 @@ exports.draw = function (text, id,isDot) {
         return shapeSvg;
     };
 
+    // Add custom shape for box with inverted arrow on right side
+    render.shapes().rect_right_inv_arrow = function (parent, bbox, node) {
+        var w = bbox.width,
+            h = bbox.height,
+            points = [
+                {x: 0, y: 0},
+                {x: w+h/2, y: 0},
+                {x: w, y: -h/2},
+                {x: w+h/2, y: -h},
+                {x: 0, y: -h},
+            ];
+        var shapeSvg = parent.insert("polygon", ":first-child")
+            .attr("points", points.map(function (d) {
+                return d.x + "," + d.y;
+            }).join(" "))
+            .attr("transform", "translate(" + (-w / 2) + "," + (h * 2 / 4) + ")");
+        node.intersect = function (point) {
+            return dagreD3.intersect.polygon(node, points, point);
+        };
+        return shapeSvg;
+    };
+
     // Add our custom arrow - an empty arrowhead
     render.arrows().none = function normal(parent, id, edge, type) {
         var marker = parent.append("marker")