Merge pull request #1190 from mermaid-js/Issue-1092_Mangled_Multiple_Class_Diagrams

#1092 Fix for mangling of multiple classDiagrams

src/diagrams/class/classDb.js

@@ -9,6 +9,7 @@ const config = getConfig();
 
 let relations = [];
 let classes = {};
+let classCounter = 0;
 
 let funs = [];
 
@@ -41,8 +42,24 @@ export const addClass = function(id) {
     cssClasses: [],
     methods: [],
     members: [],
-    annotations: []
+    annotations: [],
+    domId: MERMAID_DOM_ID_PREFIX + classId.className + '-' + classCounter
   };
+  classCounter++;
+};
+
+/**
+ * Function to lookup domId from id in the graph definition.
+ * @param id
+ * @public
+ */
+export const lookUpDomId = function(id) {
+  const classKeys = Object.keys(classes);
+  for (let i = 0; i < classKeys.length; i++) {
+    if (classes[classKeys[i]].id === id) {
+      return classes[classKeys[i]].domId;
+    }
+  }
 };
 
 export const clear = function() {
@@ -178,9 +195,9 @@ export const setClickEvent = function(ids, functionName, tooltip) {
   setCssClass(ids, 'clickable');
 };
 
-const setClickFunc = function(_id, functionName, tooltip) {
+const setClickFunc = function(domId, functionName, tooltip) {
-  let id = _id;
+  let id = domId;
-  let elemId = MERMAID_DOM_ID_PREFIX + id;
+  let elemId = lookUpDomId(id);
 
   if (config.securityLevel !== 'loose') {
     return;
@@ -286,5 +303,6 @@ export default {
   relationType,
   setClickEvent,
   setCssClass,
-  setLink
+  setLink,
+  lookUpDomId
 };

src/diagrams/class/classRenderer.js

@@ -2,13 +2,12 @@ import * as d3 from 'd3';
 import dagre from 'dagre';
 import graphlib from 'graphlib';
 import { logger } from '../../logger';
-import classDb from './classDb';
+import classDb, { lookUpDomId } from './classDb';
 import utils from '../../utils';
 import { parser } from './parser/classDiagram';
 
 parser.yy = classDb;
 
-const MERMAID_DOM_ID_PREFIX = 'classid-';
 let idCache = {};
 
 const conf = {
@@ -322,7 +321,7 @@ const drawClass = function(elem, classDef) {
     }
   };
 
-  const id = MERMAID_DOM_ID_PREFIX + classDef.id;
+  const id = classDef.id;
   const classInfo = {
     id: id,
     label: classDef.id,
@@ -333,7 +332,7 @@ const drawClass = function(elem, classDef) {
   // add class group
   const g = elem
     .append('g')
-    .attr('id', id)
+    .attr('id', lookUpDomId(id))
     .attr('class', cssClassStr);
 
   // add title
@@ -514,7 +513,7 @@ export const draw = function(text, id) {
   g.nodes().forEach(function(v) {
     if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {
       logger.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));
-      d3.select('#' + v).attr(
+      d3.select('#' + lookUpDomId(v)).attr(
         'transform',
         'translate(' +
           (g.node(v).x - g.node(v).width / 2) +