#1295 Fix for statediagram labels

src/dagre-wrapper/GraphObjects.md

@@ -100,6 +100,20 @@ double_arrow_circle
 Lets try to make these types semantic free so that diagram type semantics does not find its way in to this more generic layer.
 
 
+Required edgeData for proper rendering:
+
+|  property  |               description                |
+| ---------- | ---------------------------------------- |
+| id         | Id of the edge                           |
+| arrowHead  | overlap between arrowHead and arrowType? |
+| arrowType  | overlap between arrowHead and arrowType? |
+| style      |                                          |
+| labelStyle |                                          |
+| label      | overlap between label and labelText?     |
+| labelPos   |                                          |
+| labelType  | overlap between label and labelText?     |
+
+
 # Markers
 
 Define what markers that should be included in the diagram with the insert markers function. The function takes two arguments, first the element in which the markers should be included and a list of the markers that should be added.

src/dagre-wrapper/edges.js

@@ -33,6 +33,7 @@ export const insertEdgeLabel = (elem, edge) => {
 };
 
 export const positionEdgeLabel = edge => {
+  logger.info('Moving label', edge.id, edge.label, edgeLabels[edge.id]);
   const el = edgeLabels[edge.id];
   el.attr('transform', 'translate(' + edge.x + ', ' + edge.y + ')');
 };

src/dagre-wrapper/index.js

@@ -79,14 +79,14 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
   });
 
   graph.edges().forEach(function(e) {
-    log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
+    log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
   });
-  log.trace('#############################################');
-  log.trace('###                Layout                 ###');
-  log.trace('#############################################');
-  log.trace(graph);
+  log.info('#############################################');
+  log.info('###                Layout                 ###');
+  log.info('#############################################');
+  log.info(graph);
   dagre.layout(graph);
-  log.warn('Graph after layout:', graphlib.json.write(graph));
+  log.trace('Graph after layout:', graphlib.json.write(graph));
   // Move the nodes to the correct place
   graph.nodes().forEach(function(v) {
     const node = graph.node(v);
@@ -119,7 +119,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
   // Move the edge labels to the correct place after layout
   graph.edges().forEach(function(e) {
     const edge = graph.edge(e);
-    log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
+    log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
 
     insertEdge(edgePaths, edge, clusterDb, diagramtype);
     positionEdgeLabel(edge);

src/diagrams/state/stateRenderer-v2.js

@@ -155,10 +155,12 @@ const setupDoc = (g, parent, doc, altFlag) => {
       setupNode(g, parent, item.state1, altFlag);
       setupNode(g, parent, item.state2, altFlag);
       const edgeData = {
+        id: 'edge' + cnt,
         arrowhead: 'normal',
         arrowType: 'arrow_barb',
         style: 'fill:none',
         labelStyle: '',
+        label: item.description,
         arrowheadStyle: 'fill: #333',
         labelpos: 'c',
         labelType: 'text'

src/themes/flowchart.scss

@@ -36,6 +36,9 @@
 
 .edgeLabel {
   background-color: $edgeLabelBackground;
+  rect {
+    opacity: 0.5;
+  }
   text-align: center;
 }