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

#1110 Fixing height issue

Browse Source
This commit is contained in:
Knut Sveidqvist
2019-12-03 23:38:51 +01:00
parent 02854881b4
commit 0fb91d6bcc
3 changed files with 29 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
cypress/platform/current.html
View File

@@ -47,12 +47,19 @@
} }
</div> </div>
<div class="mermaid">stateDiagram <div class="mermaid">stateDiagram
state PilotCockpit { state Pilot {
state GParent { state GParent {
state Parent { state Parent1 {
Child Child
} }
state Parent2 {
Child2
}
} }
state Parent3 {
Child4
}
} }
</div> </div>
</div> </div>

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

@@ -221,7 +221,8 @@ export const addTitleAndBox = (g, stateDef) => {
// .attr('rx', '0'); // .attr('rx', '0');
title.attr('x', startX + pad); title.attr('x', startX + pad);
if (titleWidth <= orgWidth) title.attr('x', startX + width / 2 - pad / 2); // if (titleWidth <= orgWidth) title.attr('x', startX + width / 2 - pad / 2);
if (titleWidth <= orgWidth) title.attr('x', orgX + (width - dblPad) / 2 - titleWidth / 2 + pad);
// // Title background // // Title background
g.insert('rect', ':first-child') g.insert('rect', ':first-child')
@@ -499,7 +500,7 @@ export const drawEdge = function(elem, path, relation) {
.insert('rect', ':first-child') .insert('rect', ':first-child')
.attr('class', 'box') .attr('class', 'box')
.attr('x', bounds.x - getConfig().state.padding / 2) .attr('x', bounds.x - getConfig().state.padding / 2)
.attr('y', bounds.y - getConfig().state.padding / 2) .attr('y', bounds.y + getConfig().state.padding / 2)
.attr('width', bounds.width + getConfig().state.padding) .attr('width', bounds.width + getConfig().state.padding)
.attr('height', bounds.height + getConfig().state.padding); .attr('height', bounds.height + getConfig().state.padding);

21
src/diagrams/state/stateRenderer.js
View File

@@ -100,7 +100,7 @@ export const draw = function(text, id) {
// diagram.attr('height', height); // diagram.attr('height', height);
// Zoom in a bit // Zoom in a bit
diagram.attr('width', width * ); diagram.attr('width', width * 2);
// diagram.attr('height', bounds.height * 3 + conf.padding * 2); // diagram.attr('height', bounds.height * 3 + conf.padding * 2);
diagram.attr( diagram.attr(
'viewBox', 'viewBox',
@@ -134,6 +134,15 @@ const renderDoc = (doc, diagram, parentId) => {
compound: true compound: true
}); });
let i;
let edgeFreeDoc = true;
for (i = 0; i < doc.length; i++) {
if (doc[i].stmt === 'relation') {
edgeFreeDoc = false;
break;
}
}
console.warn('doc', doc, edgeFreeDoc);
// Set an object for the graph label // Set an object for the graph label
if (parentId) if (parentId)
graph.setGraph({ graph.setGraph({
@@ -142,8 +151,11 @@ const renderDoc = (doc, diagram, parentId) => {
compound: true, compound: true,
// acyclicer: 'greedy', // acyclicer: 'greedy',
ranker: 'tight-tree', ranker: 'tight-tree',
ranksep: conf.edgeLengthFactor ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,
nodeSep: edgeFreeDoc ? 1 : 50
// isMultiGraph: false // isMultiGraph: false
// ranksep: 5,
// nodesep: 1
}); });
else { else {
graph.setGraph({ graph.setGraph({
@@ -152,7 +164,8 @@ const renderDoc = (doc, diagram, parentId) => {
// isCompound: true, // isCompound: true,
// acyclicer: 'greedy', // acyclicer: 'greedy',
// ranker: 'longest-path' // ranker: 'longest-path'
ranksep: conf.edgeLengthFactor, ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,
nodeSep: edgeFreeDoc ? 1 : 50,
ranker: 'tight-tree' ranker: 'tight-tree'
// ranker: 'network-simplex' // ranker: 'network-simplex'
// isMultiGraph: false // isMultiGraph: false
@@ -192,7 +205,7 @@ const renderDoc = (doc, diagram, parentId) => {
sub = addTitleAndBox(sub, stateDef); sub = addTitleAndBox(sub, stateDef);
let boxBounds = sub.node().getBBox(); let boxBounds = sub.node().getBBox();
node.width = boxBounds.width; node.width = boxBounds.width;
node.height = boxBounds.height + 2 * conf.padding; node.height = boxBounds.height + conf.padding / 2;
transformationLog[stateDef.id] = { y: conf.compositTitleSize }; transformationLog[stateDef.id] = { y: conf.compositTitleSize };
} else { } else {
// sub = addIdAndBox(sub, stateDef); // sub = addIdAndBox(sub, stateDef);