marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-15 10:14:21 +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> </style>
</head> </head>
<body> <body>
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "elk", "mergeEdges": true} }%%
stateDiagram
direction TB
T00 --> T0
</pre
>
<pre id="diagram" class="mermaid"> <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"} }%% %%{init: {"layout": "elk"} }%%
stateDiagram stateDiagram
[*] --> T1 [*] --> T1
@@ -85,7 +139,7 @@ stateDiagram
T1 --> T3 T1 --> T3
</pre </pre
> >
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid2">
stateDiagram stateDiagram
State1: The state with a note State1: The state with a note
note right of State1 note right of State1
@@ -94,8 +148,9 @@ stateDiagram
end note end note
</pre </pre
> >
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid2">
stateDiagram-v2 stateDiagram-v2
direction LR
[*] --> Active [*] --> Active
state Active { state Active {
@@ -531,7 +586,7 @@ mindmap
// useMaxWidth: false, // useMaxWidth: false,
// }); // });
mermaid.initialize({ mermaid.initialize({
// theme: 'dark', theme: 'base',
handdrawnSeed: 12, handdrawnSeed: 12,
// look: 'handdrawn', // look: 'handdrawn',
// layout: 'dagre', // layout: 'dagre',
@@ -544,7 +599,7 @@ mindmap
noteFontFamily: 'courier', noteFontFamily: 'courier',
messageFontFamily: 'courier', messageFontFamily: 'courier',
}, },
fontSize: 16, fontSize: 12,
logLevel: 0, logLevel: 0,
}); });
function callback() { function callback() {

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

@@ -1221,6 +1221,8 @@ direction LR
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
import { layouts } from './mermaid-layout-elk.esm.mjs';
mermaid.registerLayoutLoaders(layouts);
mermaid.parseError = function (err, hash) { 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 = []; child.children = [];
await addVertices(nodeEl, nodeArr, child, node.id); await addVertices(nodeEl, nodeArr, child, node.id);
// We need the label hight to be able to size the subgraph; if (node.label) {
const { shapeSvg, bbox } = await labelHelper(nodeEl, node, undefined, true); const { shapeSvg, bbox } = await labelHelper(nodeEl, node, undefined, true);
labelData.width = bbox.width; labelData.width = bbox.width;
labelData.wrappingWidth = getConfig().flowchart.wrappingWidth; labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
labelData.height = bbox.height; labelData.height = bbox.height - 8;
labelData.labelNode = shapeSvg.node(); labelData.labelNode = shapeSvg.node();
shapeSvg.remove(); // 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.labelData = labelData;
child.domId = nodeEl; child.domId = nodeEl;
} }
@@ -504,14 +510,15 @@ export const render = async (data4Layout, svg, element, algorithm) => {
// Subgraph // Subgraph
if (parentLookupDb.childrenById[node.id] !== undefined) { if (parentLookupDb.childrenById[node.id] !== undefined) {
log.trace('Subgraph XCX', node.id, node);
node.labels = [ node.labels = [
{ {
text: node.labelText, text: node.labelText,
layoutOptions: { layoutOptions: {
'nodeLabels.placement': '[H_CENTER, V_TOP, INSIDE]', 'nodeLabels.placement': '[H_CENTER, V_TOP, INSIDE]',
}, },
width: node?.labelData?.width || 100, width: node?.labelData?.width || 0,
height: node?.labelData?.height || 100, height: node?.labelData?.height || 0,
}, },
]; ];
if (node.dir) { 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); const g = await elk.layout(elkGraph);
log.info('after layout DAGA', JSON.stringify(g)); log.info('after layout', JSON.stringify(g));
// debugger; // debugger;
drawNodes(0, 0, g.children, svg, subGraphsEl, 0); 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]; const newNode = nodeDb[itemId];
console.log('New Node:', newNode);
// Save data for description and group so that for instance a statement without description overwrites // 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 // 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 // group
if (!newNode.type && parsedItem.doc) { 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.type = 'group';
newNode.isGroup = true; newNode.isGroup = true;
newNode.dir = getDir(parsedItem); newNode.dir = getDir(parsedItem);
@@ -308,6 +307,11 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
useRough, useRough,
}; };
// Clear the label for dividers who have no description
if (nodeData.shape === SHAPE_DIVIDER) {
nodeData.label = '';
}
if (parent && parent.id !== 'root') { if (parent && parent.id !== 'root') {
log.trace('Setting node ', itemId, ' to be child of its parent ', parent.id); log.trace('Setting node ', itemId, ' to be child of its parent ', parent.id);
nodeData.parentId = parent.id; nodeData.parentId = parent.id;
@@ -386,8 +390,6 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
} else { } else {
insertOrUpdateNode(nodes, nodeData); insertOrUpdateNode(nodes, nodeData);
} }
console.log('Nodes:', nodes);
} }
if (parsedItem.doc) { if (parsedItem.doc) {
log.trace('Adding nodes children '); 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) { if (node && node.clusterNode) {
const parentId = graph.parent(v); const parentId = graph.parent(v);
// Adjust for padding when on root level
node.y = parentId ? node.y + 2 : node.y - 8; node.y = parentId ? node.y + 2 : node.y - 8;
node.x -= 8; node.x -= 8;
// node.y -= 8;
log.info( log.info(
'A tainted cluster node XBX', 'A tainted cluster node XBX',
v, v,

19831
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff