From dd5e6c18d56da799e92d1b4c965f3465fcd6d6be Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 26 Feb 2020 20:01:53 +0100 Subject: [PATCH 1/3] #1269 Work around for inaccurate bounding box results in Safari. --- cypress/platform/current.html | 11 ++--------- src/diagrams/state/shapes.js | 11 +++++++++-- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/cypress/platform/current.html b/cypress/platform/current.html index f854ddcb09..4cf141e85e 100644 --- a/cypress/platform/current.html +++ b/cypress/platform/current.html @@ -20,15 +20,8 @@

info below

- sequenceDiagram - Alice->>John: Hello John, how are you? - loop Healthcheck - John->>John: Fight against hypochondria - end - Note right of John: Rational thoughts! - John-->>Alice: Great! - John->>Bob: How about you? - Bob-->>John: Jolly good! + stateDiagram + A --> B : this text causes the rendering bug
diff --git a/src/diagrams/state/shapes.js b/src/diagrams/state/shapes.js index dcd5cf21f1..a841e64eda 100644 --- a/src/diagrams/state/shapes.js +++ b/src/diagrams/state/shapes.js @@ -4,6 +4,7 @@ import stateDb from './stateDb'; import utils from '../../utils'; import common from '../common/common'; import { getConfig } from '../../config'; +import { logger } from '../../logger'; // let conf; @@ -464,9 +465,13 @@ 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); + if (titleHeight === 0) { const titleBox = title.node().getBBox(); titleHeight = titleBox.height; + logger.info('Title height', titleHeight, y); } titleRows.push(title); } @@ -482,9 +487,11 @@ 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', y - titleHeight) .attr('width', bounds.width + getConfig().state.padding) - .attr('height', bounds.height + getConfig().state.padding); + .attr('height', titleHeight + getConfig().state.padding); + + logger.info(bounds); //label.attr('transform', '0 -' + (bounds.y / 2)); From 0ee9c69ddf46118038f9bbc4bf64b97ac0000f6e Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 26 Feb 2020 20:53:08 +0100 Subject: [PATCH 2/3] #1269 Work around for inaccurate bounding box results in Safari. Fix for multiple lines --- cypress/platform/current.html | 4 +++- src/diagrams/state/shapes.js | 23 ++++++++++++++++------- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/cypress/platform/current.html b/cypress/platform/current.html index 4cf141e85e..3ed964921d 100644 --- a/cypress/platform/current.html +++ b/cypress/platform/current.html @@ -21,7 +21,9 @@

info below

stateDiagram - A --> B : this text causes the rendering bug + O --> A : ong line using
should work
should work
should work + A --> B : ong line using
should work + B --> C : Sing line
diff --git a/src/diagrams/state/shapes.js b/src/diagrams/state/shapes.js index a841e64eda..c335711ec1 100644 --- a/src/diagrams/state/shapes.js +++ b/src/diagrams/state/shapes.js @@ -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); From 756927b6f861eb0511e1c3f5b4a780d5658883ea Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sat, 29 Feb 2020 15:39:21 +0100 Subject: [PATCH 3/3] #1269 Fix for build issue - lint --- src/diagrams/state/shapes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/diagrams/state/shapes.js b/src/diagrams/state/shapes.js index c335711ec1..a436e23b3c 100644 --- a/src/diagrams/state/shapes.js +++ b/src/diagrams/state/shapes.js @@ -459,7 +459,7 @@ export const drawEdge = function(elem, path, relation) { const titleRows = []; let maxWidth = 0; let minX = 0; - let totalHeight = 0; + for (let i = 0; i <= rows.length; i++) { const title = label .append('text')