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

#1269 Work around for inaccurate bounding box results in Safari. Fix for multiple lines

This commit is contained in:
Knut Sveidqvist 2020-02-26 20:53:08 +01:00
parent dd5e6c18d5
commit 0ee9c69ddf
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
cypress/platform/current.html
View File

@ -21,7 +21,9 @@
<div style="display: flex;width: 100%; height: 100%">
<div class="mermaid" style="width: 100%; height: 100%">
stateDiagram
A --> B : this text causes the rendering bug
O --> A : ong line using<br/>should work<br/>should work<br/>should work
A --> B : ong line using<br/>should work
B --> C : Sing line
</div>
</div>

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

@ -457,6 +457,9 @@ export const drawEdge = function(elem, path, relation) {
let titleHeight = 0;
const titleRows = [];
let maxWidth = 0;
let minX = 0;
let totalHeight = 0;
for (let i = 0; i <= rows.length; i++) {
const title = label
.append('text')
@ -465,8 +468,11 @@ export const drawEdge = function(elem, path, relation) {
.attr('x', x)
.attr('y', y + titleHeight);
const boundstmp = label.node().getBBox();
logger.info(boundstmp, x, y + titleHeight);
const boundstmp = title.node().getBBox();
maxWidth = Math.max(maxWidth, boundstmp.width);
minX = Math.min(minX, boundstmp.x);
logger.info(boundstmp.x, x, y + titleHeight);
if (titleHeight === 0) {
const titleBox = title.node().getBBox();
@ -476,20 +482,23 @@ export const drawEdge = function(elem, path, relation) {
titleRows.push(title);
}
let boxHeight = titleHeight * rows.length;
if (rows.length > 1) {
const heightAdj = rows.length * titleHeight * 0.25;
const heightAdj = (rows.length - 1) * titleHeight * 0.5;
titleRows.forEach((title, i) => title.attr('y', y + i * titleHeight - heightAdj));
boxHeight = titleHeight * rows.length;
}
const bounds = label.node().getBBox();
label
.insert('rect', ':first-child')
.attr('class', 'box')
.attr('x', bounds.x - getConfig().state.padding / 2)
.attr('y', y - titleHeight)
.attr('width', bounds.width + getConfig().state.padding)
.attr('height', titleHeight + getConfig().state.padding);
.attr('x', x - maxWidth / 2 - getConfig().state.padding / 2)
.attr('y', y - boxHeight / 2 - getConfig().state.padding / 2 - 3.5)
.attr('width', maxWidth + getConfig().state.padding)
.attr('height', boxHeight + getConfig().state.padding);
logger.info(bounds);