#1295 Fix for intersection calculation for edges to clusters and adding concurrency in stateDiagrams as clusters

src/diagrams/flowchart/flowRenderer-v2.js

@@ -130,10 +130,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,
@@ -146,10 +144,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,

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);