Adjustments

cypress/platform/knsv.html

@@ -55,7 +55,7 @@ flowchart TD
   class T TestSub
   linkStyle 0,1 color:orange, stroke: orange;
 </div>
-      <div class="mermaid2" style="width: 100%; height: 20%;">
+      <div class="mermaid" style="width: 100%; height: 20%;">
 stateDiagram-v2
     [*] --> Off
     Off --> On
@@ -103,27 +103,62 @@ stateDiagram-v2
 
       </div>
 <div class="mermaid2" style="width: 100%; height: 20%;">
-state
+stateDiagram-v2
 state "Not Shooting State" as NotShooting {
-  state "Idle mode" as Idle
   state "Configuring mode" as Configuring
   [*] --> Idle
+  Idle : this is a string
+  Idle : this is another string
   Idle --> Configuring : EvConfig
   Configuring --> Idle : EvConfig
 }
 
 </div>
-      <div class="mermaid" style="width: 100%; height: 20%;">
+      <div class="mermaid2" style="width: 100%; height: 20%;">
-stateDiagram
+stateDiagram-v2
-state S1 {
+    [*] --> Off
-sub1 -->sub2
+    Off --> On
-}
+    On --> Select
-state S2 {
+    Select --> Washing
-    sub4
+    Washing --> Finished
-}
+    Finished --> [*]
-S1 --> S2
+    state Select
-sub1 --> sub4
+    {
+      state "Program 1" as Prg1
+      [*] --> Prg1
+      Prg1 --> [*]
+      [*] --> Prg2
+      Prg2 --> [*]
+      [*] --> Prg3
+      Prg3 --> [*]
+    }
 
+    state Washing {
+      state Using_Prg1 {
+        [*] --> P1Step1
+        P1Step1 --> P1Step2
+        P1Step2 --> P1Step3
+        P1Step3 --> [*]
+      }
+      state Using_Prg2 {
+        [*] --> P2Step1
+        P2Step1 --> P2Step2
+        P2Step2 --> P2Step3
+        P2Step3 --> [*]
+      }
+
+      state Using_Prg3 {
+        [*] --> Step1
+        Step1 --> Step2
+        Step2 --> [*]
+      }
+      [*] --> Using_Prg1
+      [*] --> Using_Prg2
+      [*] --> Using_Prg3
+      Using_Prg1 --> [*]
+      Using_Prg2 --> [*]
+      Using_Prg3 --> [*]
+    }
       </div>
 <div class="mermaid2" style="width: 100%; height: 20%;">
   requirementDiagram

src/dagre-wrapper/createLabel.js

@@ -85,6 +85,7 @@ function addHtmlLabel(node) {
 
 const createLabel = (_vertexText, style, isTitle, isNode) => {
   let vertexText = _vertexText || '';
+  if (typeof vertexText === 'object') vertexText = vertexText[0];
   if (getConfig().flowchart.htmlLabels) {
     // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
     vertexText = vertexText.replace(/\\n|\n/g, '<br />');

src/dagre-wrapper/index.js

@@ -17,7 +17,7 @@ import { log } from '../logger';
 const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
   log.info('Graph in recursive render: XXX', graphlib.json.write(graph), parentCluster);
   const dir = graph.graph().rankdir;
-  log.warn('Dir in recursive render - dir:', dir);
+  log.trace('Dir in recursive render - dir:', dir);
 
   const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line
   if (!graph.nodes()) {
@@ -26,7 +26,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
     log.info('Recursive render XXX', graph.nodes());
   }
   if (graph.edges().length > 0) {
-    log.info('Recursive edges', graph.edge(graph.edges()[0]));
+    log.trace('Recursive edges', graph.edge(graph.edges()[0]));
   }
   const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line
   const edgePaths = elem.insert('g').attr('class', 'edgePaths');
@@ -43,7 +43,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
       log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster);
       graph.setNode(parentCluster.id, data);
       if (!graph.parent(v)) {
-        log.warn('Setting parent', v, parentCluster.id);
+        log.trace('Setting parent', v, parentCluster.id);
         graph.setParent(v, parentCluster.id, data);
       }
     }

src/dagre-wrapper/mermaid-graphlib.js

@@ -17,7 +17,7 @@ export const clear = () => {
 const isDecendant = (id, ancenstorId) => {
   // if (id === ancenstorId) return true;
 
-  log.debug(
+  log.trace(
     'In isDecendant',
     ancenstorId,
     ' ',
@@ -354,17 +354,25 @@ export const extractor = (graph, depth) => {
       log.warn(
         'Cluster without external connections, without a parent and with children',
         node,
-        depth
+        depth,
+        clusterDb[node].clusterData.dir
       );
 
       const graphSettings = graph.graph();
+      let dir = graphSettings.rankdir === 'TB' ? 'LR' : 'TB';
+      if (clusterDb[node]) {
+        if (clusterDb[node].clusterData && clusterDb[node].clusterData.dir) {
+          dir = clusterDb[node].clusterData.dir;
+          log.warn('Fixing dir', clusterDb[node].clusterData.dir, dir);
+        }
+      }
 
       const clusterGraph = new graphlib.Graph({
         multigraph: true,
         compound: true
       })
         .setGraph({
-          rankdir: graphSettings.rankdir === 'TB' ? 'LR' : 'TB', // Todo: set proper spacing
+          rankdir: dir, // Todo: set proper spacing
           nodesep: 50,
           ranksep: 50,
           marginx: 8,

src/dagre-wrapper/nodes.js

@@ -319,12 +319,18 @@ const rectWithTitle = (parent, node) => {
 
   const label = shapeSvg.insert('g').attr('class', 'label');
 
-  const text2prim = node.labelText.flat ? node.labelText.flat() : node.labelText;
+  const text2 = node.labelText.flat ? node.labelText.flat() : node.labelText;
-  const text2 = typeof text2prim === 'object' ? text2prim[0] : text2prim;
+  // const text2 = typeof text2prim === 'object' ? text2prim[0] : text2prim;
 
-  log.info('Label text', text2);
+  let title = '';
+  if (typeof text2 === 'object') {
+    title = text2[0];
+  } else {
+    title = text2;
+  }
+  log.info('Label text abc79', title, text2, typeof text2 === 'object');
 
-  const text = label.node().appendChild(createLabel(text2, node.labelStyle, true, true));
+  const text = label.node().appendChild(createLabel(title, node.labelStyle, true, true));
   let bbox;
   if (getConfig().flowchart.htmlLabels) {
     const div = text.children[0];

src/diagrams/state/stateRenderer-v2.js

@@ -96,13 +96,14 @@ const setupNode = (g, parent, node, altFlag) => {
     const nodeData = {
       labelStyle: '',
       shape: nodeDb[node.id].shape,
-      labelText:
+      labelText: nodeDb[node.id].description,
-        typeof nodeDb[node.id].description === 'object'
+      // typeof nodeDb[node.id].description === 'object'
-          ? nodeDb[node.id].description[0]
+      //   ? nodeDb[node.id].description[0]
-          : nodeDb[node.id].description,
+      //   : nodeDb[node.id].description,
       classes: nodeDb[node.id].classes, //classStr,
       style: '', //styles.style,
       id: node.id,
+      dir: altFlag ? 'LR' : 'TB',
       domId: 'state-' + node.id + '-' + cnt,
       type: nodeDb[node.id].type,
       padding: 15 //getConfig().flowchart.padding
@@ -167,12 +168,12 @@ const setupNode = (g, parent, node, altFlag) => {
 
   if (parent) {
     if (parent.id !== 'root') {
-      log.info('Setting node ', node.id, ' to be child of its parent ', parent.id);
+      log.trace('Setting node ', node.id, ' to be child of its parent ', parent.id);
       g.setParent(node.id, parent.id);
     }
   }
   if (node.doc) {
-    log.info('Adding nodes children ');
+    log.trace('Adding nodes children ');
     setupDoc(g, node, node.doc, !altFlag);
   }
 };