marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 14:59:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

#931 Reformatting for compliacne with code standard

Browse Source
This commit is contained in:
knsv
2019-09-12 12:58:32 -07:00
parent 34de31195f
commit f9b30bdb43
3 changed files with 364 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/diagrams/class/classDb.js
View File

@@ -1,8 +1,7 @@
import { logger } from '../../logger';
import { logger } from '../../logger' let relations = [];
let classes = {};
let relations = []
let classes = {}
/** /**
* Function called by parser when a node definition has been found. * Function called by parser when a node definition has been found.
@@ -11,75 +10,75 @@ let classes = {}
* @param type * @param type
* @param style * @param style
*/ */
export const addClass = function (id) { export const addClass = function(id) {
if (typeof classes[id] === 'undefined') { if (typeof classes[id] === 'undefined') {
classes[id] = { classes[id] = {
id: id, id: id,
methods: [], methods: [],
members: [] members: []
} };
} }
} };
export const clear = function () { export const clear = function() {
relations = [] relations = [];
classes = {} classes = {};
} };
export const getClass = function (id) { export const getClass = function(id) {
return classes[id] return classes[id];
} };
export const getClasses = function () { export const getClasses = function() {
return classes return classes;
} };
export const getRelations = function () { export const getRelations = function() {
return relations return relations;
} };
export const addRelation = function (relation) { export const addRelation = function(relation) {
logger.debug('Adding relation: ' + JSON.stringify(relation)) logger.debug('Adding relation: ' + JSON.stringify(relation));
addClass(relation.id1) addClass(relation.id1);
addClass(relation.id2) addClass(relation.id2);
relations.push(relation) relations.push(relation);
} };
export const addMember = function (className, member) { export const addMember = function(className, member) {
const theClass = classes[className] const theClass = classes[className];
if (typeof member === 'string') { if (typeof member === 'string') {
if (member.substr(-1) === ')') { if (member.substr(-1) === ')') {
theClass.methods.push(member) theClass.methods.push(member);
} else { } else {
theClass.members.push(member) theClass.members.push(member);
} }
} }
} };
export const addMembers = function (className, MembersArr) { export const addMembers = function(className, MembersArr) {
if (Array.isArray(MembersArr)) { if (Array.isArray(MembersArr)) {
MembersArr.forEach(member => addMember(className, member)) MembersArr.forEach(member => addMember(className, member));
} }
} };
export const cleanupLabel = function (label) { export const cleanupLabel = function(label) {
if (label.substring(0, 1) === ':') { if (label.substring(0, 1) === ':') {
return label.substr(2).trim() return label.substr(2).trim();
} else { } else {
return label.trim() return label.trim();
} }
} };
export const lineType = { export const lineType = {
LINE: 0, LINE: 0,
DOTTED_LINE: 1 DOTTED_LINE: 1
} };
export const relationType = { export const relationType = {
AGGREGATION: 0, AGGREGATION: 0,
EXTENSION: 1, EXTENSION: 1,
COMPOSITION: 2, COMPOSITION: 2,
DEPENDENCY: 3 DEPENDENCY: 3
} };
export default { export default {
addClass, addClass,
@@ -93,4 +92,4 @@ export default {
cleanupLabel, cleanupLabel,
lineType, lineType,
relationType relationType
} };

349
src/diagrams/class/classDiagram.spec.js
View File

@@ -1,208 +1,211 @@
/* eslint-env jasmine */ /* eslint-env jasmine */
import { parser } from './parser/classDiagram' import { parser } from './parser/classDiagram';
import classDb from './classDb' import classDb from './classDb';
describe('class diagram, ', function () { describe('class diagram, ', function() {
describe('when parsing an info graph it', function () { describe('when parsing an info graph it', function() {
beforeEach(function () { beforeEach(function() {
parser.yy = classDb parser.yy = classDb;
}) });
it('should handle relation definitions', function () { it('should handle relation definitions', function() {
const str = 'classDiagram\n' + const str =
'Class01 <|-- Class02\n' + 'classDiagram\n' +
'Class03 *-- Class04\n' + 'Class01 <|-- Class02\n' +
'Class05 o-- Class06\n' + 'Class03 *-- Class04\n' +
'Class07 .. Class08\n' + 'Class05 o-- Class06\n' +
'Class09 -- Class1' 'Class07 .. Class08\n' +
'Class09 -- Class1';
parser.parse(str) parser.parse(str);
}) });
it('should handle relation definition of different types and directions', function () { it('should handle relation definition of different types and directions', function() {
const str = 'classDiagram\n' + const str =
'Class11 <|.. Class12\n' + 'classDiagram\n' +
'Class13 --> Class14\n' + 'Class11 <|.. Class12\n' +
'Class15 ..> Class16\n' + 'Class13 --> Class14\n' +
'Class17 ..|> Class18\n' + 'Class15 ..> Class16\n' +
'Class19 <--* Class20' 'Class17 ..|> Class18\n' +
'Class19 <--* Class20';
parser.parse(str) parser.parse(str);
}) });
it('should handle cardinality and labels', function () { it('should handle cardinality and labels', function() {
const str = 'classDiagram\n' + const str =
'Class01 "1" *-- "many" Class02 : contains\n' + 'classDiagram\n' +
'Class03 o-- Class04 : aggregation\n' + 'Class01 "1" *-- "many" Class02 : contains\n' +
'Class05 --> "1" Class06' 'Class03 o-- Class04 : aggregation\n' +
'Class05 --> "1" Class06';
parser.parse(str) parser.parse(str);
}) });
it('should handle class definitions', function () { it('should handle class definitions', function() {
const str = 'classDiagram\n' + const str =
'class Car\n' + 'classDiagram\n' +
'Driver -- Car : drives >\n' + 'class Car\n' +
'Car *-- Wheel : have 4 >\n' + 'Driver -- Car : drives >\n' +
'Car -- Person : < owns' 'Car *-- Wheel : have 4 >\n' +
'Car -- Person : < owns';
parser.parse(str) parser.parse(str);
}) });
it('should handle method statements', function () { it('should handle method statements', function() {
const str = 'classDiagram\n' + const str =
'Object <|-- ArrayList\n' + 'classDiagram\n' +
'Object : equals()\n' + 'Object <|-- ArrayList\n' +
'ArrayList : Object[] elementData\n' + 'Object : equals()\n' +
'ArrayList : size()' 'ArrayList : Object[] elementData\n' +
'ArrayList : size()';
parser.parse(str) parser.parse(str);
}) });
it('should handle parsing of method statements grouped by brackets', function () { it('should handle parsing of method statements grouped by brackets', function() {
const str = 'classDiagram\n' + const str =
'class Dummy {\n' + 'classDiagram\n' +
'String data\n' + 'class Dummy {\n' +
' void methods()\n' + 'String data\n' +
'}\n' + ' void methods()\n' +
'\n' + '}\n' +
'class Flight {\n' + '\n' +
' flightNumber : Integer\n' + 'class Flight {\n' +
' departureTime : Date\n' + ' flightNumber : Integer\n' +
'}' ' departureTime : Date\n' +
'}';
parser.parse(str) parser.parse(str);
}) });
it('should handle parsing of separators', function () { it('should handle parsing of separators', function() {
const str = 'classDiagram\n' + const str =
'class Foo1 {\n' + 'classDiagram\n' +
' You can use\n' + 'class Foo1 {\n' +
' several lines\n' + ' You can use\n' +
'..\n' + ' several lines\n' +
'as you want\n' + '..\n' +
'and group\n' + 'as you want\n' +
'==\n' + 'and group\n' +
'things together.\n' + '==\n' +
'__\n' + 'things together.\n' +
'You can have as many groups\n' + '__\n' +
'as you want\n' + 'You can have as many groups\n' +
'--\n' + 'as you want\n' +
'End of class\n' + '--\n' +
'}\n' + 'End of class\n' +
'\n' + '}\n' +
'class User {\n' + '\n' +
'.. Simple Getter ..\n' + 'class User {\n' +
'+ getName()\n' + '.. Simple Getter ..\n' +
'+ getAddress()\n' + '+ getName()\n' +
'.. Some setter ..\n' + '+ getAddress()\n' +
'+ setName()\n' + '.. Some setter ..\n' +
'__ private data __\n' + '+ setName()\n' +
'int age\n' + '__ private data __\n' +
'-- encrypted --\n' + 'int age\n' +
'String password\n' + '-- encrypted --\n' +
'}' 'String password\n' +
'}';
parser.parse(str) parser.parse(str);
}) });
}) });
describe('when fetching data from an classDiagram graph it', function () { describe('when fetching data from an classDiagram graph it', function() {
beforeEach(function () { beforeEach(function() {
parser.yy = classDb parser.yy = classDb;
parser.yy.clear() parser.yy.clear();
}) });
it('should handle relation definitions EXTENSION', function () { it('should handle relation definitions EXTENSION', function() {
const str = 'classDiagram\n' + const str = 'classDiagram\n' + 'Class01 <|-- Class02';
'Class01 <|-- Class02'
parser.parse(str) parser.parse(str);
const relations = parser.yy.getRelations() const relations = parser.yy.getRelations();
expect(parser.yy.getClass('Class01').id).toBe('Class01') expect(parser.yy.getClass('Class01').id).toBe('Class01');
expect(parser.yy.getClass('Class02').id).toBe('Class02') expect(parser.yy.getClass('Class02').id).toBe('Class02');
expect(relations[0].relation.type1).toBe(classDb.relationType.EXTENSION) expect(relations[0].relation.type1).toBe(classDb.relationType.EXTENSION);
expect(relations[0].relation.type2).toBe('none') expect(relations[0].relation.type2).toBe('none');
expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE) expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
}) });
it('should handle relation definitions AGGREGATION and dotted line', function () { it('should handle relation definitions AGGREGATION and dotted line', function() {
const str = 'classDiagram\n' + const str = 'classDiagram\n' + 'Class01 o.. Class02';
'Class01 o.. Class02'
parser.parse(str) parser.parse(str);
const relations = parser.yy.getRelations() const relations = parser.yy.getRelations();
expect(parser.yy.getClass('Class01').id).toBe('Class01') expect(parser.yy.getClass('Class01').id).toBe('Class01');
expect(parser.yy.getClass('Class02').id).toBe('Class02') expect(parser.yy.getClass('Class02').id).toBe('Class02');
expect(relations[0].relation.type1).toBe(classDb.relationType.AGGREGATION) expect(relations[0].relation.type1).toBe(classDb.relationType.AGGREGATION);
expect(relations[0].relation.type2).toBe('none') expect(relations[0].relation.type2).toBe('none');
expect(relations[0].relation.lineType).toBe(classDb.lineType.DOTTED_LINE) expect(relations[0].relation.lineType).toBe(classDb.lineType.DOTTED_LINE);
}) });
it('should handle relation definitions COMPOSITION on both sides', function () { it('should handle relation definitions COMPOSITION on both sides', function() {
const str = 'classDiagram\n' + const str = 'classDiagram\n' + 'Class01 *--* Class02';
'Class01 *--* Class02'
parser.parse(str) parser.parse(str);
const relations = parser.yy.getRelations() const relations = parser.yy.getRelations();
expect(parser.yy.getClass('Class01').id).toBe('Class01') expect(parser.yy.getClass('Class01').id).toBe('Class01');
expect(parser.yy.getClass('Class02').id).toBe('Class02') expect(parser.yy.getClass('Class02').id).toBe('Class02');
expect(relations[0].relation.type1).toBe(classDb.relationType.COMPOSITION) expect(relations[0].relation.type1).toBe(classDb.relationType.COMPOSITION);
expect(relations[0].relation.type2).toBe(classDb.relationType.COMPOSITION) expect(relations[0].relation.type2).toBe(classDb.relationType.COMPOSITION);
expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE) expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
}) });
it('should handle relation definitions no types', function () { it('should handle relation definitions no types', function() {
const str = 'classDiagram\n' + const str = 'classDiagram\n' + 'Class01 -- Class02';
'Class01 -- Class02'
parser.parse(str) parser.parse(str);
const relations = parser.yy.getRelations() const relations = parser.yy.getRelations();
expect(parser.yy.getClass('Class01').id).toBe('Class01') expect(parser.yy.getClass('Class01').id).toBe('Class01');
expect(parser.yy.getClass('Class02').id).toBe('Class02') expect(parser.yy.getClass('Class02').id).toBe('Class02');
expect(relations[0].relation.type1).toBe('none') expect(relations[0].relation.type1).toBe('none');
expect(relations[0].relation.type2).toBe('none') expect(relations[0].relation.type2).toBe('none');
expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE) expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
}) });
it('should handle relation definitions with type only on right side', function () { it('should handle relation definitions with type only on right side', function() {
const str = 'classDiagram\n' + const str = 'classDiagram\n' + 'Class01 --|> Class02';
'Class01 --|> Class02'
parser.parse(str) parser.parse(str);
const relations = parser.yy.getRelations() const relations = parser.yy.getRelations();
expect(parser.yy.getClass('Class01').id).toBe('Class01') expect(parser.yy.getClass('Class01').id).toBe('Class01');
expect(parser.yy.getClass('Class02').id).toBe('Class02') expect(parser.yy.getClass('Class02').id).toBe('Class02');
expect(relations[0].relation.type1).toBe('none') expect(relations[0].relation.type1).toBe('none');
expect(relations[0].relation.type2).toBe(classDb.relationType.EXTENSION) expect(relations[0].relation.type2).toBe(classDb.relationType.EXTENSION);
expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE) expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
}) });
it('should handle multiple classes and relation definitions', function () { it('should handle multiple classes and relation definitions', function() {
const str = 'classDiagram\n' + const str =
'Class01 <|-- Class02\n' + 'classDiagram\n' +
'Class03 *-- Class04\n' + 'Class01 <|-- Class02\n' +
'Class05 o-- Class06\n' + 'Class03 *-- Class04\n' +
'Class07 .. Class08\n' + 'Class05 o-- Class06\n' +
'Class09 -- Class10' 'Class07 .. Class08\n' +
'Class09 -- Class10';
parser.parse(str) parser.parse(str);
const relations = parser.yy.getRelations() const relations = parser.yy.getRelations();
expect(parser.yy.getClass('Class01').id).toBe('Class01') expect(parser.yy.getClass('Class01').id).toBe('Class01');
expect(parser.yy.getClass('Class10').id).toBe('Class10') expect(parser.yy.getClass('Class10').id).toBe('Class10');
expect(relations.length).toBe(5) expect(relations.length).toBe(5);
expect(relations[0].relation.type1).toBe(classDb.relationType.EXTENSION) expect(relations[0].relation.type1).toBe(classDb.relationType.EXTENSION);
expect(relations[0].relation.type2).toBe('none') expect(relations[0].relation.type2).toBe('none');
expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE) expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
expect(relations[3].relation.type1).toBe('none') expect(relations[3].relation.type1).toBe('none');
expect(relations[3].relation.type2).toBe('none') expect(relations[3].relation.type2).toBe('none');
expect(relations[3].relation.lineType).toBe(classDb.lineType.DOTTED_LINE) expect(relations[3].relation.lineType).toBe(classDb.lineType.DOTTED_LINE);
}) });
}) });
}) });

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

@@ -1,38 +1,38 @@
import * as d3 from 'd3' import * as d3 from 'd3';
import dagre from 'dagre-layout' import dagre from 'dagre-layout';
import graphlib from 'graphlibrary' import graphlib from 'graphlibrary';
import { logger } from '../../logger' import { logger } from '../../logger';
import classDb from './classDb' import classDb from './classDb';
import { parser } from './parser/classDiagram' import { parser } from './parser/classDiagram';
parser.yy = classDb parser.yy = classDb;
const idCache = {} const idCache = {};
let classCnt = 0 let classCnt = 0;
const conf = { const conf = {
dividerMargin: 10, dividerMargin: 10,
padding: 5, padding: 5,
textHeight: 10 textHeight: 10
} };
// Todo optimize // Todo optimize
const getGraphId = function (label) { const getGraphId = function(label) {
const keys = Object.keys(idCache) const keys = Object.keys(idCache);
for (let i = 0; i < keys.length; i++) { for (let i = 0; i < keys.length; i++) {
if (idCache[keys[i]].label === label) { if (idCache[keys[i]].label === label) {
return keys[i] return keys[i];
} }
} }
return undefined return undefined;
} };
/** /**
* Setup arrow head and define the marker. The result is appended to the svg. * Setup arrow head and define the marker. The result is appended to the svg.
*/ */
const insertMarkers = function (elem) { const insertMarkers = function(elem) {
elem elem
.append('defs') .append('defs')
.append('marker') .append('marker')
@@ -44,7 +44,7 @@ const insertMarkers = function (elem) {
.attr('markerHeight', 240) .attr('markerHeight', 240)
.attr('orient', 'auto') .attr('orient', 'auto')
.append('path') .append('path')
.attr('d', 'M 1,7 L18,13 V 1 Z') .attr('d', 'M 1,7 L18,13 V 1 Z');
elem elem
.append('defs') .append('defs')
@@ -56,7 +56,7 @@ const insertMarkers = function (elem) {
.attr('markerHeight', 28) .attr('markerHeight', 28)
.attr('orient', 'auto') .attr('orient', 'auto')
.append('path') .append('path')
.attr('d', 'M 1,1 V 13 L18,7 Z') // this is actual shape for arrowhead .attr('d', 'M 1,1 V 13 L18,7 Z'); // this is actual shape for arrowhead
elem elem
.append('defs') .append('defs')
@@ -69,7 +69,7 @@ const insertMarkers = function (elem) {
.attr('markerHeight', 240) .attr('markerHeight', 240)
.attr('orient', 'auto') .attr('orient', 'auto')
.append('path') .append('path')
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z') .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem elem
.append('defs') .append('defs')
@@ -81,7 +81,7 @@ const insertMarkers = function (elem) {
.attr('markerHeight', 28) .attr('markerHeight', 28)
.attr('orient', 'auto') .attr('orient', 'auto')
.append('path') .append('path')
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z') .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem elem
.append('defs') .append('defs')
@@ -94,7 +94,7 @@ const insertMarkers = function (elem) {
.attr('markerHeight', 240) .attr('markerHeight', 240)
.attr('orient', 'auto') .attr('orient', 'auto')
.append('path') .append('path')
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z') .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem elem
.append('defs') .append('defs')
@@ -106,7 +106,7 @@ const insertMarkers = function (elem) {
.attr('markerHeight', 28) .attr('markerHeight', 28)
.attr('orient', 'auto') .attr('orient', 'auto')
.append('path') .append('path')
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z') .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem elem
.append('defs') .append('defs')
@@ -119,7 +119,7 @@ const insertMarkers = function (elem) {
.attr('markerHeight', 240) .attr('markerHeight', 240)
.attr('orient', 'auto') .attr('orient', 'auto')
.append('path') .append('path')
.attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z') .attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z');
elem elem
.append('defs') .append('defs')
@@ -131,96 +131,86 @@ const insertMarkers = function (elem) {
.attr('markerHeight', 28) .attr('markerHeight', 28)
.attr('orient', 'auto') .attr('orient', 'auto')
.append('path') .append('path')
.attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z') .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
} };
let edgeCount = 0 let edgeCount = 0;
let total = 0 let total = 0;
const drawEdge = function (elem, path, relation) { const drawEdge = function(elem, path, relation) {
const getRelationType = function (type) { const getRelationType = function(type) {
switch (type) { switch (type) {
case classDb.relationType.AGGREGATION: case classDb.relationType.AGGREGATION:
return 'aggregation' return 'aggregation';
case classDb.relationType.EXTENSION: case classDb.relationType.EXTENSION:
return 'extension' return 'extension';
case classDb.relationType.COMPOSITION: case classDb.relationType.COMPOSITION:
return 'composition' return 'composition';
case classDb.relationType.DEPENDENCY: case classDb.relationType.DEPENDENCY:
return 'dependency' return 'dependency';
} }
} };
path.points = path.points.filter(p => !Number.isNaN(p.y)) path.points = path.points.filter(p => !Number.isNaN(p.y));
// The data for our line // The data for our line
const lineData = path.points const lineData = path.points;
// This is the accessor function we talked about above // This is the accessor function we talked about above
const lineFunction = d3 const lineFunction = d3
.line() .line()
.x(function (d) { .x(function(d) {
return d.x return d.x;
}) })
.y(function (d) { .y(function(d) {
return d.y return d.y;
}) })
.curve(d3.curveBasis) .curve(d3.curveBasis);
const svgPath = elem const svgPath = elem
.append('path') .append('path')
.attr('d', lineFunction(lineData)) .attr('d', lineFunction(lineData))
.attr('id', 'edge' + edgeCount) .attr('id', 'edge' + edgeCount)
.attr('class', 'relation') .attr('class', 'relation');
let url = '' let url = '';
if (conf.arrowMarkerAbsolute) { if (conf.arrowMarkerAbsolute) {
url = url =
window.location.protocol + window.location.protocol +
'//' + '//' +
window.location.host + window.location.host +
window.location.pathname + window.location.pathname +
window.location.search window.location.search;
url = url.replace(/\(/g, '\\(') url = url.replace(/\(/g, '\\(');
url = url.replace(/\)/g, '\\)') url = url.replace(/\)/g, '\\)');
} }
if (relation.relation.type1 !== 'none') { if (relation.relation.type1 !== 'none') {
svgPath.attr( svgPath.attr(
'marker-start', 'marker-start',
'url(' + 'url(' + url + '#' + getRelationType(relation.relation.type1) + 'Start' + ')'
url + );
'#' +
getRelationType(relation.relation.type1) +
'Start' +
')'
)
} }
if (relation.relation.type2 !== 'none') { if (relation.relation.type2 !== 'none') {
svgPath.attr( svgPath.attr(
'marker-end', 'marker-end',
'url(' + 'url(' + url + '#' + getRelationType(relation.relation.type2) + 'End' + ')'
url + );
'#' +
getRelationType(relation.relation.type2) +
'End' +
')'
)
} }
let x, y let x, y;
const l = path.points.length const l = path.points.length;
if (l % 2 !== 0 && l > 1) { if (l % 2 !== 0 && l > 1) {
const p1 = path.points[Math.floor(l / 2)] const p1 = path.points[Math.floor(l / 2)];
const p2 = path.points[Math.ceil(l / 2)] const p2 = path.points[Math.ceil(l / 2)];
x = (p1.x + p2.x) / 2 x = (p1.x + p2.x) / 2;
y = (p1.y + p2.y) / 2 y = (p1.y + p2.y) / 2;
} else { } else {
const p = path.points[Math.floor(l / 2)] const p = path.points[Math.floor(l / 2)];
x = p.x x = p.x;
y = p.y y = p.y;
} }
if (typeof relation.title !== 'undefined') { if (typeof relation.title !== 'undefined') {
const g = elem.append('g').attr('class', 'classLabel') const g = elem.append('g').attr('class', 'classLabel');
const label = g const label = g
.append('text') .append('text')
.attr('class', 'label') .attr('class', 'label')
@@ -228,189 +218,177 @@ const drawEdge = function (elem, path, relation) {
.attr('y', y) .attr('y', y)
.attr('fill', 'red') .attr('fill', 'red')
.attr('text-anchor', 'middle') .attr('text-anchor', 'middle')
.text(relation.title) .text(relation.title);
window.label = label window.label = label;
const bounds = label.node().getBBox() const bounds = label.node().getBBox();
g.insert('rect', ':first-child') g.insert('rect', ':first-child')
.attr('class', 'box') .attr('class', 'box')
.attr('x', bounds.x - conf.padding / 2) .attr('x', bounds.x - conf.padding / 2)
.attr('y', bounds.y - conf.padding / 2) .attr('y', bounds.y - conf.padding / 2)
.attr('width', bounds.width + conf.padding) .attr('width', bounds.width + conf.padding)
.attr('height', bounds.height + conf.padding) .attr('height', bounds.height + conf.padding);
} }
edgeCount++ edgeCount++;
} };
const drawClass = function (elem, classDef) { const drawClass = function(elem, classDef) {
logger.info('Rendering class ' + classDef) logger.info('Rendering class ' + classDef);
const addTspan = function (textEl, txt, isFirst) { const addTspan = function(textEl, txt, isFirst) {
const tSpan = textEl const tSpan = textEl
.append('tspan') .append('tspan')
.attr('x', conf.padding) .attr('x', conf.padding)
.text(txt) .text(txt);
if (!isFirst) { if (!isFirst) {
tSpan.attr('dy', conf.textHeight) tSpan.attr('dy', conf.textHeight);
} }
} };
const id = 'classId' + (classCnt % total) const id = 'classId' + (classCnt % total);
const classInfo = { const classInfo = {
id: id, id: id,
label: classDef.id, label: classDef.id,
width: 0, width: 0,
height: 0 height: 0
} };
const g = elem const g = elem
.append('g') .append('g')
.attr('id', id) .attr('id', id)
.attr('class', 'classGroup') .attr('class', 'classGroup');
const title = g const title = g
.append('text') .append('text')
.attr('x', conf.padding) .attr('x', conf.padding)
.attr('y', conf.textHeight + conf.padding) .attr('y', conf.textHeight + conf.padding)
.text(classDef.id) .text(classDef.id);
const titleHeight = title.node().getBBox().height const titleHeight = title.node().getBBox().height;
const membersLine = g const membersLine = g
.append('line') // text label for the x axis .append('line') // text label for the x axis
.attr('x1', 0) .attr('x1', 0)
.attr('y1', conf.padding + titleHeight + conf.dividerMargin / 2) .attr('y1', conf.padding + titleHeight + conf.dividerMargin / 2)
.attr('y2', conf.padding + titleHeight + conf.dividerMargin / 2) .attr('y2', conf.padding + titleHeight + conf.dividerMargin / 2);
const members = g const members = g
.append('text') // text label for the x axis .append('text') // text label for the x axis
.attr('x', conf.padding) .attr('x', conf.padding)
.attr('y', titleHeight + conf.dividerMargin + conf.textHeight) .attr('y', titleHeight + conf.dividerMargin + conf.textHeight)
.attr('fill', 'white') .attr('fill', 'white')
.attr('class', 'classText') .attr('class', 'classText');
let isFirst = true let isFirst = true;
classDef.members.forEach(function (member) { classDef.members.forEach(function(member) {
addTspan(members, member, isFirst) addTspan(members, member, isFirst);
isFirst = false isFirst = false;
}) });
const membersBox = members.node().getBBox() const membersBox = members.node().getBBox();
const methodsLine = g const methodsLine = g
.append('line') // text label for the x axis .append('line') // text label for the x axis
.attr('x1', 0) .attr('x1', 0)
.attr( .attr('y1', conf.padding + titleHeight + conf.dividerMargin + membersBox.height)
'y1', .attr('y2', conf.padding + titleHeight + conf.dividerMargin + membersBox.height);
conf.padding + titleHeight + conf.dividerMargin + membersBox.height
)
.attr(
'y2',
conf.padding + titleHeight + conf.dividerMargin + membersBox.height
)
const methods = g const methods = g
.append('text') // text label for the x axis .append('text') // text label for the x axis
.attr('x', conf.padding) .attr('x', conf.padding)
.attr( .attr('y', titleHeight + 2 * conf.dividerMargin + membersBox.height + conf.textHeight)
'y',
titleHeight + 2 * conf.dividerMargin + membersBox.height + conf.textHeight
)
.attr('fill', 'white') .attr('fill', 'white')
.attr('class', 'classText') .attr('class', 'classText');
isFirst = true isFirst = true;
classDef.methods.forEach(function (method) { classDef.methods.forEach(function(method) {
addTspan(methods, method, isFirst) addTspan(methods, method, isFirst);
isFirst = false isFirst = false;
}) });
const classBox = g.node().getBBox() const classBox = g.node().getBBox();
g.insert('rect', ':first-child') g.insert('rect', ':first-child')
.attr('x', 0) .attr('x', 0)
.attr('y', 0) .attr('y', 0)
.attr('width', classBox.width + 2 * conf.padding) .attr('width', classBox.width + 2 * conf.padding)
.attr('height', classBox.height + conf.padding + 0.5 * conf.dividerMargin) .attr('height', classBox.height + conf.padding + 0.5 * conf.dividerMargin);
membersLine.attr('x2', classBox.width + 2 * conf.padding) membersLine.attr('x2', classBox.width + 2 * conf.padding);
methodsLine.attr('x2', classBox.width + 2 * conf.padding) methodsLine.attr('x2', classBox.width + 2 * conf.padding);
classInfo.width = classBox.width + 2 * conf.padding classInfo.width = classBox.width + 2 * conf.padding;
classInfo.height = classBox.height + conf.padding + 0.5 * conf.dividerMargin classInfo.height = classBox.height + conf.padding + 0.5 * conf.dividerMargin;
idCache[id] = classInfo idCache[id] = classInfo;
classCnt++ classCnt++;
return classInfo return classInfo;
} };
export const setConf = function (cnf) { export const setConf = function(cnf) {
const keys = Object.keys(cnf) const keys = Object.keys(cnf);
keys.forEach(function (key) { keys.forEach(function(key) {
conf[key] = cnf[key] conf[key] = cnf[key];
}) });
} };
/** /**
* Draws a flowchart in the tag with id: id based on the graph definition in text. * Draws a flowchart in the tag with id: id based on the graph definition in text.
* @param text * @param text
* @param id * @param id
*/ */
export const draw = function (text, id) { export const draw = function(text, id) {
parser.yy.clear() parser.yy.clear();
parser.parse(text) parser.parse(text);
logger.info('Rendering diagram ' + text) logger.info('Rendering diagram ' + text);
/// / Fetch the default direction, use TD if none was found /// / Fetch the default direction, use TD if none was found
const diagram = d3.select(`[id='${id}']`) const diagram = d3.select(`[id='${id}']`);
insertMarkers(diagram) insertMarkers(diagram);
// Layout graph, Create a new directed graph // Layout graph, Create a new directed graph
const g = new graphlib.Graph({ const g = new graphlib.Graph({
multigraph: true multigraph: true
}) });
// Set an object for the graph label // Set an object for the graph label
g.setGraph({ g.setGraph({
isMultiGraph: true isMultiGraph: true
}) });
// Default to assigning a new object as a label for each new edge. // Default to assigning a new object as a label for each new edge.
g.setDefaultEdgeLabel(function () { g.setDefaultEdgeLabel(function() {
return {} return {};
}) });
const classes = classDb.getClasses() const classes = classDb.getClasses();
const keys = Object.keys(classes) const keys = Object.keys(classes);
total = keys.length total = keys.length;
for (let i = 0; i < keys.length; i++) { for (let i = 0; i < keys.length; i++) {
const classDef = classes[keys[i]] const classDef = classes[keys[i]];
const node = drawClass(diagram, classDef) const node = drawClass(diagram, classDef);
// Add nodes to the graph. The first argument is the node id. The second is // Add nodes to the graph. The first argument is the node id. The second is
// metadata about the node. In this case we're going to add labels to each of // metadata about the node. In this case we're going to add labels to each of
// our nodes. // our nodes.
g.setNode(node.id, node) g.setNode(node.id, node);
logger.info('Org height: ' + node.height) logger.info('Org height: ' + node.height);
} }
const relations = classDb.getRelations() const relations = classDb.getRelations();
relations.forEach(function (relation) { relations.forEach(function(relation) {
logger.info( logger.info(
'tjoho' + 'tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)
getGraphId(relation.id1) + );
getGraphId(relation.id2) +
JSON.stringify(relation)
)
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), { g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), {
relation: relation relation: relation
}) });
}) });
dagre.layout(g) dagre.layout(g);
g.nodes().forEach(function (v) { g.nodes().forEach(function(v) {
if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') { if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {
logger.debug('Node ' + v + ': ' + JSON.stringify(g.node(v))) logger.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));
d3.select('#' + v).attr( d3.select('#' + v).attr(
'transform', 'transform',
'translate(' + 'translate(' +
@@ -418,27 +396,22 @@ export const draw = function (text, id) {
',' + ',' +
(g.node(v).y - g.node(v).height / 2) + (g.node(v).y - g.node(v).height / 2) +
' )' ' )'
) );
} }
}) });
g.edges().forEach(function (e) { g.edges().forEach(function(e) {
if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') { if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') {
logger.debug( logger.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
'Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)) drawEdge(diagram, g.edge(e), g.edge(e).relation);
)
drawEdge(diagram, g.edge(e), g.edge(e).relation)
} }
}) });
diagram.attr('height', '100%') diagram.attr('height', '100%');
diagram.attr('width', '100%') diagram.attr('width', '100%');
diagram.attr( diagram.attr('viewBox', '0 0 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20));
'viewBox', };
'0 0 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20)
)
}
export default { export default {
setConf, setConf,
draw draw
} };