marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-21 08:19:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add adjustments for text and useHtmlLabels

Browse Source
This commit is contained in:
yari-dewalt
2024-09-19 12:33:34 -07:00
parent 6a99a1a40a
commit 41f22864b4
2 changed files with 18 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/mermaid/src/diagrams/class/shapeUtil.ts
View File

@@ -1,11 +1,11 @@
import { select } from 'd3';
import { getConfig } from '../../config.js';
import { getNodeClasses } from '../../rendering-util/rendering-elements/shapes/util.js';
import { calculateTextHeight, calculateTextWidth, decodeEntities } from '../../utils.js';
import { calculateTextWidth, decodeEntities } from '../../utils.js';
import type { ClassMember, ClassNode } from './classTypes.js';
import { sanitizeText } from '../../diagram-api/diagramAPI.js';
import { createText } from '../../rendering-util/createText.js';
import { hasKatex } from '../common/common.js';
import { evaluate, hasKatex } from '../common/common.js';
import type { Node } from '../../rendering-util/types.js';
import type { MermaidConfig } from '../../config.type.js';
@@ -14,16 +14,16 @@ export const textHelper = async (
parent: SVGAElement,
node: any,
config: MermaidConfig,
useHtmlLabels: boolean,
GAP = config.class!.padding ?? 12
) => {
const TEXT_PADDING = !useHtmlLabels ? 3 : 0;
const shapeSvg = parent
// @ts-ignore: Ignore error for using .insert on SVGAElement
.insert('g')
.attr('class', getNodeClasses(node))
.attr('id', node.domId || node.id);
const TEXT_PADDING = 6;
let annotationGroup = null;
let labelGroup = null;
let membersGroup = null;
@@ -50,16 +50,16 @@ export const textHelper = async (
membersGroup = shapeSvg.insert('g').attr('class', 'members-group text');
let yOffset = 0;
for (const member of node.members) {
await addText(membersGroup, member, yOffset, [member.parseClassifier()]);
yOffset += calculateTextHeight(member.text, config) + TEXT_PADDING;
const height = await addText(membersGroup, member, yOffset, [member.parseClassifier()]);
yOffset += height + TEXT_PADDING;
}
membersGroupHeight = membersGroup.node().getBBox().height;
methodsGroup = shapeSvg.insert('g').attr('class', 'methods-group text');
let methodsYOffset = 0;
for (const method of node.methods) {
await addText(methodsGroup, method, methodsYOffset, [method.parseClassifier()]);
methodsYOffset += calculateTextHeight(method.text, config) + TEXT_PADDING;
const height = await addText(methodsGroup, method, methodsYOffset, [method.parseClassifier()]);
methodsYOffset += height + TEXT_PADDING;
}
let bbox = shapeSvg.node().getBBox();
@@ -99,7 +99,8 @@ const addText = async (
) => {
const textEl = parentGroup.insert('g').attr('class', 'label').attr('style', styles.join('; '));
const config = getConfig();
let useHtmlLabels = config.class?.htmlLabels ?? config.htmlLabels ?? true;
let useHtmlLabels =
'useHtmlLabels' in node ? node.useHtmlLabels : (evaluate(config.htmlLabels) ?? true);
let textContent = '';
// Support regular node type (.label) and classNodes (.text)
@@ -133,8 +134,10 @@ const addText = async (
let numberOfLines = 1;
if (!useHtmlLabels) {
// Undo font-weight
// Undo font-weight normal
if (styles.includes('font-weight: bolder')) {
select(text).selectAll('tspan').attr('font-weight', '');
}
numberOfLines = text.children.length;
@@ -212,4 +215,5 @@ const addText = async (
// Center text and offset by yOffset
textEl.attr('transform', 'translate(0,' + (-bbox.height / (2 * numberOfLines) + yOffset) + ')');
return bbox.height;
};

5
packages/mermaid/src/rendering-util/rendering-elements/shapes/classBox.ts
View File

@@ -7,19 +7,20 @@ import rough from 'roughjs';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import intersect from '../intersect/index.js';
import { textHelper } from '../../../diagrams/class/shapeUtil.js';
import { evaluate } from '../../../diagrams/common/common.js';
export const classBox = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
const config = getConfig();
const PADDING = config.class!.padding ?? 12;
const GAP = PADDING;
const useHtmlLabels = config.class?.htmlLabels ?? config.htmlLabels ?? true;
const useHtmlLabels = node.useHtmlLabels ?? evaluate(config.htmlLabels) ?? true;
// Treat node as classNode
const classNode = node as unknown as ClassNode;
classNode.annotations = classNode.annotations ?? [];
classNode.members = classNode.members ?? [];
classNode.methods = classNode.methods ?? [];
const { shapeSvg, bbox } = await textHelper(parent, node, config, GAP);
const { shapeSvg, bbox } = await textHelper(parent, node, config, useHtmlLabels, GAP);
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;