mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #795 from DanShai/fix-class-diagram 

fix class diagram mermaid
This commit is contained in:
Knut Sveidqvist 2019-06-16 08:24:03 +02:00 committed by GitHub
parent 5667694652 e64d2dcada
commit 7d7bc9782b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 136 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,15 @@
import * as d3 from 'd3'
import dagre from 'dagre-layout'
import graphlib from 'graphlibrary'
import * as d3 from 'd3'
import classDb from './classDb'
import { logger } from '../../logger'
import classDb from './classDb'
import { parser } from './parser/classDiagram'
parser.yy = classDb
let idCache = {}
const idCache = {}
let classCnt = 0
const conf = {
dividerMargin: 10,
padding: 5,
@ -33,7 +33,9 @@ const getGraphId = function (label) {
* Setup arrow head and define the marker. The result is appended to the svg.
*/
const insertMarkers = function (elem) {
elem.append('defs').append('marker')
elem
.append('defs')
.append('marker')
.attr('id', 'extensionStart')
.attr('class', 'extension')
.attr('refX', 0)
@ -44,7 +46,9 @@ const insertMarkers = function (elem) {
.append('path')
.attr('d', 'M 1,7 L18,13 V 1 Z')
elem.append('defs').append('marker')
elem
.append('defs')
.append('marker')
.attr('id', 'extensionEnd')
.attr('refX', 19)
.attr('refY', 7)
@ -54,7 +58,9 @@ const insertMarkers = function (elem) {
.append('path')
.attr('d', 'M 1,1 V 13 L18,7 Z') // this is actual shape for arrowhead
elem.append('defs').append('marker')
elem
.append('defs')
.append('marker')
.attr('id', 'compositionStart')
.attr('class', 'extension')
.attr('refX', 0)
@ -65,7 +71,9 @@ const insertMarkers = function (elem) {
.append('path')
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
elem.append('defs').append('marker')
elem
.append('defs')
.append('marker')
.attr('id', 'compositionEnd')
.attr('refX', 19)
.attr('refY', 7)
@ -75,7 +83,9 @@ const insertMarkers = function (elem) {
.append('path')
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
elem.append('defs').append('marker')
elem
.append('defs')
.append('marker')
.attr('id', 'aggregationStart')
.attr('class', 'extension')
.attr('refX', 0)
@ -86,7 +96,9 @@ const insertMarkers = function (elem) {
.append('path')
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
elem.append('defs').append('marker')
elem
.append('defs')
.append('marker')
.attr('id', 'aggregationEnd')
.attr('refX', 19)
.attr('refY', 7)
@ -96,7 +108,9 @@ const insertMarkers = function (elem) {
.append('path')
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
elem.append('defs').append('marker')
elem
.append('defs')
.append('marker')
.attr('id', 'dependencyStart')
.attr('class', 'extension')
.attr('refX', 0)
@ -107,7 +121,9 @@ const insertMarkers = function (elem) {
.append('path')
.attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z')
elem.append('defs').append('marker')
elem
.append('defs')
.append('marker')
.attr('id', 'dependencyEnd')
.attr('refX', 19)
.attr('refY', 7)
@ -119,6 +135,7 @@ const insertMarkers = function (elem) {
}
let edgeCount = 0
let total = 0
const drawEdge = function (elem, path, relation) {
const getRelationType = function (type) {
switch (type) {
@ -133,11 +150,14 @@ const drawEdge = function (elem, path, relation) {
}
}
path.points = path.points.filter(p => !Number.isNaN(p.y))
// The data for our line
const lineData = path.points
// This is the accessor function we talked about above
const lineFunction = d3.line()
const lineFunction = d3
.line()
.x(function (d) {
return d.x
})
@ -146,34 +166,69 @@ const drawEdge = function (elem, path, relation) {
})
.curve(d3.curveBasis)
const svgPath = elem.append('path')
const svgPath = elem
.append('path')
.attr('d', lineFunction(lineData))
.attr('id', 'edge' + edgeCount)
.attr('class', 'relation')
let url = ''
if (conf.arrowMarkerAbsolute) {
url = window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search
url =
window.location.protocol +
'//' +
window.location.host +
window.location.pathname +
window.location.search
url = url.replace(/\(/g, '\\(')
url = url.replace(/\)/g, '\\)')
}
if (relation.relation.type1 !== 'none') {
svgPath.attr('marker-start', 'url(' + url + '#' + getRelationType(relation.relation.type1) + 'Start' + ')')
svgPath.attr(
'marker-start',
'url(' +
url +
'#' +
getRelationType(relation.relation.type1) +
'Start' +
')'
)
}
if (relation.relation.type2 !== 'none') {
svgPath.attr('marker-end', 'url(' + url + '#' + getRelationType(relation.relation.type2) + 'End' + ')')
svgPath.attr(
'marker-end',
'url(' +
url +
'#' +
getRelationType(relation.relation.type2) +
'End' +
')'
)
}
const writeLabel = function (x, y, title) {
const g = elem.append('g')
.attr('class', 'classLabel')
const label = g.append('text')
let x, y
const l = path.points.length
if (l % 2 !== 0 && l > 1) {
const p1 = path.points[Math.floor(l / 2)]
const p2 = path.points[Math.ceil(l / 2)]
x = (p1.x + p2.x) / 2
y = (p1.y + p2.y) / 2
} else {
const p = path.points[Math.floor(l / 2)]
x = p.x
y = p.y
}
if (typeof relation.title !== 'undefined') {
const g = elem.append('g').attr('class', 'classLabel')
const label = g
.append('text')
.attr('class', 'label')
.attr('x', x)
.attr('y', y)
.attr('fill', 'red')
.attr('text-anchor', 'middle')
.text(title)
.text(relation.title)
window.label = label
const bounds = label.node().getBBox()
@ -186,54 +241,6 @@ const drawEdge = function (elem, path, relation) {
.attr('height', bounds.height + conf.padding)
}
const l = path.points.length
// title
if (typeof relation.title !== 'undefined') {
let x, y
if ((l % 2) !== 0) {
const p1 = path.points[Math.floor(l / 2)]
const p2 = path.points[Math.ceil(l / 2)]
x = (p1.x + p2.x) / 2
y = (p1.y + p2.y) / 2
} else {
const p = path.points[Math.floor(l / 2)]
x = p.x
y = p.y
}
writeLabel(x, y, relation.title)
}
const normalize = function (point, scale) {
var norm = Math.sqrt(point.x * point.x + point.y * point.y)
if (norm !== 0) { // as3 return 0,0 for a point of zero length
point.x = scale * point.x / norm
point.y = scale * point.y / norm
}
return point
}
// Relation title 1
if (relation.relationTitle1 !== 'none') {
const p = path.points[0]
const nextPoint = path.points[1]
let direction = { x: nextPoint.x - p.x, y: nextPoint.y - p.y }
normalize(direction, 10)
const offsettedPoint = { x: p.x + direction.x, y: p.y + direction.y }
writeLabel(offsettedPoint.x, offsettedPoint.y, relation.relationTitle1)
}
// Relation title 2
if (relation.relationTitle2 !== 'none') {
const p = path.points[l - 1]
const previousPoint = path.points[l - 2]
let direction = { x: previousPoint.x - p.x, y: previousPoint.y - p.y }
normalize(direction, 10)
const offsettedPoint = { x: p.x + direction.x, y: p.y + direction.y }
writeLabel(offsettedPoint.x, offsettedPoint.y, relation.relationTitle2)
}
edgeCount++
}
@ -241,7 +248,8 @@ const drawClass = function (elem, classDef) {
logger.info('Rendering class ' + classDef)
const addTspan = function (textEl, txt, isFirst) {
const tSpan = textEl.append('tspan')
const tSpan = textEl
.append('tspan')
.attr('x', conf.padding)
.text(txt)
if (!isFirst) {
@ -249,7 +257,7 @@ const drawClass = function (elem, classDef) {
}
}
const id = 'classId' + classDef.id
const id = 'classId' + (classCnt % total)
const classInfo = {
id: id,
label: classDef.id,
@ -257,24 +265,28 @@ const drawClass = function (elem, classDef) {
height: 0
}
const g = elem.append('g')
const g = elem
.append('g')
.attr('id', id)
.attr('class', 'classGroup')
const title = g.append('text')
const title = g
.append('text')
.attr('x', conf.padding)
.attr('y', conf.textHeight + conf.padding)
.text(classDef.id)
const titleHeight = title.node().getBBox().height
const membersLine = g.append('line') // text label for the x axis
const membersLine = g
.append('line') // text label for the x axis
.attr('x1', 0)
.attr('y1', conf.padding + titleHeight + conf.dividerMargin / 2)
.attr('y2', conf.padding + titleHeight + conf.dividerMargin / 2)
const members = g.append('text') // text label for the x axis
const members = g
.append('text') // text label for the x axis
.attr('x', conf.padding)
.attr('y', titleHeight + (conf.dividerMargin) + conf.textHeight)
.attr('y', titleHeight + conf.dividerMargin + conf.textHeight)
.attr('fill', 'white')
.attr('class', 'classText')
@ -286,14 +298,25 @@ const drawClass = function (elem, classDef) {
const membersBox = members.node().getBBox()
const methodsLine = g.append('line') // text label for the x axis
const methodsLine = g
.append('line') // text label for the x axis
.attr('x1', 0)
.attr('y1', conf.padding + titleHeight + conf.dividerMargin + membersBox.height)
.attr('y2', conf.padding + titleHeight + conf.dividerMargin + membersBox.height)
.attr(
'y1',
conf.padding + titleHeight + conf.dividerMargin + membersBox.height
)
.attr(
'y2',
conf.padding + titleHeight + conf.dividerMargin + membersBox.height
)
const methods = g.append('text') // text label for the x axis
const methods = g
.append('text') // text label for the x axis
.attr('x', conf.padding)
.attr('y', titleHeight + 2 * conf.dividerMargin + membersBox.height + conf.textHeight)
.attr(
'y',
titleHeight + 2 * conf.dividerMargin + membersBox.height + conf.textHeight
)
.attr('fill', 'white')
.attr('class', 'classText')
@ -318,6 +341,7 @@ const drawClass = function (elem, classDef) {
classInfo.height = classBox.height + conf.padding + 0.5 * conf.dividerMargin
idCache[id] = classInfo
classCnt++
return classInfo
}
@ -334,14 +358,13 @@ export const setConf = function (cnf) {
* @param id
*/
export const draw = function (text, id) {
idCache = {}
parser.yy.clear()
parser.parse(text)
logger.info('Rendering diagram ' + text)
/// / Fetch the default direction, use TD if none was found
const diagram = d3.select(`[id="${id}"]`)
const diagram = d3.select(`[id='${id}']`)
insertMarkers(diagram)
// Layout graph, Create a new directed graph
@ -361,6 +384,7 @@ export const draw = function (text, id) {
const classes = classDb.getClasses()
const keys = Object.keys(classes)
total = keys.length
for (let i = 0; i < keys.length; i++) {
const classDef = classes[keys[i]]
const node = drawClass(diagram, classDef)
@ -373,24 +397,45 @@ export const draw = function (text, id) {
const relations = classDb.getRelations()
relations.forEach(function (relation) {
logger.info('tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation))
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), { relation: relation })
logger.info(
'tjoho' +
getGraphId(relation.id1) +
getGraphId(relation.id2) +
JSON.stringify(relation)
)
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), {
relation: relation
})
})
dagre.layout(g)
g.nodes().forEach(function (v) {
if (typeof v !== 'undefined') {
if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {
logger.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)))
d3.select('#' + v).attr('transform', 'translate(' + (g.node(v).x - (g.node(v).width / 2)) + ',' + (g.node(v).y - (g.node(v).height / 2)) + ' )')
d3.select('#' + v).attr(
'transform',
'translate(' +
(g.node(v).x - g.node(v).width / 2) +
',' +
(g.node(v).y - g.node(v).height / 2) +
' )'
)
}
})
g.edges().forEach(function (e) {
logger.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)))
drawEdge(diagram, g.edge(e), g.edge(e).relation)
if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') {
logger.debug(
'Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e))
)
drawEdge(diagram, g.edge(e), g.edge(e).relation)
}
})
diagram.attr('height', '100%')
diagram.attr('width', '100%')
diagram.attr('viewBox', '0 0 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20))
diagram.attr(
'viewBox',
'0 0 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20)
)
}
export default {