marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-12-10 22:44:11 +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> </head>
<body> <body>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*] </pre
>
<pre id="diagram" class="mermaid2">
flowchart RL flowchart RL
subgraph "`one`" subgraph "`one`"
a1 -- l1 --> a2 a1 -- l1 --> a2
@@ -65,14 +74,13 @@ flowchart RL
end end
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"htmlLabels":false}} }%%
flowchart RL flowchart RL
subgraph "`one`" subgraph "`one`"
a1 -- l1 --> a2 a1 -- l1 --> a2
a1 -- l2 --> a2 a1 -- l2 --> a2
end end
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid2">
flowchart 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 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`"] way`"]
</pre </pre
> >
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid">
classDiagram-v2 classDiagram-v2
note "I love this diagram!\nDo you love it?" 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"> <pre id="diagram" class="mermaid2">
mindmap mindmap
@@ -187,7 +202,7 @@ flowchart TB
rtc{{rtc}} rtc{{rtc}}
</pre </pre
> >
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid2">
%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%% %%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
flowchart TB flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid %% I could not figure out how to use double quotes in labels in Mermaid
@@ -244,7 +259,7 @@ flowchart TB
> >
<br /> <br />
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid2">
flowchart TB flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid %% I could not figure out how to use double quotes in labels in Mermaid
subgraph ibm[IBM Espresso CPU] subgraph ibm[IBM Espresso CPU]
@@ -300,7 +315,7 @@ flowchart TB
> >
<br /> <br />
&nbsp; &nbsp;
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid2">
flowchart LR flowchart LR
B1 --be be--x B2 B1 --be be--x B2
B1 --bo bo--o B3 B1 --bo bo--o B3
@@ -391,10 +406,10 @@ mindmap
flowchart: { flowchart: {
// defaultRenderer: 'elk', // defaultRenderer: 'elk',
useMaxWidth: false, useMaxWidth: false,
// htmlLabels: false,
htmlLabels: true, htmlLabels: true,
// htmlLabels: true,
}, },
// htmlLabels: true, // htmlLabels: false,
gantt: { gantt: {
useMaxWidth: false, useMaxWidth: false,
}, },

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

@@ -1,8 +1,13 @@
import { updateNodeBounds, labelHelper } from './util'; import { updateNodeBounds, labelHelper } from './util';
import { log } from '../../logger'; import { log } from '../../logger';
import { getConfig } from '../../config';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
const note = (parent, node) => { 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); const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);
log.info('Classes = ', node.classes); log.info('Classes = ', node.classes);
@@ -12,7 +17,7 @@ const note = (parent, node) => {
rect rect
.attr('rx', node.rx) .attr('rx', node.rx)
.attr('ry', node.ry) .attr('ry', node.ry)
.attr('x', -halfPadding) .attr('x', -bbox.width / 2 - halfPadding)
.attr('y', -bbox.height / 2 - halfPadding) .attr('y', -bbox.height / 2 - halfPadding)
.attr('width', bbox.width + node.padding) .attr('width', bbox.width + node.padding)
.attr('height', bbox.height + 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'; import { evaluate, sanitizeText } from '../../diagrams/common/common';
export const labelHelper = (parent, node, _classes, isNode) => { export const labelHelper = (parent, node, _classes, isNode) => {
let classes; let classes;
const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig().flowchart.htmlLabels);
if (!_classes) { if (!_classes) {
classes = 'node default'; classes = 'node default';
} else { } else {
@@ -33,7 +34,7 @@ export const labelHelper = (parent, node, _classes, isNode) => {
if (node.labelType === 'markdown') { if (node.labelType === 'markdown') {
// text = textNode; // text = textNode;
text = createText(label, sanitizeText(decodeEntities(labelText), getConfig()), { text = createText(label, sanitizeText(decodeEntities(labelText), getConfig()), {
useHtmlLabels: getConfig().flowchart.htmlLabels, useHtmlLabels,
width: node.width || getConfig().flowchart.wrappingWidth, width: node.width || getConfig().flowchart.wrappingWidth,
classes: 'markdown-node-label', classes: 'markdown-node-label',
}); });
@@ -62,11 +63,14 @@ export const labelHelper = (parent, node, _classes, isNode) => {
const halfPadding = node.padding / 2; const halfPadding = node.padding / 2;
// Center the label // Center the label
if (getConfig().flowchart.htmlLabels) { if (useHtmlLabels) {
label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')'); label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
} else { } else {
label.attr('transform', 'translate(' + 0 + ', ' + -bbox.height / 2 + ')'); 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'); label.insert('rect', ':first-child');
return { shapeSvg, bbox, halfPadding, label }; 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, type: newNode.type,
padding: 15, //getConfig().flowchart.padding padding: 15, //getConfig().flowchart.padding
}; };
// if (useHtmlLabels) {
nodeData.centerLabel = true;
// }
if (parsedItem.note) { if (parsedItem.note) {
// Todo: set random id // Todo: set random id
@@ -240,6 +243,7 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) =>
shape: SHAPE_NOTE, shape: SHAPE_NOTE,
labelText: parsedItem.note.text, labelText: parsedItem.note.text,
classes: CSS_DIAGRAM_NOTE, classes: CSS_DIAGRAM_NOTE,
// useHtmlLabels: false,
style: '', // styles.style, style: '', // styles.style,
id: itemId + NOTE_ID + '-' + graphItemCount, id: itemId + NOTE_ID + '-' + graphItemCount,
domId: stateDomId(itemId, graphItemCount, NOTE), domId: stateDomId(itemId, graphItemCount, NOTE),