Handling of requirement diagrams using the generic diagram
This commit is contained in:
parent
c5f78077ff
commit
bc6830cbdb
|
@ -30,7 +30,7 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="mermaid" style="width: 50%;">
|
<div class="mermaid2" style="width: 50%;">
|
||||||
journey
|
journey
|
||||||
title My working day
|
title My working day
|
||||||
section Go to work
|
section Go to work
|
||||||
|
@ -95,7 +95,7 @@ graph TD
|
||||||
Go downstairs: 5: Me
|
Go downstairs: 5: Me
|
||||||
Sit down: 5: Me
|
Sit down: 5: Me
|
||||||
</div>
|
</div>
|
||||||
<div class="mermaid2" style="width: 100%;">
|
<div class="mermaid" style="width: 100%;">
|
||||||
requirementDiagram
|
requirementDiagram
|
||||||
accTitle: My req Diagram
|
accTitle: My req Diagram
|
||||||
accDescr: My req Diagram Description
|
accDescr: My req Diagram Description
|
||||||
|
@ -135,6 +135,7 @@ requirementDiagram
|
||||||
test_req - traces -> test_req2
|
test_req - traces -> test_req2
|
||||||
test_req - contains -> test_req3
|
test_req - contains -> test_req3
|
||||||
test_req <- copies - test_entity2
|
test_req <- copies - test_entity2
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mermaid2" style="width: 100%;">
|
<div class="mermaid2" style="width: 100%;">
|
||||||
gantt
|
gantt
|
||||||
|
|
|
@ -1,29 +1,16 @@
|
||||||
import { line, select } from 'd3';
|
import { line, select } from 'd3';
|
||||||
import dagre from 'dagre';
|
import dagre from 'dagre';
|
||||||
import graphlib from 'graphlib';
|
import graphlib from 'graphlib';
|
||||||
// import * as configApi from '../../config';
|
|
||||||
import { log } from '../../logger';
|
import { log } from '../../logger';
|
||||||
import { configureSvgSize } from '../../utils';
|
import { configureSvgSize } from '../../utils';
|
||||||
import common from '../common/common';
|
import common from '../common/common';
|
||||||
import { parser } from './parser/requirementDiagram';
|
|
||||||
import requirementDb from './requirementDb';
|
|
||||||
import markers from './requirementMarkers';
|
import markers from './requirementMarkers';
|
||||||
import { getConfig } from '../../config';
|
import { getConfig } from '../../config';
|
||||||
import addSVGAccessibilityFields from '../../accessibility';
|
import addSVGAccessibilityFields from '../../accessibility';
|
||||||
|
|
||||||
const conf = {};
|
let conf = {};
|
||||||
let relCnt = 0;
|
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) => {
|
const newRectNode = (parentNode, id) => {
|
||||||
return parentNode
|
return parentNode
|
||||||
.insert('rect', '#' + id)
|
.insert('rect', '#' + id)
|
||||||
|
@ -162,7 +149,7 @@ const addEdgeLabel = (parentNode, svgPath, conf, txt) => {
|
||||||
.attr('fill-opacity', '85%');
|
.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
|
// Find the edge relating to this relationship
|
||||||
const edge = g.edge(elementString(rel.src), elementString(rel.dst));
|
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('d', lineFunction(edge.points))
|
||||||
.attr('fill', 'none');
|
.attr('fill', 'none');
|
||||||
|
|
||||||
if (rel.type == requirementDb.Relationships.CONTAINS) {
|
if (rel.type == diagObj.db.Relationships.CONTAINS) {
|
||||||
svgPath.attr(
|
svgPath.attr(
|
||||||
'marker-start',
|
'marker-start',
|
||||||
'url(' + common.getUrl(conf.arrowMarkerAbsolute) + '#' + rel.type + '_line_ending' + ')'
|
'url(' + common.getUrl(conf.arrowMarkerAbsolute) + '#' + rel.type + '_line_ending' + ')'
|
||||||
|
@ -318,12 +305,12 @@ const elementString = (str) => {
|
||||||
return str.replace(/\s/g, '').replace(/\./g, '_');
|
return str.replace(/\s/g, '').replace(/\./g, '_');
|
||||||
};
|
};
|
||||||
|
|
||||||
export const draw = (text, id) => {
|
export const draw = (text, id, _version, diagObj) => {
|
||||||
parser.yy = requirementDb;
|
conf = getConfig().requirement;
|
||||||
parser.yy.clear();
|
diagObj.db.clear();
|
||||||
parser.parse(text);
|
diagObj.parser.parse(text);
|
||||||
|
|
||||||
const securityLevel = getConfig().securityLevel;
|
const securityLevel = conf.securityLevel;
|
||||||
// Handle root and Document for when rendering in sanbox mode
|
// Handle root and Document for when rendering in sanbox mode
|
||||||
let sandboxElement;
|
let sandboxElement;
|
||||||
if (securityLevel === 'sandbox') {
|
if (securityLevel === 'sandbox') {
|
||||||
|
@ -355,9 +342,9 @@ export const draw = (text, id) => {
|
||||||
return {};
|
return {};
|
||||||
});
|
});
|
||||||
|
|
||||||
let requirements = requirementDb.getRequirements();
|
let requirements = diagObj.db.getRequirements();
|
||||||
let elements = requirementDb.getElements();
|
let elements = diagObj.db.getElements();
|
||||||
let relationships = requirementDb.getRelationships();
|
let relationships = diagObj.db.getRelationships();
|
||||||
|
|
||||||
drawReqs(requirements, g, svg);
|
drawReqs(requirements, g, svg);
|
||||||
drawElements(elements, g, svg);
|
drawElements(elements, g, svg);
|
||||||
|
@ -366,7 +353,7 @@ export const draw = (text, id) => {
|
||||||
adjustEntities(svg, g);
|
adjustEntities(svg, g);
|
||||||
|
|
||||||
relationships.forEach(function (rel) {
|
relationships.forEach(function (rel) {
|
||||||
drawRelationshipFromLayout(svg, rel, g, id);
|
drawRelationshipFromLayout(svg, rel, g, id, diagObj);
|
||||||
});
|
});
|
||||||
|
|
||||||
// svg.attr('height', '500px');
|
// svg.attr('height', '500px');
|
||||||
|
@ -379,10 +366,9 @@ export const draw = (text, id) => {
|
||||||
|
|
||||||
svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
|
svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
|
||||||
// Adds title and description to the requirements diagram
|
// Adds title and description to the requirements diagram
|
||||||
addSVGAccessibilityFields(parser.yy, svg, id);
|
addSVGAccessibilityFields(diagObj.db, svg, id);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
setConf,
|
|
||||||
draw,
|
draw,
|
||||||
};
|
};
|
||||||
|
|
|
@ -420,8 +420,8 @@ const render = function (id, _txt, cb, container) {
|
||||||
diag.renderer.draw(txt, id, pkg.version, diag);
|
diag.renderer.draw(txt, id, pkg.version, diag);
|
||||||
break;
|
break;
|
||||||
case 'requirement':
|
case 'requirement':
|
||||||
requirementRenderer.setConf(cnf.requirement);
|
// requirementRenderer.setConf(cnf.requirement);
|
||||||
requirementRenderer.draw(txt, id, pkg.version, diag);
|
diag.renderer.draw(txt, id, pkg.version, diag);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
@ -586,9 +586,7 @@ function updateRendererConfigs(conf) {
|
||||||
stateRenderer.setConf(conf.state);
|
stateRenderer.setConf(conf.state);
|
||||||
stateRendererV2.setConf(conf.state);
|
stateRendererV2.setConf(conf.state);
|
||||||
infoRenderer.setConf(conf.class);
|
infoRenderer.setConf(conf.class);
|
||||||
erRenderer.setConf(conf.er);
|
|
||||||
journeyRenderer.setConf(conf.journey);
|
journeyRenderer.setConf(conf.journey);
|
||||||
requirementRenderer.setConf(conf.requirement);
|
|
||||||
errorRenderer.setConf(conf.class);
|
errorRenderer.setConf(conf.class);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue