#2017 Standardization of requirement diagrams

src/diagrams/requirement/parser/requirementDiagram.jison

@@ -84,7 +84,8 @@
 %% /* language grammar */
 
 start
-  : directive start
+  : directive NEWLINE start
+  | directive start
   | RD NEWLINE diagram EOF;
 
 directive
@@ -108,36 +109,37 @@ diagram
   | requirementDef diagram
   | elementDef diagram
   | relationshipDef diagram
+  | directive diagram
   | NEWLINE diagram;
 
 requirementDef
-  : requirementType requirementName STRUCT_START NEWLINE requirementBody  
+  : requirementType requirementName STRUCT_START NEWLINE requirementBody
     { yy.addRequirement($2, $1) };
 
 requirementBody
-  : ID COLONSEP id NEWLINE requirementBody 
+  : ID COLONSEP id NEWLINE requirementBody
     { yy.setNewReqId($3); }
-  | TEXT COLONSEP text NEWLINE requirementBody 
+  | TEXT COLONSEP text NEWLINE requirementBody
     { yy.setNewReqText($3); }
-  | RISK COLONSEP riskLevel NEWLINE requirementBody 
+  | RISK COLONSEP riskLevel NEWLINE requirementBody
     { yy.setNewReqRisk($3); }
-  | VERIFYMTHD COLONSEP verifyType NEWLINE requirementBody 
+  | VERIFYMTHD COLONSEP verifyType NEWLINE requirementBody
     { yy.setNewReqVerifyMethod($3); }
   | NEWLINE requirementBody
   | STRUCT_STOP;
 
 requirementType
-  : REQUIREMENT 
+  : REQUIREMENT
     { $$=yy.RequirementType.REQUIREMENT;}
-  | FUNCTIONAL_REQUIREMENT 
+  | FUNCTIONAL_REQUIREMENT
     { $$=yy.RequirementType.FUNCTIONAL_REQUIREMENT;}
-  | INTERFACE_REQUIREMENT 
+  | INTERFACE_REQUIREMENT
     { $$=yy.RequirementType.INTERFACE_REQUIREMENT;}
-  | PERFORMANCE_REQUIREMENT 
+  | PERFORMANCE_REQUIREMENT
     { $$=yy.RequirementType.PERFORMANCE_REQUIREMENT;}
-  | PHYSICAL_REQUIREMENT 
+  | PHYSICAL_REQUIREMENT
     { $$=yy.RequirementType.PHYSICAL_REQUIREMENT;}
-  | DESIGN_CONSTRAINT 
+  | DESIGN_CONSTRAINT
     { $$=yy.RequirementType.DESIGN_CONSTRAINT;};
 
 riskLevel
@@ -146,29 +148,29 @@ riskLevel
   | HIGH_RISK { $$=yy.RiskLevel.HIGH_RISK;};
 
 verifyType
-  : VERIFY_ANALYSIS 
+  : VERIFY_ANALYSIS
     { $$=yy.VerifyType.VERIFY_ANALYSIS;}
-  | VERIFY_DEMONSTRATION 
+  | VERIFY_DEMONSTRATION
     { $$=yy.VerifyType.VERIFY_DEMONSTRATION;}
-  | VERIFY_INSPECTION 
+  | VERIFY_INSPECTION
     { $$=yy.VerifyType.VERIFY_INSPECTION;}
-  | VERIFY_TEST 
+  | VERIFY_TEST
     { $$=yy.VerifyType.VERIFY_TEST;};
 
 elementDef
-  : ELEMENT elementName STRUCT_START NEWLINE elementBody  
+  : ELEMENT elementName STRUCT_START NEWLINE elementBody
     { yy.addElement($2) };
 
 elementBody
-  : TYPE COLONSEP type NEWLINE elementBody 
+  : TYPE COLONSEP type NEWLINE elementBody
     { yy.setNewElementType($3); }
-  | DOCREF COLONSEP ref NEWLINE elementBody 
+  | DOCREF COLONSEP ref NEWLINE elementBody
     { yy.setNewElementDocRef($3); }
   | NEWLINE elementBody
   | STRUCT_STOP;
 
 relationshipDef
-  : id END_ARROW_L relationship LINE id 
+  : id END_ARROW_L relationship LINE id
     {  yy.addRelationship($3, $5, $1) }
   | id LINE relationship END_ARROW_R id
      { yy.addRelationship($3, $1, $5) };

src/diagrams/requirement/requirementMarkers.js

@@ -20,8 +20,8 @@ const insertLineEndings = (parentNode, conf) => {
     .attr('cx', conf.line_height / 2)
     .attr('cy', conf.line_height / 2)
     .attr('r', conf.line_height / 2)
-    .attr('stroke', conf.rect_border_color)
-    .attr('stroke-width', 1)
+    // .attr('stroke', conf.rect_border_color)
+    // .attr('stroke-width', 1)
     .attr('fill', 'none');
 
   containsNode
@@ -30,7 +30,7 @@ const insertLineEndings = (parentNode, conf) => {
     .attr('x2', conf.line_height)
     .attr('y1', conf.line_height / 2)
     .attr('y2', conf.line_height / 2)
-    .attr('stroke', conf.rect_border_color)
+    // .attr('stroke', conf.rect_border_color)
     .attr('stroke-width', 1);
 
   containsNode
@@ -39,7 +39,7 @@ const insertLineEndings = (parentNode, conf) => {
     .attr('y2', conf.line_height)
     .attr('x1', conf.line_height / 2)
     .attr('x2', conf.line_height / 2)
-    .attr('stroke', conf.rect_border_color)
+    // .attr('stroke', conf.rect_border_color)
     .attr('stroke-width', 1);
 
   parentNode
@@ -54,13 +54,13 @@ const insertLineEndings = (parentNode, conf) => {
     .append('path')
     .attr(
       'd',
-      `M0,0 
-      L${conf.line_height},${conf.line_height / 2} 
-      M${conf.line_height},${conf.line_height / 2} 
+      `M0,0
+      L${conf.line_height},${conf.line_height / 2}
+      M${conf.line_height},${conf.line_height / 2}
       L0,${conf.line_height}`
     )
-    .attr('stroke-width', 1)
-    .attr('stroke', conf.rect_border_color);
+    .attr('stroke-width', 1);
+  // .attr('stroke', conf.rect_border_color);
 };
 
 export default {

src/diagrams/requirement/requirementRenderer.js

@@ -1,7 +1,7 @@
 import { line, select } from 'd3';
 import dagre from 'dagre';
 import graphlib from 'graphlib';
-import * as configApi from '../../config';
+// import * as configApi from '../../config';
 import { log } from '../../logger';
 import { configureSvgSize } from '../../utils';
 import common from '../common/common';
@@ -26,10 +26,6 @@ const newRectNode = (parentNode, id) => {
   return parentNode
     .insert('rect', '#' + id)
     .attr('class', 'req reqBox')
-    .attr('fill', conf.rect_fill)
-    .attr('fill-opacity', '100%')
-    .attr('stroke', conf.rect_border_color)
-    .attr('stroke-size', conf.rect_border_size)
     .attr('x', 0)
     .attr('y', 0)
     .attr('width', conf.rect_min_width + 'px')
@@ -45,12 +41,11 @@ const newTitleNode = (parentNode, id, txts) => {
     .attr('id', id)
     .attr('x', x)
     .attr('y', conf.rect_padding)
-    .attr('dominant-baseline', 'hanging')
-    .attr(
-      'style',
-      'font-family: ' + configApi.getConfig().fontFamily + '; font-size: ' + conf.fontSize + 'px'
-    );
-
+    .attr('dominant-baseline', 'hanging');
+  // .attr(
+  //   'style',
+  //   'font-family: ' + configApi.getConfig().fontFamily + '; font-size: ' + conf.fontSize + 'px'
+  // )
   let i = 0;
   txts.forEach(textStr => {
     if (i == 0) {
@@ -77,11 +72,11 @@ const newTitleNode = (parentNode, id, txts) => {
 
   parentNode
     .append('line')
+    .attr('class', 'req-title-line')
     .attr('x1', '0')
     .attr('x2', conf.rect_min_width)
     .attr('y1', totalY)
-    .attr('y2', totalY)
-    .attr('style', `stroke: ${conf.rect_border_color}; stroke-width: 1`);
+    .attr('y2', totalY);
 
   return {
     titleNode: title,
@@ -96,11 +91,11 @@ const newBodyNode = (parentNode, id, txts, yStart) => {
     .attr('id', id)
     .attr('x', conf.rect_padding)
     .attr('y', yStart)
-    .attr('dominant-baseline', 'hanging')
-    .attr(
-      'style',
-      'font-family: ' + configApi.getConfig().fontFamily + '; font-size: ' + conf.fontSize + 'px'
-    );
+    .attr('dominant-baseline', 'hanging');
+  // .attr(
+  //   'style',
+  //   'font-family: ' + configApi.getConfig().fontFamily + '; font-size: ' + conf.fontSize + 'px'
+  // );
 
   let currentRow = 0;
   const charLimit = 30;
@@ -145,13 +140,13 @@ const addEdgeLabel = (parentNode, svgPath, conf, txt) => {
 
   const labelNode = parentNode
     .append('text')
-    .attr('class', 'er relationshipLabel')
+    .attr('class', 'req relationshipLabel')
     .attr('id', labelId)
     .attr('x', labelPoint.x)
     .attr('y', labelPoint.y)
     .attr('text-anchor', 'middle')
     .attr('dominant-baseline', 'middle')
-    .attr('style', 'font-family: ' + conf.fontFamily + '; font-size: ' + conf.fontSize + 'px')
+    // .attr('style', 'font-family: ' + conf.fontFamily + '; font-size: ' + conf.fontSize + 'px')
     .text(txt);
 
   // Figure out how big the opaque 'container' rectangle needs to be
@@ -187,7 +182,6 @@ const drawRelationshipFromLayout = function(svg, rel, g, insert) {
     .insert('path', '#' + insert)
     .attr('class', 'er relationshipLine')
     .attr('d', lineFunction(edge.points))
-    .attr('stroke', conf.rect_border_color)
     .attr('fill', 'none');
 
   if (rel.type == requirementDb.Relationships.CONTAINS) {

src/diagrams/requirement/styles.js

@@ -1,3 +1,42 @@
-const getStyles = () => ``;
+const getStyles = options => `
 
+  marker {
+    fill: ${options.relationColor};
+    stroke: ${options.relationColor};
+  }
+
+  marker.cross {
+    stroke: ${options.lineColor};
+  }
+
+  svg {
+    font-family: ${options.fontFamily};
+    font-size: ${options.fontSize};
+  }
+
+  .reqBox {
+    fill: ${options.requirementBackground};
+    fill-opacity: 100%;
+    stroke: ${options.requirementBorderColor};
+    stroke-size: ${options.requirementBorderSize};
+  }
+  .reqLabelBox {
+    fill: ${options.relationLabelBackground};
+    fill-opacity: 100%;
+  }
+
+  .req-title-line {
+    stroke: ${options.requirementBorderColor};
+    stroke-width: 1;
+  }
+  .relationshipLine {
+    stroke: ${options.relationColor};
+    stroke-width: 1;
+  }
+  .relationshipLabel {
+    fill: ${options.relationLabelColor};
+  }
+
+`;
+// fill', conf.rect_fill)
 export default getStyles;