commit
91d986970b
|
@ -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']
|
|
@ -2,19 +2,20 @@
|
||||||
import { imgSnapshotTest } from '../../helpers/util';
|
import { imgSnapshotTest } from '../../helpers/util';
|
||||||
|
|
||||||
describe('State diagram', () => {
|
describe('State diagram', () => {
|
||||||
it('should render a flowchart full of circles', () => {
|
it('should render a state with states in it', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`
|
`
|
||||||
stateDiagram
|
stateDiagram
|
||||||
State1: The state with a note
|
state PersonalizedCockpit {
|
||||||
note right of State1
|
Other
|
||||||
Important information! You\ncan write
|
state Parent {
|
||||||
notes with multiple lines...
|
C
|
||||||
Here is another line...
|
}
|
||||||
And another line...
|
}
|
||||||
end note
|
|
||||||
`,
|
`,
|
||||||
{}
|
{
|
||||||
|
logLevel: 0,
|
||||||
|
}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -106,6 +106,22 @@ describe('State diagram', () => {
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
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', () => {
|
it('should render a states with descriptions including multi-line descriptions', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`
|
`
|
||||||
|
@ -276,4 +292,33 @@ describe('State diagram', () => {
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
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,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -8,12 +8,18 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>info below</h1>
|
<h1>info below</h1>
|
||||||
<div class="mermaid">graph TB
|
<div style="display: flex;">
|
||||||
a --> b
|
<div class="mermaid">stateDiagram
|
||||||
a --> c
|
[*] --> State1
|
||||||
a --> d
|
State1 --> State2 : Transition 1
|
||||||
</div>
|
State1 --> State3 : Transition 2
|
||||||
<script src="./mermaid.js"></script>
|
State1 --> State4 : Transition 3
|
||||||
|
State1 --> State5 : Transition 4
|
||||||
|
State2 --> State3 : Transition 5
|
||||||
|
State1 --> [*]
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="./mermaid.js"></script>
|
||||||
<script>
|
<script>
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
theme: 'forest',
|
theme: 'forest',
|
||||||
|
|
16
package.json
16
package.json
|
@ -49,8 +49,8 @@
|
||||||
"@braintree/sanitize-url": "^3.1.0",
|
"@braintree/sanitize-url": "^3.1.0",
|
||||||
"crypto-random-string": "^3.0.1",
|
"crypto-random-string": "^3.0.1",
|
||||||
"d3": "^5.7.0",
|
"d3": "^5.7.0",
|
||||||
"dagre-d3-unofficial": "0.6.4",
|
|
||||||
"dagre": "^0.8.4",
|
"dagre": "^0.8.4",
|
||||||
|
"dagre-d3": "^0.6.4",
|
||||||
"graphlib": "^2.1.7",
|
"graphlib": "^2.1.7",
|
||||||
"he": "^1.2.0",
|
"he": "^1.2.0",
|
||||||
"lodash": "^4.17.11",
|
"lodash": "^4.17.11",
|
||||||
|
@ -59,31 +59,31 @@
|
||||||
"scope-css": "^1.2.1"
|
"scope-css": "^1.2.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"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/core": "^7.2.2",
|
||||||
"@babel/preset-env": "^7.2.0",
|
"@babel/preset-env": "^7.2.0",
|
||||||
"@babel/register": "^7.0.0",
|
"@babel/register": "^7.0.0",
|
||||||
"@percy/cypress": "^2.0.1",
|
"@percy/cypress": "^2.0.1",
|
||||||
"babel-core": "7.0.0-bridge.0",
|
"babel-core": "7.0.0-bridge.0",
|
||||||
"babel-jest": "^23.6.0",
|
"babel-jest": "^24.9.0",
|
||||||
"babel-loader": "^8.0.4",
|
"babel-loader": "^8.0.4",
|
||||||
"coveralls": "^3.0.2",
|
"coveralls": "^3.0.2",
|
||||||
"css-loader": "^2.0.1",
|
"css-loader": "^2.0.1",
|
||||||
"css-to-string-loader": "^0.1.3",
|
"css-to-string-loader": "^0.1.3",
|
||||||
"cypress": "3.4.0",
|
"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",
|
"husky": "^1.2.1",
|
||||||
"identity-obj-proxy": "^3.0.0",
|
"identity-obj-proxy": "^3.0.0",
|
||||||
"jest": "^24.9.0",
|
"jest": "^24.9.0",
|
||||||
"jison": "^0.4.18",
|
"jison": "^0.4.18",
|
||||||
"moment": "^2.23.0",
|
"moment": "^2.23.0",
|
||||||
"node-sass": "^4.12.0",
|
"node-sass": "^4.12.0",
|
||||||
|
"prettier": "^1.18.2",
|
||||||
"puppeteer": "^1.17.0",
|
"puppeteer": "^1.17.0",
|
||||||
"sass-loader": "^7.1.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": "^4.27.1",
|
||||||
"webpack-cli": "^3.1.2",
|
"webpack-cli": "^3.1.2",
|
||||||
"webpack-dev-server": "^3.4.1",
|
"webpack-dev-server": "^3.4.1",
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import dagreD3 from 'dagre-d3-unofficial';
|
import dagreD3 from 'dagre-d3';
|
||||||
|
|
||||||
function question(parent, bbox, node) {
|
function question(parent, bbox, node) {
|
||||||
const w = bbox.width;
|
const w = bbox.width;
|
||||||
|
|
|
@ -6,10 +6,10 @@ import flow from './parser/flow';
|
||||||
import { getConfig } from '../../config';
|
import { getConfig } from '../../config';
|
||||||
|
|
||||||
const newDagreD3 = true;
|
const newDagreD3 = true;
|
||||||
import dagreD3 from 'dagre-d3-unofficial';
|
import dagreD3 from 'dagre-d3';
|
||||||
// const newDagreD3 = false;
|
// 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 { logger } from '../../logger';
|
||||||
import { interpolateToCurve } from '../../utils';
|
import { interpolateToCurve } from '../../utils';
|
||||||
import flowChartShapes from './flowChartShapes';
|
import flowChartShapes from './flowChartShapes';
|
||||||
|
|
|
@ -73,7 +73,7 @@ export const drawDescrState = (g, stateDef) => {
|
||||||
const title = g
|
const title = g
|
||||||
.append('text')
|
.append('text')
|
||||||
.attr('x', 2 * getConfig().state.padding)
|
.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('font-size', getConfig().state.fontSize)
|
||||||
.attr('class', 'state-title')
|
.attr('class', 'state-title')
|
||||||
.text(stateDef.descriptions[0]);
|
.text(stateDef.descriptions[0]);
|
||||||
|
@ -87,7 +87,7 @@ export const drawDescrState = (g, stateDef) => {
|
||||||
.attr(
|
.attr(
|
||||||
'y',
|
'y',
|
||||||
titleHeight +
|
titleHeight +
|
||||||
getConfig().state.padding * 0.2 +
|
getConfig().state.padding * 0.4 +
|
||||||
getConfig().state.dividerMargin +
|
getConfig().state.dividerMargin +
|
||||||
getConfig().state.textHeight
|
getConfig().state.textHeight
|
||||||
)
|
)
|
||||||
|
@ -129,71 +129,108 @@ export const drawDescrState = (g, stateDef) => {
|
||||||
* Adds the creates a box around the existing content and adds a
|
* Adds the creates a box around the existing content and adds a
|
||||||
* panel for the id on top of the content.
|
* panel for the id on top of the content.
|
||||||
*/
|
*/
|
||||||
export const addIdAndBox = (g, stateDef) => {
|
/**
|
||||||
// TODO Move hardcodings to conf
|
* Function that creates an title row and a frame around a substate for a composit state diagram.
|
||||||
// const addTspan = function(textEl, txt, isFirst) {
|
* The function returns a new d3 svg object with updated width and height properties;
|
||||||
// const tSpan = textEl
|
* @param {*} g The d3 svg object for the substate to framed
|
||||||
// .append('tspan')
|
* @param {*} stateDef The info about the
|
||||||
// .attr('x', 2 * getConfig().state.padding)
|
*/
|
||||||
// .text(txt);
|
export const addTitleAndBox = (g, stateDef, altBkg) => {
|
||||||
// if (!isFirst) {
|
const pad = getConfig().state.padding;
|
||||||
// tSpan.attr('dy', getConfig().state.textHeight);
|
const dblPad = 2 * getConfig().state.padding;
|
||||||
// }
|
const orgBox = g.node().getBBox();
|
||||||
// };
|
const orgWidth = orgBox.width;
|
||||||
|
const orgX = orgBox.x;
|
||||||
|
|
||||||
const title = g
|
const title = g
|
||||||
.append('text')
|
.append('text')
|
||||||
.attr('x', 2 * getConfig().state.padding)
|
.attr('x', 0)
|
||||||
.attr('y', getConfig().state.titleShift)
|
.attr('y', getConfig().state.titleShift)
|
||||||
.attr('font-size', getConfig().state.fontSize)
|
.attr('font-size', getConfig().state.fontSize)
|
||||||
.attr('class', 'state-title')
|
.attr('class', 'state-title')
|
||||||
.text(stateDef.id);
|
.text(stateDef.id);
|
||||||
|
|
||||||
const titleBox = title.node().getBBox();
|
const titleBox = title.node().getBBox();
|
||||||
|
const titleWidth = titleBox.width + dblPad;
|
||||||
const lineY = 1 - getConfig().state.textHeight;
|
let width = Math.max(titleWidth, orgWidth); // + dblPad;
|
||||||
const descrLine = g
|
if (width === orgWidth) {
|
||||||
.append('line') // text label for the x axis
|
width = width + dblPad;
|
||||||
.attr('x1', 0)
|
}
|
||||||
.attr('y1', lineY)
|
let startX;
|
||||||
.attr('y2', lineY)
|
// const lineY = 1 - getConfig().state.textHeight;
|
||||||
.attr('class', 'descr-divider');
|
// 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();
|
const graphBox = g.node().getBBox();
|
||||||
title.attr('x', graphBox.width / 2 - titleBox.width / 2);
|
// console.warn(width / 2, titleWidth / 2, getConfig().state.padding, orgBox);
|
||||||
descrLine.attr('x2', graphBox.width + getConfig().state.padding);
|
// 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
|
// White color
|
||||||
g.insert('rect', ':first-child')
|
g.insert('rect', ':first-child')
|
||||||
.attr('x', graphBox.x)
|
.attr('x', startX)
|
||||||
.attr('y', lineY)
|
.attr('y', lineY)
|
||||||
.attr('class', 'composit')
|
.attr('class', altBkg ? 'alt-composit' : 'composit')
|
||||||
.attr('width', graphBox.width + getConfig().state.padding)
|
.attr('width', width)
|
||||||
.attr(
|
.attr(
|
||||||
'height',
|
'height',
|
||||||
graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1
|
graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1
|
||||||
)
|
)
|
||||||
.attr('rx', '0');
|
.attr('rx', '0');
|
||||||
|
|
||||||
|
title.attr('x', startX + pad);
|
||||||
|
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')
|
||||||
.attr('x', graphBox.x)
|
.attr('x', startX)
|
||||||
.attr(
|
.attr(
|
||||||
'y',
|
'y',
|
||||||
getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
|
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
|
// Just needs to be higher then the descr line, will be clipped by the white color box
|
||||||
.attr('height', getConfig().state.textHeight * 3)
|
.attr('height', getConfig().state.textHeight * 3)
|
||||||
.attr('rx', getConfig().state.radius);
|
.attr('rx', getConfig().state.radius);
|
||||||
|
|
||||||
// Full background
|
// Full background
|
||||||
g.insert('rect', ':first-child')
|
g.insert('rect', ':first-child')
|
||||||
.attr('x', graphBox.x)
|
.attr('x', startX)
|
||||||
.attr(
|
.attr(
|
||||||
'y',
|
'y',
|
||||||
getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
|
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('height', graphBox.height + 3 + 2 * getConfig().state.textHeight)
|
||||||
.attr('rx', getConfig().state.radius);
|
.attr('rx', getConfig().state.radius);
|
||||||
|
|
||||||
|
|
|
@ -5,40 +5,19 @@ import { logger } from '../../logger';
|
||||||
import stateDb from './stateDb';
|
import stateDb from './stateDb';
|
||||||
import { parser } from './parser/stateDiagram';
|
import { parser } from './parser/stateDiagram';
|
||||||
// import idCache from './id-cache';
|
// import idCache from './id-cache';
|
||||||
import { drawState, addIdAndBox, drawEdge } from './shapes';
|
import { drawState, addTitleAndBox, drawEdge } from './shapes';
|
||||||
import { getConfig } from '../../config';
|
import { getConfig } from '../../config';
|
||||||
|
|
||||||
parser.yy = stateDb;
|
parser.yy = stateDb;
|
||||||
|
|
||||||
// TODO Move conf object to main conf in mermaidAPI
|
// TODO Move conf object to main conf in mermaidAPI
|
||||||
let conf;
|
let conf;
|
||||||
// {
|
|
||||||
// // Used
|
|
||||||
// padding: 5,
|
|
||||||
// // Font size factor, this is used to guess the width of the edges labels before rendering by dagre
|
|
||||||
// // layout. This might need updating if/when switching font
|
|
||||||
// fontSizeFactor: 5.02,
|
|
||||||
// labelHeight: 16,
|
|
||||||
// edgeLengthFactor: '20',
|
|
||||||
// compositTitleSize: 35
|
|
||||||
// };
|
|
||||||
|
|
||||||
const transformationLog = {};
|
const transformationLog = {};
|
||||||
|
|
||||||
export const setConf = function() {};
|
export const setConf = function() {};
|
||||||
|
|
||||||
// Todo optimize
|
// Todo optimize
|
||||||
// const getGraphId = function(label) {
|
|
||||||
// const keys = idCache.keys();
|
|
||||||
|
|
||||||
// for (let i = 0; i < keys.length; i++) {
|
|
||||||
// if (idCache.get(keys[i]).label === label) {
|
|
||||||
// return keys[i];
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// return undefined;
|
|
||||||
// };
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Setup arrow head and define the marker. The result is appended to the svg.
|
* Setup arrow head and define the marker. The result is appended to the svg.
|
||||||
|
@ -68,11 +47,11 @@ export const draw = function(text, id) {
|
||||||
parser.parse(text);
|
parser.parse(text);
|
||||||
logger.debug('Rendering diagram ' + text);
|
logger.debug('Rendering diagram ' + text);
|
||||||
|
|
||||||
// /// / Fetch the default direction, use TD if none was found
|
// Fetch the default direction, use TD if none was found
|
||||||
const diagram = d3.select(`[id='${id}']`);
|
const diagram = d3.select(`[id='${id}']`);
|
||||||
insertMarkers(diagram);
|
insertMarkers(diagram);
|
||||||
|
|
||||||
// // Layout graph, Create a new directed graph
|
// Layout graph, Create a new directed graph
|
||||||
const graph = new graphlib.Graph({
|
const graph = new graphlib.Graph({
|
||||||
multigraph: false,
|
multigraph: false,
|
||||||
compound: true,
|
compound: true,
|
||||||
|
@ -81,13 +60,13 @@ export const draw = function(text, id) {
|
||||||
// ranksep: '20'
|
// ranksep: '20'
|
||||||
});
|
});
|
||||||
|
|
||||||
// // Default to assigning a new object as a label for each new edge.
|
// Default to assigning a new object as a label for each new edge.
|
||||||
graph.setDefaultEdgeLabel(function() {
|
graph.setDefaultEdgeLabel(function() {
|
||||||
return {};
|
return {};
|
||||||
});
|
});
|
||||||
|
|
||||||
const rootDoc = stateDb.getRootDoc();
|
const rootDoc = stateDb.getRootDoc();
|
||||||
renderDoc(rootDoc, diagram);
|
renderDoc(rootDoc, diagram, undefined, false);
|
||||||
|
|
||||||
const padding = conf.padding;
|
const padding = conf.padding;
|
||||||
const bounds = diagram.node().getBBox();
|
const bounds = diagram.node().getBBox();
|
||||||
|
@ -100,7 +79,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 * 2);
|
diagram.attr('width', width * 1.75);
|
||||||
// diagram.attr('height', bounds.height * 3 + conf.padding * 2);
|
// diagram.attr('height', bounds.height * 3 + conf.padding * 2);
|
||||||
diagram.attr(
|
diagram.attr(
|
||||||
'viewBox',
|
'viewBox',
|
||||||
|
@ -128,12 +107,21 @@ const getRows = s => {
|
||||||
return str.split('#br#');
|
return str.split('#br#');
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderDoc = (doc, diagram, parentId) => {
|
const renderDoc = (doc, diagram, parentId, altBkg) => {
|
||||||
// // Layout graph, Create a new directed graph
|
// // Layout graph, Create a new directed graph
|
||||||
const graph = new graphlib.Graph({
|
const graph = new graphlib.Graph({
|
||||||
compound: true
|
compound: true
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let i;
|
||||||
|
let edgeFreeDoc = true;
|
||||||
|
for (i = 0; i < doc.length; i++) {
|
||||||
|
if (doc[i].stmt === 'relation') {
|
||||||
|
edgeFreeDoc = false;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Set an object for the graph label
|
// Set an object for the graph label
|
||||||
if (parentId)
|
if (parentId)
|
||||||
graph.setGraph({
|
graph.setGraph({
|
||||||
|
@ -142,8 +130,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 +143,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
|
||||||
|
@ -185,14 +177,14 @@ const renderDoc = (doc, diagram, parentId) => {
|
||||||
.append('g')
|
.append('g')
|
||||||
.attr('id', stateDef.id)
|
.attr('id', stateDef.id)
|
||||||
.attr('class', 'stateGroup');
|
.attr('class', 'stateGroup');
|
||||||
node = renderDoc(stateDef.doc, sub, stateDef.id);
|
node = renderDoc(stateDef.doc, sub, stateDef.id, !altBkg);
|
||||||
|
|
||||||
if (first) {
|
if (first) {
|
||||||
// first = false;
|
// first = false;
|
||||||
sub = addIdAndBox(sub, stateDef);
|
sub = addTitleAndBox(sub, stateDef, altBkg);
|
||||||
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);
|
||||||
|
@ -278,8 +270,8 @@ const renderDoc = (doc, diagram, parentId) => {
|
||||||
pShift = 0;
|
pShift = 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
divider.setAttribute('x1', 0 - pShift);
|
divider.setAttribute('x1', 0 - pShift + 8);
|
||||||
divider.setAttribute('x2', pWidth - pShift);
|
divider.setAttribute('x2', pWidth - pShift - 8);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
logger.debug('No Node ' + v + ': ' + JSON.stringify(graph.node(v)));
|
logger.debug('No Node ' + v + ': ' + JSON.stringify(graph.node(v)));
|
||||||
|
|
|
@ -37,6 +37,11 @@ g.stateGroup line {
|
||||||
border-bottom: 1px
|
border-bottom: 1px
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.stateGroup .alt-composit {
|
||||||
|
fill: #e0e0e0;
|
||||||
|
border-bottom: 1px
|
||||||
|
}
|
||||||
|
|
||||||
.state-note {
|
.state-note {
|
||||||
stroke: $noteBorderColor;
|
stroke: $noteBorderColor;
|
||||||
fill: $noteBkgColor;
|
fill: $noteBkgColor;
|
||||||
|
|
|
@ -40,10 +40,7 @@ export const jsConfig = () => {
|
||||||
mermaid: './src/mermaid.js'
|
mermaid: './src/mermaid.js'
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: ['.wasm', '.mjs', '.js', '.json', '.jison'],
|
extensions: ['.wasm', '.mjs', '.js', '.json', '.jison']
|
||||||
alias: {
|
|
||||||
'dagre-d3': 'dagre-d3-unofficial'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
node: {
|
node: {
|
||||||
fs: 'empty' // jison generated code requires 'fs'
|
fs: 'empty' // jison generated code requires 'fs'
|
||||||
|
|
Loading…
Reference in New Issue