diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js index 140b820da..fdf0c3476 100644 --- a/src/diagrams/flowchart/flowDb.js +++ b/src/diagrams/flowchart/flowDb.js @@ -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) { - 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,36 +173,35 @@ const setClickFun = function (id, functionName) { } } -const setLink = function (id, linkStr) { - if (typeof linkStr === 'undefined') { - return - } - if (typeof vertices[id] !== 'undefined') { - vertices[id].link = linkStr - } +/** + * 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, diff --git a/src/diagrams/flowchart/parser/flow.jison b/src/diagrams/flowchart/parser/flow.jison index 0bbb4281e..fa14fc7cd 100644 --- a/src/diagrams/flowchart/parser/flow.jison +++ b/src/diagrams/flowchart/parser/flow.jison @@ -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 diff --git a/src/diagrams/flowchart/parser/flow.js b/src/diagrams/flowchart/parser/flow.js index f45c6fd71..7467a93e5 100644 --- a/src/diagrams/flowchart/parser/flow.js +++ b/src/diagrams/flowchart/parser/flow.js @@ -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]); diff --git a/src/diagrams/flowchart/parser/flow.spec.js b/src/diagrams/flowchart/parser/flow.spec.js index 28d273baf..27e54fb5c 100644 --- a/src/diagrams/flowchart/parser/flow.spec.js +++ b/src/diagrams/flowchart/parser/flow.spec.js @@ -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') }) })