mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-02-04 07:13:25 +08:00
WIP
This commit is contained in:
parent
2c9da722d6
commit
606385cbf0
@ -57,9 +57,8 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<pre id="diagram" class="mermaid">
|
||||
swimlane
|
||||
swimlane LR
|
||||
subgraph "`one`"
|
||||
start -- l1 --> cat --> rat
|
||||
end
|
||||
@ -71,6 +70,8 @@ swimlane
|
||||
end
|
||||
</pre>
|
||||
|
||||
<!-- cat -->
|
||||
monkey dog --> cat monkey --> cow -->
|
||||
<!-- <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> -->
|
||||
|
@ -114,5 +114,8 @@
|
||||
},
|
||||
"volta": {
|
||||
"node": "18.16.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"d3-dag": "^0.11.5"
|
||||
}
|
||||
}
|
||||
|
@ -87,11 +87,15 @@ export function swimlaneLayout(graph, diagObj) {
|
||||
laneDb[subG.id] = lane;
|
||||
}
|
||||
|
||||
const rankWidth = [];
|
||||
// Basic layout
|
||||
graph.nodes().forEach((nodeId) => {
|
||||
const rank = ranks.get(nodeId);
|
||||
if (!rankWidth[rank]) {
|
||||
const laneId = subgraphLookupTable[nodeId];
|
||||
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 });
|
||||
});
|
||||
|
||||
|
@ -66,6 +66,13 @@ describe('When doing a assigning ranks specific for swim lanes ', () => {
|
||||
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');
|
||||
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 () => {
|
||||
@ -81,9 +88,43 @@ describe('When doing a assigning ranks specific for swim lanes ', () => {
|
||||
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'));
|
||||
const start = graph.node('start');
|
||||
const cat = graph.node('cat');
|
||||
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
6301
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user