Merge branch 'develop' of https://github.com/knsv/mermaid into 1542_take_two

src/diagrams/class/classRenderer-v2.js

@@ -9,7 +9,7 @@ import { getConfig } from '../../config';
 import { render } from '../../dagre-wrapper/index.js';
 // import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { curveLinear } from 'd3';
-import { interpolateToCurve, getStylesFromArray } from '../../utils';
+import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
 import common from '../common/common';
 
 parser.yy = classDb;
@@ -331,13 +331,7 @@ export const drawOld = function(text, id) {
   const width = svgBounds.width + padding * 2;
   const height = svgBounds.height + padding * 2;
 
-  if (conf.useMaxWidth) {
-    diagram.attr('width', '100%');
-    diagram.attr('style', `max-width: ${width}px;`);
-  } else {
-    diagram.attr('height', height);
-    diagram.attr('width', width);
-  }
+  configureSvgSize(diagram, height, width, conf.useMaxWidth);
 
   // Ensure the viewBox includes the whole svgBounds area with extra space for padding
   const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
@@ -433,13 +427,7 @@ export const draw = function(text, id) {
     `translate(${padding - g._label.marginx}, ${padding - g._label.marginy})`
   );
 
-  if (conf.useMaxWidth) {
-    svg.attr('width', '100%');
-    svg.attr('style', `max-width: ${width}px;`);
-  } else {
-    svg.attr('height', height);
-    svg.attr('width', width);
-  }
+  configureSvgSize(svg, height, width, conf.useMaxWidth);
 
   svg.attr('viewBox', `0 0 ${width} ${height}`);
   svg

src/diagrams/class/classRenderer.js

@@ -5,6 +5,7 @@ import { logger } from '../../logger';
 import classDb, { lookUpDomId } from './classDb';
 import { parser } from './parser/classDiagram';
 import svgDraw from './svgDraw';
+import { configureSvgSize } from '../../utils';
 
 parser.yy = classDb;
 
@@ -232,13 +233,7 @@ export const draw = function(text, id) {
   const width = svgBounds.width + padding * 2;
   const height = svgBounds.height + padding * 2;
 
-  if (conf.useMaxWidth) {
-    diagram.attr('width', '100%');
-    diagram.attr('style', `max-width: ${width}px;`);
-  } else {
-    diagram.attr('height', height);
-    diagram.attr('width', width);
-  }
+  configureSvgSize(diagram, height, width, conf.useMaxWidth);
 
   // Ensure the viewBox includes the whole svgBounds area with extra space for padding
   const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;

src/diagrams/er/erRenderer.js

@@ -6,6 +6,7 @@ import dagre from 'dagre';
 import { getConfig } from '../../config';
 import { logger } from '../../logger';
 import erMarkers from './erMarkers';
+import { configureSvgSize } from '../../utils';
 
 const conf = {};
 
@@ -344,13 +345,7 @@ export const draw = function(text, id) {
   const width = svgBounds.width + padding * 2;
   const height = svgBounds.height + padding * 2;
 
-  if (conf.useMaxWidth) {
-    svg.attr('width', '100%');
-    svg.attr('style', `max-width: ${width}px;`);
-  } else {
-    svg.attr('height', height);
-    svg.attr('width', width);
-  }
+  configureSvgSize(svg, height, width, conf.useMaxWidth);
 
   svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
 }; // draw

src/diagrams/flowchart/flowDb.js

@@ -421,6 +421,22 @@ export const addSubGraph = function(_id, list, _title) {
   title = common.sanitizeText(title, config);
   subCount = subCount + 1;
   const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [] };
+
+  /**
+   * Deletes an id from all subgraphs
+   */
+  const del = _id => {
+    subGraphs.forEach(sg => {
+      const pos = sg.nodes.indexOf(_id);
+      if (pos >= 0) {
+        console.log(sg.nodes, pos, _id);
+        sg.nodes.splice(pos, 1);
+      }
+    });
+  };
+  // Removes the members of this subgraph from any other subgraphs, a node only belong to one subgraph
+  subGraph.nodes.forEach(_id => del(_id));
+  console.log(subGraph.nodes);
   subGraphs.push(subGraph);
   subGraphLookup[id] = subGraph;
   return id;

src/diagrams/flowchart/flowRenderer-v2.js

@@ -9,7 +9,7 @@ import { render } from '../../dagre-wrapper/index.js';
 import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { logger } from '../../logger';
 import common from '../common/common';
-import { interpolateToCurve, getStylesFromArray } from '../../utils';
+import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
 
 const conf = {};
 export const setConf = function(cnf) {
@@ -382,11 +382,13 @@ export const draw = function(text, id) {
   logger.info(edges);
   let i = 0;
   for (i = subGraphs.length - 1; i >= 0; i--) {
+    // for (let i = 0; i < subGraphs.length; i++) {
     subG = subGraphs[i];
 
     selectAll('cluster').append('text');
 
     for (let j = 0; j < subG.nodes.length; j++) {
+      logger.info('Setting up subgraphs', subG.nodes[j], subG.id);
       g.setParent(subG.nodes[j], subG.id);
     }
   }
@@ -418,13 +420,7 @@ export const draw = function(text, id) {
     `translate(${padding - g._label.marginx}, ${padding - g._label.marginy})`
   );
 
-  if (conf.useMaxWidth) {
-    svg.attr('width', '100%');
-    svg.attr('style', `max-width: ${width}px;`);
-  } else {
-    svg.attr('height', height);
-    svg.attr('width', width);
-  }
+  configureSvgSize(svg, height, width, conf.useMaxWidth);
 
   svg.attr('viewBox', `0 0 ${width} ${height}`);
   svg

src/diagrams/flowchart/flowRenderer.js

@@ -9,7 +9,7 @@ import dagreD3 from 'dagre-d3';
 import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { logger } from '../../logger';
 import common from '../common/common';
-import { interpolateToCurve, getStylesFromArray } from '../../utils';
+import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
 import flowChartShapes from './flowChartShapes';
 
 const conf = {};
@@ -401,13 +401,7 @@ export const draw = function(text, id) {
   const width = svgBounds.width + padding * 2;
   const height = svgBounds.height + padding * 2;
 
-  if (conf.useMaxWidth) {
-    svg.attr('width', '100%');
-    svg.attr('style', `max-width: ${width}px;`);
-  } else {
-    svg.attr('height', height);
-    svg.attr('width', width);
-  }
+  configureSvgSize(svg, height, width, conf.useMaxWidth);
 
   // Ensure the viewBox includes the whole svgBounds area with extra space for padding
   const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;

src/diagrams/flowchart/parser/subgraph.spec.js

@@ -1,5 +1,6 @@
 import flowDb from '../flowDb';
 import flow from './flow';
+import filter from 'lodash/filter';
 import { setConfig } from '../../../config';
 
 setConfig({
@@ -238,4 +239,75 @@ describe('when parsing subgraphs', function() {
 
     expect(edges[0].type).toBe('arrow_point');
   });
+  it('should handle nested subgraphs 1', function() {
+    const res = flow.parser.parse(`flowchart TB
+    subgraph A
+    b-->B
+    a-->c
+    end
+    subgraph B
+      c
+    end`);
+
+    const subgraphs = flow.parser.yy.getSubGraphs();
+    expect(subgraphs.length).toBe(2);
+
+    const subgraphA = filter(subgraphs,o => o.id === 'A')[0];
+    const subgraphB = filter(subgraphs,o => o.id === 'B')[0];
+
+    expect(subgraphB.nodes[0]).toBe('c');
+    expect(subgraphA.nodes).toContain('B');
+    expect(subgraphA.nodes).toContain('b');
+    expect(subgraphA.nodes).toContain('a');
+    expect(subgraphA.nodes).not.toContain('c');
+  });
+  it('should handle nested subgraphs 2', function() {
+    const res = flow.parser.parse(`flowchart TB
+    b-->B
+    a-->c
+    subgraph B
+      c
+    end
+    subgraph A
+        a
+        b
+        B
+    end`);
+
+    const subgraphs = flow.parser.yy.getSubGraphs();
+    expect(subgraphs.length).toBe(2);
+
+    const subgraphA = filter(subgraphs,o => o.id === 'A')[0];
+    const subgraphB = filter(subgraphs,o => o.id === 'B')[0];
+
+    expect(subgraphB.nodes[0]).toBe('c');
+    expect(subgraphA.nodes).toContain('B');
+    expect(subgraphA.nodes).toContain('b');
+    expect(subgraphA.nodes).toContain('a');
+    expect(subgraphA.nodes).not.toContain('c');
+  });
+  it('should handle nested subgraphs 3', function() {
+    console.log('#3');
+    const res = flow.parser.parse(`flowchart TB
+    subgraph B
+      c
+    end
+    a-->c
+    subgraph A
+      b-->B
+      a
+    end`);
+
+    const subgraphs = flow.parser.yy.getSubGraphs();
+    expect(subgraphs.length).toBe(2);
+
+    const subgraphA = filter(subgraphs,o => o.id === 'A')[0];
+    const subgraphB = filter(subgraphs,o => o.id === 'B')[0];
+    console.log(subgraphB.nodes)
+    expect(subgraphB.nodes[0]).toBe('c');
+    expect(subgraphA.nodes).toContain('B');
+    expect(subgraphA.nodes).toContain('b');
+    expect(subgraphA.nodes).toContain('a');
+    expect(subgraphA.nodes).not.toContain('c');
+  });
 });

src/diagrams/gantt/ganttRenderer.js

@@ -11,6 +11,7 @@ import {
 import { parser } from './parser/gantt';
 import common from '../common/common';
 import ganttDb from './ganttDb';
+import { configureSvgSize } from '../../utils';
 
 parser.yy = ganttDb;
 
@@ -53,7 +54,6 @@ export const draw = function(text, id) {
   // Set height based on number of tasks
   const h = taskArray.length * (conf.barHeight + conf.barGap) + 2 * conf.topPadding;
 
-  elem.setAttribute('height', '100%');
   // Set viewBox
   elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
   const svg = select(`[id="${id}"]`);
@@ -97,9 +97,8 @@ export const draw = function(text, id) {
   taskArray.sort(taskCompare);
 
   makeGant(taskArray, w, h);
-  if (typeof conf.useWidth !== 'undefined') {
-    elem.setAttribute('width', w);
-  }
+
+  configureSvgSize(svg, h, w, conf.useMaxWidth);
 
   svg
     .append('text')

src/diagrams/pie/pieRenderer.js

@@ -5,6 +5,7 @@ import { select, scaleOrdinal, schemeSet2, pie as d3pie, entries, arc } from 'd3
 import pieData from './pieDb';
 import pieParser from './parser/pie';
 import { logger } from '../../logger';
+import { configureSvgSize } from '../../utils';
 
 const conf = {};
 export const setConf = function(cnf) {
@@ -20,7 +21,8 @@ export const setConf = function(cnf) {
  * @param text
  * @param id
  */
-let w;
+let width;
+const height = 450;
 export const draw = (txt, id) => {
   try {
     const parser = pieParser.parser;
@@ -31,34 +33,31 @@ export const draw = (txt, id) => {
     parser.parse(txt);
     logger.debug('Parsed info diagram');
     const elem = document.getElementById(id);
-    w = elem.parentElement.offsetWidth;
+    width = elem.parentElement.offsetWidth;
 
-    if (typeof w === 'undefined') {
-      w = 1200;
+    if (typeof width === 'undefined') {
+      width = 1200;
     }
 
     if (typeof conf.useWidth !== 'undefined') {
-      w = conf.useWidth;
+      width = conf.useWidth;
     }
-    const h = 450;
-    elem.setAttribute('height', '100%');
+
+    const diagram = select('#' + id);
+    console.log('conf', conf);
+    configureSvgSize(diagram, height, width, conf.useMaxWidth);
+
     // Set viewBox
-    elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
+    elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
 
     // Fetch the default direction, use TD if none was found
-
-    var width = w; // 450
-    var height = 450;
     var margin = 40;
     var legendRectSize = 18;
     var legendSpacing = 4;
 
     var radius = Math.min(width, height) / 2 - margin;
 
-    var svg = select('#' + id)
-      .append('svg')
-      .attr('width', width)
-      .attr('height', height)
+    var svg = diagram
       .append('g')
       .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
 
@@ -67,9 +66,8 @@ export const draw = (txt, id) => {
     Object.keys(data).forEach(function(key) {
       sum += data[key];
     });
-    logger.info(data);
 
-    // set the color scale
+    // Set the color scale
     var color = scaleOrdinal()
       .domain(data)
       .range(schemeSet2);
@@ -80,12 +78,12 @@ export const draw = (txt, id) => {
     });
     var dataReady = pie(entries(data));
 
-    // shape helper to build arcs:
+    // Shape helper to build arcs:
     var arcGenerator = arc()
       .innerRadius(0)
       .outerRadius(radius);
 
-    // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
+    // Build the pie chart: each part of the pie is a path that we build using the arc function.
     svg
       .selectAll('mySlices')
       .data(dataReady)
@@ -99,7 +97,8 @@ export const draw = (txt, id) => {
       .style('stroke-width', '2px')
       .style('opacity', 0.7);
 
-    // Now add the Percentage. Use the centroid method to get the best coordinates
+    // Now add the percentage.
+    // Use the centroid method to get the best coordinates.
     svg
       .selectAll('mySlices')
       .data(dataReady)
@@ -119,10 +118,10 @@ export const draw = (txt, id) => {
       .append('text')
       .text(parser.yy.getTitle())
       .attr('x', 0)
-      .attr('y', -(h - 50) / 2)
+      .attr('y', -(height - 50) / 2)
       .attr('class', 'pieTitleText');
 
-    //Add the slegend/annotations for each section
+    // Add the legends/annotations for each section
     var legend = svg
       .selectAll('.legend')
       .data(color.domain())

src/diagrams/sequence/sequenceRenderer.js

@@ -5,7 +5,7 @@ import { parser } from './parser/sequenceDiagram';
 import common from '../common/common';
 import sequenceDb from './sequenceDb';
 import * as configApi from '../../config';
-import utils, { assignWithDepth } from '../../utils';
+import utils, { assignWithDepth, configureSvgSize } from '../../utils';
 
 parser.yy = sequenceDb;
 
@@ -706,15 +706,8 @@ export const draw = function(text, id) {
       .attr('y', -25);
   }
 
-  if (conf.useMaxWidth) {
-    diagram.attr('height', '100%');
-    diagram.attr('width', '100%');
-    diagram.attr('style', 'max-width:' + width + 'px;');
-    // diagram.attr('style', 'max-width:100%;');
-  } else {
-    diagram.attr('height', height);
-    diagram.attr('width', width);
-  }
+  configureSvgSize(diagram, height, width, conf.useMaxWidth);
+
   const extraVertForTitle = title ? 40 : 0;
   diagram.attr(
     'viewBox',

src/diagrams/state/stateRenderer-v2.js

@@ -6,6 +6,7 @@ import { getConfig } from '../../config';
 
 import { render } from '../../dagre-wrapper/index.js';
 import { logger } from '../../logger';
+import { configureSvgSize } from '../../utils';
 
 const conf = {};
 export const setConf = function(cnf) {
@@ -211,11 +212,7 @@ export const draw = function(text, id) {
   parser.yy = stateDb;
 
   // Parse the graph definition
-  // try {
   parser.parse(text);
-  // } catch (err) {
-  //   logger.error('Parsing failed', err);
-  // }
 
   // Fetch the default direction, use TD if none was found
   let dir = stateDb.getDirection();
@@ -256,54 +253,18 @@ export const draw = function(text, id) {
   render(element, g, ['barb'], 'statediagram', id);
 
   const padding = 8;
-  // const svgBounds = svg.node().getBBox();
-  // const width = svgBounds.width + padding * 2;
-  // const height = svgBounds.height + padding * 2;
-  // logger.debug(
-  //   `new ViewBox 0 0 ${width} ${height}`,
-  //   `translate(${padding + g._label.marginx}, ${padding + g._label.marginy})`
-  // );
-
-  // if (conf.useMaxWidth) {
-  //   svg.attr('width', '100%');
-  //   svg.attr('style', `max-width: ${width}px;`);
-  // } else {
-  //   svg.attr('height', height);
-  //   svg.attr('width', width);
-  // }
-
-  // svg.attr('viewBox', `0 0 ${width} ${height}`);
-  // svg
-  //   .select('g')
-  //   .attr('transform', `translate(${padding - g._label.marginx}, ${padding - svgBounds.y})`);
 
   const bounds = svg.node().getBBox();
 
   const width = bounds.width + padding * 2;
   const height = bounds.height + padding * 2;
 
-  // diagram.attr('height', '100%');
-  // diagram.attr('style', `width: ${bounds.width * 3 + conf.padding * 2};`);
-  // diagram.attr('height', height);
-
   // Zoom in a bit
-  svg.attr('width', width * 1.75);
   svg.attr('class', 'statediagram');
-  // diagram.attr('height', bounds.height * 3 + conf.padding * 2);
-  // svg.attr(
-  //   'viewBox',
-  //   `${bounds.x - conf.padding}  ${bounds.y - conf.padding} ` + width + ' ' + height
-  // );
 
   const svgBounds = svg.node().getBBox();
 
-  if (conf.useMaxWidth) {
-    svg.attr('width', '100%');
-    svg.attr('style', `max-width: ${width}px;`);
-  } else {
-    svg.attr('height', height);
-    svg.attr('width', width);
-  }
+  configureSvgSize(svg, height, width * 1.75, conf.useMaxWidth);
 
   // Ensure the viewBox includes the whole svgBounds area with extra space for padding
   const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;

src/diagrams/state/stateRenderer.js

@@ -8,6 +8,7 @@ import { parser } from './parser/stateDiagram';
 // import idCache from './id-cache';
 import { drawState, addTitleAndBox, drawEdge } from './shapes';
 import { getConfig } from '../../config';
+import { configureSvgSize } from '../../utils';
 
 parser.yy = stateDb;
 
@@ -75,14 +76,10 @@ export const draw = function(text, id) {
   const width = bounds.width + padding * 2;
   const height = bounds.height + padding * 2;
 
-  if (conf.useMaxWidth) {
-    diagram.attr('width', '100%');
-    diagram.attr('style', `max-width: ${width * 1.75}px;`);
-  } else {
-    // Zoom in a bit
-    diagram.attr('width', width * 1.75);
-  }
-  // diagram.attr('height', bounds.height * 3 + conf.padding * 2);
+  // zoom in a bit
+  const svgWidth = width * 1.75;
+  configureSvgSize(diagram, height, svgWidth, conf.useMaxWidth);
+
   diagram.attr(
     'viewBox',
     `${bounds.x - conf.padding}  ${bounds.y - conf.padding} ` + width + ' ' + height

src/diagrams/user-journey/journeyRenderer.js

@@ -2,6 +2,7 @@ import { select } from 'd3';
 import { parser } from './parser/journey';
 import journeyDb from './journeyDb';
 import svgDraw from './svgDraw';
+import { configureSvgSize } from '../../utils';
 
 parser.yy = journeyDb;
 
@@ -118,14 +119,8 @@ export const draw = function(text, id) {
   }
   const height = box.stopy - box.starty + 2 * conf.diagramMarginY;
   const width = LEFT_MARGIN + box.stopx + 2 * conf.diagramMarginX;
-  if (conf.useMaxWidth) {
-    diagram.attr('height', '100%');
-    diagram.attr('width', '100%');
-    diagram.attr('style', 'max-width:' + width + 'px;');
-  } else {
-    diagram.attr('height', height);
-    diagram.attr('width', width);
-  }
+
+  configureSvgSize(diagram, height, width, conf.useMaxWidth);
 
   // Draw activity line
   diagram