ultimate solution to position the svg

This commit is contained in:
Tyler Long 2018-04-12 09:06:20 +08:00
parent f2ea725edb
commit 44ff608868
4 changed files with 9 additions and 27 deletions

View File

@ -1,6 +1,6 @@
{
"name": "mermaid",
"version": "8.0.0-rc.6",
"version": "8.0.0-rc.7",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"main": "dist/mermaid.core.js",
"keywords": [
@ -38,7 +38,7 @@
},
"dependencies": {
"d3": "^4.13.0",
"dagre-d3-renderer": "^0.5.6",
"dagre-d3-renderer": "^0.5.8",
"dagre-layout": "^0.8.8",
"graphlibrary": "^2.2.0",
"he": "^1.1.1",

View File

@ -405,23 +405,10 @@ export const draw = function (text, id) {
return flowDb.getTooltip(this.id)
})
if (conf.useMaxWidth) {
// Center the graph
svg.attr('height', '100%')
svg.attr('width', conf.width)
svg.attr('viewBox', '0 0 ' + (g.graph().width + 64) + ' ' + (g.graph().height + 64))
svg.attr('style', 'max-width:' + (g.graph().width + 64) + 'px;')
} else {
// Center the graph
svg.attr('height', g.graph().height + 64)
if (typeof conf.width === 'undefined') {
svg.attr('width', g.graph().width + 64)
} else {
svg.attr('width', conf.width)
}
svg.attr('viewBox', '0 0 ' + (g.graph().width + 64) + ' ' + (g.graph().height + 64))
}
svg.select('g').attr('transform', 'translate(32, 32)')
const padding = 8
svg.attr('width', g.maxX - g.minX + padding * 2)
svg.attr('height', g.maxY - g.minY + padding * 2)
svg.select('g').attr('transform', `translate(${padding - g.minX}, ${padding - g.minY})`)
// Index nodes
flowDb.indexNodes('subGraph' + i)

View File

@ -83,11 +83,6 @@ const config = {
* on the edges
*/
htmlLabels: true,
/**
* **useMaxWidth** - Flag for setting whether or not a all available width should be used for
* the diagram.
*/
useMaxWidth: true,
curve: 'linear'
},

View File

@ -2202,9 +2202,9 @@ d3@^4.13.0:
d3-voronoi "1.1.2"
d3-zoom "1.7.1"
dagre-d3-renderer@^0.5.6:
version "0.5.6"
resolved "https://registry.yarnpkg.com/dagre-d3-renderer/-/dagre-d3-renderer-0.5.6.tgz#cf85c18e0ee4dba62b69b0697c28d638237bbc89"
dagre-d3-renderer@^0.5.8:
version "0.5.8"
resolved "https://registry.yarnpkg.com/dagre-d3-renderer/-/dagre-d3-renderer-0.5.8.tgz#aa071bb71d3c4d67426925906f3f6ddead49c1a3"
dependencies:
dagre-layout "^0.8.8"
lodash "^4.17.5"