GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues 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
Show Stats 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">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<link rel="stylesheet" href="./themes/mermaid.forest.css">
</head>
<body>
<div class="mermaid">

52
src/mermaidAPI.js
View File

@ -35,6 +35,8 @@ import gitGraphAst from './diagrams/gitGraph/gitGraphAst'
import d3 from './d3'
import pkg from '../package.json'
import forestStyle from './less/forest/mermaid.less'
/**
* ## Configuration
* 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 graphType = utils.detectType(txt)
var classes = {}
// var classes = {}
switch (graphType) {
case 'gitGraph':
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute
@ -399,53 +401,61 @@ var render = function (id, txt, cb, container) {
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute
flowRenderer.setConf(config.flowchart)
flowRenderer.draw(txt, id, false)
if (config.cloneCssStyles) {
classes = flowRenderer.getClasses(txt, false)
utils.cloneCssStyles(element.firstChild, classes)
}
// if (config.cloneCssStyles) {
// classes = flowRenderer.getClasses(txt, false)
// utils.cloneCssStyles(element.firstChild, classes)
// }
break
case 'dotGraph':
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute
flowRenderer.setConf(config.flowchart)
flowRenderer.draw(txt, id, true)
if (config.cloneCssStyles) {
classes = flowRenderer.getClasses(txt, true)
utils.cloneCssStyles(element.firstChild, classes)
}
// if (config.cloneCssStyles) {
// classes = flowRenderer.getClasses(txt, true)
// utils.cloneCssStyles(element.firstChild, classes)
// }
break
case 'sequenceDiagram':
config.sequenceDiagram.arrowMarkerAbsolute = config.arrowMarkerAbsolute
seq.setConf(config.sequenceDiagram)
seq.draw(txt, id)
if (config.cloneCssStyles) {
utils.cloneCssStyles(element.firstChild, [])
}
// if (config.cloneCssStyles) {
// utils.cloneCssStyles(element.firstChild, [])
// }
break
case 'gantt':
config.gantt.arrowMarkerAbsolute = config.arrowMarkerAbsolute
gantt.setConf(config.gantt)
gantt.draw(txt, id)
if (config.cloneCssStyles) {
utils.cloneCssStyles(element.firstChild, [])
}
// if (config.cloneCssStyles) {
// utils.cloneCssStyles(element.firstChild, [])
// }
break
case 'classDiagram':
config.classDiagram.arrowMarkerAbsolute = config.arrowMarkerAbsolute
classRenderer.setConf(config.classDiagram)
classRenderer.draw(txt, id)
if (config.cloneCssStyles) {
utils.cloneCssStyles(element.firstChild, [])
}
// if (config.cloneCssStyles) {
// utils.cloneCssStyles(element.firstChild, [])
// }
break
case 'info':
config.info.arrowMarkerAbsolute = config.arrowMarkerAbsolute
info.draw(txt, id, version())
if (config.cloneCssStyles) {
utils.cloneCssStyles(element.firstChild, [])
}
// if (config.cloneCssStyles) {
// utils.cloneCssStyles(element.firstChild, [])
// }
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')
var url = ''

38
webpack.config.base.js
View File

@ -1,5 +1,4 @@
import path from 'path'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
const lodashRule = {
parser: {
@ -26,7 +25,7 @@ const jsRule = {
}
}
const styleRule = { // load less to string
const lessRule = { // load less to string
test: /\.less$/,
use: [
{ 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 = () => {
return {
target: 'web',
@ -63,29 +51,7 @@ export const jsConfig = () => {
libraryExport: 'default'
},
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 { jsConfig, lessConfig } from './webpack.config.base'
import { jsConfig } from './webpack.config.base'
const config = jsConfig()
@ -8,6 +8,4 @@ const coreConfig = jsConfig()
coreConfig.externals = [nodeExternals()]
coreConfig.output.filename = '[name].core.js'
const cssConfig = lessConfig()
export default [config, coreConfig, cssConfig]
export default [config, coreConfig]

10
webpack.config.prod.js
View File

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