Merge remote-tracking branch 'upstream/develop' into feature/user-journey

src/diagrams/flowchart/flowRenderer-v2.js

@@ -1,6 +1,5 @@
 import graphlib from 'graphlib';
 import * as d3 from 'd3';
-import dagre from 'dagre';
 
 import flowDb from './flowDb';
 import flow from './parser/flow';
@@ -133,10 +132,8 @@ export const addVertices = function(vert, g, svgId) {
     }
     // Add the node
     g.setNode(vertex.id, {
-      labelType: 'svg',
       labelStyle: styles.labelStyle,
       shape: _shape,
-      label: vertexNode,
       labelText: vertexText,
       rx: radious,
       ry: radious,
@@ -149,10 +146,8 @@ export const addVertices = function(vert, g, svgId) {
     });
 
     logger.info('setNode', {
-      labelType: 'svg',
       labelStyle: styles.labelStyle,
       shape: _shape,
-      label: vertexNode,
       labelText: vertexText,
       rx: radious,
       ry: radious,
@@ -193,6 +188,8 @@ export const addEdges = function(edges, g) {
     } else {
       edgeData.arrowhead = 'normal';
     }
+
+    logger.info(edgeData, edge);
     edgeData.arrowType = edge.type;
 
     let style = '';
@@ -321,8 +318,10 @@ export const draw = function(text, id) {
 
   let subG;
   const subGraphs = flowDb.getSubGraphs();
+  logger.info('Subgraphs - ', subGraphs);
   for (let i = subGraphs.length - 1; i >= 0; i--) {
     subG = subGraphs[i];
+    logger.info('Subgraph - ', subG);
     flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);
   }
 
@@ -354,7 +353,7 @@ export const draw = function(text, id) {
   // Run the renderer. This is what draws the final graph.
   const element = d3.select('#' + id + ' g');
   render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
-  dagre.layout(g);
+  // dagre.layout(g);
 
   element.selectAll('g.node').attr('title', function() {
     return flowDb.getTooltip(this.id);
@@ -385,27 +384,27 @@ export const draw = function(text, id) {
   // Index nodes
   flowDb.indexNodes('subGraph' + i);
 
-  // reposition labels
-  for (i = 0; i < subGraphs.length; i++) {
-    subG = subGraphs[i];
+  // // reposition labels
+  // for (i = 0; i < subGraphs.length; i++) {
+  //   subG = subGraphs[i];
 
-    if (subG.title !== 'undefined') {
-      const clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
-      const clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]');
+  //   if (subG.title !== 'undefined') {
+  //     const clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
+  //     const clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]');
 
-      const xPos = clusterRects[0].x.baseVal.value;
-      const yPos = clusterRects[0].y.baseVal.value;
-      const width = clusterRects[0].width.baseVal.value;
-      const cluster = d3.select(clusterEl[0]);
-      const te = cluster.select('.label');
-      te.attr('transform', `translate(${xPos + width / 2}, ${yPos + 14})`);
-      te.attr('id', id + 'Text');
+  //     const xPos = clusterRects[0].x.baseVal.value;
+  //     const yPos = clusterRects[0].y.baseVal.value;
+  //     const width = clusterRects[0].width.baseVal.value;
+  //     const cluster = d3.select(clusterEl[0]);
+  //     const te = cluster.select('.label');
+  //     te.attr('transform', `translate(${xPos + width / 2}, ${yPos + 14})`);
+  //     te.attr('id', id + 'Text');
 
-      for (let j = 0; j < subG.classes.length; j++) {
-        clusterEl[0].classList.add(subG.classes[j]);
-      }
-    }
-  }
+  //     for (let j = 0; j < subG.classes.length; j++) {
+  //       clusterEl[0].classList.add(subG.classes[j]);
+  //     }
+  //   }
+  // }
 
   // Add label rects for non html labels
   if (!conf.htmlLabels) {

src/diagrams/state/stateDb.js

@@ -1,4 +1,7 @@
 import { logger } from '../../logger';
+import { generateId } from '../../utils';
+
+const clone = o => JSON.parse(JSON.stringify(o));
 
 let rootDoc = [];
 const setRootDoc = o => {
@@ -22,6 +25,34 @@ const docTranslator = (parent, node, first) => {
     }
 
     if (node.doc) {
+      const doc = [];
+      // Check for concurrency
+      let i = 0;
+      let currentDoc = [];
+      for (i = 0; i < node.doc.length; i++) {
+        if (node.doc[i].type === 'divider') {
+          // debugger;
+          const newNode = clone(node.doc[i]);
+          newNode.doc = clone(currentDoc);
+          doc.push(newNode);
+          currentDoc = [];
+        } else {
+          currentDoc.push(node.doc[i]);
+        }
+      }
+
+      // If any divider was encountered
+      if (doc.length > 0 && currentDoc.length > 0) {
+        const newNode = {
+          stmt: 'state',
+          id: generateId(),
+          type: 'divider',
+          doc: clone(currentDoc)
+        };
+        doc.push(clone(newNode));
+        node.doc = doc;
+      }
+
       node.doc.forEach(docNode => docTranslator(node, docNode, true));
     }
   }
@@ -31,8 +62,14 @@ const getRootDocV2 = () => {
   return { id: 'root', doc: rootDoc };
 };
 
-const extract = doc => {
+const extract = _doc => {
   // const res = { states: [], relations: [] };
+  let doc;
+  if (_doc.doc) {
+    doc = _doc.doc;
+  } else {
+    doc = _doc;
+  }
   // let doc = root.doc;
   // if (!doc) {
   //   doc = root;
@@ -40,6 +77,8 @@ const extract = doc => {
   logger.info(doc);
   clear();
 
+  logger.info('Extract', doc);
+
   doc.forEach(item => {
     if (item.stmt === 'state') {
       addState(item.id, item.type, item.doc, item.description, item.note);

src/diagrams/state/stateRenderer-v2.js

@@ -72,10 +72,8 @@ const setupNode = (g, parent, node, altFlag) => {
     }
 
     const nodeData = {
-      labelType: 'svg',
       labelStyle: '',
       shape: nodeDb[node.id].shape,
-      label: node.id,
       labelText: nodeDb[node.id].description,
       classes: nodeDb[node.id].classes, //classStr,
       style: '', //styles.style,
@@ -87,10 +85,8 @@ const setupNode = (g, parent, node, altFlag) => {
     if (node.note) {
       // Todo: set random id
       const noteData = {
-        labelType: 'svg',
         labelStyle: '',
         shape: 'note',
-        label: node.id,
         labelText: node.note.text,
         classes: 'statediagram-note', //classStr,
         style: '', //styles.style,
@@ -99,10 +95,8 @@ const setupNode = (g, parent, node, altFlag) => {
         padding: 15 //getConfig().flowchart.padding
       };
       const groupData = {
-        labelType: 'svg',
         labelStyle: '',
         shape: 'noteGroup',
-        label: node.id + '----parent',
         labelText: node.note.text,
         classes: nodeDb[node.id].classes, //classStr,
         style: '', //styles.style,
@@ -133,8 +127,7 @@ const setupNode = (g, parent, node, altFlag) => {
         classes: 'note-edge',
         arrowheadStyle: 'fill: #333',
         labelpos: 'c',
-        labelType: 'text',
-        label: ''
+        labelType: 'text'
       });
     } else {
       g.setNode(node.id, nodeData);
@@ -143,12 +136,12 @@ const setupNode = (g, parent, node, altFlag) => {
 
   if (parent) {
     if (parent.id !== 'root') {
-      logger.trace('Setting node ', node.id, ' to be child of its parent ', parent.id);
+      logger.info('Setting node ', node.id, ' to be child of its parent ', parent.id);
       g.setParent(node.id, parent.id);
     }
   }
   if (node.doc) {
-    logger.trace('Adding nodes children ');
+    logger.info('Adding nodes children ');
     setupDoc(g, node, node.doc, !altFlag);
   }
 };
@@ -168,8 +161,7 @@ const setupDoc = (g, parent, doc, altFlag) => {
         labelStyle: '',
         arrowheadStyle: 'fill: #333',
         labelpos: 'c',
-        labelType: 'text',
-        label: ''
+        labelType: 'text'
       };
       let startId = item.state1.id;
       let endId = item.state2.id;
@@ -214,7 +206,7 @@ export const draw = function(text, id) {
     compound: true
   })
     .setGraph({
-      rankdir: 'LR',
+      rankdir: 'TB',
       nodesep: nodeSpacing,
       ranksep: rankSpacing,
       marginx: 8,
@@ -224,8 +216,8 @@ export const draw = function(text, id) {
       return {};
     });
 
-  // logger.info(stateDb.getRootDoc());
-  stateDb.extract(stateDb.getRootDocV2().doc);
+  logger.info(stateDb.getRootDocV2());
+  stateDb.extract(stateDb.getRootDocV2());
   logger.info(stateDb.getRootDocV2());
   setupNode(g, undefined, stateDb.getRootDocV2(), true);