Update of prettier, eslint and rules

src/diagrams/flowchart/flowChartShapes.js

@@ -8,10 +8,10 @@ function question(parent, bbox, node) {
     { x: s / 2, y: 0 },
     { x: s, y: -s / 2 },
     { x: s / 2, y: -s },
-    { x: 0, y: -s / 2 }
+    { x: 0, y: -s / 2 },
   ];
   const shapeSvg = insertPolygonShape(parent, s, s, points);
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return dagreD3.intersect.polygon(node, points, point);
   };
   return shapeSvg;
@@ -28,10 +28,10 @@ function hexagon(parent, bbox, node) {
     { x: w, y: -h / 2 },
     { x: w - m, y: -h },
     { x: m, y: -h },
-    { x: 0, y: -h / 2 }
+    { x: 0, y: -h / 2 },
   ];
   const shapeSvg = insertPolygonShape(parent, w, h, points);
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return dagreD3.intersect.polygon(node, points, point);
   };
   return shapeSvg;
@@ -45,10 +45,10 @@ function rect_left_inv_arrow(parent, bbox, node) {
     { x: w, y: 0 },
     { x: w, y: -h },
     { x: -h / 2, y: -h },
-    { x: 0, y: -h / 2 }
+    { x: 0, y: -h / 2 },
   ];
   const shapeSvg = insertPolygonShape(parent, w, h, points);
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return dagreD3.intersect.polygon(node, points, point);
   };
   return shapeSvg;
@@ -61,10 +61,10 @@ function lean_right(parent, bbox, node) {
     { x: (-2 * h) / 6, y: 0 },
     { x: w - h / 6, y: 0 },
     { x: w + (2 * h) / 6, y: -h },
-    { x: h / 6, y: -h }
+    { x: h / 6, y: -h },
   ];
   const shapeSvg = insertPolygonShape(parent, w, h, points);
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return dagreD3.intersect.polygon(node, points, point);
   };
   return shapeSvg;
@@ -77,10 +77,10 @@ function lean_left(parent, bbox, node) {
     { x: (2 * h) / 6, y: 0 },
     { x: w + h / 6, y: 0 },
     { x: w - (2 * h) / 6, y: -h },
-    { x: -h / 6, y: -h }
+    { x: -h / 6, y: -h },
   ];
   const shapeSvg = insertPolygonShape(parent, w, h, points);
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return dagreD3.intersect.polygon(node, points, point);
   };
   return shapeSvg;
@@ -93,10 +93,10 @@ function trapezoid(parent, bbox, node) {
     { x: (-2 * h) / 6, y: 0 },
     { x: w + (2 * h) / 6, y: 0 },
     { x: w - h / 6, y: -h },
-    { x: h / 6, y: -h }
+    { x: h / 6, y: -h },
   ];
   const shapeSvg = insertPolygonShape(parent, w, h, points);
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return dagreD3.intersect.polygon(node, points, point);
   };
   return shapeSvg;
@@ -109,10 +109,10 @@ function inv_trapezoid(parent, bbox, node) {
     { x: h / 6, y: 0 },
     { x: w - h / 6, y: 0 },
     { x: w + (2 * h) / 6, y: -h },
-    { x: (-2 * h) / 6, y: -h }
+    { x: (-2 * h) / 6, y: -h },
   ];
   const shapeSvg = insertPolygonShape(parent, w, h, points);
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return dagreD3.intersect.polygon(node, points, point);
   };
   return shapeSvg;
@@ -126,10 +126,10 @@ function rect_right_inv_arrow(parent, bbox, node) {
     { x: w + h / 2, y: 0 },
     { x: w, y: -h / 2 },
     { x: w + h / 2, y: -h },
-    { x: 0, y: -h }
+    { x: 0, y: -h },
   ];
   const shapeSvg = insertPolygonShape(parent, w, h, points);
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return dagreD3.intersect.polygon(node, points, point);
   };
   return shapeSvg;
@@ -148,7 +148,7 @@ function stadium(parent, bbox, node) {
     .attr('width', w)
     .attr('height', h);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return dagreD3.intersect.rect(node, point);
   };
   return shapeSvg;
@@ -167,10 +167,10 @@ function subroutine(parent, bbox, node) {
     { x: w + 8, y: 0 },
     { x: w + 8, y: -h },
     { x: -8, y: -h },
-    { x: -8, y: 0 }
+    { x: -8, y: 0 },
   ];
   const shapeSvg = insertPolygonShape(parent, w, h, points);
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return dagreD3.intersect.polygon(node, points, point);
   };
   return shapeSvg;
@@ -214,7 +214,7 @@ function cylinder(parent, bbox, node) {
     .attr('d', shape)
     .attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')');
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     const pos = dagreD3.intersect.rect(node, point);
     const x = pos.x - node.x;
 
@@ -297,7 +297,7 @@ function insertPolygonShape(parent, w, h, points) {
     .attr(
       'points',
       points
-        .map(function(d) {
+        .map(function (d) {
           return d.x + ',' + d.y;
         })
         .join(' ')
@@ -307,5 +307,5 @@ function insertPolygonShape(parent, w, h, points) {
 
 export default {
   addToRender,
-  addToRenderV2
+  addToRenderV2,
 };

src/diagrams/flowchart/flowDb.js

@@ -23,7 +23,7 @@ let version; // As in graph
 // Functions to be run after graph rendering
 let funs = [];
 
-export const parseDirective = function(statement, context, type) {
+export const parseDirective = function (statement, context, type) {
   mermaidAPI.parseDirective(this, statement, context, type);
 };
 
@@ -32,7 +32,7 @@ export const parseDirective = function(statement, context, type) {
  * @param id
  * @public
  */
-export const lookUpDomId = function(id) {
+export const lookUpDomId = function (id) {
   const veritceKeys = Object.keys(vertices);
   for (let i = 0; i < veritceKeys.length; i++) {
     if (vertices[veritceKeys[i]].id === id) {
@@ -50,7 +50,7 @@ export const lookUpDomId = function(id) {
  * @param style
  * @param classes
  */
-export const addVertex = function(_id, text, type, style, classes, dir) {
+export const addVertex = function (_id, text, type, style, classes, dir) {
   let txt;
   let id = _id;
   if (typeof id === 'undefined') {
@@ -67,7 +67,7 @@ export const addVertex = function(_id, text, type, style, classes, dir) {
       id: id,
       domId: MERMAID_DOM_ID_PREFIX + id + '-' + vertexCounter,
       styles: [],
-      classes: []
+      classes: [],
     };
   }
   vertexCounter++;
@@ -91,14 +91,14 @@ export const addVertex = function(_id, text, type, style, classes, dir) {
   }
   if (typeof style !== 'undefined') {
     if (style !== null) {
-      style.forEach(function(s) {
+      style.forEach(function (s) {
         vertices[id].styles.push(s);
       });
     }
   }
   if (typeof classes !== 'undefined') {
     if (classes !== null) {
-      classes.forEach(function(s) {
+      classes.forEach(function (s) {
         vertices[id].classes.push(s);
       });
     }
@@ -115,7 +115,7 @@ export const addVertex = function(_id, text, type, style, classes, dir) {
  * @param type
  * @param linktext
  */
-export const addSingleLink = function(_start, _end, type, linktext) {
+export const addSingleLink = function (_start, _end, type, linktext) {
   let start = _start;
   let end = _end;
   // if (start[0].match(/\d/)) start = MERMAID_DOM_ID_PREFIX + start;
@@ -141,7 +141,7 @@ export const addSingleLink = function(_start, _end, type, linktext) {
   }
   edges.push(edge);
 };
-export const addLink = function(_start, _end, type, linktext) {
+export const addLink = function (_start, _end, type, linktext) {
   let i, j;
   for (i = 0; i < _start.length; i++) {
     for (j = 0; j < _end.length; j++) {
@@ -155,8 +155,8 @@ export const addLink = function(_start, _end, type, linktext) {
  * @param pos
  * @param interpolate
  */
-export const updateLinkInterpolate = function(positions, interp) {
-  positions.forEach(function(pos) {
+export const updateLinkInterpolate = function (positions, interp) {
+  positions.forEach(function (pos) {
     if (pos === 'default') {
       edges.defaultInterpolate = interp;
     } else {
@@ -170,8 +170,8 @@ export const updateLinkInterpolate = function(positions, interp) {
  * @param pos
  * @param style
  */
-export const updateLink = function(positions, style) {
-  positions.forEach(function(pos) {
+export const updateLink = function (positions, style) {
+  positions.forEach(function (pos) {
     if (pos === 'default') {
       edges.defaultStyle = style;
     } else {
@@ -183,14 +183,14 @@ export const updateLink = function(positions, style) {
   });
 };
 
-export const addClass = function(id, style) {
+export const addClass = function (id, style) {
   if (typeof classes[id] === 'undefined') {
     classes[id] = { id: id, styles: [], textStyles: [] };
   }
 
   if (typeof style !== 'undefined') {
     if (style !== null) {
-      style.forEach(function(s) {
+      style.forEach(function (s) {
         if (s.match('color')) {
           const newStyle1 = s.replace('fill', 'bgFill');
           const newStyle2 = newStyle1.replace('color', 'fill');
@@ -206,7 +206,7 @@ export const addClass = function(id, style) {
  * Called by parser when a graph definition is found, stores the direction of the chart.
  * @param dir
  */
-export const setDirection = function(dir) {
+export const setDirection = function (dir) {
   direction = dir;
   if (direction.match(/.*</)) {
     direction = 'RL';
@@ -227,8 +227,8 @@ export const setDirection = function(dir) {
  * @param ids Comma separated list of ids
  * @param className Class to add
  */
-export const setClass = function(ids, className) {
-  ids.split(',').forEach(function(_id) {
+export const setClass = function (ids, className) {
+  ids.split(',').forEach(function (_id) {
     // let id = version === 'gen-2' ? lookUpDomId(_id) : _id;
     let id = _id;
     // if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
@@ -242,15 +242,15 @@ export const setClass = function(ids, className) {
   });
 };
 
-const setTooltip = function(ids, tooltip) {
-  ids.split(',').forEach(function(id) {
+const setTooltip = function (ids, tooltip) {
+  ids.split(',').forEach(function (id) {
     if (typeof tooltip !== 'undefined') {
       tooltips[version === 'gen-1' ? lookUpDomId(id) : id] = common.sanitizeText(tooltip, config);
     }
   });
 };
 
-const setClickFun = function(id, functionName, functionArgs) {
+const setClickFun = function (id, functionName, functionArgs) {
   let domId = lookUpDomId(id);
   // if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
   if (configApi.getConfig().securityLevel !== 'loose') {
@@ -281,12 +281,12 @@ const setClickFun = function(id, functionName, functionArgs) {
 
   if (typeof vertices[id] !== 'undefined') {
     vertices[id].haveCallback = true;
-    funs.push(function() {
+    funs.push(function () {
       const elem = document.querySelector(`[id="${domId}"]`);
       if (elem !== null) {
         elem.addEventListener(
           'click',
-          function() {
+          function () {
             utils.runFunc(functionName, ...argList);
           },
           false
@@ -301,8 +301,8 @@ const setClickFun = function(id, functionName, functionArgs) {
  * @param ids Comma separated list of ids
  * @param linkStr URL to create a link for
  */
-export const setLink = function(ids, linkStr, target) {
-  ids.split(',').forEach(function(id) {
+export const setLink = function (ids, linkStr, target) {
+  ids.split(',').forEach(function (id) {
     if (typeof vertices[id] !== 'undefined') {
       vertices[id].link = utils.formatUrl(linkStr, config);
       vertices[id].linkTarget = target;
@@ -310,7 +310,7 @@ export const setLink = function(ids, linkStr, target) {
   });
   setClass(ids, 'clickable');
 };
-export const getTooltip = function(id) {
+export const getTooltip = function (id) {
   return tooltips[id];
 };
 
@@ -320,26 +320,26 @@ export const getTooltip = function(id) {
  * @param functionName Function to be called on click
  * @param tooltip Tooltip for the clickable element
  */
-export const setClickEvent = function(ids, functionName, functionArgs) {
-  ids.split(',').forEach(function(id) {
+export const setClickEvent = function (ids, functionName, functionArgs) {
+  ids.split(',').forEach(function (id) {
     setClickFun(id, functionName, functionArgs);
   });
   setClass(ids, 'clickable');
 };
 
-export const bindFunctions = function(element) {
-  funs.forEach(function(fun) {
+export const bindFunctions = function (element) {
+  funs.forEach(function (fun) {
     fun(element);
   });
 };
-export const getDirection = function() {
+export const getDirection = function () {
   return direction.trim();
 };
 /**
  * Retrieval function for fetching the found nodes after parsing has completed.
  * @returns {{}|*|vertices}
  */
-export const getVertices = function() {
+export const getVertices = function () {
   return vertices;
 };
 
@@ -347,7 +347,7 @@ export const getVertices = function() {
  * Retrieval function for fetching the found links after parsing has completed.
  * @returns {{}|*|edges}
  */
-export const getEdges = function() {
+export const getEdges = function () {
   return edges;
 };
 
@@ -355,24 +355,21 @@ export const getEdges = function() {
  * Retrieval function for fetching the found class definitions after parsing has completed.
  * @returns {{}|*|classes}
  */
-export const getClasses = function() {
+export const getClasses = function () {
   return classes;
 };
 
-const setupToolTips = function(element) {
+const setupToolTips = function (element) {
   let tooltipElem = select('.mermaidTooltip');
   if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
-    tooltipElem = select('body')
-      .append('div')
-      .attr('class', 'mermaidTooltip')
-      .style('opacity', 0);
+    tooltipElem = select('body').append('div').attr('class', 'mermaidTooltip').style('opacity', 0);
   }
 
   const svg = select(element).select('svg');
 
   const nodes = svg.selectAll('g.node');
   nodes
-    .on('mouseover', function() {
+    .on('mouseover', function () {
       const el = select(this);
       const title = el.attr('title');
 
@@ -382,21 +379,15 @@ const setupToolTips = function(element) {
       }
       const rect = this.getBoundingClientRect();
 
-      tooltipElem
-        .transition()
-        .duration(200)
-        .style('opacity', '.9');
+      tooltipElem.transition().duration(200).style('opacity', '.9');
       tooltipElem
         .html(el.attr('title'))
         .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
         .style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');
       el.classed('hover', true);
     })
-    .on('mouseout', function() {
-      tooltipElem
-        .transition()
-        .duration(500)
-        .style('opacity', 0);
+    .on('mouseout', function () {
+      tooltipElem.transition().duration(500).style('opacity', 0);
       const el = select(this);
       el.classed('hover', false);
     });
@@ -406,7 +397,7 @@ funs.push(setupToolTips);
 /**
  * Clears the internal graph db so that a new graph can be parsed.
  */
-export const clear = function(ver) {
+export const clear = function (ver) {
   vertices = {};
   classes = {};
   edges = [];
@@ -419,21 +410,21 @@ export const clear = function(ver) {
   firstGraphFlag = true;
   version = ver || 'gen-1';
 };
-export const setGen = ver => {
+export const setGen = (ver) => {
   version = ver || 'gen-1';
 };
 /**
  *
  * @returns {string}
  */
-export const defaultStyle = function() {
+export const defaultStyle = function () {
   return 'fill:#ffa;stroke: #f66; stroke-width: 3px; stroke-dasharray: 5, 5;fill:#ffa;stroke: #666;';
 };
 
 /**
  * Clears the internal graph db so that a new graph can be parsed.
  */
-export const addSubGraph = function(_id, list, _title) {
+export const addSubGraph = function (_id, list, _title) {
   // console.log('addSubGraph', _id, list, _title);
   let id = _id.trim();
   let title = _title;
@@ -445,7 +436,7 @@ export const addSubGraph = function(_id, list, _title) {
     const objs = [];
 
     let dir; //  = unbdefined; direction.trim();
-    const nodeList = a.filter(function(item) {
+    const nodeList = a.filter(function (item) {
       const type = typeof item;
       if (item.stmt && item.stmt === 'dir') {
         dir = item.value;
@@ -505,7 +496,7 @@ export const addSubGraph = function(_id, list, _title) {
   return id;
 };
 
-const getPosForId = function(id) {
+const getPosForId = function (id) {
   for (let i = 0; i < subGraphs.length; i++) {
     if (subGraphs[i].id === id) {
       return i;
@@ -515,7 +506,7 @@ const getPosForId = function(id) {
 };
 let secCount = -1;
 const posCrossRef = [];
-const indexNodes2 = function(id, pos) {
+const indexNodes2 = function (id, pos) {
   const nodes = subGraphs[pos].nodes;
   secCount = secCount + 1;
   if (secCount > 2000) {
@@ -526,7 +517,7 @@ const indexNodes2 = function(id, pos) {
   if (subGraphs[pos].id === id) {
     return {
       result: true,
-      count: 0
+      count: 0,
     };
   }
 
@@ -540,7 +531,7 @@ const indexNodes2 = function(id, pos) {
       if (res.result) {
         return {
           result: true,
-          count: posCount + res.count
+          count: posCount + res.count,
         };
       } else {
         posCount = posCount + res.count;
@@ -551,21 +542,21 @@ const indexNodes2 = function(id, pos) {
 
   return {
     result: false,
-    count: posCount
+    count: posCount,
   };
 };
 
-export const getDepthFirstPos = function(pos) {
+export const getDepthFirstPos = function (pos) {
   return posCrossRef[pos];
 };
-export const indexNodes = function() {
+export const indexNodes = function () {
   secCount = -1;
   if (subGraphs.length > 0) {
     indexNodes2('none', subGraphs.length - 1, 0);
   }
 };
 
-export const getSubGraphs = function() {
+export const getSubGraphs = function () {
   return subGraphs;
 };
 
@@ -577,7 +568,7 @@ export const firstGraph = () => {
   return false;
 };
 
-const destructStartLink = _str => {
+const destructStartLink = (_str) => {
   let str = _str.trim();
   let type = 'arrow_open';
 
@@ -620,7 +611,7 @@ const countChar = (char, str) => {
   return count;
 };
 
-const destructEndLink = _str => {
+const destructEndLink = (_str) => {
   const str = _str.trim();
   let line = str.slice(0, -1);
   let type = 'arrow_open';
@@ -700,7 +691,7 @@ const destructLink = (_str, _startStr) => {
 // Todo optimizer this by caching existing nodes
 const exists = (allSgs, _id) => {
   let res = false;
-  allSgs.forEach(sg => {
+  allSgs.forEach((sg) => {
     const pos = sg.nodes.indexOf(_id);
     if (pos >= 0) {
       res = true;
@@ -750,8 +741,8 @@ export default {
   getSubGraphs,
   destructLink,
   lex: {
-    firstGraph
+    firstGraph,
   },
   exists,
-  makeUniq
+  makeUniq,
 };

src/diagrams/flowchart/flowRenderer-v2.js

@@ -12,7 +12,7 @@ import common, { evaluate } from '../common/common';
 import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
 
 const conf = {};
-export const setConf = function(cnf) {
+export const setConf = function (cnf) {
   const keys = Object.keys(cnf);
   for (let i = 0; i < keys.length; i++) {
     conf[keys[i]] = cnf[keys[i]];
@@ -24,12 +24,12 @@ 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, svgId) {
+export const addVertices = function (vert, g, svgId) {
   const svg = select(`[id="${svgId}"]`);
   const keys = Object.keys(vert);
 
   // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
-  keys.forEach(function(id) {
+  keys.forEach(function (id) {
     const vertex = vert[id];
 
     /**
@@ -53,8 +53,8 @@ export const addVertices = function(vert, g, svgId) {
       const node = {
         label: vertexText.replace(
           /fa[lrsb]?:fa-[\w-]+/g,
-          s => `<i class='${s.replace(':', ' ')}'></i>`
-        )
+          (s) => `<i class='${s.replace(':', ' ')}'></i>`
+        ),
       };
       vertexNode = addHtmlLabel(svg, node).node();
       vertexNode.parentNode.removeChild(vertexNode);
@@ -149,7 +149,7 @@ export const addVertices = function(vert, g, svgId) {
       width: vertex.type === 'group' ? 500 : undefined,
       dir: vertex.dir,
       type: vertex.type,
-      padding: getConfig().flowchart.padding
+      padding: getConfig().flowchart.padding,
     });
 
     log.info('setNode', {
@@ -165,7 +165,7 @@ export const addVertices = function(vert, g, svgId) {
       width: vertex.type === 'group' ? 500 : undefined,
       type: vertex.type,
       dir: vertex.dir,
-      padding: getConfig().flowchart.padding
+      padding: getConfig().flowchart.padding,
     });
   });
 };
@@ -175,7 +175,7 @@ export const addVertices = function(vert, g, svgId) {
  * @param {Object} edges The edges to add to the graph
  * @param {Object} g The graph object
  */
-export const addEdges = function(edges, g) {
+export const addEdges = function (edges, g) {
   log.info('abc78 edges = ', edges);
   let cnt = 0;
   let linkIdCnt = {};
@@ -189,7 +189,7 @@ export const addEdges = function(edges, g) {
     defaultLabelStyle = defaultStyles.labelStyle;
   }
 
-  edges.forEach(function(edge) {
+  edges.forEach(function (edge) {
     cnt++;
 
     // Identify Link
@@ -319,7 +319,7 @@ export const addEdges = function(edges, g) {
  * Returns the all the styles from classDef statements in the graph definition.
  * @returns {object} classDef styles
  */
-export const getClasses = function(text) {
+export const getClasses = function (text) {
   log.info('Extracting classes');
   flowDb.clear();
   const parser = flow.parser;
@@ -341,7 +341,7 @@ export const getClasses = function(text) {
  * @param id
  */
 
-export const draw = function(text, id) {
+export const draw = function (text, id) {
   log.info('Drawing flowchart');
   flowDb.clear();
   flowDb.setGen('gen-2');
@@ -368,16 +368,16 @@ export const draw = function(text, id) {
   // Create the input mermaid.graph
   const g = new graphlib.Graph({
     multigraph: true,
-    compound: true
+    compound: true,
   })
     .setGraph({
       rankdir: dir,
       nodesep: nodeSpacing,
       ranksep: rankSpacing,
       marginx: 8,
-      marginy: 8
+      marginy: 8,
     })
-    .setDefaultEdgeLabel(function() {
+    .setDefaultEdgeLabel(function () {
       return {};
     });
 
@@ -463,7 +463,7 @@ export const draw = function(text, id) {
 
   // If node has a link, wrap it in an anchor SVG object.
   const keys = Object.keys(vert);
-  keys.forEach(function(key) {
+  keys.forEach(function (key) {
     const vertex = vert[key];
 
     if (vertex.link) {
@@ -477,20 +477,20 @@ export const draw = function(text, id) {
           link.setAttributeNS('http://www.w3.org/2000/svg', 'target', vertex.linkTarget);
         }
 
-        const linkNode = node.insert(function() {
+        const linkNode = node.insert(function () {
           return link;
         }, ':first-child');
 
         const shape = node.select('.label-container');
         if (shape) {
-          linkNode.append(function() {
+          linkNode.append(function () {
             return shape.node();
           });
         }
 
         const label = node.select('.label');
         if (label) {
-          linkNode.append(function() {
+          linkNode.append(function () {
             return label.node();
           });
         }
@@ -504,5 +504,5 @@ export default {
   addVertices,
   addEdges,
   getClasses,
-  draw
+  draw,
 };

src/diagrams/flowchart/flowRenderer.js

@@ -13,7 +13,7 @@ import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../
 import flowChartShapes from './flowChartShapes';
 
 const conf = {};
-export const setConf = function(cnf) {
+export const setConf = function (cnf) {
   const keys = Object.keys(cnf);
   for (let i = 0; i < keys.length; i++) {
     conf[keys[i]] = cnf[keys[i]];
@@ -25,12 +25,12 @@ 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, svgId) {
+export const addVertices = function (vert, g, svgId) {
   const svg = select(`[id="${svgId}"]`);
   const keys = Object.keys(vert);
 
   // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
-  keys.forEach(function(id) {
+  keys.forEach(function (id) {
     const vertex = vert[id];
 
     /**
@@ -54,8 +54,8 @@ export const addVertices = function(vert, g, svgId) {
       const node = {
         label: vertexText.replace(
           /fa[lrsb]?:fa-[\w-]+/g,
-          s => `<i class='${s.replace(':', ' ')}'></i>`
-        )
+          (s) => `<i class='${s.replace(':', ' ')}'></i>`
+        ),
       };
       vertexNode = addHtmlLabel(svg, node).node();
       vertexNode.parentNode.removeChild(vertexNode);
@@ -143,7 +143,7 @@ export const addVertices = function(vert, g, svgId) {
       ry: radious,
       class: classStr,
       style: styles.style,
-      id: flowDb.lookUpDomId(vertex.id)
+      id: flowDb.lookUpDomId(vertex.id),
     });
   });
 };
@@ -153,7 +153,7 @@ export const addVertices = function(vert, g, svgId) {
  * @param {Object} edges The edges to add to the graph
  * @param {Object} g The graph object
  */
-export const addEdges = function(edges, g) {
+export const addEdges = function (edges, g) {
   let cnt = 0;
 
   let defaultStyle;
@@ -165,7 +165,7 @@ export const addEdges = function(edges, g) {
     defaultLabelStyle = defaultStyles.labelStyle;
   }
 
-  edges.forEach(function(edge) {
+  edges.forEach(function (edge) {
     cnt++;
 
     // Identify Link
@@ -232,7 +232,7 @@ export const addEdges = function(edges, g) {
         edgeData.labelType = 'html';
         edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text.replace(
           /fa[lrsb]?:fa-[\w-]+/g,
-          s => `<i class='${s.replace(':', ' ')}'></i>`
+          (s) => `<i class='${s.replace(':', ' ')}'></i>`
         )}</span>`;
       } else {
         edgeData.labelType = 'text';
@@ -259,7 +259,7 @@ export const addEdges = function(edges, g) {
  * Returns the all the styles from classDef statements in the graph definition.
  * @returns {object} classDef styles
  */
-export const getClasses = function(text) {
+export const getClasses = function (text) {
   log.info('Extracting classes');
   flowDb.clear();
   try {
@@ -279,7 +279,7 @@ export const getClasses = function(text) {
  * @param text
  * @param id
  */
-export const draw = function(text, id) {
+export const draw = function (text, id) {
   log.info('Drawing flowchart');
   flowDb.clear();
   flowDb.setGen('gen-1');
@@ -306,16 +306,16 @@ export const draw = function(text, id) {
   // Create the input mermaid.graph
   const g = new graphlib.Graph({
     multigraph: true,
-    compound: true
+    compound: true,
   })
     .setGraph({
       rankdir: dir,
       nodesep: nodeSpacing,
       ranksep: rankSpacing,
       marginx: 8,
-      marginy: 8
+      marginy: 8,
     })
-    .setDefaultEdgeLabel(function() {
+    .setDefaultEdgeLabel(function () {
       return {};
     });
 
@@ -406,7 +406,7 @@ export const draw = function(text, id) {
   const element = select('#' + id + ' g');
   render(element, g);
 
-  element.selectAll('g.node').attr('title', function() {
+  element.selectAll('g.node').attr('title', function () {
     return flowDb.getTooltip(this.id);
   });
 
@@ -472,7 +472,7 @@ export const draw = function(text, id) {
 
   // If node has a link, wrap it in an anchor SVG object.
   const keys = Object.keys(vert);
-  keys.forEach(function(key) {
+  keys.forEach(function (key) {
     const vertex = vert[key];
 
     if (vertex.link) {
@@ -486,20 +486,20 @@ export const draw = function(text, id) {
           link.setAttributeNS('http://www.w3.org/2000/svg', 'target', vertex.linkTarget);
         }
 
-        const linkNode = node.insert(function() {
+        const linkNode = node.insert(function () {
           return link;
         }, ':first-child');
 
         const shape = node.select('.label-container');
         if (shape) {
-          linkNode.append(function() {
+          linkNode.append(function () {
             return shape.node();
           });
         }
 
         const label = node.select('.label');
         if (label) {
-          linkNode.append(function() {
+          linkNode.append(function () {
             return label.node();
           });
         }
@@ -513,5 +513,5 @@ export default {
   addVertices,
   addEdges,
   getClasses,
-  draw
+  draw,
 };

src/diagrams/flowchart/styles.js

@@ -1,4 +1,4 @@
-const getStyles = options =>
+const getStyles = (options) =>
   `.label {
     font-family: ${options.fontFamily};
     color: ${options.nodeTextColor || options.textColor};