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

src/dagre-wrapper/nodes.js

@@ -289,7 +289,7 @@ const rectWithTitle = (parent, node) => {
   const shapeSvg = parent
     .insert('g')
     .attr('class', classes)
-    .attr('id', node.id);
+    .attr('id', node.domId || node.id);
 
   // Create the title label and insert it after the rect
   const rect = shapeSvg.insert('rect', ':first-child');
@@ -458,7 +458,7 @@ const start = (parent, node) => {
   const shapeSvg = parent
     .insert('g')
     .attr('class', 'node default')
-    .attr('id', node.id);
+    .attr('id', node.domId || node.id);
   const circle = shapeSvg.insert('circle', ':first-child');
 
   // center the circle around its coordinate
@@ -481,7 +481,7 @@ const forkJoin = (parent, node, dir) => {
   const shapeSvg = parent
     .insert('g')
     .attr('class', 'node default')
-    .attr('id', node.id);
+    .attr('id', node.domId || node.id);
 
   let width = 70;
   let height = 10;
@@ -515,7 +515,7 @@ const end = (parent, node) => {
   const shapeSvg = parent
     .insert('g')
     .attr('class', 'node default')
-    .attr('id', node.id);
+    .attr('id', node.domId || node.id);
   const innerCircle = shapeSvg.insert('circle', ':first-child');
   const circle = shapeSvg.insert('circle', ':first-child');
 
@@ -552,10 +552,18 @@ const class_box = (parent, node) => {
     classes = 'node ' + node.classes;
   }
   // Add outer g element
-  const shapeSvg = parent
+  const shapeSvgG = parent
     .insert('g')
     .attr('class', classes)
-    .attr('id', node.id);
+    .attr('id', node.domId || node.id);
+
+  // Add link
+  const shapeSvg = node.link
+    ? shapeSvgG
+        .append('svg:a')
+        .attr('xlink:href', node.link)
+        .attr('target', node.linkTarget || '_blank')
+    : shapeSvgG;
 
   // Create the title label and insert it after the rect
   const rect = shapeSvg.insert('rect', ':first-child');
@@ -823,6 +831,9 @@ let nodeElems = {};
 
 export const insertNode = (elem, node, dir) => {
   nodeElems[node.id] = shapes[node.shape](elem, node, dir);
+  if (node.haveCallback) {
+    nodeElems[node.id].attr('class', nodeElems[node.id].attr('class') + ' clickable');
+  }
 };
 export const setNodeElem = (elem, node) => {
   nodeElems[node.id] = elem;

src/dagre-wrapper/shapes/util.js

@@ -12,7 +12,7 @@ export const labelHelper = (parent, node, _classes, isNode) => {
   const shapeSvg = parent
     .insert('g')
     .attr('class', classes)
-    .attr('id', node.id);
+    .attr('id', node.domId || node.id);
 
   // Create the label and insert it after the rect
   const label = shapeSvg.insert('g').attr('class', 'label');

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') {

src/mermaidAPI.js

@@ -220,7 +220,7 @@ const render = function(id, _txt, cb, container) {
   // console.warn('Render fetching config');
 
   const cnf = configApi.getConfig();
-  console.warn('Render with config after adding new directives', cnf.sequence);
+  // console.warn('Render with config after adding new directives', cnf.sequence);
   // console.warn(
   //   'Render with config after adding new directives',
   //   cnf.fontFamily,
@@ -437,6 +437,7 @@ const render = function(id, _txt, cb, container) {
         cb(svgCode, ganttDb.bindFunctions);
         break;
       case 'class':
+      case 'classDiagram':
         cb(svgCode, classDb.bindFunctions);
         break;
       default: