marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-09 10:36:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

#926 Applying the color styling on the label instead of the node

Browse Source
This commit is contained in:
knsv
2019-09-08 02:56:06 -07:00
parent ece40cdc54
commit e37f5a6eb2
7 changed files with 44 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
e2e/README.md
View File

@@ -4,6 +4,16 @@ These tests are end to end tests in the sense that they actually render a full d
Apart from beeing rendered in a browser the tests perform image snapshots of the diagrams. The tests is handled in the same way as regular jest snapshots tests with the difference that an image comparison is performed instead of a comparison of the generated code.
# Platform differences
There will be slightly different renderings of the images on different platforms. For instance how fonts are anti-aliased. This means that until this started to render usings some common clod service the snaphos rendered on windows will fail in linux etc.
Here are a few simple rules to work around this flaw for now:
1. With no changes assume that tests are working.
2. Before starting to do changes update the snapshots `jest e2e --config e2e/jest.config.js -u`
3. Dont commit the __diff_output__
## To run the tests
1. Start the dev server by running ***yarn dev***
2. Run yarn e2e to run the tests
@@ -31,4 +41,12 @@ Add otions for the e2e tests to log the dev server url as in the example below.
Open the url in the dev server and fix the issue.
This way if working makes it easy to have render a graph you want to work with ands ensures that the e2e suit is expanded.
This way if working makes it easy to have render a graph you want to work with ands ensures that the e2e suit is expanded.
One unwanted sideeffect is that when the fix is done the the likley willl fail. Fix this by updating the snapshots.
```
jest e2e --config e2e/jest.config.js -u
```
** Important** If you change the text, dont forget to use the new url.

2
e2e/platform/e2e.html
View File

@@ -10,6 +10,8 @@
<body>
<script src="./mermaid.js"></script>
<script>
// Notice startOnLoad=false
// This prevents default handling in mermaid from render before the e2e logic is applied
mermaid.initialize({
startOnLoad: false,
useMaxWidth: true,

3
e2e/platform/viewer.js
View File

@@ -20,6 +20,7 @@ const contentLoaded = function () {
div.innerHTML = graphObj.code
document.getElementsByTagName('body')[0].appendChild(div)
global.mermaid.initialize(graphObj.mermaid)
// console.log('graphObj.mermaid', graphObj.mermaid)
global.mermaid.init()
}
}
@@ -30,7 +31,6 @@ const contentLoadedApi = function () {
const graphBase64 = document.location.href.substr(pos)
const graphObj = JSON.parse(Base64.decode(graphBase64))
// const graph = 'hello'
console.log(graphObj)
const div = document.createElement('div')
div.id = 'block'
div.className = 'mermaid'
@@ -57,6 +57,7 @@ if (typeof document !== 'undefined') {
this.console.log('Using api')
contentLoadedApi()
} else {
this.console.log('Not using api')
contentLoaded()
}
},

BIN
e2e/spec/__image_snapshots__/__diff_output__/xss-spec-js-sequencediagram-should-render-a-simple-sequence-diagrams-1-diff.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 58 KiB

BIN
e2e/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-color-of-styled-nodes-1-snap.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

9
e2e/spec/flowchart.spec.js
View File

@@ -308,17 +308,18 @@ describe('Flowcart', () => {
{})
})
fit('should render color of styled nodes', async () => {
it('should render color of styled nodes', async () => {
await imgSnapshotTest(page, `
graph LR
foo-->bar
classDef foo fill:lightblue,color:green,stroke:#FF9E2C,font-weight:bold
style foo fill:#F99,stroke-width:2px,stroke:#F0F
style bar fill:#999,color: #ffffff, stroke-width:10px,stroke:#0F0
style bar fill:#999,color: #00ff00, stroke-width:10px,stroke:#0F0
`,
{
listUrl: true,
listId: 'color'
listUrl: false,
listId: 'color styling',
logLevel: 0
})
})

23
src/diagrams/flowchart/flowRenderer.js
View File

@@ -27,14 +27,21 @@ export const addVertices = function (vert, g, svgId) {
const svg = d3.select(`[id="${svgId}"]`)
const keys = Object.keys(vert)
const styleFromStyleArr = function (styleStr, arr) {
const styleFromStyleArr = function (styleStr, arr, { label }) {
if (!label) {
// Create a compound style definition from the style definitions found for the node in the graph definition
for (let i = 0; i < arr.length; i++) {
if (typeof arr[i] !== 'undefined') {
styleStr = styleStr + arr[i] + ';'
for (let i = 0; i < arr.length; i++) {
if (typeof arr[i] !== 'undefined') {
styleStr = styleStr + arr[i] + ';'
}
}
} else {
for (let i = 0; i < arr.length; i++) {
if (typeof arr[i] !== 'undefined') {
if (arr[i].match('^color:')) styleStr = styleStr + arr[i] + ';'
}
}
}
return styleStr
}
@@ -57,7 +64,9 @@ export const addVertices = function (vert, g, svgId) {
*/
let style = ''
// Create a compound style definition from the style definitions found for the node in the graph definition
style = styleFromStyleArr(style, vertex.styles)
style = styleFromStyleArr(style, vertex.styles, { label: false })
let labelStyle = ''
labelStyle = styleFromStyleArr(labelStyle, vertex.styles, { label: true })
// Use vertex id as text in the box if no text is provided by the graph definition
let vertexText = vertex.text !== undefined ? vertex.text : vertex.id
@@ -139,7 +148,7 @@ export const addVertices = function (vert, g, svgId) {
_shape = 'rect'
}
// Add the node
g.setNode(vertex.id, { labelType: 'svg', shape: _shape, label: vertexNode, rx: radious, ry: radious, 'class': classStr, style: style, id: vertex.id })
g.setNode(vertex.id, { labelType: 'svg', labelStyle: labelStyle, shape: _shape, label: vertexNode, rx: radious, ry: radious, 'class': classStr, style: style, id: vertex.id })
})
}