SVG link rendering
This commit is contained in:
Philipp A
parent
de78bb5ffe
commit
12b58a17e1
|
|
@ -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,46 +37,40 @@ 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[lrsb]?:fa-[\w-]+/g, s => `<i class='${s.replace(':', ' ')}'></i>`)
|
||||
if (vertice.link) {
|
||||
verticeText = '<a href="' + vertice.link + '" rel="noopener">' + verticeText + '</a>'
|
||||
}
|
||||
// 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()
|
||||
} else {
|
||||
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text')
|
||||
|
||||
const rows = verticeText.split(/<br>/)
|
||||
const rows = vertexText.split(/<br>/)
|
||||
|
||||
for (let j = 0; j < rows.length; j++) {
|
||||
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan')
|
||||
|
|
@ -84,22 +80,22 @@ export const addVertices = function (vert, g) {
|
|||
tspan.textContent = rows[j]
|
||||
svgLabel.appendChild(tspan)
|
||||
}
|
||||
vertexNode = svgLabel
|
||||
}
|
||||
|
||||
labelTypeStr = 'svg'
|
||||
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
|
||||
}
|
||||
// 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'
|
||||
|
|
@ -124,14 +120,14 @@ 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')
|
||||
// Since we use svg labels, we need to create a text node, see #367
|
||||
vertexNode = 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 })
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -290,7 +286,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
|
||||
|
|
|
|||
Loading…
Reference in New Issue