diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js index 7bb136287..0e704275f 100644 --- a/src/diagrams/flowchart/flowRenderer.js +++ b/src/diagrams/flowchart/flowRenderer.js @@ -36,9 +36,10 @@ export const addVertices = function(vert, g, svgId) { } } } else { + // create the style definition for the text, if property is a text-property for (let i = 0; i < arr.length; i++) { if (typeof arr[i] !== 'undefined') { - if (arr[i].match('^color:')) styleStr = styleStr + arr[i] + ';'; + if (arr[i].match('^color:|^text-align:')) styleStr = styleStr + arr[i] + ';'; } } } diff --git a/src/diagrams/flowchart/flowRenderer.spec.js b/src/diagrams/flowchart/flowRenderer.spec.js index 3b8c72a44..e8407d91f 100644 --- a/src/diagrams/flowchart/flowRenderer.spec.js +++ b/src/diagrams/flowchart/flowRenderer.spec.js @@ -54,4 +54,43 @@ describe('the flowchart renderer', function() { }); }); }); + + [ + [['fill:#fff'], 'fill:#fff;', ''], + [['color:#ccc'], 'color:#ccc;', 'color:#ccc;'], + [['fill:#fff', 'color:#ccc'], 'fill:#fff;color:#ccc;', 'color:#ccc;'], + [ + ['fill:#fff', 'color:#ccc', 'text-align:center'], + 'fill:#fff;color:#ccc;text-align:center;', + 'color:#ccc;text-align:center;' + ] + ].forEach(function([style, expectedStyle, expectedLabelStyle]) { + fit(`should add the styles to style and/or labelStyle for style ${style}`, function() { + const addedNodes = []; + const mockG = { + setNode: function(id, object) { + addedNodes.push([id, object]); + } + }; + addVertices( + { + v1: { + type: 'rect', + id: 'my-node-id', + classes: [], + styles: style, + text: 'my vertex text' + } + }, + mockG, + 'svg-id' + ); + expect(addedNodes).toHaveLength(1); + expect(addedNodes[0][0]).toEqual('my-node-id'); + expect(addedNodes[0][1]).toHaveProperty('id', 'my-node-id'); + expect(addedNodes[0][1]).toHaveProperty('labelType', 'svg'); + expect(addedNodes[0][1]).toHaveProperty('style', expectedStyle); + expect(addedNodes[0][1]).toHaveProperty('labelStyle', expectedLabelStyle); + }); + }); });