mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-18 23:09:49 +02:00
#MC-1733 Support for subgraphs in fixed layout
This commit is contained in:
@@ -105,6 +105,12 @@ stateDiagram
|
||||
S:Stillas
|
||||
T:Tiger
|
||||
U:Ulv
|
||||
state Z {
|
||||
state X {
|
||||
Y:Ypsilon
|
||||
}
|
||||
}
|
||||
A
|
||||
|
||||
S --> T: angrepp
|
||||
T --> U: Apa
|
||||
@@ -116,7 +122,11 @@ stateDiagram
|
||||
S: { x: 0, y: 0 },
|
||||
T: { x: 100, y: 100, width: 100, height: 100 },
|
||||
U: { x: 200, y: 200 },
|
||||
V: { x: 300, y: 100 },
|
||||
V: { x: 300, y: 120 },
|
||||
Z: { x: 300, y: 10, width: 160, height: 100 },
|
||||
X: { x: 300, y: 20, width: 80, height: 60 },
|
||||
Y: { x: 300, y: 30, width: 50, height: 20 },
|
||||
A: { x: 300, y: 75, width: 20, height: 20 },
|
||||
},
|
||||
edges: {
|
||||
edge0: {
|
||||
|
@@ -211,7 +211,7 @@ stateDiagram
|
||||
end note
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
<pre id="diagram" class="mermaid">
|
||||
stateDiagram-v2
|
||||
direction LR
|
||||
[*] --> Active
|
||||
@@ -237,9 +237,9 @@ stateDiagram-v2
|
||||
handdrawnSeed: 12,
|
||||
look: 'handdrawn',
|
||||
'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
||||
// layout: 'dagre',
|
||||
layout: 'dagre',
|
||||
// layout: 'elk',
|
||||
layout: 'fixed',
|
||||
// layout: 'fixed',
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
// fontFamily: 'Caveat',
|
||||
fontFamily: 'Kalam',
|
||||
|
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@mermaid-chart/mermaid",
|
||||
"version": "11.0.0-beta.6",
|
||||
"version": "11.0.0-beta.9",
|
||||
"description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"type": "module",
|
||||
"module": "./dist/mermaid.core.mjs",
|
||||
|
@@ -16,7 +16,11 @@ import {
|
||||
clear as clearNodes,
|
||||
setNodeElem,
|
||||
} from '../../rendering-elements/nodes.js';
|
||||
import { insertCluster, clear as clearClusters } from '../../rendering-elements/clusters.js';
|
||||
import {
|
||||
insertCluster,
|
||||
clear as clearClusters,
|
||||
positionCluster,
|
||||
} from '../../rendering-elements/clusters.js';
|
||||
import {
|
||||
insertEdgeLabel,
|
||||
positionEdgeLabel,
|
||||
@@ -53,15 +57,28 @@ const doRender = async (_elem, data4Layout, siteConfig, positions) => {
|
||||
const nodeDB = {};
|
||||
await Promise.all(
|
||||
data4Layout.nodes.map(async function (node) {
|
||||
let pos;
|
||||
if (node.x === undefined || node.y === undefined) {
|
||||
const pos = positions.nodes[node.id];
|
||||
node.x = pos?.x || 0;
|
||||
node.y = pos?.y || 0;
|
||||
pos = positions.nodes[node.id];
|
||||
node.height = pos?.height || 0;
|
||||
node.width = pos?.width || 0;
|
||||
}
|
||||
|
||||
await insertNode(nodes, node, 'TB');
|
||||
if (node.isGroup) {
|
||||
node.x = 0;
|
||||
node.y = 0;
|
||||
await insertCluster(nodes, node, 'TB');
|
||||
// Don't set the coordinates before they "layout", this will mess up the positioning
|
||||
if (pos) {
|
||||
node.x = pos?.x || 0;
|
||||
node.y = pos?.y || 0;
|
||||
}
|
||||
} else {
|
||||
if (pos) {
|
||||
node.x = pos?.x || 0;
|
||||
node.y = pos?.y || 0;
|
||||
}
|
||||
await insertNode(nodes, node, 'TB');
|
||||
}
|
||||
nodeDB[node.id] = node;
|
||||
})
|
||||
);
|
||||
@@ -79,7 +96,11 @@ const doRender = async (_elem, data4Layout, siteConfig, positions) => {
|
||||
// Position the nodes
|
||||
await Promise.all(
|
||||
data4Layout.nodes.map(async function (node) {
|
||||
positionNode(node);
|
||||
if (node.isGroup) {
|
||||
positionCluster(node);
|
||||
} else {
|
||||
positionNode(node);
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
|
@@ -327,8 +327,20 @@ export const clear = () => {
|
||||
};
|
||||
|
||||
export const positionCluster = (node) => {
|
||||
log.info('Position cluster (' + node.id + ', ' + node.x + ', ' + node.y + ')');
|
||||
log.info(
|
||||
'Position cluster (' +
|
||||
node.id +
|
||||
', ' +
|
||||
node.x +
|
||||
', ' +
|
||||
node.y +
|
||||
') (' +
|
||||
node?.width +
|
||||
', ' +
|
||||
node?.height +
|
||||
')',
|
||||
clusterElems[node.id]
|
||||
);
|
||||
const el = clusterElems[node.id];
|
||||
|
||||
el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
|
||||
el.cluster.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
|
||||
};
|
||||
|
Reference in New Issue
Block a user