Get rid of "var "

src/diagrams/flowchart/flowRenderer.js

@@ -5,12 +5,11 @@ import d3 from '../../d3'
 import dagreD3 from 'dagre-d3-renderer'
 import { logger } from '../../logger'
 
-var conf = {
+const conf = {
 }
 export const setConf = function (cnf) {
-  var keys = Object.keys(cnf)
+  const keys = Object.keys(cnf)
-  var i
+  for (let i = 0; i < keys.length; i++) {
-  for (i = 0; i < keys.length; i++) {
     conf[keys[i]] = cnf[keys[i]]
   }
 }
@@ -21,12 +20,11 @@ export const setConf = function (cnf) {
  * @param g The graph that is to be drawn.
  */
 export const addVertices = function (vert, g) {
-  var keys = Object.keys(vert)
+  const keys = Object.keys(vert)
 
-  var styleFromStyleArr = function (styleStr, arr) {
+  const styleFromStyleArr = function (styleStr, arr) {
-    var i
     // Create a compound style definition from the style definitions found for the node in the graph definition
-    for (i = 0; i < arr.length; i++) {
+    for (let i = 0; i < arr.length; i++) {
       if (typeof arr[i] !== 'undefined') {
         styleStr = styleStr + arr[i] + ';'
       }
@@ -37,15 +35,14 @@ export const addVertices = function (vert, g) {
 
   // Iterate through each item in the vertice object (containing all the vertices found) in the graph definition
   keys.forEach(function (id) {
-    var vertice = vert[id]
+    const vertice = vert[id]
-    var verticeText
+    let verticeText
 
     /**
      * Variable for storing the classes for the vertice
      * @type {string}
      */
-    var classStr = ''
+    let classStr = ''
-
     if (vertice.classes.length > 0) {
       classStr = vertice.classes.join(' ')
     }
@@ -54,7 +51,7 @@ export const addVertices = function (vert, g) {
      * Variable for storing the extracted style for the vertice
      * @type {string}
      */
-    var style = ''
+    let style = ''
     // Create a compound style definition from the style definitions found for the node in the graph definition
     style = styleFromStyleArr(style, vertice.styles)
 
@@ -65,20 +62,19 @@ export const addVertices = function (vert, g) {
       verticeText = vertice.text
     }
 
-    var labelTypeStr = ''
+    let labelTypeStr = ''
     if (conf.htmlLabels) {
       labelTypeStr = 'html'
       verticeText = verticeText.replace(/fa:fa[\w-]+/g, function (s) {
         return '<i class="fa ' + s.substring(3) + '"></i>'
       })
     } else {
-      var svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text')
+      const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text')
 
-      var rows = verticeText.split(/<br>/)
+      const rows = verticeText.split(/<br>/)
 
-      var j = 0
+      for (let j = 0; j < rows.length; j++) {
-      for (j = 0; j < rows.length; j++) {
+        const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan')
-        var tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan')
         tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve')
         tspan.setAttribute('dy', '1em')
         tspan.setAttribute('x', '1')
@@ -90,9 +86,8 @@ export const addVertices = function (vert, g) {
       verticeText = svgLabel
     }
 
-    var radious = 0
+    let radious = 0
-    var _shape = ''
+    let _shape = ''
-
     // Set the shape based parameters
     switch (vertice.type) {
       case 'round':
@@ -136,16 +131,16 @@ export const addVertices = function (vert, g) {
  * @param {Object} g The graph object
  */
 export const addEdges = function (edges, g) {
-  var cnt = 0
+  let cnt = 0
 
-  var defaultStyle
+  let defaultStyle
   if (typeof edges.defaultStyle !== 'undefined') {
     defaultStyle = edges.defaultStyle.toString().replace(/,/g, ';')
   }
 
   edges.forEach(function (edge) {
     cnt++
-    var edgeData = {}
+    const edgeData = {}
 
     // Set link type for rendering
     if (edge.type === 'arrow_open') {
@@ -154,8 +149,7 @@ export const addEdges = function (edges, g) {
       edgeData.arrowhead = 'normal'
     }
 
-    var style = ''
+    let style = ''
-
     if (typeof edge.style !== 'undefined') {
       edge.style.forEach(function (s) {
         style = style + s + ';'
@@ -216,7 +210,7 @@ export const addEdges = function (edges, g) {
  * @returns {object} classDef styles
  */
 export const getClasses = function (text, isDot) {
-  var parser
+  let parser
   graphDb.clear()
   if (isDot) {
     parser = dot.parser
@@ -228,7 +222,7 @@ export const getClasses = function (text, isDot) {
   // Parse the graph definition
   parser.parse(text)
 
-  var classes = graphDb.getClasses()
+  const classes = graphDb.getClasses()
 
   // Add default class if undefined
   if (typeof (classes.default) === 'undefined') {
@@ -248,7 +242,7 @@ export const getClasses = function (text, isDot) {
  */
 export const draw = function (text, id, isDot) {
   logger.debug('Drawing flowchart')
-  var parser
+  let parser
   graphDb.clear()
   if (isDot) {
     parser = dot.parser
@@ -265,14 +259,13 @@ export const draw = function (text, id, isDot) {
   }
 
   // Fetch the default direction, use TD if none was found
-  var dir
+  let dir = graphDb.getDirection()
-  dir = graphDb.getDirection()
   if (typeof dir === 'undefined') {
     dir = 'TD'
   }
 
   // Create the input mermaid.graph
-  var g = new dagreD3.graphlib.Graph({
+  const g = new dagreD3.graphlib.Graph({
     multigraph: true,
     compound: true
   })
@@ -286,27 +279,25 @@ export const draw = function (text, id, isDot) {
       return {}
     })
 
-  var subG
+  let subG
-  var subGraphs = graphDb.getSubGraphs()
+  const subGraphs = graphDb.getSubGraphs()
-  var i = 0
+  for (let i = subGraphs.length - 1; i >= 0; i--) {
-  for (i = subGraphs.length - 1; i >= 0; i--) {
     subG = subGraphs[i]
     graphDb.addVertex(subG.id, subG.title, 'group', undefined)
   }
 
   // Fetch the verices/nodes and edges/links from the parsed graph definition
-  var vert = graphDb.getVertices()
+  const vert = graphDb.getVertices()
 
-  var edges = graphDb.getEdges()
+  const edges = graphDb.getEdges()
 
-  i = 0
+  let i = 0
-  var j
   for (i = subGraphs.length - 1; i >= 0; i--) {
     subG = subGraphs[i]
 
     d3.selectAll('cluster').append('text')
 
-    for (j = 0; j < subG.nodes.length; j++) {
+    for (let j = 0; j < subG.nodes.length; j++) {
       g.setParent(subG.nodes[j], subG.id)
     }
   }
@@ -314,21 +305,21 @@ export const draw = function (text, id, isDot) {
   addEdges(edges, g)
 
   // Create the renderer
-  var Render = dagreD3.render
+  const Render = dagreD3.render
-  var render = new Render()
+  const render = new Render()
 
   // Add custom shape for rhombus type of boc (decision)
   render.shapes().question = function (parent, bbox, node) {
-    var w = bbox.width
+    const w = bbox.width
-    var h = bbox.height
+    const h = bbox.height
-    var s = (w + h) * 0.8
+    const s = (w + h) * 0.8
-    var points = [
+    const points = [
       { x: s / 2, y: 0 },
       { x: s, y: -s / 2 },
       { x: s / 2, y: -s },
       { x: 0, y: -s / 2 }
     ]
-    var shapeSvg = parent.insert('polygon', ':first-child')
+    const shapeSvg = parent.insert('polygon', ':first-child')
       .attr('points', points.map(function (d) {
         return d.x + ',' + d.y
       }).join(' '))
@@ -343,16 +334,16 @@ export const draw = function (text, id, isDot) {
 
   // Add custom shape for box with inverted arrow on left side
   render.shapes().rect_left_inv_arrow = function (parent, bbox, node) {
-    var w = bbox.width
+    const w = bbox.width
-    var h = bbox.height
+    const h = bbox.height
-    var points = [
+    const points = [
       { x: -h / 2, y: 0 },
       { x: w, y: 0 },
       { x: w, y: -h },
       { x: -h / 2, y: -h },
       { x: 0, y: -h / 2 }
     ]
-    var shapeSvg = parent.insert('polygon', ':first-child')
+    const shapeSvg = parent.insert('polygon', ':first-child')
       .attr('points', points.map(function (d) {
         return d.x + ',' + d.y
       }).join(' '))
@@ -365,16 +356,16 @@ export const draw = function (text, id, isDot) {
 
   // Add custom shape for box with inverted arrow on right side
   render.shapes().rect_right_inv_arrow = function (parent, bbox, node) {
-    var w = bbox.width
+    const w = bbox.width
-    var h = bbox.height
+    const h = bbox.height
-    var points = [
+    const points = [
       { x: 0, y: 0 },
       { x: w + h / 2, y: 0 },
       { x: w, y: -h / 2 },
       { x: w + h / 2, y: -h },
       { x: 0, y: -h }
     ]
-    var shapeSvg = parent.insert('polygon', ':first-child')
+    const shapeSvg = parent.insert('polygon', ':first-child')
       .attr('points', points.map(function (d) {
         return d.x + ',' + d.y
       }).join(' '))
@@ -387,7 +378,7 @@ export const draw = function (text, id, isDot) {
 
   // Add our custom arrow - an empty arrowhead
   render.arrows().none = function normal (parent, id, edge, type) {
-    var marker = parent.append('marker')
+    const marker = parent.append('marker')
       .attr('id', id)
       .attr('viewBox', '0 0 10 10')
       .attr('refX', 9)
@@ -397,14 +388,14 @@ export const draw = function (text, id, isDot) {
       .attr('markerHeight', 6)
       .attr('orient', 'auto')
 
-    var path = marker.append('path')
+    const path = marker.append('path')
       .attr('d', 'M 0 0 L 0 0 L 0 0 z')
     dagreD3.util.applyStyle(path, edge[type + 'Style'])
   }
 
   // Override normal arrowhead defined in d3. Remove style & add class to allow css styling.
   render.arrows().normal = function normal (parent, id, edge, type) {
-    var marker = parent.append('marker')
+    const marker = parent.append('marker')
       .attr('id', id)
       .attr('viewBox', '0 0 10 10')
       .attr('refX', 9)
@@ -422,10 +413,10 @@ export const draw = function (text, id, isDot) {
   }
 
   // Set up an SVG group so that we can translate the final graph.
-  var svg = d3.select('#' + id)
+  const svg = d3.select('#' + id)
 
   // Run the renderer. This is what draws the final graph.
-  var element = d3.select('#' + id + ' g')
+  const element = d3.select('#' + id + ' g')
   render(element, g)
 
   element.selectAll('g.node')
@@ -457,14 +448,14 @@ export const draw = function (text, id, isDot) {
     subG = subGraphs[i]
 
     if (subG.title !== 'undefined') {
-      var clusterRects = document.querySelectorAll('#' + id + ' #' + subG.id + ' rect')
+      const clusterRects = document.querySelectorAll('#' + id + ' #' + subG.id + ' rect')
-      var clusterEl = document.querySelectorAll('#' + id + ' #' + subG.id)
+      const clusterEl = document.querySelectorAll('#' + id + ' #' + subG.id)
 
-      var xPos = clusterRects[0].x.baseVal.value
+      const xPos = clusterRects[0].x.baseVal.value
-      var yPos = clusterRects[0].y.baseVal.value
+      const yPos = clusterRects[0].y.baseVal.value
-      var width = clusterRects[0].width.baseVal.value
+      const width = clusterRects[0].width.baseVal.value
-      var cluster = d3.select(clusterEl[0])
+      const cluster = d3.select(clusterEl[0])
-      var te = cluster.append('text')
+      const te = cluster.append('text')
       te.attr('x', xPos + width / 2)
       te.attr('y', yPos + 14)
       te.attr('fill', 'black')
@@ -482,15 +473,14 @@ export const draw = function (text, id, isDot) {
 
   // Add label rects for non html labels
   if (!conf.htmlLabels) {
-    var labels = document.querySelectorAll('#' + id + ' .edgeLabel .label')
+    const labels = document.querySelectorAll('#' + id + ' .edgeLabel .label')
-    var k
+    for (let k = 0; k < labels.length; k++) {
-    for (k = 0; k < labels.length; k++) {
+      const label = labels[i]
-      var label = labels[i]
 
       // Get dimensions of label
-      var dim = label.getBBox()
+      const dim = label.getBBox()
 
-      var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
+      const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
       rect.setAttribute('rx', 0)
       rect.setAttribute('ry', 0)
       rect.setAttribute('width', dim.width)

todo.md

@@ -11,8 +11,6 @@
 - Remove 'lodash' as dependency
     - https://github.com/lodash/babel-plugin-lodash
     - https://www.npmjs.com/package/lodash-webpack-plugin
-- Replace var with const/let
-    - flowchart/flowrenderer
 - global.mermaid_config
 - rewrite logger
 - rewrite less code