marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-24 09:49:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

61
cypress/platform/current.html
View File

@@ -10,60 +10,13 @@
<h1>info below</h1> <h1>info below</h1>
<div style="display: flex;"> <div style="display: flex;">
<div class="mermaid">stateDiagram <div class="mermaid">stateDiagram
state P { [*] --> State1
Child State1 --> State2 : Transition 1
} State1 --> State3 : Transition 2
</div> State1 --> State4 : Transition 3
State1 --> State5 : Transition 4
<div class="mermaid">stateDiagram State2 --> State3 : Transition 5
state P { State1 --> [*]
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>
</div> </div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>

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

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