marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-23 09:20:03 +02: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

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;