GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

ultimate solution to position the svg

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

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

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

@ -405,23 +405,10 @@ export const draw = function (text, id) {
return flowDb.getTooltip(this.id) return flowDb.getTooltip(this.id)
}) })
if (conf.useMaxWidth) { const padding = 8
// Center the graph svg.attr('width', g.maxX - g.minX + padding * 2)
svg.attr('height', '100%') svg.attr('height', g.maxY - g.minY + padding * 2)
svg.attr('width', conf.width) svg.select('g').attr('transform', `translate(${padding - g.minX}, ${padding - g.minY})`)
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)')
// Index nodes // Index nodes
flowDb.indexNodes('subGraph' + i) flowDb.indexNodes('subGraph' + i)

5
src/mermaidAPI.js
View File

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

6
yarn.lock
View File

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