mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
ultimate solution to position the svg
This commit is contained in:
parent
f2ea725edb
commit
44ff608868
@ -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",
|
||||
|
@ -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)
|
||||
|
@ -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'
|
||||
},
|
||||
|
@ -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"
|
||||
|
Loading…
x
Reference in New Issue
Block a user