Fix for legacy class diagram

cypress/platform/knsv.html

@@ -95,7 +95,10 @@ graph TD
         Go downstairs: 5: Me
         Sit down: 5: Me
       </div>
-      <div class="mermaid" style="width: 100%;">
+      <div class="mermaid2" style="width: 100%;">
+        info
+      </div>
+      <div class="mermaid2" style="width: 100%;">
 requirementDiagram
       accTitle: My req Diagram
       accDescr: My req Diagram Description
@@ -196,7 +199,7 @@ stateDiagram
             end
           end
           B ->> A: Return</div>
-      <div class="mermaid2" style="width: 100%;">
+      <div class="mermaid" style="width: 100%;">
 classDiagram
 accTitle: My class diagram
 accDescr: My class diagram Description
@@ -278,7 +281,7 @@ class Class10 {
     // defaultRenderer: 'dagre-d3',
   },
   class: {
-    // defaultRenderer: 'dagre-d3',
+    defaultRenderer: 'dagre-d3',
     htmlLabels: true,
   },
         // gantt: { axisFormat: '%m/%d/%Y' },

src/Diagram.js

@@ -111,18 +111,23 @@ class Diagram {
         this.renderer = ganttRenderer;
         break;
       case 'class':
+        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
         this.parser = classParser;
         this.parser.parser.yy = classDb;
         this.db = classDb;
+        this.db.clear();
         this.renderer = classRenderer;
         break;
       case 'classDiagram':
+        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
         this.parser = classParser;
         this.parser.parser.yy = classDb;
         this.db = classDb;
+        this.db.clear();
         this.renderer = classRendererV2;
         break;
       case 'state':
+        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
         this.parser = stateParser;
         this.parser.parser.yy = stateDb;
         this.db = stateDb;
@@ -130,6 +135,7 @@ class Diagram {
         this.renderer = stateRenderer;
         break;
       case 'stateDiagram':
+        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
         this.parser = stateParser;
         this.parser.parser.yy = stateDb;
         this.db = stateDb;

src/defaultConfig.js

@@ -817,6 +817,9 @@ const config = {
   },
   class: {
     arrowMarkerAbsolute: false,
+    dividerMargin: 10,
+    padding: 5,
+    textHeight: 10,
 
     /**
      * | Parameter   | Description | Type    | Required | Values      |

src/diagrams/class/classRenderer.js

@@ -2,19 +2,15 @@ import { select } from 'd3';
 import dagre from 'dagre';
 import graphlib from 'graphlib';
 import { log } from '../../logger';
-import classDb, { lookUpDomId } from './classDb';
-import { parser } from './parser/classDiagram';
 import svgDraw from './svgDraw';
 import { configureSvgSize } from '../../utils';
 import { getConfig } from '../../config';
 import addSVGAccessibilityFields from '../../accessibility';
 
-parser.yy = classDb;
-
 let idCache = {};
 const padding = 20;
 
-const conf = {
+const confa = {
   dividerMargin: 10,
   padding: 5,
   textHeight: 10,
@@ -141,29 +137,20 @@ const insertMarkers = function (elem) {
     .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
 };
 
-/**
- * Merges the value of `conf` with the passed `cnf`
- *
- * @param {object} cnf Config to merge
- */
-export const setConf = function (cnf) {
-  const keys = Object.keys(cnf);
-
-  keys.forEach(function (key) {
-    conf[key] = cnf[key];
-  });
-};
-
 /**
  * Draws a flowchart in the tag with id: id based on the graph definition in text.
  *
  * @param {string} text
  * @param {string} id
+ * @param version
+ * @param _version
+ * @param diagObj
  */
-export const draw = function (text, id) {
+export const draw = function (text, id, _version, diagObj) {
+  const conf = getConfig().class;
   idCache = {};
-  parser.yy.clear();
+  diagObj.db.clear();
-  parser.parse(text);
+  diagObj.parser.parse(text);
 
   log.info('Rendering diagram ' + text);
 
@@ -198,12 +185,12 @@ export const draw = function (text, id) {
     return {};
   });
 
-  const classes = classDb.getClasses();
+  const classes = diagObj.db.getClasses();
   const keys = Object.keys(classes);
 
   for (let i = 0; i < keys.length; i++) {
     const classDef = classes[keys[i]];
-    const node = svgDraw.drawClass(diagram, classDef, conf);
+    const node = svgDraw.drawClass(diagram, classDef, conf, diagObj);
     idCache[node.id] = node;
 
     // Add nodes to the graph. The first argument is the node id. The second is
@@ -214,7 +201,7 @@ export const draw = function (text, id) {
     log.info('Org height: ' + node.height);
   }
 
-  const relations = classDb.getRelations();
+  const relations = diagObj.db.getRelations();
   relations.forEach(function (relation) {
     log.info(
       'tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)
@@ -234,7 +221,7 @@ export const draw = function (text, id) {
     if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {
       log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));
       root
-        .select('#' + lookUpDomId(v))
+        .select('#' + diagObj.db.lookUpDomId(v))
         .attr(
           'transform',
           'translate(' +
@@ -249,7 +236,7 @@ export const draw = function (text, id) {
   g.edges().forEach(function (e) {
     if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') {
       log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
-      svgDraw.drawEdge(diagram, g.edge(e), g.edge(e).relation, conf);
+      svgDraw.drawEdge(diagram, g.edge(e), g.edge(e).relation, conf, diagObj);
     }
   });
 
@@ -263,10 +250,9 @@ export const draw = function (text, id) {
   const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
   log.debug(`viewBox ${vBox}`);
   diagram.attr('viewBox', vBox);
-  addSVGAccessibilityFields(parser.yy, diagram, id);
+  addSVGAccessibilityFields(diagObj.db, diagram, id);
 };
 
 export default {
-  setConf,
   draw,
 };

src/diagrams/class/svgDraw.js

@@ -1,19 +1,18 @@
 import { line, curveBasis } from 'd3';
-import { lookUpDomId, relationType } from './classDb';
 import utils from '../../utils';
 import { log } from '../../logger';
 
 let edgeCount = 0;
-export const drawEdge = function (elem, path, relation, conf) {
+export const drawEdge = function (elem, path, relation, conf, diagObj) {
   const getRelationType = function (type) {
     switch (type) {
-      case relationType.AGGREGATION:
+      case diagObj.db.relationType.AGGREGATION:
         return 'aggregation';
-      case relationType.EXTENSION:
+      case diagObj.db.EXTENSION:
         return 'extension';
-      case relationType.COMPOSITION:
+      case diagObj.db.COMPOSITION:
         return 'composition';
-      case relationType.DEPENDENCY:
+      case diagObj.db.DEPENDENCY:
         return 'dependency';
     }
   };
@@ -150,10 +149,11 @@ export const drawEdge = function (elem, path, relation, conf) {
  * @param {SVGSVGElement} elem The element to draw it into
  * @param classDef
  * @param conf
+ * @param diagObj
  * @todo Add more information in the JSDOC here
  */
-export const drawClass = function (elem, classDef, conf) {
+export const drawClass = function (elem, classDef, conf, diagObj) {
-  log.info('Rendering class ' + classDef);
+  log.debug('Rendering class ', classDef, conf);
 
   const id = classDef.id;
   const classInfo = {
@@ -164,7 +164,7 @@ export const drawClass = function (elem, classDef, conf) {
   };
 
   // add class group
-  const g = elem.append('g').attr('id', lookUpDomId(id)).attr('class', 'classGroup');
+  const g = elem.append('g').attr('id', diagObj.db.lookUpDomId(id)).attr('class', 'classGroup');
 
   // add title
   let title;

src/diagrams/info/infoRenderer.js

@@ -1,30 +1,20 @@
 /** Created by knut on 14-12-11. */
 import { select } from 'd3';
-import db from './infoDb';
-import infoParser from './parser/info';
 import { log } from '../../logger';
 import { getConfig } from '../../config';
 
-const conf = {};
-export const setConf = function (cnf) {
-  const keys = Object.keys(cnf);
-
-  keys.forEach(function (key) {
-    conf[key] = cnf[key];
-  });
-};
-
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
  *
  * @param {any} text
  * @param {any} id
  * @param {any} version
+ * @param diagObj
  */
-export const draw = (text, id, version) => {
+export const draw = (text, id, version, diagObj) => {
   try {
-    const parser = infoParser.parser;
+    // const parser = infoParser.parser;
-    parser.yy = db;
+    // parser.yy = db;
     log.debug('Renering info diagram\n' + text);
 
     const securityLevel = getConfig().securityLevel;
@@ -40,8 +30,8 @@ export const draw = (text, id, version) => {
     const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
     // Parse the graph definition
-    parser.parse(text);
+    // parser.parse(text);
-    log.debug('Parsed info diagram');
+    // log.debug('Parsed info diagram');
     // Fetch the default direction, use TD if none was found
     const svg = root.select('#' + id);
 
@@ -65,6 +55,5 @@ export const draw = (text, id, version) => {
 };
 
 export default {
-  setConf,
   draw,
 };

src/diagrams/requirement/requirementRenderer.js

@@ -356,7 +356,6 @@ export const draw = (text, id, _version, diagObj) => {
     drawRelationshipFromLayout(svg, rel, g, id, diagObj);
   });
 
-  // svg.attr('height', '500px');
   const padding = conf.rect_padding;
   const svgBounds = svg.node().getBBox();
   const width = svgBounds.width + padding * 2;

src/mermaidAPI.js

@@ -379,34 +379,30 @@ const render = function (id, _txt, cb, container) {
         diag.renderer.draw(txt, id, pkg.version, diag);
         break;
       case 'gantt':
-        cnf.gantt.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
         diag.renderer.setConf(cnf.gantt);
         diag.renderer.draw(txt, id, pkg.version, diag);
         break;
       case 'class':
-        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        // classRenderer.setConf(cnf.class);
-        classRenderer.setConf(cnf.class);
+        diag.renderer.draw(txt, id, pkg.version, diag);
-        classRenderer.draw(txt, id, pkg.version, diag);
         break;
       case 'classDiagram':
-        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        // classRendererV2.setConf(cnf.class);
-        classRendererV2.setConf(cnf.class);
+        diag.renderer.draw(txt, id, pkg.version, diag);
-        classRendererV2.draw(txt, id, pkg.version, diag);
         break;
       case 'state':
-        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        // stateRenderer.setConf(cnf.state);
-        stateRenderer.setConf(cnf.state);
+        diag.renderer.draw(txt, id, pkg.version, diag);
-        stateRenderer.draw(txt, id, pkg.version, diag);
         break;
       case 'stateDiagram':
-        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        // cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-        diag.renderer.setConf(cnf.state);
+        // diag.renderer.setConf(cnf.state);
         diag.renderer.draw(txt, id, pkg.version, diag);
         break;
       case 'info':
-        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        // cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-        infoRenderer.setConf(cnf.class);
+        // infoRenderer.setConf(cnf.class);
-        infoRenderer.draw(txt, id, pkg.version, diag);
+        diag.renderer.draw(txt, id, pkg.version, diag);
         break;
       case 'pie':
         diag.renderer.draw(txt, id, pkg.version, diag);
@@ -582,10 +578,10 @@ function updateRendererConfigs(conf) {
   }
   sequenceRenderer.setConf(conf.sequence);
   ganttRenderer.setConf(conf.gantt);
-  classRenderer.setConf(conf.class);
+  // classRenderer.setConf(conf.class);
   stateRenderer.setConf(conf.state);
   stateRendererV2.setConf(conf.state);
-  infoRenderer.setConf(conf.class);
+  // infoRenderer.setConf(conf.class);
   journeyRenderer.setConf(conf.journey);
   errorRenderer.setConf(conf.class);
 }