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

Set line-height of label so bbox is height of line

Browse Source
This commit is contained in:
Per Brolin
2024-06-11 16:13:55 +02:00
parent 80295c3cc2
commit d3ec33cfe7
2 changed files with 7 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/mermaid/src/diagrams/state/styles.js
View File

@@ -133,6 +133,7 @@ g.stateGroup line {
.cluster-label, .nodeLabel { .cluster-label, .nodeLabel {
color: ${options.stateLabelColor}; color: ${options.stateLabelColor};
line-height: 1.0;
} }
.statediagram-cluster rect.outer { .statediagram-cluster rect.outer {

17
packages/mermaid/src/rendering-util/rendering-elements/clusters.js
View File

@@ -10,11 +10,6 @@ import createLabel from './createLabel.js';
import { createRoundedRectPathD } from './shapes/roundedRectPath.ts'; import { createRoundedRectPathD } from './shapes/roundedRectPath.ts';
import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js'; import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
// Helper function to calculate the offset correction for the label
const calcLabelOffsetCorrection = (diff) => {
return diff * 0.75 - 6;
};
const rect = (parent, node) => { const rect = (parent, node) => {
log.info('Creating subgraph rect for ', node.id, node); log.info('Creating subgraph rect for ', node.id, node);
const siteConfig = getConfig(); const siteConfig = getConfig();
@@ -196,6 +191,7 @@ const roundedWithTitle = (parent, node) => {
// Get the size of the label // Get the size of the label
let bbox = text.getBBox(); let bbox = text.getBBox();
if (evaluate(siteConfig.flowchart.htmlLabels)) { if (evaluate(siteConfig.flowchart.htmlLabels)) {
const div = text.children[0]; const div = text.children[0];
const dv = select(text); const dv = select(text);
@@ -203,6 +199,7 @@ const roundedWithTitle = (parent, node) => {
dv.attr('width', bbox.width); dv.attr('width', bbox.width);
dv.attr('height', bbox.height); dv.attr('height', bbox.height);
} }
const padding = 0 * node.padding; const padding = 0 * node.padding;
const halfPadding = padding / 2; const halfPadding = padding / 2;
@@ -216,10 +213,11 @@ const roundedWithTitle = (parent, node) => {
const x = node.x - width / 2 - halfPadding; const x = node.x - width / 2 - halfPadding;
const y = node.y - node.height / 2 - halfPadding; const y = node.y - node.height / 2 - halfPadding;
const innerY = node.y - node.height / 2 - halfPadding + bbox.height - 1; const innerY = node.y - node.height / 2 - halfPadding + bbox.height + 2;
const height = node.height + padding; const height = node.height + padding;
const innerHeight = node.height + padding - bbox.height - 3; const innerHeight = node.height + padding - bbox.height - 2;
const look = siteConfig.look; const look = siteConfig.look;
// add the rect // add the rect
let rect; let rect;
if (node.look === 'handdrawn') { if (node.look === 'handdrawn') {
@@ -270,12 +268,9 @@ const roundedWithTitle = (parent, node) => {
.attr('height', innerHeight); .attr('height', innerHeight);
} }
let diff = bbox.height - (innerY - y) / 2;
let correction = calcLabelOffsetCorrection(diff, bbox.height);
label.attr( label.attr(
'transform', 'transform',
`translate(${node.x - bbox.width / 2}, ${(innerY - y) / 2 - correction})` `translate(${node.x - bbox.width / 2}, ${y + 1 - (evaluate(siteConfig.flowchart.htmlLabels) ? 0 : 3)})`
); );
const rectBox = rect.node().getBBox(); const rectBox = rect.node().getBBox();