diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index a8920869a..a6031d6fc 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -26,6 +26,9 @@
state P {
state GPar {
state Parent {
+ state "Long state description" as TheLongChild
+ TheLongChild : New line
+ TheLongChild : Another line
TheLongChild
}
}
diff --git a/src/diagrams/state/shapes.js b/src/diagrams/state/shapes.js
index c50395064..b6ab93a76 100644
--- a/src/diagrams/state/shapes.js
+++ b/src/diagrams/state/shapes.js
@@ -73,7 +73,7 @@ export const drawDescrState = (g, stateDef) => {
const title = g
.append('text')
.attr('x', 2 * getConfig().state.padding)
- .attr('y', getConfig().state.textHeight + 1.5 * getConfig().state.padding)
+ .attr('y', getConfig().state.textHeight + 1.3 * getConfig().state.padding)
.attr('font-size', getConfig().state.fontSize)
.attr('class', 'state-title')
.text(stateDef.descriptions[0]);
@@ -87,7 +87,7 @@ export const drawDescrState = (g, stateDef) => {
.attr(
'y',
titleHeight +
- getConfig().state.padding * 0.2 +
+ getConfig().state.padding * 0.4 +
getConfig().state.dividerMargin +
getConfig().state.textHeight
)
@@ -135,7 +135,7 @@ export const drawDescrState = (g, stateDef) => {
* @param {*} g The d3 svg object for the substate to framed
* @param {*} stateDef The info about the
*/
-export const addTitleAndBox = (g, stateDef) => {
+export const addTitleAndBox = (g, stateDef, altBkg) => {
const pad = getConfig().state.padding;
const dblPad = 2 * getConfig().state.padding;
const orgBox = g.node().getBBox();
@@ -170,30 +170,19 @@ export const addTitleAndBox = (g, stateDef) => {
// descrLine.attr('x2', graphBox.width + getConfig().state.padding);
if (stateDef.doc) {
- // console.warn(
+ // cnsole.warn(
// stateDef.id,
- // ' orgWidth: ',
- // orgWidth,
- // ' adjusted orgWidth: ',
- // orgWidth - dblPad,
+ // 'orgX: ',
+ // orgX,
+ // 'width: ',
+ // width,
+ // 'titleWidth: ',
// titleWidth,
- // stateDef.doc
+ // 'orgWidth: ',
+ // orgWidth,
+ // 'width',
+ // width
// );
- // startX = orgX - (orgWidth - width) / 2 - pad;
- // console.warn(' orgX: ', orgX, graphBox.x);
- console.warn(
- stateDef.id,
- 'orgX: ',
- orgX,
- 'width: ',
- width,
- 'titleWidth: ',
- titleWidth,
- 'orgWidth: ',
- orgWidth,
- 'width',
- width
- );
}
startX = orgX - pad;
@@ -202,23 +191,23 @@ export const addTitleAndBox = (g, stateDef) => {
// startX = orgX + (orgWidth - titleWidth) / 2;
}
if (Math.abs(orgX - graphBox.x) < pad) {
- console.warn('resetting startX', startX);
if (titleWidth > orgWidth) {
startX = orgX - (titleWidth - orgWidth) / 2;
}
}
- console.warn('startX', startX);
+
+ const lineY = 1 - getConfig().state.textHeight;
// // White color
- // g.insert('rect', ':first-child')
- // .attr('x', graphBox.x)
- // .attr('y', lineY)
- // .attr('class', 'composit')
- // .attr('width', graphBox.width + getConfig().state.padding)
- // .attr(
- // 'height',
- // graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1
- // )
- // .attr('rx', '0');
+ g.insert('rect', ':first-child')
+ .attr('x', startX)
+ .attr('y', lineY)
+ .attr('class', altBkg ? 'alt-composit' : 'composit')
+ .attr('width', width)
+ .attr(
+ 'height',
+ graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1
+ )
+ .attr('rx', '0');
title.attr('x', startX + pad);
// if (titleWidth <= orgWidth) title.attr('x', startX + width / 2 - pad / 2);
diff --git a/src/diagrams/state/stateRenderer.js b/src/diagrams/state/stateRenderer.js
index d998b1f77..4b152fe84 100644
--- a/src/diagrams/state/stateRenderer.js
+++ b/src/diagrams/state/stateRenderer.js
@@ -12,33 +12,12 @@ parser.yy = stateDb;
// TODO Move conf object to main conf in mermaidAPI
let conf;
-// {
-// // Used
-// padding: 5,
-// // Font size factor, this is used to guess the width of the edges labels before rendering by dagre
-// // layout. This might need updating if/when switching font
-// fontSizeFactor: 5.02,
-// labelHeight: 16,
-// edgeLengthFactor: '20',
-// compositTitleSize: 35
-// };
const transformationLog = {};
export const setConf = function() {};
// Todo optimize
-// const getGraphId = function(label) {
-// const keys = idCache.keys();
-
-// for (let i = 0; i < keys.length; i++) {
-// if (idCache.get(keys[i]).label === label) {
-// return keys[i];
-// }
-// }
-
-// return undefined;
-// };
/**
* Setup arrow head and define the marker. The result is appended to the svg.
@@ -68,11 +47,11 @@ export const draw = function(text, id) {
parser.parse(text);
logger.debug('Rendering diagram ' + text);
- // /// / Fetch the default direction, use TD if none was found
+ // Fetch the default direction, use TD if none was found
const diagram = d3.select(`[id='${id}']`);
insertMarkers(diagram);
- // // Layout graph, Create a new directed graph
+ // Layout graph, Create a new directed graph
const graph = new graphlib.Graph({
multigraph: false,
compound: true,
@@ -81,13 +60,13 @@ export const draw = function(text, id) {
// ranksep: '20'
});
- // // Default to assigning a new object as a label for each new edge.
+ // Default to assigning a new object as a label for each new edge.
graph.setDefaultEdgeLabel(function() {
return {};
});
const rootDoc = stateDb.getRootDoc();
- renderDoc(rootDoc, diagram);
+ renderDoc(rootDoc, diagram, undefined, false);
const padding = conf.padding;
const bounds = diagram.node().getBBox();
@@ -100,7 +79,7 @@ export const draw = function(text, id) {
// diagram.attr('height', height);
// Zoom in a bit
- diagram.attr('width', width * 2);
+ diagram.attr('width', width * 1.75);
// diagram.attr('height', bounds.height * 3 + conf.padding * 2);
diagram.attr(
'viewBox',
@@ -128,7 +107,7 @@ const getRows = s => {
return str.split('#br#');
};
-const renderDoc = (doc, diagram, parentId) => {
+const renderDoc = (doc, diagram, parentId, altBkg) => {
// // Layout graph, Create a new directed graph
const graph = new graphlib.Graph({
compound: true
@@ -142,7 +121,7 @@ const renderDoc = (doc, diagram, parentId) => {
break;
}
}
- console.warn('doc', doc, edgeFreeDoc);
+
// Set an object for the graph label
if (parentId)
graph.setGraph({
@@ -198,11 +177,11 @@ const renderDoc = (doc, diagram, parentId) => {
.append('g')
.attr('id', stateDef.id)
.attr('class', 'stateGroup');
- node = renderDoc(stateDef.doc, sub, stateDef.id);
+ node = renderDoc(stateDef.doc, sub, stateDef.id, !altBkg);
if (first) {
// first = false;
- sub = addTitleAndBox(sub, stateDef);
+ sub = addTitleAndBox(sub, stateDef, altBkg);
let boxBounds = sub.node().getBBox();
node.width = boxBounds.width;
node.height = boxBounds.height + conf.padding / 2;
diff --git a/src/themes/state.scss b/src/themes/state.scss
index e2c630476..3f0fda551 100644
--- a/src/themes/state.scss
+++ b/src/themes/state.scss
@@ -37,6 +37,11 @@ g.stateGroup line {
border-bottom: 1px
}
+.stateGroup .alt-composit {
+ fill: #e0e0e0;
+ border-bottom: 1px
+}
+
.state-note {
stroke: $noteBorderColor;
fill: $noteBkgColor;