Merge branch 'develop' of github.com:mermaid-js/mermaid into develop

src/diagrams/flowchart/flowRenderer.js

@@ -8,7 +8,7 @@ import { getConfig } from '../../config';
 import dagreD3 from 'dagre-d3';
 import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { logger } from '../../logger';
-import { interpolateToCurve } from '../../utils';
+import { interpolateToCurve, getStylesFromArray } from '../../utils';
 import flowChartShapes from './flowChartShapes';
 
 const conf = {};
@@ -28,25 +28,6 @@ export const addVertices = function(vert, g, svgId) {
   const svg = d3.select(`[id="${svgId}"]`);
   const keys = Object.keys(vert);
 
-  const styleFromStyleArr = function(styleStr, arr, { label }) {
-    if (!label) {
-      // Create a compound style definition from the style definitions found for the node in the graph definition
-      for (let i = 0; i < arr.length; i++) {
-        if (typeof arr[i] !== 'undefined') {
-          styleStr = styleStr + arr[i] + ';';
-        }
-      }
-    } else {
-      // create the style definition for the text, if property is a text-property
-      for (let i = 0; i < arr.length; i++) {
-        if (typeof arr[i] !== 'undefined') {
-          if (arr[i].match('^color:|^text-align:')) styleStr = styleStr + arr[i] + ';';
-        }
-      }
-    }
-    return styleStr;
-  };
-
   // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
   keys.forEach(function(id) {
     const vertex = vert[id];
@@ -60,15 +41,7 @@ export const addVertices = function(vert, g, svgId) {
       classStr = vertex.classes.join(' ');
     }
 
-    /**
-     * Variable for storing the extracted style for the vertex
-     * @type {string}
-     */
-    let style = '';
-    // Create a compound style definition from the style definitions found for the node in the graph definition
-    style = styleFromStyleArr(style, vertex.styles, { label: false });
-    let labelStyle = '';
-    labelStyle = styleFromStyleArr(labelStyle, vertex.styles, { label: true });
+    const styles = getStylesFromArray(vertex.styles);
 
     // Use vertex id as text in the box if no text is provided by the graph definition
     let vertexText = vertex.text !== undefined ? vertex.text : vertex.id;
@@ -87,7 +60,7 @@ export const addVertices = function(vert, g, svgId) {
       vertexNode.parentNode.removeChild(vertexNode);
     } else {
       const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-      svgLabel.setAttribute('style', labelStyle.replace('color:', 'fill:'));
+      svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
 
       const rows = vertexText.split(/<br\s*\/?>/gi);
 
@@ -158,13 +131,13 @@ export const addVertices = function(vert, g, svgId) {
     // Add the node
     g.setNode(vertex.id, {
       labelType: 'svg',
-      labelStyle: labelStyle,
+      labelStyle: styles.labelStyle,
       shape: _shape,
       label: vertexNode,
       rx: radious,
       ry: radious,
       class: classStr,
-      style: style,
+      style: styles.style,
       id: vertex.id
     });
   });
@@ -179,8 +152,12 @@ export const addEdges = function(edges, g) {
   let cnt = 0;
 
   let defaultStyle;
+  let defaultLabelStyle;
+
   if (typeof edges.defaultStyle !== 'undefined') {
-    defaultStyle = edges.defaultStyle.toString().replace(/,/g, ';');
+    const defaultStyles = getStylesFromArray(edges.defaultStyle);
+    defaultStyle = defaultStyles.style;
+    defaultLabelStyle = defaultStyles.labelStyle;
   }
 
   edges.forEach(function(edge) {
@@ -195,10 +172,12 @@ export const addEdges = function(edges, g) {
     }
 
     let style = '';
+    let labelStyle = '';
+
     if (typeof edge.style !== 'undefined') {
-      edge.style.forEach(function(s) {
-        style = style + s + ';';
-      });
+      const styles = getStylesFromArray(edge.style);
+      style = styles.style;
+      labelStyle = styles.labelStyle;
     } else {
       switch (edge.stroke) {
         case 'normal':
@@ -206,6 +185,9 @@ export const addEdges = function(edges, g) {
           if (typeof defaultStyle !== 'undefined') {
             style = defaultStyle;
           }
+          if (typeof defaultLabelStyle !== 'undefined') {
+            labelStyle = defaultLabelStyle;
+          }
           break;
         case 'dotted':
           style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
@@ -215,7 +197,9 @@ export const addEdges = function(edges, g) {
           break;
       }
     }
+
     edgeData.style = style;
+    edgeData.labelStyle = labelStyle;
 
     if (typeof edge.interpolate !== 'undefined') {
       edgeData.curve = interpolateToCurve(edge.interpolate, d3.curveLinear);
@@ -243,6 +227,8 @@ export const addEdges = function(edges, g) {
         if (typeof edge.style === 'undefined') {
           edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
         }
+
+        edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
       }
     }
     // Add the edge to the graph