Merge pull request #1170 from jgreywolf/1064-ClickEventInClassDiagram

1064 click event in class diagram

src/diagrams/class/classDb.js

@@ -1,9 +1,9 @@
 import * as d3 from 'd3';
-import { sanitizeUrl } from '@braintree/sanitize-url';
 import { logger } from '../../logger';
 import { getConfig } from '../../config';
+import utils from '../../utils';
 
-const MERMAID_DOM_ID_PREFIX = '';
+const MERMAID_DOM_ID_PREFIX = 'classid-';
 
 const config = getConfig();
 
@@ -155,14 +155,10 @@ export const setLink = function(ids, linkStr, tooltip) {
     let id = _id;
     if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
     if (typeof classes[id] !== 'undefined') {
-      if (config.securityLevel !== 'loose') {
-        classes[id].link = sanitizeUrl(linkStr);
-      } else {
-        classes[id].link = linkStr;
-      }
+      classes[id].link = utils.formatUrl(linkStr, config);
 
       if (tooltip) {
-        classes[id].tooltip = tooltip;
+        classes[id].tooltip = utils.sanitize(tooltip, config);
       }
     }
   });
@@ -182,9 +178,10 @@ export const setClickEvent = function(ids, functionName, tooltip) {
   setCssClass(ids, 'clickable');
 };
 
-const setClickFunc = function(_id, functionName) {
+const setClickFunc = function(_id, functionName, tooltip) {
   let id = _id;
-  if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
+  let elemId = MERMAID_DOM_ID_PREFIX + id;
+
   if (config.securityLevel !== 'loose') {
     return;
   }
@@ -192,14 +189,17 @@ const setClickFunc = function(_id, functionName) {
     return;
   }
   if (typeof classes[id] !== 'undefined') {
+    if (tooltip) {
+      classes[id].tooltip = utils.sanitize(tooltip, config);
+    }
+
     funs.push(function() {
-      const elem = document.querySelector(`[id="${id}"]`);
+      const elem = document.querySelector(`[id="${elemId}"]`);
       if (elem !== null) {
-        elem.setAttribute('title', classes[id].tooltip);
         elem.addEventListener(
           'click',
           function() {
-            window[functionName](id);
+            window[functionName](elemId);
           },
           false
         );

src/diagrams/class/classRenderer.js

@@ -8,9 +8,9 @@ import { parser } from './parser/classDiagram';
 
 parser.yy = classDb;
 
+const MERMAID_DOM_ID_PREFIX = 'classid-';
 let idCache = {};
 
-let classCnt = 0;
 const conf = {
   dividerMargin: 10,
   padding: 5,
@@ -322,7 +322,7 @@ const drawClass = function(elem, classDef) {
     }
   };
 
-  const id = 'classId' + classCnt;
+  const id = MERMAID_DOM_ID_PREFIX + classDef.id;
   const classInfo = {
     id: id,
     label: classDef.id,
@@ -342,8 +342,7 @@ const drawClass = function(elem, classDef) {
     title = g
       .append('svg:a')
       .attr('xlink:href', classDef.link)
-      .attr('xlink:target', '_blank')
-      .attr('xlink:title', classDef.tooltip)
+      .attr('target', '_blank')
       .append('text')
       .attr('y', conf.textHeight + conf.padding)
       .attr('x', 0);
@@ -435,6 +434,10 @@ const drawClass = function(elem, classDef) {
     x.setAttribute('x', (rectWidth - x.getBBox().width) / 2);
   });
 
+  if (classDef.tooltip) {
+    title.insert('title').text(classDef.tooltip);
+  }
+
   membersLine.attr('x2', rectWidth);
   methodsLine.attr('x2', rectWidth);
 
@@ -442,7 +445,6 @@ const drawClass = function(elem, classDef) {
   classInfo.height = classBox.height + conf.padding + 0.5 * conf.dividerMargin;
 
   idCache[id] = classInfo;
-  classCnt++;
   return classInfo;
 };
 

src/diagrams/flowchart/flowDb.js

@@ -1,5 +1,4 @@
 import * as d3 from 'd3';
-import { sanitizeUrl } from '@braintree/sanitize-url';
 import { logger } from '../../logger';
 import utils from '../../utils';
 import { getConfig } from '../../config';
@@ -20,25 +19,6 @@ let direction;
 // Functions to be run after graph rendering
 let funs = [];
 
-const sanitize = text => {
-  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>/g, '#br#');
-    txt = txt.replace(/<br\S*?\/>/g, '#br#');
-    txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;');
-    txt = txt.replace(/=/g, '&equals;');
-    txt = txt.replace(/#br#/g, '<br/>');
-  }
-
-  return txt;
-};
-
 /**
  * Function called by parser when a node definition has been found
  * @param id
@@ -63,7 +43,7 @@ export const addVertex = function(_id, text, type, style, classes) {
     vertices[id] = { id: id, styles: [], classes: [] };
   }
   if (typeof text !== 'undefined') {
-    txt = sanitize(text.trim());
+    txt = utils.sanitize(text.trim(), config);
 
     // strip quotes if string starts and ends with a quote
     if (txt[0] === '"' && txt[txt.length - 1] === '"') {
@@ -113,7 +93,7 @@ export const addSingleLink = function(_start, _end, type, linktext) {
   linktext = type.text;
 
   if (typeof linktext !== 'undefined') {
-    edge.text = sanitize(linktext.trim());
+    edge.text = utils.sanitize(linktext.trim(), config);
 
     // strip quotes if string starts and exnds with a quote
     if (edge.text[0] === '"' && edge.text[edge.text.length - 1] === '"') {
@@ -225,7 +205,7 @@ export const setClass = function(ids, className) {
 const setTooltip = function(ids, tooltip) {
   ids.split(',').forEach(function(id) {
     if (typeof tooltip !== 'undefined') {
-      tooltips[id] = sanitize(tooltip);
+      tooltips[id] = utils.sanitize(tooltip, config);
     }
   });
 };
@@ -266,11 +246,7 @@ export const setLink = function(ids, linkStr, tooltip) {
     let id = _id;
     if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
     if (typeof vertices[id] !== 'undefined') {
-      if (config.securityLevel !== 'loose') {
-        vertices[id].link = sanitizeUrl(linkStr); // .replace(/javascript:.*/g, '')
-      } else {
-        vertices[id].link = linkStr;
-      }
+      vertices[id].link = utils.formatUrl(linkStr, config);
     }
   });
   setTooltip(ids, tooltip);
@@ -429,7 +405,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 = sanitize(title);
+  title = utils.sanitize(title, config);
   subCount = subCount + 1;
   const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [] };
   subGraphs.push(subGraph);