Merge branch 'develop' into feature/1893_data_flow_diagrams

src/dagre-wrapper/clusters.js

@@ -79,6 +79,10 @@ const rect = (parent, node) => {
 
 /**
  * Non visiable cluster where the note is group with its
+ *
+ * @param {any} parent
+ * @param {any} node
+ * @returns {any} ShapeSvg
  */
 const noteGroup = (parent, node) => {
   // Add outer g element

src/dagre-wrapper/createLabel.js

@@ -1,66 +1,23 @@
 import { select } from 'd3';
 import { log } from '../logger'; // eslint-disable-line
-import { evaluate } from '../diagrams/common/common';
-// let vertexNode;
-// if (evaluate(getConfig().flowchart.htmlLabels)) {
-//   // 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();
-//   vertexNode.parentNode.removeChild(vertexNode);
-// } else {
-//   const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-//   svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
-
-//   const rows = vertexText.split(common.lineBreakRegex);
-
-//   for (let j = 0; j < rows.length; j++) {
-//     const 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');
-//     tspan.textContent = rows[j];
-//     svgLabel.appendChild(tspan);
-//   }
-//   vertexNode = svgLabel;
-// }
 import { getConfig } from '../config';
+import { evaluate } from '../diagrams/common/common';
 
+/**
+ * @param dom
+ * @param styleFn
+ */
 function applyStyle(dom, styleFn) {
   if (styleFn) {
     dom.attr('style', styleFn);
   }
 }
 
+/**
+ * @param {any} node
+ * @returns {SVGForeignObjectElement} Node
+ */
 function addHtmlLabel(node) {
-  // var fo = root.append('foreignObject').attr('width', '100000');
-
-  // var div = fo.append('xhtml:div');
-  // div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
-
-  // var label = node.label;
-  // switch (typeof label) {
-  //   case 'function':
-  //     div.insert(label);
-  //     break;
-  //   case 'object':
-  //     // Currently we assume this is a DOM object.
-  //     div.insert(function() {
-  //       return label;
-  //     });
-  //     break;
-  //   default:
-  //     div.html(label);
-  // }
-
-  // applyStyle(div, node.labelStyle);
-  // div.style('display', 'inline-block');
-  // // Fix for firefox
-  // div.style('white-space', 'nowrap');
-
-  // var client = div.node().getBoundingClientRect();
-  // fo.attr('width', client.width).attr('height', client.height);
   const fo = select(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'));
   const div = fo.append('xhtml:div');
 

src/dagre-wrapper/edges.js

@@ -1,6 +1,5 @@
 import { log } from '../logger'; // eslint-disable-line
 import createLabel from './createLabel';
-// import { line, curveBasis, curveLinear, select } from 'd3';
 import { line, curveBasis, select } from 'd3';
 import { getConfig } from '../config';
 import utils from '../utils';
@@ -110,6 +109,10 @@ export const insertEdgeLabel = (elem, edge) => {
   }
 };
 
+/**
+ * @param {any} fo
+ * @param {any} value
+ */
 function setTerminalWidth(fo, value) {
   if (getConfig().flowchart.htmlLabels && fo) {
     fo.style.width = value.length * 9 + 'px';
@@ -306,9 +309,10 @@ export const intersection = (node, outsidePoint, insidePoint) => {
 /**
  * This function will page a path and node where the last point(s) in the path is inside the node
  * and return an update path ending by the border of the node.
- * @param {*} points
- * @param {*} boundryNode
- * @returns
+ *
+ * @param {Array} _points
+ * @param {any} boundryNode
+ * @returns {Array} Points
  */
 const cutPathAtIntersect = (_points, boundryNode) => {
   log.warn('abc88 cutPathAtIntersect', _points, boundryNode);

src/dagre-wrapper/intersect/intersect-circle.js

@@ -1,5 +1,10 @@
 import intersectEllipse from './intersect-ellipse';
 
+/**
+ * @param node
+ * @param rx
+ * @param point
+ */
 function intersectCircle(node, rx, point) {
   return intersectEllipse(node, rx, rx, point);
 }

src/dagre-wrapper/intersect/intersect-ellipse.js

@@ -1,3 +1,9 @@
+/**
+ * @param node
+ * @param rx
+ * @param ry
+ * @param point
+ */
 function intersectEllipse(node, rx, ry, point) {
   // Formulae from: http://mathworld.wolfram.com/Ellipse-LineIntersection.html
 

src/dagre-wrapper/intersect/intersect-line.js

@@ -1,6 +1,10 @@
-/*
- * Returns the point at which two lines, p and q, intersect or returns
- * undefined if they do not intersect.
+/**
+ * Returns the point at which two lines, p and q, intersect or returns undefined if they do not intersect.
+ *
+ * @param p1
+ * @param p2
+ * @param q1
+ * @param q2
  */
 function intersectLine(p1, p2, q1, q2) {
   // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,
@@ -63,6 +67,10 @@ function intersectLine(p1, p2, q1, q2) {
   return { x: x, y: y };
 }
 
+/**
+ * @param r1
+ * @param r2
+ */
 function sameSign(r1, r2) {
   return r1 * r2 > 0;
 }

src/dagre-wrapper/intersect/intersect-node.js

@@ -1,5 +1,9 @@
 module.exports = intersectNode;
 
+/**
+ * @param node
+ * @param point
+ */
 function intersectNode(node, point) {
   // console.info('Intersect Node');
   return node.intersect(point);

src/dagre-wrapper/intersect/intersect-polygon.js

@@ -4,9 +4,13 @@ import intersectLine from './intersect-line';
 
 export default intersectPolygon;
 
-/*
- * Returns the point ({x, y}) at which the point argument intersects with the
- * node argument assuming that it has the shape specified by polygon.
+/**
+ * Returns the point ({x, y}) at which the point argument intersects with the node argument assuming
+ * that it has the shape specified by polygon.
+ *
+ * @param node
+ * @param polyPoints
+ * @param point
  */
 function intersectPolygon(node, polyPoints, point) {
   var x1 = node.x;

src/dagre-wrapper/markers.js

@@ -1,6 +1,4 @@
-/**
- * Setup arrow head and define the marker. The result is appended to the svg.
- */
+/** Setup arrow head and define the marker. The result is appended to the svg. */
 
 import { log } from '../logger';
 

src/dagre-wrapper/mermaid-graphlib.js

@@ -1,6 +1,4 @@
-/**
- * Decorates with functions required by mermaids dagre-wrapper.
- */
+/** Decorates with functions required by mermaids dagre-wrapper. */
 import { log } from '../logger';
 import graphlib from 'graphlib';
 
@@ -145,7 +143,8 @@ export const extractDecendants = (id, graph) => {
 /**
  * Validates the graph, checking that all parent child relation points to existing nodes and that
  * edges between nodes also ia correct. When not correct the function logs the discrepancies.
- * @param {graphlib graph} g
+ *
+ * @param graph
  */
 export const validate = (graph) => {
   const edges = graph.edges();
@@ -165,8 +164,9 @@ export const validate = (graph) => {
 
 /**
  * Finds a child that is not a cluster. When faking a edge between a node and a cluster.
- * @param {Finds a } id
- * @param {*} graph
+ *
+ * @param {Finds a} id
+ * @param {any} graph
  */
 export const findNonClusterChild = (id, graph) => {
   // const node = graph.node(id);

src/dagre-wrapper/patterns.js

@@ -1,6 +1,4 @@
-/**
- * Setup arrow head and define the marker. The result is appended to the svg.
- */
+/** Setup arrow head and define the marker. The result is appended to the svg. */
 
 // import { log } from '../logger';
 

src/dagre-wrapper/shapes/util.js

@@ -1,7 +1,8 @@
 import createLabel from '../createLabel';
 import { getConfig } from '../../config';
+import { decodeEntities } from '../../mermaidAPI';
 import { select } from 'd3';
-import { evaluate } from '../../diagrams/common/common';
+import { evaluate, sanitizeText } from '../../diagrams/common/common';
 export const labelHelper = (parent, node, _classes, isNode) => {
   let classes;
   if (!_classes) {
@@ -20,7 +21,14 @@ export const labelHelper = (parent, node, _classes, isNode) => {
 
   const text = label
     .node()
-    .appendChild(createLabel(node.labelText, node.labelStyle, false, isNode));
+    .appendChild(
+      createLabel(
+        sanitizeText(decodeEntities(node.labelText), getConfig()),
+        node.labelStyle,
+        false,
+        isNode
+      )
+    );
 
   // Get the size of the label
   let bbox = text.getBBox();
@@ -47,6 +55,12 @@ export const updateNodeBounds = (node, element) => {
   node.height = bbox.height;
 };
 
+/**
+ * @param parent
+ * @param w
+ * @param h
+ * @param points
+ */
 export function insertPolygonShape(parent, w, h, points) {
   return parent
     .insert('polygon', ':first-child')