marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-15 05:19:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

#1029 Fix for issues after switching to master branch of dagre-d3

Browse Source
This commit is contained in:
Knut Sveidqvist
2019-10-24 19:33:13 +02:00
parent 66152b42ae
commit d1c74070ab
4 changed files with 76 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,12 @@ import * as d3 from 'd3';
import flowDb from './flowDb';
import flow from './parser/flow';
import { getConfig } from '../../config';
const newDagreD3 = true;
import dagreD3 from 'dagre-d3';
// const newDagreD3 = false;
// import dagreD3 from '../../../../dagre-d3-renderer/dist/dagre-d3.core.js';
import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
import { logger } from '../../logger';
import { interpolateToCurve } from '../../utils';
@@ -271,7 +276,7 @@ export const getClasses = function(text) {
* @param text
* @param id
*/
export const draw = function(text, id) {
export const draw = function (text, id) {
logger.info('Drawing flowchart');
flowDb.clear();
const parser = flow.parser;
@@ -291,18 +296,35 @@ export const draw = function(text, id) {
}
// Create the input mermaid.graph
const g = new graphlib.Graph({
multigraph: true,
compound: true
})
.setGraph({
rankdir: dir,
marginx: 20,
marginy: 20
let g;
// Todo remove newDagreD3 when properly verified
if (newDagreD3) {
g = new graphlib.Graph({
multigraph: true,
compound: true
})
.setDefaultEdgeLabel(function() {
return {};
});
.setGraph({
rankdir: dir,
marginx: 8,
marginy: 8
})
.setDefaultEdgeLabel(function () {
return {};
});
} else {
g = new graphlib.Graph({
multigraph: true,
compound: true
})
.setGraph({
rankdir: dir,
marginx: 20,
marginy: 20
})
.setDefaultEdgeLabel(function () {
return {};
});
}
let subG;
const subGraphs = flowDb.getSubGraphs();
@@ -381,13 +403,31 @@ export const draw = function(text, id) {
const element = d3.select('#' + id + ' g');
render(element, g);
element.selectAll('g.node').attr('title', function() {
element.selectAll('g.node').attr('title', function () {
return flowDb.getTooltip(this.id);
});
const conf = getConfig().flowchart;
const padding = 8;
// Todo remove newDagreD3 when properly verified
if (newDagreD3) {
const svgBounds = svg.node().getBBox();
const width = svgBounds.width + padding * 2;
const height = svgBounds.height + padding * 2;
logger.debug(`new ViewBox 0 0 ${width} ${height}`, `translate(${padding - g._label.marginx}, ${padding - g._label.marginy})`);
if (conf.useMaxWidth) {
svg.attr('width', '100%');
svg.attr('style', `max-width: ${width}px;`);
} else {
svg.attr('height', height);
svg.attr('width', width);
}
svg.attr('viewBox', `0 0 ${width} ${height}`);
svg.select('g').attr('transform', `translate(${padding - g._label.marginx}, ${padding - svgBounds.y})`);
} else {
const width = g.maxX - g.minX + padding * 2;
const height = g.maxY - g.minY + padding * 2;
@@ -399,9 +439,12 @@ export const draw = function(text, id) {
svg.attr('width', width);
}
logger.debug(`Org ViewBox 0 0 ${width} ${height}`, `translate(${padding - g.minX}, ${padding - g.minY})\n${location.href}`)
svg.attr('viewBox', `0 0 ${width} ${height}`);
svg.select('g').attr('transform', `translate(${padding - g.minX}, ${padding - g.minY})`);
// svg.select('g').attr('transform', `translate(${padding - minX}, ${padding - minY})`);
}
// Index nodes
flowDb.indexNodes('subGraph' + i);