#1676 Adding click support to the new rendering engine and classDiagram-v2

src/diagrams/class/classDb.js

@@ -7,8 +7,6 @@ import mermaidAPI from '../../mermaidAPI';
 
 const MERMAID_DOM_ID_PREFIX = 'classid-';
 
-const config = configApi.getConfig();
-
 let relations = [];
 let classes = {};
 let classCounter = 0;
@@ -176,6 +174,7 @@ export const setCssClass = function(ids, className) {
  * @param tooltip Tooltip for the clickable element
  */
 export const setLink = function(ids, linkStr, tooltip) {
+  const config = configApi.getConfig();
   ids.split(',').forEach(function(_id) {
     let id = _id;
     if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
@@ -199,11 +198,13 @@ export const setLink = function(ids, linkStr, tooltip) {
 export const setClickEvent = function(ids, functionName, tooltip) {
   ids.split(',').forEach(function(id) {
     setClickFunc(id, functionName, tooltip);
+    classes[id].haveCallback = true;
   });
   setCssClass(ids, 'clickable');
 };
 
 const setClickFunc = function(domId, functionName, tooltip) {
+  const config = configApi.getConfig();
   let id = domId;
   let elemId = lookUpDomId(id);
 

src/diagrams/class/classRenderer-v2.js

@@ -34,6 +34,7 @@ export const addClasses = function(classes, g) {
   logger.info('keys:', keys);
   logger.info(classes);
 
+  let cnt = 0;
   // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
   keys.forEach(function(id) {
     const vertex = classes[id];
@@ -101,11 +102,16 @@ export const addClasses = function(classes, g) {
       class: classStr,
       style: styles.style,
       id: vertex.id,
+      domId: vertex.domId,
+      haveCallback: vertex.haveCallback,
+      link: vertex.link,
       width: vertex.type === 'group' ? 500 : undefined,
       type: vertex.type,
       padding: getConfig().flowchart.padding
     });
 
+    cnt++;
+
     logger.info('setNode', {
       labelStyle: styles.labelStyle,
       shape: _shape,

src/diagrams/class/styles.js

@@ -5,11 +5,11 @@ const getStyles = options =>
   stroke: none;
   font-family: ${options.fontFamily};
   font-size: 10px;
-  
+
   .title {
     font-weight: bolder;
   }
-  
+
 }
 
 .classTitle {

src/diagrams/flowchart/flowRenderer-v2.js

@@ -29,6 +29,7 @@ export const addVertices = function(vert, g, svgId) {
   const keys = Object.keys(vert);
 
   // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
+  let cnt = 0;
   keys.forEach(function(id) {
     const vertex = vert[id];
 
@@ -141,6 +142,9 @@ export const addVertices = function(vert, g, svgId) {
       class: classStr,
       style: styles.style,
       id: vertex.id,
+      link: vertex.link,
+      linkTarget: vertex.linkTarget,
+      domId: 'flow-' + vertex.id + '-' + cnt,
       width: vertex.type === 'group' ? 500 : undefined,
       type: vertex.type,
       padding: getConfig().flowchart.padding
@@ -155,10 +159,12 @@ export const addVertices = function(vert, g, svgId) {
       class: classStr,
       style: styles.style,
       id: vertex.id,
+      domId: 'flow-' + vertex.id + '-' + cnt,
       width: vertex.type === 'group' ? 500 : undefined,
       type: vertex.type,
       padding: getConfig().flowchart.padding
     });
+    cnt++;
   });
 };
 

src/diagrams/gantt/ganttRenderer.js

@@ -301,7 +301,6 @@ export const draw = function(text, id) {
         }
 
         let secNum = 0;
-        console.log(conf);
         for (let i = 0; i < categories.length; i++) {
           if (d.type === categories[i]) {
             secNum = i % conf.numberSectionStyles;

src/diagrams/state/stateRenderer-v2.js

@@ -100,6 +100,7 @@ const setupNode = (g, parent, node, altFlag) => {
       classes: nodeDb[node.id].classes, //classStr,
       style: '', //styles.style,
       id: node.id,
+      domId: 'state-' + node.id + '-' + cnt,
       type: nodeDb[node.id].type,
       padding: 15 //getConfig().flowchart.padding
     };
@@ -113,6 +114,7 @@ const setupNode = (g, parent, node, altFlag) => {
         classes: 'statediagram-note', //classStr,
         style: '', //styles.style,
         id: node.id + '----note',
+        domId: 'state-' + node.id + '----note-' + cnt,
         type: nodeDb[node.id].type,
         padding: 15 //getConfig().flowchart.padding
       };
@@ -123,9 +125,12 @@ const setupNode = (g, parent, node, altFlag) => {
         classes: nodeDb[node.id].classes, //classStr,
         style: '', //styles.style,
         id: node.id + '----parent',
+        domId: 'state-' + node.id + '----parent-' + cnt,
         type: 'group',
         padding: 0 //getConfig().flowchart.padding
       };
+      cnt++;
+
       g.setNode(node.id + '----parent', groupData);
 
       g.setNode(noteData.id, noteData);
@@ -170,6 +175,7 @@ const setupNode = (g, parent, node, altFlag) => {
 };
 let cnt = 0;
 const setupDoc = (g, parent, doc, altFlag) => {
+  cnt = 0;
   logger.trace('items', doc);
   doc.forEach(item => {
     if (item.stmt === 'state' || item.stmt === 'default') {