Skip to content

Commit

Permalink
Merge pull request #5 from mermaid-js/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@jgreywolf
jgreywolf authored Dec 5, 2019
2 parents a3dd0e5 + 9fe0aa0 commit 91d9869
Show file tree
Hide file tree
Showing 12 changed files with 1,361 additions and 1,755 deletions.
12 changes: 12 additions & 0 deletions .github/FUNDING.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# These are supported funding model platforms

github: [knsv]
#patreon: # Replace with a single Patreon username
#open_collective: # Replace with a single Open Collective username
#ko_fi: # Replace with a single Ko-fi username
#tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
#community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
#liberapay: # Replace with a single Liberapay username
#issuehunt: # Replace with a single IssueHunt username
#otechie: # Replace with a single Otechie username
#custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
21 changes: 11 additions & 10 deletions cypress/integration/rendering/current.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,20 @@
import { imgSnapshotTest } from '../../helpers/util';

describe('State diagram', () => {
it('should render a flowchart full of circles', () => {
it('should render a state with states in it', () => {
imgSnapshotTest(
`
stateDiagram
State1: The state with a note
note right of State1
Important information! You\ncan write
notes with multiple lines...
Here is another line...
And another line...
end note
stateDiagram
state PersonalizedCockpit {
Other
state Parent {
C
}
}
`,
{}
{
logLevel: 0,
}
);
});
});
45 changes: 45 additions & 0 deletions cypress/integration/rendering/stateDiagram.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,22 @@ describe('State diagram', () => {
);
cy.get('svg');
});
it('should render a note with multiple lines in it', () => {
imgSnapshotTest(
`
stateDiagram
State1: The state with a note
note right of State1
Important information! You\ncan write
notes with multiple lines...
Here is another line...
And another line...
end note
`,
{}
);
});

it('should render a states with descriptions including multi-line descriptions', () => {
imgSnapshotTest(
`
Expand Down Expand Up @@ -276,4 +292,33 @@ describe('State diagram', () => {
);
cy.get('svg');
});
it('should render a state with states in it', () => {
imgSnapshotTest(
`
stateDiagram
state PilotCockpit {
state Parent {
C
}
}
`,
{
logLevel: 0,
}
);
});
it('Simplest compone state', () => {
imgSnapshotTest(
`
stateDiagram
state Parent {
C
}
`,
{
logLevel: 0,
}
);
});

});
18 changes: 12 additions & 6 deletions cypress/platform/current.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,18 @@
</head>
<body>
<h1>info below</h1>
<div class="mermaid">graph TB
a --> b
a --> c
a --> d
</div>
<script src="./mermaid.js"></script>
<div style="display: flex;">
<div class="mermaid">stateDiagram
[*] --> State1
State1 --> State2 : Transition 1
State1 --> State3 : Transition 2
State1 --> State4 : Transition 3
State1 --> State5 : Transition 4
State2 --> State3 : Transition 5
State1 --> [*]
</div>
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
Expand Down
16 changes: 8 additions & 8 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,8 @@
"@braintree/sanitize-url": "^3.1.0",
"crypto-random-string": "^3.0.1",
"d3": "^5.7.0",
"dagre-d3-unofficial": "0.6.4",
"dagre": "^0.8.4",
"dagre-d3": "^0.6.4",
"graphlib": "^2.1.7",
"he": "^1.2.0",
"lodash": "^4.17.11",
Expand All @@ -59,31 +59,31 @@
"scope-css": "^1.2.1"
},
"devDependencies": {
"documentation": "^12.0.1",
"prettier": "^1.18.2",
"eslint": "^6.3.0",
"eslint-config-prettier": "^6.3.0",
"eslint-plugin-prettier": "^3.1.0",
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.0",
"@babel/register": "^7.0.0",
"@percy/cypress": "^2.0.1",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.4",
"coveralls": "^3.0.2",
"css-loader": "^2.0.1",
"css-to-string-loader": "^0.1.3",
"cypress": "3.4.0",
"documentation": "^12.0.1",
"eslint": "^6.3.0",
"eslint-config-prettier": "^6.3.0",
"eslint-plugin-prettier": "^3.1.0",
"husky": "^1.2.1",
"identity-obj-proxy": "^3.0.0",
"jest": "^24.9.0",
"jison": "^0.4.18",
"moment": "^2.23.0",
"node-sass": "^4.12.0",
"prettier": "^1.18.2",
"puppeteer": "^1.17.0",
"sass-loader": "^7.1.0",
"start-server-and-test": "^1.10.0",
"start-server-and-test": "^1.10.6",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.4.1",
Expand Down
2 changes: 1 addition & 1 deletion src/diagrams/flowchart/flowChartShapes.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import dagreD3 from 'dagre-d3-unofficial';
import dagreD3 from 'dagre-d3';

function question(parent, bbox, node) {
const w = bbox.width;
Expand Down
4 changes: 2 additions & 2 deletions src/diagrams/flowchart/flowRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import flow from './parser/flow';
import { getConfig } from '../../config';

const newDagreD3 = true;
import dagreD3 from 'dagre-d3-unofficial';
import dagreD3 from 'dagre-d3';
// const newDagreD3 = false;

import addHtmlLabel from 'dagre-d3-unofficial/lib/label/add-html-label.js';
import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
import { logger } from '../../logger';
import { interpolateToCurve } from '../../utils';
import flowChartShapes from './flowChartShapes';
Expand Down
99 changes: 68 additions & 31 deletions src/diagrams/state/shapes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export const drawDescrState = (g, stateDef) => {
const title = g
.append('text')
.attr('x', 2 * getConfig().state.padding)
.attr('y', getConfig().state.textHeight + 1.5 * getConfig().state.padding)
.attr('y', getConfig().state.textHeight + 1.3 * getConfig().state.padding)
.attr('font-size', getConfig().state.fontSize)
.attr('class', 'state-title')
.text(stateDef.descriptions[0]);
Expand All @@ -87,7 +87,7 @@ export const drawDescrState = (g, stateDef) => {
.attr(
'y',
titleHeight +
getConfig().state.padding * 0.2 +
getConfig().state.padding * 0.4 +
getConfig().state.dividerMargin +
getConfig().state.textHeight
)
Expand Down Expand Up @@ -129,71 +129,108 @@ export const drawDescrState = (g, stateDef) => {
* Adds the creates a box around the existing content and adds a
* panel for the id on top of the content.
*/
export const addIdAndBox = (g, stateDef) => {
// TODO Move hardcodings to conf
// const addTspan = function(textEl, txt, isFirst) {
// const tSpan = textEl
// .append('tspan')
// .attr('x', 2 * getConfig().state.padding)
// .text(txt);
// if (!isFirst) {
// tSpan.attr('dy', getConfig().state.textHeight);
// }
// };
/**
* Function that creates an title row and a frame around a substate for a composit state diagram.
* The function returns a new d3 svg object with updated width and height properties;
* @param {*} g The d3 svg object for the substate to framed
* @param {*} stateDef The info about the
*/
export const addTitleAndBox = (g, stateDef, altBkg) => {
const pad = getConfig().state.padding;
const dblPad = 2 * getConfig().state.padding;
const orgBox = g.node().getBBox();
const orgWidth = orgBox.width;
const orgX = orgBox.x;

const title = g
.append('text')
.attr('x', 2 * getConfig().state.padding)
.attr('x', 0)
.attr('y', getConfig().state.titleShift)
.attr('font-size', getConfig().state.fontSize)
.attr('class', 'state-title')
.text(stateDef.id);

const titleBox = title.node().getBBox();

const lineY = 1 - getConfig().state.textHeight;
const descrLine = g
.append('line') // text label for the x axis
.attr('x1', 0)
.attr('y1', lineY)
.attr('y2', lineY)
.attr('class', 'descr-divider');
const titleWidth = titleBox.width + dblPad;
let width = Math.max(titleWidth, orgWidth); // + dblPad;
if (width === orgWidth) {
width = width + dblPad;
}
let startX;
// const lineY = 1 - getConfig().state.textHeight;
// const descrLine = g
// .append('line') // text label for the x axis
// .attr('x1', 0)
// .attr('y1', lineY)
// .attr('y2', lineY)
// .attr('class', 'descr-divider');

const graphBox = g.node().getBBox();
title.attr('x', graphBox.width / 2 - titleBox.width / 2);
descrLine.attr('x2', graphBox.width + getConfig().state.padding);
// console.warn(width / 2, titleWidth / 2, getConfig().state.padding, orgBox);
// descrLine.attr('x2', graphBox.width + getConfig().state.padding);

if (stateDef.doc) {
// cnsole.warn(
// stateDef.id,
// 'orgX: ',
// orgX,
// 'width: ',
// width,
// 'titleWidth: ',
// titleWidth,
// 'orgWidth: ',
// orgWidth,
// 'width',
// width
// );
}

startX = orgX - pad;
if (titleWidth > orgWidth) {
startX = (orgWidth - width) / 2 + pad;
}
if (Math.abs(orgX - graphBox.x) < pad) {
if (titleWidth > orgWidth) {
startX = orgX - (titleWidth - orgWidth) / 2;
}
}

const lineY = 1 - getConfig().state.textHeight;
// White color
g.insert('rect', ':first-child')
.attr('x', graphBox.x)
.attr('x', startX)
.attr('y', lineY)
.attr('class', 'composit')
.attr('width', graphBox.width + getConfig().state.padding)
.attr('class', altBkg ? 'alt-composit' : 'composit')
.attr('width', width)
.attr(
'height',
graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1
)
.attr('rx', '0');

title.attr('x', startX + pad);
if (titleWidth <= orgWidth) title.attr('x', orgX + (width - dblPad) / 2 - titleWidth / 2 + pad);

// Title background
g.insert('rect', ':first-child')
.attr('x', graphBox.x)
.attr('x', startX)
.attr(
'y',
getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
)
.attr('width', graphBox.width + getConfig().state.padding)
.attr('width', width)
// Just needs to be higher then the descr line, will be clipped by the white color box
.attr('height', getConfig().state.textHeight * 3)
.attr('rx', getConfig().state.radius);

// Full background
g.insert('rect', ':first-child')
.attr('x', graphBox.x)
.attr('x', startX)
.attr(
'y',
getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
)
.attr('width', graphBox.width + getConfig().state.padding)
.attr('width', width)
.attr('height', graphBox.height + 3 + 2 * getConfig().state.textHeight)
.attr('rx', getConfig().state.radius);

Expand Down
Loading

0 comments on commit 91d9869

Please sign in to comment.