Skip to content

Commit

Permalink
Fixing issues with centering of labels for subgraphs and handling of …
Browse files Browse the repository at this point in the history 
…special characters in html strings
  • Loading branch information
@knsv
knsv committed Apr 4, 2023
1 parent 1841346 commit 1a56a18
Show file tree
Hide file tree
Showing 6 changed files with 127 additions and 43 deletions.
108 changes: 94 additions & 14 deletions cypress/platform/knsv2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,25 @@
</style>
</head>
<body>
<pre id="diagram" class="mermaid">
flowchart RL
subgraph "`one`"
a1 -- l1 --> a2
a1 -- l2 --> a2
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">
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
>
<pre id="diagram" class="mermaid2">
flowchart LR
A[A text that needs to be wrapped wraps to another line]
Expand All @@ -71,13 +90,18 @@
way`"]
</pre
>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
classDiagram-v2
note "I love this diagram!\nDo you love it?"
</pre
>
<pre id="diagram" class="mermaid2">
mindmap
root
Child3(A node with an icon and with a long text that wraps to keep the node size in check)
</pre
>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
%%{init: {"theme": "forest"} }%%
mindmap
id1[**Start2**<br/>end]
Expand All @@ -88,16 +112,16 @@
</pre>
<pre id="diagram" class="mermaid2">
mindmap
id1[`**Start2**
second line 😎 with long text that is wrapping to the next line`]
id2[`Child **with bold** text`]
id3[`Children of which some
is using *italic type of* text`]
id1["`**Start2**
second line 😎 with long text that is wrapping to the next line`"]
id2["`Child **with bold** text`"]
id3["`Children of which some
is using *italic type of* text`"]
id4[Child]
id5[`Child
id5["`Child
Row
and another
`]
`"]
</pre>
<pre id="diagram" class="mermaid2">
mindmap
Expand All @@ -108,7 +132,7 @@
शान्तिः سلام 和平 `"]

</pre>
<pre id="diagram" class="mermaid2">
<pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid
Expand All @@ -124,7 +148,62 @@
rom --> core2
end

subgraph amd[AMD Latte GPU]
subgraph amd["`**AMD** Latte GPU`"]
mem[Memory & I/O Bridge]
dram[DRAM Controller]
edram[32 MB EDRAM MEM1]
rom[512 B SEEPROM]

sata[SATA IF]
exi[EXI]

subgraph gx[GX]
sram[3 MB 1T-SRAM]
end

radeon[AMD Radeon R7xx GX2]

mem --- gx
mem --- radeon

rom --- mem

mem --- sata
mem --- exi

dram --- sata
dram --- exi
end

ddr3[2 GB DDR3 RAM MEM2]

mem --- ddr3
dram --- ddr3
edram --- ddr3

core1 --- mem

exi --- rtc
rtc{{rtc}}
</pre
>
<pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid
subgraph ibm[IBM Espresso CPU]
core0[IBM PowerPC Broadway Core 0]
core1[IBM PowerPC Broadway Core 1]
core2[IBM PowerPC Broadway Core 2]

rom[16 KB ROM]

core0 --- core2

rom --> core2
end

subgraph amd["`**AMD** Latte GPU`"]
mem[Memory & I/O Bridge]
dram[DRAM Controller]
edram[32 MB EDRAM MEM1]
Expand Down Expand Up @@ -163,8 +242,9 @@
rtc{{rtc}}
</pre
>

<br />
<pre id="diagram" class="mermaid2">
<pre id="diagram" class="mermaid">
flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid
subgraph ibm[IBM Espresso CPU]
Expand Down Expand Up @@ -220,7 +300,7 @@
>
<br />
&nbsp;
<pre id="diagram" class="mermaid2">
<pre id="diagram" class="mermaid">
flowchart LR
B1 --be be--x B2
B1 --bo bo--o B3
Expand Down Expand Up @@ -311,7 +391,7 @@
flowchart: {
// defaultRenderer: 'elk',
useMaxWidth: false,
htmlLabels: false,
htmlLabels: true,
// htmlLabels: true,
},
// htmlLabels: true,
Expand Down
19 changes: 13 additions & 6 deletions packages/mermaid/src/dagre-wrapper/clusters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,13 +63,20 @@ const rect = (parent, node) => {
.attr('width', width)
.attr('height', node.height + padding);

if (useHtmlLabels) {
label.attr(
'transform',
// This puts the labal on top of the box instead of inside it
'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
);
} else {
label.attr(
'transform',
// This puts the labal on top of the box instead of inside it
'translate(' + node.x + ', ' + (node.y - node.height / 2) + ')'
);
}
// Center the label
label.attr(
'transform',
// This puts the labal on top of the box instead of inside it
// 'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2 - bbox.height) + ')'
'translate(' + node.x + ', ' + (node.y - node.height / 2) + ')'
);

const rectBox = rect.node().getBBox();
node.width = rectBox.width;
Expand Down
2 changes: 1 addition & 1 deletion packages/mermaid/src/dagre-wrapper/shapes/note.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const note = (parent, node) => {
rect
.attr('rx', node.rx)
.attr('ry', node.ry)
.attr('x', -bbox.width / 2 - halfPadding)
.attr('x', -halfPadding)
.attr('y', -bbox.height / 2 - halfPadding)
.attr('width', bbox.width + node.padding)
.attr('height', bbox.height + node.padding);
Expand Down
5 changes: 4 additions & 1 deletion packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -934,9 +934,12 @@ const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, diagObj, depth) => {
.attr('width', node.width)
.attr('height', node.height);
const label = subgraphEl.insert('g').attr('class', 'label');
const labelCentering = getConfig().flowchart.htmlLabels ? node.labelData.width / 2 : 0;
label.attr(
'transform',
`translate(${node.labels[0].x + relX + node.x}, ${node.labels[0].y + relY + node.y})`
`translate(${node.labels[0].x + relX + node.x + labelCentering}, ${
node.labels[0].y + relY + node.y + 3
})`
);
label.node().appendChild(node.labelData.labelNode);

Expand Down
34 changes: 13 additions & 21 deletions packages/mermaid/src/rendering-util/createText.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,26 +152,8 @@ function updateTextContentAndStyles(tspan, wrappedLine) {
.attr('font-style', word.type === 'em' ? 'italic' : 'normal')
.attr('class', 'text-inner-tspan')
.attr('font-weight', word.type === 'strong' ? 'bold' : 'normal');
const special = [
'<',
'>',
'&',
'"',
"'",
'.',
',',
':',
';',
'!',
'?',
'(',
')',
'[',
']',
'{',
'}',
];
if (index !== 0 && special.includes(word.content)) {
const special = ['"', "'", '.', ',', ':', ';', '!', '?', '(', ')', '[', ']', '{', '}'];
if (index === 0) {
innerTspan.text(word.content);
} else {
innerTspan.text(' ' + word.content);
Expand Down Expand Up @@ -225,7 +207,17 @@ export const createText = (
return vertexNode;
} else {
const structuredText = markdownToLines(text);

const special = ['"', "'", '.', ',', ':', ';', '!', '?', '(', ')', '[', ']', '{', '}'];
let lastWord;
structuredText.forEach((line) => {
line.forEach((word) => {
if (special.includes(word.content) && lastWord) {
lastWord.content += word.content;
word.content = '';
}
lastWord = word;
});
});
const svgLabel = createFormattedText(width, el, structuredText, addSvgBackground);
return svgLabel;
}
Expand Down
2 changes: 2 additions & 0 deletions packages/mermaid/src/rendering-util/handle-markdown-text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ export function markdownToLines(markdown) {
currentLine++;
lines.push([]);
}

// textLine.split(/ (?=[^!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]+)/).forEach((word) => {
textLine.split(' ').forEach((word) => {
if (word) {
lines[currentLine].push({ content: word, type: parentType || 'normal' });
Expand Down

0 comments on commit 1a56a18

Please sign in to comment.