Handling of requirement diagrams using the generic diagram

cypress/platform/knsv.html

@@ -30,7 +30,7 @@
 
 
 
-<div class="mermaid" style="width: 50%;">
+<div class="mermaid2" style="width: 50%;">
 journey
     title My working day
     section Go to work
@@ -95,7 +95,7 @@ graph TD
         Go downstairs: 5: Me
         Sit down: 5: Me
       </div>
-      <div class="mermaid2" style="width: 100%;">
+      <div class="mermaid" style="width: 100%;">
 requirementDiagram
       accTitle: My req Diagram
       accDescr: My req Diagram Description
@@ -135,6 +135,7 @@ requirementDiagram
     test_req - traces -> test_req2
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
+
       </div>
       <div class="mermaid2" style="width: 100%;">
 gantt

src/diagrams/requirement/requirementRenderer.js

@@ -1,29 +1,16 @@
 import { line, select } from 'd3';
 import dagre from 'dagre';
 import graphlib from 'graphlib';
-// import * as configApi from '../../config';
 import { log } from '../../logger';
 import { configureSvgSize } from '../../utils';
 import common from '../common/common';
-import { parser } from './parser/requirementDiagram';
-import requirementDb from './requirementDb';
 import markers from './requirementMarkers';
 import { getConfig } from '../../config';
 import addSVGAccessibilityFields from '../../accessibility';
 
-const conf = {};
+let conf = {};
 let relCnt = 0;
 
-export const setConf = function (cnf) {
-  if (typeof cnf === 'undefined') {
-    return;
-  }
-  const keys = Object.keys(cnf);
-  for (let i = 0; i < keys.length; i++) {
-    conf[keys[i]] = cnf[keys[i]];
-  }
-};
-
 const newRectNode = (parentNode, id) => {
   return parentNode
     .insert('rect', '#' + id)
@@ -162,7 +149,7 @@ const addEdgeLabel = (parentNode, svgPath, conf, txt) => {
     .attr('fill-opacity', '85%');
 };
 
-const drawRelationshipFromLayout = function (svg, rel, g, insert) {
+const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) {
   // Find the edge relating to this relationship
   const edge = g.edge(elementString(rel.src), elementString(rel.dst));
 
@@ -182,7 +169,7 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert) {
     .attr('d', lineFunction(edge.points))
     .attr('fill', 'none');
 
-  if (rel.type == requirementDb.Relationships.CONTAINS) {
+  if (rel.type == diagObj.db.Relationships.CONTAINS) {
     svgPath.attr(
       'marker-start',
       'url(' + common.getUrl(conf.arrowMarkerAbsolute) + '#' + rel.type + '_line_ending' + ')'
@@ -318,12 +305,12 @@ const elementString = (str) => {
   return str.replace(/\s/g, '').replace(/\./g, '_');
 };
 
-export const draw = (text, id) => {
-  parser.yy = requirementDb;
-  parser.yy.clear();
-  parser.parse(text);
+export const draw = (text, id, _version, diagObj) => {
+  conf = getConfig().requirement;
+  diagObj.db.clear();
+  diagObj.parser.parse(text);
 
-  const securityLevel = getConfig().securityLevel;
+  const securityLevel = conf.securityLevel;
   // Handle root and Document for when rendering in sanbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
@@ -355,9 +342,9 @@ export const draw = (text, id) => {
       return {};
     });
 
-  let requirements = requirementDb.getRequirements();
-  let elements = requirementDb.getElements();
-  let relationships = requirementDb.getRelationships();
+  let requirements = diagObj.db.getRequirements();
+  let elements = diagObj.db.getElements();
+  let relationships = diagObj.db.getRelationships();
 
   drawReqs(requirements, g, svg);
   drawElements(elements, g, svg);
@@ -366,7 +353,7 @@ export const draw = (text, id) => {
   adjustEntities(svg, g);
 
   relationships.forEach(function (rel) {
-    drawRelationshipFromLayout(svg, rel, g, id);
+    drawRelationshipFromLayout(svg, rel, g, id, diagObj);
   });
 
   // svg.attr('height', '500px');
@@ -379,10 +366,9 @@ export const draw = (text, id) => {
 
   svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
   // Adds title and description to the requirements diagram
-  addSVGAccessibilityFields(parser.yy, svg, id);
+  addSVGAccessibilityFields(diagObj.db, svg, id);
 };
 
 export default {
-  setConf,
   draw,
 };

src/mermaidAPI.js

@@ -420,8 +420,8 @@ const render = function (id, _txt, cb, container) {
         diag.renderer.draw(txt, id, pkg.version, diag);
         break;
       case 'requirement':
-        requirementRenderer.setConf(cnf.requirement);
-        requirementRenderer.draw(txt, id, pkg.version, diag);
+        // requirementRenderer.setConf(cnf.requirement);
+        diag.renderer.draw(txt, id, pkg.version, diag);
         break;
     }
   } catch (e) {
@@ -586,9 +586,7 @@ function updateRendererConfigs(conf) {
   stateRenderer.setConf(conf.state);
   stateRendererV2.setConf(conf.state);
   infoRenderer.setConf(conf.class);
-  erRenderer.setConf(conf.er);
   journeyRenderer.setConf(conf.journey);
-  requirementRenderer.setConf(conf.requirement);
   errorRenderer.setConf(conf.class);
 }