Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Render nodes as real links #765

Merged
merged 2 commits into from
Dec 17, 2018
Merged

Render nodes as real links #765

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aca8072
Render nodes as real links
flying-sheep Nov 28, 2018
bcd3aa7
Improved docs, split setClickEvent and setLink
flying-sheep Dec 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 35 additions & 45 deletions src/diagrams/flowchart/flowDb.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -176,43 +173,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) {
Expand Down Expand Up @@ -409,6 +398,7 @@ export default {
setClass,
getTooltip,
setClickEvent,
setLink,
bindFunctions,
getDirection,
getVertices,
Expand Down
12 changes: 11 additions & 1 deletion src/diagrams/flowchart/flowRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,9 @@ export const addVertices = function (vert, g) {
verticeText = verticeText.replace(/fa:fa[\w-]+/g, function (s) {
return '<i class="fa ' + s.substring(3) + '"></i>'
})
if (vertice.link) {
verticeText = '<a href="' + vertice.link + '" rel="noopener">' + verticeText + '</a>'
}
} else {
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text')

Expand All @@ -85,7 +88,14 @@ export const addVertices = function (vert, g) {
}

labelTypeStr = 'svg'
verticeText = svgLabel
if (vertice.link) {
const link = document.createElementNS('http://www.w3.org/2000/svg', 'a')
link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertice.link)
link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener')
verticeText = link
} else {
verticeText = svgLabel
}
}

let radious = 0
Expand Down
8 changes: 4 additions & 4 deletions src/diagrams/flowchart/parser/flow.jison
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions src/diagrams/flowchart/parser/flow.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 6 additions & 6 deletions src/diagrams/flowchart/parser/flow.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand All @@ -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')
})
})

Expand Down