#2028 returning node coordinates from layout

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

@@ -67,8 +67,33 @@ export function assignRanks(graph, subgraphLookupTable) {
 /**
  *
  * @param graph
+ * @param diagObj
  */
-export function swimlaneLayout(graph) {
+export function swimlaneLayout(graph, diagObj) {
-  const ranks = assignRanks(graph);
+  const subgraphLookupTable = getSubgraphLookupTable(diagObj);
-  return graph;
+  const ranks = assignRanks(graph, subgraphLookupTable);
+
+  const subGraphs = diagObj.db.getSubGraphs();
+  const lanes = [];
+  const laneDb = {};
+  for (let i = subGraphs.length - 1; i >= 0; i--) {
+    const subG = subGraphs[i];
+    const lane = {
+      title: subG.title,
+      x: i * 200,
+      width: 200,
+    };
+    lanes.push(lane);
+    laneDb[subG.id] = lane;
+  }
+
+  // Basic layout
+  graph.nodes().forEach((nodeId) => {
+    const rank = ranks.get(nodeId);
+    const laneId = subgraphLookupTable[nodeId];
+    const lane = laneDb[laneId];
+    graph.setNode(nodeId, { y: rank * 200 + 50, x: lane.x + lane.width / 2 });
+  });
+
+  return { graph, lanes };
 }

packages/mermaid/src/diagrams/flowchart/swimlane/swimlane-layout.spec.ts

@@ -10,7 +10,7 @@ import jsdom from 'jsdom';
 const { JSDOM } = jsdom;
 
 addDiagrams();
-describe('When doing a layout specific for swim lanes ', () => {
+describe('When doing a assigning ranks specific for swim lanes ', () => {
   let root;
   let doc;
   beforeEach(function () {
@@ -22,22 +22,22 @@ describe('When doing a layout specific for swim lanes ', () => {
 
     doc = dom.window.document;
   });
+  describe('Layout: ', () => {
+    // it('should rank the nodes:', async () => {
+    //   const diagram = await getDiagramFromText(`swimlane LR
+    // subgraph "\`one\`"
+    //   start --> cat --> rat
+    //   end`);
+    //   const g = setupGraph(diagram, 'swimmer', root, doc);
+    //   const subgraphLookupTable = getSubgraphLookupTable(diagram);
+    //   const ranks = assignRanks(g, subgraphLookupTable);
+    //   expect(ranks.get('start')).toEqual(0);
+    //   expect(ranks.get('cat')).toEqual(1);
+    //   expect(ranks.get('rat')).toEqual(2);
+    // });
 
-  it('should rank the nodes:', async () => {
+    it('should rank the nodes:', async () => {
-    const diagram = await getDiagramFromText(`swimlane LR
+      const diagram = await getDiagramFromText(`swimlane LR
-    subgraph "\`one\`"
-      start --> cat --> rat
-      end`);
-    const g = setupGraph(diagram, 'swimmer', root, doc);
-    const subgraphLookupTable = getSubgraphLookupTable(diagram);
-    const ranks = assignRanks(g, subgraphLookupTable);
-    expect(ranks.get('start')).toEqual(0);
-    expect(ranks.get('cat')).toEqual(1);
-    expect(ranks.get('rat')).toEqual(2);
-  });
-
-  it('should rank the nodes:', async () => {
-    const diagram = await getDiagramFromText(`swimlane LR
     subgraph "\`one\`"
       start --> cat --> rat
       end
@@ -45,14 +45,45 @@ describe('When doing a layout specific for swim lanes ', () => {
       monkey --> dog --> done
       end
     cat --> monkey`);
-    const g = setupGraph(diagram, 'swimmer', root, doc);
+      const g = setupGraph(diagram, 'swimmer', root, doc);
-    const subgraphLookupTable = getSubgraphLookupTable(diagram);
+      const subgraphLookupTable = getSubgraphLookupTable(diagram);
-    const ranks = assignRanks(g, subgraphLookupTable);
+      const ranks = assignRanks(g, subgraphLookupTable);
-    expect(ranks.get('start')).toEqual(0);
+      expect(ranks.get('start')).toEqual(0);
-    expect(ranks.get('cat')).toEqual(1);
+      expect(ranks.get('cat')).toEqual(1);
-    expect(ranks.get('rat')).toEqual(2);
+      expect(ranks.get('rat')).toEqual(2);
-    expect(ranks.get('monkey')).toEqual(1);
+      expect(ranks.get('monkey')).toEqual(1);
-    expect(ranks.get('dog')).toEqual(2);
+      expect(ranks.get('dog')).toEqual(2);
-    expect(ranks.get('done')).toEqual(3);
+      expect(ranks.get('done')).toEqual(3);
+    });
+  });
+  describe('Layout: ', () => {
+    it('should rank the nodes:', async () => {
+      const diagram = await getDiagramFromText(`swimlane LR
+    subgraph "\`one\`"
+      start --> cat --> rat
+      end`);
+      const g = setupGraph(diagram, 'swimmer', root, doc);
+      const subgraphLookupTable = getSubgraphLookupTable(diagram);
+      const { graph, lanes } = swimlaneLayout(g, diagram);
+      expect(lanes.length).toBe(1);
+    });
+
+    it('should rank the nodes:', async () => {
+      const diagram = await getDiagramFromText(`swimlane LR
+    subgraph "\`one\`"
+      start --> cat --> rat
+      end
+    subgraph "\`two\`"
+      monkey --> dog --> done
+      end
+    cat --> monkey`);
+      const g = setupGraph(diagram, 'swimmer', root, doc);
+      const subgraphLookupTable = getSubgraphLookupTable(diagram);
+      const { graph, lanes } = swimlaneLayout(g, diagram);
+      expect(lanes.length).toBe(2);
+      // Check the coordinates of the start node
+      console.log('Nodes:', graph.nodes());
+      console.log('Start:', graph.node('start'));
+    });
   });
 });