SVG link rendering

src/diagrams/flowchart/flowRenderer.js

@@ -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]
+    const vertex = vert[id]
-    let verticeText
 
     /**
-     * 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) {
+    if (vertex.classes.length > 0) {
-      classStr = vertice.classes.join(' ')
+      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
+    // Use vertex id as text in the box if no text is provided by the graph definition
-    if (typeof vertice.text === 'undefined') {
+    let vertexText = vertex.text !== undefined ? vertex.text : vertex.id
-      verticeText = vertice.id
-    } else {
-      verticeText = vertice.text
-    }
 
-    let labelTypeStr = ''
+    // We create a SVG label, either by delegating to addHtmlLabel or manually
+    let vertexNode
     if (conf.htmlLabels) {
-      labelTypeStr = 'html'
+      // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
-      verticeText = verticeText.replace(/fa[lrsb]?:fa-[\w-]+/g, s => `<i class='${s.replace(':', ' ')}'></i>`)
+      const node = { label: vertexText.replace(/fa[lrsb]?:fa-[\w-]+/g, s => `<i class='${s.replace(':', ' ')}'></i>`) }
-      if (vertice.link) {
+      vertexNode = addHtmlLabel(svg, node).node()
-        verticeText = '<a href="' + vertice.link + '" rel="noopener">' + verticeText + '</a>'
-      }
     } 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 the node has a link, we wrap it in a SVG link
-      if (vertice.link) {
+    if (vertex.link) {
-        const link = document.createElementNS('http://www.w3.org/2000/svg', 'a')
+      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', 'href', vertex.link)
-        link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener')
+      link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener')
-        verticeText = link
+      link.appendChild(vertexNode)
-      } else {
+      vertexNode = link
-        verticeText = svgLabel
-      }
     }
 
     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
+        // Since we use svg labels, we need to create a text node, see #367
-        verticeText = conf.htmlLabels ? '' : document.createElementNS('http://www.w3.org/2000/svg', 'text')
+        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