GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-02-04 07:13:25 +08:00
Code Issues Projects Releases Wiki Activity

#1418 Fix for descriptions in states

Browse Source
This commit is contained in:
Knut Sveidqvist 2020-05-27 22:18:59 +02:00
parent 39ef0107ad
commit 8603cf89b0
4 changed files with 43 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
cypress/platform/current.html
View File

@ -19,14 +19,16 @@
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="mermaid" style="width: 100%; height: 20%;"> <div class="mermaid" style="width: 100%; height: 20%;">
stateDiagram-v2 stateDiagram-v2
[*] --> S1 [*] --> S1
state "Some long name\nwith an even longer next row" as S1 state "Some long name" as S1: The
</div> </div>
<div class="mermaid" style="width: 100%; height: 20%;"> <div class="mermaid" style="width: 100%; height: 20%;">
flowchart TD stateDiagram-v2
cr((Create Request)) --label this is--> server[REST Server]
[*] --> S1
state "Some long name" as S1: The description\nwith multiple lines
</div> </div>
<div class="mermaid2" style="width: 50%; height: 20%;"> <div class="mermaid2" style="width: 50%; height: 20%;">
flowchart LR flowchart LR

30
src/dagre-wrapper/nodes.js
View File

@ -306,15 +306,41 @@ const rectWithTitle = (parent, node) => {
dv.attr('width', bbox.width); dv.attr('width', bbox.width);
dv.attr('height', bbox.height); dv.attr('height', bbox.height);
} }
logger.info('Text 2', text2);
const textRows = text2.slice(1, text2.length); const textRows = text2.slice(1, text2.length);
let titleBox = text.getBBox(); let titleBox = text.getBBox();
const descr = label const descr = label
.node() .node()
.appendChild(createLabel(textRows.join('<br/>'), node.labelStyle, true, true)); .appendChild(createLabel(textRows.join('<br/>'), 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; 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 // Get the size of the label
// Bounding box for title and text // Bounding box for title and text

8
src/diagrams/state/stateDb.js
View File

@ -148,6 +148,12 @@ export const clear = function() {
root: newDoc() root: newDoc()
}; };
currentDocument = documents.root; currentDocument = documents.root;
currentDocument = documents.root;
startCnt = 0;
endCnt = 0; // eslint-disable-line
classes = [];
}; };
export const getState = function(id) { export const getState = function(id) {
@ -213,7 +219,7 @@ const getDividerId = () => {
return 'divider-id-' + dividerCnt; return 'divider-id-' + dividerCnt;
}; };
const classes = []; let classes = [];
const getClasses = () => classes; const getClasses = () => classes;

3
src/diagrams/state/stateRenderer-v2.js
View File

@ -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. * 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) { export const draw = function(text, id) {
logger.info('Drawing state diagram (v2)', id); logger.info('Drawing state diagram (v2)', id);
stateDb.clear(); stateDb.clear();
nodeDb = {};
const parser = state.parser; const parser = state.parser;
parser.yy = stateDb; parser.yy = stateDb;