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

1295 Handling labels of clusters

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-03-11 20:25:55 +01:00
parent 7bd5529bb7
commit da048cbc7b
4 changed files with 29 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
cypress/platform/current.html
View File

@@ -34,17 +34,24 @@
C --> D C --> D
</div> </div>
<div class="mermaid" style="width: 100%; height: 100%"> <div class="mermaid" style="width: 100%; height: 100%">
graph TB graph LR
A[apan klättrar]-- i träd -->B A[apan klättrar]-- i träd -->B
subgraph id1 [Test with title wider then the node in the subgraph] subgraph id1 [Test with title wider then the node in the subgraph]
B B
end end
</div> </div>
<div class="mermaid" style="width: 100%; height: 100%">
flowchart LR
A-- i träd -->B
subgraph id1 [Test]
B
end
</div>
<div class="mermaid" style="width: 100%; height: 100%"> <div class="mermaid" style="width: 100%; height: 100%">
flowchart TB flowchart TB
A[apan klättrar]-- i träd -->B C[apan klättrar]-- i träd -->D
subgraph id1 [Test with title wider then the node in the subgraph] subgraph id1 [Test]
B D
end end
</div> </div>
</div> </div>

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

@@ -33,10 +33,17 @@ const rect = (parent, node) => {
.attr('height', node.height + padding); .attr('height', node.height + padding);
const adj = (node.width + node.padding - bbox.width) / 2; const adj = (node.width + node.padding - bbox.width) / 2;
logger.info('bbox', bbox.width, node.x, node.width);
// Center the label // Center the label
label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')'); // label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')');
// label.attr('transform', 'translate(' + 70 + ', ' + -node.height / 2 + ')'); label.attr(
'transform',
'translate(' +
(node.x - bbox.width / 2) +
', ' +
(node.y - node.height / 2 - node.padding / 3 + 3) +
')'
);
const rectBox = rect.node().getBBox(); const rectBox = rect.node().getBBox();
node.width = rectBox.width; node.width = rectBox.width;

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

@@ -8,7 +8,7 @@ const createLabel = (vertexText, style) => {
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan'); const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve'); tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
tspan.setAttribute('dy', '1em'); tspan.setAttribute('dy', '1em');
tspan.setAttribute('x', '1'); tspan.setAttribute('x', '0');
tspan.textContent = rows[j]; tspan.textContent = rows[j];
svgLabel.appendChild(tspan); svgLabel.appendChild(tspan);
} }

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

@@ -22,16 +22,16 @@ export const render = (elem, graph) => {
if (node.type !== 'group') { if (node.type !== 'group') {
insertNode(nodes, graph.node(v)); insertNode(nodes, graph.node(v));
} else { } else {
const width = getClusterTitleWidth(clusters, node); // const width = getClusterTitleWidth(clusters, node);
const children = graph.children(v); // const children = graph.children(v);
nodes2expand.push({ id: children[0], width }); // nodes2expand.push({ id: children[0], width });
} }
}); });
nodes2expand.forEach(item => { // nodes2expand.forEach(item => {
const node = graph.node(item.id); // const node = graph.node(item.id);
node.width = item.width; // node.width = item.width;
}); // });
// Inster labels, this will insert them into the dom so that the width can be calculated // Inster labels, this will insert them into the dom so that the width can be calculated
graph.edges().forEach(function(e) { graph.edges().forEach(function(e) {