mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

#1418 Fix for titles in stateDiagram clusters

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
Show Stats 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 { logger as log } from '../logger'; // eslint-disable-line
import createLabel from './createLabel';
import { select } from 'd3';
import { getConfig } from '../config';
const rect = (parent, 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
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
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 halfPadding = padding / 2;
@ -106,11 +118,21 @@ const roundedWithTitle = (parent, node) => {
const label = shapeSvg.insert('g').attr('class', 'cluster-label');
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
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 halfPadding = padding / 2;
@ -134,7 +156,7 @@ const roundedWithTitle = (parent, node) => {
'translate(' +
(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);
};
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);
const width = label.getBBox().width;
elem.node().removeChild(label);