marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-12-09 22:14:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

Version set 10.1.0 and fix for label centering

Browse Source
This commit is contained in:
Knut Sveidqvist
2023-04-04 14:36:05 +02:00
parent 1a56a18f9b
commit fc1962c795
4 changed files with 40 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
cypress/platform/knsv2.html
View File

@@ -58,6 +58,15 @@
</head>
<body>
<pre id="diagram" class="mermaid">
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*] </pre
>
<pre id="diagram" class="mermaid2">
flowchart RL
subgraph "`one`"
a1 -- l1 --> a2
@@ -65,14 +74,13 @@ flowchart RL
end
</pre>
<pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"htmlLabels":false}} }%%
flowchart RL
subgraph "`one`"
a1 -- l1 --> a2
a1 -- l2 --> a2
end
</pre>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
flowchart
id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]</pre
>
@@ -90,10 +98,17 @@ flowchart LR
way`"]
</pre
>
<pre id="diagram" class="mermaid2">
<pre id="diagram" class="mermaid">
classDiagram-v2
note "I love this diagram!\nDo you love it?"
</pre
</pre>
<pre id="diagram" class="mermaid">
stateDiagram-v2
State1: The state with a note with minus - and plus + in it
note left of State1
Important information! You can write
notes with . and in them.
end note </pre
>
<pre id="diagram" class="mermaid2">
mindmap
@@ -187,7 +202,7 @@ flowchart TB
rtc{{rtc}}
</pre
>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid
@@ -244,7 +259,7 @@ flowchart TB
>
<br />
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid
subgraph ibm[IBM Espresso CPU]
@@ -300,7 +315,7 @@ flowchart TB
>
<br />
&nbsp;
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
flowchart LR
B1 --be be--x B2
B1 --bo bo--o B3
@@ -391,10 +406,10 @@ mindmap
flowchart: {
// defaultRenderer: 'elk',
useMaxWidth: false,
// htmlLabels: false,
htmlLabels: true,
// htmlLabels: true,
},
// htmlLabels: true,
// htmlLabels: false,
gantt: {
useMaxWidth: false,
},

7
packages/mermaid/src/dagre-wrapper/shapes/note.js
View File

@@ -1,8 +1,13 @@
import { updateNodeBounds, labelHelper } from './util';
import { log } from '../../logger';
import { getConfig } from '../../config';
import intersect from '../intersect/index.js';
const note = (parent, node) => {
const useHtmlLabels = node.useHtmlLabels || getConfig().flowchart.htmlLabels;
if (!useHtmlLabels) {
node.centerLabel = true;
}
const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);
log.info('Classes = ', node.classes);
@@ -12,7 +17,7 @@ const note = (parent, node) => {
rect
.attr('rx', node.rx)
.attr('ry', node.ry)
.attr('x', -halfPadding)
.attr('x', -bbox.width / 2 - halfPadding)
.attr('y', -bbox.height / 2 - halfPadding)
.attr('width', bbox.width + node.padding)
.attr('height', bbox.height + node.padding);

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

@@ -6,6 +6,7 @@ import { select } from 'd3';
import { evaluate, sanitizeText } from '../../diagrams/common/common';
export const labelHelper = (parent, node, _classes, isNode) => {
let classes;
const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig().flowchart.htmlLabels);
if (!_classes) {
classes = 'node default';
} else {
@@ -33,7 +34,7 @@ export const labelHelper = (parent, node, _classes, isNode) => {
if (node.labelType === 'markdown') {
// text = textNode;
text = createText(label, sanitizeText(decodeEntities(labelText), getConfig()), {
useHtmlLabels: getConfig().flowchart.htmlLabels,
useHtmlLabels,
width: node.width || getConfig().flowchart.wrappingWidth,
classes: 'markdown-node-label',
});
@@ -62,11 +63,14 @@ export const labelHelper = (parent, node, _classes, isNode) => {
const halfPadding = node.padding / 2;
// Center the label
if (getConfig().flowchart.htmlLabels) {
if (useHtmlLabels) {
label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
} else {
label.attr('transform', 'translate(' + 0 + ', ' + -bbox.height / 2 + ')');
}
if (node.centerLabel) {
label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
}
label.insert('rect', ':first-child');
return { shapeSvg, bbox, halfPadding, label };
};

4
packages/mermaid/src/diagrams/state/stateRenderer-v2.js
View File

@@ -232,6 +232,9 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) =>
type: newNode.type,
padding: 15, //getConfig().flowchart.padding
};
// if (useHtmlLabels) {
nodeData.centerLabel = true;
// }
if (parsedItem.note) {
// Todo: set random id
@@ -240,6 +243,7 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) =>
shape: SHAPE_NOTE,
labelText: parsedItem.note.text,
classes: CSS_DIAGRAM_NOTE,
// useHtmlLabels: false,
style: '', // styles.style,
id: itemId + NOTE_ID + '-' + graphItemCount,
domId: stateDomId(itemId, graphItemCount, NOTE),