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

Merge remote-tracking branch 'origin/master' into flow/trapezoid

Browse Source
This commit is contained in:
Adam Wulf
2019-06-25 22:36:13 -05:00
parent db2a21cea1 95967151ae
commit 24600355c8
81 changed files with 8414 additions and 4300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/diagrams/flowchart/flowDb.js
View File

@@ -7,6 +7,7 @@ let vertices = {}
let edges = []
let classes = []
let subGraphs = []
let subGraphLookup = {}
let tooltips = {}
let subCount = 0
let direction
@@ -18,8 +19,9 @@ let funs = []
* @param text
* @param type
* @param style
* @param classes
*/
export const addVertex = function (id, text, type, style) {
export const addVertex = function (id, text, type, style, classes) {
let txt
if (typeof id === 'undefined') {
@@ -45,9 +47,6 @@ export const addVertex = function (id, text, type, style) {
if (typeof type !== 'undefined') {
vertices[id].type = type
}
if (typeof type !== 'undefined') {
vertices[id].type = type
}
if (typeof style !== 'undefined') {
if (style !== null) {
style.forEach(function (s) {
@@ -55,6 +54,13 @@ export const addVertex = function (id, text, type, style) {
})
}
}
if (typeof classes !== 'undefined') {
if (classes !== null) {
classes.forEach(function (s) {
vertices[id].classes.push(s)
})
}
}
}
/**
@@ -90,12 +96,14 @@ export const addLink = function (start, end, type, linktext) {
* @param pos
* @param interpolate
*/
export const updateLinkInterpolate = function (pos, interp) {
if (pos === 'default') {
edges.defaultInterpolate = interp
} else {
edges[pos].interpolate = interp
}
export const updateLinkInterpolate = function (positions, interp) {
positions.forEach(function (pos) {
if (pos === 'default') {
edges.defaultInterpolate = interp
} else {
edges[pos].interpolate = interp
}
})
}
/**
@@ -103,15 +111,17 @@ export const updateLinkInterpolate = function (pos, interp) {
* @param pos
* @param style
*/
export const updateLink = function (pos, style) {
if (pos === 'default') {
edges.defaultStyle = style
} else {
if (utils.isSubstringInArray('fill', style) === -1) {
style.push('fill:none')
export const updateLink = function (positions, style) {
positions.forEach(function (pos) {
if (pos === 'default') {
edges.defaultStyle = style
} else {
if (utils.isSubstringInArray('fill', style) === -1) {
style.push('fill:none')
}
edges[pos].style = style
}
edges[pos].style = style
}
})
}
export const addClass = function (id, style) {
@@ -137,27 +147,28 @@ export const setDirection = function (dir) {
}
/**
* Called by parser when a graph definition is found, stores the direction of the chart.
* @param dir
* Called by parser when a special node is found, e.g. a clickable element.
* @param ids Comma separated list of ids
* @param className Class to add
*/
export const setClass = function (id, className) {
if (id.indexOf(',') > 0) {
id.split(',').forEach(function (id2) {
if (typeof vertices[id2] !== 'undefined') {
vertices[id2].classes.push(className)
}
})
} else {
export const setClass = function (ids, className) {
ids.split(',').forEach(function (id) {
if (typeof vertices[id] !== 'undefined') {
vertices[id].classes.push(className)
}
}
if (typeof subGraphLookup[id] !== 'undefined') {
subGraphLookup[id].classes.push(className)
}
})
}
const setTooltip = function (id, tooltip) {
if (typeof tooltip !== 'undefined') {
tooltips[id] = tooltip
}
const setTooltip = function (ids, tooltip) {
ids.split(',').forEach(function (id) {
if (typeof tooltip !== 'undefined') {
tooltips[id] = tooltip
}
})
}
const setClickFun = function (id, functionName) {
@@ -176,43 +187,35 @@ const setClickFun = function (id, functionName) {
}
}
const setLink = function (id, linkStr) {
if (typeof linkStr === 'undefined') {
return
}
if (typeof vertices[id] !== 'undefined') {
funs.push(function (element) {
const elem = d3.select(element).select(`[id="${id}"]`)
if (elem !== null) {
elem.on('click', function () {
window.open(linkStr, 'newTab')
})
}
})
}
/**
* Called by parser when a link is found. Adds the URL to the vertex data.
* @param ids Comma separated list of ids
* @param linkStr URL to create a link for
* @param tooltip Tooltip for the clickable element
*/
export const setLink = function (ids, linkStr, tooltip) {
ids.split(',').forEach(function (id) {
if (typeof vertices[id] !== 'undefined') {
vertices[id].link = linkStr
}
})
setTooltip(ids, tooltip)
setClass(ids, 'clickable')
}
export const getTooltip = function (id) {
return tooltips[id]
}
/**
* Called by parser when a graph definition is found, stores the direction of the chart.
* @param dir
* Called by parser when a click definition is found. Registers an event handler.
* @param ids Comma separated list of ids
* @param functionName Function to be called on click
* @param tooltip Tooltip for the clickable element
*/
export const setClickEvent = function (id, functionName, link, tooltip) {
if (id.indexOf(',') > 0) {
id.split(',').forEach(function (id2) {
setTooltip(id2, tooltip)
setClickFun(id2, functionName)
setLink(id2, link)
setClass(id, 'clickable')
})
} else {
setTooltip(id, tooltip)
setClickFun(id, functionName)
setLink(id, link)
setClass(id, 'clickable')
}
export const setClickEvent = function (ids, functionName, tooltip) {
ids.split(',').forEach(function (id) { setClickFun(id, functionName) })
setTooltip(ids, tooltip)
setClass(ids, 'clickable')
}
export const bindFunctions = function (element) {
@@ -297,6 +300,7 @@ export const clear = function () {
funs = []
funs.push(setupToolTips)
subGraphs = []
subGraphLookup = {}
subCount = 0
tooltips = []
}
@@ -311,7 +315,7 @@ export const defaultStyle = function () {
/**
* Clears the internal graph db so that a new graph can be parsed.
*/
export const addSubGraph = function (list, title) {
export const addSubGraph = function (id, list, title) {
function uniq (a) {
const prims = { 'boolean': {}, 'number': {}, 'string': {} }
const objs = []
@@ -329,10 +333,13 @@ export const addSubGraph = function (list, title) {
nodeList = uniq(nodeList.concat.apply(nodeList, list))
const subGraph = { id: 'subGraph' + subCount, nodes: nodeList, title: title.trim() }
subGraphs.push(subGraph)
id = id || ('subGraph' + subCount)
title = title || ''
subCount = subCount + 1
return subGraph.id
const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [] }
subGraphs.push(subGraph)
subGraphLookup[id] = subGraph
return id
}
const getPosForId = function (id) {
@@ -409,6 +416,7 @@ export default {
setClass,
getTooltip,
setClickEvent,
setLink,
bindFunctions,
getDirection,
getVertices,

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

@@ -4,6 +4,7 @@ import * as d3 from 'd3'
import flowDb from './flowDb'
import flow from './parser/flow'
import dagreD3 from 'dagre-d3-renderer'
import addHtmlLabel from 'dagre-d3-renderer/lib/label/add-html-label.js'
import { logger } from '../../logger'
import { interpolateToCurve } from '../../utils'
@@ -21,7 +22,8 @@ export const setConf = function (cnf) {
* @param vert Object containing the vertices.
* @param g The graph that is to be drawn.
*/
export const addVertices = function (vert, g) {
export const addVertices = function (vert, g, svgId) {
const svg = d3.select(`[id="${svgId}"]`)
const keys = Object.keys(vert)
const styleFromStyleArr = function (styleStr, arr) {
@@ -35,45 +37,41 @@ export const addVertices = function (vert, g) {
return styleStr
}
// Iterate through each item in the vertice object (containing all the vertices found) in the graph definition
// Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
keys.forEach(function (id) {
const vertice = vert[id]
let verticeText
const vertex = vert[id]
/**
* Variable for storing the classes for the vertice
* Variable for storing the classes for the vertex
* @type {string}
*/
let classStr = ''
if (vertice.classes.length > 0) {
classStr = vertice.classes.join(' ')
if (vertex.classes.length > 0) {
classStr = vertex.classes.join(' ')
}
/**
* Variable for storing the extracted style for the vertice
* Variable for storing the extracted style for the vertex
* @type {string}
*/
let style = ''
// Create a compound style definition from the style definitions found for the node in the graph definition
style = styleFromStyleArr(style, vertice.styles)
style = styleFromStyleArr(style, vertex.styles)
// Use vertice id as text in the box if no text is provided by the graph definition
if (typeof vertice.text === 'undefined') {
verticeText = vertice.id
} else {
verticeText = vertice.text
}
// Use vertex id as text in the box if no text is provided by the graph definition
let vertexText = vertex.text !== undefined ? vertex.text : vertex.id
let labelTypeStr = ''
// We create a SVG label, either by delegating to addHtmlLabel or manually
let vertexNode
if (conf.htmlLabels) {
labelTypeStr = 'html'
verticeText = verticeText.replace(/fa:fa[\w-]+/g, function (s) {
return '<i class="fa ' + s.substring(3) + '"></i>'
})
// TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
const node = { label: vertexText.replace(/fa[lrsb]?:fa-[\w-]+/g, s => `<i class='${s.replace(':', ' ')}'></i>`) }
vertexNode = addHtmlLabel(svg, node).node()
vertexNode.parentNode.removeChild(vertexNode)
} else {
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text')
const rows = verticeText.split(/<br>/)
const rows = vertexText.split(/<br[/]{0,1}>/)
for (let j = 0; j < rows.length; j++) {
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan')
@@ -83,15 +81,22 @@ export const addVertices = function (vert, g) {
tspan.textContent = rows[j]
svgLabel.appendChild(tspan)
}
vertexNode = svgLabel
}
labelTypeStr = 'svg'
verticeText = svgLabel
// If the node has a link, we wrap it in a SVG link
if (vertex.link) {
const link = document.createElementNS('http://www.w3.org/2000/svg', 'a')
link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link)
link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener')
link.appendChild(vertexNode)
vertexNode = link
}
let radious = 0
let _shape = ''
// Set the shape based parameters
switch (vertice.type) {
switch (vertex.type) {
case 'round':
radious = 5
_shape = 'rect'
@@ -122,14 +127,12 @@ export const addVertices = function (vert, g) {
break
case 'group':
_shape = 'rect'
// Need to create a text node if using svg labels, see #367
verticeText = conf.htmlLabels ? '' : document.createElementNS('http://www.w3.org/2000/svg', 'text')
break
default:
_shape = 'rect'
}
// Add the node
g.setNode(vertice.id, { labelType: labelTypeStr, shape: _shape, label: verticeText, rx: radious, ry: radious, 'class': classStr, style: style, id: vertice.id })
g.setNode(vertex.id, { labelType: 'svg', shape: _shape, label: vertexNode, rx: radious, ry: radious, 'class': classStr, style: style, id: vertex.id })
})
}
@@ -201,7 +204,7 @@ export const addEdges = function (edges, g) {
edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>'
} else {
edgeData.labelType = 'text'
edgeData.style = 'stroke: #333; stroke-width: 1.5px;fill:none'
edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none'
edgeData.label = edge.text.replace(/<br>/g, '\n')
}
} else {
@@ -270,7 +273,7 @@ export const draw = function (text, id) {
const subGraphs = flowDb.getSubGraphs()
for (let i = subGraphs.length - 1; i >= 0; i--) {
subG = subGraphs[i]
flowDb.addVertex(subG.id, subG.title, 'group', undefined)
flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes)
}
// Fetch the verices/nodes and edges/links from the parsed graph definition
@@ -288,7 +291,7 @@ export const draw = function (text, id) {
g.setParent(subG.nodes[j], subG.id)
}
}
addVertices(vert, g)
addVertices(vert, g, id)
addEdges(edges, g)
// Create the renderer
@@ -464,6 +467,7 @@ export const draw = function (text, id) {
// Index nodes
flowDb.indexNodes('subGraph' + i)
// reposition labels
for (i = 0; i < subGraphs.length; i++) {
subG = subGraphs[i]
@@ -475,19 +479,9 @@ export const draw = function (text, id) {
const yPos = clusterRects[0].y.baseVal.value
const width = clusterRects[0].width.baseVal.value
const cluster = d3.select(clusterEl[0])
const te = cluster.append('text')
te.attr('x', xPos + width / 2)
te.attr('y', yPos + 14)
te.attr('fill', 'black')
te.attr('stroke', 'none')
const te = cluster.select('.label')
te.attr('transform', `translate(${xPos + width / 2}, ${yPos + 14})`)
te.attr('id', id + 'Text')
te.style('text-anchor', 'middle')
if (typeof subG.title === 'undefined') {
te.text('Undef')
} else {
te.text(subG.title)
}
}
}

36
src/diagrams/flowchart/parser/flow.jison
View File

@@ -227,10 +227,14 @@ statement
{$$=[];}
| clickStatement separator
{$$=[];}
| subgraph text separator document end
{$$=yy.addSubGraph($4,$2);}
| subgraph SPACE alphaNum SQS text SQE separator document end
{$$=yy.addSubGraph($3,$8,$5);}
| subgraph SPACE STR separator document end
{$$=yy.addSubGraph(undefined,$5,$3);}
| subgraph SPACE alphaNum separator document end
{$$=yy.addSubGraph($3,$5,$3);}
| subgraph separator document end
{$$=yy.addSubGraph($3,undefined);}
{$$=yy.addSubGraph(undefined,$3,undefined);}
;
separator: NEWLINE | SEMI | EOF ;
@@ -406,10 +410,10 @@ classStatement:CLASS SPACE alphaNum SPACE alphaNum
;
clickStatement
: CLICK SPACE alphaNum SPACE alphaNum {$$ = $1;yy.setClickEvent($3, $5, undefined, undefined);}
| CLICK SPACE alphaNum SPACE alphaNum SPACE STR {$$ = $1;yy.setClickEvent($3, $5, undefined, $7) ;}
| CLICK SPACE alphaNum SPACE STR {$$ = $1;yy.setClickEvent($3, undefined, $5, undefined);}
| CLICK SPACE alphaNum SPACE STR SPACE STR {$$ = $1;yy.setClickEvent($3, undefined, $5, $7 );}
: CLICK SPACE alphaNum SPACE alphaNum {$$ = $1;yy.setClickEvent($3, $5, undefined);}
| CLICK SPACE alphaNum SPACE alphaNum SPACE STR {$$ = $1;yy.setClickEvent($3, $5, $7) ;}
| CLICK SPACE alphaNum SPACE STR {$$ = $1;yy.setLink($3, $5, undefined);}
| CLICK SPACE alphaNum SPACE STR SPACE STR {$$ = $1;yy.setLink($3, $5, $7 );}
;
styleStatement:STYLE SPACE alphaNum SPACE stylesOpt
@@ -420,21 +424,27 @@ styleStatement:STYLE SPACE alphaNum SPACE stylesOpt
linkStyleStatement
: LINKSTYLE SPACE DEFAULT SPACE stylesOpt
{$$ = $1;yy.updateLink($3,$5);}
| LINKSTYLE SPACE NUM SPACE stylesOpt
{$$ = $1;yy.updateLink([$3],$5);}
| LINKSTYLE SPACE numList SPACE stylesOpt
{$$ = $1;yy.updateLink($3,$5);}
| LINKSTYLE SPACE DEFAULT SPACE INTERPOLATE SPACE alphaNum SPACE stylesOpt
{$$ = $1;yy.updateLinkInterpolate($3,$7);yy.updateLink($3,$9);}
| LINKSTYLE SPACE NUM SPACE INTERPOLATE SPACE alphaNum SPACE stylesOpt
{$$ = $1;yy.updateLinkInterpolate([$3],$7);yy.updateLink([$3],$9);}
| LINKSTYLE SPACE numList SPACE INTERPOLATE SPACE alphaNum SPACE stylesOpt
{$$ = $1;yy.updateLinkInterpolate($3,$7);yy.updateLink($3,$9);}
| LINKSTYLE SPACE DEFAULT SPACE INTERPOLATE SPACE alphaNum
{$$ = $1;yy.updateLinkInterpolate($3,$7);}
| LINKSTYLE SPACE NUM SPACE INTERPOLATE SPACE alphaNum
{$$ = $1;yy.updateLinkInterpolate([$3],$7);}
| LINKSTYLE SPACE numList SPACE INTERPOLATE SPACE alphaNum
{$$ = $1;yy.updateLinkInterpolate($3,$7);}
;
commentStatement: PCT PCT commentText;
numList: NUM
{$$ = [$1]}
| numList COMMA NUM
{$1.push($3);$$ = $1;}
;
stylesOpt: style
{$$ = [$1]}
| stylesOpt COMMA style

255
src/diagrams/flowchart/parser/flow.js
View File

File diff suppressed because one or more lines are too long

91
src/diagrams/flowchart/parser/flow.spec.js
View File

@@ -31,9 +31,34 @@ describe('when parsing ', function () {
expect(subgraph.nodes[0]).toBe('a1')
expect(subgraph.nodes[1]).toBe('a2')
expect(subgraph.title).toBe('One')
expect(subgraph.id).toBe('One')
})
it('should handle angle bracket ' > ' as direction LR', function () {
it('should handle subgraph with multiple words in title', function () {
const res = flow.parser.parse('graph TB\nsubgraph "Some Title"\n\ta1-->a2\nend')
const subgraphs = flow.parser.yy.getSubGraphs()
expect(subgraphs.length).toBe(1)
const subgraph = subgraphs[0]
expect(subgraph.nodes.length).toBe(2)
expect(subgraph.nodes[0]).toBe('a1')
expect(subgraph.nodes[1]).toBe('a2')
expect(subgraph.title).toBe('Some Title')
expect(subgraph.id).toBe('subGraph0')
});
it('should handle subgraph with id and title notation', function () {
const res = flow.parser.parse('graph TB\nsubgraph some-id[Some Title]\n\ta1-->a2\nend')
const subgraphs = flow.parser.yy.getSubGraphs()
expect(subgraphs.length).toBe(1)
const subgraph = subgraphs[0]
expect(subgraph.nodes.length).toBe(2)
expect(subgraph.nodes[0]).toBe('a1')
expect(subgraph.nodes[1]).toBe('a2')
expect(subgraph.title).toBe('Some Title')
expect(subgraph.id).toBe('some-id')
});
it("should handle angle bracket ' > ' as direction LR", function () {
const res = flow.parser.parse('graph >;A-->B;')
const vert = flow.parser.yy.getVertices()
@@ -51,7 +76,7 @@ describe('when parsing ', function () {
expect(edges[0].text).toBe('')
})
it('should handle angle bracket ' < ' as direction RL', function () {
it("should handle angle bracket ' < ' as direction RL", function () {
const res = flow.parser.parse('graph <;A-->B;')
const vert = flow.parser.yy.getVertices()
@@ -69,7 +94,7 @@ describe('when parsing ', function () {
expect(edges[0].text).toBe('')
})
it('should handle caret ' ^ ' as direction BT', function () {
it("should handle caret ' ^ ' as direction BT", function () {
const res = flow.parser.parse('graph ^;A-->B;')
const vert = flow.parser.yy.getVertices()
@@ -428,6 +453,28 @@ describe('when parsing ', function () {
expect(edges[0].type).toBe('arrow')
})
it('should handle multi-numbered style definitons with more then 1 digit in a row', function () {
const res = flow.parser.parse('graph TD\n' +
'A-->B1\n' +
'A-->B2\n' +
'A-->B3\n' +
'A-->B4\n' +
'A-->B5\n' +
'A-->B6\n' +
'A-->B7\n' +
'A-->B8\n' +
'A-->B9\n' +
'A-->B10\n' +
'A-->B11\n' +
'A-->B12\n' +
'linkStyle 10,11 stroke-width:1px;')
const vert = flow.parser.yy.getVertices()
const edges = flow.parser.yy.getEdges()
expect(edges[0].type).toBe('arrow')
})
it('should handle line interpolation default definitions', function () {
const res = flow.parser.parse('graph TD\n' +
'A-->B\n' +
@@ -453,6 +500,19 @@ describe('when parsing ', function () {
expect(edges[1].interpolate).toBe('cardinal')
})
it('should handle line interpolation multi-numbered definitions', function () {
const res = flow.parser.parse('graph TD\n' +
'A-->B\n' +
'A-->C\n' +
'linkStyle 0,1 interpolate basis')
const vert = flow.parser.yy.getVertices()
const edges = flow.parser.yy.getEdges()
expect(edges[0].interpolate).toBe('basis')
expect(edges[1].interpolate).toBe('basis')
})
it('should handle line interpolation default with style', function () {
const res = flow.parser.parse('graph TD\n' +
'A-->B\n' +
@@ -478,6 +538,19 @@ describe('when parsing ', function () {
expect(edges[1].interpolate).toBe('cardinal')
})
it('should handle line interpolation multi-numbered with style', function () {
const res = flow.parser.parse('graph TD\n' +
'A-->B\n' +
'A-->C\n' +
'linkStyle 0,1 interpolate basis stroke-width:1px;')
const vert = flow.parser.yy.getVertices()
const edges = flow.parser.yy.getEdges()
expect(edges[0].interpolate).toBe('basis')
expect(edges[1].interpolate).toBe('basis')
})
describe('it should handle interaction, ', function () {
it('it should be possible to use click to a callback', function () {
spyOn(flowDb, 'setClickEvent')
@@ -486,7 +559,7 @@ describe('when parsing ', function () {
const vert = flow.parser.yy.getVertices()
const edges = flow.parser.yy.getEdges()
expect(flowDb.setClickEvent).toHaveBeenCalledWith('A', 'callback', undefined, undefined)
expect(flowDb.setClickEvent).toHaveBeenCalledWith('A', 'callback', undefined)
})
it('it should be possible to use click to a callback with toolip', function () {
@@ -496,26 +569,26 @@ describe('when parsing ', function () {
const vert = flow.parser.yy.getVertices()
const edges = flow.parser.yy.getEdges()
expect(flowDb.setClickEvent).toHaveBeenCalledWith('A', 'callback', undefined, 'tooltip')
expect(flowDb.setClickEvent).toHaveBeenCalledWith('A', 'callback', 'tooltip')
})
it('should handle interaction - click to a link', function () {
spyOn(flowDb, 'setClickEvent')
spyOn(flowDb, 'setLink')
const res = flow.parser.parse('graph TD\nA-->B\nclick A "click.html"')
const vert = flow.parser.yy.getVertices()
const edges = flow.parser.yy.getEdges()
expect(flowDb.setClickEvent).toHaveBeenCalledWith('A', undefined, 'click.html', undefined)
expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', undefined)
})
it('should handle interaction - click to a link with tooltip', function () {
spyOn(flowDb, 'setClickEvent')
spyOn(flowDb, 'setLink')
const res = flow.parser.parse('graph TD\nA-->B\nclick A "click.html" "tooltip"')
const vert = flow.parser.yy.getVertices()
const edges = flow.parser.yy.getEdges()
expect(flowDb.setClickEvent).toHaveBeenCalledWith('A', undefined, 'click.html', 'tooltip')
expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', 'tooltip')
})
})