Merge pull request #1268 from jgreywolf/1169-RefactorGetRowsFunctionality

1169 refactor get rows functionality

src/diagrams/class/classDb.js

@@ -1,6 +1,7 @@
 import * as d3 from 'd3';
 import { logger } from '../../logger';
 import { getConfig } from '../../config';
+import common from '../common/common';
 import utils from '../../utils';
 
 const MERMAID_DOM_ID_PREFIX = 'classid-';
@@ -175,7 +176,7 @@ export const setLink = function(ids, linkStr, tooltip) {
       classes[id].link = utils.formatUrl(linkStr, config);
 
       if (tooltip) {
-        classes[id].tooltip = utils.sanitize(tooltip, config);
+        classes[id].tooltip = common.sanitizeText(tooltip, config);
       }
     }
   });
@@ -207,7 +208,7 @@ const setClickFunc = function(domId, functionName, tooltip) {
   }
   if (typeof classes[id] !== 'undefined') {
     if (tooltip) {
-      classes[id].tooltip = utils.sanitize(tooltip, config);
+      classes[id].tooltip = common.sanitizeText(tooltip, config);
     }
 
     funs.push(function() {

src/diagrams/common/common.js

@@ -0,0 +1,39 @@
+export const getRows = s => {
+  if (!s) return 1;
+  let str = breakToPlaceholder(s);
+  str = str.replace(/\\n/g, '#br#');
+  return str.split('#br#');
+};
+
+export const sanitizeText = (text, config) => {
+  let txt = text;
+  let htmlLabels = true;
+  if (
+    config.flowchart &&
+    (config.flowchart.htmlLabels === false || config.flowchart.htmlLabels === 'false')
+  )
+    htmlLabels = false;
+
+  if (config.securityLevel !== 'loose' && htmlLabels) {
+    // eslint-disable-line
+    txt = breakToPlaceholder(txt);
+    txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    txt = txt.replace(/=/g, '&equals;');
+    txt = placeholderToBreak(txt);
+  }
+
+  return txt;
+};
+
+const breakToPlaceholder = s => {
+  return s.replace(/<br\s*\/?>/gi, '#br#');
+};
+
+const placeholderToBreak = s => {
+  return s.replace(/#br#/g, '<br/>');
+};
+
+export default {
+  getRows,
+  sanitizeText
+};

src/diagrams/flowchart/flowDb.js

@@ -2,6 +2,7 @@ import * as d3 from 'd3';
 import { logger } from '../../logger';
 import utils from '../../utils';
 import { getConfig } from '../../config';
+import common from '../common/common';
 
 // const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
 const MERMAID_DOM_ID_PREFIX = '';
@@ -43,7 +44,7 @@ export const addVertex = function(_id, text, type, style, classes) {
     vertices[id] = { id: id, styles: [], classes: [] };
   }
   if (typeof text !== 'undefined') {
-    txt = utils.sanitize(text.trim(), config);
+    txt = common.sanitizeText(text.trim(), config);
 
     // strip quotes if string starts and ends with a quote
     if (txt[0] === '"' && txt[txt.length - 1] === '"') {
@@ -93,7 +94,7 @@ export const addSingleLink = function(_start, _end, type, linktext) {
   linktext = type.text;
 
   if (typeof linktext !== 'undefined') {
-    edge.text = utils.sanitize(linktext.trim(), config);
+    edge.text = common.sanitizeText(linktext.trim(), config);
 
     // strip quotes if string starts and exnds with a quote
     if (edge.text[0] === '"' && edge.text[edge.text.length - 1] === '"') {
@@ -210,7 +211,7 @@ export const setClass = function(ids, className) {
 const setTooltip = function(ids, tooltip) {
   ids.split(',').forEach(function(id) {
     if (typeof tooltip !== 'undefined') {
-      tooltips[id] = utils.sanitize(tooltip, config);
+      tooltips[id] = common.sanitizeText(tooltip, config);
     }
   });
 };
@@ -410,7 +411,7 @@ export const addSubGraph = function(_id, list, _title) {
   id = id || 'subGraph' + subCount;
   if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
   title = title || '';
-  title = utils.sanitize(title, config);
+  title = common.sanitizeText(title, config);
   subCount = subCount + 1;
   const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [] };
   subGraphs.push(subGraph);

src/diagrams/state/shapes.js

@@ -2,6 +2,7 @@ import * as d3 from 'd3';
 import idCache from './id-cache.js';
 import stateDb from './stateDb';
 import utils from '../../utils';
+import common from '../common/common';
 import { getConfig } from '../../config';
 
 // let conf;
@@ -391,12 +392,6 @@ export const drawState = function(elem, stateDef) {
   return stateInfo;
 };
 
-const getRows = s => {
-  let str = s.replace(/<br\s*\/?>/gi, '#br#');
-  str = str.replace(/\\n/g, '#br#');
-  return str.split('#br#');
-};
-
 let edgeCount = 0;
 export const drawEdge = function(elem, path, relation) {
   const getRelationType = function(type) {
@@ -455,7 +450,7 @@ export const drawEdge = function(elem, path, relation) {
 
     const { x, y } = utils.calcLabelPosition(path.points);
 
-    const rows = getRows(relation.title);
+    const rows = common.getRows(relation.title);
 
     // console.warn(rows);
 

src/diagrams/state/stateRenderer.js

@@ -3,6 +3,7 @@ import dagre from 'dagre';
 import graphlib from 'graphlib';
 import { logger } from '../../logger';
 import stateDb from './stateDb';
+import common from '../common/common';
 import { parser } from './parser/stateDiagram';
 // import idCache from './id-cache';
 import { drawState, addTitleAndBox, drawEdge } from './shapes';
@@ -99,14 +100,6 @@ const getLabelWidth = text => {
   return text ? text.length * conf.fontSizeFactor : 1;
 };
 
-/* TODO: REMOVE DUPLICATION, SEE SHAPES */
-const getRows = s => {
-  if (!s) return 1;
-  let str = s.replace(/<br\s*\/?>/gi, '#br#');
-  str = str.replace(/\\n/g, '#br#');
-  return str.split('#br#');
-};
-
 const renderDoc = (doc, diagram, parentId, altBkg) => {
   // // Layout graph, Create a new directed graph
   const graph = new graphlib.Graph({
@@ -239,7 +232,7 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
       {
         relation: relation,
         width: getLabelWidth(relation.title),
-        height: conf.labelHeight * getRows(relation.title).length,
+        height: conf.labelHeight * common.getRows(relation.title).length,
         labelpos: 'c'
       },
       'id' + cnt

src/utils.js

@@ -74,25 +74,6 @@ export const interpolateToCurve = (interpolate, defaultCurve) => {
   return d3[curveName] || defaultCurve;
 };
 
-export const sanitize = (text, config) => {
-  let txt = text;
-  let htmlLabels = true;
-  if (
-    config.flowchart &&
-    (config.flowchart.htmlLabels === false || config.flowchart.htmlLabels === 'false')
-  )
-    htmlLabels = false;
-
-  if (config.securityLevel !== 'loose' && htmlLabels) { // eslint-disable-line
-    txt = txt.replace(/<br\s*\/?>/gi, '#br#');
-    txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;');
-    txt = txt.replace(/=/g, '&equals;');
-    txt = txt.replace(/#br#/g, '<br/>');
-  }
-
-  return txt;
-};
-
 export const formatUrl = (linkStr, config) => {
   let url = linkStr.trim();
 
@@ -225,7 +206,6 @@ export default {
   interpolateToCurve,
   calcLabelPosition,
   calcCardinalityPosition,
-  sanitize,
   formatUrl,
   getStylesFromArray
 };