#1223 Adding support for multiple transitions to a node from another node
This commit is contained in:
parent
0082c23a90
commit
4709195a1d
|
@ -319,7 +319,7 @@ describe('State diagram', () => {
|
|||
}
|
||||
);
|
||||
});
|
||||
it('Simplest compone state', () => {
|
||||
it('Simplest composit state', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
stateDiagram
|
||||
|
@ -332,5 +332,17 @@ describe('State diagram', () => {
|
|||
}
|
||||
);
|
||||
});
|
||||
it('should handle multiple arrows from one node to another', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
stateDiagram
|
||||
a --> b: Status
|
||||
a --> b: Stop
|
||||
`,
|
||||
{
|
||||
logLevel: 0,
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
@ -18,20 +18,16 @@
|
|||
<h1>info below</h1>
|
||||
<div style="display: flex;width: 100%; height: 100%">
|
||||
<div class="mermaid" style="width: 100%; height: 100%">
|
||||
graph TB
|
||||
A --> B
|
||||
A ==> C
|
||||
A .-> D
|
||||
A === E
|
||||
A -.- F
|
||||
D -- Hello --> a
|
||||
D-- text including R TD space --xb
|
||||
stateDiagram
|
||||
a --> b: Status
|
||||
a --> b: Stop
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
theme: 'dark',
|
||||
// theme: 'dark',
|
||||
// arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
|
|
|
@ -113,6 +113,7 @@ export const addRelation = function(_id1, _id2, title) {
|
|||
}
|
||||
addState(id1, type1);
|
||||
addState(id2, type2);
|
||||
console.info('Adding relation', { id1, id2, title });
|
||||
currentDocument.relations.push({ id1, id2, title });
|
||||
};
|
||||
|
||||
|
|
|
@ -53,7 +53,7 @@ export const draw = function(text, id) {
|
|||
|
||||
// Layout graph, Create a new directed graph
|
||||
const graph = new graphlib.Graph({
|
||||
multigraph: false,
|
||||
multigraph: true,
|
||||
compound: true,
|
||||
// acyclicer: 'greedy',
|
||||
rankdir: 'RL'
|
||||
|
@ -110,7 +110,8 @@ const getRows = s => {
|
|||
const renderDoc = (doc, diagram, parentId, altBkg) => {
|
||||
// // Layout graph, Create a new directed graph
|
||||
const graph = new graphlib.Graph({
|
||||
compound: true
|
||||
compound: true,
|
||||
multigraph: true
|
||||
});
|
||||
|
||||
let i;
|
||||
|
@ -126,28 +127,29 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
|
|||
if (parentId)
|
||||
graph.setGraph({
|
||||
rankdir: 'LR',
|
||||
// multigraph: false,
|
||||
multigraph: true,
|
||||
compound: true,
|
||||
// acyclicer: 'greedy',
|
||||
ranker: 'tight-tree',
|
||||
ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,
|
||||
nodeSep: edgeFreeDoc ? 1 : 50
|
||||
// isMultiGraph: false
|
||||
nodeSep: edgeFreeDoc ? 1 : 50,
|
||||
isMultiGraph: true
|
||||
// ranksep: 5,
|
||||
// nodesep: 1
|
||||
});
|
||||
else {
|
||||
graph.setGraph({
|
||||
rankdir: 'TB',
|
||||
multigraph: true,
|
||||
compound: true,
|
||||
// isCompound: true,
|
||||
// acyclicer: 'greedy',
|
||||
// ranker: 'longest-path'
|
||||
ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,
|
||||
nodeSep: edgeFreeDoc ? 1 : 50,
|
||||
ranker: 'tight-tree'
|
||||
ranker: 'tight-tree',
|
||||
// ranker: 'network-simplex'
|
||||
// isMultiGraph: false
|
||||
isMultiGraph: true
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -226,14 +228,22 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
|
|||
}
|
||||
}
|
||||
|
||||
logger.info('Count=', graph.nodeCount());
|
||||
logger.info('Count=', graph.nodeCount(), graph);
|
||||
let cnt = 0;
|
||||
relations.forEach(function(relation) {
|
||||
graph.setEdge(relation.id1, relation.id2, {
|
||||
relation: relation,
|
||||
width: getLabelWidth(relation.title),
|
||||
height: conf.labelHeight * getRows(relation.title).length,
|
||||
labelpos: 'c'
|
||||
});
|
||||
cnt++;
|
||||
logger.debug('Setting edge', relation);
|
||||
graph.setEdge(
|
||||
relation.id1,
|
||||
relation.id2,
|
||||
{
|
||||
relation: relation,
|
||||
width: getLabelWidth(relation.title),
|
||||
height: conf.labelHeight * getRows(relation.title).length,
|
||||
labelpos: 'c'
|
||||
},
|
||||
'id' + cnt
|
||||
);
|
||||
});
|
||||
|
||||
dagre.layout(graph);
|
||||
|
@ -282,7 +292,8 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
|
|||
|
||||
graph.edges().forEach(function(e) {
|
||||
if (typeof e !== 'undefined' && typeof graph.edge(e) !== 'undefined') {
|
||||
logger.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));
|
||||
// logger.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));
|
||||
logger.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e).points));
|
||||
drawEdge(diagram, graph.edge(e), graph.edge(e).relation);
|
||||
}
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue