diff --git a/src/dagre-wrapper/GraphObjects.md b/src/dagre-wrapper/GraphObjects.md index cde45591d..5586b74bb 100644 --- a/src/dagre-wrapper/GraphObjects.md +++ b/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. diff --git a/src/dagre-wrapper/edges.js b/src/dagre-wrapper/edges.js index 0b5e474e2..b5e067c7f 100644 --- a/src/dagre-wrapper/edges.js +++ b/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 + ')'); }; diff --git a/src/dagre-wrapper/index.js b/src/dagre-wrapper/index.js index 5d33e9a2e..3e29d8640 100644 --- a/src/dagre-wrapper/index.js +++ b/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); diff --git a/src/diagrams/state/stateRenderer-v2.js b/src/diagrams/state/stateRenderer-v2.js index 5952f96dc..e6d9cedf2 100644 --- a/src/diagrams/state/stateRenderer-v2.js +++ b/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' diff --git a/src/themes/flowchart.scss b/src/themes/flowchart.scss index 9bd8d9664..495826cfc 100644 --- a/src/themes/flowchart.scss +++ b/src/themes/flowchart.scss @@ -36,6 +36,9 @@ .edgeLabel { background-color: $edgeLabelBackground; + rect { + opacity: 0.5; + } text-align: center; }