GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Fix for legacy class diagram

Browse Source
This commit is contained in:
Knut Sveidqvist 2022-07-04 19:37:56 +02:00
parent bc6830cbdb
commit 10f56129c1
8 changed files with 57 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
cypress/platform/knsv.html
View File

@ -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' },

6
src/Diagram.js
View File

@ -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;

3
src/defaultConfig.js
View File

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

42
src/diagrams/class/classRenderer.js
View File

@ -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();
parser.parse(text);
diagObj.db.clear();
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,
};

18
src/diagrams/class/svgDraw.js
View File

@ -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) {
log.info('Rendering class ' + classDef);
export const drawClass = function (elem, classDef, conf, diagObj) {
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;

23
src/diagrams/info/infoRenderer.js
View File

@ -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;
parser.yy = db;
// const parser = infoParser.parser;
// 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);
log.debug('Parsed info diagram');
// parser.parse(text);
// 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,
};

1
src/diagrams/requirement/requirementRenderer.js
View File

@ -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;

30
src/mermaidAPI.js
View File

@ -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.draw(txt, id, pkg.version, diag);
// classRenderer.setConf(cnf.class);
diag.renderer.draw(txt, id, pkg.version, diag);
break;
case 'classDiagram':
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
classRendererV2.setConf(cnf.class);
classRendererV2.draw(txt, id, pkg.version, diag);
// classRendererV2.setConf(cnf.class);
diag.renderer.draw(txt, id, pkg.version, diag);
break;
case 'state':
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
stateRenderer.setConf(cnf.state);
stateRenderer.draw(txt, id, pkg.version, diag);
// stateRenderer.setConf(cnf.state);
diag.renderer.draw(txt, id, pkg.version, diag);
break;
case 'stateDiagram':
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
diag.renderer.setConf(cnf.state);
// cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
// diag.renderer.setConf(cnf.state);
diag.renderer.draw(txt, id, pkg.version, diag);
break;
case 'info':
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
infoRenderer.setConf(cnf.class);
infoRenderer.draw(txt, id, pkg.version, diag);
// cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
// infoRenderer.setConf(cnf.class);
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);
}