+
stateDiagram-v2
[*] --> Still
[*] --> Moving
@@ -57,6 +54,24 @@
Moving --> Crash
Crash --> [*]
+
+ stateDiagram-v2
+ [*] --> First
+
+ state First {
+ [*] --> Second
+
+ state Second {
+ [*] --> second
+ second --> Third
+
+ state Third {
+ [*] --> third
+ third --> [*]
+ }
+ }
+ }
+
stateDiagram-v2
[*]-->TV
diff --git a/src/dagre-wrapper/clusters.js b/src/dagre-wrapper/clusters.js
index 4d0322192..813d2dc6e 100644
--- a/src/dagre-wrapper/clusters.js
+++ b/src/dagre-wrapper/clusters.js
@@ -55,7 +55,66 @@ const rect = (parent, node) => {
return shapeSvg;
};
-const shapes = { rect };
+const roundedWithTitle = (parent, node) => {
+ // Add outer g element
+ const shapeSvg = parent
+ .insert('g')
+ .attr('class', node.class)
+ .attr('id', node.id);
+
+ // add the rect
+ const rect = shapeSvg.insert('rect', ':first-child');
+
+ // Create the label and insert it after the rect
+ const label = shapeSvg.insert('g').attr('class', 'cluster-label');
+ const innerRect = shapeSvg.append('rect');
+
+ const text = label.node().appendChild(createLabel(node.labelText, node.labelStyle));
+
+ // Get the size of the label
+ const bbox = text.getBBox();
+
+ const padding = 0 * node.padding;
+ const halfPadding = padding / 2;
+
+ // center the rect around its coordinate
+ rect
+ .attr('class', 'outer')
+ .attr('x', node.x - node.width / 2 - halfPadding)
+ .attr('y', node.y - node.height / 2 - halfPadding)
+ .attr('width', node.width + padding)
+ .attr('height', node.height + padding);
+ innerRect
+ .attr('class', 'inner')
+ .attr('x', node.x - node.width / 2 - halfPadding)
+ .attr('y', node.y - node.height / 2 - halfPadding + bbox.height - 1)
+ .attr('width', node.width + padding)
+ .attr('height', node.height + padding - bbox.height - 3);
+
+ // logger.info('bbox', bbox.width, node.x, node.width);
+ // Center the label
+ // label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')');
+ label.attr(
+ 'transform',
+ 'translate(' +
+ (node.x - bbox.width / 2) +
+ ', ' +
+ (node.y - node.height / 2 - node.padding / 3 + 3) +
+ ')'
+ );
+
+ const rectBox = rect.node().getBBox();
+ node.width = rectBox.width;
+ node.height = rectBox.height;
+
+ node.intersect = function(point) {
+ return intersectRect(node, point);
+ };
+
+ return shapeSvg;
+};
+
+const shapes = { rect, roundedWithTitle };
let clusterElems = {};
diff --git a/src/diagrams/state/stateRenderer-v2.js b/src/diagrams/state/stateRenderer-v2.js
index 622b878f0..3418df584 100644
--- a/src/diagrams/state/stateRenderer-v2.js
+++ b/src/diagrams/state/stateRenderer-v2.js
@@ -32,7 +32,7 @@ export const getClasses = function(text) {
return stateDb.getClasses();
};
-const setupNode = (g, parent, node) => {
+const setupNode = (g, parent, node, altFlag) => {
// Add the node
if (node.id !== 'root') {
let shape = 'rect';
@@ -63,6 +63,7 @@ const setupNode = (g, parent, node) => {
if (!nodeDb[node.id].type && node.doc) {
logger.info('Setting cluser for ', node.id);
nodeDb[node.id].type = 'group';
+ nodeDb[node.id].shape = 'roundedWithTitle';
}
const nodeData = {
@@ -71,9 +72,7 @@ const setupNode = (g, parent, node) => {
shape: nodeDb[node.id].shape,
label: node.id,
labelText: nodeDb[node.id].description,
- rx: 5,
- ry: 5,
- class: 'default', //classStr,
+ class: altFlag ? 'statediagram-cluster statediagram-cluster-alt' : 'statediagram-cluster', //classStr,
style: '', //styles.style,
id: node.id,
type: nodeDb[node.id].type,
@@ -91,18 +90,18 @@ const setupNode = (g, parent, node) => {
}
if (node.doc) {
logger.trace('Adding nodes children ');
- setupDoc(g, node, node.doc);
+ setupDoc(g, node, node.doc, !altFlag);
}
};
let cnt = 0;
-const setupDoc = (g, parent, doc) => {
+const setupDoc = (g, parent, doc, altFlag) => {
logger.trace('items', doc);
doc.forEach(item => {
if (item.stmt === 'state' || item.stmt === 'default') {
- setupNode(g, parent, item, true);
+ setupNode(g, parent, item, altFlag);
} else if (item.stmt === 'relation') {
- setupNode(g, parent, item.state1, true);
- setupNode(g, parent, item.state2);
+ setupNode(g, parent, item.state1, altFlag);
+ setupNode(g, parent, item.state2, altFlag);
const edgeData = {
arrowhead: 'normal',
arrowType: 'arrow_barb',
@@ -143,7 +142,7 @@ export const draw = function(text, id) {
// Fetch the default direction, use TD if none was found
let dir = stateDb.getDirection();
if (typeof dir === 'undefined') {
- dir = 'TD';
+ dir = 'LR';
}
const conf = getConfig().state;
@@ -156,7 +155,7 @@ export const draw = function(text, id) {
compound: true
})
.setGraph({
- rankdir: dir,
+ rankdir: 'LR',
nodesep: nodeSpacing,
ranksep: rankSpacing,
marginx: 8,
diff --git a/src/diagrams/state/stateRenderer.js b/src/diagrams/state/stateRenderer.js
index e11fbba79..405bb358a 100644
--- a/src/diagrams/state/stateRenderer.js
+++ b/src/diagrams/state/stateRenderer.js
@@ -75,10 +75,6 @@ export const draw = function(text, id) {
const width = bounds.width + padding * 2;
const height = bounds.height + padding * 2;
- // diagram.attr('height', '100%');
- // diagram.attr('style', `width: ${bounds.width * 3 + conf.padding * 2};`);
- // diagram.attr('height', height);
-
// Zoom in a bit
diagram.attr('width', width * 1.75);
// diagram.attr('height', bounds.height * 3 + conf.padding * 2);
@@ -86,15 +82,6 @@ export const draw = function(text, id) {
'viewBox',
`${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height
);
- // diagram.attr('transform', `translate(, 0)`);
-
- // diagram.attr(
- // 'viewBox',
- // `${conf.padding * -1} ${conf.padding * -1} ` +
- // (bounds.width * 1.5 + conf.padding * 2) +
- // ' ' +
- // (bounds.height + conf.padding * 5)
- // );
};
const getLabelWidth = text => {
return text ? text.length * conf.fontSizeFactor : 1;
diff --git a/src/themes/state.scss b/src/themes/state.scss
index 8c142d794..1e0bcc92d 100644
--- a/src/themes/state.scss
+++ b/src/themes/state.scss
@@ -79,4 +79,23 @@ g.stateGroup line {
}
#statediagram-barbEnd {
fill: $nodeBorder
+}
+
+.statediagram-cluster rect {
+ fill: $nodeBkg;
+ stroke: $nodeBorder;
+ stroke-width: 1px;
+ rx: 5px;
+ ry: 5px;
+}
+.statediagram-cluster.statediagram-cluster .inner {
+ fill: white;
+}
+.statediagram-cluster.statediagram-cluster-alt .inner {
+ fill: #e0e0e0;
+}
+
+.statediagram-cluster .inner {
+ rx:0;
+ ry:0;
}
\ No newline at end of file