marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-29 21:26:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

#1033 Fix for diagram bounds and viewbox

Browse Source
This commit is contained in:
Knut Sveidqvist
2019-10-27 16:58:32 +01:00
parent e550d974da
commit b113436055
3 changed files with 32 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
cypress/integration/rendering/current.spec.js
View File

@@ -5,29 +5,15 @@ describe('State diagram', () => {
it('should render a flowchart full of circles', () => { it('should render a flowchart full of circles', () => {
imgSnapshotTest( imgSnapshotTest(
` `
graph LR stateDiagram
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget) State1: The state with a note
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget) `,
35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
`,
{} {}
); );
}); });
}); });
// note right of State1
// Important information! You\ncan write
// notes with multiple lines...
// Here is another line...
// end note

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

@@ -89,17 +89,34 @@ export const draw = function(text, id) {
const rootDoc = stateDb.getRootDoc(); const rootDoc = stateDb.getRootDoc();
renderDoc(rootDoc, diagram); renderDoc(rootDoc, diagram);
const padding = conf.padding;
const bounds = diagram.node().getBBox(); const bounds = diagram.node().getBBox();
diagram.attr('height', '100%'); console.warn(bounds);
diagram.attr('style', `width: ${bounds.width * 3 + conf.padding * 2};`);
const width = bounds.width + padding * 2;
const height = bounds.height + padding * 2;
// diagram.attr('height', '100%');
// diagram.attr('style', `width: ${bounds.width * 3 + conf.padding * 2};`);
// diagram.attr('height', height);
// Zoom in a bit
diagram.attr('width', width * 2);
// diagram.attr('height', bounds.height * 3 + conf.padding * 2);
diagram.attr( diagram.attr(
'viewBox', 'viewBox',
`${conf.padding * -1} ${conf.padding * -1} ` + `${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height
(bounds.width * 1.5 + conf.padding * 2) +
' ' +
(bounds.height + conf.padding * 5)
); );
// diagram.attr('transform', `translate(, 0)`);
// diagram.attr(
// 'viewBox',
// `${conf.padding * -1} ${conf.padding * -1} ` +
// (bounds.width * 1.5 + conf.padding * 2) +
// ' ' +
// (bounds.height + conf.padding * 5)
// );
}; };
const getLabelWidth = text => { const getLabelWidth = text => {
return text ? text.length * conf.fontSizeFactor : 1; return text ? text.length * conf.fontSizeFactor : 1;

2
src/mermaidAPI.js
View File

@@ -310,7 +310,7 @@ const config = {
state: { state: {
dividerMargin: 10, dividerMargin: 10,
sizeUnit: 5, sizeUnit: 5,
padding: 5, padding: 8,
textHeight: 10, textHeight: 10,
titleShift: -15, titleShift: -15,
noteMargin: 10, noteMargin: 10,