GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Improved docs, split setClickEvent and setLink

Browse Source
This commit is contained in:
Philipp A 2018-12-01 15:31:57 +01:00
parent aca80726d7
commit bcd3aa7d61
4 changed files with 49 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -137,27 +137,24 @@ 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)
}
}
})
}
const setTooltip = function (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,36 +173,35 @@ const setClickFun = function (id, functionName) {
}
}
const setLink = function (id, linkStr) {
if (typeof linkStr === 'undefined') {
return
}
/**
* 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) {
@ -402,6 +398,7 @@ export default {
setClass,
getTooltip,
setClickEvent,
setLink,
bindFunctions,
getDirection,
getVertices,

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

@ -396,10 +396,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

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

@ -271,16 +271,16 @@ case 112:
this.$ = $$[$0-4];yy.setClass($$[$0-2], $$[$0]);
break;
case 113:
this.$ = $$[$0-4];yy.setClickEvent($$[$0-2], $$[$0], undefined, undefined);
this.$ = $$[$0-4];yy.setClickEvent($$[$0-2], $$[$0], undefined);
break;
case 114:
this.$ = $$[$0-6];yy.setClickEvent($$[$0-4], $$[$0-2], undefined, $$[$0]) ;
this.$ = $$[$0-6];yy.setClickEvent($$[$0-4], $$[$0-2], $$[$0]) ;
break;
case 115:
this.$ = $$[$0-4];yy.setClickEvent($$[$0-2], undefined, $$[$0], undefined);
this.$ = $$[$0-4];yy.setLink($$[$0-2], $$[$0], undefined);
break;
case 116:
this.$ = $$[$0-6];yy.setClickEvent($$[$0-4], undefined, $$[$0-2], $$[$0] );
this.$ = $$[$0-6];yy.setLink($$[$0-4], $$[$0-2], $$[$0] );
break;
case 117:
this.$ = $$[$0-4];yy.addVertex($$[$0-2],undefined,undefined,$$[$0]);

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

@ -486,7 +486,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 +496,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')
})
})