mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

#1110 Fix for transparent rect under edge title, was misaligned

This commit is contained in:
Knut Sveidqvist 2019-12-04 18:20:28 +01:00
parent 94e768dd01
commit 5c71a3c85b
2 changed files with 10 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
cypress/platform/current.html
View File

@ -10,61 +10,14 @@
<h1>info below</h1>
<div style="display: flex;">
<div class="mermaid">stateDiagram
state P {
Child
}
[*] --> State1
State1 --> State2 : Transition 1
State1 --> State3 : Transition 2
State1 --> State4 : Transition 3
State1 --> State5 : Transition 4
State2 --> State3 : Transition 5
State1 --> [*]
</div>
<div class="mermaid">stateDiagram
state P {
state Par {
Child
}
}
</div>
<div class="mermaid">stateDiagram
state P {
state GPar {
state Parent {
state "Long state description" as TheLongChild
TheLongChild : New line
TheLongChild : Another line
TheLongChild
}
}
}
</div>
</div>
<div style="display: flex;">
<div class="mermaid">stateDiagram
state Parent {
C
}
</div>
<div class="mermaid">stateDiagram
state PilotCockpit {
state Parent {
C
}
}
</div>
<div class="mermaid">stateDiagram
state Pilot {
state GParent {
state Parent1 {
Child
}
state Parent2 {
Child2
}
}
state Parent3 {
Child4
}
}
</div>
</div>
<script src="./mermaid.js"></script>
<script>

8
src/diagrams/state/shapes.js
View File

@ -188,7 +188,6 @@ export const addTitleAndBox = (g, stateDef, altBkg) => {
startX = orgX - pad;
if (titleWidth > orgWidth) {
startX = (orgWidth - width) / 2 + pad;
// startX = orgX + (orgWidth - titleWidth) / 2;
}
if (Math.abs(orgX - graphBox.x) < pad) {
if (titleWidth > orgWidth) {
@ -197,7 +196,7 @@ export const addTitleAndBox = (g, stateDef, altBkg) => {
}
const lineY = 1 - getConfig().state.textHeight;
// // White color
// White color
g.insert('rect', ':first-child')
.attr('x', startX)
.attr('y', lineY)
@ -210,10 +209,9 @@ export const addTitleAndBox = (g, stateDef, altBkg) => {
.attr('rx', '0');
title.attr('x', startX + pad);
// if (titleWidth <= orgWidth) title.attr('x', startX + width / 2 - pad / 2);
if (titleWidth <= orgWidth) title.attr('x', orgX + (width - dblPad) / 2 - titleWidth / 2 + pad);
// // Title background
// Title background
g.insert('rect', ':first-child')
.attr('x', startX)
.attr(
@ -489,7 +487,7 @@ export const drawEdge = function(elem, path, relation) {
.insert('rect', ':first-child')
.attr('class', 'box')
.attr('x', bounds.x - getConfig().state.padding / 2)
.attr('y', bounds.y + getConfig().state.padding / 2)
.attr('y', bounds.y - getConfig().state.padding / 2)
.attr('width', bounds.width + getConfig().state.padding)
.attr('height', bounds.height + getConfig().state.padding);