marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-08 18:16:44 +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

26
cypress/integration/rendering/flowchart.spec.js
View File

@@ -2,7 +2,7 @@
import { imgSnapshotTest } from '../../helpers/util'; import { imgSnapshotTest } from '../../helpers/util';
describe('Flowcart', () => { describe('Flowcart', () => {
it('should render a simple flowchart no htmlLabels', () => { it('1: should render a simple flowchart no htmlLabels', () => {
imgSnapshotTest( imgSnapshotTest(
`graph TD `graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -14,7 +14,7 @@ describe('Flowcart', () => {
{ flowchart: { htmlLabels: false } } { flowchart: { htmlLabels: false } }
); );
}); });
it('should render a simple flowchart with htmlLabels', () => { it('2: should render a simple flowchart with htmlLabels', () => {
imgSnapshotTest( imgSnapshotTest(
`graph TD `graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -26,7 +26,7 @@ describe('Flowcart', () => {
{ flowchart: { htmlLabels: true } } { flowchart: { htmlLabels: true } }
); );
}); });
it('should render a simple flowchart with line breaks', () => { it('3: should render a simple flowchart with line breaks', () => {
imgSnapshotTest( imgSnapshotTest(
` `
graph TD graph TD
@@ -40,7 +40,7 @@ describe('Flowcart', () => {
); );
}); });
it('should render a simple flowchart with trapezoid and inverse trapezoid vertex options.', () => { it('4: should render a simple flowchart with trapezoid and inverse trapezoid vertex options.', () => {
imgSnapshotTest( imgSnapshotTest(
` `
graph TD graph TD
@@ -55,7 +55,7 @@ describe('Flowcart', () => {
); );
}); });
it('should style nodes via a class.', () => { it('4: should style nodes via a class.', () => {
imgSnapshotTest( imgSnapshotTest(
` `
graph TD graph TD
@@ -71,7 +71,7 @@ describe('Flowcart', () => {
); );
}); });
it('should render a flowchart full of circles', () => { it('5: should render a flowchart full of circles', () => {
imgSnapshotTest( imgSnapshotTest(
` `
graph LR graph LR
@@ -99,7 +99,7 @@ describe('Flowcart', () => {
{} {}
); );
}); });
it('should render a flowchart full of icons', () => { it('6: should render a flowchart full of icons', () => {
imgSnapshotTest( imgSnapshotTest(
` `
graph TD graph TD
@@ -170,7 +170,7 @@ describe('Flowcart', () => {
); );
}); });
it('should render labels with numbers at the start', () => { it('7: should render labels with numbers at the start', () => {
imgSnapshotTest( imgSnapshotTest(
` `
graph TB;subgraph "number as labels";1;end; graph TB;subgraph "number as labels";1;end;
@@ -178,7 +178,7 @@ describe('Flowcart', () => {
{} {}
); );
}); });
it('should render subgraphs', () => { it('8: should render subgraphs', () => {
imgSnapshotTest( imgSnapshotTest(
` `
graph TB graph TB
@@ -190,7 +190,7 @@ describe('Flowcart', () => {
); );
}); });
it('should render subgraphs with a title startign with a digit', () => { it('9: should render subgraphs with a title startign with a digit', () => {
imgSnapshotTest( imgSnapshotTest(
` `
graph TB graph TB
@@ -202,7 +202,7 @@ describe('Flowcart', () => {
); );
}); });
it('should render styled subgraphs', () => { it('10: should render styled subgraphs', () => {
imgSnapshotTest( imgSnapshotTest(
` `
graph TB graph TB
@@ -237,7 +237,7 @@ describe('Flowcart', () => {
); );
}); });
it('should render a flowchart with ling sames and class definitoins', () => { it('11: should render a flowchart with ling sames and class definitoins', () => {
imgSnapshotTest( imgSnapshotTest(
`graph LR `graph LR
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1[" sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
@@ -339,7 +339,7 @@ describe('Flowcart', () => {
); );
}); });
it('should render color of styled nodes', () => { it('12: should render color of styled nodes', () => {
imgSnapshotTest( imgSnapshotTest(
` `
graph LR graph LR

5
cypress/platform/e2e.html
View File

@@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<script src="/e2e.js"></script> <script src="/e2e.js"></script>
<link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" />
<style> <style>
body { body {
/* font-family: 'Mansalva', cursive; /* font-family: 'Mansalva', cursive;
@@ -17,6 +17,9 @@
--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive; --mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
--mermaid-font-family: '"Lucida Console", Monaco, monospace'; --mermaid-font-family: '"Lucida Console", Monaco, monospace';
} */ } */
svg {
border: 2px solid darkred;
}
</style> </style>
</head> </head>
<body> <body>

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

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

3
src/diagrams/state/shapes.js
View File

@@ -416,7 +416,7 @@ export const drawEdge = function(elem, path, relation) {
const rows = getRows(relation.title); const rows = getRows(relation.title);
console.warn(rows); // console.warn(rows);
let titleHeight = 0; let titleHeight = 0;
const titleRows = []; const titleRows = [];
@@ -431,7 +431,6 @@ export const drawEdge = function(elem, path, relation) {
if (titleHeight === 0) { if (titleHeight === 0) {
const titleBox = title.node().getBBox(); const titleBox = title.node().getBBox();
titleHeight = titleBox.height; titleHeight = titleBox.height;
console.warn('apa', rows.length * titleHeight);
} }
titleRows.push(title); titleRows.push(title);
} }