diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index d3468a5c2..326e3fc06 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -19,14 +19,16 @@
info below
- stateDiagram-v2
+ stateDiagram-v2
[*] --> S1
- state "Some long name\nwith an even longer next row" as S1
+ state "Some long name" as S1: The
-flowchart TD
- cr((Create Request)) --label this is--> server[REST Server]
+ stateDiagram-v2
+
+ [*] --> S1
+ state "Some long name" as S1: The description\nwith multiple lines
flowchart LR
diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js
index 93fea5bf9..309c505cb 100644
--- a/src/dagre-wrapper/nodes.js
+++ b/src/dagre-wrapper/nodes.js
@@ -306,15 +306,41 @@ const rectWithTitle = (parent, node) => {
dv.attr('width', bbox.width);
dv.attr('height', bbox.height);
}
+ logger.info('Text 2', text2);
const textRows = text2.slice(1, text2.length);
let titleBox = text.getBBox();
const descr = label
.node()
.appendChild(createLabel(textRows.join('
'), node.labelStyle, true, true));
- logger.info(descr);
+ if (getConfig().flowchart.htmlLabels) {
+ const div = descr.children[0];
+ const dv = select(descr);
+ bbox = div.getBoundingClientRect();
+ dv.attr('width', bbox.width);
+ dv.attr('height', bbox.height);
+ }
+ // bbox = label.getBBox();
+ // logger.info(descr);
const halfPadding = node.padding / 2;
- select(descr).attr('transform', 'translate( 0' + ', ' + (titleBox.height + halfPadding) + ')');
+ select(descr).attr(
+ 'transform',
+ 'translate( ' +
+ // (titleBox.width - bbox.width) / 2 +
+ (bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) +
+ ', ' +
+ (titleBox.height + halfPadding + 5) +
+ ')'
+ );
+ select(text).attr(
+ 'transform',
+ 'translate( ' +
+ // (titleBox.width - bbox.width) / 2 +
+ (bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) +
+ ', ' +
+ 0 +
+ ')'
+ );
// Get the size of the label
// Bounding box for title and text
diff --git a/src/diagrams/state/stateDb.js b/src/diagrams/state/stateDb.js
index b5609bd40..aec95f7c4 100644
--- a/src/diagrams/state/stateDb.js
+++ b/src/diagrams/state/stateDb.js
@@ -148,6 +148,12 @@ export const clear = function() {
root: newDoc()
};
currentDocument = documents.root;
+
+ currentDocument = documents.root;
+
+ startCnt = 0;
+ endCnt = 0; // eslint-disable-line
+ classes = [];
};
export const getState = function(id) {
@@ -213,7 +219,7 @@ const getDividerId = () => {
return 'divider-id-' + dividerCnt;
};
-const classes = [];
+let classes = [];
const getClasses = () => classes;
diff --git a/src/diagrams/state/stateRenderer-v2.js b/src/diagrams/state/stateRenderer-v2.js
index a5f26bd17..a58bfcc60 100644
--- a/src/diagrams/state/stateRenderer-v2.js
+++ b/src/diagrams/state/stateRenderer-v2.js
@@ -15,7 +15,7 @@ export const setConf = function(cnf) {
}
};
-const nodeDb = {};
+let nodeDb = {};
/**
* Returns the all the styles from classDef statements in the graph definition.
@@ -203,6 +203,7 @@ const setupDoc = (g, parent, doc, altFlag) => {
export const draw = function(text, id) {
logger.info('Drawing state diagram (v2)', id);
stateDb.clear();
+ nodeDb = {};
const parser = state.parser;
parser.yy = stateDb;