marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-02 03:44:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

#5237 Handling label size for elk layout

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-05-23 10:50:39 +02:00
parent 5413668c1a
commit 47776e3ca1
6 changed files with 8954 additions and 10984 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
cypress/platform/knsv2.html
View File

@@ -75,7 +75,61 @@
</style>
</head>
<body>
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "elk", "mergeEdges": true} }%%
stateDiagram
direction TB
T00 --> T0
</pre
>
<pre id="diagram" class="mermaid">
%%{init: {"layout": "dagre", "mergeEdges": true} }%%
stateDiagram
direction TB
State T1 {
T11
}
</pre
>
<pre id="diagram" class="mermaid">
%%{init: {"layout": "dagre", "mergeEdges": true} }%%
stateDiagram
State T1 {
T21
--
T22
}
</pre
>
<pre id="diagram" class="mermaid">
%%{init: {"layout": "elk", "mergeEdges": true} }%%
stateDiagram
direction TB
State T1 {
T11
}
</pre
>
<pre id="diagram" class="mermaid">
%%{init: {"layout": "elk", "mergeEdges": true} }%%
stateDiagram
State T1 {
T21
--
T22
}
</pre
>
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "elk", "mergeEdges": true} }%%
stateDiagram
[*] --> T1
T1 --> T2
T1 --> T3
T1 --> T4
</pre
>
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "elk"} }%%
stateDiagram
[*] --> T1
@@ -85,7 +139,7 @@ stateDiagram
T1 --> T3
</pre
>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
stateDiagram
State1: The state with a note
note right of State1
@@ -94,8 +148,9 @@ stateDiagram
end note
</pre
>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
stateDiagram-v2
direction LR
[*] --> Active
state Active {
@@ -531,7 +586,7 @@ mindmap
// useMaxWidth: false,
// });
mermaid.initialize({
// theme: 'dark',
theme: 'base',
handdrawnSeed: 12,
// look: 'handdrawn',
// layout: 'dagre',
@@ -544,7 +599,7 @@ mindmap
noteFontFamily: 'courier',
messageFontFamily: 'courier',
},
fontSize: 16,
fontSize: 12,
logLevel: 0,
});
function callback() {

2
cypress/platform/state-refactor.html
View File

@@ -1221,6 +1221,8 @@ direction LR
<script type="module">
import mermaid from './mermaid.esm.mjs';
import { layouts } from './mermaid-layout-elk.esm.mjs';
mermaid.registerLayoutLoaders(layouts);
mermaid.parseError = function (err, hash) {
};

29
packages/mermaid-layout-elk/src/render.ts
View File

@@ -70,13 +70,19 @@ export const addVertex = async (nodeEl, graph, nodeArr, node) => {
child.children = [];
await addVertices(nodeEl, nodeArr, child, node.id);
// We need the label hight to be able to size the subgraph;
const { shapeSvg, bbox } = await labelHelper(nodeEl, node, undefined, true);
labelData.width = bbox.width;
labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
labelData.height = bbox.height;
labelData.labelNode = shapeSvg.node();
shapeSvg.remove();
if (node.label) {
const { shapeSvg, bbox } = await labelHelper(nodeEl, node, undefined, true);
labelData.width = bbox.width;
labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
labelData.height = bbox.height - 8;
labelData.labelNode = shapeSvg.node();
// We need the label hight to be able to size the subgraph;
shapeSvg.remove();
} else {
// Subgraph without label
labelData.width = 0;
labelData.height = 0;
}
child.labelData = labelData;
child.domId = nodeEl;
}
@@ -504,14 +510,15 @@ export const render = async (data4Layout, svg, element, algorithm) => {
// Subgraph
if (parentLookupDb.childrenById[node.id] !== undefined) {
log.trace('Subgraph XCX', node.id, node);
node.labels = [
{
text: node.labelText,
layoutOptions: {
'nodeLabels.placement': '[H_CENTER, V_TOP, INSIDE]',
},
width: node?.labelData?.width || 100,
height: node?.labelData?.height || 100,
width: node?.labelData?.width || 0,
height: node?.labelData?.height || 0,
},
];
if (node.dir) {
@@ -538,9 +545,9 @@ export const render = async (data4Layout, svg, element, algorithm) => {
}
});
log.info('before layout', JSON.stringify(elkGraph, null, 2));
log.trace('before layout', JSON.stringify(elkGraph, null, 2));
const g = await elk.layout(elkGraph);
log.info('after layout DAGA', JSON.stringify(g));
log.info('after layout', JSON.stringify(g));
// debugger;
drawNodes(0, 0, g.children, svg, subGraphsEl, 0);

10
packages/mermaid/src/diagrams/state/dataFetcher.js
View File

@@ -241,7 +241,6 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
}
const newNode = nodeDb[itemId];
console.log('New Node:', newNode);
// Save data for description and group so that for instance a statement without description overwrites
// one with description @todo TODO What does this mean? If important, add a test for it
@@ -277,7 +276,7 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
// group
if (!newNode.type && parsedItem.doc) {
log.info('Setting cluster for ', itemId, getDir(parsedItem));
log.info('Setting cluster for XCX', itemId, getDir(parsedItem));
newNode.type = 'group';
newNode.isGroup = true;
newNode.dir = getDir(parsedItem);
@@ -308,6 +307,11 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
useRough,
};
// Clear the label for dividers who have no description
if (nodeData.shape === SHAPE_DIVIDER) {
nodeData.label = '';
}
if (parent && parent.id !== 'root') {
log.trace('Setting node ', itemId, ' to be child of its parent ', parent.id);
nodeData.parentId = parent.id;
@@ -386,8 +390,6 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
} else {
insertOrUpdateNode(nodes, nodeData);
}
console.log('Nodes:', nodes);
}
if (parsedItem.doc) {
log.trace('Adding nodes children ');

3
packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
View File

@@ -157,9 +157,10 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
);
if (node && node.clusterNode) {
const parentId = graph.parent(v);
// Adjust for padding when on root level
node.y = parentId ? node.y + 2 : node.y - 8;
node.x -= 8;
// node.y -= 8;
log.info(
'A tainted cluster node XBX',
v,

19831
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff