#2028 Updated layout algorithm

cypress/platform/knsv2.html

@@ -71,7 +71,8 @@
           end
           cat --> monkey
           cow --> dog
-          </pre>
+          </pre
+    >
     <pre id="diagram" class="mermaid">
 swimlane LR
     subgraph "`one`"
@@ -84,12 +85,27 @@ swimlane LR
       cow --> horse --> done3
       cow --> sheep --> done3
     end
+    subgraph "`four`"
+      panda -->
+      kangaroo --> done4
+    end
 cat --> monkey
     cow --> dog
+    kangaroo --> sheep
     </pre>
 
-
-    monkey dog --> cat monkey --> cow -->
+    <pre id="diagram" class="mermaid2">
+swimlane LR
+    subgraph "`three`"
+      bat --> cow
+      cow --> sheep
+    end
+    subgraph "`four`"
+      panda -->
+      kangaroo --> done4
+    end
+    kangaroo --> sheep
+    </pre>
     <!-- <div id="cy"></div> -->
     <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
     <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->

packages/mermaid/src/diagrams/flowchart/swimlane/swimlane-layout.js

@@ -28,6 +28,11 @@ export function assignRanks(graph, subgraphLookupTable) {
   let cnt = 0;
   let changesDetected = true;
 
+  /**
+   *
+   * @param nodeId
+   * @param currentRank
+   */
   function dfs(nodeId, currentRank) {
     if (visited.has(nodeId)) {
       return;
@@ -36,7 +41,7 @@ export function assignRanks(graph, subgraphLookupTable) {
     visited.add(nodeId);
     const existingRank = ranks.get(nodeId) || 0;
 
-    console.log('APA444 DFS Base case for', nodeId, 'to', Math.max(existingRank, currentRank));
+    // console.log('APA444 DFS Base case for', nodeId, 'to', Math.max(existingRank, currentRank));
     if (lock.get(nodeId) !== 1) {
       ranks.set(nodeId, Math.max(existingRank, currentRank));
     } else {
@@ -61,10 +66,17 @@ export function assignRanks(graph, subgraphLookupTable) {
     });
   }
 
+  /**
+   *
+   */
   function adjustSuccessors() {
+    console.log('APA444 Adjusting successors');
     graph.nodes().forEach((nodeId) => {
-      if (graph.predecessors(nodeId).length === 0) {
+      console.log('APA444 Going through nodes', nodeId);
+      // if (graph.predecessors(nodeId).length === 0) {
+      console.log('APA444 has no predecessors', nodeId);
       graph.successors(nodeId).forEach((successorNodeId) => {
+        console.log('APA444 has checking successor', successorNodeId);
         if (subgraphLookupTable[successorNodeId] !== subgraphLookupTable[nodeId]) {
           const newRank = ranks.get(successorNodeId);
           ranks.set(nodeId, newRank);
@@ -75,9 +87,7 @@ export function assignRanks(graph, subgraphLookupTable) {
 
           // Adjust ranks of successors in the same subgraph
           graph.successors(nodeId).forEach((sameSubGraphSuccessorNodeId) => {
-              if (
-                subgraphLookupTable[sameSubGraphSuccessorNodeId] === subgraphLookupTable[nodeId]
-              ) {
+            if (subgraphLookupTable[sameSubGraphSuccessorNodeId] === subgraphLookupTable[nodeId]) {
               console.log(
                 'APA444 Adjusting rank of',
                 sameSubGraphSuccessorNodeId,
@@ -91,12 +101,17 @@ export function assignRanks(graph, subgraphLookupTable) {
               // setRankFromTopNodes();
             }
           });
+        } else {
+          console.log('APA444 Node', nodeId, ' and ', successorNodeId, ' is in the same lane');
         }
       });
-      }
+      // }
     });
   }
 
+  /**
+   *
+   */
   function setRankFromTopNodes() {
     visited = new Set();
     graph.nodes().forEach((nodeId) => {
@@ -120,6 +135,7 @@ export function assignRanks(graph, subgraphLookupTable) {
  *
  * @param graph
  * @param subgraphLÖookupTable
+ * @param ranks
  * @param subgraphLookupTable
  */
 export function assignAffinities(graph, ranks, subgraphLookupTable) {
@@ -132,14 +148,14 @@ export function assignAffinities(graph, ranks, subgraphLookupTable) {
     const rank = ranks.get(nodeId);
     const key = swimlane + ':' + rank;
     let currentAffinity = swimlaneRankAffinities.get(key);
-    if(typeof currentAffinity === 'undefined'){
+    if (currentAffinity === undefined) {
       currentAffinity = -1;
     }
     const newAffinity = currentAffinity + 1;
     swimlaneRankAffinities.set(key, newAffinity);
     affinities.set(nodeId, newAffinity);
     let currentMaxAffinity = swimlaneMaxAffinity.get(swimlane);
-    if(typeof currentMaxAffinity === 'undefined'){
+    if (currentMaxAffinity === undefined) {
       swimlaneMaxAffinity.set(swimlane, 0);
       currentMaxAffinity = 0;
     }
@@ -170,8 +186,7 @@ export function swimlaneLayout(graph, diagObj) {
   const lanes = [];
   const laneDb = {};
   let xPos = 0;
-  for (let i = 0; i < subGraphs.length; i++) {
-    const subG = subGraphs[i];
+  for (const subG of subGraphs) {
     const maxAffinity = swimlaneMaxAffinity.get(subG.id);
     const lane = {
       title: subG.title,
@@ -187,6 +202,7 @@ export function swimlaneLayout(graph, diagObj) {
   // Basic layout, calculate the node positions based on rank
   graph.nodes().forEach((nodeId) => {
     const rank = ranks.get(nodeId);
+
     if (!rankWidth[rank]) {
       const laneId = subgraphLookupTable[nodeId];
       const lane = laneDb[laneId];
@@ -195,7 +211,7 @@ export function swimlaneLayout(graph, diagObj) {
       const affinity = affinities.get(nodeId);
 
       console.log('APA444', nodeId, 'rank', rank, 'affinity', affinity);
-      graph.setNode(nodeId, { y: rank * 200 + 50, x: lane.x + 150*affinity + lane.width / 2 });
+      graph.setNode(nodeId, { y: rank * 200 + 50, x: lane.x + 150 * affinity + 100 });
       // lane.width = Math.max(lane.width, lane.x + 150*affinity + lane.width / 4);
     }
   });