marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-23 17:29:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

#2028 Updated layout algorithm

Browse Source
This commit is contained in:
Knut Sveidqvist
2023-06-08 19:19:47 +02:00
parent fe3e471880
commit ddc006e49b
2 changed files with 78 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
cypress/platform/knsv2.html
View File

@@ -57,7 +57,7 @@
</style> </style>
</head> </head>
<body> <body>
<pre style="background:black;color:white"> <pre style="background: black; color: white">
swimlane LR swimlane LR
subgraph "`one`" subgraph "`one`"
start -- l1 --> cat --> rat start -- l1 --> cat --> rat
@@ -71,7 +71,8 @@
end end
cat --> monkey cat --> monkey
cow --> dog cow --> dog
</pre> </pre
>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
swimlane LR swimlane LR
subgraph "`one`" subgraph "`one`"
@@ -84,12 +85,27 @@ swimlane LR
cow --> horse --> done3 cow --> horse --> done3
cow --> sheep --> done3 cow --> sheep --> done3
end end
subgraph "`four`"
panda -->
kangaroo --> done4
end
cat --> monkey cat --> monkey
cow --> dog cow --> dog
kangaroo --> sheep
</pre> </pre>
<pre id="diagram" class="mermaid2">
monkey dog --> cat monkey --> cow --> swimlane LR
subgraph "`three`"
bat --> cow
cow --> sheep
end
subgraph "`four`"
panda -->
kangaroo --> done4
end
kangaroo --> sheep
</pre>
<!-- <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> -->

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

@@ -28,6 +28,11 @@ export function assignRanks(graph, subgraphLookupTable) {
let cnt = 0; let cnt = 0;
let changesDetected = true; let changesDetected = true;
/**
*
* @param nodeId
* @param currentRank
*/
function dfs(nodeId, currentRank) { function dfs(nodeId, currentRank) {
if (visited.has(nodeId)) { if (visited.has(nodeId)) {
return; return;
@@ -36,7 +41,7 @@ export function assignRanks(graph, subgraphLookupTable) {
visited.add(nodeId); visited.add(nodeId);
const existingRank = ranks.get(nodeId) || 0; const existingRank = ranks.get(nodeId) || 0;
console.log('APA444 DFS Base case for', nodeId, 'to', Math.max(existingRank, currentRank)); // console.log('APA444 DFS Base case for', nodeId, 'to', Math.max(existingRank, currentRank));
if (lock.get(nodeId) !== 1) { if (lock.get(nodeId) !== 1) {
ranks.set(nodeId, Math.max(existingRank, currentRank)); ranks.set(nodeId, Math.max(existingRank, currentRank));
} else { } else {
@@ -61,10 +66,17 @@ export function assignRanks(graph, subgraphLookupTable) {
}); });
} }
/**
*
*/
function adjustSuccessors() { function adjustSuccessors() {
console.log('APA444 Adjusting successors');
graph.nodes().forEach((nodeId) => { graph.nodes().forEach((nodeId) => {
if (graph.predecessors(nodeId).length === 0) { console.log('APA444 Going through nodes', nodeId);
// if (graph.predecessors(nodeId).length === 0) {
console.log('APA444 has no predecessors', nodeId);
graph.successors(nodeId).forEach((successorNodeId) => { graph.successors(nodeId).forEach((successorNodeId) => {
console.log('APA444 has checking successor', successorNodeId);
if (subgraphLookupTable[successorNodeId] !== subgraphLookupTable[nodeId]) { if (subgraphLookupTable[successorNodeId] !== subgraphLookupTable[nodeId]) {
const newRank = ranks.get(successorNodeId); const newRank = ranks.get(successorNodeId);
ranks.set(nodeId, newRank); ranks.set(nodeId, newRank);
@@ -75,9 +87,7 @@ export function assignRanks(graph, subgraphLookupTable) {
// Adjust ranks of successors in the same subgraph // Adjust ranks of successors in the same subgraph
graph.successors(nodeId).forEach((sameSubGraphSuccessorNodeId) => { graph.successors(nodeId).forEach((sameSubGraphSuccessorNodeId) => {
if ( if (subgraphLookupTable[sameSubGraphSuccessorNodeId] === subgraphLookupTable[nodeId]) {
subgraphLookupTable[sameSubGraphSuccessorNodeId] === subgraphLookupTable[nodeId]
) {
console.log( console.log(
'APA444 Adjusting rank of', 'APA444 Adjusting rank of',
sameSubGraphSuccessorNodeId, sameSubGraphSuccessorNodeId,
@@ -91,12 +101,17 @@ export function assignRanks(graph, subgraphLookupTable) {
// setRankFromTopNodes(); // setRankFromTopNodes();
} }
}); });
} else {
console.log('APA444 Node', nodeId, ' and ', successorNodeId, ' is in the same lane');
} }
}); });
} // }
}); });
} }
/**
*
*/
function setRankFromTopNodes() { function setRankFromTopNodes() {
visited = new Set(); visited = new Set();
graph.nodes().forEach((nodeId) => { graph.nodes().forEach((nodeId) => {
@@ -120,6 +135,7 @@ export function assignRanks(graph, subgraphLookupTable) {
* *
* @param graph * @param graph
* @param subgraphLÖookupTable * @param subgraphLÖookupTable
* @param ranks
* @param subgraphLookupTable * @param subgraphLookupTable
*/ */
export function assignAffinities(graph, ranks, subgraphLookupTable) { export function assignAffinities(graph, ranks, subgraphLookupTable) {
@@ -130,27 +146,27 @@ export function assignAffinities(graph, ranks, subgraphLookupTable) {
graph.nodes().forEach((nodeId) => { graph.nodes().forEach((nodeId) => {
const swimlane = subgraphLookupTable[nodeId]; const swimlane = subgraphLookupTable[nodeId];
const rank = ranks.get(nodeId); const rank = ranks.get(nodeId);
const key = swimlane+':'+rank; const key = swimlane + ':' + rank;
let currentAffinity = swimlaneRankAffinities.get(key); let currentAffinity = swimlaneRankAffinities.get(key);
if(typeof currentAffinity === 'undefined'){ if (currentAffinity === undefined) {
currentAffinity = -1; currentAffinity = -1;
} }
const newAffinity = currentAffinity + 1; const newAffinity = currentAffinity + 1;
swimlaneRankAffinities.set(key, newAffinity); swimlaneRankAffinities.set(key, newAffinity);
affinities.set(nodeId, newAffinity); affinities.set(nodeId, newAffinity);
let currentMaxAffinity = swimlaneMaxAffinity.get(swimlane); let currentMaxAffinity = swimlaneMaxAffinity.get(swimlane);
if(typeof currentMaxAffinity === 'undefined'){ if (currentMaxAffinity === undefined) {
swimlaneMaxAffinity.set(swimlane, 0); swimlaneMaxAffinity.set(swimlane, 0);
currentMaxAffinity = 0; currentMaxAffinity = 0;
} }
if(newAffinity > currentMaxAffinity){ if (newAffinity > currentMaxAffinity) {
swimlaneMaxAffinity.set(swimlane, newAffinity); swimlaneMaxAffinity.set(swimlane, newAffinity);
} }
}); });
// console.log('APA444 affinities', swimlaneRankAffinities); // console.log('APA444 affinities', swimlaneRankAffinities);
return {affinities, swimlaneMaxAffinity}; return { affinities, swimlaneMaxAffinity };
//return affinities; //return affinities;
} }
@@ -163,20 +179,19 @@ export function swimlaneLayout(graph, diagObj) {
const subgraphLookupTable = getSubgraphLookupTable(diagObj); const subgraphLookupTable = getSubgraphLookupTable(diagObj);
const ranks = assignRanks(graph, subgraphLookupTable); const ranks = assignRanks(graph, subgraphLookupTable);
const {affinities, swimlaneMaxAffinity} = assignAffinities(graph, ranks, subgraphLookupTable); const { affinities, swimlaneMaxAffinity } = assignAffinities(graph, ranks, subgraphLookupTable);
// const affinities = assignAffinities(graph, ranks, subgraphLookupTable); // const affinities = assignAffinities(graph, ranks, subgraphLookupTable);
const subGraphs = diagObj.db.getSubGraphs(); const subGraphs = diagObj.db.getSubGraphs();
const lanes = []; const lanes = [];
const laneDb = {}; const laneDb = {};
let xPos = 0; let xPos = 0;
for (let i = 0; i < subGraphs.length; i++) { for (const subG of subGraphs) {
const subG = subGraphs[i];
const maxAffinity = swimlaneMaxAffinity.get(subG.id); const maxAffinity = swimlaneMaxAffinity.get(subG.id);
const lane = { const lane = {
title: subG.title, title: subG.title,
x: xPos, x: xPos,
width: 200 + maxAffinity*150, width: 200 + maxAffinity * 150,
}; };
xPos += lane.width; xPos += lane.width;
lanes.push(lane); lanes.push(lane);
@@ -187,6 +202,7 @@ export function swimlaneLayout(graph, diagObj) {
// Basic layout, calculate the node positions based on rank // Basic layout, calculate the node positions based on rank
graph.nodes().forEach((nodeId) => { graph.nodes().forEach((nodeId) => {
const rank = ranks.get(nodeId); const rank = ranks.get(nodeId);
if (!rankWidth[rank]) { if (!rankWidth[rank]) {
const laneId = subgraphLookupTable[nodeId]; const laneId = subgraphLookupTable[nodeId];
const lane = laneDb[laneId]; const lane = laneDb[laneId];
@@ -195,7 +211,7 @@ export function swimlaneLayout(graph, diagObj) {
const affinity = affinities.get(nodeId); const affinity = affinities.get(nodeId);
console.log('APA444', nodeId, 'rank', rank, 'affinity', affinity); console.log('APA444', nodeId, 'rank', rank, 'affinity', affinity);
graph.setNode(nodeId, { y: rank * 200 + 50, x: lane.x + 150*affinity + lane.width / 2 }); graph.setNode(nodeId, { y: rank * 200 + 50, x: lane.x + 150 * affinity + 100 });
// lane.width = Math.max(lane.width, lane.x + 150*affinity + lane.width / 4); // lane.width = Math.max(lane.width, lane.x + 150*affinity + lane.width / 4);
} }
}); });