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

Correct way to handle inline style

Browse Source
This commit is contained in:
Tyler Long
2017-09-12 22:06:19 +08:00
parent 0a828ee67f
commit 72493b7a8b
5 changed files with 37 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
dist/index.html vendored
View File

@@ -5,7 +5,6 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<link rel="stylesheet" href="./themes/mermaid.forest.css">
</head> </head>
<body> <body>
<div class="mermaid"> <div class="mermaid">

52
src/mermaidAPI.js
View File

@@ -35,6 +35,8 @@ import gitGraphAst from './diagrams/gitGraph/gitGraphAst'
import d3 from './d3' import d3 from './d3'
import pkg from '../package.json' import pkg from '../package.json'
import forestStyle from './less/forest/mermaid.less'
/** /**
* ## Configuration * ## Configuration
* These are the default options which can be overridden with the initialization call as in the example below: * These are the default options which can be overridden with the initialization call as in the example below:
@@ -388,7 +390,7 @@ var render = function (id, txt, cb, container) {
var element = d3.select('#d' + id).node() var element = d3.select('#d' + id).node()
var graphType = utils.detectType(txt) var graphType = utils.detectType(txt)
var classes = {} // var classes = {}
switch (graphType) { switch (graphType) {
case 'gitGraph': case 'gitGraph':
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute
@@ -399,53 +401,61 @@ var render = function (id, txt, cb, container) {
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute
flowRenderer.setConf(config.flowchart) flowRenderer.setConf(config.flowchart)
flowRenderer.draw(txt, id, false) flowRenderer.draw(txt, id, false)
if (config.cloneCssStyles) { // if (config.cloneCssStyles) {
classes = flowRenderer.getClasses(txt, false) // classes = flowRenderer.getClasses(txt, false)
utils.cloneCssStyles(element.firstChild, classes) // utils.cloneCssStyles(element.firstChild, classes)
} // }
break break
case 'dotGraph': case 'dotGraph':
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute
flowRenderer.setConf(config.flowchart) flowRenderer.setConf(config.flowchart)
flowRenderer.draw(txt, id, true) flowRenderer.draw(txt, id, true)
if (config.cloneCssStyles) { // if (config.cloneCssStyles) {
classes = flowRenderer.getClasses(txt, true) // classes = flowRenderer.getClasses(txt, true)
utils.cloneCssStyles(element.firstChild, classes) // utils.cloneCssStyles(element.firstChild, classes)
} // }
break break
case 'sequenceDiagram': case 'sequenceDiagram':
config.sequenceDiagram.arrowMarkerAbsolute = config.arrowMarkerAbsolute config.sequenceDiagram.arrowMarkerAbsolute = config.arrowMarkerAbsolute
seq.setConf(config.sequenceDiagram) seq.setConf(config.sequenceDiagram)
seq.draw(txt, id) seq.draw(txt, id)
if (config.cloneCssStyles) { // if (config.cloneCssStyles) {
utils.cloneCssStyles(element.firstChild, []) // utils.cloneCssStyles(element.firstChild, [])
} // }
break break
case 'gantt': case 'gantt':
config.gantt.arrowMarkerAbsolute = config.arrowMarkerAbsolute config.gantt.arrowMarkerAbsolute = config.arrowMarkerAbsolute
gantt.setConf(config.gantt) gantt.setConf(config.gantt)
gantt.draw(txt, id) gantt.draw(txt, id)
if (config.cloneCssStyles) { // if (config.cloneCssStyles) {
utils.cloneCssStyles(element.firstChild, []) // utils.cloneCssStyles(element.firstChild, [])
} // }
break break
case 'classDiagram': case 'classDiagram':
config.classDiagram.arrowMarkerAbsolute = config.arrowMarkerAbsolute config.classDiagram.arrowMarkerAbsolute = config.arrowMarkerAbsolute
classRenderer.setConf(config.classDiagram) classRenderer.setConf(config.classDiagram)
classRenderer.draw(txt, id) classRenderer.draw(txt, id)
if (config.cloneCssStyles) { // if (config.cloneCssStyles) {
utils.cloneCssStyles(element.firstChild, []) // utils.cloneCssStyles(element.firstChild, [])
} // }
break break
case 'info': case 'info':
config.info.arrowMarkerAbsolute = config.arrowMarkerAbsolute config.info.arrowMarkerAbsolute = config.arrowMarkerAbsolute
info.draw(txt, id, version()) info.draw(txt, id, version())
if (config.cloneCssStyles) { // if (config.cloneCssStyles) {
utils.cloneCssStyles(element.firstChild, []) // utils.cloneCssStyles(element.firstChild, [])
} // }
break break
} }
// insert inline style into svg
const svg = element.firstChild
const s = document.createElement('style')
// s.innerHTML = '/* <![CDATA[ */\n'
s.innerHTML = forestStyle
// s.innerHTML += '/* ]]> */\n'
svg.insertBefore(s, svg.firstChild)
d3.select('#d' + id).selectAll('foreignobject div').attr('xmlns', 'http://www.w3.org/1999/xhtml') d3.select('#d' + id).selectAll('foreignobject div').attr('xmlns', 'http://www.w3.org/1999/xhtml')
var url = '' var url = ''

38
webpack.config.base.js
View File

@@ -1,5 +1,4 @@
import path from 'path' import path from 'path'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
const lodashRule = { const lodashRule = {
parser: { parser: {
@@ -26,7 +25,7 @@ const jsRule = {
} }
} }
const styleRule = { // load less to string const lessRule = { // load less to string
test: /\.less$/, test: /\.less$/,
use: [ use: [
{ loader: 'css-to-string-loader' }, { loader: 'css-to-string-loader' },
@@ -35,17 +34,6 @@ const styleRule = { // load less to string
] ]
} }
const lessRule = {
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
})
}
export const jsConfig = () => { export const jsConfig = () => {
return { return {
target: 'web', target: 'web',
@@ -63,29 +51,7 @@ export const jsConfig = () => {
libraryExport: 'default' libraryExport: 'default'
}, },
module: { module: {
rules: [lodashRule, jsRule, styleRule] rules: [lodashRule, jsRule, lessRule]
} }
} }
} }
export const lessConfig = () => {
return {
target: 'web',
entry: {
'mermaid.default': './src/less/default/mermaid.less',
'mermaid.dark': './src/less/dark/mermaid.less',
'mermaid.forest': './src/less/forest/mermaid.less',
'mermaid.neutral': './src/less/neutral/mermaid.less'
},
output: {
path: path.join(__dirname, './dist/themes'),
filename: '[name].css'
},
module: {
rules: [lessRule]
},
plugins: [
new ExtractTextPlugin('[name].css')
]
}
}

6
webpack.config.js
View File

@@ -1,6 +1,6 @@
import nodeExternals from 'webpack-node-externals' import nodeExternals from 'webpack-node-externals'
import { jsConfig, lessConfig } from './webpack.config.base' import { jsConfig } from './webpack.config.base'
const config = jsConfig() const config = jsConfig()
@@ -8,6 +8,4 @@ const coreConfig = jsConfig()
coreConfig.externals = [nodeExternals()] coreConfig.externals = [nodeExternals()]
coreConfig.output.filename = '[name].core.js' coreConfig.output.filename = '[name].core.js'
const cssConfig = lessConfig() export default [config, coreConfig]
export default [config, coreConfig, cssConfig]

10
webpack.config.prod.js
View File

@@ -1,12 +1,6 @@
import ExtractTextPlugin from 'extract-text-webpack-plugin' import { jsConfig } from './webpack.config.base'
import { jsConfig, lessConfig } from './webpack.config.base'
const minConfig = jsConfig() const minConfig = jsConfig()
minConfig.output.filename = '[name].min.js' minConfig.output.filename = '[name].min.js'
const cssMinConfig = lessConfig() export default [minConfig]
cssMinConfig.output.filename = '[name].min.css'
cssMinConfig.plugins = [ new ExtractTextPlugin('[name].min.css') ]
export default [minConfig, cssMinConfig]