#5237 Fix for direction handling using ELK

cypress/platform/knsv2.html

@@ -32,7 +32,7 @@
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        background: #333;
+        /* background: #333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
       }
@@ -89,37 +89,38 @@ stateDiagram
   end note
       </pre
     >
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
 stateDiagram-v2
     [*] --> Active
 
     state Active {
+      direction BT
         [*] --> NumLockOff
         NumLockOff --> NumLockOn : EvNumLockPressed
-        NumLockOn --> NumLockOff : EvNumLockPressed
-        --
-        [*] --> CapsLockOff
-        CapsLockOff --> CapsLockOn : EvCapsLockPressed
-        CapsLockOn --> CapsLockOff : EvCapsLockPressed
-        --
-        [*] --> ScrollLockOff
-        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
-        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
     }
       </pre
     >
-    <pre id="diagram" class="mermaid">
-   stateDiagram-v2
-     TN1: The state with a note
-        note right of TN1
-            Important information! You can write
-            notes.
-        end note
-        TN1 --> TN2
-        note left of TN2 : This is the note to the left.
+    <pre id="diagram" class="mermaid2">
+stateDiagram
+   direction TB
+
+   accTitle: This is the accessible title
+   accDescr: This is an accessible description
+
+   classDef notMoving fill:white,color:#000
+   classDef movement font-style:italic;
+   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+   [*] --> Still:::notMoving
+   Still --> [*]
+   Still --> Moving:::movement
+   Moving --> Still
+   Moving --> Crash:::movement
+   Crash:::badBadEvent --> [*]
+
   </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
       %%{init: {"look": "classic"} }%%
    stateDiagram-v2
      TN3: The state with a note
@@ -522,7 +523,7 @@ mindmap
       //   useMaxWidth: false,
       // });
       mermaid.initialize({
-        theme: 'dark',
+        // theme: 'dark',
         handdrawnSeed: 12,
         look: 'handdrawn',
         // layout: 'dagre',

packages/mermaid-layout-elk/src/index.ts

@@ -299,11 +299,11 @@ export const addEdges = function (dataForLayout, graph, svg) {
       linkIdCnt[linkIdBase]++;
       log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
     }
-    const linkId = linkIdBase + '-' + linkIdCnt[linkIdBase];
+    const linkId = linkIdBase + '_' + linkIdCnt[linkIdBase];
     edge.id = linkId;
     log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]);
-    const linkNameStart = 'LS-' + edge.start;
-    const linkNameEnd = 'LE-' + edge.end;
+    const linkNameStart = 'LS_' + edge.start;
+    const linkNameEnd = 'LE_' + edge.end;
 
     const edgeData = { style: '', labelStyle: '' };
     edgeData.minlen = edge.length || 1;
@@ -436,6 +436,21 @@ export const addEdges = function (dataForLayout, graph, svg) {
   return graph;
 };
 
+function dir2ElkDirection(dir) {
+  switch (dir) {
+    case 'LR':
+      return 'RIGHT';
+    case 'RL':
+      return 'LEFT';
+    case 'TB':
+      return 'DOWN';
+    case 'BT':
+      return 'UP';
+    default:
+      return 'DOWN';
+  }
+}
+
 export const render = async (data4Layout, svg, element) => {
   const elk = new ELK();
 
@@ -446,7 +461,7 @@ export const render = async (data4Layout, svg, element) => {
   let elkGraph = {
     id: 'root',
     layoutOptions: {
-      'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
+      // 'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
       'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]',
       'elk.layered.spacing.edgeNodeBetweenLayers': '30',
     },
@@ -458,23 +473,7 @@ export const render = async (data4Layout, svg, element) => {
 
   // Set the direction of the graph based on the parsed information
   const dir = data4Layout.direction || 'DOWN';
-  switch (dir) {
-    case 'BT':
-      elkGraph.layoutOptions['elk.direction'] = 'UP';
-      break;
-    case 'TB':
-      elkGraph.layoutOptions['elk.direction'] = 'DOWN';
-      break;
-    case 'LR':
-      elkGraph.layoutOptions['elk.direction'] = 'RIGHT';
-      break;
-    case 'RL':
-      elkGraph.layoutOptions['elk.direction'] = 'LEFT';
-      break;
-    default:
-      elkGraph.layoutOptions['elk.direction'] = 'DOWN';
-      break;
-  }
+  elkGraph.layoutOptions['elk.direction'] = dir2ElkDirection(dir);
 
   // Create the lookup db for the subgraphs and their children to used when creating
   // the tree structured graph
@@ -513,7 +512,12 @@ export const render = async (data4Layout, svg, element) => {
           height: node?.labelData?.height || 100,
         },
       ];
-      node['elk.direction'] = 'RIGHT';
+      // console.log('DAGA node dir: ', node.dir);
+      if (node.dir) {
+        node.layoutOptions = {
+          'elk.direction': dir2ElkDirection(node.dir),
+        };
+      }
       delete node.x;
       delete node.y;
       delete node.width;