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

#1418 Fix for titles in stateDiagram clusters

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-05-27 21:47:07 +02:00
parent 63d7b63f42
commit 39ef0107ad
1 changed files with 29 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,8 @@
import intersectRect from './intersect/intersect-rect'; import intersectRect from './intersect/intersect-rect';
import { logger as log } from '../logger'; // eslint-disable-line import { logger as log } from '../logger'; // eslint-disable-line
import createLabel from './createLabel'; import createLabel from './createLabel';
import { select } from 'd3';
import { getConfig } from '../config';
const rect = (parent, node) => { const rect = (parent, node) => {
log.trace('Creating subgraph rect for ', node.id, node); log.trace('Creating subgraph rect for ', node.id, node);
@@ -17,10 +19,20 @@ const rect = (parent, node) => {
// Create the label and insert it after the rect // Create the label and insert it after the rect
const label = shapeSvg.insert('g').attr('class', 'cluster-label'); const label = shapeSvg.insert('g').attr('class', 'cluster-label');
const text = label.node().appendChild(createLabel(node.labelText, node.labelStyle)); const text = label
.node()
.appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));
// Get the size of the label // Get the size of the label
const bbox = text.getBBox(); let bbox = text.getBBox();
if (getConfig().flowchart.htmlLabels) {
const div = text.children[0];
const dv = select(text);
bbox = div.getBoundingClientRect();
dv.attr('width', bbox.width);
dv.attr('height', bbox.height);
}
const padding = 0 * node.padding; const padding = 0 * node.padding;
const halfPadding = padding / 2; const halfPadding = padding / 2;
@@ -106,11 +118,21 @@ const roundedWithTitle = (parent, node) => {
const label = shapeSvg.insert('g').attr('class', 'cluster-label'); const label = shapeSvg.insert('g').attr('class', 'cluster-label');
const innerRect = shapeSvg.append('rect'); const innerRect = shapeSvg.append('rect');
const text = label.node().appendChild(createLabel(node.labelText, node.labelStyle)); const text = label
.node()
.appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));
// Get the size of the label // Get the size of the label
const bbox = text.getBBox(); let bbox = text.getBBox();
let labelHeight = bbox.height;
if (getConfig().flowchart.htmlLabels) {
const div = text.children[0];
const dv = select(text);
bbox = div.getBoundingClientRect();
dv.attr('width', bbox.width);
dv.attr('height', bbox.height);
}
bbox = text.getBBox();
const padding = 0 * node.padding; const padding = 0 * node.padding;
const halfPadding = padding / 2; const halfPadding = padding / 2;
@@ -134,7 +156,7 @@ const roundedWithTitle = (parent, node) => {
'translate(' + 'translate(' +
(node.x - bbox.width / 2) + (node.x - bbox.width / 2) +
', ' + ', ' +
(node.y - node.height / 2 - node.padding / 3 + 3) + (node.y - node.height / 2 - node.padding / 3 + (getConfig().flowchart.htmlLabels ? 5 : 3)) +
')' ')'
); );
@@ -191,7 +213,7 @@ export const insertCluster = (elem, node) => {
clusterElems[node.id] = shapes[shape](elem, node); clusterElems[node.id] = shapes[shape](elem, node);
}; };
export const getClusterTitleWidth = (elem, node) => { export const getClusterTitleWidth = (elem, node) => {
const label = createLabel(node.labelText, node.labelStyle); const label = createLabel(node.labelText, node.labelStyle, undefined, true);
elem.node().appendChild(label); elem.node().appendChild(label);
const width = label.getBBox().width; const width = label.getBBox().width;
elem.node().removeChild(label); elem.node().removeChild(label);