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

fix class diagram mermaid

src/diagrams/class/classRenderer.js

@@ -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) {
+  let x, y
-    const g = elem.append('g')
+  const l = path.points.length
-      .attr('class', 'classLabel')
+  if (l % 2 !== 0 && l > 1) {
-    const label = g.append('text')
+    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(
-    .attr('y2', conf.padding + titleHeight + conf.dividerMargin + membersBox.height)
+      '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))
+    logger.info(
-    g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), { relation: relation })
+      '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)))
+    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 {