GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

#2139 Applying user defined classes properly when calculating shape width

Browse Source
This commit is contained in:
Knut Sveidqvist 2023-08-10 13:14:39 +02:00
parent 85a988c31c
commit c55a0947be
3 changed files with 103 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
cypress/platform/knsv2.html
View File

@ -58,12 +58,21 @@
</head> </head>
<body> <body>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
--- flowchart
title: Simple flowchart with invisible edges classDef mainCategories fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
--- CS(Customer Awareness Journey):::mainCategories
flowchart TD </pre
A ~~~ B >
</pre <pre id="diagram" class="mermaid">
flowchart
Node1:::class1 --> Node2:::class2
Node1:::class1 --> Node3:::class2
Node3 --> Node4((I am a circle)):::larger
classDef class1 fill:lightblue
classDef class2 fill:pink
classDef larger font-size:30px,fill:yellow
</pre
> >
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
stateDiagram-v2 stateDiagram-v2

102
packages/mermaid/src/dagre-wrapper/nodes.js
View File

@ -8,8 +8,25 @@ import note from './shapes/note.js';
import { parseMember } from '../diagrams/class/svgDraw.js'; import { parseMember } from '../diagrams/class/svgDraw.js';
import { evaluate } from '../diagrams/common/common.js'; import { evaluate } from '../diagrams/common/common.js';
const formatClass = (str) => {
if (str) {
return ' ' + str;
}
return '';
};
const getClassesFromNode = (node, otherClasses) => {
return `${otherClasses ? otherClasses : 'node default'}${formatClass(node.classes)} ${formatClass(
node.class
)}`;
};
const question = async (parent, node) => { const question = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true); const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const w = bbox.width + node.padding; const w = bbox.width + node.padding;
const h = bbox.height + node.padding; const h = bbox.height + node.padding;
@ -70,7 +87,12 @@ const choice = (parent, node) => {
}; };
const hexagon = async (parent, node) => { const hexagon = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true); const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const f = 4; const f = 4;
const h = bbox.height + node.padding; const h = bbox.height + node.padding;
@ -97,7 +119,12 @@ const hexagon = async (parent, node) => {
}; };
const rect_left_inv_arrow = async (parent, node) => { const rect_left_inv_arrow = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true); const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const w = bbox.width + node.padding; const w = bbox.width + node.padding;
const h = bbox.height + node.padding; const h = bbox.height + node.padding;
@ -123,7 +150,7 @@ const rect_left_inv_arrow = async (parent, node) => {
}; };
const lean_right = async (parent, node) => { const lean_right = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true); const { shapeSvg, bbox } = await labelHelper(parent, node, getClassesFromNode(node), true);
const w = bbox.width + node.padding; const w = bbox.width + node.padding;
const h = bbox.height + node.padding; const h = bbox.height + node.padding;
@ -146,7 +173,12 @@ const lean_right = async (parent, node) => {
}; };
const lean_left = async (parent, node) => { const lean_left = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true); const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const w = bbox.width + node.padding; const w = bbox.width + node.padding;
const h = bbox.height + node.padding; const h = bbox.height + node.padding;
@ -169,7 +201,12 @@ const lean_left = async (parent, node) => {
}; };
const trapezoid = async (parent, node) => { const trapezoid = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true); const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const w = bbox.width + node.padding; const w = bbox.width + node.padding;
const h = bbox.height + node.padding; const h = bbox.height + node.padding;
@ -192,7 +229,12 @@ const trapezoid = async (parent, node) => {
}; };
const inv_trapezoid = async (parent, node) => { const inv_trapezoid = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true); const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const w = bbox.width + node.padding; const w = bbox.width + node.padding;
const h = bbox.height + node.padding; const h = bbox.height + node.padding;
@ -215,7 +257,12 @@ const inv_trapezoid = async (parent, node) => {
}; };
const rect_right_inv_arrow = async (parent, node) => { const rect_right_inv_arrow = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true); const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const w = bbox.width + node.padding; const w = bbox.width + node.padding;
const h = bbox.height + node.padding; const h = bbox.height + node.padding;
@ -239,7 +286,12 @@ const rect_right_inv_arrow = async (parent, node) => {
}; };
const cylinder = async (parent, node) => { const cylinder = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true); const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const w = bbox.width + node.padding; const w = bbox.width + node.padding;
const rx = w / 2; const rx = w / 2;
@ -314,7 +366,7 @@ const rect = async (parent, node) => {
const { shapeSvg, bbox, halfPadding } = await labelHelper( const { shapeSvg, bbox, halfPadding } = await labelHelper(
parent, parent,
node, node,
'node ' + node.classes, 'node ' + node.classes + ' ' + node.class,
true true
); );
@ -360,7 +412,7 @@ const rect = async (parent, node) => {
const labelRect = async (parent, node) => { const labelRect = async (parent, node) => {
const { shapeSvg } = await labelHelper(parent, node, 'label', true); const { shapeSvg } = await labelHelper(parent, node, 'label', true);
log.trace('Classes = ', node.classes); log.trace('Classes = ', node.class);
// add the rect // add the rect
const rect = shapeSvg.insert('rect', ':first-child'); const rect = shapeSvg.insert('rect', ':first-child');
@ -545,7 +597,12 @@ const rectWithTitle = (parent, node) => {
}; };
const stadium = async (parent, node) => { const stadium = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true); const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const h = bbox.height + node.padding; const h = bbox.height + node.padding;
const w = bbox.width + h / 4 + node.padding; const w = bbox.width + h / 4 + node.padding;
@ -571,7 +628,12 @@ const stadium = async (parent, node) => {
}; };
const circle = async (parent, node) => { const circle = async (parent, node) => {
const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true); const { shapeSvg, bbox, halfPadding } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const circle = shapeSvg.insert('circle', ':first-child'); const circle = shapeSvg.insert('circle', ':first-child');
// center the circle around its coordinate // center the circle around its coordinate
@ -596,7 +658,12 @@ const circle = async (parent, node) => {
}; };
const doublecircle = async (parent, node) => { const doublecircle = async (parent, node) => {
const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true); const { shapeSvg, bbox, halfPadding } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const gap = 5; const gap = 5;
const circleGroup = shapeSvg.insert('g', ':first-child'); const circleGroup = shapeSvg.insert('g', ':first-child');
const outerCircle = circleGroup.insert('circle'); const outerCircle = circleGroup.insert('circle');
@ -634,7 +701,12 @@ const doublecircle = async (parent, node) => {
}; };
const subroutine = async (parent, node) => { const subroutine = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true); const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const w = bbox.width + node.padding; const w = bbox.width + node.padding;
const h = bbox.height + node.padding; const h = bbox.height + node.padding;

2
packages/mermaid/src/dagre-wrapper/shapes/util.js
View File

@ -13,6 +13,7 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
} else { } else {
classes = _classes; classes = _classes;
} }
// Add outer g element // Add outer g element
const shapeSvg = parent const shapeSvg = parent
.insert('g') .insert('g')
@ -49,7 +50,6 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
) )
); );
} }
// Get the size of the label // Get the size of the label
let bbox = text.getBBox(); let bbox = text.getBBox();
const halfPadding = node.padding / 2; const halfPadding = node.padding / 2;