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

Merge pull request #1285 from mermaid-js/bug/1269_fix_label_background_on_safari

Browse Source 
Bug/1269 fix label background on safari
This commit is contained in:
Knut Sveidqvist
2020-02-29 15:49:23 +01:00
committed by GitHub
parent df6c5dd22e 756927b6f8
commit de11dc43ab
2 changed files with 25 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
cypress/platform/current.html
View File

@@ -20,15 +20,10 @@
<h1>info below</h1> <h1>info below</h1>
<div style="display: flex;width: 100%; height: 100%"> <div style="display: flex;width: 100%; height: 100%">
<div class="mermaid" style="width: 100%; height: 100%"> <div class="mermaid" style="width: 100%; height: 100%">
sequenceDiagram stateDiagram
Alice->>John: Hello John, how are you? O --> A : ong line using<br/>should work<br/>should work<br/>should work
loop Healthcheck A --> B : ong line using<br/>should work
John->>John: Fight against hypochondria B --> C : Sing line
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
</div> </div>
</div> </div>

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

@@ -4,6 +4,7 @@ import stateDb from './stateDb';
import utils from '../../utils'; import utils from '../../utils';
import common from '../common/common'; import common from '../common/common';
import { getConfig } from '../../config'; import { getConfig } from '../../config';
import { logger } from '../../logger';
// let conf; // let conf;
@@ -456,6 +457,9 @@ export const drawEdge = function(elem, path, relation) {
let titleHeight = 0; let titleHeight = 0;
const titleRows = []; const titleRows = [];
let maxWidth = 0;
let minX = 0;
for (let i = 0; i <= rows.length; i++) { for (let i = 0; i <= rows.length; i++) {
const title = label const title = label
.append('text') .append('text')
@@ -464,27 +468,39 @@ export const drawEdge = function(elem, path, relation) {
.attr('x', x) .attr('x', x)
.attr('y', y + titleHeight); .attr('y', 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) { if (titleHeight === 0) {
const titleBox = title.node().getBBox(); const titleBox = title.node().getBBox();
titleHeight = titleBox.height; titleHeight = titleBox.height;
logger.info('Title height', titleHeight, y);
} }
titleRows.push(title); titleRows.push(title);
} }
let boxHeight = titleHeight * rows.length;
if (rows.length > 1) { 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)); titleRows.forEach((title, i) => title.attr('y', y + i * titleHeight - heightAdj));
boxHeight = titleHeight * rows.length;
} }
const bounds = label.node().getBBox(); const bounds = label.node().getBBox();
label label
.insert('rect', ':first-child') .insert('rect', ':first-child')
.attr('class', 'box') .attr('class', 'box')
.attr('x', bounds.x - getConfig().state.padding / 2) .attr('x', x - maxWidth / 2 - getConfig().state.padding / 2)
.attr('y', bounds.y - getConfig().state.padding / 2) .attr('y', y - boxHeight / 2 - getConfig().state.padding / 2 - 3.5)
.attr('width', bounds.width + getConfig().state.padding) .attr('width', maxWidth + getConfig().state.padding)
.attr('height', bounds.height + getConfig().state.padding); .attr('height', boxHeight + getConfig().state.padding);
logger.info(bounds);
//label.attr('transform', '0 -' + (bounds.y / 2)); //label.attr('transform', '0 -' + (bounds.y / 2));