From d8d624870d50151bc98b63b2c6e47f9972af76cc Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 30 Apr 2021 19:25:45 +0200 Subject: [PATCH] Adjustments --- cypress/platform/knsv.html | 61 ++++++++++++++++++++------ src/dagre-wrapper/createLabel.js | 1 + src/dagre-wrapper/index.js | 6 +-- src/dagre-wrapper/mermaid-graphlib.js | 14 ++++-- src/dagre-wrapper/nodes.js | 14 ++++-- src/diagrams/state/stateRenderer-v2.js | 13 +++--- 6 files changed, 80 insertions(+), 29 deletions(-) diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index 9c253d8be..cf51b5cff 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -55,7 +55,7 @@ flowchart TD class T TestSub linkStyle 0,1 color:orange, stroke: orange; -
+
stateDiagram-v2 [*] --> Off Off --> On @@ -103,27 +103,62 @@ stateDiagram-v2
-state +stateDiagram-v2 state "Not Shooting State" as NotShooting { - state "Idle mode" as Idle state "Configuring mode" as Configuring [*] --> Idle + Idle : this is a string + Idle : this is another string Idle --> Configuring : EvConfig Configuring --> Idle : EvConfig }
-
-stateDiagram -state S1 { -sub1 -->sub2 -} -state S2 { - sub4 -} -S1 --> S2 -sub1 --> sub4 +
+stateDiagram-v2 + [*] --> Off + Off --> On + On --> Select + Select --> Washing + Washing --> Finished + Finished --> [*] + state Select + { + state "Program 1" as Prg1 + [*] --> Prg1 + Prg1 --> [*] + [*] --> Prg2 + Prg2 --> [*] + [*] --> Prg3 + Prg3 --> [*] + } + state Washing { + state Using_Prg1 { + [*] --> P1Step1 + P1Step1 --> P1Step2 + P1Step2 --> P1Step3 + P1Step3 --> [*] + } + state Using_Prg2 { + [*] --> P2Step1 + P2Step1 --> P2Step2 + P2Step2 --> P2Step3 + P2Step3 --> [*] + } + + state Using_Prg3 { + [*] --> Step1 + Step1 --> Step2 + Step2 --> [*] + } + [*] --> Using_Prg1 + [*] --> Using_Prg2 + [*] --> Using_Prg3 + Using_Prg1 --> [*] + Using_Prg2 --> [*] + Using_Prg3 --> [*] + }
requirementDiagram diff --git a/src/dagre-wrapper/createLabel.js b/src/dagre-wrapper/createLabel.js index fa3403d88..bb670835b 100644 --- a/src/dagre-wrapper/createLabel.js +++ b/src/dagre-wrapper/createLabel.js @@ -85,6 +85,7 @@ function addHtmlLabel(node) { const createLabel = (_vertexText, style, isTitle, isNode) => { let vertexText = _vertexText || ''; + if (typeof vertexText === 'object') vertexText = vertexText[0]; if (getConfig().flowchart.htmlLabels) { // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that? vertexText = vertexText.replace(/\\n|\n/g, '
'); diff --git a/src/dagre-wrapper/index.js b/src/dagre-wrapper/index.js index 139a4033b..04fe05f8b 100644 --- a/src/dagre-wrapper/index.js +++ b/src/dagre-wrapper/index.js @@ -17,7 +17,7 @@ import { log } from '../logger'; const recursiveRender = (_elem, graph, diagramtype, parentCluster) => { log.info('Graph in recursive render: XXX', graphlib.json.write(graph), parentCluster); const dir = graph.graph().rankdir; - log.warn('Dir in recursive render - dir:', dir); + log.trace('Dir in recursive render - dir:', dir); const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line if (!graph.nodes()) { @@ -26,7 +26,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => { log.info('Recursive render XXX', graph.nodes()); } if (graph.edges().length > 0) { - log.info('Recursive edges', graph.edge(graph.edges()[0])); + log.trace('Recursive edges', graph.edge(graph.edges()[0])); } const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line const edgePaths = elem.insert('g').attr('class', 'edgePaths'); @@ -43,7 +43,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => { log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster); graph.setNode(parentCluster.id, data); if (!graph.parent(v)) { - log.warn('Setting parent', v, parentCluster.id); + log.trace('Setting parent', v, parentCluster.id); graph.setParent(v, parentCluster.id, data); } } diff --git a/src/dagre-wrapper/mermaid-graphlib.js b/src/dagre-wrapper/mermaid-graphlib.js index 3aa02eb52..61c7d2c88 100644 --- a/src/dagre-wrapper/mermaid-graphlib.js +++ b/src/dagre-wrapper/mermaid-graphlib.js @@ -17,7 +17,7 @@ export const clear = () => { const isDecendant = (id, ancenstorId) => { // if (id === ancenstorId) return true; - log.debug( + log.trace( 'In isDecendant', ancenstorId, ' ', @@ -354,17 +354,25 @@ export const extractor = (graph, depth) => { log.warn( 'Cluster without external connections, without a parent and with children', node, - depth + depth, + clusterDb[node].clusterData.dir ); const graphSettings = graph.graph(); + let dir = graphSettings.rankdir === 'TB' ? 'LR' : 'TB'; + if (clusterDb[node]) { + if (clusterDb[node].clusterData && clusterDb[node].clusterData.dir) { + dir = clusterDb[node].clusterData.dir; + log.warn('Fixing dir', clusterDb[node].clusterData.dir, dir); + } + } const clusterGraph = new graphlib.Graph({ multigraph: true, compound: true }) .setGraph({ - rankdir: graphSettings.rankdir === 'TB' ? 'LR' : 'TB', // Todo: set proper spacing + rankdir: dir, // Todo: set proper spacing nodesep: 50, ranksep: 50, marginx: 8, diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js index a52fc657e..2e7809e77 100644 --- a/src/dagre-wrapper/nodes.js +++ b/src/dagre-wrapper/nodes.js @@ -319,12 +319,18 @@ const rectWithTitle = (parent, node) => { const label = shapeSvg.insert('g').attr('class', 'label'); - const text2prim = node.labelText.flat ? node.labelText.flat() : node.labelText; - const text2 = typeof text2prim === 'object' ? text2prim[0] : text2prim; + const text2 = node.labelText.flat ? node.labelText.flat() : node.labelText; + // const text2 = typeof text2prim === 'object' ? text2prim[0] : text2prim; - log.info('Label text', text2); + let title = ''; + if (typeof text2 === 'object') { + title = text2[0]; + } else { + title = text2; + } + log.info('Label text abc79', title, text2, typeof text2 === 'object'); - const text = label.node().appendChild(createLabel(text2, node.labelStyle, true, true)); + const text = label.node().appendChild(createLabel(title, node.labelStyle, true, true)); let bbox; if (getConfig().flowchart.htmlLabels) { const div = text.children[0]; diff --git a/src/diagrams/state/stateRenderer-v2.js b/src/diagrams/state/stateRenderer-v2.js index 1e4424f3a..0892b797b 100644 --- a/src/diagrams/state/stateRenderer-v2.js +++ b/src/diagrams/state/stateRenderer-v2.js @@ -96,13 +96,14 @@ const setupNode = (g, parent, node, altFlag) => { const nodeData = { labelStyle: '', shape: nodeDb[node.id].shape, - labelText: - typeof nodeDb[node.id].description === 'object' - ? nodeDb[node.id].description[0] - : nodeDb[node.id].description, + labelText: nodeDb[node.id].description, + // typeof nodeDb[node.id].description === 'object' + // ? nodeDb[node.id].description[0] + // : nodeDb[node.id].description, classes: nodeDb[node.id].classes, //classStr, style: '', //styles.style, id: node.id, + dir: altFlag ? 'LR' : 'TB', domId: 'state-' + node.id + '-' + cnt, type: nodeDb[node.id].type, padding: 15 //getConfig().flowchart.padding @@ -167,12 +168,12 @@ const setupNode = (g, parent, node, altFlag) => { if (parent) { if (parent.id !== 'root') { - log.info('Setting node ', node.id, ' to be child of its parent ', parent.id); + log.trace('Setting node ', node.id, ' to be child of its parent ', parent.id); g.setParent(node.id, parent.id); } } if (node.doc) { - log.info('Adding nodes children '); + log.trace('Adding nodes children '); setupDoc(g, node, node.doc, !altFlag); } };