mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-10-17 05:00:12 +02:00
#2028 returning node coordinates from layout
This commit is contained in:
@@ -67,8 +67,33 @@ export function assignRanks(graph, subgraphLookupTable) {
|
||||
/**
|
||||
*
|
||||
* @param graph
|
||||
* @param diagObj
|
||||
*/
|
||||
export function swimlaneLayout(graph) {
|
||||
const ranks = assignRanks(graph);
|
||||
return graph;
|
||||
export function swimlaneLayout(graph, diagObj) {
|
||||
const subgraphLookupTable = getSubgraphLookupTable(diagObj);
|
||||
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 };
|
||||
}
|
||||
|
@@ -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 () => {
|
||||
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
|
||||
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 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);
|
||||
expect(ranks.get('monkey')).toEqual(1);
|
||||
expect(ranks.get('dog')).toEqual(2);
|
||||
expect(ranks.get('done')).toEqual(3);
|
||||
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);
|
||||
expect(ranks.get('monkey')).toEqual(1);
|
||||
expect(ranks.get('dog')).toEqual(2);
|
||||
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'));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
Reference in New Issue
Block a user