marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-14 17:54:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Expandingh with of subgraphs whith title

Browse Source
This commit is contained in:
Knut Sveidqvist
2021-05-16 08:21:28 +02:00
parent 0a4f16737a
commit af4930e3f3
3 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
cypress/platform/knsv.html
View File

@@ -52,14 +52,15 @@ stateDiagram-v2
} }
</div> </div>
<div class="mermaid2" style="width: 100%; height: 20%;"> <div class="mermaid" style="width: 100%; height: 20%;">
sequenceDiagram %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
Alice->>+John: Hello John, how are you? flowchart LR
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you! subgraph B1
John-->>-Alice: I feel great! i -->f
note right of John: Hello note reader end
</div> A --> B1 --> B --> B1
</div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {

15
src/dagre-wrapper/clusters.js
View File

@@ -37,15 +37,22 @@ const rect = (parent, node) => {
const padding = 0 * node.padding; const padding = 0 * node.padding;
const halfPadding = padding / 2; const halfPadding = padding / 2;
const width = node.width <= bbox.width + padding ? bbox.width + padding : node.width + padding;
if (node.width <= bbox.width + padding) {
node.diff = (bbox.width - node.width) / 2;
} else {
node.diff = -node.padding / 2;
}
log.trace('Data ', node, JSON.stringify(node)); log.trace('Data ', node, JSON.stringify(node));
// center the rect around its coordinate // center the rect around its coordinate
rect rect
.attr('style', node.style) .attr('style', node.style)
.attr('rx', node.rx) .attr('rx', node.rx)
.attr('ry', node.ry) .attr('ry', node.ry)
.attr('x', node.x - node.width / 2 - halfPadding) .attr('x', node.x - width / 2)
.attr('y', node.y - node.height / 2 - halfPadding) .attr('y', node.y - node.height / 2 - halfPadding)
.attr('width', node.width + padding) .attr('width', width)
.attr('height', node.height + padding); .attr('height', node.height + padding);
// Center the label // Center the label
@@ -137,9 +144,9 @@ const roundedWithTitle = (parent, node) => {
const halfPadding = padding / 2; const halfPadding = padding / 2;
const width = const width =
node.width > bbox.width + node.padding ? node.width + node.padding : bbox.width + node.padding; node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width + node.padding;
if (node.width <= bbox.width + node.padding) { if (node.width <= bbox.width + node.padding) {
node.diff = (bbox.width - node.width) / 2; node.diff = (bbox.width + node.padding - node.width) / 2;
} }
// center the rect around its coordinate // center the rect around its coordinate

2
src/dagre-wrapper/index.js
View File

@@ -55,7 +55,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
const newEl = o.elem; const newEl = o.elem;
updateNodeBounds(node, newEl); updateNodeBounds(node, newEl);
node.diff = o.diff || 0; node.diff = o.diff || 0;
log.info('Node nounds ', v, node, node.width, node.x, node.y); log.info('Node bounds (abc123)', v, node, node.width, node.x, node.y);
setNodeElem(newEl, node); setNodeElem(newEl, node);
log.warn('Recursive render complete ', newEl, node); log.warn('Recursive render complete ', newEl, node);