marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-31 02:44:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

#1295 Styling of composite states

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-03-28 17:34:23 +01:00
parent 3a6aa8f820
commit 5fbb69e7c5
5 changed files with 108 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
cypress/platform/current.html
View File

@@ -14,9 +14,6 @@
.mermaid2 {
display: none;
}
.mermaid-apa #pointEnd {
fill: green !important;
}
</style>
</head>
<body>
@@ -41,7 +38,7 @@
end
a-->id1
</div>
<div class="mermaid mermaid-apa" style="width: 100%; height: 20%;">
<div class="mermaid2 mermaid-apa" style="width: 100%; height: 20%;">
stateDiagram-v2
[*] --> Still
[*] --> Moving
@@ -56,6 +53,24 @@
Moving --> Still
Moving --> Crash
Crash --> [*]
</div>
<div class="mermaid" style="width: 100%; height: 100%;">
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
</div>
<div class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2

61
src/dagre-wrapper/clusters.js
View File

@@ -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 = {};

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

@@ -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,

13
src/diagrams/state/stateRenderer.js
View File

@@ -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;

19
src/themes/state.scss
View File

@@ -80,3 +80,22 @@ 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;
}