From dd5e6c18d56da799e92d1b4c965f3465fcd6d6be Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 26 Feb 2020 20:01:53 +0100 Subject: [PATCH 1/5] #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 f854ddcb0..4cf141e85 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 dcd5cf21f..a841e64ed 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/5] #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 4cf141e85..3ed964921 100644 --- a/cypress/platform/current.html +++ b/cypress/platform/current.html @@ -21,7 +21,9 @@
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 a841e64ed..c335711ec 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/5] #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 c335711ec..a436e23b3 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') From 7bc82365c63d391bc1a831b82c98b959aef9784c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20W=C3=B6hrl?= Date: Sat, 29 Feb 2020 20:55:20 +0100 Subject: [PATCH 4/5] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 781cee7e1..83fe09ec7 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ For more information and help in getting started, please view our [documentation With version 8.4 class diagrams have got some new features, bug fixes and documentation. Another new feature in 8.4 is the new diagram type, state diagrams. -![Image show the two new diagram types](.docs/img/new-diagrams.png) +![Image show the two new diagram types](./docs/img/new-diagrams.png) ## Special note regarding version 8.2 From 94ace2348f504c36f95fc6ced2051cca988fc83d Mon Sep 17 00:00:00 2001 From: GDFaber Date: Sat, 29 Feb 2020 21:32:20 +0100 Subject: [PATCH 5/5] Revert "Multiline comments" --- src/diagrams/class/parser/classDiagram.jison | 3 +-- src/diagrams/flowchart/parser/flow.jison | 3 +-- src/diagrams/gantt/parser/gantt.jison | 1 - src/diagrams/git/parser/gitGraph.jison | 1 - src/diagrams/pie/parser/pie.jison | 3 +-- src/diagrams/sequence/parser/sequenceDiagram.jison | 1 - src/diagrams/state/parser/stateDiagram.jison | 5 ++--- 7 files changed, 5 insertions(+), 12 deletions(-) diff --git a/src/diagrams/class/parser/classDiagram.jison b/src/diagrams/class/parser/classDiagram.jison index f3da76a6d..12e9a2564 100644 --- a/src/diagrams/class/parser/classDiagram.jison +++ b/src/diagrams/class/parser/classDiagram.jison @@ -9,8 +9,7 @@ %x string generic struct %% -\%\%[^\n]*\n* /* skip comments */ -\%\%\*((.|\n)*)\*\%\% /* multiline skip comments */ +\%\%[^\n]*\n* /* do nothing */ \n+ return 'NEWLINE'; \s+ /* skip whitespace */ "classDiagram" return 'CLASS_DIAGRAM'; diff --git a/src/diagrams/flowchart/parser/flow.jison b/src/diagrams/flowchart/parser/flow.jison index f5e184800..f867e5713 100644 --- a/src/diagrams/flowchart/parser/flow.jison +++ b/src/diagrams/flowchart/parser/flow.jison @@ -10,8 +10,7 @@ %x dir %x vertex %% -\%\%[^\n]*\n* /* skip comments */ -\%\%\*((.|\n)*)\*\%\% /* multiline skip comments */ +\%\%[^\n]*\n* /* do nothing */ ["] this.begin("string"); ["] this.popState(); [^"]* return "STR"; diff --git a/src/diagrams/gantt/parser/gantt.jison b/src/diagrams/gantt/parser/gantt.jison index 24c6bf00f..ea76b59a1 100644 --- a/src/diagrams/gantt/parser/gantt.jison +++ b/src/diagrams/gantt/parser/gantt.jison @@ -17,7 +17,6 @@ \s+ /* skip whitespace */ \#[^\n]* /* skip comments */ \%%[^\n]* /* skip comments */ -\%\%\*((.|\n)*)\*\%\% /* multiline skip comments */ /* ---interactivity command--- diff --git a/src/diagrams/git/parser/gitGraph.jison b/src/diagrams/git/parser/gitGraph.jison index 3958f4e57..e675a56e4 100644 --- a/src/diagrams/git/parser/gitGraph.jison +++ b/src/diagrams/git/parser/gitGraph.jison @@ -18,7 +18,6 @@ \s+ /* skip all whitespace */ \#[^\n]* /* skip comments */ \%%[^\n]* /* skip comments */ -\%\%\*((.|\n)*)\*\%\% /* multiline skip comments */ "gitGraph" return 'GG'; "commit" return 'COMMIT'; "branch" return 'BRANCH'; diff --git a/src/diagrams/pie/parser/pie.jison b/src/diagrams/pie/parser/pie.jison index 96a555fbc..2cc4045ff 100644 --- a/src/diagrams/pie/parser/pie.jison +++ b/src/diagrams/pie/parser/pie.jison @@ -12,8 +12,7 @@ %} %% -\%\%[^\n]* /* skip comments */ -\%\%\*((.|\n)*)\*\%\% /* multiline skip comments */ +\%\%[^\n]* /* do nothing */ \s+ /* skip whitespace */ "pie" return 'pie' ; [\s\n\r]+ return 'NL' ; diff --git a/src/diagrams/sequence/parser/sequenceDiagram.jison b/src/diagrams/sequence/parser/sequenceDiagram.jison index 497a45bb6..520978c05 100644 --- a/src/diagrams/sequence/parser/sequenceDiagram.jison +++ b/src/diagrams/sequence/parser/sequenceDiagram.jison @@ -26,7 +26,6 @@ ((?!\n)\s)+ /* skip same-line whitespace */ \#[^\n]* /* skip comments */ \%%[^\n]* /* skip comments */ -\%\%\*((.|\n)*)\*\%\% /* multiline skip comments */ "participant" { this.begin('ID'); return 'participant'; } [^\->:\n,;]+?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; } "as" { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; } diff --git a/src/diagrams/state/parser/stateDiagram.jison b/src/diagrams/state/parser/stateDiagram.jison index 0afb0f9fa..49d1200c8 100644 --- a/src/diagrams/state/parser/stateDiagram.jison +++ b/src/diagrams/state/parser/stateDiagram.jison @@ -33,11 +33,10 @@ %% [\n]+ return 'NL'; -\s+ /* skip all whitespace */ +\s+ /* skip all whitespace */ ((?!\n)\s)+ /* skip same-line whitespace */ \#[^\n]* /* skip comments */ -\%%[^\n]* /* skip comments */ -\%\%\*((.|\n)*)\*\%\% /* multiline skip comments */ +\%%[^\n]* /* skip comments */ "scale"\s+ { this.pushState('SCALE'); /* console.log('Got scale', yytext);*/ return 'scale'; } \d+ return 'WIDTH';