marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-07 08:09:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Knut Sveidqvist
2023-05-15 08:51:07 +02:00
parent 2c9da722d6
commit 606385cbf0
5 changed files with 3775 additions and 2585 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
cypress/platform/knsv2.html
View File

@@ -57,9 +57,8 @@
</style> </style>
</head> </head>
<body> <body>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
swimlane swimlane LR
subgraph "`one`" subgraph "`one`"
start -- l1 --> cat --> rat start -- l1 --> cat --> rat
end end
@@ -71,6 +70,8 @@ swimlane
end end
</pre> </pre>
<!-- cat -->
monkey dog --> cat monkey --> cow -->
<!-- <div id="cy"></div> --> <!-- <div id="cy"></div> -->
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> --> <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
<!-- <script src="./mermaid-example-diagram-detector.js"></script> --> <!-- <script src="./mermaid-example-diagram-detector.js"></script> -->

3
package.json
View File

@@ -114,5 +114,8 @@
}, },
"volta": { "volta": {
"node": "18.16.0" "node": "18.16.0"
},
"dependencies": {
"d3-dag": "^0.11.5"
} }
} }

4
packages/mermaid/src/diagrams/flowchart/swimlane/swimlane-layout.js
View File

@@ -87,11 +87,15 @@ export function swimlaneLayout(graph, diagObj) {
laneDb[subG.id] = lane; laneDb[subG.id] = lane;
} }
const rankWidth = [];
// Basic layout // Basic layout
graph.nodes().forEach((nodeId) => { graph.nodes().forEach((nodeId) => {
const rank = ranks.get(nodeId); const rank = ranks.get(nodeId);
if (!rankWidth[rank]) {
const laneId = subgraphLookupTable[nodeId]; const laneId = subgraphLookupTable[nodeId];
const lane = laneDb[laneId]; const lane = laneDb[laneId];
const n = graph.node(nodeId);
console.log('Node', nodeId, n);
graph.setNode(nodeId, { y: rank * 200 + 50, x: lane.x + lane.width / 2 }); graph.setNode(nodeId, { y: rank * 200 + 50, x: lane.x + lane.width / 2 });
}); });

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

@@ -66,6 +66,13 @@ describe('When doing a assigning ranks specific for swim lanes ', () => {
const subgraphLookupTable = getSubgraphLookupTable(diagram); const subgraphLookupTable = getSubgraphLookupTable(diagram);
const { graph, lanes } = swimlaneLayout(g, diagram); const { graph, lanes } = swimlaneLayout(g, diagram);
expect(lanes.length).toBe(1); expect(lanes.length).toBe(1);
const start = graph.node('start');
const cat = graph.node('cat');
const rat = graph.node('rat');
expect(start.y).toBe(50);
expect(cat.y).toBe(250);
expect(rat.y).toBe(450);
expect(rat.x).toBe(100);
}); });
it('should rank the nodes:', async () => { it('should rank the nodes:', async () => {
@@ -81,9 +88,43 @@ describe('When doing a assigning ranks specific for swim lanes ', () => {
const subgraphLookupTable = getSubgraphLookupTable(diagram); const subgraphLookupTable = getSubgraphLookupTable(diagram);
const { graph, lanes } = swimlaneLayout(g, diagram); const { graph, lanes } = swimlaneLayout(g, diagram);
expect(lanes.length).toBe(2); expect(lanes.length).toBe(2);
// Check the coordinates of the start node const start = graph.node('start');
console.log('Nodes:', graph.nodes()); const cat = graph.node('cat');
console.log('Start:', graph.node('start')); const rat = graph.node('rat');
const monkey = graph.node('monkey');
const dog = graph.node('dog');
const done = graph.node('done');
expect(start.y).toBe(50);
expect(cat.y).toBe(250);
expect(rat.y).toBe(450);
expect(rat.x).toBe(100);
expect(monkey.y).toBe(250);
expect(dog.y).toBe(450);
expect(done.y).toBe(650);
expect(monkey.x).toBe(300);
});
it.only('should rank the nodes:', async () => {
const diagram = await getDiagramFromText(`swimlane LR
subgraph "\`one\`"
start --> cat --> rat & hat
end
`);
const g = setupGraph(diagram, 'swimmer', root, doc);
const subgraphLookupTable = getSubgraphLookupTable(diagram);
const { graph, lanes } = swimlaneLayout(g, diagram);
expect(lanes.length).toBe(1);
const start = graph.node('start');
const cat = graph.node('cat');
const rat = graph.node('rat');
const hat = graph.node('rat');
expect(start.y).toBe(50);
expect(cat.y).toBe(250);
expect(rat.y).toBe(450);
expect(rat.x).toBe(300);
expect(hat.y).toBe(450);
expect(hat.x).toBe(100);
}); });
}); });
}); });

6301
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff