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

View File

@ -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> -->

View File

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

View File

@ -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 });
});

View File

@ -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

File diff suppressed because it is too large Load Diff